: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;
  --card-radius:16px;
  --section-spacing:140px;
  --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);}
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 ---- */
/* max-width cap removed entirely per client request — the site now runs
   truly edge-to-edge at any screen width, with only the small --gutter
   side padding remaining, no longer 2200px. */
.wrap{width:100%;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:var(--section-spacing) 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;}}

/* ---- Cursor glow — real reference confirmed: dev.mhntips.com never
   replaces or hides the system cursor at all (no cursor:none anywhere,
   no custom pointer shape). What it actually does is add one large
   (420px), very soft, low-opacity radial-gradient "glow" that trails the
   mouse as pure ambient light — the native arrow cursor stays fully
   visible and unchanged the whole time, which is also why hovering a
   link/button already shows the normal pointer cursor for free, with no
   extra code needed for that part. My first attempt at this (a dot+ring
   cursor REPLACEMENT) solved a different visual problem than what the
   reference site actually does — this replaces that entirely, once the
   real implementation was available to read directly. Color uses
   CupTIME's own --accent-soft rather than the reference site's blue, to
   match this theme's own palette rather than copy their brand color. */
.cursor-glow{
  position:fixed;width:420px;height:420px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,var(--accent-soft),transparent 70%);
  transform:translate(-50%,-50%);transition:opacity .3s;left:-9999px;top:-9999px;
}
@media(max-width:900px){.cursor-glow{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,
.nav-links li.current-menu-item > a,.nav-links li.current_page_item > a,
.nav-links li.current-menu-parent > a,.nav-links li.current_page_parent > a{color:var(--heading);}
.nav-links a:hover::after,.nav-links a.active::after,
.nav-links li.current-menu-item > a::after,.nav-links li.current_page_item > a::after,
.nav-links li.current-menu-parent > a::after,.nav-links li.current_page_parent > 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:var(--card-radius);
  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;}
/* Client logo images (CupTIME Options -> Trusted By) — same dimmed/
   grayscale-then-brighten-on-hover treatment already used for brand
   logos elsewhere, so a marquee mixing logos and plain text names still
   feels visually consistent. */
.marquee-logo-wrap{display:flex;align-items:center;flex:none;}
.marquee-logo{max-height:28px;max-width:140px;width:auto;height:auto;object-fit:contain;filter:grayscale(1) brightness(1.6);opacity:.7;transition:filter .3s,opacity .3s;}
.marquee-logo-wrap:hover .marquee-logo{filter:none;opacity:1;}

/* ---- 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:var(--card-radius);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:var(--card-radius);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:var(--card-radius);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);}
/* Brand logo image — used in place of the text name/heading when a logo
   is uploaded (CupTIME Options -> Brands). Constrained explicitly since
   an uploaded logo could be any size/aspect ratio. */
.brand-cell .brand-logo-img{max-width:100%;max-height:44px;width:auto;height:auto;object-fit:contain;filter:grayscale(1) brightness(1.6);opacity:.85;transition:filter .3s,opacity .3s;}
.brand-cell:hover .brand-logo-img{filter:none;opacity:1;}

/* ---- 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:var(--card-radius);padding:44px 34px;background:linear-gradient(160deg,var(--glass),transparent);}
.feature-num{font-family:var(--font-display);font-size:14px;color:var(--accent);}
/* The "Who We Serve" section reuses .feature-num to hold an icon instead
   of "01"/"02" text — without an explicit size here, an unstyled inline
   SVG can render at the browser's oversized default (around 300x150px),
   not the small icon this class was actually designed for. */
.feature-num svg{width:28px;height:28px;display:block;}
.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;}
@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:var(--card-radius);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:var(--card-radius);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:var(--card-radius);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:var(--card-radius);padding:34px;background:var(--surface);margin-bottom:26px;transition:border-color .3s,transform .3s var(--ease);}
.contact-info-card:hover{border-color:var(--glass-border);transform:translateY(-3px);}
.contact-info-card-head{display:flex;align-items:center;gap:14px;margin-bottom:22px;}
.contact-info-card-head .cic-icon{
  width:44px;height:44px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--accent) 14%, transparent);color:var(--accent);
}
.contact-info-card-head .cic-icon svg{width:22px;height:22px;}
.contact-info-card-head h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:6px;}
.contact-info-card-head .branch-name{font-family:var(--font-display);font-size:20px;color:var(--heading);}
.contact-detail-row{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--line);}
.contact-detail-row:first-of-type{border-top:none;padding-top:0;}
.contact-detail-row .cdr-icon{width:19px;height:19px;color:var(--accent);flex:none;margin-top:2px;}
.contact-detail-row .cdr-label{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--body-dim);margin-bottom:3px;}
.contact-detail-row .cdr-value{font-size:14px;color:var(--body-c);}
.contact-detail-row a.cdr-value{color:var(--body-c);transition:color .3s;}
.contact-detail-row a.cdr-value:hover{color:var(--accent);}
.contact-detail-row.whatsapp-row .cdr-icon{color:#25D366;}

/* ================= SINGLE PRODUCT ================= */
/* Two real bugs found and fixed across two rounds of feedback on this
   layout, kept as one note since they're the same underlying issue:
   1) Capping the gallery's own max-width (580px) without also capping
      the grid COLUMN TRACK it sits in left the column itself as wide as
      the flexible fr-unit around it — the gallery box shrank but the
      track around it didn't, leaving dead space before the info column
      even started.
   2) After fixing (1), the SECOND column was still `1fr` (fills all
      remaining grid space) even though .pd-info's own content was
      capped at 640px — confirmed by measuring both boxes directly:
      .pd-layout itself rendered at 1970px wide on a 2000px viewport,
      while the actual .pd-info content inside stopped at 640px, leaving
      ~700px of invisible dead space WITHIN that track, which read as
      "content pinned left with a huge empty area on the right."
   Both column tracks are now bounded (minmax(0,580px) and
   minmax(0,640px)) to match their own content caps exactly, which is
   what makes the grid's total width genuinely bounded — only that
   makes justify-content:center actually center the block within the
   much wider .wrap, instead of leaving trailing dead space either
   beside or within the grid regardless of this property's value. */
.pd-layout{display:grid;grid-template-columns:minmax(0,580px) minmax(0,820px);gap:56px;align-items:start;justify-content:center;}
@media(max-width:1200px){.pd-layout{grid-template-columns:1fr;gap:34px;justify-content:stretch;}}
.pd-gallery-main{border:1px solid var(--line);border-radius:var(--card-radius);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-stock.pd-stock-out{color:#e59a95;}
.pd-stock.pd-stock-out .dot{background:#e59a95;}
.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:var(--card-radius);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:var(--card-radius);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:var(--card-radius);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:var(--card-radius);
  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 .brand-logo-img{position:relative;z-index:2;max-width:220px;max-height:70px;width:auto;height:auto;object-fit:contain;object-position:left center;display:block;margin-bottom:16px;}
.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:grid;grid-template-columns:repeat(2,1fr);gap:14px 40px;max-width:none;}
@media(max-width:700px){.pd-check-list{grid-template-columns:1fr;}}
.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:var(--card-radius);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:var(--card-radius);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;}
/* Rating stars + client image/footer row — the admin repeater added real
   rating and image fields, but no CSS existed for them at all yet, so
   they'd have rendered as unstyled raw SVGs and a plain <img> tag. */
.testimonial-rating{display:flex;gap:3px;margin-bottom:14px;}
.testimonial-rating svg{width:15px;height:15px;color:var(--accent);}
.testimonial-footer{display:flex;align-items:center;gap:12px;}
.testimonial-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--line);}
.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:var(--card-radius);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:var(--card-radius);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-video-embed{border:none;pointer-events:none;}
.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:var(--card-radius);overflow:hidden;background:var(--surface);aspect-ratio:1/1;}
.pd-video{width:100%;height:100%;object-fit:cover;display:block;background:#000;}
.pd-video.pd-video-embed{border:none;}
.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);}

