:root{
  --font-display:'Oldenburg Display', serif;
  --font-body:'Poppins', sans-serif;
  --accent:#B5A092;
  --accent-2:#CBBBAE;
  --accent-soft:rgba(181,160,146,0.16);
  --radius:3px;
  --ease:cubic-bezier(.16,.84,.44,1);
  --gutter:15px;
}

html[data-theme="dark"]{
  --bg:#000000; --bg-alt:#0A0908; --surface:#0F0D0C; --surface-2:#161311;
  --heading:#FFFFFF; --body-c:#B7ACA3; --body-dim:#8C8178;
  --line:rgba(181,160,146,0.14); --line-strong:rgba(181,160,146,0.4);
  --glass:rgba(255,255,255,0.035); --glass-border:rgba(181,160,146,0.2);
}
html[data-theme="light"]{
  --bg:#FAF8F6; --bg-alt:#F2EEEA; --surface:#FFFFFF; --surface-2:#F4F0EC;
  --heading:#171310; --body-c:#5E554E; --body-dim:#8A8078;
  --line:rgba(94,85,78,0.14); --line-strong:rgba(94,85,78,0.35);
  --glass:rgba(255,255,255,0.6); --glass-border:rgba(94,85,78,0.16);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--body-c);font-family:var(--font-body);line-height:1.6;overflow-x:hidden;transition:background .5s var(--ease),color .5s var(--ease);}
body.custom-cursor-active{cursor:none;}
body.custom-cursor-active button,body.custom-cursor-active a{cursor:none;}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;background:none;border:none;color:inherit;}
ul{list-style:none;}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--heading);font-weight:400;}

/* ---- FULL WIDTH LAYOUT: edge-to-edge, ~10px gutters, sane ceiling for ultrawide ---- */
.wrap{width:100%;max-width:2200px;margin:0 auto;padding:0 var(--gutter);}

.eyebrow{font-size:11px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:10px;}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--accent);}
[dir="rtl"] .eyebrow::before{order:2;}
.section{padding:140px 0;position:relative;}
@media(max-width:768px){.section{padding:90px 0;}}
::selection{background:var(--accent);color:#0A0806;}

@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important;}}

/* ---- Custom cursor ---- */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;border-radius:50%;transform:translate(-50%,-50%);}
.cursor-dot{width:6px;height:6px;background:var(--accent);}
.cursor-ring{width:34px;height:34px;border:1px solid var(--accent);transition:width .3s var(--ease),height .3s var(--ease),opacity .3s;opacity:.7;}
.cursor-ring.big{width:64px;height:64px;opacity:1;background:var(--accent-soft);}
@media(max-width:900px){.cursor-dot,.cursor-ring{display:none;}}

/* ---- Nav ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;padding:22px 0;transition:padding .4s var(--ease),background .4s var(--ease),border-color .4s var(--ease);border-bottom:1px solid transparent;}
.nav.scrolled{padding:12px 0;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-color:var(--line);}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;}
.logo{font-family:var(--font-display);font-size:25px;letter-spacing:.08em;color:var(--heading);}
.nav-links{display:flex;align-items:center;gap:38px;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;font-weight:500;}
.nav-links a{position:relative;padding:6px 0;color:var(--body-c);transition:color .3s;}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--accent);transition:width .4s var(--ease);}
.nav-links a:hover,.nav-links a.active{color:var(--heading);}
.nav-links a:hover::after,.nav-links a.active::after{width:100%;}
.nav-links li.current-menu-item > a::after,.nav-links li.current_page_item > a::after{width:100%;}
@media(max-width:1100px){.nav-links{display:none;}}

/* ---- Services dropdown submenu — glassmorphism panel, fade+slide,
   accent-glow hover, keyboard accessible via :focus-within ---- */
.nav-links li{position:relative;}
.nav-links li.menu-item-has-children > a{display:flex;align-items:center;gap:6px;}
.nav-links li.menu-item-has-children > a::before{
  content:'';width:6px;height:6px;border-inline-end:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease);order:2;
}
.nav-links li.menu-item-has-children:hover > a::before,
.nav-links li.menu-item-has-children:focus-within > a::before{transform:rotate(225deg) translateY(2px);}

.nav-links .sub-menu{
  list-style:none;position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
  min-width:260px;padding:16px 10px 10px;border-radius:16px;
  background:color-mix(in srgb, var(--surface) 78%, transparent);backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);border:1px solid var(--glass-border);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.55);
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease);z-index:50;
}
[dir="rtl"] .nav-links .sub-menu{left:auto;}
.nav-links li.menu-item-has-children:hover > .sub-menu,
.nav-links li.menu-item-has-children:focus-within > .sub-menu{
  opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.nav-links .sub-menu::before{
  content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:12px;height:12px;background:inherit;border-inline-start:1px solid var(--glass-border);border-top:1px solid var(--glass-border);
  border-radius:3px 0 0 0;
}
.nav-links .sub-menu li{width:100%;}
.nav-links .sub-menu a{
  display:block;padding:12px 16px;border-radius:10px;font-size:12px;letter-spacing:.04em;
  text-transform:none;color:var(--body-c);transition:background .25s,color .25s,box-shadow .25s;white-space:nowrap;
}
.nav-links .sub-menu a::after{display:none;}
.nav-links .sub-menu a:hover{
  background:color-mix(in srgb, var(--accent) 12%, transparent);color:var(--heading);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),0 0 18px -4px var(--accent);
}
.nav-right{display:flex;align-items:center;gap:14px;}
.icon-btn,.lang-switch,.theme-toggle{width:40px;height:40px;border-radius:50%;border:1px solid var(--glass-border);display:flex;align-items:center;justify-content:center;color:var(--body-c);transition:border-color .3s,color .3s;position:relative;}
.icon-btn:hover,.theme-toggle:hover{border-color:var(--accent);color:var(--accent);}
.icon-btn svg,.theme-toggle svg{width:17px;height:17px;}
.cart-count{position:absolute;top:-3px;right:-3px;background:var(--accent);color:#0A0806;font-size:9px;font-weight:700;width:15px;height:15px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.lang-switch{width:auto;padding:0 14px;border-radius:20px;font-size:11px;letter-spacing:.08em;font-weight:600;gap:6px;}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;border-radius:var(--radius);position:relative;overflow:hidden;isolation:isolate;}
.btn-primary{background:var(--accent);color:#0A0806;}
.btn-ghost{border:1px solid var(--glass-border);color:var(--heading);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);}
.magnetic{transition:transform .25s var(--ease);}
.nav-cta{display:none;}
@media(min-width:1100px){.nav-cta{display:inline-flex;}}
.nav-burger{display:none;width:40px;height:40px;border:1px solid var(--glass-border);border-radius:50%;align-items:center;justify-content:center;}
@media(max-width:1100px){.nav-burger{display:flex;}}

/* ripple */
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.5);transform:scale(0);animation:ripple-anim .6s ease-out;pointer-events:none;}
html[data-theme="light"] .ripple{background:rgba(0,0,0,.15);}
@keyframes ripple-anim{to{transform:scale(3);opacity:0;}}

