@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;
}

/* 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:15px;
    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,.55);
}

.area-panel{
    width:700px;
    max-width:96%;
    max-height:94vh;
    overflow:auto;
    background:#fff;
    margin:18px auto;
    box-shadow:0 20px 60px rgba(0,0,0,.28);
    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-family:var(--font-heading);
    font-size:26px;
    font-weight:600;
}

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

.area-body{ padding:22px; }

.area-title{
    font-size:20px;
    font-weight:800;
    color:#06104a;
    margin:12px 0 16px;
}

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

.preset-btn{
    border:1px solid #e5ded2;
    background:#fff;
    padding:10px;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
    border-radius:8px;
}

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

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

.pattern-box label{
    display:block;
    font-size:13px;
    font-weight:800;
    color:#333;
    margin-bottom:7px;
}

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

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

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

.area-name{ width:145px; }

.area-input{
    width:74px;
    height:42px;
    padding:10px;
    border:1px solid #e5ded2;
    border-radius:8px;
    text-align:center;
    font-size:15px;
    font-weight:700;
}

.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:15px;
    font-weight:800;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:8px;
    border:0;
    background:none;
    padding:0;
}

.section-total{
    text-align:right;
    color:#06104a;
    font-size:16px;
    margin-top:-28px;
    font-weight:800;
}

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

.sub-head{
    display:flex;
    align-items:center;
    gap:8px;
    color:#06104a;
    font-size:20px;
    font-weight:800;
    margin-bottom:14px;
}

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

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

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

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

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

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

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

/* PRODUCT TOP BADGES */

.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; }

/* ============================================================
   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; }

    /* Sticky Add to Basket on mobile */
    #tileCartForm,
    #unitCartForm{
        position:sticky;
        bottom:0;
        z-index:50;
        background:#fff;
        padding-top:8px;
    }

    /* Area modal goes full-screen on mobile */
    .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; }

    /* Modal results back to 2 columns so they read like cards */
    .modal-result{ grid-template-columns:1fr 1fr; }
}

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

    .price{ font-size:26px; }

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

    .size-card-inner{ grid-template-columns:82px 1fr; }

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

    .size-name{ font-size:20px; }
    .size-meta{ font-size:12px; }
    .size-price{ font-size:17px; }
}