@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
    --bg:#f6f5f2;
    --card:#ffffff;
    --text:#111827;
    --muted:#6b7280;
    --line:#e8e1d5;
    --black:#111827;
    --green:#166534;
    --red:#dc2626;
    --gold:#c89b3c;
    --gold-soft:#ead7ae;
    --gold-light:#fffaf0;
    --cream:#faf8f3;
    --font-heading:"Cormorant Garamond",Georgia,serif;
    --font-body:"Inter","Segoe UI",Arial,sans-serif;
    --shadow:0 6px 18px rgba(0,0,0,.05);
}

*{
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
}

html{
    scroll-behavior:auto;
}

body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}

a{
    text-decoration:none;
    color:inherit;
}

img{
    max-width:100%;
    display:block;
}

button,
input,
select,
textarea{
    font-family:inherit;
}

.container{
    max-width:1280px;
    margin:auto;
    padding:22px;
}

.breadcrumb{
    font-size:13px;
    color:var(--muted);
    margin-bottom:14px;
    font-weight:600;
}

h1,h2,h3,
.section-title,
.related-card h2,
.area-head h2{
    font-family:var(--font-heading);
    font-weight:600;
    letter-spacing:-.035em;
}

.card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:var(--shadow);
    overflow:hidden;
}

/* PRODUCT LAYOUT */

.product-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 430px;
    gap:26px;
    align-items:start;
}

.left-column{
    display:flex;
    flex-direction:column;
    gap:22px;
    min-width:0;
}

.gallery-card{
    padding:18px;
}

.main-image-wrap{
    position:relative;
    height:540px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--line);
    background:#fff;
    overflow:hidden;
    border-radius:14px;
}

.main-image{
    width:100%;
    height:100%;
    max-width:96%;
    max-height:96%;
    object-fit:contain;
    background:#fff;
}

.zoom-label{
    position:absolute;
    bottom:14px;
    right:14px;
    font-size:11px;
    background:#111827;
    color:#fff;
    padding:8px 12px;
    border-radius:10px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.thumb-row{
    display:flex;
    gap:10px;
    margin-top:14px;
    overflow-x:auto;
    padding-bottom:5px;
    -webkit-overflow-scrolling:touch;
}

.thumb-row::-webkit-scrollbar{
    display:none;
}

.thumb-row img{
    width:72px;
    height:72px;
    object-fit:cover;
    border:1px solid var(--line);
    background:#fff;
    padding:4px;
    cursor:pointer;
    flex:0 0 72px;
    border-radius:10px;
}

.thumb-row img.active-thumb{
    border-color:var(--gold);
    box-shadow:0 0 0 2px rgba(200,155,60,.16);
}

/* INFO CARD */

.info-card{
    padding:24px;
    position:sticky;
    top:110px;
}

.badges{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:12px;
}

.badge{
    background:#f3f4f6;
    color:#3f3a35;
    font-size:11px;
    font-weight:800;
    padding:7px 10px;
    border-radius:8px;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.badge.tile{
    background:var(--gold-light);
    color:#8a6416;
    border:1px solid var(--gold-soft);
}

.badge.dark{
    background:#edf7ef;
    color:var(--green);
}

h1{
    font-size:38px;
    line-height:1;
    margin:0 0 12px;
    color:#111;
}

.sku{
    color:var(--muted);
    font-size:14px;
    margin-bottom:14px;
    font-weight:600;
}

.price-box{
    background:#fff;
    border:1px solid var(--line);
    border-radius:14px;
    padding:18px;
    margin:16px 0;
}

.price{
    font-size:38px;
    font-weight:900;
    color:#111;
    letter-spacing:-1px;
}

.price small{
    font-size:15px;
    color:#444;
    font-weight:700;
}

.vat-note,
.box-note{
    font-size:13px;
    color:#6b7280;
    margin-top:6px;
    font-weight:700;
}

.section-title{
    font-size:24px;
    margin:0 0 12px;
    color:#111;
}

.tile-selector-box,
.calculator,
.qty-card,
.delivery-box,
.why-box{
    background:#fff;
    border:1px solid var(--line);
    margin-top:16px;
    border-radius:14px;
    overflow:hidden;
}

.tile-selector-box,
.calculator,
.qty-card,
.why-box{
    padding:16px;
}

.selector-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    margin-bottom:15px;
}

.selector-head p{
    margin:4px 0 0;
    color:var(--muted);
    font-size:13px;
    font-weight:600;
}

.stock-pill{
    background:#edf7ef;
    color:var(--green);
    padding:7px 10px;
    font-size:12px;
    font-weight:900;
    white-space:nowrap;
    border-radius:8px;
}

/* PREMIUM SIZE CARDS */

.size-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
}