/* ---- Hero ---- */
.hero{min-height:100vh;position:relative;display:flex;align-items:center;padding-top:110px;overflow:hidden;}
.mesh-bg{position:absolute;inset:0;z-index:0;}
.mesh-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.35;}
.mb1{width:640px;height:640px;background:var(--accent);top:-200px;left:-150px;animation:meshmove1 22s ease-in-out infinite;}
.mb2{width:480px;height:480px;background:var(--accent-2);bottom:-180px;right:-100px;animation:meshmove2 26s ease-in-out infinite;}
.mb3{width:360px;height:360px;background:var(--accent);top:40%;left:55%;opacity:.18;animation:meshmove1 18s ease-in-out infinite reverse;}
@keyframes meshmove1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(60px,40px) scale(1.15);}}
@keyframes meshmove2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-50px,-30px) scale(1.1);}}
#particles{display:none;} /* replaced by .steam-fog — see below */
.steam-fog{position:absolute;left:52%;bottom:58%;width:110px;height:190px;transform:translateX(-50%);pointer-events:none;z-index:3;}
.steam-wisp{
  position:absolute;bottom:0;left:50%;width:24px;height:64px;border-radius:50%;
  background:radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 55%, transparent) 0%, color-mix(in srgb, var(--accent) 20%, transparent) 55%, transparent 78%);
  filter:blur(6px);opacity:0;animation:steamRise 5s ease-in-out infinite;
}
.steam-wisp:nth-child(1){left:38%;width:20px;animation-delay:0s;}
.steam-wisp:nth-child(2){left:52%;width:28px;animation-delay:1.3s;}
.steam-wisp:nth-child(3){left:66%;width:18px;animation-delay:2.6s;}
.steam-wisp:nth-child(4){left:46%;width:24px;animation-delay:3.7s;}
@keyframes steamRise{
  0%{opacity:0;transform:translate(-50%,0) scale(.6);filter:blur(5px);}
  18%{opacity:.75;}
  55%{transform:translate(calc(-50% + 10px),-80px) scale(1.2);opacity:.5;filter:blur(8px);}
  100%{opacity:0;transform:translate(calc(-50% - 8px),-170px) scale(1.7);filter:blur(12px);}
}
.hero-inner{position:relative;z-index:2;width:100%;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;}
@media(max-width:980px){.hero-inner{grid-template-columns:1fr;text-align:center;}}
.hero-copy h1{font-size:clamp(42px,6vw,84px);line-height:1.02;color:var(--heading);font-weight:500;}
.hero-copy .rotator-wrap{color:var(--accent);position:relative;min-height:1.15em;}
.hero-copy p.lead{margin-top:30px;font-size:17px;max-width:480px;color:var(--body-c);}
@media(max-width:980px){.hero-copy p.lead{margin-inline:auto;}}
.hero-actions{margin-top:46px;display:flex;flex-wrap:wrap;gap:16px;}
@media(max-width:980px){.hero-actions{justify-content:center;}}
.btn-text{padding:15px 4px;color:var(--body-c);text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--line-strong);}
.btn-text:hover{color:var(--heading);}

/* Illustrated glowing cup (replaces old machine SVG + replaces photography) */
.cup-stage{position:relative;height:560px;display:flex;align-items:center;justify-content:center;perspective:1000px;}
@media(max-width:980px){.cup-stage{height:380px;margin-top:10px;}}
.cup-glow{position:absolute;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,var(--accent-soft),transparent 70%);filter:blur(6px);}
.cup-svg{position:relative;z-index:2;width:260px;}
.bean-float{position:absolute;width:34px;height:34px;color:var(--accent);opacity:.85;}
.glass-chip{position:absolute;padding:10px 16px;border-radius:30px;background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(10px);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--body-c);display:flex;align-items:center;gap:8px;}
.glass-chip svg{width:14px;height:14px;color:var(--accent);}

/* ---- Marquee ---- */
.marquee-wrap{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px 0;overflow:hidden;}
.marquee-track{display:flex;gap:60px;width:max-content;animation:scroll-x 40s linear infinite;}
[dir="rtl"] .marquee-track{animation-direction:reverse;}
@keyframes scroll-x{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.marquee-track span{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--body-dim);font-weight:600;white-space:nowrap;}

