/* site.css -- design system for the PUBLIC website only (app/widget.html).
   Loaded after the shared style.css (which the portal / admin / login pages
   also use) and before rtl.css. Everything here is either a :root token --
   safe, because only the public site loads this file -- or scoped under
   body.site, so the dashboards are never affected.

   Contents
     1. Tokens            5. Home page sections     9. Footer
     2. Base & a11y       6. Cards                 10. Forms & misc
     3. Buttons           7. Inner pages           11. Scroll reveal
     4. Header & nav      8. Shop & product        12. Responsive
   Layout uses logical properties (inline-start / inline-end) so Arabic
   (dir="rtl") mirrors without extra rules. */

/* ============================== 1. Tokens ============================== */
:root{
  --page-max:1240px;

  --bg:#FAF8F4;
  --bg-warm:#F5EFE4;
  --surface:#FFFFFF;
  --surface-2:#F3EFE8;
  --ink:#16161A;
  --ink-soft:#55555D;
  --ink-faint:#8B8B93;
  --line:#E8E3DA;
  --line-soft:#F0ECE5;

  --brand-dark:#16161A;
  --brand-dark-2:#222229;
  --maroon:#5A1A24;

  --accent:#C9962B;
  --accent-dark:#A0761A;
  --accent-ink:#16161A;
  --accent-soft:#F4E7CC;
  --accent-tint:#FBF5E9;

  --radius-sm:10px;
  --radius:14px;
  --radius-lg:20px;
  --radius-xl:28px;
  --radius-pill:999px;

  --shadow-xs:0 1px 2px rgba(22,22,26,.05);
  --shadow-sm:0 1px 2px rgba(22,22,26,.04), 0 4px 14px -6px rgba(22,22,26,.10);
  --shadow-md:0 2px 4px rgba(22,22,26,.04), 0 18px 40px -18px rgba(22,22,26,.22);
  --shadow-lg:0 4px 8px rgba(22,22,26,.04), 0 34px 70px -28px rgba(22,22,26,.34);
  --ring:0 0 0 3px rgba(201,150,43,.35);

  --ease:cubic-bezier(.22,1,.36,1);
  --section-y:clamp(64px, 8vw, 112px);
  --gutter:clamp(16px, 4vw, 32px);
  --header-h:72px;

  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
@media (min-width:1440px){ :root{ --page-max:1320px; } }
/* Fraunces has no Arabic, Cyrillic or Chinese glyphs: those languages use a sans for headings too */
:root:lang(ar){ --font-body:'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif; --font-display:var(--font-body); }
:root:lang(ru), :root:lang(zh){ --font-display:var(--font-body); }

/* ============================ 2. Base & a11y =========================== */
body.site{
  font-family:var(--font-body); background:var(--bg); color:var(--ink);
  font-size:15px; line-height:1.6; text-rendering:optimizeLegibility;
}
.site h1, .site h2, .site h3{ font-family:var(--font-display); letter-spacing:-.015em; }
.site h1, .site h2{ font-weight:600; }
.site h3{ font-weight:600; letter-spacing:-.01em; }
:root:lang(ar) .site h1, :root:lang(ar) .site h2, :root:lang(ar) .site h3,
:root:lang(ru) .site h1, :root:lang(ru) .site h2, :root:lang(zh) .site h1, :root:lang(zh) .site h2{ font-weight:700; letter-spacing:-.01em; }
.site ol{ list-style:none; margin:0; padding:0; }
.site img{ max-width:100%; }
.site a{ color:inherit; }
.site :focus-visible{ outline:none; box-shadow:var(--ring); border-radius:var(--radius-sm); }
.site .coll-card:focus-visible, .site .product-card:focus-visible, .site .cat-tile:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; box-shadow:none; }
.site main{ max-width:var(--page-max); padding:0 var(--gutter) 72px; }
.site main:focus{ outline:none; }

.skip-link{
  position:fixed; inset-inline-start:16px; top:-60px; z-index:100;
  padding:10px 16px; border-radius:var(--radius-pill);
  background:var(--ink); color:#fff; font-weight:600; font-size:14px; text-decoration:none;
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:12px; }

.site .eyebrow{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:12px;
  font-family:var(--font-body); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-dark);
}
.site .eyebrow::before{ content:""; width:22px; height:2px; border-radius:2px; background:var(--accent); }