.size-card{
    width:100%;
    border:1px solid var(--gold-soft);
    background:linear-gradient(180deg,#fff 0%,#fffdf8 100%);
    padding:16px;
    cursor:pointer;
    transition:border-color .16s ease, box-shadow .16s ease;
    text-align:left;
    border-radius:14px;
    box-shadow:0 4px 12px rgba(0,0,0,.04);
}

.size-card:hover,
.size-card.active{
    border-color:var(--gold);
}

.size-card.active{
    background:#fffaf0;
    box-shadow:0 0 0 2px rgba(200,155,60,.14);
}

.size-card-inner{
    display:grid;
    grid-template-columns:120px 1fr;
    gap:18px;
    align-items:center;
}

.size-img{
    width:120px;
    height:92px;
    background:#f3f3f3;
    object-fit:cover;
    border:1px solid #eee4d2;
    flex:0 0 120px;
    border-radius:12px;
}

.size-name{
    font-size:26px;
    font-weight:800;
    line-height:1.05;
    letter-spacing:-.5px;
    margin-bottom:8px;
}

.size-meta{
    font-size:16px;
    color:#5f6368;
    font-weight:500;
    padding:7px 0;
    border-top:1px solid #eee4d2;
}

.size-price{
    font-size:22px;
    font-weight:800;
    margin-top:10px;
    color:var(--gold);
    line-height:1.05;
}

/* CALCULATOR */

.calc-main-row,
.result-box{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.calc-display,
.result{
    background:#fff;
    border:1px solid var(--line);
    padding:13px;
    border-radius:12px;
}

.label{
    font-size:11px;
    color:var(--muted);
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.value{
    font-size:20px;
    font-weight:900;
    margin-top:4px;
}

#waste,
#modalWaste,
#patternSelect{
    width:100%;
    height:46px;
    border:1px solid var(--line);
    border-radius:10px;
    background:#fff;
    padding:0 12px;
    font-size:15px;
    font-weight:700;
    outline:none;
    box-shadow:none;
}

.open-calc-btn,
.sample-btn,
.add-btn{
    width:100%;
    margin-top:12px;
    cursor:pointer;
    font-weight:900;
    border-radius:12px;
}

.open-calc-btn,
.sample-btn{
    min-height:50px;
    padding:13px;
    border:1px solid #111;
    background:#fff;
    color:#111;
    font-size:15px;
}

.add-btn{
    min-height:54px;
    padding:15px;
    border:1px solid #111;
    background:#111;
    color:#fff;
    font-size:16px;
}

.total-row,
.unit-total{
    margin-top:14px;
    background:#111;
    color:#fff;
    padding:16px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}

.total-row strong,
.unit-total strong{
    font-size:25px;
}

.total-label{
    font-size:12px;
    color:#d1d5db;
}

.total-right{
    text-align:right;
}

/* UNIT */

.qty-wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:12px 0;
}

.qty-wrap label{
    font-size:14px;
    font-weight:900;
}

.qty-box{
    width:110px;
    padding:12px;
    border:1px solid var(--line);
    border-radius:10px;
    font-size:16px;
    font-weight:900;
    text-align:center;
    background:#fff;
}

/* DELIVERY */

.delivery-row{
    display:flex;
    gap:12px;
    padding:15px;
    border-bottom:1px solid var(--line);
    align-items:flex-start;
    font-size:14px;
}

.delivery-icon{
    color:var(--green);
    font-size:20px;
}

.delivery-row strong{
    display:block;
    margin-bottom:3px;
}

.delivery-row span{
    color:var(--muted);
    font-size:13px;
}

.delivery-list{
    padding:14px 22px;
    margin:0;
}

.delivery-list li{
    margin:0 0 10px 16px;
    font-size:13px;
    line-height:1.45;
}

.why-box{
    font-size:13px;
    line-height:1.7;
}

/* TABS */

.product-tabs{
    padding:0;
    overflow:hidden;
}

.tab-buttons{
    display:flex;
    background:#fff;
    border-bottom:1px solid var(--line);
}

.tab-btn{
    flex:1;
    padding:15px;
    border:0;
    background:transparent;
    font-size:13px;
    font-weight:900;
    cursor:pointer;
    color:var(--muted);
    letter-spacing:.05em;
    text-transform:uppercase;
}

.tab-btn.active{
    background:#fff;
    color:#111;
    border-bottom:3px solid #111;
}

.tab-content{
    display:none;
    padding:24px;
    line-height:1.8;
    color:#374151;
    overflow-x:auto;
    background:#fff;
}

.tab-content.active{
    display:block;
}

.tab-content table,
.spec-table{
    width:100%;
    border-collapse:collapse;
}

.tab-content td,
.tab-content th,
.spec-table td{
    border-bottom:1px solid var(--line);
    padding:12px 8px;
    font-size:14px;
}

.tab-content td:first-child,
.spec-table td:first-child{
    font-weight:900;
    color:var(--muted);
    width:35%;
}

.tab-content td:last-child,
.spec-table td:last-child{
    font-weight:700;
    color:#111;
}

/* SAMPLE FORM */

.sample-dropdown-form{
    display:none;
    margin-top:16px;
    padding:18px;
    border:1px solid var(--line);
    background:#fff;
    border-radius:14px;
}

.sample-dropdown-form.active{
    display:block;
}

.sample-dropdown-form h3{
    margin:0 0 10px;
    font-family:var(--font-heading);
    font-size:28px;
    font-weight:600;
}

.sample-dropdown-form p{
    margin:0 0 18px;
    color:#111;
    font-size:15px;
    line-height:1.5;
}

.sample-dropdown-form p strong,
.sample-pay-box h4 strong{
    color:var(--gold);
}

.sample-form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.sample-field.full{
    grid-column:1 / -1;
}

.sample-field label{
    display:block;
    font-size:13px;
    font-weight:700;
    margin-bottom:7px;
    color:#111;
}

.sample-field input,
.sample-field textarea{
    width:100%;
    border:1px solid #d8d2c8;
    background:#fff;
    padding:12px;
    font-size:15px;
    outline:none;
    border-radius:8px;
}

.sample-field input:focus,
.sample-field textarea:focus{
    border-color:var(--gold);
    box-shadow:0 0 0 3px rgba(200,155,60,.12);
}

.sample-field textarea{
    min-height:84px;
    resize:vertical;
}

.sample-pay-box{
    margin-top:18px;
    padding:0;
    background:#fff;
    border:0;
}

.sample-pay-box h4{
    margin:0 0 12px;
    font-family:var(--font-heading);
    font-size:22px;
    font-weight:600;
}

.sample-payment-options{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}

.sample-payment-options button{
    border:1px solid #d8c9ad;
    background:#fff;
    color:#111;
    border-radius:8px;
    padding:13px 10px;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
}

.sample-message{
    margin-top:12px;
    font-weight:900;
    font-size:14px;
    line-height:1.5;
}

/* RELATED */

.related-card{
    margin-top:22px;
    padding:22px;
}

.related-card h2{
    margin:0 0 14px;
    font-size:34px;
}

.related-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}