/* ---- Bento services ---- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;}
@media(max-width:900px){.bento{grid-template-columns:repeat(2,1fr);}}
.bento-card{
  grid-column:span 2;border:1px solid var(--line);border-radius:16px;padding:38px 30px;position:relative;overflow:hidden;
  background:var(--surface);transition:transform .4s var(--ease),border-color .4s;transform-style:preserve-3d;
}
.bento-card.wide{grid-column:span 3;}
@media(max-width:900px){.bento-card,.bento-card.wide{grid-column:span 2;}}
.bento-card::before{
  content:'';position:absolute;inset:0;border-radius:16px;padding:1px;
  background:linear-gradient(135deg,var(--accent),transparent 40%,transparent 60%,var(--accent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s;
}
.bento-card:hover::before{opacity:1;}
.bento-card:hover{border-color:transparent;}
.bento-icon{width:44px;height:44px;color:var(--accent);margin-bottom:22px;}
.bento-card h3{font-size:21px;margin-bottom:10px;}
.bento-card p{font-size:13.5px;color:var(--body-dim);}

/* ---- Counters ---- */
.counter-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;}
@media(max-width:700px){.counter-grid{grid-template-columns:repeat(2,1fr);}}
.counter-cell{background:var(--surface);padding:44px 30px;text-align:center;}
.counter-num{font-family:var(--font-display);font-size:52px;color:var(--heading);}
.counter-num span{color:var(--accent);}
.counter-label{margin-top:10px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--body-dim);}

/* ---- Brand cards ---- */
.brand-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
@media(max-width:900px){.brand-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:560px){.brand-grid{grid-template-columns:repeat(2,1fr);}}
/* 4-item variant (secondary brands row below the 2 featured cards) — a
   class with its own breakpoints, not an inline style, so mobile still
   collapses correctly. An inline style here would beat any media query
   in this stylesheet regardless of viewport width — the same mistake
   already found and fixed twice elsewhere in this project (cart/checkout
   split-block, and the old design's dashboard layout). */
.brand-grid.brand-grid-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:700px){.brand-grid.brand-grid-4{grid-template-columns:repeat(2,1fr);}}
.brand-cell{border:1px solid var(--line);border-radius:12px;padding:30px 16px;text-align:center;background:var(--surface);transition:transform .35s var(--ease),border-color .35s;}
.brand-cell:hover{transform:translateY(-6px);border-color:var(--accent);}
.brand-cell span{font-family:var(--font-display);font-size:16px;color:var(--heading);}

/* ---- Feature cards (Why CupTIME) ---- */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media(max-width:900px){.feature-grid{grid-template-columns:1fr;}}
.feature-card{border:1px solid var(--line);border-radius:16px;padding:44px 34px;background:linear-gradient(160deg,var(--glass),transparent);}
.feature-num{font-family:var(--font-display);font-size:14px;color:var(--accent);}
.feature-card h3{font-size:22px;margin:20px 0 12px;}
.feature-card p{font-size:14px;color:var(--body-dim);}

/* ---- FAQ ---- */
.faq-list{max-width:none;display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px;align-items:start;}
@media(max-width:760px){.faq-list{grid-template-columns:1fr;}}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;padding:26px 0;font-family:var(--font-display);font-size:19px;color:var(--heading);text-align:start;gap:20px;}
.faq-q .plus{font-size:22px;color:var(--accent);transition:transform .35s var(--ease);flex:none;}
.faq-item.open .faq-q .plus{transform:rotate(135deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease);}
.faq-a p{padding-bottom:26px;font-size:14.5px;color:var(--body-dim);max-width:680px;}

/* ---- CTA ---- */
.cta-band{position:relative;border-radius:20px;overflow:hidden;padding:90px 60px;text-align:center;border:1px solid var(--line);background:var(--surface);}
.cta-glow-border{position:absolute;inset:0;border-radius:20px;padding:1.5px;background:conic-gradient(from var(--angle,0deg),var(--accent),transparent 30%,transparent 70%,var(--accent));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:rotate-border 6s linear infinite;}
@keyframes rotate-border{to{--angle:360deg;}}
@property --angle{syntax:'<angle>';inherits:false;initial-value:0deg;}
.cta-band h2{font-size:clamp(30px,4vw,46px);max-width:680px;margin:20px auto 32px;position:relative;z-index:2;}
.cta-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;position:relative;z-index:2;}

/* ---- Footer ---- */
footer{background:var(--bg-alt);border-top:1px solid var(--line);padding:90px 0 30px;}
.footer-top{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:40px;padding-bottom:70px;}
@media(max-width:980px){.footer-top{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.footer-top{grid-template-columns:1fr;}}
.footer-brand p{font-size:13.5px;color:var(--body-dim);max-width:280px;margin:18px 0 24px;}
.social-row{display:flex;gap:12px;}
.social-row a{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--body-c);transition:border-color .3s,color .3s;}
.social-row a:hover{border-color:var(--accent);color:var(--accent);}
.social-row svg{width:16px;height:16px;}
.foot-col h5{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--heading);margin-bottom:22px;}
.foot-col a{display:block;font-size:13.5px;color:var(--body-dim);margin-bottom:13px;transition:color .3s;}
.foot-col a:hover{color:var(--accent);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:26px;border-top:1px solid var(--line);flex-wrap:wrap;gap:14px;}
.footer-bottom p{font-size:12.5px;color:var(--body-dim);}
.footer-legal{display:flex;gap:24px;}
.footer-legal a{font-size:12.5px;color:var(--body-dim);}

.wa-float{position:fixed;bottom:28px;inset-inline-end:28px;z-index:190;width:56px;height:56px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;color:#0A0806;box-shadow:0 10px 30px -6px rgba(181,160,146,.5);}

/* mobile drawer */
.nav-scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .35s;z-index:250;}
.nav-scrim.open{opacity:1;pointer-events:auto;}
.nav-drawer{position:fixed;top:0;inset-inline-end:0;bottom:0;width:min(340px,84vw);background:var(--surface);border-inline-start:1px solid var(--line);z-index:251;padding:100px 34px 34px;transform:translateX(100%);transition:transform .45s var(--ease);display:flex;flex-direction:column;gap:26px;}
[dir="rtl"] .nav-drawer{transform:translateX(-100%);}
.nav-drawer.open{transform:translateX(0);}
.nav-drawer a{font-family:var(--font-display);font-size:22px;color:var(--heading);}

/* Mobile drawer Services accordion — native <details>/<summary>, no JS
   required, so it always works even if theme.js fails to load. */
