/* =====================================================================
   MAISON CARAT — Storefront Stylesheet
   Luxury, restrained, editorial.
   ===================================================================== */

/* --- Design tokens --- */
:root{
    --primary:#111111;
    --charcoal:#242424;
    --soft-charcoal:#3a3a3a;
    --ivory:#F8F6F1;
    --warm-white:#FFFFFF;
    --gold:#B69A63;
    --gold-soft:#D8C7A5;
    --gold-deep:#8d7440;
    --line:#E5E0D6;
    --line-soft:#EFEAE0;
    --muted:#7a7468;
    --muted-2:#a39c8e;
    --success:#5b6f4d;
    --warn:#a17a2b;
    --danger:#9b3a3a;

    --font-serif: 'Playfair Display', 'Didot', 'Bodoni MT', Georgia, serif;
    --font-sans:  'Inter', 'Helvetica Neue', Arial, sans-serif;

    --container: 1240px;
    --radius: 2px;

    --shadow-1: 0 1px 2px rgba(0,0,0,.04);
    --shadow-2: 0 8px 24px rgba(0,0,0,.06);
    --shadow-3: 0 24px 60px rgba(0,0,0,.08);
}

/* --- Reset and viewport containment --- */
*,*::before,*::after{box-sizing:border-box}
html{
    width:100%;
    max-width:100%;
    overflow-x:clip;
    -webkit-text-size-adjust:100%;
    scroll-behavior:smooth;
}
body{
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0;
    padding:0;
    overflow-x:clip;
    font-family:var(--font-sans);
    color:var(--primary);
    background:var(--ivory);
    font-size:15px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
main,section,header,footer,nav,aside,article,form{min-width:0;max-width:100%}
img,video,canvas,iframe{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit;min-width:0;max-width:100%}
h1,h2,h3,h4,h5,h6{font-family:var(--font-serif);font-weight:400;letter-spacing:.5px;color:var(--primary);margin:0 0 .4em;overflow-wrap:anywhere}
h1{font-size:clamp(36px, 5vw, 56px);line-height:1.05}
h2{font-size:clamp(28px, 3.4vw, 40px);line-height:1.15}
h3{font-size:22px;line-height:1.3}
h4{font-size:14px;font-family:var(--font-sans);text-transform:uppercase;letter-spacing:2px;color:var(--muted);margin:0 0 18px;font-weight:500}
p{margin:0 0 1em;overflow-wrap:anywhere}
hr{border:0;height:1px;background:var(--line);margin:32px 0}

.container{
    width:100%;
    max-width:var(--container);
    min-width:0;
    margin-inline:auto;
    padding-inline:24px;
}
.container > *,
.header-inner > *,
.hero-grid > *,
.product-grid > *,
.categories-row > *,
.editorial-split > *,
.shop-layout > *,
.product-detail > *,
.cart-grid > *,
.checkout-grid > *,
.contact-grid > *,
.footer-grid > *{min-width:0}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* --- Eyebrow / labels --- */
.eyebrow{
    font-family:var(--font-sans); font-size:11px; letter-spacing:4px;
    text-transform:uppercase; color:var(--gold-deep); margin:0 0 14px;
}
.lede{ font-size:17px; color:var(--soft-charcoal); line-height:1.7; max-width:62ch }
.note{ color:var(--muted); font-size:13px }

/* --- Announcement bar --- */
.announce{
    background:var(--primary); color:#fff;
    font-size:11px; letter-spacing:3px; text-transform:uppercase;
    text-align:center; padding:10px 16px;
}

/* --- Site header --- */
.site-header{
    position:sticky; top:0; z-index:50;
    background:rgba(255,255,255,.96);
    backdrop-filter:saturate(180%) blur(8px);
    border-bottom:1px solid var(--line);
}
.header-inner{
    display:flex; align-items:center; gap:24px; padding:18px 24px;
}
.brand{
    display:flex; align-items:center; gap:14px; text-decoration:none;
}
.brand-mark{
    width:42px; height:42px; display:grid; place-items:center;
    border:1px solid var(--primary); color:var(--primary);
    font-family:var(--font-serif); font-style:italic; font-size:20px;
    position:relative;
}
.brand-mark::after{
    content:""; position:absolute; top:5px; right:5px;
    width:3px; height:3px; background:var(--gold); border-radius:50%;
}
.brand-mark.light{
    border-color:#fff; color:#fff;
}
.brand-mark.light::after{background:var(--gold)}
.brand-text{ display:flex; flex-direction:column; line-height:1.1 }
.brand-name{
    font-family:var(--font-serif); font-size:18px; letter-spacing:5px; color:var(--primary);
}
.brand-sub{
    font-size:9px; letter-spacing:4px; color:var(--gold-deep); text-transform:uppercase; margin-top:3px;
}
.primary-nav{
    margin-left:auto; display:flex; gap:36px;
}
.primary-nav a{
    position:relative; font-size:12px; letter-spacing:2px;
    text-transform:uppercase; color:var(--primary); padding:6px 0;
}
.primary-nav a::after{
    content:""; position:absolute; left:0; right:100%; bottom:-2px;
    height:1px; background:var(--gold); transition:right .35s ease;
}
.primary-nav a:hover::after,
.primary-nav a.is-active::after{ right:0 }

.header-actions{ display:flex; align-items:center; gap:18px; margin-left:36px }
.cart-link{
    position:relative; color:var(--primary); display:inline-flex; align-items:center;
    padding:6px;
}
.cart-badge{
    position:absolute; top:-2px; right:-4px; min-width:18px; height:18px;
    border-radius:50%; background:var(--primary); color:#fff;
    font-size:10px; display:grid; place-items:center; padding:0 5px;
}
.mobile-toggle{
    display:none; background:transparent; border:0; cursor:pointer;
    padding:6px 8px; flex-direction:column; gap:4px;
}
.mobile-toggle span{
    display:block; width:22px; height:1px; background:var(--primary); transition:.3s;
}

/* --- Mobile menu ---
   Transform-based off-canvas positioning avoids the `right:-100%` element
   extending the document scroll area on iOS Safari. */
.mobile-menu{
    position:fixed;
    inset:0 0 0 auto;
    width:min(86vw, 360px);
    max-width:100%;
    height:100dvh;
    overflow-y:auto;
    overscroll-behavior:contain;
    transform:translate3d(100%,0,0);
    background:var(--warm-white);
    border-left:1px solid var(--line);
    z-index:60;
    transition:transform .35s ease;
    padding:80px 32px;
    contain:layout paint;
    visibility:hidden;
}
.mobile-menu.is-open{
    visibility:visible;
}
.mobile-menu.is-open{transform:translate3d(0,0,0)}
.mobile-menu-inner{display:flex;flex-direction:column;gap:18px;min-width:0}
.mobile-menu-inner a{
    min-width:0;
    font-family:var(--font-serif);font-size:22px;color:var(--primary);
    border-bottom:1px solid var(--line-soft);padding-bottom:14px;
    overflow-wrap:anywhere;
}
.mobile-cart{display:flex;align-items:center;gap:10px;justify-content:space-between;min-width:0}
.mobile-overlay{
    position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:55;
    opacity:0;visibility:hidden;transition:.3s;
    contain:strict;
}
.mobile-overlay.is-open{opacity:1;visibility:visible}

/* --- Buttons --- */
.btn{
    display:inline-flex; align-items:center; justify-content:center;
    font-size:12px; letter-spacing:3px; text-transform:uppercase;
    padding:16px 28px; border:1px solid var(--primary);
    background:var(--primary); color:#fff;
    cursor:pointer; transition:background .25s ease, color .25s ease, border-color .25s ease;
    text-align:center;
}
.btn:hover{ background:var(--charcoal) }
.btn-outline{
    background:transparent; color:var(--primary);
}
.btn-outline:hover{ background:var(--primary); color:#fff }
.btn-gold{
    background:var(--gold-deep); border-color:var(--gold-deep); color:#fff;
}
.btn-gold:hover{ background:#6b5526; border-color:#6b5526 }
.btn-ghost{
    background:transparent; border-color:var(--line); color:var(--primary);
}
.btn-ghost:hover{ border-color:var(--primary) }
.btn-link{
    background:transparent; border:0; padding:0; color:var(--primary);
    font-size:11px; letter-spacing:3px; text-transform:uppercase;
    border-bottom:1px solid var(--primary); padding-bottom:2px;
    cursor:pointer;
}
.btn-block{ width:100% }
.btn-sm{ padding:10px 18px; font-size:10px; letter-spacing:2px }

/* --- Forms --- */
.field{ margin-bottom:18px }
.field label{
    display:block; font-size:11px; letter-spacing:2px; text-transform:uppercase;
    color:var(--muted); margin-bottom:8px;
}
.field input, .field textarea, .field select{
    width:100%; padding:14px 16px; background:#fff;
    border:1px solid var(--line); color:var(--primary); border-radius:var(--radius);
    font-size:14px;
}
.field input:focus, .field textarea:focus, .field select:focus{
    outline:none; border-color:var(--gold);
}
.field textarea{ min-height:130px; resize:vertical }
.field .help{ font-size:11px; color:var(--muted); margin-top:6px }
.field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px }

/* --- Hero --- */
.hero{
    position:relative; overflow:hidden;
    background:var(--ivory);
}
.hero-grid{
    display:grid; grid-template-columns:1.05fr 1fr; min-height:78vh;
}
.hero-copy{
    padding:80px 64px; display:flex; flex-direction:column; justify-content:center;
    max-width:640px;
}
.hero-eyebrow{ color:var(--gold-deep); margin-bottom:18px }
.hero h1{
    font-family:var(--font-serif); font-weight:400;
    font-size:clamp(44px, 6vw, 78px); line-height:1.02;
    margin-bottom:18px;
}
.hero-tagline{
    font-family:var(--font-serif); font-style:italic; font-size:24px; color:var(--soft-charcoal);
    margin-bottom:32px;
}
.hero-text{ color:var(--muted); margin-bottom:36px; max-width:48ch; line-height:1.8 }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap }
.hero-art{
    position:relative; background:var(--warm-white);
    overflow:hidden;
}
.hero-art img, .hero-art svg{
    width:100%; height:100%; object-fit:cover; display:block;
}
.hero-art::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(to right, rgba(248,246,241,.25), transparent 25%);
    pointer-events:none;
}