/* ============================== 3. Buttons ============================= */
.site .btn{
  gap:9px; padding:12px 22px; border-radius:var(--radius-pill);
  font-size:14px; font-weight:600; letter-spacing:.005em; text-decoration:none;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s, color .2s, border-color .2s;
}
.site .btn .icon{ transition:transform .2s var(--ease); }
.site .btn:hover:not(:disabled) .icon[data-icon="arrowRight"]{ transform:translateX(3px); }
[dir="rtl"] .site .btn:hover:not(:disabled) .icon[data-icon="arrowRight"]{ transform:scaleX(-1) translateX(3px); }
.site .btn-primary{
  background:var(--accent); color:var(--accent-ink);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 10px 24px -12px rgba(160,118,26,.75);
}
.site .btn-primary:hover:not(:disabled){ background:#D4A43A; transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 16px 30px -14px rgba(160,118,26,.85); }
.site .btn-secondary{ background:var(--surface); color:var(--ink); border-color:var(--line); box-shadow:var(--shadow-xs); }
.site .btn-secondary:hover:not(:disabled){ background:var(--surface); border-color:var(--ink); transform:translateY(-1px); }
.site .btn-ghost{ color:var(--ink); }
.site .btn-ghost:hover:not(:disabled){ background:var(--surface-2); }
.site .btn-lg{ padding:15px 28px; font-size:15px; }
.site .btn-dark{ background:var(--ink); color:#fff; }
.site .btn-dark:hover:not(:disabled){ background:#000; transform:translateY(-1px); }

/* =========================== 4. Header & nav =========================== */
/* slim contact strip (scrolls away; the header below stays) */
.site .topbar-strip{ background:var(--brand-dark); color:rgba(255,255,255,.68); border:0; font-size:12.5px; }
.site .topbar-strip .strip-inner{ max-width:var(--page-max); padding:8px var(--gutter); }
.site .strip-contact{ gap:24px; }
.site .strip-contact a:hover{ color:var(--accent); }

.site .topbar{
  position:sticky; top:0; z-index:50;
  min-height:var(--header-h); padding:0 max(var(--gutter), calc((100vw - var(--page-max)) / 2 + var(--gutter)));
  gap:20px; background:transparent; box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  border-bottom:1px solid transparent;
  transition:border-color .25s, box-shadow .25s;
}
/* the glass background lives on a pseudo-element: backdrop-filter on the
   header itself would trap the fixed mobile drawer inside it */
.site .topbar::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(250,248,244,.84);
  -webkit-backdrop-filter:saturate(180%) blur(16px); backdrop-filter:saturate(180%) blur(16px);
}
.site.is-scrolled .topbar{ border-bottom-color:var(--line); box-shadow:0 10px 30px -22px rgba(22,22,26,.35); }

.site .brand{ color:var(--ink); padding:0; margin:0; gap:12px; flex-shrink:0; }
.site .brand-logo{ height:40px; border-radius:10px; box-shadow:var(--shadow-xs); }
.site .brand-name strong{ color:var(--ink); font-family:var(--font-body); font-weight:800; font-size:14.5px; letter-spacing:.16em; }
.site .brand-tagline{ color:var(--accent-dark); font-size:10px; letter-spacing:.2em; font-weight:700; margin-top:4px; }

.site .nav-tabs{ flex:1; justify-content:center; gap:2px; }
.site .nav-tab{
  padding:9px 14px; border-radius:var(--radius-pill);
  color:var(--ink-soft); font-size:14px; font-weight:600; gap:7px;
  transition:color .2s, background .2s;
}
.site .nav-tab::after{ display:none; }
.site .nav-tab:hover{ color:var(--ink); background:var(--surface-2); }
.site .nav-tab.is-active{ color:var(--ink); background:var(--accent-tint); box-shadow:inset 0 0 0 1px var(--accent-soft); }
.site .nav-tab-cta{
  margin-inline-start:10px; padding:10px 18px; flex-direction:row;
  background:var(--ink); color:#fff; box-shadow:0 10px 20px -12px rgba(22,22,26,.6);
}
.site .nav-tab-cta:hover, .site .nav-tab-cta.is-active{ background:#000; color:#fff; filter:none; box-shadow:0 12px 24px -12px rgba(22,22,26,.7); }
.site .nav-tab-cta .icon{ display:block !important; }
.site .nav-tab-cta:hover .icon{ transform:translateX(3px); }
[dir="rtl"] .site .nav-tab-cta:hover .icon{ transform:scaleX(-1) translateX(3px); }

/* "Company" drop-down */
.site .nav-dd{ position:relative; }
.site .nav-dd-toggle .icon[data-icon="chevronDown"]{ display:block !important; opacity:.6; transition:transform .25s var(--ease); }
.site .nav-dd.is-open .nav-dd-toggle .icon[data-icon="chevronDown"]{ transform:rotate(180deg); }
.site .nav-dd-menu{
  position:absolute; top:calc(100% + 12px); left:50%; z-index:60;
  width:330px; padding:8px; border-radius:var(--radius-lg);
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; transform:translate(-50%, 8px);
  transition:opacity .2s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
}
.site .nav-dd-menu::before{ content:""; position:absolute; left:0; right:0; top:-14px; height:14px; } /* hover bridge */
.site .nav-dd.is-open .nav-dd-menu{ opacity:1; visibility:visible; transform:translate(-50%, 0); transition-delay:0s; }
@media (hover:hover) and (min-width:1081px){
  .site .nav-dd:hover .nav-dd-menu{ opacity:1; visibility:visible; transform:translate(-50%, 0); transition-delay:0s; }
}
.site .nav-dd-item{
  display:flex; align-items:flex-start; gap:12px; width:100%; padding:11px 12px;
  border:0; background:none; border-radius:12px; cursor:pointer; text-align:start; font:inherit; color:var(--ink);
  transition:background .15s;
}
.site .nav-dd-item:hover, .site .nav-dd-item:focus-visible{ background:var(--accent-tint); box-shadow:none; }
.site .nav-dd-item.is-active{ background:var(--accent-tint); }
.site .nav-dd-ic{
  width:36px; height:36px; flex-shrink:0; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent-dark);
}
.site .nav-dd-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.site .nav-dd-text strong{ font-size:14px; font-weight:600; }
.site .nav-dd-text small{ font-size:12.5px; color:var(--ink-faint); line-height:1.4; }

.site .nav-drawer-head, .site .nav-drawer-foot{ display:none; }

/* language + sign in */
.site .topbar-actions{ gap:8px; flex-shrink:0; }
.site .site-lang{
  height:40px; padding:0 12px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:var(--surface); color:var(--ink); box-shadow:var(--shadow-xs);
}
.site .site-lang:hover{ border-color:var(--ink); color:var(--ink); }
.site .admin-login-link{
  height:40px; padding:0 16px 0 13px; color:var(--ink); border:1px solid var(--line);
  background:var(--surface); box-shadow:var(--shadow-xs); font-weight:600;
}
[dir="rtl"] .site .admin-login-link{ padding:0 13px 0 16px; }
.site .admin-login-link:hover{ border-color:var(--ink); color:var(--ink); background:var(--surface); }
.site .nav-toggle{ background:var(--surface); color:var(--ink); border:1px solid var(--line); width:42px; height:42px; border-radius:12px; }
.nav-backdrop{ display:none; }

/* ============================ 5. Home page ============================= */
.site .home-band{
  padding:var(--section-y) max(var(--gutter), calc((100vw - var(--page-max)) / 2 + var(--gutter)));
}
.site .home-band--plain{ background:var(--bg); }
.site .home-band--warm{ background:linear-gradient(180deg, var(--bg-warm), #FAF6EF); border:0; }
.site .home-band + .home-band--plain, .site .home-band--plain + .home-band--plain{ border-top:1px solid var(--line-soft); }

.site .home-section-head{ max-width:680px; margin:0 0 40px; }
.site .home-section-head h2{ font-size:clamp(30px, 3.8vw, 46px); line-height:1.1; margin:0; }
.site .home-section-head p{ font-size:16.5px; line-height:1.65; color:var(--ink-soft); margin-top:16px; }
.site .home-section-head--center{ text-align:center; margin-inline:auto; }
.site .home-section-head--center .eyebrow{ justify-content:center; }
.site .home-section-head--center .eyebrow::after{ content:""; width:22px; height:2px; border-radius:2px; background:var(--accent); opacity:1; }
.site .home-coll-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:40px; flex-wrap:wrap; }
.site .home-coll-head .home-section-head{ margin:0; }
.site .home-coll-all{ flex-shrink:0; }
.site .home-coll-all-n{ display:inline-flex; min-width:24px; height:22px; padding:0 7px; border-radius:var(--radius-pill); background:var(--surface-2); font-size:12px; align-items:center; justify-content:center; }
.site .home-coll-more{ margin-top:48px; }
.site .home-divider{ display:none; }

/* --- hero --- */
.site .hero-slider{ margin:0 calc(50% - 50vw); }
.site .hero-slider.home-hero .hero-slide{ min-height:max(480px, calc((100svh - var(--site-header-h, 110px)) * .82)); padding:64px max(var(--gutter), calc((100vw - var(--page-max)) / 2 + var(--gutter))) 96px; }
.site .hero-slide::after{ background:linear-gradient(90deg, rgba(10,10,12,.72) 0%, rgba(10,10,12,.35) 55%, rgba(10,10,12,.1) 100%), linear-gradient(to top, rgba(10,10,12,.55), transparent 50%); }
[dir="rtl"] .site .hero-slide::after{ background:linear-gradient(270deg, rgba(10,10,12,.72) 0%, rgba(10,10,12,.35) 55%, rgba(10,10,12,.1) 100%), linear-gradient(to top, rgba(10,10,12,.55), transparent 50%); }
.site .hero-inner{ max-width:none; }
.site .hero-slider .eyebrow{ color:var(--accent) !important; }
.site .hero-slider .eyebrow::before{ background:var(--accent); }
.site .hero-title{ font-size:clamp(38px, 6vw, 72px); line-height:1.04; max-width:16ch; font-weight:600; letter-spacing:-.025em; }
.site .hero-slider.home-hero .hero-title{ font-size:clamp(40px, 6.4vw, 78px); }
.site .hero-sub{ font-size:clamp(15.5px, 1.4vw, 18px); color:rgba(255,255,255,.8); max-width:52ch; margin-top:20px; }
.site .hero-stats{ gap:clamp(28px, 4vw, 56px); margin-top:40px; padding-top:28px; border-top:1px solid rgba(255,255,255,.14); width:fit-content; }
.site .hero-stat .v{ font-family:var(--font-display); font-weight:600; font-size:clamp(30px, 3.4vw, 42px); color:#fff; }
.site .hero-stat .l{ color:rgba(255,255,255,.62); letter-spacing:.12em; }
.site .hero-cta.btn{ margin-top:36px; padding:15px 28px; font-size:15px; }
.site .hero-nav{ width:46px; height:46px; background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.26); }
.site .hero-nav.prev{ left:auto; inset-inline-start:max(16px, calc((100vw - var(--page-max)) / 2 - 64px)); }
.site .hero-nav.next{ right:auto; inset-inline-end:max(16px, calc((100vw - var(--page-max)) / 2 - 64px)); }
[dir="rtl"] .site .hero-nav.prev .icon, [dir="rtl"] .site .hero-nav.next .icon{ transform:scaleX(-1); }
.site .hero-dots{ bottom:32px; }
.site .hero-slider.home-hero::after{ display:none; }

/* photo collage beside the opening slide's headline (wide screens only) */
.site .hero-collage{ display:none; }
@media (min-width:1081px){
  .site .hero-collage{
    display:block; position:absolute; z-index:1; top:50%; transform:translateY(-52%);
    inset-inline-end:max(var(--gutter), calc((100vw - var(--page-max)) / 2 + var(--gutter)));
    width:min(40vw, 540px); aspect-ratio:1/0.86; pointer-events:none;
  }
  .site .hero-collage-img{
    position:absolute; object-fit:cover; border-radius:22px;
    border:6px solid rgba(255,255,255,.08); box-shadow:0 30px 60px -24px rgba(0,0,0,.75);
  }
  .site .hero-collage-img--1{ inset-inline-end:0; top:0; width:72%; height:72%; }
  .site .hero-collage-img--2{ inset-inline-start:0; bottom:0; width:52%; height:52%; }
  .site .hero-collage-img--3{ inset-inline-end:8%; bottom:-4%; width:34%; height:34%; }
  .site .hero-collage--2 .hero-collage-img--2{ width:58%; height:58%; }
  .site .hero-slide:has(.hero-collage) .hero-inner{ padding-inline-end:calc(min(40vw, 540px) + 48px); }
  .site .hero-slide.is-current .hero-collage-img{ animation:heroCollageIn 1s var(--ease) backwards; }
  .site .hero-slide.is-current .hero-collage-img--2{ animation-delay:.15s; }
  .site .hero-slide.is-current .hero-collage-img--3{ animation-delay:.3s; }
}
@keyframes heroCollageIn{ from{ opacity:0; transform:translateY(24px) scale(.97); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .site .hero-slide.is-current .hero-collage-img{ animation:none; } }

/* --- category tiles --- */
.site .cat-grid{ display:grid; gap:20px; grid-template-columns:repeat(3, minmax(0, 1fr)); }
.site .cat-grid--1{ grid-template-columns:minmax(0, 560px); }
.site .cat-grid--2, .site .cat-grid--4{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
@media (min-width:1100px){ .site .cat-grid--4{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.site .cat-tile{
  position:relative; display:block; width:100%; aspect-ratio:4/3; overflow:hidden; border:0; padding:0;
  border-radius:var(--radius-lg); cursor:pointer; text-align:start; color:#fff; font:inherit;
  box-shadow:var(--shadow-sm); transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.site .cat-grid--4 .cat-tile{ aspect-ratio:3/4; }
.site .cat-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.site .cat-tile:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.site .cat-tile:hover img{ transform:scale(1.06); }
.site .cat-tile-ic{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.35); }
.site .cat-tile-scrim{ position:absolute; inset:0; background:linear-gradient(to top, rgba(12,10,8,.82) 0%, rgba(12,10,8,.25) 50%, rgba(12,10,8,0) 75%); }
.site .cat-tile-body{ position:absolute; inset-inline:0; bottom:0; padding:24px; display:flex; flex-direction:column; gap:6px; }
.site .cat-tile-count{ font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.75); }
.site .cat-tile-name{ font-family:var(--font-display); font-size:clamp(22px, 2.2vw, 28px); font-weight:600; line-height:1.15; letter-spacing:-.015em; }
.site .cat-tile-go{
  display:inline-flex; align-items:center; gap:6px; margin-top:6px; font-size:13.5px; font-weight:600; color:var(--accent);
  opacity:.85; transition:gap .25s var(--ease), opacity .25s;
}
.site .cat-tile:hover .cat-tile-go{ opacity:1; gap:10px; }

/* --- why choose us --- */
.site .home-trust-section{ grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:clamp(36px, 6vw, 88px); }
/* the mascot artwork has a black background: frame it in a matching dark card */
.site .home-trust-media{
  position:relative; overflow:hidden; border-radius:var(--radius-xl); align-items:flex-end;
  background:radial-gradient(ellipse 70% 60% at 50% 45%, rgba(201,150,43,.18), transparent 70%), #000;
  box-shadow:var(--shadow-lg); min-height:420px;
}
.site .home-trust-media img{ position:relative; display:block; max-height:560px; border-radius:0; }
.site .home-trust-copy h2{ font-size:clamp(30px, 3.6vw, 44px); line-height:1.1; margin:0 0 18px; }
.site .home-trust-copy p{ font-size:16.5px; line-height:1.7; color:var(--ink-soft); }
.site .why-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; margin:32px 0; }
.site .why-card{
  padding:22px; border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--shadow-xs); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.site .why-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--accent-soft); }
.site .why-ic{
  width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:14px;
  background:var(--ink); color:var(--accent);
}
.site .why-card h3{ font-size:17px; margin-bottom:6px; }
.site .why-card p{ font-size:14px; line-height:1.6; color:var(--ink-soft); margin:0; }
.site .home-trust-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* --- how it works --- */
.site .home-steps{ gap:20px; }
.site .home-steps::before{ display:none; }
.site .home-steps .cp-step{
  padding:32px 26px 28px; border-radius:var(--radius-lg); text-align:start; background:var(--surface);
  border:1px solid var(--line); box-shadow:var(--shadow-xs);
}
.site .home-steps .cp-step:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--accent-soft); }
.site .home-steps .cp-step::before{ display:none; }
.site .home-step-num{
  top:20px; right:auto; inset-inline-end:22px; font-family:var(--font-display); font-weight:600; font-size:44px;
  color:var(--accent-soft);
}
.site .home-steps .cp-step:hover .home-step-num{ color:var(--accent); }
.site .home-step-icon{
  width:54px; height:54px; margin:0 0 22px; border-radius:16px;
  background:var(--accent-tint); color:var(--accent-dark); box-shadow:inset 0 0 0 1px var(--accent-soft);
}
.site .home-steps .cp-step:hover .home-step-icon{ background:var(--ink); color:var(--accent); transform:none; }
.site .home-step-label{ font-size:11.5px; letter-spacing:.14em; color:var(--accent-dark); }
.site .home-steps .cp-step h3{ font-size:21px; margin:2px 0 8px; }
.site .home-steps .cp-step p{ font-size:14.5px; }

/* --- testimonials --- */
.site .quote-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:20px; }
.site .quote-card{
  position:relative; margin:0; padding:30px 28px 26px; border-radius:var(--radius-lg);
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; gap:16px;
}
.site .quote-mark{ color:var(--accent); }
.site .quote-stars{ display:flex; gap:2px; color:var(--line); }
.site .quote-stars .is-on{ color:var(--accent); }
.site .quote-stars .is-on .icon{ fill:currentColor; }
.site .quote-card blockquote{ margin:0; font-family:var(--font-display); font-size:18px; line-height:1.55; color:var(--ink); flex:1; }
.site .quote-card figcaption{ display:flex; align-items:center; gap:12px; padding-top:16px; border-top:1px solid var(--line-soft); }
.site .quote-avatar{ width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--ink); color:var(--accent); font-weight:700; font-size:14px; }
.site .quote-card figcaption strong{ display:block; font-size:14.5px; }
.site .quote-card figcaption small{ display:block; font-size:13px; color:var(--ink-faint); }