.drawer-services{border-top:1px solid var(--line);padding-top:22px;margin-top:-4px;}
.drawer-services summary{
  font-family:var(--font-display);font-size:22px;color:var(--heading);cursor:pointer;
  list-style:none;display:flex;align-items:center;justify-content:space-between;
}
.drawer-services summary::-webkit-details-marker{display:none;}
.drawer-services summary::after{
  content:'';width:8px;height:8px;border-inline-end:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);transition:transform .3s var(--ease);margin-inline-end:4px;
}
.drawer-services[open] summary::after{transform:rotate(225deg);}
.drawer-services-list{display:flex;flex-direction:column;gap:16px;padding:18px 0 4px 4px;}
.drawer-services-list a{font-family:var(--font-body);font-size:14.5px;color:var(--body-c);text-transform:none;}
.drawer-services-list a:hover{color:var(--accent);}

/* reveal — visible by default (correct, accessible fallback); JS below
   only ever hides-then-animates-in when GSAP has actually loaded, so a
   blocked/failed CDN script can never leave the page permanently blank.
   This replaced an earlier version that defaulted these to opacity:0 in
   CSS, which was a real bug: found via QA when the sandbox here had no
   internet and GSAP failed to load — the entire homepage rendered blank. */
.reveal{opacity:1;transform:none;}
.rotator-wrap{transition:opacity .4s var(--ease),transform .4s var(--ease);}
/* ================= INNER PAGE HERO (rollout to non-homepage pages) ================= */
.page-hero{min-height:56vh;position:relative;display:flex;align-items:center;padding:150px 0 70px;overflow:hidden;}
.page-hero .mesh-bg{position:absolute;inset:0;z-index:0;}
.page-hero .breadcrumb{display:flex;gap:8px;align-items:center;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--body-dim);margin-bottom:22px;position:relative;z-index:2;}
.page-hero .breadcrumb a{color:var(--body-dim);}
.page-hero .breadcrumb a:hover{color:var(--accent);}
.page-hero .breadcrumb span{color:var(--glass-border);}
.page-hero h1{position:relative;z-index:2;font-size:clamp(34px,4.6vw,58px);font-weight:500;line-height:1.08;max-width:760px;color:var(--heading);}
.page-hero .lead{position:relative;z-index:2;margin-top:20px;font-size:16px;max-width:620px;color:var(--body-c);}
.page-hero-actions{position:relative;z-index:2;margin-top:30px;display:flex;gap:14px;flex-wrap:wrap;}

/* Two-column content block (image-free — icon/illustration side instead) */
.split-block{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
@media(max-width:900px){.split-block{grid-template-columns:1fr;gap:34px;}}
.split-block.reverse{direction:rtl;}
.split-block.reverse>*{direction:inherit;}
[dir="rtl"] .split-block.reverse{direction:ltr;}
.split-visual{position:relative;aspect-ratio:1/1;border-radius:var(--radius);border:1px solid var(--glass-border);background:var(--glass);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.split-visual svg{width:46%;color:var(--accent);}
.split-visual .mesh-blob{opacity:.25;}

.section-head{max-width:640px;margin-bottom:56px;}
.section-head h2{font-size:clamp(28px,3.4vw,42px);margin-top:16px;line-height:1.15;color:var(--heading);font-weight:500;}
.section-head p{margin-top:16px;font-size:15px;color:var(--body-dim);max-width:560px;}

/* ================= MOBILE NAV FIX ================= */
/* Real bug found via bounding-box inspection (not caught by document-level
   overflow checks, since .nav is position:fixed and fixed elements don't
   contribute to document.scrollWidth): on narrow viewports, lang-switch +
   account + cart + theme-toggle + burger (5 controls) didn't fit next to
   the logo, pushing the hamburger button off-screen and making the mobile
   nav menu unreachable. Account/cart are already duplicated as real links
   inside .nav-drawer, so hiding the icon versions on mobile loses no
   functionality — just decluttering, not removing pages people can reach. */
@media(max-width:480px){
  .nav-right .icon-btn{display:none;}
  .nav-right{gap:8px;}
  .lang-switch{padding:0 10px;font-size:10px;}
}

/* ================= PRODUCT GRID (Shop) ================= */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media(max-width:900px){.product-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.product-grid{grid-template-columns:1fr;}}
.product-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface);transition:transform .4s var(--ease),border-color .4s;}
.product-card:hover{transform:translateY(-6px);border-color:var(--glass-border);}
.product-visual{aspect-ratio:1/1;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 30%,color-mix(in srgb, var(--accent) 14%, transparent),transparent 70%),var(--bg-alt);}
.product-visual svg{width:44%;color:var(--accent);opacity:.9;}
.product-badge{position:absolute;top:14px;inset-inline-start:14px;background:var(--accent);color:#0A0806;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:20px;font-weight:600;}
.product-body{padding:24px;}
.product-cat{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);}
.product-body h3{font-family:var(--font-display);font-size:18px;margin:10px 0 12px;color:var(--heading);font-weight:500;}
.product-price{font-family:var(--font-display);font-size:20px;color:var(--heading);}
.product-price .was{font-family:var(--font-body);font-size:13px;color:var(--body-dim);text-decoration:line-through;margin-inline-start:8px;}
.product-actions{margin-top:16px;display:flex;gap:10px;}
.product-actions .btn{flex:1;justify-content:center;padding:12px 14px;font-size:10.5px;}

.shop-layout{display:grid;grid-template-columns:250px 1fr;gap:44px;align-items:start;}
@media(max-width:900px){.shop-layout{grid-template-columns:1fr;}}
.shop-filters{border:1px solid var(--line);border-radius:16px;padding:26px;background:var(--surface);}
.filter-group{margin-bottom:26px;}
.filter-group:last-child{margin-bottom:0;}
.filter-group h5{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--heading);margin-bottom:14px;}
.filter-group label{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--body-c);margin-bottom:10px;cursor:pointer;}
.filter-group input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px;}
.shop-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-bottom:30px;border-bottom:1px solid var(--line);margin-bottom:36px;}
.shop-count{font-size:13px;color:var(--body-dim);}
.shop-sort select{background:var(--surface);border:1px solid var(--line);color:var(--heading);padding:9px 14px;border-radius:var(--radius);font-family:var(--font-body);font-size:12px;}