/* --- Section primitives --- */
section{ padding:80px 0 }
.section-tight{ padding:56px 0 }
.section-title{ text-align:center; margin-bottom:48px }
.section-title h2{ margin:0 0 12px }
.section-title p{ color:var(--muted); max-width:60ch; margin:0 auto }

.divider{
    display:flex; align-items:center; gap:14px; justify-content:center;
    margin:0 auto 24px; max-width:240px;
}
.divider::before, .divider::after{
    content:""; flex:1; height:1px; background:var(--line);
}

/* --- Featured collection ---
   minmax(0, 1fr) prevents long product names/prices from expanding tracks. */
.product-grid{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;
}
.product-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.product-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}

.product-card{
    position:relative; background:transparent;
    transition:transform .35s ease;
}
.product-card:hover .product-img img{ transform:scale(1.03) }
.product-card:hover .product-actions{ opacity:1; transform:translateY(0) }
.product-img{
    position:relative; aspect-ratio: 4/5; overflow:hidden;
    background:var(--ivory); margin-bottom:14px;
}
.product-img img{
    width:100%; height:100%; object-fit:contain; transition:transform .8s ease;
}
.product-actions{
    position:absolute; left:16px; right:16px; bottom:16px;
    display:flex; gap:8px; opacity:0; transform:translateY(8px);
    transition:opacity .3s ease, transform .3s ease;
}
.product-actions .btn{ flex:1; padding:12px 8px; font-size:10px; letter-spacing:2px }
.product-meta{
    display:flex; justify-content:space-between; align-items:baseline; gap:10px;
}
.product-name{
    font-family:var(--font-serif); font-size:18px; color:var(--primary); line-height:1.3;
    margin-bottom:6px;
}
.product-cat{
    font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--muted-2);
    margin-bottom:6px;
}
.product-price{
    font-size:14px; color:var(--primary); font-weight:500;
}
.product-price .was{
    color:var(--muted); text-decoration:line-through; margin-right:8px; font-weight:400;
}
.product-price .now{ color:var(--gold-deep) }

