:root{
    --espresso:#2B1B14;
    --espresso-2:#3A2419;
    --cream:#F4EBDC;
    --cream-2:#FBF6EE;
    --clay:#A65E2E;
    --clay-light:#C97D45;
    --gold:#C9A227;
    --forest:#57633F;
    --text:#241209;
    --text-soft:#5B4636;
    --radius:18px;
    --roast-gradient: linear-gradient(90deg, #57633F 0%, #C9A227 28%, #C97D45 55%, #A65E2E 78%, #2B1B14 100%);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Cairo', sans-serif;
    background:var(--cream-2);
    color:var(--text);
    line-height:1.7;
    overflow-x:hidden;
  }
  h1,h2,h3,.display{font-family:'Cairo', sans-serif; font-weight:800;}
  a{text-decoration:none; color:inherit;}
  img{max-width:100%; display:block;}
  ul{list-style:none;}
  .wrap{max-width:1160px; margin:0 auto; padding:0 24px;}
  .roast-bar{height:5px; background:var(--roast-gradient); width:100%;}

  /* ---- Global motion system ---- */
  a, button{transition:transform .18s ease, background .2s ease, color .2s ease, box-shadow .2s ease, opacity .2s ease;}
  .btn-primary:active, .btn-outline:active, .icon-btn:active, .add-btn:active,
  .cat-card:active, .float-btn:active, .checkout-btn:active, .modal-submit:active,
  .prod-card:active{transform:scale(.94);}

  .reveal{opacity:0; transform:translateY(50px); transition:opacity .9s ease, transform .9s cubic-bezier(.16,.8,.3,1);}
  .reveal.in{opacity:1; transform:translateY(0);}
  .cta-section-fade{transform:none;}
  .cta-section-fade.in{transform:none;}
  .reveal-stagger > *{opacity:0; transform:translateY(40px); transition:opacity .9s ease, transform .9s cubic-bezier(.16,.8,.3,1);}
  .reveal-stagger > *.in{opacity:1; transform:translateY(0);}

  /* category circles ("تصفح أصنافنا") — rise a bit slower than they fade in */
  .cat-grid.reveal-stagger > *{transition:opacity .9s ease, transform 1.3s cubic-bezier(.16,.8,.3,1);}

  .cat-icon{transition:transform .3s ease, box-shadow .3s ease;}
  .cat-card:hover .cat-icon{transform:translateY(-4px) scale(1.06); box-shadow:0 16px 30px rgba(43,27,20,.22);}

  .float-btn{animation:float-bob 3.4s ease-in-out infinite;}
  .float-wa{animation-delay:.3s;}
  @keyframes float-bob{
    0%, 100%{transform:translateY(0);}
    50%{transform:translateY(-6px);}
  }

  /* the true iPhone status bar area: env(safe-area-inset-top) reports 0 in a
     normal Safari tab (it only reports the real notch height for a
     home-screen/standalone web app), so we can't rely on it alone — the
     max(...,44px) fallback guarantees a real strip either way. This has to
     be position:fixed (not sticky) with a real pixel height, because iOS26
     Safari colors its toolbar/status area by sampling the background-color
     of fixed/sticky elements at first paint — a 0-height element gives it
     nothing to sample, so it falls through to the ticker's dark color. */
  .safe-area-spacer{
    position:fixed; top:0; left:0; right:0;
    height:max(env(safe-area-inset-top, 0px), 6px);
    z-index:200;
  }
  body{
    padding-top:max(env(safe-area-inset-top, 0px), 6px);
  }

  /* Header */
  header{
    position:sticky; top:max(env(safe-area-inset-top, 0px), 6px); z-index:100;
    background:rgba(251,246,238,0.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid rgba(43,27,20,0.08);
  }
  /* anchor links (قصتنا, الأسئلة الشائعة, تواصل معنا...) jump to these sections —
     without this offset, the sticky header covers the top of the target section */
  #home, #categories, #story, #faq, #contact{ scroll-margin-top:100px; }
  .site-ticker{
    overflow:hidden; white-space:nowrap;
    padding:5px 0; position:relative;
    direction:ltr;
  }
  .site-ticker-track{
    display:inline-flex; gap:16px;
    animation-iteration-count:infinite !important;
    direction:ltr;
  }
  .site-ticker-item{
    font-size:12px; font-weight:600; flex-shrink:0;
    direction:rtl; /* the Arabic text itself still reads correctly right-to-left, only the outer strip's layout order is locked to ltr */
  }
  .site-ticker-sep{
    flex-shrink:0; opacity:.6;
  }
  @keyframes ticker-scroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }
  .nav{display:flex; align-items:center; justify-content:space-between; padding:14px 24px; gap:10px;}
  .nav-brand{display:flex; align-items:center; gap:12px; min-width:0; flex-shrink:1;}
  .nav-actions{display:flex; align-items:center; gap:8px; flex-shrink:0;}
  .logo{display:flex; align-items:center; gap:10px; font-family:'Cairo',sans-serif; font-size:22px; font-weight:800; color:var(--espresso);}
  .logo-main-text{font-size:26px;}
  .logo-mark{
    width:36px; height:36px; border-radius:50%;
    background:conic-gradient(from 200deg, #57633F, #C9A227, #C97D45, #A65E2E, #2B1B14, #57633F);
    display:flex; align-items:center; justify-content:center;
    box-shadow: inset 0 0 0 3px var(--cream-2);
  }
  .logo-img{
    width:36px; height:36px; border-radius:50%;
    object-fit:cover; display:block; flex-shrink:0;
  }
  .nav-actions{display:flex; align-items:center; gap:8px;}
  .icon-btn{
    position:relative; width:46px; height:46px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:transparent; border:none; cursor:pointer; font-size:19px; color:var(--espresso);
    transition:background .2s;
  }
  .icon-btn:hover{background:rgba(166,94,46,.1);}
  .lang-pill{
    width:auto; border-radius:20px; border:1.5px solid rgba(43,27,20,.15);
    padding:0 16px; font-size:13px; font-weight:600; gap:6px;
  }
  .lang-pill:hover{background:rgba(166,94,46,.08);}
  .lang-pill-short{display:none;}

  .header-cta-btn{
    padding:9px 18px; border-radius:20px; font-size:13.5px; font-weight:700;
    white-space:nowrap; transition:opacity .2s;
  }
  .header-cta-btn:hover{opacity:.85;}

  .social-row{display:flex; gap:10px;}
  .social-icon{
    width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.08);
    display:flex; align-items:center; justify-content:center; color:#EDE0D0;
    transition:background .2s, transform .2s;
  }
  .social-icon:hover{background:var(--clay); transform:translateY(-3px);}
  #menuToggle{flex-direction:column; gap:4px; width:40px;}
  #menuToggle span{width:20px; height:2px; background:var(--espresso); border-radius:2px;}
  .cart-count{
    position:absolute; top:2px; left:2px; background:var(--clay); color:#fff;
    font-size:10px; font-weight:800; min-width:16px; height:16px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; padding:0 3px;
  }

  /* search bar */
  .search-bar{
    position:absolute; top:calc(100% + 10px); left:16px; right:16px; z-index:500;
    max-height:0; overflow:hidden; opacity:0; transition:max-height .25s ease, opacity .2s ease;
    background:#fff; border-radius:20px; box-shadow:0 16px 40px rgba(43,27,20,.18);
  }
  .search-bar.show{max-height:520px; overflow-y:auto; opacity:1;}
  .search-bar form{display:flex; align-items:center; gap:10px; padding:14px 18px;}
  .search-bar input{flex:1; padding:8px 4px; border:none; outline:none; font-family:'Cairo'; font-size:16px; background:transparent; order:2;}
  .search-bar button[type="submit"]{width:36px; height:36px; border-radius:50%; border:none; background:transparent; color:var(--espresso); cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; order:1;}
  .search-close{background:none; border:none; font-size:18px; color:var(--text-soft); cursor:pointer; padding:4px; flex-shrink:0; order:3;}
  .search-results{padding:0 18px 14px;}
  .search-result-item{display:flex; align-items:center; gap:14px; padding:12px 0; border-top:1px solid rgba(43,27,20,.08); text-decoration:none; color:inherit;}
  .search-result-item:first-child{border-top:none;}
  .search-result-thumb{width:52px; height:52px; border-radius:10px; object-fit:cover; background:var(--cream); flex-shrink:0;}
  .search-result-info{flex:1; min-width:0;}
  .search-result-name{font-weight:800; color:var(--espresso); font-size:15px;}
  .search-result-cat{font-size:12.5px; color:var(--text-soft);}
  .search-result-price{font-weight:700; color:var(--clay); font-size:14px; white-space:nowrap;}
  .search-empty{padding:20px 0; text-align:center; color:var(--text-soft); font-size:14px;}

  /* category drawer (hamburger) */
  .cat-drawer{
    display:none; position:fixed; inset:0; z-index:9999; background:#FBF6EE; overflow-y:auto;
  }
  .cat-drawer.show{display:block;}
  .cat-drawer-inner{padding:100px 24px 28px;}
  .cat-drawer-inner ul{display:flex; flex-direction:column;}
  .cat-drawer-inner li{border-bottom:1px solid rgba(43,27,20,.12);}
  .cat-drawer-inner li a{display:block; padding:20px 4px; font-size:20px; font-weight:700; color:var(--espresso); text-align:right; transition:color .2s;}
  .cat-drawer-inner li a:hover{color:var(--clay);}

  /* Hero */

  .hero{
    position:relative;
    padding:140px 0 120px;
    min-height:420px;
    background:radial-gradient(circle at 85% 20%, #EFDFC4 0%, var(--cream-2) 55%);
    overflow:hidden;
  }
  .hero.hero-image-only-wrap{padding:40px 0; min-height:0; background:none;}
  .hero-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:50px; align-items:center;}
  .hero-grid.hero-image-only{display:block;}
  .hero-grid.hero-image-only > div:first-child{display:none;}
  .hero-grid.hero-image-only .hero-visual{height:auto; display:block;}
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:13px; letter-spacing:1px; color:var(--clay); font-weight:700;
    background:rgba(166,94,46,0.1); padding:6px 14px; border-radius:20px; margin-bottom:22px;
  }
  .eyebrow::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--clay);}
  .hero h1{font-size:56px; line-height:1.25; color:var(--espresso); margin-bottom:22px;}
  .hero h1 em{font-style:normal; color:var(--clay);}
  .hero p{font-size:17px; color:var(--text-soft); max-width:480px; margin-bottom:34px;}
  .hero-ctas{display:flex; gap:16px; flex-wrap:wrap;}
  .btn-primary, .btn-outline{
    padding:15px 30px; border-radius:12px; font-weight:700; font-size:15px;
    display:inline-flex; align-items:center; gap:8px; transition:all .25s;
  }
  .btn-primary{background:var(--espresso); color:var(--cream-2); border:2px solid var(--espresso);}
  .btn-primary:hover{opacity:1 !important; transform:translateY(-2px);}
  .btn-outline{border:2px solid var(--espresso); color:var(--espresso); background:transparent;}
  .btn-outline:hover{background:var(--espresso); color:var(--cream-2);}
  .story .btn-outline{
    border:none; background:#fff; border-radius:30px; color:var(--espresso);
    padding:16px 34px; box-shadow:0 8px 20px rgba(43,27,20,.08);
  }
  .story .btn-outline:hover{background:var(--espresso); color:var(--cream-2); box-shadow:0 12px 26px rgba(43,27,20,.18);}

  .hero-visual{position:relative; display:flex; align-items:center; justify-content:center; height:420px;}
  .cup{
    position:relative; width:230px; height:230px; border-radius:50%;
    background: radial-gradient(circle at 35% 30%, #6B4A32, #2B1B14 70%);
    box-shadow:0 30px 60px rgba(43,27,20,0.35), inset 0 0 0 10px rgba(255,255,255,0.06);
  }
  .cup::before{
    content:''; position:absolute; inset:14px; border-radius:50%;
    background: radial-gradient(circle at 40% 35%, #C97D45 0%, #A65E2E 40%, #3A2419 100%);
    opacity:.9;
  }
  .ring{
    position:absolute; border-radius:50%; border:1.5px dashed rgba(166,94,46,.35);
    animation: spin 40s linear infinite;
  }
  .ring1{width:320px; height:320px;}
  .ring2{width:390px; height:390px; animation-duration:60s; animation-direction:reverse;}
  @keyframes spin{ to{ transform:rotate(360deg); } }
  .steam{position:absolute; top:-10px; width:3px; background:linear-gradient(to top, rgba(43,27,20,0.4), transparent); border-radius:3px; animation:rise 3s ease-in-out infinite;}
  .steam1{right:38%; height:60px; animation-delay:0s;}
  .steam2{right:48%; height:75px; animation-delay:.6s;}
  .steam3{right:58%; height:55px; animation-delay:1.2s;}
  @keyframes rise{
    0%{transform:translateY(0) scaleX(1); opacity:.5;}
    50%{transform:translateY(-18px) scaleX(1.6); opacity:.9;}
    100%{transform:translateY(-36px) scaleX(1); opacity:0;}
  }

  .hero.has-bg{background-color:#2B1B14; background-size:cover; background-position:center;}
  .hero h1.on-image{color:#fff;}
  .hero h1.on-image em{color:var(--gold);}
  .hero p.on-image{color:#EDE0D0;}
  .btn-outline.on-image{border-color:#fff; color:#fff;}
  .btn-outline.on-image:hover{background:#fff; color:var(--espresso);}

  section{padding:80px 0;}
  .section-head{text-align:center; max-width:560px; margin:0 auto 50px;}
  .section-eyebrow{
    color:var(--clay); font-weight:700; font-size:14px; letter-spacing:.3px; margin-bottom:10px;
    display:inline-flex; align-items:center; gap:10px; font-family:'Cairo', sans-serif;
  }
  .section-eyebrow::before{content:''; width:26px; height:1.5px; background:var(--clay); display:inline-block;}
  .story .section-eyebrow{margin-bottom:14px;}
  .section-head h2{font-size:38px; color:var(--espresso);}
  .section-head p{color:var(--text-soft); margin-top:12px; font-size:15px;}

  /* Categories — circular */
  .cat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:36px 24px;}
  .cat-card{
    display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;
    transition:transform .3s; cursor:pointer;
  }
  .cat-card:hover{transform:translateY(-6px);}
  .cat-icon{
    position:relative; width:190px; height:190px; max-width:100%; border-radius:50%; overflow:hidden;
    display:flex; align-items:center; justify-content:center; font-size:40px;
    box-shadow:0 10px 24px rgba(43,27,20,.14); border:none;
    background:linear-gradient(135deg, var(--clay-light), var(--clay)); color:#fff;
    transition:transform .4s ease; margin:0 auto;
  }
  .cat-card:hover .cat-icon{transform:scale(1.04);}
  .cat-icon img{width:100%; height:100%; object-fit:cover;}
  .cat-card h3{font-family:'Cairo'; font-size:16px; font-weight:700; color:var(--espresso);}

  /* Bestsellers — slider */
  .prod-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
  .slider{display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; scrollbar-width:none;}
  .slider::-webkit-scrollbar{display:none;}
  .slider .prod-card{flex:0 0 292px; scroll-snap-align:start;}
  .slider-controls{display:flex; justify-content:flex-start; gap:10px; margin-bottom:14px;}
  @media(min-width:900px){
    .slider .prod-card{flex:0 0 calc(25% - 16.5px);}
  }
  .slider-btn{width:36px; height:36px; border-radius:50%; border:1.5px solid rgba(43,27,20,.2); background:transparent; cursor:pointer; font-size:18px; line-height:1; color:var(--espresso); display:flex; align-items:center; justify-content:center;}
  .slider-btn:hover{background:var(--espresso); color:#fff;}
  .prod-card{
    width:292px; height:422px; background:#fff; border-radius:20px; overflow:hidden;
    box-shadow:0 10px 30px rgba(43,27,20,.10); border:none; transition:box-shadow .3s, transform .3s;
    display:flex; flex-direction:column;
  }
  .prod-card:hover{transform:translateY(-4px); box-shadow:0 24px 40px rgba(43,27,20,.16);}
  .prod-image{
    height:65%; display:flex; align-items:center; justify-content:center; font-size:40px;
    background:linear-gradient(160deg, #EFDFC4, #E4CBA6); overflow:hidden; position:relative; flex-shrink:0;
  }
  .weight-badge{
    position:absolute; bottom:10px; right:10px; background:rgba(43,27,20,.72); color:#fff; font-size:12px;
    font-weight:700; padding:5px 12px; border-radius:20px; z-index:2;
  }
  .custom-img-badge{
    position:absolute; bottom:10px; left:10px; background:rgba(70,70,70,.82); color:#fff; font-size:12px;
    font-weight:700; padding:5px 12px; border-radius:20px; z-index:2;
  }
  .discount-badge{
    position:absolute; top:10px; right:10px; background:#C0392B; color:#fff; font-size:11.5px;
    font-weight:800; padding:4px 10px; border-radius:20px; z-index:2;
  }
  .compare-price{color:var(--text-soft); text-decoration:line-through; font-size:12.5px; margin-left:6px;}
  .prod-image a{display:block; width:100%; height:100%;}
  .prod-body{padding:16px; flex:1; display:flex; flex-direction:column;}
  .prod-tag{font-size:12px; color:#B3A69A; font-weight:600; letter-spacing:.3px;}
  .prod-body h3 a{font-family:'Cairo'; font-size:16px; font-weight:800; margin:6px 0 auto; color:var(--espresso); display:block;}
  .prod-foot{display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:14px;}
  .price{font-weight:900; color:#A9743A; font-size:16px;}
  .add-btn{
    width:38px; height:38px; border-radius:50%; border:none;
    background:var(--espresso); color:#fff; font-size:18px; cursor:pointer;
    transition:background .2s, color .2s; order:-1;
  }
  .add-btn:hover{background:var(--clay);}
  .add-btn:disabled{background:#B3A69A; cursor:not-allowed; opacity:.6;}
  .add-btn:disabled:hover{background:#B3A69A;}
  .oos-overlay{
    position:absolute; inset:0; z-index:4; display:flex; align-items:center; justify-content:center;
    background:rgba(43,27,20,.5); color:#fff; font-weight:800; font-size:14px; border-radius:inherit;
  }

  /* Shop listing grid (category/search page) */
  .shop-grid{grid-template-columns:repeat(3,1fr); gap:20px;}
  .shop-grid .prod-card{width:100%; height:auto;}
  .shop-grid .prod-image{height:auto; aspect-ratio:1/1;}
  @media(max-width:900px){
    .prod-grid.shop-grid{grid-template-columns:repeat(2,1fr); gap:14px;}
    .shop-grid .prod-card{border-radius:16px;}
    .shop-grid .prod-image{aspect-ratio:1/1;}
    .shop-grid .prod-body{padding:12px;}
    .shop-grid .prod-body h3 a{font-size:14px;}
    .shop-grid .prod-foot{align-items:flex-end; flex-wrap:nowrap; gap:6px;}
    .shop-grid .prod-foot > span{display:flex; flex-direction:column; align-items:flex-end; gap:2px; min-width:0;}
    .shop-grid .price{font-size:14px; white-space:nowrap;}
    .shop-grid .compare-price{font-size:10.5px; margin-left:0; white-space:nowrap;}
    .shop-grid .add-btn{width:32px; height:32px; font-size:16px; flex-shrink:0;}
  }

  /* Story */
  .story{background:#EFE1CB; color:var(--text); position:relative;}
  .story .wrap{display:grid; grid-template-columns:1.1fr 0.9fr; gap:50px; align-items:center;}
  .story h2{font-size:34px; margin-bottom:20px; color:var(--espresso);}
  .story p{color:var(--text-soft); margin-bottom:16px; font-size:15px;}
  .journey{position:relative; padding-right:26px;}
  .journey-line{position:absolute; top:6px; bottom:6px; right:6px; width:3px; background:var(--roast-gradient); border-radius:3px;}
  .journey-step{position:relative; padding-bottom:34px;}
  .journey-step:last-child{padding-bottom:0;}
  .journey-step::before{
    content:''; position:absolute; right:-3px; top:4px; width:9px; height:9px; border-radius:50%;
    background:var(--cream-2); box-shadow:0 0 0 3px var(--clay);
  }
  .journey-step h4{font-family:'Cairo'; font-size:15px; font-weight:700; color:var(--clay); margin-bottom:4px;}
  .journey-step p{color:var(--text-soft); font-size:13.5px; margin:0;}

  /* Steps / order */
  .steps-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative;}
  .step-card{padding:10px 6px; position:relative; text-align:right;}
  .step-num{
    font-family:'Cairo'; font-size:48px; color:#E4CBA8; font-weight:800; margin-bottom:6px; line-height:1;
  }
  .step-card h3{font-size:18px; font-weight:800; color:var(--espresso); margin-bottom:8px;}
  .step-card p{font-size:14px; color:var(--text-soft);}
  @media(min-width:900px){
    .step-num{font-size:64px;}
  }

  /* FAQ */
  .faq{max-width:760px; margin:0 auto;}

  /* reviews */
  .reviews-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .review-card{background:#fff; border-radius:16px; padding:24px; box-shadow:0 10px 24px rgba(43,27,20,.08);}
  .review-stars{font-size:15px; letter-spacing:2px; margin-bottom:12px;}
  .review-text{color:var(--text-soft); font-size:14.5px; line-height:1.8; margin-bottom:16px;}
  .review-name{font-weight:800; color:var(--espresso); font-size:14px;}
  .review-cta-link{
    display:inline-block; color:var(--clay); font-weight:700; text-decoration:none; font-size:16px;
    background:transparent; padding:10px 20px; border-radius:30px; box-shadow:none;
    text-shadow:0 2px 6px rgba(43,27,20,.35);
    transition:background .15s, box-shadow .15s;
  }
  .review-cta-link:active{
    background:#fff; box-shadow:0 6px 18px rgba(43,27,20,.12);
  }
  @media(max-width:900px){
    .reviews-grid{grid-template-columns:1fr;}
  }
  .faq-item{
    background:#fff; border:2px solid #fff; border-radius:14px;
    padding:0 16px; margin-bottom:10px; box-shadow:0 6px 16px rgba(43,27,20,.06);
  }
  .faq-q{
    width:100%; text-align:right; background:none; border:none; padding:12px 0;
    font-size:14.5px; font-weight:700; color:var(--espresso); cursor:pointer;
    display:flex; justify-content:space-between; align-items:center; font-family:'Cairo';
  }
  .faq-q .plus{transition:transform .3s; color:var(--clay); font-size:20px;}
  .faq-item.open .faq-q .plus{transform:rotate(45deg);}
  .faq-a{max-height:0; overflow:hidden; transition:max-height .35s ease;}
  .faq-a p{padding:0 0 22px; color:var(--text-soft); font-size:14.5px; max-width:640px;}

  /* CTA */
  .cta-band{
    background:linear-gradient(to left, #C9915A, var(--espresso));
    border-radius:24px; padding:38px 28px; text-align:center; color:var(--cream-2);
  }
  .cta-band h2{font-size:21px; margin-bottom:10px;}
  .cta-band p{color:#EFDFC4; margin-bottom:20px; font-size:14px;}
  .btn-wa{background:linear-gradient(135deg, #D9A662, #C9915A); color:#FBF6EE; padding:15px 34px; border-radius:30px; font-weight:800; display:inline-flex; gap:8px; align-items:center;}
  @media(min-width:900px){
    .cta-band{
      display:flex; align-items:center; justify-content:space-between;
      text-align:right; padding:56px 60px; gap:24px;
    }
    .cta-band-text{flex:1;}
    .cta-band h2{margin-bottom:8px; font-size:32px;}
    .cta-band p{margin-bottom:0; font-size:16px;}
    .btn-wa{flex-shrink:0; padding:16px 32px;}
  }

  /* Footer */
  footer{background:var(--espresso); color:#fff; padding:60px 0 24px;}
  .foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; margin-bottom:40px;}
  .foot-logo{font-family:'Cairo'; font-size:26px; color:var(--cream-2); margin-bottom:14px;}
  footer h4{color:var(--cream-2); font-size:14px; margin-bottom:16px;}
  footer li{margin-bottom:10px; font-size:14px;}
  footer li a:hover{color:var(--gold);}
  .foot-bottom{border-top:1px solid rgba(255,255,255,.08); padding-top:22px; text-align:center; font-size:13px; color:#fff;}
  .foot-contact-list li{display:flex; align-items:center; gap:8px;}
  .foot-contact-list li svg{color:var(--gold); flex-shrink:0;}

  /* Cart drawer */
  .overlay{position:fixed; inset:0; background:rgba(43,27,20,.45); opacity:0; pointer-events:none; transition:opacity .3s; z-index:200;}
  .overlay.show{opacity:1; pointer-events:auto;}
  .drawer{
    position:fixed; top:0; right:-420px; width:400px; max-width:92vw; height:100%;
    background:var(--cream-2); z-index:201; box-shadow:-20px 0 50px rgba(0,0,0,.2);
    transition:right .35s ease; display:flex; flex-direction:column;
  }
  .drawer.show{right:0;}
  .drawer-head{padding:22px 24px; border-bottom:1px solid rgba(43,27,20,.1); display:flex; justify-content:space-between; align-items:center;}
  .drawer-head h3{font-size:19px; color:var(--espresso);}
  .drawer-close{background:none; border:none; font-size:22px; cursor:pointer; color:var(--text-soft);}
  .drawer-body{flex:1; overflow-y:auto; padding:18px 24px;}
  .cart-empty{text-align:center; color:var(--text-soft); padding:60px 10px; font-size:14px;}
  .cart-line{display:flex; gap:14px; align-items:center; padding:14px 0; border-bottom:1px solid rgba(43,27,20,.08);}
  .cart-line .thumb{width:52px; height:52px; border-radius:12px; background:linear-gradient(160deg,#EFDFC4,#E4CBA6); display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0;}
  .cart-line .info{flex:1; min-width:0;}
  .cart-line .info h4{font-size:14px; font-weight:700; color:var(--espresso);}
  .cart-line .info span{font-size:12.5px; color:var(--clay); font-weight:700;}
  .qty-ctrl{display:flex; align-items:center; gap:8px;}
  .qty-ctrl button{width:26px; height:26px; border-radius:8px; border:1px solid rgba(43,27,20,.2); background:var(--cream); cursor:pointer; font-size:14px;}
  .qty-ctrl span{min-width:16px; text-align:center; font-size:13px; font-weight:700;}
  .remove-line{background:none; border:none; color:#B44; font-size:12px; cursor:pointer; margin-right:8px;}
  .drawer-foot{padding:20px 24px; border-top:1px solid rgba(43,27,20,.1);}
  .drawer-total{display:flex; justify-content:space-between; font-weight:800; font-size:16px; margin-bottom:14px; color:var(--espresso);}
  .checkout-btn{width:100%; padding:15px; border-radius:12px; background:var(--espresso); color:var(--cream-2); border:none; font-weight:800; font-size:15px; cursor:pointer; transition:background .2s;}
  .checkout-btn:hover{background:var(--clay);}
  .checkout-btn:disabled{opacity:.4; cursor:not-allowed;}

  /* Checkout modal */
  .modal{
    position:fixed; inset:0; z-index:210; display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .3s;
  }
  .modal.show{opacity:1; pointer-events:auto;}
  .modal-box{
    background:var(--cream-2); border-radius:20px; padding:32px; width:440px; max-width:92vw;
    max-height:88vh; overflow-y:auto; transform:translateY(10px); transition:transform .3s;
  }
  .modal.show .modal-box{transform:translateY(0);}
  .modal-box h3{font-size:22px; color:var(--espresso); margin-bottom:20px;}
  .field{margin-bottom:16px;}
  .field label{display:block; font-size:13.5px; font-weight:700; color:var(--text-soft); margin-bottom:6px;}
  .field input, .field textarea{
    width:100%; padding:12px 14px; border-radius:10px; border:1.5px solid rgba(43,27,20,.15);
    font-family:'Cairo'; font-size:14px; background:var(--cream);
  }
  .field input:focus, .field textarea:focus{outline:2px solid var(--clay); border-color:var(--clay);}
  .pay-options{display:flex; flex-direction:column; gap:12px;}
  .pay-opt{
    display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:14px;
    border:1.5px solid rgba(43,27,20,.14); cursor:pointer; font-size:14px; background:#fff;
    transition:border-color .2s, background .2s;
  }
  .pay-opt:hover{border-color:rgba(43,27,20,.3);}
  .pay-opt.selected{border-color:var(--clay); background:var(--cream);}
  .pay-opt.disabled{opacity:.45; cursor:not-allowed; filter:grayscale(.4);}
  .pay-opt-icon{
    width:40px; height:40px; border-radius:10px; background:var(--cream-2); display:flex;
    align-items:center; justify-content:center; flex-shrink:0; color:var(--espresso);
  }
  .pay-opt-text{flex:1; min-width:0;}
  .pay-opt-text .t{font-weight:800; color:var(--espresso); font-size:14.5px; display:block; margin-bottom:2px;}
  .pay-opt-text .d{font-size:12.5px; color:var(--text-soft); display:block;}
  .pay-radio{position:relative; width:20px; height:20px; flex-shrink:0;}
  .pay-radio input[type="radio"]{
    position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; z-index:2;
  }
  .pay-radio i{
    position:absolute; inset:0; border-radius:50%; border:2px solid rgba(43,27,20,.25);
    background:#fff; transition:border-color .2s; display:block; pointer-events:none;
  }
  .pay-radio i::after{
    content:''; position:absolute; inset:4px; border-radius:50%; background:var(--clay);
    opacity:0; transition:opacity .15s;
  }
  .pay-radio input[type="radio"]:checked ~ i{border-color:var(--clay);}
  .pay-radio input[type="radio"]:checked ~ i::after{opacity:1;}
  .pay-none-msg{font-size:13px; color:var(--text-soft); padding:14px; text-align:center; border:1.5px dashed rgba(43,27,20,.2); border-radius:12px;}

  /* Gateway confirmation modal (ZainCash / Card) */
  .gw-modal-box{width:400px;}
  .gw-modal-box .gw-icon{width:56px; height:56px; border-radius:50%; background:var(--cream); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; color:var(--espresso);}
  .gw-modal-box h3{text-align:center; margin-bottom:6px;}
  .gw-modal-box p.gw-sub{text-align:center; color:var(--text-soft); font-size:13px; margin-bottom:20px;}
  .gw-error{background:#FBEAE8; color:#B44; font-size:13px; padding:10px 14px; border-radius:10px; margin-bottom:14px; display:none;}
  .gw-error.show{display:block;}
  .modal-submit{width:100%; padding:15px; border-radius:12px; background:var(--forest); color:#fff; border:none; font-weight:800; font-size:15px; cursor:pointer; margin-top:6px;}
  .success-msg{text-align:center; padding:20px 0;}
  .success-msg .check{width:64px; height:64px; border-radius:50%; background:var(--forest); color:#fff; display:flex; align-items:center; justify-content:center; font-size:30px; margin:0 auto 16px;}

  /* Floating side buttons */
  .float-stack{position:fixed; bottom:26px; right:24px; z-index:220; display:flex; flex-direction:column; gap:14px;}
  .float-btn{
    width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:26px; cursor:pointer; border:none; box-shadow:0 12px 28px rgba(43,27,20,.25); transition:transform .2s;
    text-decoration:none;
  }
  .float-btn:hover{transform:scale(1.08);}
  .float-wa{background:#25D366; color:#fff;}
  .float-assist{background:var(--clay-light); color:#fff; font-size:22px;}

  .assist-panel{
    position:fixed; bottom:96px; right:24px; width:300px; max-width:85vw; z-index:220;
    background:var(--cream-2); border-radius:18px; box-shadow:0 24px 50px rgba(43,27,20,.25);
    overflow:hidden; transform:translateY(16px) scale(.96); opacity:0; pointer-events:none; transition:all .25s;
  }
  .assist-panel.show{transform:translateY(0) scale(1); opacity:1; pointer-events:auto;}
  .assist-head{background:var(--espresso); color:#fff; padding:14px 18px; font-weight:700; font-size:14px; display:flex; justify-content:space-between; align-items:center;}
  .assist-head button{background:none; border:none; color:#fff; font-size:16px; cursor:pointer;}
  .assist-body{padding:16px 18px; font-size:13.5px; color:var(--text-soft); line-height:1.8;}

  /* Shop page */
  .shop-hero{
    background:linear-gradient(120deg, var(--espresso), #3A2419);
    padding:60px 0 44px; color:#fff; text-align:center;
    position:relative; overflow:hidden;
    min-height:280px; display:flex; align-items:center; justify-content:center;
  }
  .shop-hero > .wrap{width:100%;}
  @media(max-width:600px){
    .shop-hero{ min-height:200px; }
    .shop-hero.has-bg-img{
      background-size:contain !important;
      background-repeat:no-repeat !important;
      background-color:#2B1B14;
      min-height:0;
      aspect-ratio:var(--shop-hero-ratio, 1920/420);
      padding:16px 0;
    }
    .shop-hero.has-bg-img.has-hero-text{
      min-height:200px;
      aspect-ratio:auto;
    }
  }
  .shop-hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
  .shop-hero-video-overlay{position:absolute; inset:0; z-index:1;}
  .shop-hero h1{font-size:32px; margin-bottom:8px;}
  .shop-hero p{color:#D9C9B6; font-size:14px;}

  .shop-search{display:flex; gap:10px; background:#fff; border-radius:30px; padding:6px 6px 6px 22px; box-shadow:0 8px 20px rgba(43,27,20,.08); margin-bottom:18px;}
  .shop-search input{flex:1; border:none; outline:none; font-family:'Cairo'; font-size:14px; background:transparent;}
  .shop-search button{width:44px; height:44px; border-radius:50%; border:none; background:var(--cream); cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center; color:var(--espresso);}

  .shop-toolbar{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px;}
  .pill-toggle{
    padding:13px 24px; border-radius:30px; border:1.5px solid rgba(43,27,20,.15); background:#fff;
    font-family:'Cairo'; font-size:14px; font-weight:700; color:var(--espresso); cursor:pointer;
    appearance:none; -webkit-appearance:none; display:inline-flex; align-items:center; gap:8px;
  }
  .sort-wrap{position:relative; flex:1;}
  .sort-wrap .pill-toggle{width:100%; display:flex; align-items:center; justify-content:space-between; cursor:pointer; background:#fff; border:none;}
  .sort-menu{
    position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:300;
    background:#fff; border-radius:14px; box-shadow:0 14px 32px rgba(43,27,20,.16);
    overflow:hidden; opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .18s, transform .18s, visibility .18s;
  }
  .sort-menu.show{opacity:1; visibility:visible; transform:translateY(0);}
  .sort-menu-item{
    display:block; width:100%; text-align:right; padding:12px 16px; border:none; background:none;
    font-family:'Cairo'; font-size:13.5px; color:var(--espresso); cursor:pointer; border-bottom:1px solid rgba(43,27,20,.06);
  }
  .sort-menu-item:last-child{border-bottom:none;}
  .sort-menu-item:hover{background:var(--cream);}
  .sort-chevron{position:absolute; left:16px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--text-soft);}
  .shop-count{color:var(--text-soft); font-size:14px; margin-bottom:10px;}

  .filter-panel{
    position:fixed; top:0; right:-380px; width:360px; max-width:90vw; height:100%;
    background:var(--cream-2); z-index:201; box-shadow:-20px 0 50px rgba(0,0,0,.15);
    transition:right .35s ease; display:flex; flex-direction:column;
  }
  .filter-panel.show{right:0;}
  .shop-layout{display:block;}
  @media(min-width:900px){
    .shop-layout{display:grid; grid-template-columns:280px 1fr; gap:32px; align-items:start;}
    .shop-products{order:2;}
    #filterOpenBtn{display:none;}
    .filter-panel{
      position:sticky; top:20px; width:100%; max-width:none; max-height:calc(100vh - 40px); overflow-y:auto;
      box-shadow:none; border:1px solid rgba(43,27,20,.1); border-radius:16px;
      order:0; display:flex !important; right:auto;
    }
    .filter-close{display:none;}
    .overlay{display:none !important;}
    .prod-grid.shop-grid{grid-template-columns:repeat(3,1fr); gap:18px;}
    .shop-grid .prod-body{padding:14px;}
    .shop-grid .prod-body h3 a{font-size:14.5px;}
    .shop-grid .price{font-size:14.5px;}
  }
  .filter-head{padding:22px 24px; border-bottom:1px solid rgba(43,27,20,.1); display:flex; justify-content:space-between; align-items:center;}
  .filter-head h3{font-size:18px; color:var(--espresso);}
  .filter-clear{color:var(--clay); font-size:13px; font-weight:700;}
  .filter-close{background:none; border:none; font-size:20px; cursor:pointer; color:var(--text-soft);}
  .filter-body{flex:1; overflow-y:auto; padding:20px 24px;}
  .filter-body h4{font-size:13px; color:var(--clay); font-weight:800; margin-bottom:14px;}
  .filter-check{display:flex; justify-content:space-between; align-items:center; padding:10px 0; font-size:14px; color:var(--espresso); border-bottom:1px solid rgba(43,27,20,.06);}
  .filter-check-label{display:flex; align-items:center; gap:10px;}
  .filter-cat-thumb{width:34px; height:34px; border-radius:9px; overflow:hidden; background:var(--cream); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .filter-cat-thumb img{width:100%; height:100%; object-fit:cover;}
  .filter-cat-emoji{font-size:16px;}
  .filter-body input[type="range"]{width:100%; margin:14px 0 6px;}
  .filter-foot{padding:20px 24px; border-top:1px solid rgba(43,27,20,.1);}

  /* Product detail page */
  .pd-wrap{max-width:580px;}
  .pd-breadcrumb{font-size:13px; color:var(--text-soft); margin-bottom:16px;}
  @media(min-width:900px){
    .pd-wrap{max-width:1080px;}
    .pd-layout{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
    .pd-media{position:sticky; top:24px;}
    .pd-image{margin-bottom:14px;}
  }
  .pd-breadcrumb a{color:var(--text-soft); transition:color .2s;}
  .pd-breadcrumb a:hover{color:var(--clay);}
  .pd-image{
    position:relative; border-radius:24px; overflow:hidden; background:linear-gradient(160deg,#EFDFC4,#E4CBA6);
    aspect-ratio:1/1; margin-bottom:18px; box-shadow:0 20px 40px rgba(43,27,20,.12);
  }
  .pd-image img{width:100%; height:100%; object-fit:cover;}
  .pd-image-fallback{width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:60px;}
  .pd-thumbs{display:flex; gap:10px; margin:-6px 0 18px; overflow-x:auto; padding-bottom:2px;}
  .pd-thumb{
    width:64px; height:64px; flex-shrink:0; border-radius:12px; overflow:hidden; padding:0;
    border:2px solid transparent; cursor:pointer; opacity:.65; transition:opacity .2s, border-color .2s; background:none;
  }
  .pd-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
  .pd-thumb:hover{opacity:.9;}
  .pd-thumb.active{opacity:1; border-color:var(--clay);}
  .pd-image-viewport{
    position:relative; width:100%; height:100%; border-radius:inherit;
    display:flex; overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; direction:ltr; cursor:grab;
  }
  .pd-image-viewport:active{cursor:grabbing;}
  .pd-image-viewport::-webkit-scrollbar{display:none;}
  .pd-slide{flex:0 0 100%; width:100%; height:100%; scroll-snap-align:start; background:var(--cream);}
  .pd-slide img{width:100%; height:100%; object-fit:contain; display:block; -webkit-user-drag:none; user-select:none;}
  .pd-cat{color:var(--clay); font-weight:700; font-size:11px;}
  .pd-title{font-size:28px; color:var(--espresso); margin:10px 0 6px;}
  .pd-price{font-size:24px; font-weight:900; color:var(--clay); margin-bottom:20px; display:flex; align-items:center; gap:10px;}

  .pd-info-card{background:var(--cream-2); border:1px solid rgba(43,27,20,.1); border-radius:16px; padding:6px 20px; margin-bottom:20px;}
  .pd-info-row{display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid rgba(43,27,20,.08); font-size:14px;}
  .pd-info-row:last-child{border-bottom:none;}
  .pd-info-row span:last-child{color:var(--text-soft); font-weight:500;}
  .pd-info-row span:first-child{color:var(--espresso); font-weight:800;}
  .pd-cat-value{color:#000 !important;}

  .pd-variant-group{margin-bottom:18px;}
  .pd-variant-group label{display:block; font-size:13px; font-weight:700; color:var(--text-soft); margin-bottom:8px;}
  .pd-variant-options{display:flex; gap:8px; flex-wrap:wrap;}
  .pd-variant-btn{padding:9px 18px; border-radius:20px; border:1.5px solid rgba(43,27,20,.2); background:var(--cream-2); font-family:'Cairo'; font-size:13.5px; cursor:pointer; color:var(--espresso);}
  .pd-variant-btn.active{background:var(--espresso); color:#fff; border-color:var(--espresso);}

  .pd-qty-row{display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; font-size:14px; font-weight:700; color:var(--espresso);}
  .pd-qty-row .qty-ctrl{display:flex; align-items:center; gap:16px;}
  .pd-qty-row .qty-ctrl button{background:none; border:none; font-size:18px; cursor:pointer; color:var(--espresso); font-weight:800;}

  .pd-add-btn{width:100%; border:none; padding:18px; font-size:16px; border-radius:30px; margin-bottom:14px; box-shadow:0 12px 24px rgba(43,27,20,.18);}
  .pd-add-btn:disabled{opacity:.5; cursor:not-allowed;}
  .pd-back-link{
    display:block; width:100%; text-align:center; color:var(--espresso); font-size:15px; font-weight:700;
    padding:16px; border-radius:30px; background:#fff; border:1.5px solid rgba(43,27,20,.12);
    box-shadow:0 8px 20px rgba(43,27,20,.06); box-sizing:border-box;
  }

  /* desktop horizontal nav (hidden on mobile by default) */
  .nav-links-desktop{display:none;}

  /* full-bleed hero background */
  .hero{width:100%; margin:0; border-radius:0;}

  @media(min-width:900px){
    .hero.has-bg{min-height:0; aspect-ratio:2/1; padding:0; display:flex; align-items:center; background-size:cover; background-position:center;}
    .nav{position:relative;}
    .nav-links-desktop{
      display:flex; gap:34px; align-items:center; list-style:none; margin:0; padding:0;
      position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    }
    .nav-links-desktop a{font-size:15px; font-weight:600; color:var(--text-soft); transition:color .2s; position:relative; padding-bottom:6px;}
    .nav-links-desktop a.active{color:var(--espresso);}
    .nav-links-desktop a.active::after{content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--clay); border-radius:2px;}
    .nav-links-desktop a:hover{color:var(--clay);}
    #menuToggle{display:none;}
  }

  /* responsive */
  @media(max-width:900px){
    .lang-pill-text{display:none;}
    .lang-pill-short{display:inline-block; font-weight:800; font-size:12.5px;}
    .lang-pill{padding:0; width:38px; justify-content:center;}
    .logo{font-size:17px; gap:6px;}
    .logo-main-text{font-size:19px;}
    .logo span:not(.logo-main-text){font-size:11px !important;}
    .nav{padding:12px 14px;}
    .nav-actions{gap:2px;}
    .icon-btn{width:38px; height:38px;}
    .slider{gap:12px;}
    .slider .prod-card{flex:0 0 calc(50% - 6px); height:auto;}
    .slider .prod-image{height:auto; aspect-ratio:4/3;}
    .slider .prod-body{padding:12px;}
    .slider .prod-body h3 a{font-size:14px;}
    .slider .prod-foot{align-items:flex-end; flex-wrap:nowrap; gap:6px;}
    .slider .prod-foot > span{display:flex; flex-direction:column; align-items:flex-end; gap:2px; min-width:0;}    .slider .price{font-size:14px; white-space:nowrap;}
    .slider .compare-price{font-size:10.5px; margin-left:0; white-space:nowrap;}
    .slider .add-btn{width:32px; height:32px; font-size:15px; flex-shrink:0;}
    .hero-grid{grid-template-columns:1fr;}
    .hero-visual{order:-1; height:280px;}
    .hero-grid.hero-image-only .hero-visual{height:auto;}
    .hero h1{font-size:38px;}
    .cat-grid{grid-template-columns:repeat(2,1fr); gap:20px 36px;}
    .cat-icon{width:127px; height:127px; box-shadow:0 14px 26px rgba(43,27,20,.22);}
    .prod-grid{grid-template-columns:1fr;}
    .story .wrap{grid-template-columns:1fr;}
    .story .wrap > div:last-child{order:-1;}
    .steps-grid{grid-template-columns:repeat(2,1fr);}
    .foot-grid{grid-template-columns:1fr 1fr;}
    .hero.has-bg{
      padding:36px 0;
      min-height:0;
      aspect-ratio:16/9;
      display:flex;
      align-items:center;
    }
  }