/* ================= FORM FIELDS (Contact) ================= */
.form-card{border:1px solid var(--line);border-radius:16px;padding:44px;background:var(--surface);}
@media(max-width:640px){.form-card{padding:28px;}}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media(max-width:640px){.form-grid{grid-template-columns:1fr;}}
.field{display:flex;flex-direction:column;gap:8px;}
.field.full{grid-column:1/-1;}
.field label{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--body-dim);}
.field input,.field select,.field textarea{
  background:var(--bg-alt);border:1px solid var(--line);color:var(--heading);
  padding:14px 16px;border-radius:var(--radius);font-family:var(--font-body);font-size:14px;
  transition:border-color .3s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);}
.field textarea{resize:vertical;min-height:130px;}
.contact-info-card{border:1px solid var(--line);border-radius:16px;padding:34px;background:var(--surface);margin-bottom:1px;}
.contact-info-card h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;}
.contact-info-card .branch-name{font-family:var(--font-display);font-size:20px;color:var(--heading);margin-bottom:14px;}
.contact-line{font-size:13.5px;color:var(--body-c);margin-bottom:6px;}
.contact-line b{color:var(--heading);font-weight:500;}
.map-embed{margin-top:18px;border-radius:12px;overflow:hidden;border:1px solid var(--line);filter:grayscale(1) invert(1) contrast(0.9);}
html[data-theme="light"] .map-embed{filter:grayscale(.3) contrast(.95);}
.map-embed iframe{width:100%;height:190px;border:0;display:block;}

/* ================= SINGLE PRODUCT ================= */
.pd-layout{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;}
@media(max-width:900px){.pd-layout{grid-template-columns:1fr;gap:34px;}}
.pd-gallery-main{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface);aspect-ratio:1/1;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 30%,color-mix(in srgb, var(--accent) 14%, transparent),transparent 70%),var(--bg-alt);}
.pd-gallery-main svg{width:42%;color:var(--accent);}
.pd-info .product-cat{font-size:11px;}
.pd-info h1{font-size:clamp(26px,3.4vw,38px);margin:12px 0 16px;line-height:1.15;font-weight:500;color:var(--heading);}
.pd-price{font-family:var(--font-display);font-size:32px;color:var(--heading);margin-bottom:20px;}
.pd-stock{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:#8fd19e;margin-bottom:26px;}
.pd-stock .dot{width:7px;height:7px;border-radius:50%;background:#8fd19e;}
.pd-option{margin-bottom:22px;}
.pd-option label{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--heading);display:block;margin-bottom:10px;}
.swatches{display:flex;gap:10px;}
.swatch{width:32px;height:32px;border-radius:50%;border:2px solid var(--line);cursor:pointer;}
.swatch.active{border-color:var(--accent);}
.qty-stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius);}
.qty-stepper button{width:38px;height:44px;font-size:16px;color:var(--heading);}
.qty-stepper input{width:44px;text-align:center;background:none;border:none;color:var(--heading);font-family:var(--font-body);font-size:14px;}
.pd-buy-row{display:flex;gap:12px;margin:26px 0;flex-wrap:wrap;align-items:center;}
.pd-buy-row .btn-primary{flex:1;justify-content:center;min-width:180px;}
.trust-badges{display:flex;gap:20px;flex-wrap:wrap;margin-top:24px;padding-top:24px;border-top:1px solid var(--line);}
.trust-badges .tb{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--body-dim);}
.trust-badges svg{width:18px;height:18px;color:var(--accent);}

.tabs-nav{display:flex;gap:6px;border-bottom:1px solid var(--line);margin:70px 0 34px;flex-wrap:wrap;}
.tab-btn{padding:14px 20px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--body-dim);border-bottom:2px solid transparent;margin-bottom:-1px;}
.tab-btn.active{color:var(--heading);border-color:var(--accent);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}
.tab-panel h3{font-size:19px;margin:24px 0 12px;color:var(--heading);font-weight:600;}
.tab-panel p{font-size:14px;color:var(--body-dim);margin-bottom:16px;max-width:760px;}
.tab-panel ul{margin:0 0 20px;padding:0;}
.tab-panel ul li{list-style:none;font-size:13.5px;color:var(--body-c);padding:9px 0;border-bottom:1px solid var(--line);display:flex;gap:10px;}
.tab-panel ul li svg{width:15px;height:15px;color:var(--accent);flex:none;margin-top:3px;}
.spec-table{width:100%;border-collapse:collapse;font-size:13px;}
.spec-table tr{border-bottom:1px solid var(--line);}
.spec-table td{padding:13px 10px;color:var(--body-c);}
.spec-table td:first-child{color:var(--body-dim);width:220px;}

/* ================= CART / CHECKOUT ================= */
.cart-table{width:100%;border-collapse:collapse;}
.cart-table th{text-align:start;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--body-dim);padding:0 12px 16px;border-bottom:1px solid var(--glass-border);}
.cart-table td{padding:22px 12px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--body-c);font-size:13.5px;}
.cart-item{display:flex;align-items:center;gap:16px;}
.cart-item-icon{width:60px;height:60px;border-radius:12px;border:1px solid var(--line);background:var(--bg-alt);display:flex;align-items:center;justify-content:center;flex:none;}
.cart-item-icon svg{width:26px;height:26px;color:var(--accent);}
.cart-item .name{font-size:14px;color:var(--heading);}
.cart-item .meta{font-size:11.5px;color:var(--body-dim);margin-top:4px;}
.cart-remove{color:var(--body-dim);font-size:12px;text-decoration:underline;}
.order-summary{border:1px solid var(--line);border-radius:16px;padding:30px;background:var(--surface);}
.summary-row{display:flex;justify-content:space-between;font-size:13px;color:var(--body-c);padding:12px 0;border-bottom:1px solid var(--line);}
.summary-row.total{border-bottom:none;font-family:var(--font-display);font-size:19px;color:var(--heading);padding-top:18px;}
.coupon-row{display:flex;gap:10px;margin:20px 0;}
.checkout-steps{display:flex;gap:0;margin-bottom:50px;}
.checkout-steps .cs{flex:1;text-align:center;padding-bottom:16px;border-bottom:2px solid var(--line);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--body-dim);}
.checkout-steps .cs.active{color:var(--accent);border-color:var(--accent);}