.related-item{
    min-height:205px;
    background:#fff;
    border:1px solid var(--line);
    padding:12px;
    text-align:center;
    font-size:12px;
    font-weight:900;
    border-radius:12px;
}

.related-item img{
    width:100%;
    height:125px;
    object-fit:contain;
    background:#fff;
}

/* AREA MODAL */

.area-modal{
    display:none;
    position:fixed;
    z-index:99999;
    inset:0;
    background:rgba(17,24,39,.54);
}

.area-panel{
    width:700px;
    max-width:96%;
    max-height:94vh;
    overflow:auto;
    background:#fff;
    margin:18px auto;
    box-shadow:0 18px 50px rgba(0,0,0,.24);
    border-radius:16px;
}

.area-head{
    background:#111;
    color:#fff;
    padding:16px 22px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:sticky;
    top:0;
    z-index:2;
}

.area-head h2{
    margin:0;
    font-size:24px;
}

.area-close{
    position:absolute;
    right:18px;
    top:10px;
    width:38px;
    height:38px;
    border:0;
    background:transparent;
    color:#ddd;
    cursor:pointer;
    font-size:32px;
}

.area-body{
    padding:22px;
}

.area-title{
    font-size:18px;
    font-weight:900;
    margin:12px 0 16px;
}

.preset-row{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
    margin-bottom:16px;
}