/* --- closing call to action --- */
.site .home-band.home-cta-banner{
  margin:0 0 clamp(56px, 7vw, 96px); padding:clamp(36px, 5vw, 64px); border-radius:var(--radius-xl);
  background:
    radial-gradient(ellipse 60% 120% at 0% 0%, rgba(201,150,43,.26), transparent 60%),
    radial-gradient(ellipse 50% 120% at 100% 100%, rgba(90,26,36,.55), transparent 65%),
    var(--brand-dark);
  border:0; box-shadow:var(--shadow-lg);
}
.site .home-cta-banner::before{ opacity:.04; }
.site .home-cta-copy h2{ font-size:clamp(28px, 3.4vw, 42px); line-height:1.12; color:#fff; }
.site .home-cta-copy p{ font-size:16px; }
.site .home-cta-copy .eyebrow{ color:var(--accent); }
.site .home-cta-badge{ width:150px; height:150px; }
.site .home-cta-contact-card{ border-radius:var(--radius-lg); }
.site .home-cta-banner .btn-secondary{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.22); box-shadow:none; }
.site .home-cta-banner .btn-secondary:hover:not(:disabled){ background:rgba(255,255,255,.14); border-color:#fff; }

/* ================================ 6. Cards ============================= */
.site .coll-grid{ gap:24px; }
.site .coll-card{ border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); border:0; }
.site .coll-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.site .coll-card-title{ font-family:var(--font-display); font-weight:600; font-size:21px; letter-spacing:-.01em; }
.site .coll-card-top{ inset-inline:14px; left:auto; right:auto; }
.site .coll-card-title{ padding-right:0; padding-inline-end:44px; }
.site .coll-card-go{ right:auto; inset-inline-end:16px; }