/* ================= ACCOUNT DASHBOARD ================= */
.dash-layout{display:grid;grid-template-columns:250px 1fr;gap:40px;align-items:flex-start;}
@media(max-width:860px){.dash-layout{grid-template-columns:1fr;}}
.dash-nav{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface);}
.dash-nav a{display:flex;align-items:center;gap:12px;padding:16px 20px;font-size:13px;color:var(--body-c);border-bottom:1px solid var(--line);}
.dash-nav a:last-child{border-bottom:none;}
.dash-nav a.active{color:var(--accent);background:var(--bg-alt);}
.dash-nav svg{width:17px;height:17px;flex:none;}
.dash-widgets{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:40px;}
@media(max-width:700px){.dash-widgets{grid-template-columns:1fr;}}
.dash-widget{border:1px solid var(--line);border-radius:16px;padding:24px;background:var(--surface);}
.dash-widget b{display:block;font-family:var(--font-display);font-size:28px;color:var(--heading);}
.dash-widget span{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--body-dim);}
.data-table{width:100%;border-collapse:collapse;}
.data-table th{text-align:start;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--body-dim);padding:14px 12px;border-bottom:1px solid var(--glass-border);}
.data-table td{padding:16px 12px;font-size:13px;color:var(--body-c);border-bottom:1px solid var(--line);}
.status-pill{display:inline-block;padding:5px 12px;border-radius:20px;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;}
.status-pill.done{background:rgba(143,209,158,.15);color:#8fd19e;}
.status-pill.pending{background:color-mix(in srgb, var(--accent) 18%, transparent);color:var(--accent);}

/* ================= SPLIT-BLOCK WIDTH VARIANTS ================= */
/* Using classes (not inline style overrides) so the mobile breakpoint in
   .split-block's own media query still applies — an inline style would
   beat it regardless of viewport, which caused a real overflow bug in the
   Phase 1-6 static site (cart/checkout at 340px sidebar on a 390px phone). */
.split-block.split-320{grid-template-columns:1fr 320px;}
.split-block.split-340{grid-template-columns:1fr 340px;}
@media(max-width:900px){
  .split-block.split-320,.split-block.split-340{grid-template-columns:1fr;}
}

/* ================= GRID OVERFLOW FIX (carried over from the earlier
   static-site QA pass — same root cause, different design system) ================= */
/* CSS Grid children default to min-width:auto, so a wide table (like the
   orders table on the account dashboard) can force its grid track — and
   the whole page — wider than the viewport on mobile, even though the
   table itself has its own overflow-x:auto wrapper. */
.dash-layout > *,.split-block > *,.pd-layout > *,.shop-layout > *{min-width:0;}

/* ================= FEATURED BRANDS (Bezzera / Rhea Vendors highlighted
   above the rest, per client request) ================= */
.brand-featured-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;}
@media(max-width:700px){.brand-featured-grid{grid-template-columns:1fr;}}
.brand-featured-card{
  position:relative;overflow:hidden;border:1px solid var(--glass-border);border-radius:16px;
  padding:44px 36px;background:linear-gradient(160deg,var(--glass),transparent 70%),var(--surface);
}
.brand-featured-card .mesh-blob{opacity:.2;}
.brand-featured-tag{
  position:relative;z-index:2;display:inline-block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--glass-border);padding:6px 14px;border-radius:20px;margin-bottom:20px;
}
.brand-featured-card h3{position:relative;z-index:2;font-family:var(--font-display);font-size:30px;font-weight:500;color:var(--heading);margin-bottom:12px;}
.brand-featured-card p{position:relative;z-index:2;font-size:14px;color:var(--body-dim);max-width:360px;}

/* ================= SINGLE PRODUCT — STORY SECTIONS (mirrors the
   reference layout: sequential Overview/Features/Included/Process/FAQ/
   Testimonials sections, not tab-switching) ================= */
.pd-story-section{padding:60px 0;border-top:1px solid var(--line);}
.pd-story-section:first-of-type{border-top:none;}
.pd-story-head{margin-bottom:34px;}
.pd-story-head .eyebrow{margin-bottom:14px;}
.pd-story-head h2{font-family:var(--font-display);font-size:clamp(24px,3vw,32px);font-weight:500;color:var(--heading);}
.pd-check-list{display:flex;flex-direction:column;gap:14px;max-width:640px;}
.pd-check-list li{display:flex;gap:12px;font-size:14.5px;color:var(--body-c);list-style:none;}
.pd-check-list svg{width:18px;height:18px;color:var(--accent);flex:none;margin-top:2px;}

.process-steps{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;}
@media(max-width:600px){.process-steps{grid-template-columns:1fr;}}
/* 5-column variant (About page's payment-models row) as a class with its
   own breakpoints — an inline style here would beat any media query
   regardless of viewport, the same mistake already found and fixed
   several times elsewhere in this project. Confirmed broken on mobile
   (5 columns squeezed into ~70px each, last card clipped) before fixing. */
.process-steps.process-steps-5{grid-template-columns:repeat(5,1fr);}
@media(max-width:900px){.process-steps.process-steps-5{grid-template-columns:repeat(3,1fr);}}
@media(max-width:600px){.process-steps.process-steps-5{grid-template-columns:1fr;}}
.process-step{background:var(--surface);padding:30px 26px;}
.process-step .num{font-family:var(--font-display);font-size:13px;color:var(--accent);letter-spacing:.08em;}
.process-step h4{font-family:var(--font-display);font-size:18px;color:var(--heading);margin:16px 0 8px;font-weight:600;}
.process-step p{font-size:13px;color:var(--body-dim);}