.preset-btn{
    border:1px solid var(--line);
    background:#fff;
    padding:10px;
    font-weight:900;
    cursor:pointer;
    border-radius:10px;
}

.pattern-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-bottom:18px;
}

.pattern-box{
    background:#fff;
    border:1px solid var(--line);
    padding:12px;
    border-radius:12px;
}

.pattern-box label{
    display:block;
    font-size:13px;
    font-weight:900;
    margin-bottom:7px;
}

.area-table{
    width:100%;
    border-collapse:collapse;
}

.area-table th{
    font-weight:800;
    color:#555;
    font-size:14px;
    padding-bottom:8px;
    text-align:center;
}

.area-table td{
    padding:7px 4px;
    color:#1f245e;
    font-size:16px;
}

.area-name{
    width:145px;
}

.area-input{
    width:76px;
    padding:10px;
    border:1px solid var(--line);
    border-radius:8px;
    text-align:center;
    font-size:16px;
}

.area-eq{
    width:22px;
    text-align:center;
}

.area-val{
    width:84px;
    text-align:right;
    font-weight:900;
}

.remove-btn{
    background:#d1d5db;
    color:#fff;
    border:0;
    width:24px;
    height:24px;
    border-radius:8px;
    font-weight:900;
    cursor:pointer;
    line-height:20px;
}

.remove-btn:hover{
    background:var(--red);
}

.add-line{
    margin:14px 0;
    color:#059669;
    font-size:16px;
    font-weight:900;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:8px;
    border:0;
    background:none;
    padding:0;
}

.section-total{
    text-align:right;
    color:#1f245e;
    font-size:16px;
    margin-top:-28px;
    font-weight:900;
}

.divider{
    height:1px;
    background:var(--line);
    margin:24px -22px;
}

.sub-head{
    display:flex;
    align-items:center;
    gap:8px;
    color:#1f245e;
    font-size:16px;
    font-weight:900;
    margin-bottom:14px;
}