.site .product-grid{ grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:24px; }
.site .product-card{
  border-radius:var(--radius-lg); border:1px solid var(--line); box-shadow:var(--shadow-xs);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.site .product-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent; }
.site .product-thumb{ height:auto; aspect-ratio:4/3; }
.site .product-thumb::after{ display:none; }
.site .stock-flag{
  top:12px; left:auto; inset-inline-start:12px; padding:5px 10px; font-size:10.5px; letter-spacing:.06em;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.site .stock-flag.is-in{ background:rgba(255,255,255,.9); color:#1F6B44; }
.site .stock-flag.is-out{ background:rgba(22,22,26,.78); color:#fff; }
.site .stock-flag.is-in::before{ content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:#2F9E62; margin-inline-end:6px; vertical-align:1px; }
.site .product-quickview{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow-md); text-transform:none; letter-spacing:0; font-size:12.5px; font-weight:600; padding:8px 16px; }
.site .product-body{ padding:16px 18px 18px; gap:8px; }
.site .product-cat{ background:none; padding:0; color:var(--accent-dark); font-size:11px; letter-spacing:.12em; font-weight:700; }
.site .product-name{ font-family:var(--font-display); font-size:17.5px; font-weight:600; line-height:1.3; margin:0; }
.site .product-card:hover .product-name{ color:var(--ink); }
.site .product-meta{ padding-top:12px; border-top:1px solid var(--line-soft); }
.site .product-price--gated{ color:var(--ink-soft); text-transform:none; letter-spacing:0; font-size:12.5px; font-weight:600; }
.site .product-variants-hint{ font-size:12.5px; }
[dir="rtl"] .site .product-card:hover .product-variants-hint{ transform:translateX(-2px); }

.site .empty-state{ border-radius:var(--radius-lg); border:1px dashed var(--line); background:var(--surface); }

/* ============================= 7. Inner pages ========================== */
.site .cp-hero{
  margin:0 calc(50% - 50vw) clamp(44px, 6vw, 72px); padding:clamp(56px, 8vw, 104px) var(--gutter) clamp(56px, 7vw, 88px);
  background:
    radial-gradient(ellipse 55% 100% at 0% 0%, rgba(201,150,43,.22), transparent 62%),
    radial-gradient(ellipse 45% 100% at 100% 100%, rgba(90,26,36,.5), transparent 70%),
    var(--brand-dark);
}
.site .cp-hero-dots{ opacity:.045; }
.site .cp-hero-divider{ display:none; }
.site .cp-hero-inner{ max-width:820px; margin:0 auto; }
.site .cp-crumbs{ background:rgba(255,255,255,.06); }
.site .cp-eyebrow{ font-size:12px; letter-spacing:.18em; font-weight:700; }
.site .cp-hero h1{ font-size:clamp(34px, 5vw, 60px); line-height:1.06; font-weight:600; margin-top:16px; }
.site .cp-hero p{ font-size:clamp(15.5px, 1.4vw, 18px); line-height:1.65; max-width:60ch; color:rgba(255,255,255,.74); }
.site .cp-hero + .home-band{ margin-top:calc(-1 * clamp(44px, 6vw, 72px)); }

.site .content-page{ max-width:1120px; margin-inline:auto; }
.site .cp-lead{
  padding:28px 32px; border-radius:var(--radius-lg); font-size:17px; line-height:1.75;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-xs);
}
.site .cp-lead::before{ left:auto; inset-inline-start:0; top:24px; bottom:24px; border-radius:0 4px 4px 0; }
[dir="rtl"] .site .cp-lead::before{ border-radius:4px 0 0 4px; }
.site .cp-h2{ font-size:clamp(24px, 2.6vw, 32px); margin:clamp(48px, 6vw, 72px) 0 24px; }
.site .cp-h2::before{ width:22px; height:2px; }
.site .cp-card, .site .cp-step{
  border-radius:var(--radius-lg); border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow-xs);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.site .cp-card:hover, .site .cp-step:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--accent-soft); }