.testimonial-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
@media(max-width:700px){.testimonial-grid{grid-template-columns:1fr;}}
.testimonial-card{border:1px solid var(--line);border-radius:16px;padding:30px;background:var(--surface);}
.testimonial-card p{font-size:14px;color:var(--body-c);line-height:1.7;margin-bottom:20px;}
.testimonial-card p::before{content:'\201C';color:var(--accent);font-family:var(--font-display);font-size:28px;line-height:0;display:inline-block;margin-inline-end:2px;vertical-align:-6px;}
.testimonial-name{font-family:var(--font-display);font-size:15px;color:var(--heading);}
.testimonial-role{font-size:12px;color:var(--body-dim);margin-top:2px;}

.pd-precta-band{border:1px solid var(--glass-border);border-radius:16px;padding:40px;background:var(--glass);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;}
.pd-precta-band h3{font-family:var(--font-display);font-size:20px;color:var(--heading);font-weight:600;margin-bottom:8px;}
.pd-precta-band p{font-size:13.5px;color:var(--body-dim);max-width:420px;}

/* ================= ABOUT PAGE — TIMELINE COMPONENT (fresh composition,
   replacing the repeated split-block pattern) ================= */
.about-stat-row{display:flex;gap:50px;flex-wrap:wrap;margin-top:40px;position:relative;z-index:2;}
.about-stat-row .stat b{display:block;font-family:var(--font-display);font-size:36px;color:var(--heading);font-weight:700;}
.about-stat-row .stat span{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--body-dim);}

.manifesto{max-width:900px;margin:0 auto;text-align:center;}
.manifesto p{font-family:var(--font-display);font-size:clamp(24px,3.4vw,38px);line-height:1.5;color:var(--heading);font-weight:500;}
.manifesto p .accent-word{color:var(--accent);}

.timeline{position:relative;max-width:820px;margin:0 auto;}
.timeline::before{content:'';position:absolute;top:0;bottom:0;left:29px;width:1px;background:var(--line);}
[dir="rtl"] .timeline::before{left:auto;right:29px;}
.timeline-node{position:relative;padding-inline-start:76px;padding-bottom:56px;}
.timeline-node:last-child{padding-bottom:0;}
.timeline-node .tn-dot{
  position:absolute;inset-inline-start:18px;top:2px;width:24px;height:24px;border-radius:50%;
  background:var(--bg);border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;
}
.timeline-node .tn-dot::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--accent);}
.timeline-node .eyebrow{margin-bottom:12px;}
.timeline-node h3{font-family:var(--font-display);font-size:24px;color:var(--heading);font-weight:500;margin-bottom:12px;}
.timeline-node p{font-size:14.5px;color:var(--body-c);line-height:1.75;max-width:620px;}

/* ================= SEARCH OVERLAY ================= */
.search-overlay{position:fixed;inset:0;z-index:300;display:flex;align-items:flex-start;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease);}
.search-overlay.open{opacity:1;pointer-events:auto;}
.search-overlay-backdrop{position:absolute;inset:0;background:color-mix(in srgb, var(--bg) 75%, transparent);
  backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);}
.search-overlay-panel{
  position:relative;z-index:2;width:min(720px,92vw);margin-top:min(14vh,140px);
  transform:translateY(-16px);transition:transform .4s var(--ease);
}
.search-overlay.open .search-overlay-panel{transform:translateY(0);}
.search-overlay-form{
  display:flex;align-items:center;gap:16px;padding:22px 26px;border-radius:20px;
  background:color-mix(in srgb, var(--surface) 88%, transparent);border:1px solid var(--glass-border);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
}
.search-overlay-form svg{width:22px;height:22px;color:var(--accent);flex:none;}
.search-overlay-form input{
  flex:1;background:none;border:none;outline:none;color:var(--heading);
  font-family:var(--font-display);font-size:20px;
}
.search-overlay-form input::placeholder{color:var(--body-dim);}
.search-overlay-close{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--body-dim);flex:none;transition:color .3s,background .3s;}
.search-overlay-close:hover{color:var(--heading);background:var(--glass);}
.search-overlay-close svg{width:16px;height:16px;}
.search-overlay-quick{margin-top:20px;padding:0 8px;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;font-size:12.5px;color:var(--body-dim);}
.search-overlay-quick a{color:var(--body-c);border-bottom:1px solid transparent;transition:color .3s,border-color .3s;}
.search-overlay-quick a:hover{color:var(--accent);border-color:var(--accent);}

/* ================= SEARCH RESULTS PAGE ================= */
.search-results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media(max-width:900px){.search-results-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.search-results-grid{grid-template-columns:1fr;}}
.search-result-card{border:1px solid var(--line);border-radius:16px;padding:26px;background:var(--surface);transition:transform .35s var(--ease),border-color .35s;}
.search-result-card:hover{transform:translateY(-4px);border-color:var(--glass-border);}
.search-result-type{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);}
.search-result-card h3{font-family:var(--font-display);font-size:18px;color:var(--heading);margin:10px 0 8px;font-weight:500;}
.search-result-card p{font-size:13px;color:var(--body-dim);line-height:1.6;}
.search-empty{text-align:center;padding:60px 20px;}
.search-empty svg{width:56px;height:56px;color:var(--accent);margin:0 auto 20px;opacity:.6;}