/* ================= PAIRED 2-COLUMN STORY SECTIONS (What's Included +
   Process & Timeline side by side; FAQ + Testimonials side by side) —
   client-clarified layout: two DIFFERENT sections sit as two columns of
   ONE row, not each section individually reformatted into 2 columns
   (an earlier, incorrect reading of the same request). ================= */
.pd-two-col-section{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;}
@media(max-width:800px){.pd-two-col-section{grid-template-columns:1fr;gap:44px;}}

/* Single-column variants — used only inside .pd-two-col-section, where
   each side is already half-width, so the components' own internal
   multi-column CSS (added for a different, earlier request) needs to
   collapse back to one column here specifically. */
.pd-check-list.pd-check-list-single{grid-template-columns:1fr;}
.process-steps.process-steps-stacked{grid-template-columns:1fr;}
.faq-list.faq-list-single{grid-template-columns:1fr;}
.testimonial-grid.testimonial-grid-single{grid-template-columns:1fr;}
.fb-columns.fb-columns-stacked{grid-template-columns:1fr;gap:28px;}

/* ================= PRODUCT HERO VIDEO (full-width cinematic banner,
   same treatment as the homepage hero — client request to move a
   product's video out of the gallery and up here instead) ================= */
.pd-hero-video{min-height:80vh;align-items:flex-end;padding-bottom:40px;}
@media(max-width:700px){.pd-hero-video{min-height:60vh;}}
/* Real diagnosis, not a guess: in this full-width, short banner shape,
   object-fit:cover always crops the TOP/BOTTOM of the source video, never
   the sides, regardless of whether the video is landscape, portrait or
   square — verified by computing the actual scale/crop math for each
   case before touching this, since switching to object-fit:contain (my
   first instinct) would have made a portrait/square video render
   NARROWER with black bars, the opposite of "bigger horizontally". The
   real fix is a taller container, so less of the video's vertical extent
   needs to be cropped to fill it — closer to the homepage hero's own
   height, since this product hero was noticeably shorter than that. */
.pd-hero-video .breadcrumb{color:var(--body-c);}
.pd-hero-video .breadcrumb a{color:inherit;opacity:.85;}