.public-webshop{
width:100%;
}

.public-webshop-title{
margin-bottom:24px;
}

.public-webshop-title span{
display:block;
margin-bottom:6px;
color:#3f9cff;
font-size:9px;
letter-spacing:1.8px;
}

.public-webshop-title h1{
margin:0 0 7px;
color:#fff;
font-size:28px;
}

.public-webshop-title p{
margin:0;
color:#738ba3;
font-size:11px;
line-height:1.6;
}

.public-webshop-shop-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:24px;
max-width:900px;
}

.public-webshop-shop-card{
padding:16px;
display:block;
border:1px solid #183047;
border-radius:10px;
background:#07111b;
text-decoration:none;
transition:transform .16s ease,border-color .16s ease;
}

.public-webshop-shop-card:hover{
transform:translateY(-2px);
border-color:#2c6c9e;
}

.public-webshop-shop-card h2{
margin:0 0 12px;
color:#f3f8fc;
font-size:19px;
text-align:center;
}

.public-webshop-shop-image{
height:260px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
border-radius:7px;
background:#04090e;
}

.public-webshop-shop-image img{
max-width:100%;
max-height:100%;
object-fit:contain;
}

.public-webshop-shop-image span{
color:#526b81;
font-size:9px;
}

.public-webshop-shop-card p{
min-height:42px;
margin:12px 4px 2px;
color:#8195a8;
font-size:11px;
line-height:1.45;
text-align:center;
}

.public-webshop-empty{
padding:30px;
border:1px solid #183047;
border-radius:8px;
color:#6e879d;
text-align:center;
}

.public-webshop-login-required{
max-width:620px;
margin:0 auto;
padding:35px;
border:1px solid #18344b;
border-radius:10px;
background:#07121c;
text-align:center;
}

.public-webshop-login-required>span{
color:#3d96e8;
font-size:8px;
letter-spacing:1.6px;
}

.public-webshop-login-required h1{
margin:8px 0 10px;
color:#fff;
font-size:23px;
}

.public-webshop-login-required p{
margin:0 0 20px;
color:#70889d;
font-size:10px;
}

.public-webshop-login-error{
margin-bottom:14px;
padding:10px;
border:1px solid rgba(226,75,75,.25);
border-radius:6px;
background:rgba(226,75,75,.07);
color:#e79494;
font-size:9px;
}

.public-webshop-login-form{
max-width:360px;
margin:0 auto;
display:flex;
flex-direction:column;
gap:9px;
}

.public-webshop-login-form input{
height:42px;
padding:0 12px;
box-sizing:border-box;
border:1px solid #1b3950;
border-radius:6px;
outline:0;
background:#050d15;
color:#dceaf5;
}

.public-webshop-login-form button{
height:42px;
border:1px solid #2b7fbd;
border-radius:6px;
background:#14517b;
color:#fff;
font-weight:800;
cursor:pointer;
}

.public-webshop-browser{
display:grid;
grid-template-columns:230px minmax(0,1fr);
gap:16px;
align-items:start;
}

.public-webshop-sidebar{
overflow:hidden;
border:1px solid #172c3e;
border-radius:7px;
background:#020508;
}

.public-webshop-search{
padding:9px;
background:#050a10;
}

.public-webshop-search input{
width:100%;
height:39px;
box-sizing:border-box;
padding:0 11px;
border:1px solid #24384c;
border-radius:4px;
outline:0;
background:#101d2e;
color:#fff;
}

.public-webshop-group{
min-height:34px;
padding:0 10px;
display:flex;
align-items:center;
justify-content:center;
background:#111f31;
color:#eef5fb;
font-size:9px;
text-transform:uppercase;
}

.public-webshop-categories>a{
min-height:36px;
padding:0 14px;
display:flex;
align-items:center;
gap:9px;
border-top:1px solid #101010;
color:#e6e9ec;
font-size:9px;
text-decoration:none;
}

.public-webshop-categories>a:hover,
.public-webshop-categories>a.active{
background:#0b1722;
color:#58abef;
}

.public-webshop-category-icon{
color:#7890a5;
}

.public-webshop-products{
min-height:420px;
}

.public-webshop-no-products{
padding:18px;
border:1px solid #d9bd67;
background:#fff0bc;
color:#7a5913;
font-size:10px;
}

.public-webshop-products-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:13px;
}