/* ================= PRODUCTS MEGA-MENU (2-column, wider panel) ================= */
.mega-menu{
  list-style:none;position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
  width:min(560px,90vw);padding:34px 28px 28px;border-radius:20px;
  background:color-mix(in srgb, var(--surface) 80%, transparent);backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);border:1px solid var(--glass-border);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.55);
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease);z-index:50;
  display:grid;grid-template-columns:1fr 1fr;gap:8px 28px;
}
[dir="rtl"] .mega-menu{left:auto;}
.nav-links li.has-mega-menu:hover > .mega-menu,
.nav-links li.has-mega-menu:focus-within > .mega-menu{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);}
.mega-menu::before{
  content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:12px;height:12px;background:inherit;border-inline-start:1px solid var(--glass-border);border-top:1px solid var(--glass-border);
  border-radius:3px 0 0 0;
}
.mega-menu-group h4{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;padding:0 12px;}
.mega-menu-group{display:flex;flex-direction:column;}
.mega-menu-group a{
  display:block;padding:11px 12px;border-radius:10px;font-size:12.5px;letter-spacing:.02em;
  text-transform:none;color:var(--body-c);transition:background .25s,color .25s,box-shadow .25s;
}
.mega-menu-group a:hover{
  background:color-mix(in srgb, var(--accent) 12%, transparent);color:var(--heading);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),0 0 18px -4px var(--accent);
}
.mega-menu-viewall{grid-column:1/-1;margin-top:6px;padding-top:16px;border-top:1px solid var(--line);text-align:center;}
.mega-menu-viewall a{color:var(--accent);font-size:12px;letter-spacing:.08em;text-transform:uppercase;}
@media(max-width:900px){.mega-menu{grid-template-columns:1fr;width:min(320px,88vw);}}

/* Mobile drawer — Products accordion (reuses the same styling as Services) */
.drawer-services.drawer-mega .drawer-services-list{gap:6px;}
.drawer-services.drawer-mega .drawer-mega-group{margin-bottom:14px;}
.drawer-services.drawer-mega .drawer-mega-group h5{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;font-family:var(--font-body);}

/* ================= INFINITE SCROLL LOADING UI ================= */
.shop-load-sentinel{height:1px;}
.shop-loading-indicator{
  display:flex;align-items:center;justify-content:center;gap:14px;padding:50px 0;
  font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--body-dim);
}
.shop-spinner{
  width:22px;height:22px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);
  animation:shopSpin .8s linear infinite;
}
@keyframes shopSpin{to{transform:rotate(360deg);}}
.shop-end-message{text-align:center;padding:40px 0;font-size:13px;color:var(--body-dim);letter-spacing:.02em;}

/* Newly-appended product cards fade/rise in rather than popping in instantly */
ul.products li.product.shop-card-enter{opacity:0;transform:translateY(18px);}
ul.products li.product.shop-card-enter.shop-card-in{
  opacity:1;transform:translateY(0);transition:opacity .5s var(--ease),transform .5s var(--ease);
}

/* ================= FEATURES & BENEFITS — 2-COLUMN PREMIUM CARDS
   (replaces the single horizontal checklist per client request) ================= */
.fb-columns{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
@media(max-width:800px){.fb-columns{grid-template-columns:1fr;}}
.fb-column-head{display:flex;align-items:center;gap:12px;margin-bottom:20px;}
.fb-column-head svg{width:24px;height:24px;color:var(--accent);flex:none;}
.fb-column-head h3{font-family:var(--font-display);font-size:19px;color:var(--heading);font-weight:500;}
.fb-card-list{display:flex;flex-direction:column;gap:12px;}
.fb-card{
  display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border:1px solid var(--line);
  border-radius:14px;background:var(--surface);transition:transform .3s var(--ease),border-color .3s,background .3s;
}
.fb-card:hover{transform:translateX(6px);border-color:var(--glass-border);background:var(--bg-alt);}
[dir="rtl"] .fb-card:hover{transform:translateX(-6px);}
.fb-card .fb-icon{
  width:34px;height:34px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--accent) 14%, transparent);color:var(--accent);
}
.fb-card .fb-icon svg{width:17px;height:17px;}
.fb-card p{font-size:13.5px;color:var(--body-c);line-height:1.55;}
.fb-column.benefits .fb-icon{background:color-mix(in srgb, var(--accent-2) 16%, transparent);}

/* ================= HERO VIDEO/IMAGE SLIDER ================= */
.hero-slider{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--bg);}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--ease);}
.hero-slide.active{opacity:1;z-index:1;}
.hero-slide-video,.hero-slide-image{width:100%;height:100%;object-fit:cover;display:block;}
.hero-slide-overlay{
  position:absolute;inset:0;
  background:linear-gradient(100deg, color-mix(in srgb, var(--bg) 88%, transparent) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 45%, color-mix(in srgb, var(--bg) 30%, transparent) 100%);
}
html[data-theme="light"] .hero-slide-overlay{
  background:linear-gradient(100deg, color-mix(in srgb, var(--bg) 92%, transparent) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 45%, color-mix(in srgb, var(--bg) 45%, transparent) 100%);
}
/* Mobile: video slides default to showing their poster/fallback image
   instead (data saving + battery — a deliberate default, not a bug),
   unless the "play video on mobile too" Customizer option is checked for
   that slide, in which case the theme.js below removes this class. */
@media(max-width:760px){
  .hero-video-desktop-only{display:none;}
  .hero-image-mobile-only{display:block;}
}
@media(min-width:761px){
  .hero-image-mobile-only{display:none;}
}

/* ================= PRODUCT VIDEO (single product hero media) ================= */
.pd-video-wrap{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface);aspect-ratio:1/1;}
.pd-video{width:100%;height:100%;object-fit:cover;display:block;background:#000;}
.pd-video-toggle{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  padding:10px 16px;border-radius:30px;background:var(--surface);
  border:1px solid var(--glass-border);color:var(--heading);
  font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;transition:border-color .3s,transform .3s var(--ease);
}
/* When the toggle sits over the video itself (video is the featured media,
   button offers "View Photos"), it's pinned to the corner instead of
   flowing as a normal block button below. */
.pd-video-wrap .pd-video-toggle{
  position:absolute;bottom:16px;inset-inline-end:16px;z-index:3;margin-top:0;
  background:color-mix(in srgb, var(--bg) 75%, transparent);backdrop-filter:blur(10px);
}
.pd-video-toggle:hover{border-color:var(--accent);transform:translateY(-2px);}
.pd-video-toggle svg{width:16px;height:16px;color:var(--accent);}