@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500&family=Jost:wght@400;500;600&family=Amiri:wght@400;700&display=swap');

  :root{
    --bg:#f6f0e3;
    --bg-raised:#efe4cf;
    --ink:#1a4237;
    --ink-soft:#374a41;
    --accent:#7d5620;
    --accent-deep:#5c2312;
    --line:rgba(26,66,55,0.18);
    --band-bg:#1a3730;
    --band-text:#f6f0e3;
    --band-text-soft:#bcc9bf;
    --band-line:rgba(246,240,227,0.22);
    /* Fixed brand green — stays constant across light/dark viewer themes,
       used for the WhatsApp CTAs so they never render as brown/cream. */
    --wa-green:#1a4237;
    --wa-green-hover:#123028;
    --wa-on-green:#f6f0e3;
    --focus-ring:#7d5620;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12100b;
      --bg-raised:#1b1712;
      --ink:#f1e9d8;
      --ink-soft:#b9ad97;
      --accent:#d6a75c;
      --accent-deep:#e0895c;
      --line:rgba(241,233,216,0.16);
      --band-bg:#0c1613;
      --band-text:#f1e9d8;
      --band-text-soft:#9db0a4;
      --band-line:rgba(241,233,216,0.16);
      --focus-ring:#d6a75c;
    }
  }
  :root[data-theme="dark"]{
    --bg:#12100b;
    --bg-raised:#1b1712;
    --ink:#f1e9d8;
    --ink-soft:#b9ad97;
    --accent:#d6a75c;
    --accent-deep:#e0895c;
    --line:rgba(241,233,216,0.16);
    --band-bg:#0c1613;
    --band-text:#f1e9d8;
    --band-text-soft:#9db0a4;
    --band-line:rgba(241,233,216,0.16);
    --focus-ring:#d6a75c;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  html, body{ max-width:100%; overflow-x:hidden; }
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Jost', 'Segoe UI', sans-serif;
    -webkit-font-smoothing:antialiased;
  }

  /* Visible keyboard focus everywhere, in both themes */
  a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
    outline:2px solid var(--focus-ring);
    outline-offset:3px;
    border-radius:1px;
  }

  .skip-link{
    position:absolute; left:1rem; top:-3rem;
    background:var(--ink); color:var(--bg);
    padding:0.7rem 1.1rem; font-size:0.85rem;
    z-index:200; transition:top 0.2s ease;
  }
  .skip-link:focus{ top:1rem; }

  .visually-hidden{
    position:absolute; width:1px; height:1px;
    padding:0; margin:-1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
    /* Freeze decorative infinite animations at rest instead of just speeding them up */
    .ornament, .bottle-wrap, .badge-seal, .hero-glow, .sticky-wa .dot, .btn-pulse::after{
      animation:none !important;
    }
  }

  @media (max-width:480px){
    /* Decorative flourishes that add clutter on the smallest screens */
    .badge-seal, .badge-seal-static{ display:none; }
  }

  h1,h2,h3,.serif{
    font-family:'Cormorant Garamond', 'Times New Roman', serif;
    font-weight:500;
    text-wrap:balance;
    margin:0;
  }
  .arabic{
    font-family:'Amiri', serif;
    direction:rtl;
  }
  .eyebrow{
    font-family:'Jost', sans-serif;
    font-size:0.72rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--accent);
    font-weight:600;
    margin:0 0 1rem;
  }
  .eyebrow.on-band{ color:var(--band-text-soft); }
  a{color:inherit;}
  img{display:block;}
  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding:0 clamp(1.25rem, 4vw, 3rem);
  }

  /* NAV */
  nav{
    position:sticky; top:0; z-index:20;
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    position:relative;
    max-width:1180px; margin:0 auto;
    padding:0.9rem clamp(1.25rem, 4vw, 3rem);
    display:flex; align-items:center; justify-content:space-between;
    gap:1.5rem;
  }
  .brand-mark{
    font-family:'Cormorant Garamond', serif;
    font-size:1.15rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    font-weight:600;
    text-decoration:none;
    color:var(--ink);
    white-space:nowrap;
  }
  .nav-links{
    display:flex; align-items:center; gap:clamp(1rem,2.5vw,2.2rem);
    list-style:none; margin:0; padding:0;
  }
  .nav-links a{
    text-decoration:none;
    font-size:0.82rem;
    letter-spacing:0.06em;
    color:var(--ink-soft);
    transition:color 0.2s ease;
  }
  .nav-links a:hover, .nav-links a:focus-visible{ color:var(--accent); }
  .nav-links li:last-child a{
    border:1px solid var(--ink);
    padding:0.5rem 1.1rem;
    color:var(--ink);
    text-transform:uppercase;
    letter-spacing:0.1em;
    font-size:0.72rem;
  }
  .nav-links li:last-child a:hover{ background:var(--ink); color:var(--bg); }
  .nav-toggle{
    display:none;
    align-items:center; justify-content:center;
    width:44px; height:44px;
    background:transparent; border:1px solid var(--line);
    color:var(--ink);
    cursor:pointer;
    flex-shrink:0;
  }
  .nav-toggle svg{ width:20px; height:20px; }
  .nav-toggle .icon-close{ display:none; }
  .nav-toggle[aria-expanded="true"] .icon-open{ display:none; }
  .nav-toggle[aria-expanded="true"] .icon-close{ display:block; }

  /* HERO */
  .hero{
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    align-items:stretch;
    min-height:min(88vh, 760px);
    border-bottom:1px solid var(--line);
  }
  .hero-text{
    display:flex; flex-direction:column; justify-content:center;
    gap:1.6rem;
    padding:clamp(2.5rem,6vw,5rem) clamp(1.5rem,5vw,4.5rem);
  }
  .hero-text h1{ font-size:clamp(2.6rem, 5.4vw, 4.4rem); line-height:1.03; }
  .hero-ar{ font-size:clamp(1.2rem,2vw,1.6rem); color:var(--ink-soft); }
  .hero-tagline{
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    font-size:clamp(1.15rem,1.7vw,1.4rem);
    color:var(--accent-deep);
  }
  .hero-body{
    max-width:44ch;
    font-size:1rem;
    line-height:1.7;
    color:var(--ink-soft);
  }
  .hero-cta{ display:flex; flex-wrap:wrap; gap:0.9rem; margin-top:0.4rem; }
  .btn{
    display:inline-flex; align-items:center; gap:0.5rem;
    padding:0.85rem 1.5rem;
    text-decoration:none;
    font-size:0.78rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    border:1px solid var(--ink);
    transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .btn-solid{ background:var(--ink); color:var(--bg); }
  .btn-solid:hover{ background:var(--accent-deep); border-color:var(--accent-deep); }
  .btn-pulse{ position:relative; }
  .btn-pulse::after{
    content:"";
    position:absolute; inset:0;
    border:1px solid var(--accent-deep);
    animation:btn-ring 2.4s ease-out infinite;
    pointer-events:none;
  }
  @keyframes btn-ring{
    0%{ opacity:0.6; transform:scale(1); }
    100%{ opacity:0; transform:scale(1.18); }
  }
  .btn-line{ background:transparent; color:var(--ink); }
  .btn-line:hover{ background:var(--ink); color:var(--bg); }
  .btn-line.on-band{ border-color:var(--band-line); color:var(--band-text); }
  .btn-line.on-band:hover{ background:var(--band-text); color:var(--band-bg); }

  .hero-image{
    position:relative;
    overflow:hidden;
    background:var(--bg-raised);
    perspective:1400px;
  }
  .hero-image img{
    width:100%; height:112%; object-fit:cover;
    object-position:center 30%;
    transform:scale(1.05);
    will-change:transform;
  }
  .hero-image::after{
    content:"";
    position:absolute; inset:0;
    box-shadow:inset 0 0 0 1px var(--line);
    z-index:2;
  }
  .ornament{
    position:absolute;
    pointer-events:none;
    opacity:0.16;
    z-index:1;
    animation:float-slow 10s ease-in-out infinite;
  }
  .ornament.on-band{ opacity:0.1; }
  @keyframes float-slow{
    0%,100%{ transform:translateY(0) rotate(0deg); }
    50%{ transform:translateY(-16px) rotate(4deg); }
  }
  .bottle-wrap{
    width:100%; height:100%;
    animation:bottle-bob 5.5s ease-in-out infinite;
  }
  @keyframes bottle-bob{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-9px); }
  }
  .hero-glow{
    position:absolute;
    width:340px; height:340px;
    border-radius:50%;
    background:radial-gradient(circle, var(--accent) 0%, transparent 70%);
    opacity:0.16;
    filter:blur(30px);
    top:-4rem; left:-6rem;
    z-index:-1;
    animation:float-slow-rev 13s ease-in-out infinite;
    pointer-events:none;
  }
  .badge-seal{
    position:absolute;
    left:1.25rem; bottom:1.25rem;
    width:96px; height:96px;
    z-index:3;
    animation:spin-slow 22s linear infinite;
  }
  @keyframes spin-slow{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
  .badge-seal-static{
    position:absolute;
    left:1.25rem; bottom:1.25rem;
    width:96px; height:96px;
    z-index:4;
    display:flex; align-items:center; justify-content:center;
    pointer-events:none;
  }
  .badge-seal-static svg{ width:26px; height:26px; }

  .btn-solid{ position:relative; overflow:hidden; }
  .btn-solid::before{
    content:"";
    position:absolute; top:0; left:-60%;
    width:40%; height:100%;
    background:linear-gradient(115deg, transparent, rgba(255,255,255,0.35), transparent);
    transform:skewX(-20deg);
    transition:left 0.6s ease;
  }
  .btn-solid:hover::before{ left:130%; }
  @keyframes float-slow-rev{
    0%,100%{ transform:translateY(0) rotate(0deg); }
    50%{ transform:translateY(14px) rotate(-3deg); }
  }

  /* SCROLL REVEAL (progressive enhancement — content is visible without JS) */
  .reveal-armed .reveal{
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.7s ease, transform 0.7s ease;
  }
  .reveal-armed .reveal.reveal-in{
    opacity:1;
    transform:none;
  }

  /* TRUST BAR */
  .trust-bar{
    background:var(--bg-raised);
    border-bottom:1px solid var(--line);
  }
  .trust-bar-inner{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1.5rem;
    padding:1.5rem clamp(1.25rem,4vw,3rem);
  }
  .trust-item{
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:0.3rem;
  }
  .trust-item .trust-num{
    font-family:'Cormorant Garamond', serif; font-weight:600; font-size:1.25rem; color:var(--accent-deep);
  }
  .trust-item span:last-child{
    font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft);
  }
  @media (max-width:700px){
    .trust-bar-inner{ grid-template-columns:repeat(2,1fr); }
  }

  /* STICKY WHATSAPP CTA */
  .sticky-wa{
    position:fixed;
    right:clamp(1rem,3vw,1.75rem);
    bottom:clamp(1rem,3vw,1.75rem);
    z-index:50;
    display:inline-flex; align-items:center; gap:0.6rem;
    background:var(--wa-green);
    color:var(--wa-on-green);
    text-decoration:none;
    padding:0.85rem 1.3rem;
    font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase;
    box-shadow:0 10px 30px -10px rgba(0,0,0,0.4);
    transition:background 0.2s ease, transform 0.2s ease;
  }
  .sticky-wa:hover{ background:var(--wa-green-hover); transform:translateY(-2px); }
  .sticky-wa .dot{
    width:9px; height:9px; border-radius:50%; background:#3fce6e; flex-shrink:0;
    box-shadow:0 0 0 rgba(63,206,110,0.6);
    animation:pulse-dot 2.2s infinite;
  }
  @keyframes pulse-dot{
    0%{ box-shadow:0 0 0 0 rgba(63,206,110,0.55); }
    70%{ box-shadow:0 0 0 9px rgba(63,206,110,0); }
    100%{ box-shadow:0 0 0 0 rgba(63,206,110,0); }
  }
  @media (max-width:560px){
    .sticky-wa{
      padding:0; width:52px; height:52px;
      border-radius:50%; justify-content:center;
      right:1rem; bottom:calc(1rem + env(safe-area-inset-bottom, 0px));
    }
    .sticky-wa span.sticky-label{
      position:absolute; width:1px; height:1px; padding:0; margin:-1px;
      overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
    }
  }

  /* STORY BAND */
  .band{
    background:var(--band-bg);
    color:var(--band-text);
    padding:clamp(4rem,10vw,7rem) clamp(1.5rem,5vw,4.5rem);
  }
  .band-inner{
    max-width:760px; margin:0 auto; text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:1.75rem;
  }
  .rule{
    width:44px; height:1px; background:var(--accent);
  }
  .pull-quote{
    font-family:'Cormorant Garamond', serif;
    font-weight:500;
    font-style:italic;
    font-size:clamp(1.4rem, 3vw, 2rem);
    line-height:1.5;
  }
  .band-sub{
    font-size:0.95rem;
    line-height:1.8;
    color:var(--band-text-soft);
    max-width:52ch;
  }

  /* SECTION HEADS */
  section{ padding:clamp(4rem,9vw,6.5rem) 0; }
  .section-head{
    display:flex; justify-content:space-between; align-items:flex-end;
    gap:2rem; margin-bottom:clamp(2.5rem,5vw,4rem);
    border-bottom:1px solid var(--line);
    padding-bottom:1.75rem;
  }
  .section-head h2{ font-size:clamp(2rem,4vw,2.9rem); }
  .section-head p{
    max-width:36ch; color:var(--ink-soft); font-size:0.95rem; line-height:1.6; margin:0.5rem 0 0;
  }

  /* COLLECTION */
  .product-row{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:clamp(1.75rem,4vw,3.5rem);
    align-items:center;
    padding:clamp(2rem,4vw,3rem) 0;
    border-bottom:1px solid var(--line);
  }
  .product-row:last-child{ border-bottom:none; padding-bottom:0; }
  .product-row.reverse .product-media{ order:2; }
  .product-row.reverse .product-copy{ order:1; }
  .product-media{
    aspect-ratio:5/6;
    max-height:420px;
    overflow:hidden;
    background:var(--bg-raised);
    perspective:1000px;
    box-shadow:
      0 1px 1px var(--line),
      0 22px 44px -26px rgba(10,10,8,0.45),
      0 10px 20px -14px rgba(10,10,8,0.3);
    transition:box-shadow 0.35s ease, transform 0.35s ease;
  }
  .product-media:hover{
    box-shadow:
      0 1px 1px var(--line),
      0 34px 60px -26px rgba(10,10,8,0.5),
      0 16px 28px -14px rgba(10,10,8,0.35);
  }
  .product-media img{
    width:100%; height:100%; object-fit:cover;
    transform-style:preserve-3d;
    will-change:transform;
    transition:transform 0.25s ease-out;
  }
  .product-tag{
    font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase;
    color:var(--accent); font-weight:600; margin-bottom:0.9rem;
  }
  .product-copy h3{ font-size:clamp(2rem,3.4vw,2.8rem); margin-bottom:0.8rem; }
  .product-copy p{
    color:var(--ink-soft); line-height:1.75; max-width:42ch; margin-bottom:1.4rem;
  }
  .price-row{
    display:flex; gap:clamp(1.1rem,2.5vw,1.8rem);
    list-style:none; margin:0 0 1.5rem; padding:0;
    font-variant-numeric:tabular-nums;
  }
  .price-row li{
    padding-right:clamp(1.1rem,2.5vw,1.8rem);
    border-right:1px solid var(--line);
  }
  .price-row li:last-child{ border-right:none; padding-right:0; }
  .price-opt{
    display:flex; flex-direction:column; gap:0.25rem;
    background:none; border:1px solid transparent;
    padding:0.35rem 0.5rem; margin:-0.35rem -0.5rem;
    font:inherit; cursor:pointer; text-align:left;
    min-height:44px; justify-content:center;
    transition:background 0.15s ease, border-color 0.15s ease;
  }
  .price-opt:hover{ background:var(--bg-raised); }
  .price-opt[aria-pressed="true"]{
    border-color:var(--ink);
    background:var(--bg-raised);
  }
  .price-row .size{
    font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft);
  }
  .price-row .price{
    font-family:'Cormorant Garamond', serif; font-size:1.35rem; color:var(--ink); font-weight:500;
  }
  .enquire{
    display:inline-flex; align-items:center; gap:0.5rem;
    font-size:0.82rem; letter-spacing:0.05em; text-decoration:none;
    color:var(--ink); border-bottom:1px solid var(--ink);
    padding-bottom:0.2rem;
    transition:color 0.2s ease, border-color 0.2s ease;
  }
  .enquire:hover{ color:var(--accent-deep); border-color:var(--accent-deep); }
  .enquire svg{ width:14px; height:14px; transition:transform 0.2s ease; }
  .enquire:hover svg{ transform:translateX(3px); }

  /* HERITAGE */
  .principles{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:clamp(2rem,4vw,3rem);
  }
  .principle{
    padding-top:1.6rem;
    border-top:1px solid var(--line);
  }
  .principle .numeral{
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    font-size:1.6rem;
    color:var(--accent);
    display:block;
    margin-bottom:0.9rem;
  }
  .principle h3{ font-size:1.5rem; margin-bottom:0.7rem; font-weight:600; }
  .principle p{ color:var(--ink-soft); font-size:0.92rem; line-height:1.7; }

  /* CONTACT / FOOTER BAND */
  .contact-grid{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:clamp(2.5rem,6vw,5rem);
    align-items:start;
    max-width:1180px; margin:0 auto;
  }
  .contact-grid h2{ font-size:clamp(2.1rem,4vw,3rem); color:var(--band-text); margin-bottom:1.1rem; }
  .contact-grid > div:first-child p{
    color:var(--band-text-soft); line-height:1.75; max-width:46ch; font-size:0.98rem;
  }
  .contact-actions{ display:flex; flex-direction:column; gap:0.9rem; }
  .contact-line{
    display:flex; justify-content:space-between; align-items:baseline;
    border-bottom:1px solid var(--band-line);
    padding-bottom:0.9rem;
    font-size:0.95rem;
  }
  .contact-line span:first-child{
    color:var(--band-text-soft); font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase;
  }
  .contact-line a{ color:var(--band-text); text-decoration:none; }
  .contact-line a:hover{ color:var(--accent); }

  footer{
    background:var(--band-bg);
    color:var(--band-text-soft);
    text-align:center;
    padding:1.8rem 1.5rem;
    font-size:0.78rem;
    border-top:1px solid var(--band-line);
  }

  @media (max-width:820px){
    .hero{ grid-template-columns:1fr; min-height:auto; }
    .hero-image{ aspect-ratio:4/3; order:-1; }
    .product-row{ grid-template-columns:1fr; }
    .product-row.reverse .product-media{ order:0; }
    .product-row.reverse .product-copy{ order:1; }
    .product-media{ aspect-ratio:4/3; max-height:340px; }
    .principles{ grid-template-columns:1fr; }
    .contact-grid{ grid-template-columns:1fr; }

    /* Accessible mobile nav: hamburger reveals a stacked panel */
    .nav-toggle{ display:inline-flex; }
    .nav-links{
      position:absolute; left:0; right:0; top:100%;
      flex-direction:column; align-items:stretch; gap:0;
      background:var(--bg);
      border-bottom:1px solid var(--line);
      max-height:0; overflow:hidden;
      transition:max-height 0.25s ease;
    }
    .nav-links.open{ max-height:26rem; }
    .nav-links li{ width:100%; }
    .nav-links a{
      display:block; padding:0.95rem 1.5rem;
      font-size:0.9rem;
      border-bottom:1px solid var(--line);
    }
    .nav-links li:last-child a{
      border:none; margin:0.5rem 1.5rem; padding:0.85rem 1rem;
      text-align:center;
    }
  }

  @media (max-width:480px){
    .price-row{ gap:0.75rem; }
    .price-row li{ padding-right:0.75rem; }
    .price-row .price{ font-size:1.15rem; }
    .btn{ width:100%; justify-content:center; }
    .hero-cta{ flex-direction:column; align-items:stretch; }
    .product-media{ max-height:300px; }
  }

  @media (max-width:360px){
    .price-row{ flex-wrap:wrap; row-gap:0.6rem; }
    .price-row li{ flex:1 1 30%; border-right:none; padding-right:0; }
  }

  /* BASKET */
  .nav-right{
    display:flex; align-items:center; gap:1rem;
  }
  .basket-toggle{
    position:relative;
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px;
    background:transparent; border:1px solid transparent;
    color:var(--ink);
    cursor:pointer; flex-shrink:0;
  }
  .basket-toggle:hover{ color:var(--accent-deep); }
  .basket-toggle svg{ width:22px; height:22px; }
  .basket-badge{
    position:absolute; top:2px; right:2px;
    min-width:16px; height:16px; padding:0 3px;
    border-radius:999px;
    background:var(--wa-green); color:var(--wa-on-green);
    font-size:0.62rem; font-weight:600; line-height:16px; text-align:center;
    font-family:'Jost', sans-serif;
  }

  .product-actions{
    display:flex; flex-direction:column; align-items:flex-start; gap:0.9rem;
  }
  .add-to-basket{ min-width:200px; justify-content:center; }
  .add-to-basket:disabled{
    opacity:0.5; cursor:not-allowed;
    background:var(--bg-raised); color:var(--ink-soft); border-color:var(--line);
  }
  .add-to-basket:disabled::before{ display:none; }
  .add-to-basket.just-added{
    background:var(--wa-green); border-color:var(--wa-green); color:var(--wa-on-green);
  }
  .enquire-secondary{
    font-size:0.76rem; color:var(--ink-soft); border-bottom-color:var(--line);
  }
  .enquire-secondary:hover{ color:var(--accent-deep); border-color:var(--accent-deep); }

  .basket-overlay{
    position:fixed; inset:0; z-index:90;
    background:rgba(10,10,8,0.5);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity 0.25s ease, visibility 0.25s;
  }
  .basket-overlay.open{ opacity:1; visibility:visible; pointer-events:auto; }
  .basket-drawer{
    position:fixed; top:0; right:0; bottom:0; z-index:91;
    width:min(440px, 100vw); max-width:100vw;
    background:var(--bg); color:var(--ink);
    box-shadow:-16px 0 40px -20px rgba(0,0,0,0.55);
    display:flex; flex-direction:column;
    transform:translateX(100%);
    visibility:hidden;
    transition:transform 0.3s ease, visibility 0.3s;
  }
  .basket-drawer.open{ transform:translateX(0); visibility:visible; }
  .basket-drawer-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:1.25rem 1.5rem;
    border-bottom:1px solid var(--line);
    flex-shrink:0;
  }
  .basket-drawer-head h2{ font-size:1.4rem; }
  .basket-drawer-close{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px;
    background:transparent; border:1px solid var(--line);
    color:var(--ink); cursor:pointer; flex-shrink:0;
  }
  .basket-drawer-close svg{ width:18px; height:18px; }
  .basket-drawer-body{
    flex:1; overflow-y:auto;
    padding:1.25rem 1.5rem;
  }
  .basket-empty{
    color:var(--ink-soft); font-size:0.92rem; line-height:1.6;
  }
  .basket-items{ list-style:none; margin:0; padding:0; }
  .basket-items[hidden]{ display:none; }
  .basket-item{
    display:flex; justify-content:space-between; align-items:flex-start; gap:1rem;
    padding:1rem 0; border-bottom:1px solid var(--line);
  }
  .basket-item:first-child{ padding-top:0; }
  .basket-item-info{ display:flex; flex-direction:column; gap:0.3rem; flex:1; min-width:0; }
  .basket-item-name{ font-family:'Cormorant Garamond', serif; font-size:1.15rem; }
  .basket-item-size{ font-size:0.72rem; color:var(--ink-soft); letter-spacing:0.03em; }
  .basket-item-controls{
    display:flex; flex-direction:column; align-items:flex-end; gap:0.6rem; flex-shrink:0;
  }
  .basket-qty{
    display:flex; align-items:center; gap:0.2rem;
    border:1px solid var(--line);
  }
  .basket-qty-btn{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px;
    background:transparent; border:none;
    color:var(--ink); font-size:1.1rem; cursor:pointer;
  }
  .basket-qty-btn:hover{ background:var(--bg-raised); }
  .basket-qty-val{ min-width:1.75rem; text-align:center; font-variant-numeric:tabular-nums; font-size:0.85rem; }
  .basket-item-total{ font-family:'Cormorant Garamond', serif; font-size:1.05rem; }
  .basket-item-remove{
    display:inline-flex; align-items:center;
    min-height:44px; padding:0 0.25rem;
    background:none; border:none;
    color:var(--ink-soft); font-size:0.72rem;
    text-decoration:underline; cursor:pointer;
  }
  .basket-item-remove:hover{ color:var(--accent-deep); }
  .basket-drawer-foot{
    border-top:1px solid var(--line);
    padding:1.25rem 1.5rem;
    display:flex; flex-direction:column; gap:0.9rem;
    flex-shrink:0;
  }
  .basket-drawer-foot[hidden]{ display:none; }
  .basket-subtotal-row{
    display:flex; justify-content:space-between; align-items:baseline;
    font-size:0.95rem;
  }
  .basket-subtotal{ font-family:'Cormorant Garamond', serif; font-size:1.3rem; }
  .basket-disclaimer{ font-size:0.72rem; color:var(--ink-soft); line-height:1.5; margin:0; }
  .basket-checkout{ justify-content:center; text-align:center; }
  .basket-clear{
    background:none; border:none; padding:0.6rem 0;
    min-height:44px;
    color:var(--ink-soft); font-size:0.75rem; letter-spacing:0.05em;
    text-decoration:underline; cursor:pointer; text-align:center;
  }
  .basket-clear:hover{ color:var(--accent-deep); }

  body.basket-open-lock{ overflow:hidden; }