.public-webshop-product{
padding:13px;
border:1px solid #183047;
border-radius:7px;
background:#07111b;
text-align:center;
}

.public-webshop-product-image{
height:110px;
display:flex;
align-items:center;
justify-content:center;
}

.public-webshop-product-image img{
max-width:100px;
max-height:100px;
}

.public-webshop-product h3{
margin:8px 0;
color:#dcebf6;
font-size:10px;
}

.public-webshop-product>strong{
color:#57b5f7;
font-size:9px;
}

@media(max-width:900px){
.public-webshop-products-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}

@media(max-width:700px){
.public-webshop-shop-grid{
grid-template-columns:1fr;
}
.public-webshop-browser{
grid-template-columns:1fr;
}
.public-webshop-shop-image{
height:220px;
}
}

@media(max-width:440px){
.public-webshop-products-grid{
grid-template-columns:1fr;
}
}


.public-webshop-product{
display:block;
text-decoration:none;
transition:transform .15s ease,border-color .15s ease;
}
.public-webshop-product:hover{
transform:translateY(-2px);
border-color:#2a6c9d;
}
.public-webshop-product-action{
display:block;
margin-top:10px;
padding:7px;
border:1px solid #1d5077;
border-radius:5px;
background:#0b2b43;
color:#7bc3f7;
font-size:8px;
font-weight:800;
}