.badge{
    position:absolute; top:12px; left:12px; z-index:2;
    background:var(--primary); color:#fff;
    font-size:9px; letter-spacing:2px; text-transform:uppercase;
    padding:6px 10px;
}
.badge.sale{ background:var(--gold-deep) }
.badge.new{ background:var(--primary) }
.badge.out{ background:#9b3a3a }

.badge-in{ background:#e7ecdc; color:#3f5631 }
.badge-low{ background:#f5e9d3; color:#8a5a18 }
.badge-out{ background:#f1dada; color:#7a2828 }

/* --- Categories showcase --- */
.categories-row{
    display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:16px;
    min-width:0;
}
.category-tile{
    min-width:0;
    text-align:center;
}
.category-tile .cat-art{
    aspect-ratio:1/1; background:var(--ivory); margin-bottom:14px;
    display:grid; place-items:center; padding:18px; transition:background .3s ease;
    overflow:hidden;
}
.category-tile:hover .cat-art{ background:var(--line-soft) }
.category-tile img, .category-tile svg{ max-width:80%; max-height:80% }
.category-tile h3{
    font-family:var(--font-serif); font-size:18px; margin:0;
}

/* --- Editorial split --- */
.editorial-split{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;
    min-width:0;
    background:var(--primary);color:#f8f6f1;
}
.editorial-split .art{ aspect-ratio:1/1; overflow:hidden; background:#1a1a1a }
.editorial-split .art img{ width:100%; height:100%; object-fit:cover }
.editorial-split .copy{
    padding:80px 64px; display:flex; flex-direction:column; justify-content:center;
}
.editorial-split h2{ color:#fff }
.editorial-split p{ color:#cfc8b7; max-width:46ch }
.editorial-split .eyebrow{ color:var(--gold) }
.editorial-split .btn-outline{ border-color:#fff; color:#fff }
.editorial-split .btn-outline:hover{ background:#fff; color:var(--primary) }

/* --- Why list --- */
.why-list{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:32px;
    border-top:1px solid var(--line); padding-top:48px;
}
.why-item{ padding:0 12px }
.why-item h3{
    font-family:var(--font-sans); font-size:13px; letter-spacing:2px; text-transform:uppercase;
    color:var(--primary); margin-bottom:10px; font-weight:500;
}
.why-item p{ color:var(--muted); font-size:14px; line-height:1.7 }

/* --- Newsletter --- */
.newsletter{
    background:var(--warm-white); border-top:1px solid var(--line);
    padding:96px 0;
}
.newsletter-inner{
    display:grid; grid-template-columns:1.1fr 1fr; gap:64px; align-items:center;
}
.newsletter h2{ margin:0 0 14px }
.newsletter-form{
    display:flex; flex-wrap:wrap; gap:10px;
}
.newsletter-form input{
    flex:1; min-width:200px; padding:16px 18px; background:var(--ivory);
    border:1px solid var(--line); border-radius:var(--radius);
}
.newsletter-form input:focus{ outline:none; border-color:var(--gold) }
.newsletter-form button{
    background:var(--primary); color:#fff; border:0; padding:0 32px;
    font-size:11px; letter-spacing:3px; text-transform:uppercase; cursor:pointer;
}
.newsletter-msg{ width:100%; margin:10px 0 0; font-size:13px; color:var(--success) }

/* --- Footer --- */
.site-footer{
    background:var(--primary); color:#cfc8b7; padding:72px 0 24px;
}
.footer-grid{
    display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:48px;
    padding-bottom:48px; border-bottom:1px solid #2c2c2c;
}
.footer-brand .footer-tag{
    font-family:var(--font-serif); font-style:italic; color:#fff; margin:16px 0 14px;
}
.footer-brand .footer-addr{ font-size:13px; line-height:1.7; color:#a39c8e }
.footer-col h4{ color:#fff; margin-bottom:18px }
.footer-col a{
    display:block; color:#cfc8b7; padding:6px 0; font-size:13px;
    transition:color .2s ease;
}
.footer-col a:hover{ color:var(--gold) }
.footer-meta{ font-size:12px; color:#7a7468; margin-top:8px }
.footer-base{
    display:flex; justify-content:space-between; gap:12px; padding-top:24px;
    font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#7a7468;
}

/* --- Back to top --- */
.back-to-top{
    position:fixed; bottom:24px; right:24px; width:42px; height:42px;
    background:var(--primary); color:#fff; display:grid; place-items:center;
    border-radius:50%; box-shadow:var(--shadow-2); opacity:0; visibility:hidden;
    transition:.3s; z-index:40;
}
.back-to-top.is-visible{ opacity:1; visibility:visible }

/* --- Page header (interior) --- */
.page-header{
    padding:80px 0 56px; background:var(--ivory); border-bottom:1px solid var(--line);
    text-align:center;
}
.page-header h1{ margin:0 0 12px }
.page-header p{ color:var(--muted); max-width:60ch; margin:0 auto }
.crumbs{
    font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted);
    margin-bottom:14px;
}
.crumbs a{ color:var(--muted) }
.crumbs a:hover{ color:var(--primary) }
.crumbs .sep{ margin:0 8px; color:var(--line) }

/* --- Shop / collection layout --- */
.shop-layout{ display:grid; grid-template-columns:240px 1fr; gap:48px; padding:64px 0 }
.shop-sidebar{ padding-right:8px; border-right:1px solid var(--line) }
.shop-sidebar h4{ color:var(--primary) }
.filter-group{ margin-bottom:28px }
.filter-group ul{ list-style:none; padding:0; margin:0 }
.filter-group li{ margin-bottom:8px }
.filter-group a{
    display:flex; justify-content:space-between; font-size:14px; color:var(--soft-charcoal);
    padding:4px 0;
}
.filter-group a:hover, .filter-group a.is-active{ color:var(--gold-deep) }
.filter-group .count{ color:var(--muted-2); font-size:12px }
.price-filter{ display:flex; gap:8px; align-items:center }
.price-filter input{ width:80px; padding:8px 10px; font-size:13px }
.shop-header{
    display:flex; justify-content:space-between; align-items:end; gap:16px;
    margin-bottom:28px;
}
.shop-header h1{ margin:0 0 4px; font-size:28px }
.shop-header .count{ color:var(--muted); font-size:13px }
.sort-select{
    padding:10px 14px; background:#fff; border:1px solid var(--line); font-size:13px;
    border-radius:var(--radius); min-width:220px;
}
.shop-empty{ padding:80px 0; text-align:center; color:var(--muted) }

/* --- Product detail --- */
.product-detail{
    display:grid; grid-template-columns:1.1fr 1fr; gap:72px; padding:56px 0 80px;
}
.gallery-main{
    aspect-ratio:1/1; background:var(--warm-white); overflow:hidden;
    margin-bottom:14px; position:relative;
}
.gallery-main img, .gallery-main svg{ width:100%; height:100%; object-fit:contain }
.gallery-thumbs{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px }
.gallery-thumb{
    aspect-ratio:1/1; background:var(--warm-white); border:1px solid var(--line);
    overflow:hidden; cursor:pointer; padding:6px;
}
.gallery-thumb.is-active{ border-color:var(--primary) }
.gallery-thumb img, .gallery-thumb svg{ width:100%; height:100%; object-fit:contain }

.product-info .product-cat{ font-size:11px }
.product-info h1{
    font-size:clamp(28px, 3.2vw, 40px); line-height:1.1; margin:6px 0 14px;
}
.product-info .price{ font-size:22px; margin-bottom:8px }
.product-info .stock{ margin-bottom:24px }
.product-info .desc{ color:var(--soft-charcoal); margin-bottom:24px; line-height:1.8 }
.qty-row{
    display:flex; gap:12px; align-items:center; margin-bottom:24px;
}
.qty-control{
    display:inline-flex; align-items:center; border:1px solid var(--line);
    background:#fff;
}
.qty-control button{
    width:42px; height:46px; background:transparent; border:0; cursor:pointer; font-size:18px;
}
.qty-control input{
    width:60px; height:46px; text-align:center; border:0; border-left:1px solid var(--line);
    border-right:1px solid var(--line); font-size:15px;
}
.product-actions-row{ display:flex; gap:12px; margin-bottom:36px }
.product-actions-row .btn{ flex:1; padding:18px }
.spec-table{
    width:100%; border-collapse:collapse; margin:18px 0 0;
}
.spec-table th, .spec-table td{
    text-align:left; padding:12px 14px; border-bottom:1px solid var(--line);
    font-size:13px; vertical-align:top;
}
.spec-table th{
    width:34%; color:var(--muted); font-weight:500; text-transform:uppercase;
    letter-spacing:1px; font-size:11px;
}
.product-tabs{
    border-top:1px solid var(--line); padding:48px 0;
}
.product-tabs h3{ font-size:18px; margin-bottom:18px }
.product-policies{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
    background:var(--warm-white); padding:24px;
    border:1px solid var(--line);
}
.policy{ text-align:left; padding:0 12px; border-right:1px solid var(--line) }
.policy:last-child{ border-right:0 }
.policy h4{ color:var(--primary); margin-bottom:6px }
.policy p{ font-size:12px; color:var(--muted); margin:0 }
.related{ padding:80px 0; border-top:1px solid var(--line) }

/* --- Cart --- */
.cart-page{ padding:72px 0 }
.cart-grid{ display:grid; grid-template-columns:1.4fr .9fr; gap:48px }
.cart-list{ border-top:1px solid var(--line) }
.cart-row{
    display:grid; grid-template-columns:96px 1fr auto; gap:24px; padding:24px 0;
    border-bottom:1px solid var(--line); align-items:center;
}
.cart-thumb{
    width:96px; height:120px; background:var(--warm-white); overflow:hidden;
}
.cart-thumb img, .cart-thumb svg{ width:100%; height:100%; object-fit:contain }
.cart-row .name{ font-family:var(--font-serif); font-size:18px; margin-bottom:6px }
.cart-row .cat{ font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted-2) }
.cart-row .price{ font-size:14px; margin-top:4px }
.cart-row .qty-mini{ display:inline-flex; align-items:center; border:1px solid var(--line); margin-top:10px }
.cart-row .qty-mini button{
    width:32px; height:32px; background:transparent; border:0; cursor:pointer;
}
.cart-row .qty-mini input{
    width:46px; height:32px; text-align:center; border:0; border-left:1px solid var(--line);
    border-right:1px solid var(--line);
}
.cart-row .remove{
    font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted);
    background:transparent; border:0; cursor:pointer; padding:0;
}
.cart-row .remove:hover{ color:var(--danger) }
.cart-summary{
    background:var(--warm-white); border:1px solid var(--line); padding:32px;
    position:sticky; top:96px;
}
.cart-summary h3{ font-family:var(--font-sans); font-size:14px; letter-spacing:3px; text-transform:uppercase; margin-bottom:20px }
.summary-row{ display:flex; justify-content:space-between; margin-bottom:10px; font-size:14px }
.summary-row.total{
    border-top:1px solid var(--line); margin-top:14px; padding-top:14px;
    font-family:var(--font-serif); font-size:22px;
}
.cart-empty{ text-align:center; padding:96px 0 }
.cart-empty .icon{
    width:64px; height:64px; margin:0 auto 20px; border:1px solid var(--line); border-radius:50%;
    display:grid; place-items:center; color:var(--muted);
}

/* --- Checkout --- */
.checkout{ padding:64px 0 }
.checkout-grid{ display:grid; grid-template-columns:1.4fr .9fr; gap:48px }
.checkout h2{ font-family:var(--font-serif); font-size:24px; margin:0 0 20px }
.section-card{
    background:var(--warm-white); border:1px solid var(--line); padding:28px;
    margin-bottom:20px;
}
.payment-options{ display:flex; flex-direction:column; gap:12px }
.payment-option{
    display:flex; gap:14px; padding:18px; border:1px solid var(--line);
    background:#fff; cursor:pointer; transition:.2s;
}
.payment-option.is-active{ border-color:var(--primary); box-shadow:var(--shadow-1) }
.payment-option .check{
    width:18px; height:18px; border:1px solid var(--primary); border-radius:50%;
    display:grid; place-items:center; flex-shrink:0;
}
.payment-option .check::after{
    content:""; width:8px; height:8px; border-radius:50%; background:transparent;
}
.payment-option.is-active .check::after{ background:var(--primary) }
.payment-option .pay-name{
    font-family:var(--font-serif); font-size:16px; margin-bottom:4px;
}
.payment-option .pay-note{ font-size:12px; color:var(--muted); margin:0 }
.bank-detail{
    margin-top:14px; padding:16px; background:var(--ivory); font-size:13px;
    border:1px dashed var(--line);
}
.bank-detail dt{
    font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--muted);
    margin-top:10px;
}
.bank-detail dd{ margin:2px 0 0; font-weight:500 }
.order-summary-card{ padding:24px; background:var(--warm-white); border:1px solid var(--line); position:sticky; top:96px }
.order-summary-card .row{ display:flex; justify-content:space-between; padding:10px 0; font-size:14px }
.order-summary-card .row.total{
    border-top:1px solid var(--line); margin-top:8px; padding-top:16px;
    font-family:var(--font-serif); font-size:20px;
}

/* --- Order success --- */
.success-page{ padding:96px 0; text-align:center }
.success-icon{
    width:72px; height:72px; margin:0 auto 24px; border:1px solid var(--success);
    border-radius:50%; display:grid; place-items:center; color:var(--success);
}
.success-page h1{ margin-bottom:14px }
.success-meta{
    display:inline-block; text-align:left; margin:32px auto; padding:24px 32px;
    background:var(--warm-white); border:1px solid var(--line); min-width:320px;
}
.success-meta dt{ font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-top:10px }
.success-meta dd{ margin:2px 0 0; font-weight:500 }

/* --- About --- */
.about-hero{
    display:grid; grid-template-columns:1fr 1fr; gap:0;
}
.about-hero .art{ aspect-ratio:1/1; overflow:hidden; background:var(--line-soft) }
.about-hero .art img, .about-hero .art svg{ width:100%; height:100%; object-fit:cover }
.about-hero .copy{ padding:80px 64px; display:flex; flex-direction:column; justify-content:center; background:var(--warm-white) }
.values-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:32px; padding-top:48px; border-top:1px solid var(--line) }

/* --- Contact --- */
.contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; padding:56px 0 }
.contact-info{
    background:var(--warm-white); border:1px solid var(--line); padding:40px;
}
.contact-info dl{ margin:0 }
.contact-info dt{ font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-top:18px }
.contact-info dd{ margin:4px 0 0 }
.contact-info a{ border-bottom:1px solid var(--line); padding-bottom:2px }
.contact-info a:hover{ border-color:var(--primary) }
.map{
    margin-top:32px; aspect-ratio:16/10; background:var(--line-soft); position:relative;
    overflow:hidden; border:1px solid var(--line);
}
.map iframe{ width:100%; height:100%; border:0 }

/* --- Tables / long-form --- */
.long-form{ max-width:760px; margin:0 auto }
.long-form h2{ margin-top:32px }
.long-form p{ color:var(--soft-charcoal); line-height:1.85; margin-bottom:14px }
.long-form ul{ padding-left:18px; line-height:1.85 }

/* --- Alerts --- */
.alert{
    border:1px solid; padding:14px 18px; font-size:13px; margin-bottom:20px;
}
.alert.success{ border-color:#cad7b9; background:#f3f7ec; color:#5b6f4d }
.alert.warn{ border-color:#e5d6ad; background:#fbf6ec; color:#7a5a1f }
.alert.error{ border-color:#e5c5c5; background:#faecec; color:#7a2828 }

/* --- Responsive --- */
@media (max-width: 1080px){
    .product-grid{ grid-template-columns:repeat(3, 1fr) }
    .categories-row{ grid-template-columns:repeat(4, 1fr) }
    .footer-grid{ grid-template-columns:1.5fr 1fr 1fr }
    .footer-grid .footer-col:nth-child(4){ grid-column:1/-1; display:flex; gap:24px; flex-wrap:wrap }
    .newsletter-inner{ grid-template-columns:1fr; gap:24px }
    .hero-grid{ grid-template-columns:1fr; min-height:auto }
    .hero-art{ aspect-ratio:16/10 }
    .hero-copy{ padding:56px 24px }
    .shop-layout{ grid-template-columns:1fr }
    .shop-sidebar{ border-right:0; border-bottom:1px solid var(--line); padding-bottom:24px; margin-bottom:24px }
    .product-detail{ grid-template-columns:1fr; gap:32px }
    .cart-grid, .checkout-grid, .contact-grid{ grid-template-columns:1fr }
    .editorial-split{ grid-template-columns:1fr }
    .editorial-split .copy{ padding:48px 24px }
    .about-hero{ grid-template-columns:1fr }
    .about-hero .copy{ padding:48px 24px }
}
@media (max-width: 720px){
    .primary-nav{ display:none }
    .mobile-toggle{ display:flex }
    .product-grid{ grid-template-columns:repeat(2, 1fr); gap:16px }
    .product-grid.cols-3, .product-grid.cols-2{ grid-template-columns:1fr 1fr }
    .categories-row{ grid-template-columns:repeat(2, 1fr) }
    .why-list{ grid-template-columns:1fr; gap:24px }
    .footer-grid{ grid-template-columns:1fr 1fr; gap:24px }
    .product-policies{ grid-template-columns:1fr; padding:16px }
    .policy{ border-right:0; border-bottom:1px solid var(--line); padding:12px 0 }
    .policy:last-child{ border-bottom:0 }
    section{ padding:56px 0 }
    .header-inner{ padding:14px 18px }
    .brand-sub{ display:none }
    .hero-copy{ padding:40px 20px }
    .hero-tagline{ font-size:18px }
    .gallery-thumbs{ grid-template-columns:repeat(4, 1fr) }
    .footer-base{ flex-direction:column; gap:6px }
    .values-grid{ grid-template-columns:1fr }
}

/* --- Print --- */
@media print{
    .site-header, .site-footer, .announce, .newsletter, .back-to-top{ display:none }
}

/* --- Selection --- */
::selection{ background:var(--gold); color:#fff }

/* --- Lookbook (editorial image grid) --- */
.lookbook-section{ padding:96px 0; background:var(--warm-white); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.lookbook-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;
}
.lookbook-tile{
    position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--ivory);
    display:block;
}
.lookbook-tile-tall{ grid-row: span 2; aspect-ratio:3/4; }
.lookbook-tile img{ width:100%; height:100%; object-fit:cover; transition:transform .8s ease; }
.lookbook-tile:hover img{ transform:scale(1.05); }
.lookbook-caption{
    position:absolute; left:20px; right:20px; bottom:20px;
    background:rgba(255,255,255,.94); padding:16px 20px;
    opacity:0; transform:translateY(8px); transition:.3s;
}
.lookbook-tile:hover .lookbook-caption{ opacity:1; transform:translateY(0); }
.lookbook-caption .eyebrow{ margin:0 0 6px; font-size:9px; }
.lookbook-caption h3{ font-family:var(--font-serif); font-size:16px; margin:0; line-height:1.3; }

/* --- Visual index (image grid) --- */
.visual-index{ padding:96px 0; background:var(--ivory); }
.visual-grid{
    display:grid; grid-template-columns:repeat(5, 1fr); gap:14px;
}
.visual-tile{
    aspect-ratio:1/1; background:#fff; overflow:hidden;
    border:1px solid var(--line-soft);
}
.visual-tile img{ width:100%; height:100%; object-fit:contain; padding:12px; transition:transform .4s ease; }
.visual-tile:hover img{ transform:scale(1.06); }

/* --- Stories (editorial cards) --- */
.stories-section{ padding:96px 0; background:var(--primary); color:#f8f6f1; }
.stories-section .section-title h2{ color:#fff; }
.stories-section .section-title p{ color:#cfc8b7; }
.stories-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:32px;
}
.story-card{
    background:#1a1a1a; padding:0; overflow:hidden;
    border:1px solid #2a2a2a;
}
.story-image{ aspect-ratio:5/4; background:#fff; overflow:hidden; }
.story-image img{ width:100%; height:100%; object-fit:contain; padding:24px; }
.story-card .eyebrow{ padding:24px 28px 0; color:var(--gold); margin:0; }
.story-card h3{ padding:8px 28px 0; color:#fff; font-family:var(--font-serif); font-size:22px; margin:0; }
.story-card p{ padding:14px 28px 0; color:#cfc8b7; }
.story-card .btn-link{ display:inline-block; padding:18px 28px 28px; color:var(--gold); }

@media (max-width: 1080px){
    .lookbook-grid{ grid-template-columns:repeat(2,1fr) }
    .lookbook-tile-tall{ aspect-ratio:1/1; grid-row:auto; }
    .visual-grid{ grid-template-columns:repeat(4,1fr) }
    .stories-grid{ grid-template-columns:1fr; gap:24px }
}
@media (max-width: 720px){
    .lookbook-grid{ grid-template-columns:1fr }
    .visual-grid{ grid-template-columns:repeat(2,1fr) }
}

/* --- About image strip --- */
.about-images{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:16px;
    margin-top:0;
}
.about-img{
    aspect-ratio:1/1; background:var(--ivory); overflow:hidden;
    border:1px solid var(--line-soft);
}
.about-img img{ width:100%; height:100%; object-fit:contain; padding:14px; transition:transform .5s ease; }
.about-img:hover img{ transform:scale(1.05); }
@media (max-width:720px){
    .about-images{ grid-template-columns:repeat(2,1fr) }
}

/* --- Contact visual side --- */
.contact-visual{
    position:relative; aspect-ratio:1/1; overflow:hidden; margin-top:32px;
    background:var(--primary); border:1px solid var(--line);
}
.contact-visual img{ width:100%; height:100%; object-fit:cover; opacity:.85; }
.contact-visual .caption{
    position:absolute; left:32px; right:32px; bottom:32px; color:#fff;
}
.contact-visual .caption h3{ font-family:var(--font-serif); color:#fff; margin:0 0 6px; font-size:24px; }
.contact-visual .caption p{ color:#cfc8b7; margin:0; font-size:13px; }

/* --- Complete Image Gallery --- */
.complete-gallery{ padding:96px 0; background:var(--warm-white); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.complete-grid{
    display:grid; grid-template-columns:repeat(6, 1fr); gap:12px;
}
.complete-tile{
    aspect-ratio:1/1; background:var(--ivory); overflow:hidden;
    border:1px solid var(--line-soft); transition:.3s;
}
.complete-tile img{ width:100%; height:100%; object-fit:contain; padding:10px; transition:transform .4s ease; }
.complete-tile:hover{ border-color:var(--primary); }
.complete-tile:hover img{ transform:scale(1.06); }

@media (max-width:1080px){ .complete-grid{ grid-template-columns:repeat(4,1fr) } }
@media (max-width:720px){ .complete-grid{ grid-template-columns:repeat(3,1fr) } }

/* --- Enhanced product gallery --- */
.gallery-thumbs{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:10px;
    max-height:600px; overflow-y:auto; padding-right:6px;
}
.gallery-thumbs::-webkit-scrollbar{ width:6px; }
.gallery-thumbs::-webkit-scrollbar-track{ background:var(--ivory); }
.gallery-thumbs::-webkit-scrollbar-thumb{ background:var(--gold); border-radius:3px; }

/* ═══════════════════════════════════════════════════════════════
   LOADING SPINNER (optional component for AJAX operations)
   ═══════════════════════════════════════════════════════════════ */
.loading-overlay{
    position:fixed; inset:0; z-index:9999;
    background:var(--ivory);
    display:grid; place-items:center;
    transition:opacity .6s ease, visibility .6s ease;
    opacity:0; visibility:hidden;
}
.loading-overlay.is-active{
    opacity:1; visibility:visible;
}
.loading-spinner{
    width:120px; height:120px; margin:0 auto 24px;
    display:grid; place-items:center;
    border:1px solid var(--primary);
    position:relative;
}
.loading-spinner::before{
    content:""; position:absolute; inset:-1px;
    border:1px solid transparent;
    border-top-color:var(--gold);
    border-radius:0;
    animation:spin 3s linear infinite;
}
.loading-spinner::after{
    content:""; position:absolute; inset:-1px;
    border:1px solid transparent;
    border-top-color:transparent;
    border-bottom-color:var(--gold);
    animation:spin 3s linear infinite;
    animation-direction:reverse;
    animation-duration:2s;
}
.loading-spinner .icon{
    font-family:'Playfair Display',serif; font-style:italic;
    font-size:36px; color:var(--primary);
}
.loading-bar{
    width:180px; height:1px; background:var(--line);
    margin:18px auto 0; overflow:hidden; position:relative;
}
.loading-bar::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(to right, transparent, var(--gold), transparent);
    animation:shimmer 1.8s ease-in-out infinite;
}
.loading-text{
    font-size:9px; letter-spacing:5px; text-transform:uppercase;
    color:var(--muted); margin-top:14px;
}
@keyframes spin{
    0%{ transform:rotate(0deg); }
    100%{ transform:rotate(360deg); }
}
@keyframes shimmer{
    0%{ transform:translateX(-100%); }
    100%{ transform:translateX(100%); }
}

/* ═══════════════════════════════════════════════════════════════
   HERO SLIDER
   ═══════════════════════════════════════════════════════════════ */
.hero-slider{
    position:relative; overflow:hidden; background:#000;
}
.hero-slides{
    position:relative; min-height:80vh;
}
.hero-slide{
    position:absolute; inset:0; opacity:0;
    display:grid; grid-template-columns:1.05fr 1fr;
    transition:opacity 1.2s ease;
}
.hero-slide.is-active{ opacity:1; }
.hero-slide::after{
    content:""; position:absolute; inset:0;
    background:
        linear-gradient(to right, rgba(0,0,0,.7) 0%, rgba(0,0,0,.5) 35%, rgba(0,0,0,.2) 70%, rgba(0,0,0,.05) 100%);
    pointer-events:none;
}
.hero-slide::before{
    content:""; position:absolute; inset:0;
    backdrop-filter:blur(8px) brightness(0.6);
    -webkit-backdrop-filter:blur(8px) brightness(0.6);
    background:radial-gradient(ellipse 60% 100% at left center,
        rgba(0,0,0,.55) 0%,
        rgba(0,0,0,.25) 50%,
        transparent 75%);
    pointer-events:none; z-index:0;
}
.hero-slide .art{
    position:absolute; inset:0; background-size:cover; background-position:center;
    z-index:1;
    /* Apply slight blur directly to soften the area behind text */
    filter:blur(2px);
    transform:scale(1.02); /* hide blur edge */
}
/* Strong blur band over the left half (text area) using overlay layer */
.hero-slide .text-band{
    position:absolute; inset:0; z-index:1;
    backdrop-filter:blur(14px) brightness(0.45);
    -webkit-backdrop-filter:blur(14px) brightness(0.45);
    -webkit-mask-image:linear-gradient(to right, black 0%, black 45%, transparent 70%);
            mask-image:linear-gradient(to right, black 0%, black 45%, transparent 70%);
    pointer-events:none;
}
.hero-slide .copy{
    position:relative; z-index:2;
    color:#fff; padding:80px 64px;
    display:flex; flex-direction:column; justify-content:center;
    max-width:640px;
    text-shadow:0 2px 8px rgba(0,0,0,.4), 0 4px 24px rgba(0,0,0,.25);
}
.hero-slide .copy .eyebrow{
    color:var(--gold-soft); margin-bottom:18px;
    text-shadow:0 1px 4px rgba(0,0,0,.5);
    letter-spacing:5px;
}
.hero-slide .copy h1{
    color:#fff; font-size:clamp(40px, 5.5vw, 72px);
    line-height:1.05; margin-bottom:18px;
    text-shadow:0 2px 12px rgba(0,0,0,.5), 0 6px 30px rgba(0,0,0,.3);
}
.hero-slide .copy .tagline{
    font-family:'Playfair Display',serif; font-style:italic;
    font-size:22px; color:#fff; margin-bottom:32px;
    text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.hero-slide .copy .text{
    color:#f0ebde; margin-bottom:36px; max-width:48ch;
    text-shadow:0 1px 6px rgba(0,0,0,.6);
}
.hero-slide .copy .cta-row{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-slide .copy .tagline{
    font-family:'Playfair Display',serif; font-style:italic;
    font-size:22px; color:#cfc8b7; margin-bottom:32px;
}
.hero-slide .copy .text{
    color:#e8e2d4; margin-bottom:36px; max-width:48ch;
}
.hero-slide .copy .cta-row{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-slide .copy .btn{ background:#fff; color:var(--primary); border-color:#fff; }
.hero-slide .copy .btn:hover{ background:var(--gold-soft); border-color:var(--gold-soft); color:#fff; }
.hero-slide .copy .btn-outline{ background:transparent; color:#fff; border-color:#fff; }
.hero-slide .copy .btn-outline:hover{ background:#fff; color:var(--primary); }
.hero-slide .art{
    position:absolute; inset:0; background-size:cover; background-position:center;
    z-index:1;
}
.hero-dots{
    position:absolute; bottom:32px; left:64px; z-index:5;
    display:flex; gap:10px;
}
.hero-dot{
    width:32px; height:2px; background:rgba(255,255,255,.4);
    cursor:pointer; transition:.3s;
}
.hero-dot.is-active{ background:var(--gold); width:48px; }
.hero-arrow{
    position:absolute; top:50%; transform:translateY(-50%);
    width:48px; height:48px; background:rgba(255,255,255,.1);
    backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.2);
    color:#fff; cursor:pointer; z-index:5;
    display:grid; place-items:center; transition:.3s;
}
.hero-arrow:hover{ background:var(--gold); border-color:var(--gold); }
.hero-arrow.prev{ left:24px; }
.hero-arrow.next{ right:24px; }
.hero-progress{
    position:absolute; bottom:0; left:0; height:2px;
    background:linear-gradient(to right, var(--gold-soft), var(--gold));
    z-index:4; width:0;
    transition:width .1s linear;
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT CAROUSEL
   ═══════════════════════════════════════════════════════════════ */
.carousel-section{
    padding:96px 0; background:var(--ivory);
}
.carousel-wrap{
    position:relative; overflow:hidden;
}
.carousel-track{
    display:flex; gap:24px;
    overflow-x:auto; scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    padding:8px 4px 24px;
    -webkit-overflow-scrolling:touch;
}
.carousel-track::-webkit-scrollbar{ height:6px; }
.carousel-track::-webkit-scrollbar-track{ background:var(--line); border-radius:3px; }
.carousel-track::-webkit-scrollbar-thumb{ background:var(--gold); border-radius:3px; }
.carousel-track .product-card{
    flex:0 0 calc((100% - 48px) / 3);
    scroll-snap-align:start;
}
.carousel-controls{
    display:flex; justify-content:space-between; align-items:center;
    margin-top:8px;
}
.carousel-nav{ display:flex; gap:8px; }
.carousel-btn{
    width:44px; height:44px; border:1px solid var(--line); background:#fff;
    cursor:pointer; display:grid; place-items:center;
    transition:.3s;
}
.carousel-btn:hover{ background:var(--primary); border-color:var(--primary); color:#fff; }

/* ═══════════════════════════════════════════════════════════════
   SCROLL ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
.reveal{
    opacity:0; transform:translateY(28px);
    transition:opacity .8s ease, transform .8s ease;
}
.reveal.is-in{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{
    opacity:0; transform:translateY(20px);
    transition:opacity .6s ease, transform .6s ease;
}
.reveal-stagger.is-in > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.is-in > *:nth-child(2){ transition-delay:.08s; }
.reveal-stagger.is-in > *:nth-child(3){ transition-delay:.16s; }
.reveal-stagger.is-in > *:nth-child(4){ transition-delay:.24s; }
.reveal-stagger.is-in > *:nth-child(5){ transition-delay:.32s; }
.reveal-stagger.is-in > *:nth-child(6){ transition-delay:.40s; }

/* ═══════════════════════════════════════════════════════════════
   PARALLAX + SMOOTH EFFECTS
   ═══════════════════════════════════════════════════════════════ */
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: no-preference){
    body{ scroll-behavior:smooth; }
}

/* Subtle float animation */
@keyframes float-y{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-8px); }
}
.float-anim{ animation:float-y 4s ease-in-out infinite; }

/* Marquee for announcement */
.marquee{
    overflow:hidden; white-space:nowrap;
    background:var(--primary); color:#fff;
    padding:10px 0;
}
.marquee-track{
    display:inline-block; padding-left:100%;
    animation:marquee 30s linear infinite;
}
@keyframes marquee{
    from{ transform:translateX(0); }
    to { transform:translateX(-100%); }
}

/* ═══════════════════════════════════════════════════════════════
   IMAGE ZOOM ON HOVER
   ═══════════════════════════════════════════════════════════════ */
.zoom-wrap{ overflow:hidden; }
.zoom-wrap img{ transition:transform .8s ease; }
.zoom-wrap:hover img{ transform:scale(1.06); }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE TWEAKS
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1080px){
    .hero-slide{ grid-template-columns:1fr; }
    .hero-slide .copy{ padding:60px 32px; }
    .hero-dots{ left:32px; bottom:24px; }
    .carousel-track .product-card{ flex:0 0 calc((100% - 24px) / 2); }
}
@media (max-width: 720px){
    .hero-slide .copy{ padding:48px 24px; }
    .hero-slide .copy h1{ font-size:36px; }
    .hero-arrow{ width:40px; height:40px; }
    .carousel-track .product-card{ flex:0 0 86%; }
}

/* ═══════════════════════════════════════════════════════════════
   Shop by Category — refined tiles
   ═══════════════════════════════════════════════════════════════ */
.cat-art{
    position:relative; overflow:hidden;
}
.cat-overlay{
    position:absolute; inset:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:rgba(17,17,17,.55);
    opacity:0; transition:.3s;
    color:#fff;
}
.category-tile:hover .cat-overlay{ opacity:1; }
.cat-overlay-line{
    width:32px; height:1px; background:var(--gold);
    margin-bottom:10px;
    transform:scaleX(0); transition:.4s .05s;
}
.category-tile:hover .cat-overlay-line{ transform:scaleX(1); }
.cat-overlay-text{
    font-size:10px; letter-spacing:4px; text-transform:uppercase;
    transform:translateY(8px); transition:.3s .1s; opacity:0;
}
.category-tile:hover .cat-overlay-text{ transform:translateY(0); opacity:1; }
.cat-count{
    font-size:10px; letter-spacing:2px; text-transform:uppercase;
    color:var(--muted); margin:6px 0 0;
}

/* ═══════════════════════════════════════════════════════════════
   COMPREHENSIVE MOBILE RESPONSIVENESS
   ═══════════════════════════════════════════════════════════════ */

/* ---------- Base mobile-first improvements ---------- */
html{ -webkit-text-size-adjust:100%; }

/* Smooth scroll for in-page links on touch */
@supports (scroll-behavior: smooth){
    html{ scroll-behavior:smooth; }
}

/* Better form inputs on iOS */
input, textarea, select{
    -webkit-appearance:none;
    appearance:none;
    font-size:16px; /* prevent iOS zoom on focus */
}
@media (max-width: 720px){
    input, textarea, select{ font-size:16px; }
}

/* ---------- Header / Nav ---------- */
@media (max-width: 1080px){
    .header-inner{ padding:14px 20px; gap:18px; }
    .primary-nav{ display:none; }
    .mobile-toggle{ display:flex; }
    .header-actions{ margin-left:auto; gap:14px; }
    .brand-name{ font-size:14px; letter-spacing:4px; }
    .brand-sub{ display:none; }
    .brand-mark{ width:36px; height:36px; font-size:16px; }
}
@media (max-width: 720px){
    .header-inner{ padding:12px 16px; }
    .brand-text{ display:none; }
    .announce{ font-size:9px; letter-spacing:2px; padding:8px 12px; }
    .mobile-menu{ width:88vw; padding:70px 28px; }
    .mobile-menu-inner a{ font-size:18px; }
}

/* ---------- Hero ---------- */
@media (max-width: 1080px){
    .hero-grid{
        grid-template-columns:1fr;
        min-height:auto;
    }
    .hero-copy{
        padding:48px 28px 40px;
        max-width:none;
    }
    .hero h1{ font-size:clamp(34px, 7vw, 52px); }
    .hero-tagline{ font-size:18px; margin-bottom:20px; }
    .hero-text{ margin-bottom:24px; font-size:14px; }
    .hero-art{ aspect-ratio:16/11; min-height:320px; }
    .hero-art::after{ background:linear-gradient(to bottom, rgba(248,246,241,.05) 0%, rgba(0,0,0,.25) 100%); }
    .hero-cta{ flex-wrap:wrap; }
    .hero-cta .btn{ flex:1 1 200px; min-width:0; }
}
@media (max-width: 720px){
    .hero-copy{ padding:36px 20px 32px; }
    .hero h1{ font-size:32px; line-height:1.1; }
    .hero-tagline{ font-size:16px; }
    .hero-text{ font-size:13px; margin-bottom:20px; }
    .hero-eyebrow{ margin-bottom:14px; }
    .hero-art{ aspect-ratio:4/3; min-height:240px; }
}

/* ---------- Sections / containers ---------- */
@media (max-width: 1080px){
    section{ padding:64px 0; }
    .section-title{ margin-bottom:36px; }
    .section-title h2{ font-size:clamp(24px, 4vw, 34px); }
}
@media (max-width: 720px){
    section{ padding:48px 0; }
    .section-title{ margin-bottom:28px; }
    .container{ padding:0 18px; }
}

/* ---------- Product grid ---------- */
@media (max-width: 1080px){
    .product-grid{ grid-template-columns:repeat(3, 1fr); gap:22px; }
    .product-grid.cols-3,
    .product-grid.cols-2{ grid-template-columns:repeat(2, 1fr); }
    .product-img{ aspect-ratio:1/1; }
    .product-name{ font-size:16px; }
}
@media (max-width: 720px){
    .product-grid{ grid-template-columns:repeat(2, 1fr); gap:16px; }
    .product-grid.cols-3{ grid-template-columns:1fr; }
    .product-grid.cols-2{ grid-template-columns:1fr; }
    .product-img{ aspect-ratio:4/5; }
    .product-name{ font-size:15px; }
    .product-cat{ font-size:9px; }
    .product-price{ font-size:13px; }
    .product-actions{ opacity:1; transform:none; }
    .product-actions .btn{ padding:10px 6px; font-size:9px; letter-spacing:1px; }
    .visual-grid{ grid-template-columns:repeat(2, 1fr); gap:10px; }
    .complete-grid{ grid-template-columns:repeat(2, 1fr); gap:8px; }
    .complete-tile{ border-width:1px; }
}

/* ---------- Categories ---------- */
@media (max-width: 1080px){
    .categories-row{ grid-template-columns:repeat(4, 1fr); gap:14px; }
    .category-tile h3{ font-size:16px; }
}
@media (max-width: 720px){
    .categories-row{ grid-template-columns:repeat(2, 1fr); gap:14px; }
    .category-tile .cat-art{ padding:14px; }
    .category-tile h3{ font-size:14px; }
    .cat-overlay-text{ font-size:8px; letter-spacing:2px; }
    .cat-count{ font-size:9px; }
}

/* ---------- Editorial / story sections ---------- */
@media (max-width: 1080px){
    .editorial-split{ grid-template-columns:1fr; }
    .editorial-split .copy{ padding:48px 32px; }
    .editorial-split .art{ aspect-ratio:16/10; }
    .why-list{ grid-template-columns:repeat(2, 1fr); gap:24px; }
    .stories-grid{ grid-template-columns:repeat(2, 1fr); gap:20px; }
    .story-image{ aspect-ratio:5/3; }
}
@media (max-width: 720px){
    .editorial-split .copy{ padding:36px 20px; }
    .editorial-split .copy h2{ font-size:24px; }
    .why-list{ grid-template-columns:1fr; gap:18px; padding-top:28px; }
    .why-item{ padding:18px 0; border-bottom:1px solid var(--line); }
    .why-item:last-child{ border-bottom:0; }
    .values-grid{ grid-template-columns:1fr; gap:24px; padding-top:28px; }
    .stories-grid{ grid-template-columns:1fr; gap:24px; }
    .story-card h3{ font-size:20px; }
    .story-image{ aspect-ratio:5/4; }
}

/* ---------- Visual index / complete gallery ---------- */
@media (max-width: 720px){
    .visual-tile{ aspect-ratio:1/1; }
    .visual-tile img{ padding:8px; }
    .complete-tile{ aspect-ratio:1/1; }
}

/* ---------- Carousel ---------- */
@media (max-width: 1080px){
    .carousel-track{ gap:18px; padding:8px 4px 20px; }
    .carousel-track .product-card{ flex:0 0 calc((100% - 36px) / 3); }
    .carousel-controls{ flex-direction:column; gap:14px; align-items:flex-start; }
    .carousel-btn{ width:40px; height:40px; }
}
@media (max-width: 720px){
    .carousel-track{ gap:14px; }
    .carousel-track .product-card{ flex:0 0 86%; }
    .carousel-nav{ gap:6px; }
    .carousel-btn{ width:36px; height:36px; }
}

/* ---------- Shop page layout ---------- */
@media (max-width: 1080px){
    .shop-layout{ grid-template-columns:1fr; gap:32px; padding:48px 0; }
    .shop-sidebar{
        border-right:0; padding-right:0; padding-bottom:24px;
        border-bottom:1px solid var(--line);
    }
    .shop-header{ flex-direction:column; align-items:stretch; gap:14px; }
    .sort-select{ width:100%; min-width:0; }
}
@media (max-width: 720px){
    .shop-layout{ padding:32px 0; gap:24px; }
    .shop-sidebar{ padding-bottom:18px; }
    .filter-group{ margin-bottom:20px; }
    .shop-header h1{ font-size:22px; }
    .price-filter input{ width:70px; padding:6px 8px; font-size:12px; }
}

/* ---------- Product detail ---------- */
@media (max-width: 1080px){
    .product-detail{ grid-template-columns:1fr; gap:40px; padding:32px 0 56px; }
    .product-info h1{ font-size:28px; }
    .product-info .price{ font-size:20px; }
    .product-policies{ grid-template-columns:1fr; padding:18px; }
    .policy{ border-right:0; border-bottom:1px solid var(--line); padding:14px 0; }
    .policy:last-child{ border-bottom:0; }
}
@media (max-width: 720px){
    .product-detail{ gap:24px; padding:24px 0 40px; }
    .gallery-main{ margin-bottom:10px; }
    .gallery-thumbs{ grid-template-columns:repeat(4, 1fr); gap:8px; }
    .product-info h1{ font-size:24px; }
    .product-info .price{ font-size:18px; }
    .qty-control button{ width:38px; height:42px; }
    .qty-control input{ width:54px; height:42px; font-size:14px; }
    .product-actions-row{ flex-direction:column; gap:10px; }
    .product-actions-row .btn{ width:100%; padding:16px; }
    .spec-table th, .spec-table td{ padding:10px 12px; font-size:12px; }
}

/* ---------- Cart ---------- */
@media (max-width: 1080px){
    .cart-grid{ grid-template-columns:1fr; gap:32px; }
    .cart-summary{ position:static; }
    .cart-row{ grid-template-columns:80px 1fr auto; gap:16px; }
}
@media (max-width: 720px){
    .cart-grid{ gap:24px; }
    .cart-row{
        grid-template-columns:80px 1fr; padding:18px 0;
        gap:12px;
    }
    .cart-row .name{ font-size:16px; }
    .cart-thumb{ width:80px; height:100px; }
    .cart-row > div:last-child{
        grid-column:1 / -1;
        text-align:left;
        margin-top:8px;
    }
    .cart-row .qty-mini{ margin-top:6px; }
}

/* ---------- Checkout ---------- */
@media (max-width: 1080px){
    .checkout-grid{ grid-template-columns:1fr; gap:32px; }
    .order-summary-card{ position:static; }
}
@media (max-width: 720px){
    .checkout{ padding:32px 0; }
    .checkout-grid{ gap:24px; }
    .field-grid{ grid-template-columns:1fr; gap:10px; }
    .section-card{ padding:20px; }
    .section-card h2{ font-size:20px; }
    .payment-option{ padding:14px; }
    .bank-detail{ padding:12px; }
}

/* ---------- Newsletter ---------- */
@media (max-width: 1080px){
    .newsletter-inner{ grid-template-columns:1fr; gap:28px; }
    .newsletter{ padding:64px 0; }
}
@media (max-width: 720px){
    .newsletter{ padding:48px 0; }
    .newsletter h2{ font-size:24px; }
    .newsletter-form input{ padding:14px 16px; }
    .newsletter-form button{ width:100%; padding:16px; }
}

/* ---------- Footer ---------- */
@media (max-width: 1080px){
    .site-footer{ padding:56px 0 20px; }
    .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; padding-bottom:32px; }
}
@media (max-width: 720px){
    .site-footer{ padding:48px 0 18px; }
    .footer-grid{ grid-template-columns:1fr; gap:28px; padding-bottom:24px; }
    .footer-base{ flex-direction:column; gap:6px; padding-top:18px; }
    .footer-brand .footer-tag{ font-size:16px; margin:14px 0 10px; }
    .footer-col h4{ font-size:12px; margin-bottom:14px; }
    .footer-col a{ font-size:13px; padding:6px 0; }
}

/* ---------- Page headers ---------- */
@media (max-width: 720px){
    .page-header{ padding:48px 0 32px; }
    .page-header h1{ font-size:28px; }
    .crumbs{ font-size:10px; margin-bottom:10px; }
    .back-to-top{ width:38px; height:38px; bottom:14px; right:14px; }
}

/* ---------- About / Contact page layouts ---------- */
@media (max-width: 1080px){
    .contact-grid{ grid-template-columns:1fr; gap:32px; padding:40px 0; }
    .about-hero{ grid-template-columns:1fr; }
    .about-hero .copy{ padding:48px 28px; }
    .about-images{ grid-template-columns:repeat(2, 1fr); gap:14px; }
    .contact-visual{ margin-top:24px; }
}
@media (max-width: 720px){
    .contact-grid{ gap:24px; padding:32px 0; }
    .contact-info{ padding:24px; }
    .contact-info dl{ font-size:14px; }
    .about-hero .copy{ padding:32px 20px; }
    .about-hero .copy h2{ font-size:24px; }
    .about-images{ grid-template-columns:repeat(2, 1fr); gap:10px; }
    .about-img{ padding:10px; }
    .map{ aspect-ratio:4/3; }
    .contact-visual .caption{ left:20px; right:20px; bottom:20px; }
    .contact-visual .caption h3{ font-size:18px; }
}

/* ---------- Forms ---------- */
@media (max-width: 720px){
    .field input, .field textarea, .field select{ padding:12px 14px; font-size:14px; }
    .field textarea{ min-height:110px; }
    .btn{ padding:14px 20px; font-size:11px; letter-spacing:2px; }
    .btn-block{ width:100%; }
    .btn-sm{ padding:10px 14px; }
}

/* ---------- Lookbook ---------- */
@media (max-width: 1080px){
    .lookbook-grid{ grid-template-columns:repeat(2, 1fr); gap:14px; }
    .lookbook-tile-tall{ aspect-ratio:1/1; grid-row:auto; }
    .lookbook-caption{ opacity:1; transform:none; padding:12px 14px; }
    .lookbook-caption h3{ font-size:14px; }
}
@media (max-width: 720px){
    .lookbook-grid{ grid-template-columns:1fr; }
    .lookbook-tile{ aspect-ratio:5/4; }
}

/* ---------- Mobile menu ---------- */
.mobile-toggle{ display:none; }
@media (max-width: 1080px){
    .primary-nav{ display:none; }
    .mobile-toggle{ display:flex; }
}

/* ---------- Admin responsive ---------- */
@media (max-width: 1080px){
    .admin{ grid-template-columns:1fr; }
    .admin-sidebar{ border-right:0; border-bottom:1px solid var(--line); padding-bottom:20px; }
}

/* ═══════════════════════════════════════════════════════════════
   ENHANCED MOBILE RESPONSIVENESS — touch & spacing
   ═══════════════════════════════════════════════════════════════ */

/* ---------- Viewport / Typography mobile baseline ---------- */
@media (max-width: 720px){
    body{ font-size:14px; line-height:1.6; }
    h1{ font-size:30px; line-height:1.1; letter-spacing:0; }
    h2{ font-size:24px; line-height:1.15; }
    h3{ font-size:18px; line-height:1.3; }
    .lede{ font-size:15px; }
    .eyebrow{ font-size:10px; letter-spacing:3px; }
}

/* ---------- Better mobile menu animation ---------- */
.mobile-overlay{
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
    transition:opacity .4s ease, visibility .4s ease;
}
.mobile-menu{
    transition:right .4s cubic-bezier(.4, 0, .2, 1);
    box-shadow:-8px 0 32px rgba(0,0,0,.08);
}
.mobile-menu-inner a{
    transition:color .2s ease, padding-left .3s ease;
}
.mobile-menu-inner a:hover{
    padding-left:8px;
}
@media (max-width: 720px){
    .mobile-menu-inner a{ font-size:20px; padding-bottom:12px; }
}

/* ---------- Touch-friendly buttons ---------- */
@media (max-width: 720px){
    .btn{ min-height:48px; padding:14px 22px; }
    .btn-link{ min-height:auto; padding:0; }
    .carousel-btn{ min-width:44px; min-height:44px; }
    .hero-arrow{ min-width:44px; min-height:44px; }
    .qty-control button{ min-width:44px; min-height:46px; }
    .qty-mini button{ min-width:38px; min-height:38px; }
    input[type=checkbox], input[type=radio]{ min-width:18px; min-height:18px; }
}

/* ---------- Active state for touch (subtle) ---------- */
@media (hover: none){
    .category-tile:active .cat-overlay,
    .product-card:active .product-actions{ opacity:1; transform:translateY(0); }
    .product-card .product-actions{ opacity:0; transform:translateY(8px); }
    .product-card .product-img img{ transform:none; }
}

/* ---------- Better image rendering on small screens ---------- */
@media (max-width: 720px){
    .product-img, .gallery-main, .visual-tile, .complete-tile{
        background-color:#fff;
    }
    .hero-art img, .hero-art{ object-position:center; }
}

/* ---------- Better long-form text on mobile ---------- */
@media (max-width: 720px){
    .long-form p{ font-size:15px; line-height:1.75; }
    .long-form h2{ margin-top:32px; font-size:20px; }
    .long-form ul, .long-form ol{ padding-left:20px; }
}

/* ---------- Mobile-friendly tables (admin) ---------- */
@media (max-width: 1080px){
    .tbl{ font-size:12px; }
    .tbl th, .tbl td{ padding:10px 12px; }
}
@media (max-width: 720px){
    .tbl{ font-size:11px; }
    .tbl th, .tbl td{ padding:8px 10px; }
    .tbl .num{ font-size:13px; }
    .panel{ margin-bottom:16px; }
    .panel-head{ padding:14px 16px; }
    .panel-head h2{ font-size:15px; }
    .panel-body{ padding:16px; }
    .admin-content{ padding:16px; }
    .admin-top{ padding:14px 18px; flex-direction:column; align-items:flex-start; gap:6px; }
    .admin-top h1{ font-size:18px; }
    .admin-top .admin-info{ font-size:11px; }
    .stat-card{ padding:18px; }
    .stat-card .value{ font-size:24px; }
    .split{ grid-template-columns:1fr; gap:16px; }
    .field input, .field textarea, .field select{ padding:11px 12px; font-size:14px; }
    .field-row{ grid-template-columns:1fr; }
    .filter-row{ flex-direction:column; align-items:stretch; }
    .filter-row .field{ width:100%; }
}

/* ---------- Stat cards stack on mobile ---------- */
@media (max-width: 720px){
    .stat-grid{ grid-template-columns:1fr 1fr; gap:10px; }
    .stat-card{ padding:16px; }
    .stat-card .value{ font-size:22px; }
    .stat-card .label{ font-size:9px; }
}

/* ---------- Avoid horizontal scroll on small screens ---------- */
html, body{ overflow-x:hidden; }
img, video, svg{ max-width:100%; }

/* ---------- Smooth font rendering on iOS ---------- */
body{
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
}

/* ---------- Touch scroll momentum on iOS ---------- */
.scroll-container, .carousel-track, .gallery-thumbs{
    -webkit-overflow-scrolling:touch;
}

/* ---------- Don't show hover effects on touch devices ---------- */
@media (hover: hover){
    .lookbook-caption{ opacity:0; }
    .lookbook-tile:hover .lookbook-caption{ opacity:1; }
    .product-card .product-actions{ opacity:0; }
    .product-card:hover .product-actions{ opacity:1; }
    .category-tile .cat-overlay{ opacity:0; }
    .category-tile:hover .cat-overlay{ opacity:1; }
}

/* ---------- Better product detail mobile gallery ---------- */
@media (max-width: 720px){
    .gallery-thumbs{
        display:flex; overflow-x:auto;
        scroll-snap-type:x mandatory;
        grid-template-columns:none;
        padding-bottom:8px;
    }
    .gallery-thumb{
        flex:0 0 25%;
        scroll-snap-align:start;
    }
}

/* ---------- Better admin login on mobile ---------- */
@media (max-width: 720px){
    .login-card{ padding:32px 24px; }
    .login-card h1{ font-size:18px; }
    .login-card .sub{ font-size:10px; letter-spacing:3px; }
    .login-card .brand-mark{ width:42px; height:42px; font-size:20px; }
}

/* ---------- Sticky header on mobile ---------- */
@media (max-width: 1080px){
    .site-header{ position:sticky; top:0; z-index:50; }
}

/* ---------- Cart responsive ---------- */
@media (max-width: 720px){
    .cart-empty{ padding:64px 0; }
    .cart-empty .icon{ width:48px; height:48px; }
    .cart-summary{ padding:20px; }
    .cart-summary h3{ font-size:12px; }
    .summary-row{ font-size:13px; }
    .summary-row.total{ font-size:18px; }
}

/* ---------- Order success page ---------- */
@media (max-width: 720px){
    .success-page{ padding:64px 0; }
    .success-icon{ width:56px; height:56px; }
    .success-page h1{ font-size:24px; }
    .success-meta{ padding:20px 24px; min-width:0; margin:24px auto; }
}

/* ---------- Better animation on mobile ---------- */
@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:0.01ms !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   NO HORIZONTAL SCROLL ON MOBILE — comprehensive overflow fix
   ═══════════════════════════════════════════════════════════════ */

/* Global overflow protection (applies at all sizes) */
html, body{ overflow-x:hidden; max-width:100%; }
body{ position:relative; }

/* Every container and section must respect viewport width */
.container, section, header, footer, main, nav{ max-width:100%; }

/* Images, videos, svgs: never overflow */
img, video, svg, iframe, embed, object{
    max-width:100% !important;
    height:auto;
}
.hero-art img, .gallery-main img, .gallery-thumb img, .story-image img, .hero-slide .art{
    width:100%;
    max-width:100%;
    object-fit:cover;
    object-position:center;
}

/* Prevent long text from forcing horizontal scroll */
html{ word-wrap:break-word; overflow-wrap:break-word; }
h1, h2, h3, h4, h5, h6, p, li, td, th{
    overflow-wrap:break-word;
    word-break:break-word;
    hyphens:auto;
    -webkit-hyphens:auto;
}

/* Long URLs and emails */
a{ word-break:break-all; }

/* Address fields, names, etc. */
input, textarea, select{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* Tables: make them scrollable containers on mobile */
@media (max-width: 720px){
    table{ display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }
    thead, tbody, tr, td, th{ display:table; width:100%; }
    .tbl-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* Marquee: prevent horizontal scroll from text overflow */
.marquee{ overflow:hidden !important; max-width:100%; }
.marquee-track{ display:inline-block; white-space:nowrap; }

/* Hero section: cap image dimensions */
.hero, .hero-grid, .hero-art, .hero-copy{
    max-width:100%;
    overflow:hidden;
}
.hero-art img{ max-width:100%; }

/* Product detail gallery: prevent overflow */
.product-detail, .gallery-main, .gallery-thumbs{
    max-width:100%;
    overflow:hidden;
}
.gallery-thumbs{
    display:flex;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    flex-wrap:nowrap;
}
.gallery-thumb{ flex:0 0 auto; min-width:80px; max-width:120px; }

/* Carousel: prevent overflow */
.carousel-wrap{ max-width:100%; overflow:hidden; }
.carousel-track{
    display:flex;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
}
.carousel-track .product-card{ flex:0 0 auto; }

/* Categories row: wrap on mobile */
.categories-row{ max-width:100%; }
@media (max-width: 720px){
    .categories-row{ grid-template-columns:repeat(2, 1fr); gap:10px; }
}

/* Marquee track must not cause horizontal scroll */
.marquee-track{
    padding-left:100%;
    will-change:transform;
}

/* Section title h2 should never overflow */
.section-title h2{
    word-wrap:break-word;
    overflow-wrap:break-word;
    max-width:100%;
}

/* Product card: prevent text overflow */
.product-name, .product-cat, .product-price{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.product-name{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* Hero slider: prevent overflow */
.hero-slider, .hero-slides, .hero-slide{ max-width:100%; overflow:hidden; }

/* Lookbook tiles: prevent overflow */
.lookbook-section, .lookbook-grid, .lookbook-tile{ max-width:100%; overflow:hidden; }

/* Stories: prevent overflow */
.stories-section, .stories-grid, .story-card{ max-width:100%; overflow:hidden; }
.story-image{ overflow:hidden; }

/* Complete gallery grid: prevent overflow */
.complete-gallery, .complete-grid, .complete-tile{ max-width:100%; overflow:hidden; }

/* Footer: prevent overflow */
.site-footer, .footer-grid{ max-width:100%; overflow:hidden; }

/* Forms: ensure inputs don't overflow */
.field input, .field textarea, .field select, .sort-select{
    max-width:100%;
    box-sizing:border-box;
}
.field-grid, .field-row{ max-width:100%; }

/* Admin tables: scrollable on mobile */
@media (max-width: 720px){
    .panel{ max-width:100%; overflow:hidden; }
    .tbl{ display:block; overflow-x:auto; max-width:100%; }
}

/* Image hover zoom: contain within parent */
.product-img, .visual-tile, .complete-tile, .about-img, .cat-art{
    overflow:hidden;
    max-width:100%;
}

/* Check for any fixed-width offenders on mobile */
@media (max-width: 720px){
    *, *::before, *::after{
        max-width:100vw;
    }
    /* Allow overflow-x auto on specific scrollable elements */
    .gallery-thumbs, .carousel-track, .tbl, .marquee-track{
        max-width:none;  /* these need to extend to allow their content */
    }
}

/* Prevent any SVG or icon from causing overflow */
svg{ max-width:100%; height:auto; }

/* Ensure text in headers doesn't overflow */
.site-header{ max-width:100%; overflow:hidden; }
.brand-name, .brand-text{ max-width:100%; overflow:hidden; text-overflow:ellipsis; }

/* Newsletter form: don't overflow */
.newsletter-form, .newsletter-form input, .newsletter-form button{
    max-width:100%;
    box-sizing:border-box;
}

/* Address fields in contact form */
.contact-info dl{ word-break:break-word; overflow-wrap:break-word; }

/* Search bar in shop */
.shop-header{ max-width:100%; overflow:hidden; }
.shop-header h1, .shop-header .count{ word-break:break-word; }

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE CUSTOMIZATION
   Hiding specific sections per user request
   ═══════════════════════════════════════════════════════════════ */

/* Hide carousel section on homepage */
.carousel-section{
    display:none !important;
}

/* Hide categories section on homepage */
section .categories-row{
    display:none !important;
}

/* Hide product image thumbnails - show only main image */
.gallery-thumbs{
    display:none !important;
}

/* Hide removed products - belt and suspenders approach */
a[href*="tissot-pr-100-powermatic-80"],
a[href*="fossil-jacqueline-three-hand"],
a[href*="tissot-pr100-powermatic-80"],
a[href*="fossil-jacqueline"],
.product-card[data-slug*="tissot-pr-100-powermatic-80"],
.product-card[data-slug*="fossil-jacqueline-three-hand"]{
    display:none !important;
}

/* ═══════════════════════════════════════════════════════════════
   PERFORMANCE OPTIMIZATIONS
   GPU acceleration, containment, will-change
   ═══════════════════════════════════════════════════════════════ */

/* GPU acceleration for animations and transforms */
.hero-slide,
.product-card,
.carousel-track,
.mobile-menu,
.mobile-overlay,
.category-tile img,
.product-img img,
.loading-spinner,
.reveal,
.reveal-stagger > *{
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}

/* CSS containment for better rendering performance */
.product-card{
    contain:layout style paint;
}
.category-tile{
    contain:layout style;
}
.cart-row{
    contain:layout;
}
section{
    contain:layout;
}

/* will-change for elements that animate frequently */
.carousel-track{
    will-change:scroll-position;
}
.mobile-menu{
    will-change:transform;
}
.hero-slide.is-active{
    will-change:opacity;
}
.loading-bar::after{
    will-change:transform;
}
.product-img img{
    will-change:transform;
    transition:transform .8s cubic-bezier(.4, 0, .2, 1);
}

/* Optimize scrolling performance */
.carousel-track,
.gallery-thumbs{
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
}

/* Compositing hints for frequently animated elements */
.hero-arrow,
.carousel-btn,
.back-to-top,
.cart-badge{
    isolation:isolate;
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY IMPROVEMENTS
   Focus states, reduced motion, keyboard navigation
   ═══════════════════════════════════════════════════════════════ */

/* Modern focus-visible (keyboard focus only) */
:focus{
    outline:none;
}
:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:3px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:2px;
}
.btn:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:3px;
    box-shadow:0 0 0 4px rgba(182, 154, 99, 0.15);
}
.product-card:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:2px;
    transform:translateY(-4px);
}

/* Skip to content link for keyboard users */
.skip-to-content{
    position:absolute;
    top:-100px;
    left:0;
    background:var(--primary);
    color:#fff;
    padding:12px 20px;
    z-index:100;
    text-decoration:none;
    transition:top .3s;
}
.skip-to-content:focus{
    top:0;
}

/* Enhanced reduced-motion support */
@media (prefers-reduced-motion: reduce){
    *,
    *::before,
    *::after{
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:0.01ms !important;
        scroll-behavior:auto !important;
    }
    .hero-art::after{
        background:linear-gradient(to right, rgba(248,246,241,.25), transparent 25%);
    }
    .reveal,
    .reveal-stagger > *{
        opacity:1;
        transform:none;
    }
}

/* Keyboard navigation improvements */
.mobile-menu a:focus,
.primary-nav a:focus{
    color:var(--gold-deep);
}
.category-tile:focus .cat-overlay{
    opacity:1;
}
.product-card:focus .product-actions{
    opacity:1;
    transform:translateY(0);
}

/* High contrast mode support */
@media (prefers-contrast: high){
    .btn-outline{
        border-width:2px;
    }
    .product-card{
        border:1px solid var(--line);
    }
    .category-tile{
        border:1px solid var(--line);
    }
}

/* ═══════════════════════════════════════════════════════════════
   LOADING STATES & TRANSITIONS
   Progressive enhancement for better UX
   ═══════════════════════════════════════════════════════════════ */

/* Button loading state */
.btn[disabled]{
    opacity:0.6;
    cursor:not-allowed;
    position:relative;
}
.btn.is-loading{
    color:transparent;
}
.btn.is-loading::after{
    content:"";
    position:absolute;
    width:16px;
    height:16px;
    top:50%;
    left:50%;
    margin:-8px 0 0 -8px;
    border:2px solid transparent;
    border-top-color:currentColor;
    border-radius:50%;
    animation:spin 0.8s linear infinite;
}

/* Skeleton loading for images */
.product-img,
.gallery-main,
.hero-art{
    position:relative;
    background:linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size:200% 100%;
}
.product-img.loaded,
.gallery-main.loaded,
.hero-art.loaded{
    background:transparent;
}

/* Fade-in for lazy-loaded images */
img[loading="lazy"]{
    opacity:0;
    transition:opacity 0.4s ease;
}
img[loading="lazy"].loaded{
    opacity:1;
}

/* Smooth page transitions */
@media (prefers-reduced-motion: no-preference){
    body{
        animation:fadeIn 0.3s ease;
    }
}
@keyframes fadeIn{
    from{ opacity:0; }
    to{ opacity:1; }
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE SUPPORT (optional, commented out)
   Uncomment to enable dark mode based on system preference
   ═══════════════════════════════════════════════════════════════ */

/* 
@media (prefers-color-scheme: dark){
    :root{
        --primary:#f5f5f5;
        --charcoal:#e0e0e0;
        --ivory:#1a1a1a;
        --warm-white:#242424;
        --line:#3a3a3a;
        --line-soft:#2f2f2f;
        --muted:#a0a0a0;
    }
    .site-header{
        background:rgba(26,26,26,.96);
    }
    .product-img,
    .gallery-main,
    .cart-thumb{
        background:#2a2a2a;
    }
}
*/

/* ═══════════════════════════════════════════════════════════════
   PRINT STYLES
   Optimize for printing
   ═══════════════════════════════════════════════════════════════ */

@media print{
    .site-header,
    .site-footer,
    .mobile-toggle,
    .mobile-menu,
    .mobile-overlay,
    .back-to-top,
    .carousel-controls,
    .product-actions,
    .newsletter,
    .btn,
    button{
        display:none !important;
    }
    body{
        background:#fff;
        color:#000;
    }
    .product-card,
    .cart-row{
        page-break-inside:avoid;
    }
    a{
        text-decoration:underline;
    }
    .hero-copy{
        padding:20px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   CRITICAL PERFORMANCE: Force compositing layers
   ═══════════════════════════════════════════════════════════════ */

/* Elements that need their own compositing layer for smooth animation */
@media (min-width: 721px){
    .hero-slide,
    .mobile-menu,
    .site-header,
    .back-to-top{
        will-change:transform;
        transform:translate3d(0,0,0);
    }
}

/* Remove will-change after animation to free resources */
.product-card:not(:hover){
    will-change:auto;
}
.category-tile:not(:hover){
    will-change:auto;
}