.site .cp-card::before{ display:none; }
.site .cp-card > .icon{ background:var(--accent-tint); color:var(--accent-dark); box-shadow:inset 0 0 0 1px var(--accent-soft); border-radius:14px; }
.site .cp-card:hover > .icon{ background:var(--ink); color:var(--accent); }
.site .cp-card h3, .site .cp-step h3{ font-size:19px; }
.site .cp-card p, .site .cp-step p{ font-size:14.5px; }
.site .cp-step-n{ background:var(--ink); color:var(--accent); box-shadow:none; font-family:var(--font-display); font-weight:600; border-radius:12px; }
.site .cp-chip{ border-color:var(--line); padding:11px 20px; font-weight:600; }
.site .cp-chip:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }
.site .cp-cta{
  border-radius:var(--radius-xl); padding:clamp(28px, 4vw, 48px); border:0; box-shadow:var(--shadow-lg);
  background:
    radial-gradient(ellipse 55% 140% at 0% 0%, rgba(201,150,43,.26), transparent 60%),
    radial-gradient(ellipse 45% 140% at 100% 100%, rgba(90,26,36,.5), transparent 70%),
    var(--brand-dark);
}
.site .cp-cta h2{ font-size:clamp(24px, 2.8vw, 34px); color:#fff; }
.site .cp-cta .btn-secondary{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.24); box-shadow:none; }
.site .cp-cta .btn-secondary:hover:not(:disabled){ background:rgba(255,255,255,.14); border-color:#fff; }

/* FAQ */
.site .faq-item{ border-radius:var(--radius-lg); border-color:var(--line); padding:2px 26px; box-shadow:var(--shadow-xs); }
.site .faq-item:hover{ border-color:var(--accent-soft); }
.site .faq-item[open]{ background:var(--surface); border-color:var(--accent); box-shadow:var(--shadow-md); }
.site .faq-item summary{ font-family:var(--font-display); font-size:18px; font-weight:600; padding:22px 0; }
.site .faq-item p{ font-size:15px; padding-inline-end:48px; padding-right:0; }
.site .faq-item[open] summary .icon{ background:var(--ink); color:var(--accent); }

/* Contact */
.site .cp-info{ border-color:var(--line); border-radius:var(--radius-lg); }
.site .cp-info > .icon{ background:var(--accent-tint); color:var(--accent-dark); box-shadow:inset 0 0 0 1px var(--accent-soft); }
.site a.cp-info:hover{ border-color:var(--accent); }
.site a.cp-info:hover > .icon{ background:var(--ink); color:var(--accent); }
[dir="rtl"] .site a.cp-info:hover{ transform:translateX(-4px); }
.site .cp-contact-form{ border-color:var(--line); border-radius:var(--radius-xl); box-shadow:var(--shadow-md); }
.site .cp-contact-form::before{ display:none; }
.site .cp-contact-form h2{ font-size:26px; }
.site .cp-map{ border-radius:var(--radius-xl); border-color:var(--line); }
.site .legal-content{ border-color:var(--line); border-radius:var(--radius-xl); box-shadow:var(--shadow-sm); }
.site .legal-content ul{ padding-left:0; padding-inline-start:22px; }

/* ========================== 8. Shop & product ========================== */
.site .shop-page{ max-width:var(--page-max); }
.site .shop-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.site .coll-tab{ border-radius:var(--radius-pill); font-weight:600; }
.site .shop-chips .coll-tab{ border:1px solid var(--line); background:var(--surface); padding:9px 18px; color:var(--ink-soft); box-shadow:var(--shadow-xs); }
.site .shop-chips .coll-tab:hover{ border-color:var(--ink); color:var(--ink); }
.site .shop-chips .coll-tab.is-active{ background:var(--ink); border-color:var(--ink); color:#fff; }
.site .coll-tab.is-active{ background:var(--ink); color:#fff; }
.site .toolbar{ gap:12px; margin-bottom:22px; }
.site .search-box, .site .select-wrap{ border-radius:var(--radius-pill); border-color:var(--line); box-shadow:var(--shadow-xs); min-height:46px; }
.site .search-box{ padding:0 18px; }
.site .search-box input{ font-size:14.5px; min-height:44px; }
.site .search-box:focus-within, .site .select-wrap:focus-within{ border-color:var(--accent); box-shadow:var(--ring); }
.site .select-wrap .icon{ right:auto; inset-inline-end:16px; }
.site .select-wrap select{ padding-block:12px; padding-inline:18px 38px; }
[dir="rtl"] .site .select-wrap select{ padding:12px 18px 12px 38px; }
.site .page-summary{ font-size:13.5px; color:var(--ink-faint); margin-bottom:16px; }
.site .pagination{ margin-top:44px; gap:8px; }
.site .page-btn{ min-width:40px; height:40px; border-width:1px; }
.site .page-btn.is-active{ background:var(--ink); border-color:var(--ink); }
.site .coll-toolbar{ border-radius:var(--radius-lg); border-color:var(--line); box-shadow:var(--shadow-xs); }

/* product page: gallery + details side by side on wide screens */
#view-detail{ padding-top:20px; }
.site .detail-media{ border-radius:var(--radius-xl); border:0; box-shadow:var(--shadow-md); }
.site .detail-media .thumb-photo{ border-radius:var(--radius-xl); }
.site .zoom-hint{ right:auto; inset-inline-end:14px; }
.site .thumb-strip-item{ width:72px; height:72px; border-radius:12px; }
.site .detail-info h1, .site .detail-info h2{ font-size:clamp(28px, 3.2vw, 42px); line-height:1.12; font-weight:600; }
.site .detail-desc{ font-size:15.5px; line-height:1.7; max-width:60ch; }
.site .field-label{ text-transform:none; letter-spacing:0; font-size:13.5px; font-weight:600; color:var(--ink); }
.site .variant-row{ border-width:1px; border-radius:var(--radius); padding:12px 14px; text-align:start; }
.site .variant-row.is-selected{ background:var(--accent-tint); }
[dir="rtl"] .site .variant-row:hover{ transform:translateX(-2px); }
.site .buy-box{ background:var(--surface); border-radius:var(--radius-lg); border-color:var(--line); box-shadow:var(--shadow-sm); padding:22px 24px; }
.site .price-row .amount.product-price--gated{ font-size:15px; font-family:var(--font-body); color:var(--ink-soft); }
.site .review-card{ border-radius:var(--radius-lg); border-color:var(--line); box-shadow:var(--shadow-xs); }
.site .related-section{ margin-top:clamp(48px, 6vw, 80px); }
.site .related-heading{ font-family:var(--font-display); font-size:clamp(24px, 2.6vw, 32px); font-weight:600; margin-bottom:24px; }
.site .related-grid{ grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:20px; }
@media (min-width:1024px){
  .site .detail-grid{ display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr); gap:clamp(36px, 4vw, 64px); align-items:start; }
  .site .detail-gallery{ position:sticky; top:calc(var(--header-h) + 20px); }
  .site .detail-media{ height:min(72vh, 640px); }
  .site .detail-info .assoc-table-wrap{ overflow-x:auto; }
}

/* collection page: gallery band sits close under the page header */
.site .cpd-band--gallery{ padding-top:clamp(24px, 3vw, 40px); padding-bottom:clamp(40px, 5vw, 64px); }
.site .cpd-band:not(.cpd-band--gallery){ padding-top:clamp(40px, 5vw, 64px); }
.site .cpd-band--gallery .shop-gallery-slider{ border-radius:var(--radius-xl); border:0; box-shadow:var(--shadow-md); }

/* =============================== 9. Footer ============================= */
.site .site-footer{
  margin-top:0;
  background:
    radial-gradient(ellipse 50% 80% at 0% 0%, rgba(201,150,43,.12), transparent 70%),
    radial-gradient(ellipse 45% 80% at 100% 100%, rgba(90,26,36,.35), transparent 70%),
    #111114;
}
.site .site-footer::before{ height:1px; background:linear-gradient(90deg, transparent, rgba(201,150,43,.6), transparent); }
.site .site-footer::after{ display:none; }
.site .footer-top, .site .footer-inner, .site .footer-bottom{ max-width:var(--page-max); padding-inline:var(--gutter); }
.site .footer-top{ padding-top:56px; }
.site .footer-top-brand strong{ font-family:var(--font-display); font-weight:600; font-size:22px; letter-spacing:-.01em; }
.site .footer-inner{ padding-top:48px; padding-bottom:48px; gap:clamp(28px, 4vw, 56px); }
.site .footer-heading{ font-size:12px; letter-spacing:.16em; font-weight:700; }
.site .footer-heading::after{ left:auto; inset-inline-start:0; }
.site .footer-link{ text-align:start; }
.site .footer-link:not(.footer-link-more) span::before{ left:auto; inset-inline-start:-14px; }
[dir="rtl"] .site .footer-link:not(.footer-link-more):hover span{ transform:translateX(-14px); }
.site .footer-hours{ border-radius:var(--radius); }
.site .social-badge{ border-radius:12px; }

/* ============================ 10. Forms & misc ========================= */
.site .cp-field label{ text-transform:none; letter-spacing:0; font-size:13.5px; font-weight:600; color:var(--ink); }
.site .cp-field input, .site .cp-field textarea, .site .cp-field select{ background:var(--surface); border-color:var(--line); font-size:15px; }
.site .cp-field input:focus, .site .cp-field textarea:focus, .site .cp-field select:focus{ border-color:var(--accent); box-shadow:var(--ring); }
[dir="rtl"] .site .cp-field select{ background-position:left 12px center; }
.site .toast{ border-radius:var(--radius); box-shadow:var(--shadow-lg); }
.site .skel{ background:linear-gradient(90deg, #EFEAE1 0%, #F7F3EC 50%, #EFEAE1 100%); background-size:200% 100%; }
.site .back-link{ font-weight:600; }

/* =========================== 11. Scroll reveal ========================= */
/* .reveal-on is set by app.js only when JS runs and motion is allowed, so
   nothing is ever hidden without it. fill-mode "backwards" applies the
   start state during the stagger delay but leaves hover transforms alone. */
.reveal-on [data-reveal]:not(.is-revealed){ opacity:0; }
.reveal-on [data-reveal].is-revealed{ animation:siteRevealUp .8s var(--ease) backwards; animation-delay:calc(var(--ri, 0) * 70ms); }
@keyframes siteRevealUp{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .reveal-on [data-reveal]:not(.is-revealed){ opacity:1; }
  .reveal-on [data-reveal].is-revealed{ animation:none; }
  .site *{ scroll-behavior:auto !important; }
}
html{ scroll-behavior:smooth; }
html:has(body.site){ scroll-padding-top:calc(var(--header-h) + 12px); }

/* ============================= 12. Responsive ========================== */
/* laptops: tighter nav */
@media (min-width:1081px) and (max-width:1280px){
  .site .brand-name{ display:none; }
  .site .nav-tab{ padding:9px 11px; }
  .site .nav-tab-cta{ margin-inline-start:6px; padding:10px 15px; }
  .site .admin-login-link span{ display:none; }
  .site .admin-login-link{ width:40px; padding:0; justify-content:center; }
}
@media (min-width:1081px){
  .site .nav-tab:not(.nav-tab-cta):not(.nav-dd-toggle) > .icon{ display:none; }
  .site .nav-dd-toggle > .icon:not([data-icon="chevronDown"]){ display:none; }
}

/* tablets & phones: slide-in drawer */
@media (max-width:1080px){
  .site .topbar{ flex-wrap:nowrap; gap:10px; min-height:64px; }
  .site .nav-toggle{ display:flex; order:3; }
  .site .topbar-actions{ margin-inline-start:auto; order:2; }
  .site .nav-tabs{
    position:fixed; top:0; bottom:0; inset-inline-end:0; z-index:70; order:4;
    width:min(380px, 88vw); max-height:none; height:100dvh; overflow-y:auto;
    flex-direction:column; align-items:stretch; justify-content:flex-start; gap:4px;
    padding:18px 18px calc(24px + env(safe-area-inset-bottom));
    background:var(--surface); border:0; border-radius:0; box-shadow:var(--shadow-lg);
    transform:translateX(105%); visibility:hidden;
    transition:transform .35s var(--ease), visibility 0s linear .35s;
  }
  [dir="rtl"] .site .nav-tabs{ transform:translateX(-105%); }
  .site .topbar.nav-open .nav-tabs{ transform:none; visibility:visible; max-height:none; transition:transform .35s var(--ease), visibility 0s; }
  .nav-backdrop{
    display:block; position:fixed; inset:0; z-index:45; background:rgba(16,16,20,.45);
    -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
    opacity:0; pointer-events:none; transition:opacity .3s;
  }
  body.nav-locked .nav-backdrop{ opacity:1; pointer-events:auto; }
  body.nav-locked{ overflow:hidden; }
  .site .nav-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:2px 4px 14px; margin-bottom:6px; border-bottom:1px solid var(--line-soft); }
  .site .nav-drawer-title{ font-family:var(--font-display); font-size:22px; font-weight:600; }
  .site .nav-drawer-close{ width:40px; height:40px; border-radius:12px; border:1px solid var(--line); background:var(--surface); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink); }
  .site .nav-tab{ padding:14px 14px; font-size:16px; border-radius:14px; justify-content:flex-start; color:var(--ink); }
  .site .nav-tab .icon{ display:block; color:var(--accent-dark); }
  .site .nav-tab.is-active{ color:var(--ink); background:var(--accent-tint); }
  .site .nav-dd-toggle{ display:none; }
  .site .nav-dd-menu{
    position:static; width:auto; opacity:1; visibility:visible; transform:none; transition:none;
    border:0; box-shadow:none; padding:0; background:none; border-radius:0;
  }
  .site .nav-dd-menu::before{ display:none; }
  .site .nav-dd-item{ padding:10px 14px; }
  .site .nav-dd-ic{ width:34px; height:34px; }
  .site .nav-tab-cta{ margin:12px 0 0; justify-content:center; padding:15px; color:#fff; }
  .site .nav-tab-cta .icon{ color:var(--accent); }
  .site .nav-drawer-foot{ display:flex; flex-direction:column; gap:4px; margin-top:auto; padding-top:18px; border-top:1px solid var(--line-soft); }
  .site .nav-drawer-foot a{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; text-decoration:none; color:var(--ink-soft); font-size:14px; overflow-wrap:anywhere; }
  .site .nav-drawer-foot a:hover{ background:var(--surface-2); color:var(--ink); }
  .site .home-trust-section{ grid-template-columns:1fr; text-align:start; }
  .site .home-trust-media img{ max-height:380px; }
}

@media (max-width:860px){
  .site .cat-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
  .site .cat-tile, .site .cat-grid--4 .cat-tile{ aspect-ratio:4/5; }
  .site .cat-tile-body{ padding:16px; }
  .site .cp-hero{ margin-bottom:40px; }
  .site .cp-hero + .home-band{ margin-top:-40px; }
  .site .hero-nav{ display:none; }
}

@media (max-width:640px){
  :root{ --header-h:64px; }
  body.site{ font-size:15px; }
  .site .topbar-strip{ display:none; }
  .site .brand-logo{ height:36px; }
  .site .site-lang{ height:40px; padding:0 10px; }
  .site .admin-login-link span{ display:none; }
  .site .admin-login-link{ width:40px; padding:0; justify-content:center; }
  .site .hero-slider.home-hero .hero-slide{ min-height:max(440px, calc((100svh - var(--site-header-h, 64px)) * .78)); padding-top:44px; padding-bottom:84px; }
  .site .hero-stats{ gap:24px; margin-top:28px; padding-top:22px; }
  .site .home-section-head{ margin-bottom:28px; }
  .site .home-section-head p{ font-size:15.5px; }
  .site .home-coll-head{ margin-bottom:28px; align-items:flex-start; }
  .site .home-coll-head .btn{ width:100%; }
  .site .home-coll-more .btn{ width:100%; }
  .site .why-grid{ grid-template-columns:1fr; gap:12px; }
  .site .home-trust-actions .btn{ flex:1 1 100%; }
  .site .product-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
  .site .product-body{ padding:12px 12px 14px; }
  .site .product-name{ font-size:15px; }
  .site .product-meta{ flex-direction:column; align-items:flex-start; gap:6px; }
  .site .swatch-row{ display:none; }
  .site .product-quickview{ display:none; }
  .site .coll-grid{ gap:12px; }
  .site .coll-card-title{ font-size:16px; padding-inline-end:0; }
  .site .coll-card-go{ display:none; }
  .site .cp-hero{ text-align:start; }
  .site .cp-hero .cp-eyebrow{ justify-content:flex-start; }
  .site .cp-hero .cp-eyebrow::after{ display:none; }
  .site .cp-lead{ padding:22px 22px; font-size:15.5px; }
  .site .faq-item{ padding:2px 18px; }
  .site .faq-item summary{ font-size:16px; }
  .site .faq-item p{ padding-inline-end:0; }
  .site .cp-cta{ text-align:start; }
  .site .cp-cta-actions, .site .cp-cta-actions .btn, .site .cp-cta > .btn{ width:100%; }
  .site .home-cta-banner{ text-align:start; align-items:flex-start; }
  .site .home-cta-actions .btn{ flex:1 1 100%; }
  .site .shop-chips{ flex-wrap:nowrap; overflow-x:auto; margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter); scrollbar-width:none; }
  .site .shop-chips::-webkit-scrollbar{ display:none; }
  .site .shop-chips .coll-tab{ flex-shrink:0; }
  .site .toolbar .search-box{ min-width:0; flex-basis:100%; }
  .site .toolbar .select-wrap{ flex:1; }
  .site .toolbar .select-wrap select{ min-width:0; width:100%; }
  .site .footer-top{ padding-top:44px; }
}

@media (max-width:380px){
  .site .product-grid{ grid-template-columns:1fr; }
  .site .cat-grid{ grid-template-columns:1fr; }
  .site .cat-tile, .site .cat-grid--4 .cat-tile{ aspect-ratio:16/10; }
}