:root{
      /* palette derived from the Al-Kinana seal (#603820 line-art) */
      --brand:#5a3318;          /* rich roast — primary */
      --brand-2:#7a4a26;        /* lighter roast */
      --espresso:#2c1810;       /* near-black brown — text/strong */
      --cream:#f6efe3;          /* page bg — milk crema */
      --cream-2:#efe5d4;        /* sunken cream */
      --paper:#fffdf8;          /* card surface */
      --gold:#b5874b;           /* brass / crema rim accent */
      --gold-soft:#d9bf94;
      --line:rgba(90,51,24,.16);
      --line-strong:rgba(90,51,24,.34);
      --ink-soft:#6b5848;
      --ok:#3f7d4f;
      --shadow:0 1px 2px rgba(44,24,16,.06), 0 10px 30px -12px rgba(44,24,16,.22);
      --shadow-lift:0 6px 14px rgba(44,24,16,.10), 0 26px 50px -18px rgba(44,24,16,.30);
      --r:18px; --r-sm:12px;
      --maxw:1180px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;background:var(--cream);color:var(--espresso);
      font-family:"El Messiri",serif;font-size:16px;line-height:1.65;
      -webkit-font-smoothing:antialiased;overflow-x:hidden;
    }
    h1,h2,h3{font-family:"El Messiri",serif;font-weight:700;line-height:1.15;margin:0;color:var(--espresso)}
    a{color:inherit;text-decoration:none}
    button{font-family:inherit;cursor:pointer;border:0;background:none}
    img{max-width:100%}
    .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:22px}
    .eyebrow{font-family:"El Messiri",serif;font-weight:500;letter-spacing:.32em;
      text-transform:uppercase;font-size:.72rem;color:var(--gold)}

    /* ---------- announcement ---------- */
    .topbar{background:var(--espresso);color:var(--gold-soft);text-align:center;
      font-size:.82rem;letter-spacing:.02em;padding:8px 14px;font-weight:500}
    .topbar b{color:#fff;font-weight:700}

    /* ---------- header ---------- */
    .head{position:sticky;top:0;z-index:40;background:rgba(246,239,227,.86);
      backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
    .head-in{display:flex;align-items:center;gap:18px;height:78px}
    .brand{display:flex;align-items:center;gap:12px;margin-inline-end:auto}
    .brand .seal{width:52px;height:52px;color:var(--brand);flex:0 0 auto;object-fit:contain}
    .brand .name{font-family:"El Messiri";font-weight:700;font-size:1.42rem;line-height:1;color:var(--espresso)}
    .brand .name small{display:block;font-family:"El Messiri";font-weight:400;font-size:.56rem;
      letter-spacing:.34em;color:var(--gold);margin-top:4px}
    .nav{display:flex;gap:26px;font-weight:500;font-size:.98rem}
    .nav a{position:relative;padding:6px 0;color:var(--espresso);opacity:.85;transition:opacity .2s}
    .nav a::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:2px;
      background:var(--gold);transform:scaleX(0);transform-origin:center;transition:transform .25s}
    .nav a:hover{opacity:1}.nav a:hover::after{transform:scaleX(1)}
    .tools{display:flex;align-items:center;gap:8px}
    .icon-btn{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
      color:var(--brand);transition:background .2s}
    .icon-btn:hover{background:var(--cream-2)}
    .icon-btn svg{width:21px;height:21px}
    .cart-btn{position:relative}
    .cart-count{position:absolute;top:4px;inset-inline-end:4px;min-width:18px;height:18px;
      padding:0 4px;border-radius:9px;background:var(--brand);color:#fff;font-size:.66rem;
      font-weight:700;display:grid;place-items:center;font-family:"El Messiri";transform:scale(0);transition:transform .25s}
    .cart-count.show{transform:scale(1)}
    .burger{display:none}
    .burger svg{transition:transform .4s cubic-bezier(.22,1,.36,1)}

    /* ---------- mobile menu ---------- */
    .mnav{position:fixed;inset:0;z-index:60;visibility:hidden;pointer-events:none}
    .mnav.open{visibility:visible;pointer-events:auto}
    .mnav-scrim{position:absolute;inset:0;background:rgba(44,24,16,.46);
      -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
      opacity:0;transition:opacity .45s ease}
    .mnav.open .mnav-scrim{opacity:1}
    .mnav-panel{position:absolute;top:0;right:0;height:100%;width:min(380px,88vw);
      display:flex;flex-direction:column;padding:18px 22px max(26px,env(safe-area-inset-bottom));
      background:linear-gradient(180deg,var(--paper) 0%,var(--cream) 100%);
      border-inline-start:1px solid var(--line);
      box-shadow:-26px 0 64px -22px rgba(44,24,16,.55);
      transform:translateX(100%);
      transition:transform .55s cubic-bezier(.22,1,.36,1);
      overflow-y:auto;overscroll-behavior:contain}
    .mnav.open .mnav-panel{transform:translateX(0)}
    /* soft gold glow accent top */
    .mnav-panel::before{content:"";position:absolute;top:0;inset-inline:0;height:140px;z-index:0;
      background:radial-gradient(120% 90% at 80% -20%,rgba(181,135,75,.20),transparent 70%);pointer-events:none}
    .mnav-head{display:flex;align-items:center;justify-content:space-between;
      gap:12px;position:relative;z-index:1;padding-bottom:18px;border-bottom:1px solid var(--line)}
    .mnav-head .brand .seal{width:44px;height:44px}
    .mnav-head .brand .name{font-size:1.24rem}
    .mnav-x{color:var(--brand)}
    .mnav-x:hover{background:var(--cream-2)}
    .mnav-links{display:flex;flex-direction:column;gap:4px;margin-top:18px;position:relative;z-index:1}
    .mnav-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;
      padding:15px 16px;border-radius:14px;font-size:1.18rem;font-weight:600;color:var(--espresso);
      background:transparent;position:relative;overflow:hidden;
      opacity:0;transform:translateX(26px);
      transition:background .25s,color .25s}
    .mnav.open .mnav-links a{animation:mnavIn .55s cubic-bezier(.22,1,.36,1) forwards;
      animation-delay:calc(.12s + var(--i) * .07s)}
    .mnav-links a .idx{font-family:"El Messiri";font-size:.8rem;color:var(--gold);
      font-weight:700;min-width:22px}
    .mnav-links a .lbl{flex:1}
    .mnav-links a .arw{width:18px;height:18px;color:var(--gold);opacity:0;
      transform:translateX(8px);transition:opacity .25s,transform .25s}
    .mnav-links a::before{content:"";position:absolute;inset-inline-start:0;top:12%;height:76%;
      width:3px;border-radius:3px;background:var(--brand);transform:scaleY(0);transform-origin:center;
      transition:transform .3s}
    .mnav-links a:hover,.mnav-links a:active{background:var(--cream-2);color:var(--brand)}
    .mnav-links a:hover::before,.mnav-links a:active::before{transform:scaleY(1)}
    .mnav-links a:hover .arw,.mnav-links a:active .arw{opacity:1;transform:translateX(0)}
    @keyframes mnavIn{to{opacity:1;transform:translateX(0)}}
    .mnav-foot{margin-top:auto;padding-top:22px;position:relative;z-index:1;
      display:flex;flex-direction:column;gap:16px;
      opacity:0;transform:translateY(16px)}
    .mnav.open .mnav-foot{animation:mnavFoot .6s cubic-bezier(.22,1,.36,1) forwards;animation-delay:.42s}
    @keyframes mnavFoot{to{opacity:1;transform:translateY(0)}}
    .mnav-foot .btn{justify-content:center;width:100%}
    .mnav-social{display:flex;gap:10px;justify-content:center}
    .mnav-social a{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
      color:var(--brand);border:1px solid var(--line);background:var(--paper);
      transition:transform .2s,background .2s,color .2s,border-color .2s}
    .mnav-social a:hover{background:var(--brand);color:#fff;border-color:var(--brand);transform:translateY(-2px)}
    .mnav-social svg{width:19px;height:19px}
    body.menu-open{overflow:hidden}
    /* scroll-to-top */
    .totop{position:fixed;bottom:24px;inset-inline-end:24px;z-index:50;
      width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
      background:linear-gradient(145deg,var(--brand-2),var(--espresso));
      color:#fff;border:1px solid rgba(181,135,75,.4);
      box-shadow:0 10px 26px -8px rgba(44,24,16,.55), inset 0 1px 0 rgba(255,255,255,.18);
      opacity:0;transform:translateY(18px) scale(.8);pointer-events:none;
      transition:opacity .4s cubic-bezier(.22,1,.36,1),transform .4s cubic-bezier(.22,1,.36,1),box-shadow .25s}
    /* scroll-progress gold ring */
    .totop::before{content:"";position:absolute;inset:-4px;border-radius:50%;z-index:-1;
      background:conic-gradient(var(--gold) calc(var(--p,0)*1%), rgba(181,135,75,.20) 0);
      -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));
      mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px))}
    .totop.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
    .totop:hover{transform:translateY(-4px) scale(1.07);
      box-shadow:0 16px 34px -8px rgba(44,24,16,.6), 0 0 0 4px rgba(181,135,75,.14)}
    .totop:active{transform:translateY(-1px) scale(1.02)}
    .totop svg{width:22px;height:22px;transition:transform .3s cubic-bezier(.22,1,.36,1)}
    .totop:hover svg{transform:translateY(-3px)}
    @media(max-width:680px){.totop{width:46px;height:46px;bottom:16px;inset-inline-end:16px}}
    @media (prefers-reduced-motion:reduce){
      .mnav-panel,.mnav-scrim{transition:none}
      .mnav.open .mnav-links a,.mnav.open .mnav-foot{animation:none;opacity:1;transform:none}}

    /* ---------- hero ---------- */
    .hero{position:relative;overflow:hidden;background:
      radial-gradient(120% 90% at 90% -10%, rgba(122,74,38,.10), transparent 60%),
      linear-gradient(180deg,var(--cream),var(--cream-2))}
    .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:saturate(1.05) contrast(1.02)}
    .hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:
      linear-gradient(to left, rgba(246,239,227,.95) 0%, rgba(246,239,227,.78) 36%, rgba(246,239,227,.46) 68%, rgba(246,239,227,.30) 100%),
      linear-gradient(180deg, rgba(246,239,227,.34), transparent 26% 70%, rgba(44,24,16,.10))}
    .hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;
      padding-block:64px 72px;position:relative;z-index:2}
    .hero h1{font-size:clamp(2.4rem,5.4vw,4rem);letter-spacing:-.01em}
    .hero h1 .hl{color:var(--brand)}
    .hero p{font-size:1.12rem;color:var(--ink-soft);max-width:46ch;margin:18px 0 0}
    .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
    .btn{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:14px;
      font-weight:700;font-size:1rem;transition:transform .15s,box-shadow .2s,background .2s}
    .btn svg{width:18px;height:18px}
    .btn-primary{background:var(--brand);color:#fff;box-shadow:var(--shadow)}
    .btn-primary:hover{background:var(--espresso);transform:translateY(-2px);box-shadow:var(--shadow-lift)}
    .btn-ghost{border:1.5px solid var(--line-strong);color:var(--espresso)}
    .btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
    .hero-meta{display:flex;gap:26px;margin-top:36px;flex-wrap:wrap}
    .hero-meta .m{display:flex;flex-direction:column;line-height:1.1}
    .hero-meta .m b{font-family:"El Messiri";font-weight:600;font-size:1.5rem;color:var(--brand)}
    .hero-meta .m span{font-size:.82rem;color:var(--ink-soft);margin-top:4px}

    /* hero seal art */
    .hero-art{position:relative;display:grid;place-items:center;min-height:380px}
    /* soft breathing glow behind seal */
    .hero-art::before{content:"";position:absolute;width:92%;aspect-ratio:1;border-radius:50%;z-index:0;
      background:radial-gradient(circle, rgba(246,239,227,.82) 38%, rgba(246,239,227,.4) 60%, transparent 74%);
      animation:glowPulse 6.5s ease-in-out infinite}
    /* sweeping gold accent arc */
    .hero-art::after{content:"";position:absolute;width:102%;aspect-ratio:1;border-radius:50%;z-index:0;
      background:conic-gradient(from 0deg,transparent 0 58%,rgba(181,135,75,.0) 60%,var(--gold) 80%,rgba(181,135,75,0) 96%);
      -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));
      mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));
      animation:spin 16s linear infinite;opacity:.7}
    .hero-art .bigseal,.hero-art .steam-badge,.hero-art .hero-chip{position:relative;z-index:1}
    .hero-art .ring{position:absolute;width:108%;aspect-ratio:1;border-radius:50%;
      border:1px dashed var(--line-strong);animation:spin 60s linear infinite}
    .hero-art .ring.r2{width:84%;border-style:solid;border-color:var(--line);animation-duration:90s;animation-direction:reverse}
    .hero-art .bigseal{width:min(360px,78%);color:var(--brand);
      filter:drop-shadow(0 22px 40px rgba(44,24,16,.22));
      animation:sealFloat 7s ease-in-out infinite}
    .hero-art .steam-badge{position:absolute;
      background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:10px 14px;
      display:flex;align-items:center;gap:10px;box-shadow:var(--shadow);font-size:.84rem;font-weight:700;
      animation:chipFloat 5.5s ease-in-out infinite;transition:transform .25s,box-shadow .25s;z-index:2}
    .hero-art .steam-badge:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
    .hero-art .steam-badge i{width:32px;height:32px;flex:0 0 auto;border-radius:9px;background:var(--cream-2);
      display:grid;place-items:center;color:var(--brand)}
    .hero-art .steam-badge i svg{width:18px;height:18px}
    /* three floating badges around the seal */
    .hero-art .sb1{bottom:6%;inset-inline-start:-2%;animation-delay:0s}
    .hero-art .sb2{top:8%;inset-inline-end:-3%;animation-delay:-1.8s;animation-duration:6.2s}
    .hero-art .sb3{bottom:14%;inset-inline-end:-1%;animation-delay:-3.4s;animation-duration:5.8s}
    @keyframes spin{to{transform:rotate(360deg)}}
    @keyframes glowPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.82;transform:scale(1.05)}}
    @keyframes sealFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
    @keyframes chipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

    /* animated bean ring */
    .bean-ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
    .bean{position:absolute;color:var(--roast);left:50%;top:50%;width:32px;height:20px;
      transform-origin:center;animation:bean-float 4.2s ease-in-out infinite,bean-spin 8s linear infinite;
      animation-delay:var(--delay);opacity:.88;filter:drop-shadow(0 4px 12px rgba(44,24,16,.25))}
    @keyframes bean-float{
      0%,100%{transform:translate(-50%,-50%) rotateZ(0deg) translateY(0)}
      25%{transform:translate(-50%,-50%) rotateZ(2.5deg) translateY(-8px)}
      50%{transform:translate(-50%,-50%) rotateZ(5deg) translateY(-14px)}
      75%{transform:translate(-50%,-50%) rotateZ(2.5deg) translateY(-8px)}}
    @keyframes bean-spin{to{transform:translate(-50%,-50%) rotateZ(6deg) rotateX(360deg)}}
    .bean:nth-child(1){left:calc(50% + 0px);top:calc(50% - 185px)}
    .bean:nth-child(2){left:calc(50% + 160px);top:calc(50% - 95px)}
    .bean:nth-child(3){left:calc(50% + 160px);top:calc(50% + 95px)}
    .bean:nth-child(4){left:calc(50% + 0px);top:calc(50% + 185px)}
    .bean:nth-child(5){left:calc(50% - 160px);top:calc(50% + 95px)}
    .bean:nth-child(6){left:calc(50% - 160px);top:calc(50% - 95px)}

    /* reduced-motion safe */
    @media (prefers-reduced-motion:reduce){
      .bean{animation:none;opacity:.6}}

    .shop{padding-block:70px 30px}
    .sec-head{text-align:center;max-width:620px;margin:0 auto 14px}
    .sec-head h2{font-size:clamp(2rem,4vw,2.8rem);margin-top:10px}
    .sec-head p{color:var(--ink-soft);margin:12px 0 0}
    .rule{width:74px;height:3px;border-radius:3px;background:var(--gold);margin:18px auto 0}

    /* ---------- filters ---------- */
    .filters{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:34px 0 38px}
    .chip{padding:9px 20px;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);
      font-weight:700;font-size:.95rem;color:var(--ink-soft);transition:all .2s}
    .chip:hover{border-color:var(--brand-2);color:var(--brand)}
    .chip.active{background:var(--brand);border-color:var(--brand);color:#fff}

    /* ---------- product grid ---------- */
    .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
    .card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
      overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);
      transition:transform .25s,box-shadow .25s,border-color .25s}
    .card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);border-color:var(--gold-soft)}
    .card.hide{display:none}

    .tag{position:absolute;top:14px;inset-inline-start:14px;z-index:3;font-family:"El Messiri";
      font-weight:600;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
      padding:5px 11px;border-radius:999px}
    .tag.best{background:var(--brand);color:#fff}
    .tag.new{background:var(--gold);color:#3a2a14}

    /* discount visuals */
    .disc-badge{position:absolute;top:14px;inset-inline-end:14px;z-index:3;font-family:"El Messiri";
      font-weight:600;font-size:.82rem;letter-spacing:.04em;color:#fff;width:46px;height:46px;
      border-radius:50%;display:grid;place-items:center;background:#a23b2a;
      box-shadow:0 4px 10px rgba(162,59,42,.4);animation:badgePulse 2.2s ease-in-out infinite}
    @keyframes badgePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
    .price .was{font-family:"El Messiri";font-weight:400;font-size:.92rem;color:var(--ink-soft);
      text-decoration:line-through;text-decoration-color:#a23b2a;margin-inline-end:2px}
    .price b{font-family:"El Messiri";font-weight:600}
    .saved-row{color:#a23b2a!important;font-weight:700}
    .litem .info s{color:#a8978a;text-decoration-color:#a23b2a}

    /* package visual */
    .pic{position:relative;aspect-ratio:5/6;overflow:hidden;
      background:var(--cream-2);border-bottom:1px solid var(--line)}
    .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;padding:14px;
      transform:scale(1.01);transition:transform .55s ease}
    .card:hover .pic img{transform:scale(1.07)}
    /* wax-seal price stamp */
    .stamp{position:absolute;bottom:14px;inset-inline-end:14px;width:74px;height:74px;
      display:grid;place-items:center;color:var(--paper);z-index:3;
      filter:drop-shadow(0 6px 10px rgba(44,24,16,.3));transition:transform .3s}
    .card:hover .stamp{transform:rotate(8deg) scale(1.04)}
    .stamp .seal-bg{position:absolute;inset:0;color:var(--brand)}
    .stamp .val{position:relative;font-family:"El Messiri";font-weight:600;font-size:1.18rem;line-height:.9;text-align:center}
    .stamp .val small{display:block;font-size:.5rem;letter-spacing:.18em;margin-top:2px;opacity:.85}

    /* body */
    .card-b{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
    .roast{display:flex;align-items:center;gap:8px;font-size:.74rem;font-weight:700;color:var(--ink-soft);margin-bottom:8px}
    .beans{display:flex;gap:3px}
    .beans i{width:9px;height:13px;border-radius:60% 60% 55% 55%/50%;background:var(--line);transform:rotate(-18deg);position:relative}
    .beans i::after{content:"";position:absolute;inset:3px 0;border-inline-start:1px solid var(--paper)}
    .beans i.on{background:var(--brand)}
    .card-b h3{font-size:1.22rem}
    .origin{font-size:.85rem;color:var(--ink-soft);margin:4px 0 0}
    .stars{color:var(--gold);font-size:.86rem;letter-spacing:1px;margin-top:8px}
    .stars span{color:var(--ink-soft);font-size:.78rem;margin-inline-start:4px;letter-spacing:0}

    /* weight selector */
    .weights{display:flex;gap:6px;margin:14px 0 16px}
    .weights button{flex:1;padding:8px 0;border-radius:10px;border:1.5px solid var(--line);
      background:var(--cream);font-weight:700;font-size:.82rem;color:var(--ink-soft);transition:all .18s}
    .weights button[aria-pressed="true"]{background:var(--espresso);border-color:var(--espresso);color:#fff}
    .weights button:hover:not([aria-pressed="true"]){border-color:var(--brand-2);color:var(--brand)}

    .card-foot{margin-top:auto;display:flex;align-items:center;gap:12px}
    .price{font-family:"El Messiri";font-weight:600;font-size:1.2rem;color:var(--espresso)}
    .price small{font-size:.72rem;color:var(--ink-soft);font-weight:400;margin-inline-start:3px}
    .add{margin-inline-start:auto;display:inline-flex;align-items:center;gap:7px;
      background:var(--brand);color:#fff;font-weight:700;padding:11px 16px;border-radius:12px;
      font-size:.9rem;transition:background .2s,transform .15s}
    .add svg{width:17px;height:17px}
    .add:hover{background:var(--espresso);transform:translateY(-1px)}
    .add:active{transform:scale(.96)}

    /* ---------- blend calculator ---------- */
    .blend{margin-top:80px;margin-bottom:72px}
    .blend .sec-head{margin-bottom:44px}
    .blend .sec-head h2{font-size:clamp(2rem,4vw,2.8rem)}
    .blend .sec-head p{font-size:1.04rem;color:var(--ink-soft);margin-top:10px;max-width:54ch;margin-inline:auto}

    .bb-wrap{display:grid;grid-template-columns:1.25fr 1fr;gap:28px;align-items:start}

    /* ===== picker panel ===== */
    .bb-picker{background:var(--paper);border:1px solid var(--line);border-radius:22px;
      padding:28px 14px;box-shadow:0 20px 50px -30px rgba(44,24,16,.4)}
    .bb-step{display:flex;align-items:center;gap:12px;margin-bottom:18px}
    .bb-step-no{width:30px;height:30px;flex:0 0 auto;border-radius:50%;background:var(--brand);
      color:#fff;display:grid;place-items:center;font-family:"El Messiri";font-weight:700;font-size:1rem}
    .bb-step h3{font-size:1.18rem;color:var(--espresso)}

    /* bean cards grid */
    .bb-beans{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
    .bb-bean{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;
      border:1.5px solid var(--line);background:var(--cream);cursor:pointer;
      transition:border-color .2s,background .2s,transform .15s;text-align:start}
    .bb-bean:hover{border-color:var(--gold);transform:translateY(-2px)}
    .bb-bean.sel{border-color:var(--brand);background:#fff;box-shadow:0 6px 16px -6px rgba(90,51,24,.3)}
    .bb-bean-ic{width:40px;height:40px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;
      position:relative;overflow:hidden}
    .bb-bean-ic::after{content:"";position:absolute;inset:0;background:
      radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), transparent 60%)}
    .bb-bean-ic svg{width:20px;height:20px;color:#fff;position:relative;z-index:1}
    .bb-bean-info{flex:1;min-width:0}
    .bb-bean-name{font-weight:700;font-size:.9rem;color:var(--espresso);line-height:1.2;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .bb-bean-meta{font-size:.74rem;color:var(--ink-soft);margin-top:3px;display:flex;align-items:center;gap:6px}
    .bb-bean-roast{display:inline-flex;gap:2px}
    .bb-bean-roast i{width:6px;height:9px;border-radius:60% 60% 55% 55%/50%;background:var(--brand)}
    .bb-bean-roast i.off{background:var(--line-strong)}
    .bb-bean-check{width:20px;height:20px;flex:0 0 auto;border-radius:50%;border:1.5px solid var(--line-strong);
      display:grid;place-items:center;color:#fff;transition:all .2s}
    .bb-bean.sel .bb-bean-check{background:var(--brand);border-color:var(--brand)}
    .bb-bean-check svg{width:12px;height:12px;opacity:0;transition:opacity .2s}
    .bb-bean.sel .bb-bean-check svg{opacity:1}
    /* roast selector */
    .bb-roast{display:flex;gap:8px;margin-bottom:4px}
    .bb-roast-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:11px 6px;
      border-radius:12px;border:1.5px solid var(--line);background:var(--cream);font-weight:700;
      font-size:.78rem;color:var(--ink-soft);transition:all .18s}
    .bb-roast-btn[aria-pressed="true"]{background:var(--espresso);border-color:var(--espresso);color:#fff}
    .bb-roast-btn:hover:not([aria-pressed="true"]):not(:disabled){border-color:var(--brand-2);color:var(--brand)}
    .bb-roast-btn:disabled{opacity:.38;cursor:not-allowed;text-decoration:line-through}
    .bb-roast-btn .bb-bean-roast i{width:7px;height:10px}
    .bb-roast-btn[aria-pressed="true"] .bb-bean-roast i{background:var(--gold)}
    .bb-roast-btn[aria-pressed="true"] .bb-bean-roast i.off{background:rgba(255,255,255,.3)}

    /* quantity */
    .bb-qty{padding:18px 16px 14px;border-radius:14px;background:var(--cream);border:1px solid var(--line);
      margin-bottom:18px}
    .bb-qty-display{text-align:center;margin-bottom:14px}
    .bb-qty-display b{font-family:"El Messiri";font-weight:700;font-size:2.4rem;color:var(--brand);line-height:1}
    .bb-qty-display span{font-size:.86rem;color:var(--ink-soft);margin-inline-start:6px;font-weight:600}
    .bb-range{-webkit-appearance:none;appearance:none;width:100%;height:7px;border-radius:99px;
      background:linear-gradient(90deg,var(--gold-soft),var(--brand));outline:none;cursor:pointer}
    .bb-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;
      border-radius:50%;background:var(--paper);border:3px solid var(--brand);cursor:pointer;
      box-shadow:0 3px 8px rgba(44,24,16,.3);transition:transform .15s}
    .bb-range::-webkit-slider-thumb:hover{transform:scale(1.12)}
    .bb-range::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--paper);
      border:3px solid var(--brand);cursor:pointer;box-shadow:0 3px 8px rgba(44,24,16,.3)}
    .bb-qty-marks{display:flex;justify-content:space-between;margin-top:10px;font-size:.72rem;
      color:var(--ink-soft);font-weight:600}
    .bb-add-btn{width:100%;justify-content:center;gap:8px}
    .bb-add-btn svg{width:18px;height:18px}

    /* ===== receipt panel ===== */
    .bb-receipt{background:linear-gradient(180deg,var(--espresso),#241009);color:var(--cream);
      border-radius:22px;padding:26px;position:sticky;top:96px;
      box-shadow:0 24px 60px -28px rgba(44,24,16,.7)}
    .bb-receipt-head{display:flex;align-items:center;gap:14px;padding-bottom:18px;
      border-bottom:1px dashed rgba(246,239,227,.25);margin-bottom:18px}
    .bb-rseal{width:44px;height:44px;flex:0 0 auto;color:var(--gold-soft)}
    .bb-receipt-head h3{font-size:1.3rem;color:#fff}
    .bb-receipt-head span{font-size:.82rem;color:rgba(246,239,227,.6)}

    /* empty animation */
    .bb-list.empty{display:grid;place-items:center;min-height:200px;padding:10px}
    .bb-empty-art{width:150px;height:200px}
    .bb-empty-art svg{width:100%;height:100%}

    /* list items */
    .bb-list{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow-y:auto;padding-inline-end:4px}
    .bb-list::-webkit-scrollbar{width:5px}
    .bb-list::-webkit-scrollbar-thumb{background:rgba(246,239,227,.2);border-radius:99px}
    .bb-item{border-radius:12px;background:rgba(246,239,227,.07);border:1px solid rgba(246,239,227,.1);
      overflow:hidden;transition:all .25s;animation:slideDown .35s ease}
    .bb-item.open{background:rgba(246,239,227,.1)}
    .bb-item-header{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer}
    .bb-item-header-left{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
    .bb-item-name{font-weight:700;font-size:.9rem;color:#fff;flex:1;white-space:nowrap;
      overflow:hidden;text-overflow:ellipsis}
    .bb-item-gram{font-size:.76rem;color:var(--gold-soft);font-weight:600;white-space:nowrap}
    .bb-item-price{font-weight:700;color:#fff;min-width:54px;text-align:left;font-size:.9rem;
      font-family:"El Messiri"}
    .bb-item-toggle{width:18px;height:18px;display:grid;place-items:center;flex:0 0 auto;
      color:var(--gold-soft);transition:transform .3s;font-size:.7rem}
    .bb-item.open .bb-item-toggle{transform:rotate(180deg)}
    .bb-item-content{display:none;padding:0 14px 14px;font-size:.85rem}
    .bb-item.open .bb-item-content{display:block}
    .bbic-props{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:12px;
      border-top:1px solid rgba(246,239,227,.12)}
    .bbic-prop{display:flex;flex-direction:column;gap:3px}
    .bbic-prop-label{font-size:.68rem;font-weight:700;color:rgba(246,239,227,.5);letter-spacing:.4px}
    .bbic-prop-val{font-size:.84rem;font-weight:600;color:var(--cream)}
    .bbic-roast{display:flex;gap:3px;margin-top:2px}
    .bbic-roast i{width:8px;height:11px;border-radius:60% 60% 55% 55%/50%;background:var(--gold-soft)}
    .bbic-roast i.off{background:rgba(246,239,227,.2)}
    .bbic-rating{display:flex;align-items:center;gap:4px}
    .bbic-rating-star{color:var(--gold);font-size:.8rem;font-weight:700}
    .bbic-rating-text{font-size:.74rem;color:rgba(246,239,227,.5)}
    .bb-item-delete{margin-top:12px;padding:7px 12px;border-radius:8px;border:1px solid rgba(162,59,42,.5);
      background:transparent;color:#e8a598;font-weight:700;font-size:.82rem;cursor:pointer;transition:all .2s}
    .bb-item-delete:hover{background:#a23b2a;color:#fff;border-color:#a23b2a}

    /* advice */
    .bbs-advice{margin:16px 0;padding:12px 14px;border-radius:10px;
      background:rgba(181,135,75,.16);border:1px solid rgba(217,191,148,.3);
      font-size:.86rem;color:var(--cream);line-height:1.55;display:none}
    .bbs-advice.show{display:block;animation:slideDown .4s ease}
    .bbs-advice b{color:var(--gold-soft);font-weight:700}
    @keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

    /* receipt foot */
    .bb-receipt-foot{margin-top:18px;padding-top:18px;border-top:1px dashed rgba(246,239,227,.25)}
    .bbs-totals{display:flex;flex-direction:column;gap:9px;margin-bottom:16px}
    .bbs-line{display:flex;justify-content:space-between;align-items:center}
    .bbs-line span{font-size:.84rem;color:rgba(246,239,227,.7);font-weight:600}
    .bbs-line b{font-family:"El Messiri";font-weight:700;font-size:1.05rem;color:var(--cream)}
    .bbs-line.total{border-top:1px solid rgba(246,239,227,.2);padding-top:11px;margin-top:3px}
    .bbs-line.total span{color:#fff;font-size:.92rem}
    .bbs-line.total b{color:var(--gold-soft);font-size:1.6rem}
    .bb-receipt-foot .btn:disabled{opacity:.45;cursor:not-allowed}

    /* responsive */
    @media (max-width:900px){
      .bb-wrap{grid-template-columns:1fr;gap:22px}
      .bb-receipt{position:static}
    }

    /* ---------- assurances strip ---------- */
    .assure{margin-top:64px;background:var(--espresso);color:var(--cream)}
    .assure-in{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-block:42px}
    .assure .it{display:flex;gap:14px;align-items:flex-start}
    .assure .it i{width:46px;height:46px;border-radius:13px;flex:0 0 auto;display:grid;place-items:center;
      background:rgba(181,135,75,.18);color:var(--gold-soft)}
    .assure .it i svg{width:23px;height:23px}
    .assure .it b{display:block;font-family:"El Messiri";font-size:1.06rem;color:#fff;margin-bottom:3px}
    .assure .it span{font-size:.86rem;color:var(--gold-soft);line-height:1.5}

    /* ---------- footer ---------- */
    .foot{background:var(--cream-2);border-top:1px solid var(--line);padding-block:48px 26px}
    .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
    .foot .brand .seal{width:46px;height:46px}
    .foot p{color:var(--ink-soft);font-size:.9rem;margin:14px 0 0;max-width:34ch}
    .foot h4{font-family:"El Messiri";font-size:1.05rem;margin:0 0 14px}
    .foot ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-size:.92rem;color:var(--ink-soft)}
    .foot ul a:hover{color:var(--brand)}
    .socials{display:flex;gap:10px;margin-top:8px}
    .socials a{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
      border:1px solid var(--line);color:var(--brand);transition:all .2s}
    .socials a:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
    .socials svg{width:18px;height:18px}
    .copy{text-align:center;color:var(--ink-soft);font-size:.82rem;margin-top:34px;
      padding-top:22px;border-top:1px solid var(--line)}

    /* ---------- cart drawer ---------- */
    .overlay{position:fixed;inset:0;background:rgba(44,24,16,.42);backdrop-filter:blur(2px);
      opacity:0;pointer-events:none;transition:opacity .3s;z-index:60}
    .overlay.open{opacity:1;pointer-events:auto}
    .drawer{position:fixed;top:0;left:0;height:100%;width:min(400px,92vw);
      background:var(--cream);z-index:70;display:flex;flex-direction:column;
      transform:translateX(-110%);transition:transform .35s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow-lift)}
    .drawer.open{transform:translateX(0)}
    .drawer-h{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--line)}
    .drawer-h h3{font-size:1.3rem}
    .drawer-h button{color:var(--brand);width:38px;height:38px;border-radius:10px}
    .drawer-h button:hover{background:var(--cream-2)}
    .drawer-body{flex:1;overflow:auto;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
    .empty{text-align:center;color:var(--ink-soft);margin:auto;padding:40px 0}
    .empty .seal{width:80px;height:80px;color:var(--line-strong);margin-bottom:14px}
    /* premium + compact cart line */
    .litem{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:stretch;
      background:linear-gradient(180deg,var(--paper),var(--cream));border:1px solid var(--line);
      border-radius:15px;padding:10px;transition:border-color .16s,box-shadow .16s,transform .16s}
    .litem:hover{border-color:var(--gold-soft);box-shadow:0 10px 24px -14px rgba(44,24,16,.4);transform:translateY(-1px)}
    .litem .th{width:52px;height:60px;border-radius:12px;align-self:center;
      background:linear-gradient(150deg,var(--cream-2),var(--paper));border:1px solid var(--line);
      display:grid;place-items:center;box-shadow:inset 0 1px 3px rgba(44,24,16,.06)}
    .litem .th svg{width:30px}
    .litem .info{min-width:0;display:flex;flex-direction:column;gap:5px;justify-content:center}
    .litem-top{display:flex;align-items:flex-start;gap:8px}
    .litem-top b{flex:1;min-width:0;font-family:"El Messiri";font-size:.94rem;font-weight:600;line-height:1.25;
      color:var(--espresso);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .litem .rm{flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
      background:var(--cream-2);color:var(--ink-soft);border:none;cursor:pointer;font-size:.68rem;line-height:1;transition:all .15s}
    .litem .rm:hover{background:#a23b2a;color:#fff;transform:rotate(90deg)}
    .litem-meta{font-size:.73rem;color:var(--ink-soft)}
    .litem-meta s{opacity:.6;margin-inline-end:4px}
    .litem-bot{display:flex;align-items:center;justify-content:space-between;gap:10px}
    .qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--paper)}
    .qty button{width:26px;height:26px;color:var(--brand);font-weight:700;font-size:1rem;transition:background .12s}
    .qty button:hover{background:var(--cream-2)}
    .qty span{min-width:24px;text-align:center;font-weight:700;font-family:"El Messiri";font-size:.9rem}
    .litem .lp{font-family:"El Messiri";font-weight:700;font-size:1.02rem;color:var(--brand);white-space:nowrap}
    .drawer-f{padding:18px 22px;border-top:1px solid var(--line);background:var(--paper)}
    .drawer-f .row{display:flex;justify-content:space-between;font-size:.92rem;color:var(--ink-soft);margin-bottom:8px}
    .drawer-f .row.total{color:var(--espresso);font-weight:700;font-size:1.18rem;font-family:"El Messiri";margin:12px 0 16px}
    .drawer-f .total b{font-family:"El Messiri"}
    .checkout{width:100%;justify-content:center}

    /* ---------- toast ---------- */
    .toast{position:fixed;bottom:24px;inset-inline:0;margin:auto;width:max-content;max-width:90vw;
      background:var(--espresso);color:#fff;padding:13px 22px;border-radius:13px;font-weight:700;font-size:.92rem;
      display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-lift);z-index:90;
      opacity:0;transform:translateY(16px);pointer-events:none;transition:all .3s}
    .toast.show{opacity:1;transform:translateY(0)}
    .toast svg{width:19px;height:19px;color:var(--gold-soft)}

    /* ---------- offer section ---------- */
    .offer{position:relative;overflow:hidden;isolation:isolate;color:var(--cream);
      padding-block:90px 66px;background:
      radial-gradient(130% 130% at 82% -25%, #5a3318, transparent 55%),
      radial-gradient(120% 120% at 10% 120%, #4a2c18, transparent 50%),
      var(--espresso)}
    .offer-seal{position:absolute;top:50%;inset-inline-start:-70px;transform:translateY(-50%);
      width:340px;height:340px;object-fit:contain;opacity:.06;
      filter:brightness(0) invert(1);animation:spin 90s linear infinite;z-index:0}
    .beans-field{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
    .bean{position:absolute;bottom:-26px;width:13px;height:19px;border-radius:60% 60% 55% 55%/50%;
      background:rgba(217,191,148,.45);transform:rotate(-20deg);animation:rise linear infinite}
    .bean::after{content:"";position:absolute;inset:3px 0;border-inline-start:1px solid var(--espresso)}
    @keyframes rise{0%{transform:translateY(0) rotate(-20deg);opacity:0}
      12%{opacity:.55}88%{opacity:.55}100%{transform:translateY(-115vh) rotate(150deg);opacity:0}}
    /* drifting brand logos */
    .bean-logo{position:absolute;bottom:-60px;width:44px;height:44px;
      animation:riseLogo linear infinite;will-change:transform,opacity;
      filter:drop-shadow(0 4px 10px rgba(44,24,16,.35))}
    .bean-logo img{width:100%;height:100%;display:block}
    @keyframes riseLogo{0%{transform:translateY(0) rotate(-8deg);opacity:0}
      14%{opacity:.92}86%{opacity:.92}100%{transform:translateY(-118vh) rotate(28deg);opacity:0}}

    .offer-in{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
    .offer-copy{text-align:start}
    .offer-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:"El Messiri";font-weight:500;
      letter-spacing:.22em;text-transform:uppercase;font-size:.74rem;color:var(--gold-soft);
      background:rgba(217,191,148,.12);border:1px solid rgba(217,191,148,.3);padding:7px 16px;border-radius:999px}
    .offer-eyebrow i{width:8px;height:8px;border-radius:50%;background:#ff6b4a;box-shadow:0 0 0 0 rgba(255,107,74,.6);animation:blink 1.6s ease-out infinite}
    @keyframes blink{0%{box-shadow:0 0 0 0 rgba(255,107,74,.6)}70%{box-shadow:0 0 0 9px rgba(255,107,74,0)}100%{box-shadow:0 0 0 0 rgba(255,107,74,0)}}
    .offer-title{font-size:clamp(1.9rem,4.2vw,2.9rem);color:#fff;margin-top:18px;line-height:1.2}
    .offer-sub{color:var(--gold-soft);max-width:46ch;margin:14px 0 0;font-size:1.04rem;opacity:.92}
    .countdown{display:inline-flex;align-items:center;gap:10px;margin:30px 0 28px}
    .cd{display:flex;flex-direction:column;align-items:center;min-width:74px;padding:13px 8px;border-radius:15px;
      background:rgba(255,255,255,.07);border:1px solid rgba(217,191,148,.22);backdrop-filter:blur(5px)}
    .cd b{font-family:"El Messiri";font-weight:600;font-size:2.05rem;line-height:1;color:#fff;
      font-variant-numeric:tabular-nums;display:inline-block}
    .cd b.tick{animation:tick .45s cubic-bezier(.3,1.4,.5,1)}
    @keyframes tick{0%{transform:translateY(-8px) scale(1.12);opacity:.3}100%{transform:translateY(0) scale(1);opacity:1}}
    .cd span{font-size:.72rem;color:var(--gold-soft);margin-top:7px}
    .cd-sep{font-family:"El Messiri";font-size:1.6rem;color:var(--gold-soft);opacity:.5;align-self:flex-start;margin-top:10px}
    .offer-cta{background:var(--gold);color:#2c1810;box-shadow:0 10px 26px -8px rgba(0,0,0,.5)}
    .offer-cta svg{transition:transform .2s}
    .offer-cta:hover{background:#fff;color:var(--espresso);transform:translateY(-2px)}
    .offer-cta:hover svg{transform:translateX(-4px)}

    /* offer carousel */
    .offer-carousel{position:relative;min-width:0}
    .oc-viewport{overflow:hidden;border-radius:22px;direction:ltr}
    .oc-track{display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1)}
    .oc-slide{flex:0 0 100%;min-width:0;padding:3px}
    .ocard{direction:rtl;text-align:right;display:flex;align-items:center;gap:20px;
      background:linear-gradient(180deg,var(--paper),#fbf4ea);border:1px solid rgba(217,191,148,.55);
      border-radius:20px;padding:22px;box-shadow:0 26px 54px -22px rgba(0,0,0,.6)}
    .oc-pic{position:relative;flex:0 0 132px;height:150px;border-radius:16px;border:1px solid var(--line);
      background:linear-gradient(160deg,rgba(44,24,16,.32),rgba(44,24,16,.5)),url(../img/bg-beans.png) center/cover}
    .oc-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:10px;border-radius:16px}
    .oc-off{position:absolute;top:-12px;inset-inline-start:-12px;width:52px;height:52px;border-radius:50%;
      background:#a23b2a;color:#fff;font-weight:700;font-size:.86rem;display:grid;place-items:center;
      box-shadow:0 6px 14px rgba(162,59,42,.45);border:2px solid var(--paper)}
    .oc-info{flex:1;min-width:0}
    .oc-roast{font-size:.76rem;font-weight:700;color:var(--ink-soft)}
    .oc-info h3{font-size:1.34rem;color:var(--espresso);margin:5px 0 2px}
    .oc-origin{font-size:.84rem;color:var(--ink-soft)}
    .oc-price{display:flex;align-items:baseline;gap:11px;margin:12px 0 14px}
    .oc-price .now{font-size:1.6rem;font-weight:700;color:var(--brand)}
    .oc-price .now small{font-size:.74rem;font-weight:500;color:var(--ink-soft);margin-inline-start:2px}
    .oc-price .was{font-size:1rem;color:var(--ink-soft);text-decoration:line-through;text-decoration-color:#a23b2a}
    .oc-add{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;font-weight:700;
      padding:10px 18px;border-radius:12px;font-size:.92rem;transition:background .2s,transform .15s}
    .oc-add svg{width:17px;height:17px}
    .oc-add:hover{background:var(--espresso);transform:translateY(-1px)}
    .oc-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;z-index:3;
      background:rgba(255,255,255,.14);border:1px solid rgba(217,191,148,.4);color:#fff;display:grid;place-items:center;
      backdrop-filter:blur(6px);transition:background .2s,color .2s}
    .oc-arrow:hover{background:var(--gold);color:#2c1810}
    .oc-arrow svg{width:20px;height:20px}
    .oc-prev{right:-15px}.oc-next{left:-15px}
    .oc-dots{display:flex;justify-content:center;gap:8px;margin-top:20px}
    .oc-dots button{width:8px;height:8px;border-radius:50%;background:rgba(217,191,148,.35);transition:all .25s;padding:0}
    .oc-dots button.active{background:var(--gold);width:24px;border-radius:5px}

    /* ---------- testimonials ---------- */
    .testi{padding-block:72px 78px;background:
      radial-gradient(120% 80% at 12% 0%, rgba(122,74,38,.06), transparent 55%),var(--cream)}
    .testi .sec-head{margin-bottom:40px}
    .tmarquee{overflow:hidden;direction:ltr;max-width:var(--maxw);margin-inline:auto;
      -webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
      mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
    .ttrack{display:flex;gap:12px;width:max-content;padding-block:6px;direction:ltr;
      animation:scroll-rtl 46s linear infinite;will-change:transform}
    .tmarquee:hover .ttrack{animation-play-state:paused}
    /* RTL: track drifts toward the right; shift = one copy + one gap (50% + gap/2) for a seamless loop */
    @keyframes scroll-rtl{
      from{transform:translateX(calc(-50% - 11px))}
      to{transform:translateX(0)}
    }

    /* offer ticker strip */
    .ticker{position:absolute;top:0;inset-inline:0;z-index:3;overflow:hidden;direction:ltr;
      background:var(--brand);border-block:1px solid rgba(217,191,148,.35)}
    .ticker-track{display:flex;width:max-content;direction:ltr;
      animation:scroll-rtl 32s linear infinite;will-change:transform}
    .ticker:hover .ticker-track{animation-play-state:paused}
    .ticker-item{display:inline-flex;align-items:center;gap:10px;direction:rtl;
      padding:11px 26px;color:var(--cream);font-weight:700;font-size:.92rem;white-space:nowrap;
      letter-spacing:.01em}
    .ticker-item svg{width:17px;height:17px;color:var(--gold-soft);flex:0 0 auto}
    .ticker-sep{display:inline-flex;align-items:center;color:var(--gold-soft);opacity:.6;font-size:.7rem}
    @media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}
    .tcard{flex:0 0 360px;max-width:360px;margin-inline:0;direction:rtl;text-align:right;background:var(--paper);border:1px solid var(--line);
      border-radius:var(--r);padding:24px 16px 20px;box-shadow:var(--shadow);position:relative;
      display:flex;flex-direction:column;gap:14px}
    .tcard .qmark{position:absolute;top:10px;inset-inline-end:20px;font-family:"El Messiri",serif;
      font-size:4.2rem;line-height:1;color:var(--gold);opacity:.28}
    .tcard .t-stars{color:var(--gold);font-size:1rem;letter-spacing:2px}
    .tcard blockquote{margin:0;color:var(--espresso);font-size:1.06rem;line-height:1.75;font-weight:500}
    .tcard figcaption{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:6px;
      border-top:1px solid var(--line)}
    .tcard .avatar{width:46px;height:46px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
      color:var(--paper);font-family:"El Messiri",serif;font-weight:700;font-size:1.2rem}
    .tcard figcaption b{display:block;font-family:"El Messiri",serif;font-size:1.02rem;color:var(--espresso)}
    .tcard figcaption span{font-size:.84rem;color:var(--ink-soft)}
    .tcard .verified{margin-inline-start:auto;display:inline-flex;align-items:center;gap:5px;
      font-size:.74rem;font-weight:700;color:var(--ok)}
    .tcard .verified svg{width:15px;height:15px}

    /* ---------- recommendations ---------- */
    .reco{padding-block:20px 40px}
    .reco-row{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;justify-content:safe center;
      padding:8px 2px 16px;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
    .reco-row::-webkit-scrollbar{display:none}
    .rcard{flex:0 0 230px;scroll-snap-align:start;background:var(--paper);border:1px solid var(--line);
      border-radius:16px;overflow:hidden;display:flex;flex-direction:column;
      transition:transform .25s,box-shadow .25s,border-color .25s}
    .rcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--gold)}
    .rpic{position:relative;height:100%;overflow:hidden;background:linear-gradient(160deg,rgba(44,24,16,.32),rgba(44,24,16,.5)),url(../img/bg-beans.png) center/cover}
    .rpic img{width:100%;height:100%;object-fit:contain;padding:10px;transition:transform .5s}
    .rcard:hover .rpic img{transform:scale(1.06)}
    .rtag{position:absolute;top:10px;inset-inline-start:10px;z-index:1;
      background:var(--brand);color:#fff;font-size:.66rem;font-weight:700;padding:4px 9px;border-radius:8px}
    .rtag.new{background:var(--ok)}
    .rcard-b{padding:12px 13px 13px;display:flex;flex-direction:column;gap:7px;flex:1}
    .rname{font-size:.96rem;line-height:1.25;color:var(--espresso)}
    .rstars{font-size:.76rem;color:var(--gold);font-weight:700}
    .rstars span{color:var(--ink-soft);font-weight:500}
    .rfoot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:4px}
    .rprice{font-family:"El Messiri";font-weight:700;font-size:1.06rem;color:var(--brand)}
    .rprice small{font-size:.66rem;color:var(--ink-soft);font-weight:400;margin-inline-start:2px}
    .radd{width:38px;height:38px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;
      background:var(--brand);color:#fff;transition:transform .2s,background .2s}
    .radd:hover{background:var(--espresso);transform:scale(1.08)}
    .radd svg{width:18px;height:18px}
    /* you-may-like strip */
    .suggest{padding-block:10px 50px}
    .suggest-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
    .scard{display:flex;align-items:center;gap:11px;background:var(--paper);border:1px solid var(--line);
      border-radius:14px;padding:10px;transition:transform .2s,box-shadow .2s,border-color .2s}
    .scard:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--gold)}
    .sthumb{width:54px;height:54px;flex:0 0 auto;border-radius:11px;object-fit:contain;padding:5px;background:linear-gradient(160deg,rgba(44,24,16,.32),rgba(44,24,16,.5)),url(../img/bg-beans.png) center/cover}
    .sinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
    .sname{font-weight:700;font-size:.84rem;color:var(--espresso);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .sprice{font-family:"El Messiri";font-weight:700;font-size:.96rem;color:var(--brand)}
    .sadd{width:34px;height:34px;flex:0 0 auto;border-radius:10px;display:grid;place-items:center;
      background:var(--cream-2);color:var(--brand);transition:transform .2s,background .2s,color .2s}
    .sadd:hover{background:var(--brand);color:#fff;transform:scale(1.08)}
    .sadd svg{width:17px;height:17px}

    /* ---------- responsive ---------- */
    @media(max-width:1000px){
      .grid{grid-template-columns:repeat(3,1fr)}
      .foot-grid{grid-template-columns:1fr 1fr}
      .assure-in{grid-template-columns:1fr 1fr}
      .suggest-row{grid-template-columns:repeat(2,1fr)}
    }
    @media(max-width:820px){
      .nav{display:none}
      .burger{display:grid}
      .hero-in{grid-template-columns:1fr;gap:18px;padding-block:34px 46px;
        text-align:center;justify-items:center}
      .hero-copy{display:flex;flex-direction:column;align-items:center}
      .hero p{margin-inline:auto}
      .hero-cta{justify-content:center;width:100%}
      .hero-meta{justify-content:center;gap:24px;margin-top:28px}
      .hero-art{order:-1;min-height:0;width:min(300px,74vw);aspect-ratio:1;margin-inline:auto}
      .hero-art::before{width:88%}
      .hero-art .bigseal{width:74%}
      .hero-art .ring{width:100%}
      .hero-art .ring.r2{width:78%}
      .hero-art .steam-badge{padding:7px 11px;font-size:.74rem;gap:8px}
      .hero-art .steam-badge i{width:26px;height:26px}
      .hero-art .steam-badge i svg{width:15px;height:15px}
      .hero-art .sb1{bottom:4%;inset-inline-start:-4%}
      .hero-art .sb2{top:4%;inset-inline-end:-4%}
      .hero-art .sb3{display:none}
      .bean-ring{display:none}
      /* readable copy over video on mobile */
      .hero-scrim{background:
        linear-gradient(180deg, rgba(246,239,227,.92) 0%, rgba(246,239,227,.74) 42%, rgba(246,239,227,.62) 100%)}
      .offer-in{grid-template-columns:1fr;gap:34px;text-align:center}
      .offer-copy{text-align:center}
      .offer-eyebrow{justify-content:center}
    }
    @media(max-width:680px){
      .grid{grid-template-columns:repeat(2,1fr);gap:16px}
      .card-b{padding:14px}
      .add{padding:10px 12px}.add span{display:none}
      .hero h1{font-size:clamp(2rem,8vw,2.6rem);line-height:1.18}
      .hero p{font-size:1rem;margin-top:14px}
      .hero-meta{gap:16px;margin-top:24px}
      .hero-meta .m b{font-size:1.32rem}
      .hero-art{width:min(260px,68vw)}
      /* compact recommendation cards */
      .reco{padding-block:14px 30px}
      .reco-row{gap:10px;padding:6px 2px 12px}
      .rcard{flex-basis:160px}
      .rpic{height:104px}
      .rtag{font-size:.6rem;padding:3px 7px;top:8px;inset-inline-start:8px}
      .rcard-b{padding:9px 10px 10px;gap:5px}
      .rname{font-size:.82rem}
      .rstars{font-size:.7rem}
      .rprice{font-size:.92rem}
      .radd{width:32px;height:32px;border-radius:9px}
      .radd svg{width:16px;height:16px}
      .suggest{padding-block:6px 36px}
      .suggest-row{gap:10px}
      /* vertical mini-card on mobile */
      .scard{flex-direction:column;align-items:stretch;gap:8px;padding:8px;border-radius:14px}
      .sthumb{width:100%;height:104px;border-radius:10px}
      .sinfo{width:100%;gap:3px}
      .sname{font-size:.8rem;white-space:normal;line-height:1.2;
        display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
      .sprice{font-size:.98rem}
      .sadd{width:100%;height:34px;border-radius:10px}
      .sadd svg{width:16px;height:16px}
      /* compact bean cards — icon beside text, name wraps 2 lines */
      .bb-beans{gap:6px}
      .bb-bean{align-items:center;gap:8px;padding:8px;border-radius:10px;border-width:1px}
      .bb-bean-ic{width:30px;height:30px;border-radius:8px}
      .bb-bean-ic svg{width:15px;height:15px}
      .bb-bean-info{flex:1;min-width:0}
      .bb-bean-name{font-size:.74rem;white-space:normal;line-height:1.15;
        display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
      .bb-bean-meta{font-size:.62rem;margin-top:2px;gap:3px;flex-wrap:wrap}
      .bb-bean-roast i{width:4px;height:6px}
      .bb-bean-check{width:15px;height:15px}
      .bb-bean-check svg{width:9px;height:9px}
      .countdown{gap:6px}
      .cd{min-width:60px;padding:10px 5px}
      .cd b{font-size:1.6rem}
      .cd span{font-size:.64rem}
      .cd-sep{font-size:1.2rem;margin-top:8px}
      .tcard{flex-basis:82vw;max-width:82vw}
      .ocard{flex-direction:column;text-align:center;gap:14px;padding:20px 16px}
      .oc-pic{flex:0 0 auto;width:100%;height:200px}
      .oc-info{text-align:center}
      .oc-price{justify-content:center}
      .oc-prev{right:2px}.oc-next{left:2px}
    }
    @media(max-width:430px){
      .grid{grid-template-columns:repeat(2,1fr);gap:10px}
      .suggest-row{grid-template-columns:repeat(2,1fr);gap:8px}
      .card-b{padding:11px}
      .card-b h3{font-size:1rem}
      .roast{font-size:.66rem}
      .origin{font-size:.74rem}
      .weights{gap:4px;margin:10px 0 12px}
      .weights button{padding:6px 0;font-size:.72rem}
      .hero-cta{flex-direction:column;align-items:stretch;max-width:300px;margin-inline:auto}
      .hero-cta .btn{justify-content:center;width:100%}
      .hero-meta{gap:12px}
      .hero-meta .m{flex:1;min-width:84px}
    }
    @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

    /* ============================================================
       SUBPAGES — breadcrumb / product / offers / blog
       ============================================================ */
    .subwrap{max-width:var(--maxw);margin-inline:auto;padding-inline:22px}
    .crumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.82rem;
      color:var(--ink-soft);padding:18px 0 4px}
    .crumb a{color:var(--ink-soft);transition:color .2s}
    .crumb a:hover{color:var(--brand)}
    .crumb .sep{opacity:.5}
    .crumb b{color:var(--espresso);font-weight:700}
    .page-head{text-align:center;max-width:680px;margin:0 auto;padding:30px 0 6px}
    .page-head .eyebrow{display:block;margin-bottom:8px}
    .page-head h1{font-size:clamp(2rem,4.6vw,3rem)}
    .page-head p{color:var(--ink-soft);margin:12px 0 0}

    /* ---------- product details ---------- */
    .pd{padding-block:8px 56px}
    .pd-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:42px;align-items:start;margin-top:14px}
    .pd-gallery{position:sticky;top:96px}
    .pd-main{position:relative;border-radius:20px;overflow:hidden;background:linear-gradient(160deg,rgba(44,24,16,.32),rgba(44,24,16,.5)),url(../img/bg-beans.png) center/cover;
      aspect-ratio:1;border:1px solid var(--line);box-shadow:var(--shadow)}
    .pd-main img{width:100%;height:100%;object-fit:contain;padding:22px;transition:transform .6s}
    .pd-main:hover img{transform:scale(1.05)}
    .pd-badge{position:absolute;top:14px;inset-inline-start:14px;z-index:2;background:#a23b2a;color:#fff;
      font-weight:700;font-size:.8rem;padding:6px 12px;border-radius:10px;box-shadow:var(--shadow)}
    .pd-tag{position:absolute;top:14px;inset-inline-end:14px;z-index:2;background:var(--brand);color:#fff;
      font-weight:700;font-size:.74rem;padding:5px 11px;border-radius:9px}
    .pd-thumbs{display:flex;gap:10px;margin-top:12px}
    .pd-thumb{width:74px;height:74px;flex:0 0 auto;border-radius:12px;overflow:hidden;cursor:pointer;
      border:2px solid var(--line);background:linear-gradient(160deg,rgba(44,24,16,.32),rgba(44,24,16,.5)),url(../img/bg-beans.png) center/cover;transition:border-color .2s,transform .15s}
    .pd-thumb img{width:100%;height:100%;object-fit:contain;padding:6px}
    .pd-thumb.sel{border-color:var(--brand)}
    .pd-thumb:hover{transform:translateY(-2px)}
    .pd-info > *{margin:0}
    .pd-cat{font-size:.78rem;color:var(--gold);font-weight:700;letter-spacing:.04em}
    .pd-title{font-size:clamp(1.7rem,3.4vw,2.4rem);margin-top:6px!important}
    .pd-rate{display:flex;align-items:center;gap:8px;margin-top:10px!important;font-size:.9rem;color:var(--ink-soft)}
    .pd-rate .st{color:var(--gold);font-size:1rem;letter-spacing:1px}
    .pd-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:16px!important}
    .pd-price .now{font-family:"El Messiri";font-weight:700;font-size:2.1rem;color:var(--brand)}
    .pd-price .was{font-size:1.1rem;color:var(--ink-soft);text-decoration:line-through}
    .pd-price .off{background:var(--cream-2);color:#a23b2a;font-weight:700;font-size:.78rem;padding:3px 9px;border-radius:8px}
    .pd-desc{color:var(--ink-soft);margin-top:14px!important;line-height:1.8}
    .pd-opt{margin-top:22px!important}
    .pd-opt-label{display:flex;justify-content:space-between;font-size:.82rem;font-weight:700;color:var(--espresso);margin-bottom:9px}
    .pd-opt-label span{color:var(--ink-soft);font-weight:600}
    .pd-pills{display:flex;gap:8px;flex-wrap:wrap}
    .pd-pill{padding:10px 16px;border-radius:11px;border:1.5px solid var(--line);background:var(--cream);
      font-weight:700;font-size:.84rem;color:var(--ink-soft);transition:all .18s;display:flex;flex-direction:column;align-items:center;gap:3px}
    .pd-pill small{font-size:.68rem;font-weight:600;opacity:.8}
    .pd-pill[aria-pressed="true"]{background:var(--espresso);border-color:var(--espresso);color:#fff}
    .pd-pill:hover:not([aria-pressed="true"]){border-color:var(--brand-2);color:var(--brand)}
    .pd-grind{width:100%;padding:13px 14px;border-radius:12px;border:1.5px solid var(--line);
      background:var(--cream);font-family:inherit;font-weight:700;font-size:.88rem;color:var(--espresso);cursor:pointer}
    .pd-buy{display:flex;gap:12px;align-items:stretch;margin-top:24px}
    .pd-stepper{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:12px;overflow:hidden;background:var(--cream)}
    .pd-stepper button{width:44px;height:100%;color:var(--brand);font-size:1.3rem;font-weight:700}
    .pd-stepper button:hover{background:var(--cream-2)}
    .pd-stepper span{min-width:42px;text-align:center;font-weight:700;font-family:"El Messiri";font-size:1.1rem}
    .pd-buy .btn{flex:1}
    .pd-buynow{margin-top:10px;width:100%;justify-content:center;background:var(--espresso);color:#fff}
    .pd-buynow:hover{background:#1d0f08}
    .pd-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:24px;
      padding-top:22px;border-top:1px solid var(--line)}
    .pd-trust div{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;font-size:.72rem;color:var(--ink-soft);font-weight:600}
    .pd-trust svg{width:24px;height:24px;color:var(--brand)}
    /* accordion */
    .pd-acc{margin-top:26px;border-top:1px solid var(--line)}
    .pd-acc details{border-bottom:1px solid var(--line)}
    .pd-acc summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;
      padding:16px 2px;font-weight:700;font-size:1rem;color:var(--espresso);list-style:none}
    .pd-acc summary::-webkit-details-marker{display:none}
    .pd-acc summary::after{content:"+";font-size:1.4rem;color:var(--brand);transition:transform .25s}
    .pd-acc details[open] summary::after{transform:rotate(45deg)}
    .pd-acc .acc-body{padding:0 2px 18px;color:var(--ink-soft);line-height:1.85;font-size:.92rem}
    .pd-acc .acc-body ul{margin:6px 0;padding-inline-start:18px}
    .pd-acc .acc-body li{margin:4px 0}
    .pd-spec{display:grid;grid-template-columns:1fr 1fr;gap:8px 22px}
    .pd-spec div{display:flex;justify-content:space-between;border-bottom:1px dashed var(--line);padding:6px 0;font-size:.86rem}
    .pd-spec b{color:var(--espresso)}

    /* ---------- offers page ---------- */
    .of-hero{position:relative;overflow:hidden;border-radius:22px;margin-top:16px;
      background:linear-gradient(135deg,var(--espresso),var(--brand));color:#fff;
      padding:46px 44px;display:flex;align-items:center;justify-content:space-between;
      gap:36px;box-shadow:var(--shadow-lift)}
    .of-hero::after{content:"";position:absolute;inset-inline-end:-60px;top:-60px;width:260px;height:260px;
      border-radius:50%;background:radial-gradient(circle,rgba(181,135,75,.4),transparent 70%)}
    .of-hero-text{display:flex;flex-direction:column;gap:14px;flex:1 1 auto;min-width:0;position:relative;z-index:1}
    .of-hero-badge{flex:0 0 auto;width:190px;height:190px;border-radius:50%;position:relative;z-index:1;
      background:radial-gradient(circle at 35% 30%,#fff,#f4ece1);display:grid;place-items:center;padding:24px;
      box-shadow:0 16px 40px rgba(0,0,0,.28),inset 0 0 0 6px rgba(181,135,75,.18)}
    .of-hero-badge img{width:100%;height:auto;display:block}
    .of-hero .eyebrow{color:var(--gold-soft)}
    .of-hero h1{color:#fff;font-size:clamp(1.8rem,4vw,2.8rem);position:relative;z-index:1}
    .of-hero p{color:rgba(246,239,227,.86);max-width:52ch;position:relative;z-index:1}
    .of-countdown{display:flex;gap:10px;margin-top:6px;position:relative;z-index:1}
    .of-cd{background:rgba(255,255,255,.12);border:1px solid rgba(217,191,148,.3);border-radius:12px;
      padding:10px 14px;text-align:center;min-width:66px}
    .of-cd b{display:block;font-family:"El Messiri";font-size:1.7rem;line-height:1;color:#fff}
    .of-cd span{font-size:.66rem;color:var(--gold-soft)}
    .of-strip{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:30px 0 6px}
    .of-chip{display:inline-flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);
      border-radius:999px;padding:9px 16px;font-weight:700;font-size:.84rem;color:var(--espresso)}
    .of-chip svg{width:17px;height:17px;color:var(--brand)}
    .of-section{padding-block:34px}
    .of-section h2{font-size:1.6rem;margin-bottom:4px}
    .of-section .sub{color:var(--ink-soft);margin-bottom:18px}

    /* ---------- blog ---------- */
    .blog-sec{padding-block:60px 30px}
    .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
    .bpost{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
      border-radius:18px;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}
    .bpost:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift);border-color:var(--gold)}
    .bpost-pic{position:relative;height:194px;overflow:hidden;background:var(--cream-2)}
    .bpost-pic img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
    .bpost:hover .bpost-pic img{transform:scale(1.06)}
    .bpost-cat{position:absolute;top:12px;inset-inline-start:12px;background:var(--brand);color:#fff;
      font-size:.68rem;font-weight:700;padding:5px 11px;border-radius:8px}
    .bpost-b{padding:18px 18px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
    .bpost-meta{display:flex;align-items:center;gap:10px;font-size:.74rem;color:var(--ink-soft)}
    .bpost-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--line-strong)}
    .bpost h3{font-size:1.12rem;line-height:1.35;color:var(--espresso)}
    .bpost p{font-size:.88rem;color:var(--ink-soft);line-height:1.7;flex:1}
    .bpost-more{display:inline-flex;align-items:center;gap:7px;color:var(--brand);font-weight:700;font-size:.86rem;margin-top:2px}
    .bpost-more svg{width:16px;height:16px;transition:transform .2s}
    .bpost:hover .bpost-more svg{transform:translateX(-4px)}
    .blog-feat{margin-bottom:26px}
    .bpost-feat{display:grid;grid-template-columns:1.35fr 1fr;align-items:stretch}
    .bpost-feat .bpost-pic{height:100%;min-height:330px}
    .bpost-feat .bpost-b{padding:32px 30px;justify-content:center;gap:13px}
    .bpost-feat h3{font-size:clamp(1.3rem,2.6vw,1.85rem);line-height:1.3}
    .bpost-feat p{font-size:.98rem}

    /* single post */
    .post{max-width:780px;margin-inline:auto;padding-block:10px 60px}
    .post-hero{border-radius:20px;overflow:hidden;height:clamp(220px,40vw,420px);margin-top:14px;border:1px solid var(--line)}
    .post-hero img{width:100%;height:100%;object-fit:cover}
    .post h1{font-size:clamp(1.8rem,4vw,2.6rem);margin-top:22px}
    .post-meta{display:flex;gap:12px;align-items:center;color:var(--ink-soft);font-size:.85rem;margin-top:12px}
    .post-body{margin-top:24px;color:var(--espresso);line-height:1.95;font-size:1.04rem}
    .post-body h2{font-size:1.4rem;margin:30px 0 10px}
    .post-body p{margin:14px 0;color:#43342a}
    .post-body ul{margin:14px 0;padding-inline-start:22px}
    .post-body blockquote{margin:22px 0;padding:14px 20px;border-inline-start:4px solid var(--gold);
      background:var(--cream-2);border-radius:0 12px 12px 0;font-weight:600;color:var(--espresso)}

    /* ---------- subpage responsive ---------- */
    @media(max-width:900px){
      .pd-wrap{grid-template-columns:1fr;gap:24px}
      .pd-gallery{position:static}
      .blog-grid{grid-template-columns:repeat(2,1fr)}
      .bpost-feat{grid-template-columns:1fr}
      .bpost-feat .bpost-pic{min-height:210px}
      .bpost-feat .bpost-b{padding:22px 20px}
    }
    @media(max-width:640px){
      .blog-grid{grid-template-columns:1fr}
      .pd-main{aspect-ratio:4/3}
      .pd-trust{grid-template-columns:repeat(3,1fr);gap:6px}
      .pd-trust div{font-size:.64rem}
      .of-hero{padding:32px 24px;flex-direction:column-reverse;align-items:flex-start;gap:22px}
      .of-hero-badge{width:128px;height:128px;padding:16px;align-self:center}
      .pd-buy{flex-wrap:wrap}
      .pd-buy .btn{flex-basis:100%}
    }

    /* product links on cards */
    .pic-link{position:absolute;inset:0;z-index:2}
    .card .stamp{z-index:3}
    .ct-link{color:inherit;transition:color .2s}
    .ct-link:hover{color:var(--brand)}

    /* ── unavailable weight / sold-out (admin didn't price that variant) ── */
    .weights button:disabled,.pd-pill:disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through;filter:grayscale(.6)}
    .weights button:disabled:hover,.pd-pill:disabled:hover{transform:none}
    .card.sold-out .add:disabled,.add:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
    .card.sold-out{filter:saturate(.85)}

    /* ── shimmer skeleton (product detail loading) ── */
    @keyframes sk-shimmer{100%{background-position:-200% 0}}
    .sk{border-radius:10px;background:linear-gradient(90deg,var(--cream-2,#efe6d6) 25%,rgba(181,135,75,.12) 37%,var(--cream-2,#efe6d6) 63%);background-size:200% 100%;animation:sk-shimmer 1.3s ease-in-out infinite}
    .pd-sk{display:grid;grid-template-columns:1.05fr 1fr;gap:34px}
    @media(max-width:860px){.pd-sk{grid-template-columns:1fr}}
    .pd-sk .sk-main{aspect-ratio:1;border-radius:20px}
    .pd-sk .sk-thumbs{display:flex;gap:10px;margin-top:12px}
    .pd-sk .sk-thumb{width:74px;height:74px;border-radius:12px}

    /* per-image shimmer while real media loads (matches .pd-main / .pd-thumb box) */
    .pd-main.img-loading::after,.pd-thumb.img-loading::after{content:"";position:absolute;inset:0;border-radius:inherit;
      background:linear-gradient(90deg,rgba(217,191,148,.12) 25%,rgba(181,135,75,.24) 37%,rgba(217,191,148,.12) 63%);
      background-size:200% 100%;animation:sk-shimmer 1.25s ease-in-out infinite;pointer-events:none;z-index:1}
    .pd-thumb{position:relative}
    .pd-main img,.pd-thumb img{opacity:0;transition:opacity .45s ease}
    .pd-main img.ld,.pd-thumb img.ld{opacity:1}
    .pd-sk .sk-line{height:16px;margin:10px 0}
    .pd-sk .sk-line.lg{height:30px;width:70%}
    .pd-sk .sk-line.sm{width:45%}
    .pd-sk .sk-pill{display:inline-block;width:84px;height:38px;border-radius:12px;margin:6px 8px 6px 0}
    .pd-sk .sk-btn{height:52px;border-radius:14px;margin-top:18px}

/* ── directional arrow mirroring (i18n) ──
   Design is authored RTL; in LTR (en) flip horizontal arrow icons + carousel
   controls. Tagged by js/api.js mirrorArrows(). Vertical icons are never tagged. */
[dir="ltr"] .ar-flip { transform: scaleX(-1); }
[dir="ltr"] .oc-arrow svg { transform: scaleX(-1); }

/* ════════ coffee-cup loader (provided SVG) ════════ */
@keyframes steam{0%{opacity:0;transform:translateY(5px)}45%{opacity:.75}100%{opacity:0;transform:translateY(-7px)}}
@keyframes cw-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.cw-cup{display:inline-block;width:34px;height:37px;line-height:0;animation:cw-bob 2.6s ease-in-out infinite}
.cw-cup svg{width:100%;height:100%;display:block;overflow:visible}
.cw-cup.sm{width:24px;height:26px}
.cw-cup.lg{width:74px;height:82px}
.cw-cup.sad{opacity:.55;animation:none}

/* ════════ search overlay ════════ */
.ks-overlay{position:fixed;inset:0;z-index:120;display:none}
.ks-overlay.open{display:block}
.ks-scrim{position:absolute;inset:0;background:rgba(44,24,16,.5);backdrop-filter:blur(5px);animation:ks-fade .2s ease}
.ks-panel{position:absolute;inset-block-start:0;inset-inline:0;margin-inline:auto;max-width:760px;background:var(--cream);border-radius:0 0 24px 24px;box-shadow:0 30px 80px -20px rgba(44,24,16,.5);max-height:88vh;display:flex;flex-direction:column;animation:ks-drop .28s cubic-bezier(.2,.9,.3,1)}
@keyframes ks-fade{from{opacity:0}}@keyframes ks-drop{from{transform:translateY(-32px);opacity:0}}
.ks-head{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line)}
.ks-ico{width:22px;height:22px;color:var(--brand);flex-shrink:0}
#ksInput{flex:1;min-width:0;border:none;background:none;font:inherit;font-size:1.15rem;color:var(--espresso);font-family:'El Messiri',serif}
#ksInput:focus{outline:none}
.ks-close{background:none;border:none;color:var(--ink-soft);cursor:pointer;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex-shrink:0}
.ks-close:hover{background:var(--cream-2);color:var(--brand)}
.ks-spin{display:grid;place-items:center;flex-shrink:0}
.ks-body{overflow-y:auto;padding:6px 22px 24px}
.ks-hint,.ks-none{text-align:center;padding:46px 20px;color:var(--ink-soft);display:flex;flex-direction:column;align-items:center}
.ks-hint p,.ks-none p{margin-top:14px;font-size:.95rem}
.ks-sec{margin-top:18px}
.ks-sec-h{font-size:.72rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.ks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.ks-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s,border-color .15s}
.ks-card:hover,.ks-card.on{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--gold-soft)}
.ks-card-thumb{position:relative;aspect-ratio:5/4;background:var(--cream-2);overflow:hidden}
.ks-card-thumb img{width:100%;height:100%;object-fit:cover}
.ks-ph{display:block;width:100%;height:100%}
.ks-disc{position:absolute;inset-block-start:6px;inset-inline-end:6px;background:#a23b2a;color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:99px}
.ks-card-name{padding:9px 11px 2px;font-family:'El Messiri',serif;font-weight:600;font-size:.92rem;color:var(--espresso);line-height:1.3}
.ks-card-price{padding:0 11px 11px;font-weight:700;color:var(--brand);font-size:.86rem}
.ks-chips{display:flex;flex-wrap:wrap;gap:8px}
.ks-chip{padding:8px 16px;border-radius:999px;background:var(--paper);border:1px solid var(--line);text-decoration:none;color:var(--espresso);font-size:.86rem;font-weight:600;transition:all .15s}
.ks-chip:hover,.ks-chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.ks-rows{display:flex;flex-direction:column;gap:6px}
.ks-row{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:12px;text-decoration:none;color:inherit;transition:background .15s}
.ks-row:hover,.ks-row.on{background:var(--paper)}
.ks-row-th{width:42px;height:42px;border-radius:10px;flex-shrink:0;background-size:cover;background-position:center}
.ks-row-tx b{display:block;font-family:'El Messiri',serif;font-weight:600;font-size:.95rem;color:var(--espresso)}
.ks-row-tx small{color:var(--ink-soft);font-size:.78rem}
.ks-body mark{background:rgba(181,135,75,.32);color:inherit;border-radius:3px;padding:0 1px}
[dir="ltr"] .ks-ico{transform:scaleX(-1)}
@media (max-width:560px){.ks-panel{border-radius:0;max-height:100vh;inset-block-end:0}.ks-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}}

/* ════════ page preloader (coffee cup) ════════ */
#cw-preload{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:var(--cream);transition:opacity .5s ease,visibility .5s}
#cw-preload.hide{opacity:0;visibility:hidden}
#cw-preload .cw-pre-in{display:flex;flex-direction:column;align-items:center;gap:16px}
#cw-preload .cw-pre-brand{font-family:'El Messiri',serif;font-weight:700;font-size:1.3rem;color:var(--brand);letter-spacing:.5px}

/* ════════ section-matched skeleton cards (match .card) ════════ */
.sk-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.sk-card .sk-pic{aspect-ratio:5/6;border-radius:0}
.sk-card .sk-cb{padding:18px;display:flex;flex-direction:column;gap:11px;flex:1}
.sk-card .sk-l{height:13px;border-radius:7px}
.sk-card .sk-l.t{height:22px;width:72%}
.sk-card .sk-l.s{width:48%}
.sk-card .sk-foot{height:46px;border-radius:13px;margin-top:auto}
.reco-row .sk-card{min-width:230px;scroll-snap-align:start}
@media(max-width:560px){.sk-card .sk-cb{padding:14px}}

/* product-detail skeleton — sizes + cup spinner */
.pd-sk{position:relative}
.pd-sk .sk-main{aspect-ratio:5/6}
.pd-sk .sk-line{height:15px;border-radius:8px}
.pd-sk .sk-line.lg{height:32px;width:66%}
.pd-sk .sk-line.sm{width:42%}
.pd-sk-cup{position:absolute;inset:0;display:grid;place-items:center;color:var(--brand);pointer-events:none}
/* preloader safety: auto-dismiss even without JS (e.g. 404) */
@keyframes cw-preauto{to{opacity:0;visibility:hidden}}
#cw-preload{animation:cw-preauto .01s linear 5s forwards}

/* product buy buttons — centered Add text, WhatsApp inquiry, out-of-stock */
#pdAdd{justify-content:center}
.pd-wa{width:100%;justify-content:center;gap:9px;margin-top:10px;background:#1faa52;border:none;color:#fff}
.pd-wa:hover{background:#178a43;transform:translateY(-1px)}
.pd-wa svg{width:20px;height:20px}
.btn:disabled,.btn.is-oos{opacity:.5;cursor:not-allowed;pointer-events:none;filter:grayscale(.35);transform:none}

/* ---------- fly-to-cart (js/fly-cart.js) ---------- */
.fly-item{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;overflow:hidden;
  border-radius:16px;background:#fff;box-shadow:0 18px 40px -12px rgba(44,24,16,.45),0 0 0 3px rgba(255,255,255,.9);
  will-change:transform,opacity;transform-origin:center}
.fly-item img{width:100%;height:100%;object-fit:cover;display:block}
.fly-bean{display:grid;place-items:center;background:var(--brand);color:#c8955c;padding:22%;border-radius:50%;
  box-shadow:0 10px 24px -8px rgba(44,24,16,.55)}
.fly-bean svg{width:100%;height:100%;display:block}
.fly-trail{background:transparent;box-shadow:none;padding:0;color:var(--brand-2);opacity:.85}
.fly-ring{position:absolute;top:50%;left:50%;width:42px;height:42px;border-radius:50%;
  border:2px solid var(--brand-2);pointer-events:none;transform:translate(-50%,-50%) scale(.4);opacity:0}

/* hero CTA buttons are shown on mobile only (<= 760px, the mobile.css breakpoint) */
@media (min-width:761px){.hero-cta{display:none}}

/* blend line: its beans, each with roast + grams (cart drawer + cart page) */
.bcomp{list-style:none;margin:5px 0 4px;padding:0;display:grid;gap:3px}
.bcomp li{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.74rem;color:var(--ink-soft)}
.bcomp li::before{content:"";width:6px;height:8px;border-radius:50%;background:var(--brand);opacity:.7}
.bcomp b{color:var(--espresso);font-weight:700}
.bcomp span{padding:1px 7px;border-radius:999px;background:var(--cream-2);border:1px solid var(--line)}