.public-webshop-product-configurator{
max-width:900px;
margin:0 auto;
}
.public-webshop-config-topbar{
margin-bottom:12px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.public-webshop-config-topbar a{
color:#72baf0;
font-size:9px;
text-decoration:none;
}
.public-webshop-config-topbar span{
color:#4f7591;
font-size:8px;
letter-spacing:1.5px;
}
.public-webshop-config-grid{
display:grid;
grid-template-columns:270px minmax(0,1fr);
gap:14px;
align-items:start;
}
.public-webshop-item-preview{
position:sticky;
top:15px;
padding:16px;
border:1px solid #1b3449;
border-radius:8px;
background:#050c13;
text-align:center;
}
.public-webshop-item-preview-image{
min-height:220px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
border-radius:6px;
background:#020508;
}
.public-webshop-item-preview-image img{
max-width:100%;
max-height:250px;
object-fit:contain;
}
.public-webshop-item-preview h2{
margin:14px 0 5px;
color:#52e89c;
font-size:13px;
}
.public-webshop-item-code{
color:#617c91;
font-size:8px;
}
.public-webshop-preview-options{
margin-top:12px;
padding:10px;
border-top:1px solid #153047;
color:#7fb4d8;
font-size:8px;
line-height:1.65;
}
.public-webshop-options{
display:flex;
flex-direction:column;
gap:10px;
}
.public-webshop-options fieldset{
margin:0;
padding:14px;
border:1px solid #28475d;
border-radius:6px;
background:#07121c;
color:#91a9bc;
}
.public-webshop-options legend{
padding:0 6px;
color:#5c87a6;
font-size:9px;
}
.public-webshop-options label:not(.ws-check){
margin-bottom:10px;
display:flex;
align-items:center;
justify-content:space-between;
gap:15px;
color:#c2d2de;
font-size:9px;
}
.public-webshop-options select{
min-width:145px;
height:34px;
padding:0 8px;
border:1px solid #234158;
border-radius:4px;
outline:0;
background:#030a10;
color:#d9e6ef;
font-size:9px;
}
.ws-check{
margin:7px 0;
display:flex;
align-items:flex-start;
gap:7px;
color:#c0d0dc;
font-size:9px;
line-height:1.35;
}
.ws-check input{
accent-color:#3297df;
}
.public-webshop-options small{
display:block;
margin-top:8px;
color:#6c879b;
font-size:8px;
}
.ws-warning{
margin:9px 0 0;
padding:9px;
border:1px solid #304a5e;
background:#091723;
color:#7e9bb0;
font-size:8px;
line-height:1.5;
}
.ws-socket-row{
margin-bottom:10px;
}
.ws-socket-row select{
margin-left:23px;
opacity:.65;
}
.public-webshop-price-box div{
margin:5px 0;
color:#9db2c2;
font-size:9px;
}
.public-webshop-price-box strong{
color:#62c6ff;
}
.public-webshop-stage-note{
padding:11px;
border:1px solid rgba(238,178,71,.2);
border-radius:6px;
background:rgba(238,178,71,.06);
color:#b89c68;
font-size:8px;
line-height:1.55;
}
.public-webshop-proceed{
height:43px;
border:1px solid #2c7fb9;
border-radius:6px;
background:#14527c;
color:#fff;
font-size:9px;
font-weight:900;
cursor:pointer;
}
.public-webshop-proceed:hover{
background:#1b6698;
}
@media(max-width:760px){
.public-webshop-config-grid{grid-template-columns:1fr}
.public-webshop-item-preview{position:static}
}


.public-webshop-login-hint{
margin-top:18px;
padding:13px 15px;
border:1px solid #1c3e57;
border-radius:7px;
background:#061521;
color:#78a6c7;
font-size:9px;
line-height:1.55;
}


/* ================================================================
   CONFIGURADOR - CORREÇÃO DE LARGURA
================================================================ */

.public-webshop,
.public-webshop-product-configurator,
.public-webshop-config-grid,
.public-webshop-item-preview,
.public-webshop-options,
.public-webshop-options fieldset,
.public-webshop-options label,
.public-webshop-options select,
.public-webshop-options input {
    box-sizing:
        border-box;
}


.public-webshop-product-configurator {
    width:
        100%;

    max-width:
        100%;

    min-width:
        0;

    overflow:
        hidden;
}


.public-webshop-config-grid {
    width:
        100%;

    max-width:
        100%;

    min-width:
        0;

    grid-template-columns:
        minmax(190px, 270px)
        minmax(0, 1fr);
}


.public-webshop-item-preview,
.public-webshop-options {
    width:
        100%;

    max-width:
        100%;

    min-width:
        0;
}


.public-webshop-options fieldset {
    width:
        100%;

    max-width:
        100%;

    /*
     * fieldset possui min-width:min-content em alguns browsers.
     * Este era o principal motivo do Harmony invadir a coluna direita.
     */
    min-width:
        0;

    overflow:
        hidden;
}


.public-webshop-options label:not(.ws-check) {
    width:
        100%;

    max-width:
        100%;

    min-width:
        0;
}


.public-webshop-options select {
    width:
        min(
            330px,
            58%
        );

    max-width:
        100%;

    min-width:
        0;

    text-overflow:
        ellipsis;
}


.public-webshop-options select option {
    max-width:
        100%;
}


.ws-warning {
    width:
        100%;

    max-width:
        100%;

    overflow-wrap:
        anywhere;
}


/*
 * Se a coluna central ficar realmente estreita, preview e opções
 * ficam um abaixo do outro DENTRO da coluna central.
 * Não invade Eventos/Invasões.
 */
@media(max-width:1080px) {

    .public-page-center
    .public-webshop-config-grid {
        grid-template-columns:
            1fr;
    }


    .public-page-center
    .public-webshop-item-preview {
        position:
            static;
    }
}


/* ================================================================
   CUPOM
================================================================ */

.public-webshop-coupon-row {
    display:
        grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap:
        8px;

    width:
        100%;
}


.public-webshop-coupon-row input {
    width:
        100%;

    min-width:
        0;

    height:
        36px;

    padding:
        0
        10px;

    border:
        1px
        solid
        #234158;

    border-radius:
        5px;

    outline:
        0;

    background:
        #030a10;

    color:
        #d9e6ef;

    font-size:
        9px;

    text-transform:
        uppercase;
}


.public-webshop-coupon-button {
    min-width:
        82px;

    height:
        36px;

    padding:
        0
        12px;

    border:
        1px
        solid
        #2c7fb9;

    border-radius:
        5px;

    background:
        #103f61;

    color:
        #fff;

    font-size:
        8px;

    font-weight:
        900;

    cursor:
        pointer;
}


.public-webshop-coupon-button:hover {
    background:
        #185985;
}


.public-webshop-coupon-button:disabled {
    opacity:
        .55;

    cursor:
        wait;
}


.public-webshop-coupon-message {
    min-height:
        18px;

    margin-top:
        8px;

    font-size:
        8px;

    line-height:
        1.45;
}


.public-webshop-coupon-message.ok {
    color:
        #5cdda0;
}


.public-webshop-coupon-message.error {
    color:
        #ef8c8c;
}


.public-webshop-discount-line strong {
    color:
        #5cdda0 !important;
}


@media(max-width:520px) {

    .public-webshop-coupon-row {
        grid-template-columns:
            1fr;
    }


    .public-webshop-coupon-button {
        width:
            100%;
    }
}