.modal-result{
    background:#fff;
    border-top:1px solid var(--line);
    padding:18px 22px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.modal-result-box{
    background:#fff;
    border:1px solid var(--line);
    padding:13px;
    border-radius:12px;
}

.modal-result-box span{
    display:block;
    font-size:12px;
    color:var(--muted);
    margin-bottom:4px;
    font-weight:900;
}

.modal-result-box strong{
    font-size:22px;
}

.apply-area-btn,
.reset-area-btn{
    grid-column:1 / -1;
    padding:15px;
    font-size:17px;
    font-weight:900;
    cursor:pointer;
    border-radius:12px;
}

.apply-area-btn{
    border:0;
    background:#111;
    color:#fff;
}

.reset-area-btn{
    border:1px solid #111;
    background:#fff;
    color:#111;
}

/* RESPONSIVE */

@media(max-width:1050px){
    .product-layout{
        grid-template-columns:1fr;
    }

    .info-card{
        position:static;
    }

    .main-image-wrap{
        height:470px;
    }

    .related-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){
    body{
        padding-bottom:76px;
    }

    .container{
        padding:14px;
        width:100%;
        max-width:100%;
    }

    .breadcrumb{
        font-size:12px;
        line-height:1.5;
        margin:4px 0 12px;
        white-space:nowrap;
        overflow-x:auto;
    }

    .product-layout{
        display:flex;
        flex-direction:column;
        gap:14px;
    }

    .left-column{
        gap:14px;
    }

    .card{
        border-radius:14px;
        box-shadow:0 5px 16px rgba(0,0,0,.05);
    }

    .gallery-card{
        padding:12px;
        background:#fff;
    }

    .main-image-wrap{
        height:auto;
        aspect-ratio:1 / 1;
        max-height:330px;
        border-radius:12px;
    }

    .thumb-row{
        gap:8px;
        padding:10px 0 2px;
    }

    .thumb-row img{
        width:62px;
        height:62px;
        flex-basis:62px;
        border-radius:8px;
    }

    .info-card{
        padding:14px;
    }

    h1{
        font-size:29px;
        line-height:1;
    }

    .price{
        font-size:30px;
    }

    .selector-head{
        flex-direction:column;
    }

    .size-grid{
        grid-template-columns:1fr;
    }

    .size-card{
        padding:12px;
    }

    .size-card-inner{
        grid-template-columns:90px 1fr;
        gap:12px;
    }

    .size-img{
        width:90px;
        height:72px;
    }
.size-name{
    font-size:20px;
}

.size-meta{
    font-size:13px;
}

.size-price{
    font-size:18px;
}
    .tab-buttons{
        flex-direction:row;
        overflow-x:auto;
    }

    .tab-btn{
        min-width:170px;
        white-space:nowrap;
        text-align:center;
    }

    .tab-content{
        padding:16px;
    }

    .tab-content table,
    .spec-table{
        min-width:520px;
    }

    .sample-form-grid,
    .sample-payment-options{
        grid-template-columns:1fr;
    }

    .related-card{
        padding:15px;
    }

    .related-grid{
        grid-template-columns:1fr 1fr;
        gap:10px;
    }

    .related-item img{
        height:120px;
    }

    #tileCartForm,
    #unitCartForm{
        position:sticky;
        bottom:0;
        z-index:50;
        background:#fff;
        padding-top:8px;
    }

    .area-panel{
        margin:0;
        max-width:100%;
        width:100%;
        height:100vh;
        max-height:100vh;
        border-radius:0;
    }

    .area-head h2{
        font-size:20px;
    }

    .area-body{
        padding:14px;
        overflow-x:auto;
    }

    .preset-row,
    .pattern-row,
    .modal-result{
        grid-template-columns:1fr;
    }

    .area-table{
        min-width:620px;
    }

    .section-total{
        margin-top:8px;
        text-align:left;
    }

    .modal-result{
        padding:14px 14px 24px;
    }
}

@media(max-width:650px){
    .calc-main-row,
    .result-box{
        grid-template-columns:1fr 1fr;
        gap:8px;
    }

    .value{
        font-size:18px;
    }

    .total-row,
    .unit-total{
        padding:14px;
    }

    .total-row strong,
    .unit-total strong{
        font-size:22px;
    }
}

@media(max-width:480px){
    .container{
        padding:12px;
    }

    .main-image-wrap{
        max-height:285px;
    }

    h1{
        font-size:27px;
    }

    .price{
        font-size:28px;
    }

    .calc-main-row,
    .result-box{
        grid-template-columns:1fr;
    }

    .related-grid{
        grid-template-columns:1fr 1fr;
    }

    .related-item img{
        height:110px;
    }
}

@media(max-width:420px){
    .main-image-wrap{
        max-height:270px;
    }

    .price{
        font-size:26px;
    }

    .add-btn{
        font-size:15px;
    }



/* ===============================
   CLEAN AREA MODAL FIX
   =============================== */

.area-modal{
    background:rgba(17,24,39,.55) !important;
}

.area-panel{
    width:700px !important;
    max-width:96% !important;
    background:#fff !important;
    border-radius:16px !important;
    overflow:hidden !important;
    box-shadow:0 20px 60px rgba(0,0,0,.28) !important;
}

.area-head{
    background:#111 !important;
    color:#fff !important;
    padding:16px 22px !important;
    border-radius:0 !important;
}

.area-head h2{
    font-family:"Cormorant Garamond",Georgia,serif !important;
    font-size:26px !important;
    font-weight:600 !important;
}

.area-close{
    background:transparent !important;
    color:#fff !important;
    border:0 !important;
    font-size:34px !important;
    top:9px !important;
}

.area-body{
    padding:22px !important;
}

.preset-btn{
    border:1px solid #e5ded2 !important;
    background:#fff !important;
    border-radius:8px !important;
    font-size:14px !important;
    font-weight:800 !important;
}

.pattern-box{
    border:1px solid #e5ded2 !important;
    border-radius:10px !important;
    background:#fff !important;
}

.pattern-box label,
.area-table th{
    font-size:13px !important;
    font-weight:800 !important;
    color:#333 !important;
}

.area-title,
.sub-head{
    font-size:20px !important;
    font-weight:800 !important;
    color:#06104a !important;
}

.area-input{
    width:74px !important;
    height:42px !important;
    border:1px solid #e5ded2 !important;
    border-radius:8px !important;
    font-size:15px !important;
    font-weight:700 !important;
}

.area-table td{
    font-size:16px !important;
    color:#06104a !important;
}

.add-line{
    color:#059669 !important;
    font-size:15px !important;
    font-weight:800 !important;
}

.section-total{
    color:#06104a !important;
    font-size:16px !important;
    font-weight:800 !important;
}

.modal-result{
    grid-template-columns:1fr 1fr !important;
    padding:18px 22px !important;
    gap:12px !important;
    background:#fff !important;
}

.modal-result-box{
    border:1px solid #e5ded2 !important;
    border-radius:10px !important;
    padding:14px !important;
}

.modal-result-box span{
    font-size:12px !important;
    font-weight:800 !important;
    color:#6b7280 !important;
}

.modal-result-box strong{
    font-size:24px !important;
    font-weight:800 !important;
    color:#06104a !important;
}

.apply-area-btn,
.reset-area-btn{
    border-radius:10px !important;
    font-size:16px !important;
    font-weight:900 !important;
}

.apply-area-btn{
    background:#111 !important;
    color:#fff !important;
}

/* remove too bold size card */
.size-name{
    font-size:26px !important;
    font-weight:800 !important;
}

.size-meta{
    font-size:15px !important;
    font-weight:500 !important;
}

.size-price{
    font-size:22px !important;
    font-weight:800 !important;
}
    .size-card-inner{
        grid-template-columns:82px 1fr;
    }

    .size-img{
        width:82px;
        height:68px;
    }

    .size-name{
        font-size:22px;
    }
}
.product-top-badges{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin:-2px 0 16px;
}

.pbadge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:30px;
    padding:0 12px;
    border-radius:8px;
    font-size:11px;
    font-weight:900;
    letter-spacing:.05em;
    text-transform:uppercase;
}

.pbadge.brand{
    background:#111827;
    color:#fff;
}

.pbadge.discount{
    background:#dc2626;
    color:#fff;
}

.pbadge.offer{
    background:#f59e0b;
    color:#fff;
}

.pbadge.flag{
    padding:0;
    overflow:hidden;
    width:42px;
    height:30px;
    border-radius:6px;
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
}

.pbadge.flag img{
    width:100%;
    height:100%;
    object-fit:cover;
}