/* =============================================================
   LAIOLA DESIGN SYSTEM — Core Tokens
   HVAC & water filtration. Chișinău, Moldova. Since 1997.
   Modern, conservative, credible. Less is more.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* -----------------------------------------------------------
     BRAND COLORS — drawn from the Laiola logo
     Green wordmark + red flame + blue waterdrop = comfort,
     heating, water. Amber for warmth + energy accents.
     ----------------------------------------------------------- */
  --brand-green:        #019347;  /* Primary — wordmark, CTAs */
  --brand-green-700:    #017038;  /* Hover / pressed */
  --brand-green-900:    #014524;  /* Deep text on light */
  --brand-green-50:     #e8f5ee;  /* Pale wash */

  --brand-red:          #EC4445;  /* Flame — heating, alerts */
  --brand-red-700:      #c93738;
  --brand-red-50:       #fdecec;

  --brand-blue:         #007DC1;  /* Waterdrop — filtration, info */
  --brand-blue-700:     #0064a0;
  --brand-blue-50:      #e6f3fb;

  --brand-amber:        #EEB742;  /* Energy / warning */
  --brand-amber-700:    #c89527;
  --brand-amber-50:     #fdf5e3;

  /* -----------------------------------------------------------
     NEUTRALS — warm slate. Slightly cool to read as technical.
     ----------------------------------------------------------- */
  --ink-900:            #1a2327;  /* Display headings */
  --ink-800:            #2b3a40;  /* Body emphasis */
  --ink-700:            #404e53;  /* Default body — from legacy CSS */
  --ink-500:            #696969;  /* Secondary copy */
  --ink-400:            #898888;  /* Tertiary, captions */
  --ink-300:            #b7b7b7;  /* Disabled */

  --line-300:           #d8dee1;  /* Strong rule */
  --line-200:           #e5e8ea;  /* Default border */
  --line-100:           #eef1f3;  /* Subtle divider */

  --surface-0:          #ffffff;  /* Card / page */
  --surface-50:         #f7f9fa;  /* Section background */
  --surface-100:        #eef3f6;  /* Inset / muted block */
  --surface-cool:       #edf7fd;  /* Brand water-tint band */

  /* -----------------------------------------------------------
     SEMANTIC
     ----------------------------------------------------------- */
  --fg:                 var(--ink-700);
  --fg-strong:          var(--ink-900);
  --fg-muted:           var(--ink-500);
  --fg-on-brand:        #ffffff;

  --bg:                 var(--surface-0);
  --bg-soft:            var(--surface-50);

  --border:             var(--line-200);
  --border-strong:      var(--line-300);

  --accent:             var(--brand-green);
  --accent-fg:          #ffffff;

  --success:            var(--brand-green);
  --info:               var(--brand-blue);
  --warning:            var(--brand-amber);
  --danger:             var(--brand-red);

  --link:               var(--brand-blue);
  --link-hover:         var(--brand-blue-700);

  /* -----------------------------------------------------------
     TYPE
     Single family: Roboto. Display via weight 900 + tight tracking,
     body via weight 400. Roboto carries Romanian + Russian glyphs
     cleanly. Mono: JetBrains Mono for spec / model codes only.
     ----------------------------------------------------------- */
  --font-display: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-sans:    'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', Menlo, Consolas, monospace;

  /* Type scale — 1.25 ratio, rounded to half-step */
  --fs-12: 12px;
  --fs-14: 14px;     /* baseline body */
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-30: 30px;
  --fs-36: 36px;
  --fs-48: 48px;
  --fs-60: 60px;

  /* Weights */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   900;

  /* Line heights */
  --lh-tight:  1.15;
  --lh-snug:   1.30;
  --lh-normal: 1.50;
  --lh-loose:  1.70;

  /* -----------------------------------------------------------
     SPACING — 4-pt grid
     ----------------------------------------------------------- */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10: 128px;

  /* -----------------------------------------------------------
     RADII — restrained. Conservative brand.
     ----------------------------------------------------------- */
  --radius-sm: 3px;
  --radius-md: 6px;     /* default — cards, inputs, buttons */
  --radius-lg: 10px;    /* large surfaces, modal */
  --radius-pill: 999px;

  /* -----------------------------------------------------------
     ELEVATION — soft and subtle. No glow.
     ----------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(26,35,39,0.06), 0 1px 1px rgba(26,35,39,0.04);
  --shadow-2: 0 2px 8px rgba(26,35,39,0.08), 0 1px 2px rgba(26,35,39,0.04);
  --shadow-3: 0 8px 24px rgba(26,35,39,0.10), 0 2px 6px rgba(26,35,39,0.06);
  --shadow-focus: 0 0 0 3px rgba(1,147,71,0.25);

  /* -----------------------------------------------------------
     MOTION — quick, professional. No bounce.
     ----------------------------------------------------------- */
  --ease-out:  cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --ease-std:  cubic-bezier(0.4, 0, 0.2, 1);

  --dur-fast: 120ms;
  --dur-med:  200ms;
  --dur-slow: 320ms;

  /* Layout */
  --container: 1200px;
  --container-narrow: 880px;
}

/* =============================================================
   SEMANTIC ELEMENTS — use these classes when not theming a
   full page, and as a reference for what each role looks like.
   ============================================================= */

.ds-body {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
}

.ds-h1, h1.ds {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--fg-strong);
  margin: 0;
}
.ds-h2, h2.ds {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-36);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  color: var(--fg-strong);
  margin: 0;
}
.ds-h3, h3.ds {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--fg-strong);
  margin: 0;
}
.ds-h4, h4.ds {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
  margin: 0;
}

.ds-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-green);
}

.ds-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-18);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  color: var(--ink-700);
}

.ds-p { font-size: var(--fs-14); line-height: var(--lh-loose); color: var(--fg); }
.ds-small { font-size: var(--fs-12); color: var(--fg-muted); }
.ds-caption { font-size: var(--fs-12); letter-spacing: 0.02em; color: var(--fg-muted); text-transform: uppercase; }
.ds-mono { font-family: var(--font-mono); font-size: var(--fs-12); }
.ds-link { color: var(--link); text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--dur-fast), border-color var(--dur-fast); }
.ds-link:hover { color: var(--link-hover); border-bottom-color: currentColor; }
/* Marketing site styles — built on /colors_and_type.css tokens */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  color: var(--fg);
  background: var(--surface-0);
  line-height: var(--lh-normal);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; cursor: pointer; }
button { font-family: inherit; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 500;
  font-size: var(--fs-14); line-height: 1; padding: 11px 18px;
  border-radius: var(--radius-md); border: 1px solid transparent;
  cursor: pointer; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast);
}
.btn-primary { background: var(--brand-green); color: #fff; }
.btn-primary:hover { background: var(--brand-green-700); }
.btn-secondary { background: #fff; color: var(--brand-green); border-color: var(--brand-green); }
.btn-secondary:hover { background: var(--brand-green-50); }
.btn-ghost { background: transparent; color: var(--ink-700); border-color: var(--line-300); }
.btn-ghost:hover { background: var(--surface-50); }
.btn-sm  { font-size: 12px; padding: 8px 12px; }
.btn-lg  { font-size: 15px; padding: 14px 24px; }
.btn:active { transform: scale(0.98); }

/* ===== topbar ===== */
.topbar { background: var(--ink-900); color: #c8d2d6; font-size: 12px; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; padding: 8px 24px; }
.topbar-social { display: flex; gap: 6px; }
.topbar-social .soc { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; border: 1px solid #3a484e; align-items: center; justify-content: center; color: #8a9aa1; font-family: var(--font-display); font-weight: 700; font-size: 11px; line-height: 1; transition: border-color var(--dur-fast), color var(--dur-fast); }
.topbar-social .soc:hover { color: #fff; border-color: #fff; }
.topbar-links { display: flex; gap: 18px; align-items: center; white-space: nowrap; }
.topbar-links a:hover { color: #fff; }
.lang { display: inline-flex; align-items: center; gap: 6px; }
.lang img { width: 14px; height: 10px; object-fit: cover; border-radius: 1px; }
.lang-sep { color: #4f5b60; margin: 0 2px; }

/* ===== header ===== */
.header { background: #fff; border-bottom: 1px solid var(--line-200); position: sticky; top: 0; z-index: 30; }
.header-inner { display: flex; gap: 28px; align-items: center; padding: 14px 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark { width: 52px; height: 52px; object-fit: contain; }
.brand-tag { display: flex; flex-direction: column; line-height: 1.1; }
.brand-tag-1 { font-family: var(--font-display); font-weight: 900; font-size: 20px; color: var(--brand-green); letter-spacing: -0.02em; }
.brand-tag-2 { font-size: 11px; color: var(--ink-500); margin-top: 2px; }

.search { position: relative; flex: 0 1 520px; max-width: 520px; margin-left: auto; display: flex; align-items: center; gap: 8px; background: var(--surface-50); border: 1px solid var(--line-200); border-radius: var(--radius-md); padding: 4px 6px 4px 14px; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.search-suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60; background: #fff; border: 1px solid var(--line-200); border-radius: var(--radius-md); box-shadow: 0 12px 32px rgba(0,0,0,0.12); padding: 6px; max-height: 360px; overflow-y: auto; }
.search-suggest[hidden] { display: none; }
.search-suggest .ss-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: transparent; border-radius: var(--radius-sm); font-size: 14px; line-height: 1.3; color: var(--ink-800); cursor: pointer; text-decoration: none; }
.search-suggest .ss-item > i { color: var(--ink-400); flex: 0 0 auto; width: 16px; height: 16px; }
.search-suggest .ss-item:hover, .search-suggest .ss-item.active { background: var(--surface-50); color: var(--brand-green-900); }
.search-suggest .ss-title { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-suggest .ss-thumb { flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radius-sm); object-fit: contain; background: #fff; border: 1px solid var(--line-200); }
.search-suggest .ss-thumb-fallback { display: flex; align-items: center; justify-content: center; color: var(--ink-300); }
.search-suggest .ss-thumb-fallback i { width: 18px; height: 18px; }
.search-suggest .ss-tag { flex: 0 0 auto; font-size: 11px; font-weight: 600; color: var(--brand-green-900); background: var(--brand-green-50); padding: 2px 8px; border-radius: 999px; }
.search-suggest .ss-all { margin-top: 4px; border-top: 1px solid var(--line-200); border-radius: 0 0 var(--radius-sm) var(--radius-sm); font-weight: 600; color: var(--brand-green-900); }
.search-suggest .ss-all i { color: var(--brand-green); }
.search-suggest .ss-title strong { font-weight: 700; color: var(--brand-green-900); }
.search-suggest .ss-price { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--ink-900); white-space: nowrap; }
.search-suggest .ss-price-req { font-weight: 600; color: var(--brand-green); }
.search-suggest .ss-empty { padding: 10px 12px; font-size: 13px; color: var(--ink-500); }
.search-suggest .ss-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-400); }
.search-suggest .ss-clear { border: 0; background: transparent; font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--brand-green); cursor: pointer; padding: 0; }
.search-suggest .ss-recent .ss-title { color: var(--ink-700); }
.search-suggest .ss-cta { margin-top: 4px; font-weight: 600; color: var(--brand-green-900); }
.search-suggest .ss-cta i { color: var(--brand-green); }
.search-suggest .ss-correction { padding: 6px 12px 8px; font-size: 12px; color: var(--ink-500); border-bottom: 1px solid var(--line-200); margin-bottom: 4px; }
.search-suggest .ss-correction strong { color: var(--brand-green-900); font-weight: 700; }
.search:focus-within { border-color: var(--brand-green); box-shadow: 0 0 0 3px rgba(1,147,71,0.18); background: #fff; }
.search > i { color: var(--ink-400); }
.search input { flex: 1; border: 0; background: transparent; outline: 0; font-size: 14px; padding: 9px 0; color: var(--ink-800); }
.search input::placeholder { color: var(--ink-400); }

.header-right { display: flex; align-items: center; gap: 10px; }
.header-cta { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: var(--radius-md); transition: background var(--dur-fast); }
.header-cta:hover { background: var(--surface-50); }
.header-cta i { color: var(--brand-green); }
.header-cta-text { display: flex; flex-direction: column; line-height: 1.15; }
.header-cta-text small { font-size: 11px; color: var(--ink-500); }
.header-cta-text strong { font-size: 15px; color: var(--ink-900); font-weight: 700; letter-spacing: -0.01em; }
.icon-btn { background: transparent; border: 1px solid var(--line-200); width: 42px; height: 42px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-700); cursor: pointer; position: relative; transition: background var(--dur-fast), border-color var(--dur-fast); }
.icon-btn:hover { background: var(--surface-50); border-color: var(--line-300); }
.icon-btn.cart { background: var(--brand-green-50); border-color: transparent; color: var(--brand-green-900); }
.icon-btn.cart:hover { background: #d8edde; }
.cart-badge { position: absolute; top: -6px; right: -6px; background: var(--brand-red); color: #fff; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; }

/* ===== nav ===== */
.nav { background: #fff; }
.nav-inner { display: flex; align-items: stretch; gap: 24px; padding: 0 24px; }
.nav-cat { display: flex; align-items: center; gap: 8px; padding: 14px 18px; background: var(--brand-green); color: #fff; border: 0; font-weight: 500; font-size: 14px; cursor: pointer; }
.nav-cat:hover { background: var(--brand-green-700); }
.nav-cat-caret { transition: transform var(--dur-fast); opacity: .85; }
.nav-cat-wrap:hover .nav-cat-caret { transform: rotate(180deg); }
.nav-items { list-style: none; margin: 0; padding: 0; display: flex; flex: 1; align-items: stretch; }
.nav-items li { display: flex; }
.nav-items a { display: flex; align-items: center; gap: 4px; padding: 14px 16px; color: var(--ink-800); font-weight: 500; font-size: 14px; border-bottom: 2px solid transparent; transition: color var(--dur-fast), border-color var(--dur-fast); }
.nav-items li.active a, .nav-items a:hover { color: var(--brand-green); border-bottom-color: var(--brand-green); }
.nav-callback { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 0; color: var(--brand-red); font-weight: 500; font-size: 14px; padding: 14px 0; cursor: pointer; }
.nav-callback:hover { color: var(--brand-red-700); }

/* nav hover flyout (catalog tree) */
.nav-cat-wrap { position: relative; display: flex; align-items: stretch; }
.nav-cat-flyout { display: none; position: absolute; top: 100%; left: 0; min-width: 280px; background: #fff; border: 1px solid var(--line-200); border-top: 0; box-shadow: 0 12px 28px rgba(13,18,21,.12); z-index: 60; list-style: none; margin: 0; padding: 6px 0; }
.nav-cat-wrap:hover .nav-cat-flyout, .nav-cat-wrap:focus-within .nav-cat-flyout { display: block; }
.nav-cat-flyout > li { position: relative; }
.nav-cat-flyout > li > a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 16px; color: var(--ink-800); font-size: 14px; font-weight: 500; line-height: 1.3; }
.nav-cat-flyout > li > a:hover, .nav-cat-flyout > li:hover > a { background: var(--surface-50); color: var(--brand-green); }
.nav-cat-flyout > li > a > i { color: var(--ink-400); flex: none; }
.nav-sub-flyout { display: none; position: absolute; top: -7px; left: 100%; min-width: 260px; background: #fff; border: 1px solid var(--line-200); box-shadow: 0 12px 28px rgba(13,18,21,.12); list-style: none; margin: 0; padding: 6px 0; }
.nav-cat-flyout > li:hover > .nav-sub-flyout { display: block; }
.nav-sub-flyout a { display: block; padding: 8px 16px; color: var(--ink-700); font-size: 13px; font-weight: 400; line-height: 1.35; }
.nav-sub-flyout a:hover { background: var(--surface-50); color: var(--brand-green); }
@media (max-width: 820px) { .nav-cat-flyout, .nav-sub-flyout { display: none !important; } }

/* featured-tabs (home recommended-equipment) */
.ftabs-nav { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line-200); margin-bottom: 20px; }
.ftabs-btn { background: transparent; border: 0; padding: 10px 18px; font-size: 14px; font-weight: 500; color: var(--ink-500); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--dur-fast), border-color var(--dur-fast); }
.ftabs-btn:hover { color: var(--ink-800); }
.ftabs-btn.active { color: var(--brand-green); border-bottom-color: var(--brand-green); }
.ftabs-panel { display: none; }
.ftabs-panel.active { display: block; }

/* project (works) detail */
@media (max-width: 820px) { .work-detail-grid { grid-template-columns: 1fr !important; gap: 24px !important; } }
.work-thumb img { transition: opacity var(--dur-fast); }
.work-thumb:hover img { opacity: .85; }
.ds-prose p { margin: 0 0 12px; }
.ds-prose ul, .ds-prose ol { padding-left: 22px; margin: 0 0 12px; }
.ds-prose img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }

/* ===== hero ===== */
.hero { position: relative; overflow: hidden; min-height: 560px; display: flex; align-items: center; background: var(--ink-900); }
.hero-bg { position: absolute; inset: 0; background-image: url('assets/hero-hvac-room.png'); background-position: center right; background-size: cover; background-repeat: no-repeat; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(95deg, rgba(13,18,21,0.94) 0%, rgba(13,18,21,0.88) 40%, rgba(13,18,21,0.55) 70%, rgba(13,18,21,0.15) 100%); }
.hero-inner { position: relative; padding-top: 72px; padding-bottom: 80px; width: 100%; }
.hero-copy { max-width: 600px; color: #fff; }
.hero-copy .ds-eyebrow { color: #6fd29a; }
.hero-copy h1 { margin: 14px 0 18px; font-family: var(--font-display); font-weight: 900; font-size: 56px; line-height: 1.05; color: #fff; letter-spacing: -0.025em; }
.hero-copy .ds-lead { color: #d8e0e3; max-width: 540px; }
.hero-cta { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.hero-cta .btn-secondary { background: transparent; border-color: rgba(255,255,255,0.4); color: #fff; }
.hero-cta .btn-secondary:hover { background: rgba(255,255,255,0.08); border-color: #fff; }
.hero-trust { display: flex; gap: 16px; align-items: center; margin-top: 40px; font-size: 13px; color: #a5b4ba; flex-wrap: wrap; }
.hero-trust strong { color: #fff; font-weight: 900; font-size: 15px; letter-spacing: -0.01em; }
.hero-trust .sep { color: rgba(255,255,255,0.2); }

/* ===== section heads ===== */
.section { padding: 64px 0; }
.section-soft { background: var(--surface-50); }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 32px; gap: 24px; }
.section-head .ds-h2 { margin-top: 6px; }

/* ===== category grid ===== */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cat-tile { display: flex; gap: 16px; align-items: flex-start; padding: 20px; background: #fff; border: 1px solid var(--line-200); border-radius: var(--radius-md); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast), border-color var(--dur-fast); cursor: pointer; }
.cat-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: transparent; }
.cat-ic { width: 56px; height: 56px; border-radius: var(--radius-md); flex: none; display: flex; align-items: center; justify-content: center; }
.cat-red   .cat-ic { background: var(--brand-red-50);   color: var(--brand-red); }
.cat-blue  .cat-ic { background: var(--brand-blue-50);  color: var(--brand-blue); }
.cat-amber .cat-ic { background: var(--brand-amber-50); color: #b97f0a; }
.cat-green .cat-ic { background: var(--brand-green-50); color: var(--brand-green); }
.cat-name { font-family: var(--font-display); font-size: 18px; font-weight: 900; color: var(--ink-900); margin: 0 0 4px; letter-spacing: -0.01em; }
.cat-sub { font-size: 13px; color: var(--ink-500); margin-bottom: 10px; }
.cat-count { font-size: 12px; font-weight: 700; color: var(--brand-green); display: inline-flex; align-items: center; gap: 4px; }

/* ===== product cards ===== */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.product-card { background: #fff; border: 1px solid var(--line-200); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast); }
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.product-thumb { aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; position: relative; color: rgba(0,0,0,0.08); }
.product-thumb.thumb-ac     { background: linear-gradient(180deg, #f7fbfd, #dceaf2); color: var(--brand-blue); }
.product-thumb.thumb-boiler { background: linear-gradient(180deg, #fdf6ec, #f1e6d6); color: #b97f0a; }
.product-thumb.thumb-filter { background: linear-gradient(180deg, #edf7fd, #cfe2ed); color: var(--brand-blue); }
.product-thumb.thumb-heat   { background: linear-gradient(180deg, #fdf2f2, #f0d6d6); color: var(--brand-red); }
.product-glyph { opacity: 0.55; stroke-width: 1.25; }
.product-badge { position: absolute; top: 10px; left: 10px; font-size: 10px; font-weight: 700; padding: 4px 8px; border-radius: var(--radius-pill); letter-spacing: 0.04em; text-transform: uppercase; }
.product-badge.promo { background: var(--brand-red); color: #fff; }
.product-badge.stock { background: var(--brand-green-50); color: var(--brand-green-900); }
.product-fav { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; background: rgba(255,255,255,0.9); border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink-500); cursor: pointer; transition: color var(--dur-fast); }
.product-fav:hover { color: var(--brand-red); }
.product-body { padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-brand { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--ink-400); text-transform: uppercase; }
.product-name { font-size: 14px; font-weight: 500; color: var(--ink-900); line-height: 1.35; min-height: 38px; }
.product-specs { font-size: 11px; color: var(--ink-500); display: flex; gap: 8px; flex-wrap: wrap; }
.product-specs span:not(:last-child)::after { content: '·'; margin-left: 8px; color: var(--line-300); }
.price-row { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.price { font-family: var(--font-display); font-weight: 900; font-size: 20px; color: var(--ink-900); letter-spacing: -0.02em; }
.price-old { text-decoration: line-through; font-size: 12px; color: var(--ink-400); }
.product-cta { display: flex; gap: 6px; margin-top: 10px; }
.product-cta .btn { flex: 1; justify-content: center; }

/* ===== trust trio ===== */
.trust { background: var(--ink-900); padding: 28px 0; color: #fff; }
.trust-inner { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.trust-tile { display: flex; gap: 14px; align-items: center; }
.trust-tile img { width: 36px; height: 36px; object-fit: contain; flex: none; filter: brightness(0) saturate(100%) invert(60%) sepia(40%) saturate(450%) hue-rotate(85deg) brightness(95%); }
.trust-ttl { margin: 0 0 2px; font-family: var(--font-display); font-size: 15px; font-weight: 900; color: #fff; letter-spacing: -0.01em; }
.trust-sub { margin: 0; font-size: 12px; color: #a5b4ba; line-height: 1.4; }

/* ===== work process ===== */
.work { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6,1fr); gap: 12px; position: relative; }
.work::before { content: ''; position: absolute; top: 36px; left: 8%; right: 8%; height: 1px; background: var(--line-200); z-index: 0; }
.work-step { background: #fff; padding: 18px 14px 20px; text-align: center; position: relative; z-index: 1; border: 1px solid var(--line-100); border-radius: var(--radius-md); }
.work-num { font-family: var(--font-mono); font-size: 10px; color: var(--brand-green); font-weight: 700; letter-spacing: 0.08em; }
.work-ic { margin: 10px auto 12px; width: 44px; height: 44px; border-radius: 50%; background: var(--brand-green-50); color: var(--brand-green); display: flex; align-items: center; justify-content: center; }
.work-ttl { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--ink-900); }
.work-sub { margin: 0; font-size: 12px; color: var(--ink-500); line-height: 1.4; }

/* ===== testimonial ===== */
.testimonial { background: var(--surface-cool); padding: 64px 0; }
.testimonial-inner { max-width: 860px; margin: 0 auto; text-align: center; }
.testimonial blockquote { margin: 16px 0 24px; font-family: var(--font-display); font-weight: 500; font-size: 26px; line-height: 1.4; color: var(--ink-900); letter-spacing: -0.015em; }
.testimonial footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 20px; border-top: 1px solid rgba(0,0,0,0.06); font-size: 13px; }
.t-author strong { display: block; color: var(--ink-900); font-size: 14px; }
.t-author span { color: var(--ink-500); }
.t-rating { display: flex; gap: 3px; align-items: center; color: var(--brand-amber); }
.star-filled { fill: currentColor; stroke: currentColor; }
.t-rating-num { color: var(--ink-700); margin-left: 8px; font-size: 12px; }

/* ===== footer ===== */
.footer { background: var(--ink-900); color: #a5b4ba; padding: 56px 0 0; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 40px; }
.footer-brand img { width: 56px; height: 56px; object-fit: contain; background: #fff; padding: 6px; border-radius: var(--radius-md); margin-bottom: 14px; }
.footer-brand p { font-size: 13px; line-height: 1.6; margin: 0 0 14px; }
.footer-contact { font-size: 13px; display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.footer-contact div { display: flex; gap: 8px; align-items: center; color: #c8d2d6; }
.footer-social { display: flex; gap: 10px; }
.footer-social a { width: 32px; height: 32px; background: #2b3a40; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; }
.footer-social img { width: 18px; height: 18px; }
.footer-col h5 { font-family: var(--font-display); font-size: 13px; font-weight: 900; color: #fff; margin: 0 0 14px; letter-spacing: 0.02em; text-transform: uppercase; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-col a { font-size: 13px; color: #a5b4ba; transition: color var(--dur-fast); }
.footer-col a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; padding: 20px 0; border-top: 1px solid #2b3a40; font-size: 12px; color: #6c7a80; }

/* ===== cart drawer ===== */
.scrim { position: fixed; inset: 0; background: rgba(26,35,39,0.5); z-index: 50; opacity: 0; pointer-events: none; transition: opacity var(--dur-med); }
.scrim.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100vw; background: #fff; z-index: 51; transform: translateX(100%); transition: transform var(--dur-med) var(--ease-out); display: flex; flex-direction: column; box-shadow: var(--shadow-3); }
.drawer.open { transform: translateX(0); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line-200); }
.drawer-head h3 { margin: 0; font-family: var(--font-display); font-size: 18px; color: var(--ink-900); font-weight: 900; letter-spacing: -0.01em; }
.drawer-body { flex: 1; overflow-y: auto; padding: 8px 0; }
.drawer-foot { padding: 18px 20px; border-top: 1px solid var(--line-200); }
.cart-item { display: flex; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line-100); }
.cart-item-thumb { width: 56px; height: 56px; background: var(--surface-100); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--ink-400); flex: none; }
.cart-item-meta { flex: 1; font-size: 13px; }
.cart-item-meta .brand { font-family: var(--font-mono); font-size: 10px; color: var(--ink-400); letter-spacing: 0.06em; }
.cart-item-meta .name { font-weight: 500; color: var(--ink-900); margin: 2px 0 4px; }
.cart-item-meta .meta { color: var(--ink-500); }
.cart-empty { padding: 64px 20px; text-align: center; color: var(--ink-500); }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.cart-total .label { color: var(--ink-500); font-size: 13px; }
.cart-total .val { font-family: var(--font-display); font-weight: 900; font-size: 22px; color: var(--ink-900); letter-spacing: -0.02em; }

.ds-eyebrow { font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-green); }
.ds-lead { font-size: 18px; line-height: 1.7; color: var(--ink-700); margin: 0; }
.ds-h1 { font-family: var(--font-display); font-weight: 900; font-size: 48px; line-height: 1.1; color: var(--ink-900); margin: 0; letter-spacing: -0.02em; }
.ds-h2 { font-family: var(--font-display); font-weight: 900; font-size: 32px; line-height: 1.15; color: var(--ink-900); margin: 0; letter-spacing: -0.015em; }
.ds-link { color: var(--brand-blue); font-weight: 500; font-size: 14px; border-bottom: 1px solid transparent; transition: border-color var(--dur-fast); }
.ds-link:hover { border-bottom-color: currentColor; color: var(--brand-blue-700); }

/* ============================================================
   PRODUCT PAGE
   ============================================================ */
.crumb { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--ink-500); }
.crumb-item { display: inline-flex; gap: 6px; align-items: center; }
.crumb-item a { color: var(--ink-500); }
.crumb-item:last-child a { color: var(--ink-900); font-weight: 500; }
.crumb-item a:hover { color: var(--brand-green); }

.pp { padding: 8px 0 24px; }
.pp-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }

/* gallery */
.gallery { display: flex; flex-direction: column; gap: 12px; }
.gallery-main { aspect-ratio: 1/1; background: var(--surface-50); border: 1px solid var(--line-200); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; position: relative; }
.gallery-main.thumb-ac { background: linear-gradient(180deg, #f7fbfd, #dceaf2); color: var(--brand-blue); }
.gallery-glyph { opacity: 0.5; stroke-width: 1.1; }
.gallery-zoom { position: absolute; bottom: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.92); display: flex; align-items: center; justify-content: center; color: var(--ink-700); cursor: pointer; box-shadow: var(--shadow-1); }
.gallery-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.gallery-thumb { aspect-ratio: 1/1; background: var(--surface-50); border: 1px solid var(--line-200); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; cursor: pointer; color: rgba(0,0,0,0.3); transition: border-color var(--dur-fast); }
.gallery-thumb.thumb-ac { background: linear-gradient(180deg, #f7fbfd, #e7eff3); color: var(--brand-blue); }
.gallery-thumb:hover { border-color: var(--brand-green); }
.gallery-thumb.active { border-color: var(--brand-green); box-shadow: 0 0 0 2px rgba(1,147,71,0.18); }

/* info column */
.pp-info { display: flex; flex-direction: column; gap: 14px; }
.pp-brand { font-size: 12px; color: var(--ink-500); }
.pp-brand strong { color: var(--ink-900); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; }
.pp-name { font-family: var(--font-display); font-weight: 900; font-size: 32px; line-height: 1.15; letter-spacing: -0.015em; color: var(--ink-900); margin: 0; }
.pp-rating { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--ink-500); }
.t-rating { color: var(--brand-amber); display: inline-flex; gap: 2px; }
.pp-rating-num { color: var(--ink-700); font-weight: 500; }
.pp-rating .sep { color: var(--line-300); }
.pp-stock { color: var(--brand-green); font-weight: 500; display: inline-flex; gap: 4px; align-items: center; }
.pp-sku { color: var(--ink-500); }
.pp-sku .ds-mono { color: var(--ink-800); }

.pp-price-card { background: var(--surface-50); border: 1px solid var(--line-200); border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.pp-price-main { display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.pp-price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pp-price { font-family: var(--font-display); font-weight: 900; font-size: 36px; color: var(--ink-900); letter-spacing: -0.025em; }
.pp-price-old { text-decoration: line-through; color: var(--ink-400); font-size: 16px; }
.pp-price-save { background: var(--brand-red); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-pill); letter-spacing: 0.04em; }
.pp-price-meta { font-size: 12px; color: var(--ink-500); margin-top: 4px; }
.pp-financing { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fff; border-radius: var(--radius-md); border: 1px solid var(--line-200); }
.pp-financing > i { color: var(--brand-blue); }
.pp-financing strong { display: block; font-weight: 700; color: var(--ink-900); font-size: 14px; line-height: 1.2; }
.pp-financing small { display: block; font-size: 11px; color: var(--ink-500); margin-top: 1px; }

.pp-install { background: #fff; border: 1.5px solid var(--brand-green); border-radius: var(--radius-md); padding: 14px 16px; }
.pp-install-row { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.pp-install-row input { width: 18px; height: 18px; accent-color: var(--brand-green); flex: none; }
.pp-install-row > span:nth-child(2) { flex: 1; }
.pp-install-row strong { display: block; font-size: 14px; font-weight: 700; color: var(--ink-900); }
.pp-install-row small { display: block; font-size: 12px; color: var(--ink-500); margin-top: 2px; line-height: 1.4; }
.pp-install-price { font-family: var(--font-display); font-weight: 900; color: var(--brand-green); font-size: 16px; }

.pp-actions { display: flex; gap: 10px; align-items: stretch; }
.qty { display: flex; align-items: center; border: 1px solid var(--line-300); border-radius: var(--radius-md); background: #fff; }
.qty button { width: 38px; height: 100%; background: transparent; border: 0; cursor: pointer; color: var(--ink-700); }
.qty button:hover { background: var(--surface-50); }
.qty span { padding: 0 12px; min-width: 36px; text-align: center; font-weight: 700; color: var(--ink-900); }
.pp-add { flex: 1; justify-content: center; }

.pp-perks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px 14px; font-size: 12px; color: var(--ink-700); }
.pp-perks li { display: flex; gap: 6px; align-items: center; }
.pp-perks li i { color: var(--brand-green); }

/* tabs */
.pp-tabs-wrap { border-bottom: 1px solid var(--line-200); background: #fff; position: sticky; top: 116px; z-index: 5; }
.pp-tabs { display: flex; gap: 0; }
.pp-tabs button { padding: 16px 22px; background: transparent; border: 0; cursor: pointer; font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--ink-500); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pp-tabs button:hover { color: var(--ink-900); }
.pp-tabs button.active { color: var(--brand-green); border-bottom-color: var(--brand-green); font-weight: 700; }

/* desc */
.pp-desc { max-width: 760px; }
.pp-desc p { margin: 0 0 16px; line-height: 1.7; color: var(--ink-700); }
.pp-desc .ds-lead { margin-bottom: 20px; }

/* specs */
.pp-specs { max-width: 800px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.spec-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line-100); gap: 14px; }
.spec-label { color: var(--ink-500); font-size: 13px; }
.spec-value { color: var(--ink-900); font-weight: 500; font-size: 13px; text-align: right; }
.spec-value.hot { color: var(--brand-green); font-weight: 700; }

/* reviews */
.pp-reviews { max-width: 760px; }
.reviews-summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 20px; background: var(--surface-50); border-radius: var(--radius-md); margin-bottom: 16px; }
.reviews-score { display: flex; align-items: center; gap: 16px; }
.reviews-score .big { font-family: var(--font-display); font-weight: 900; font-size: 48px; line-height: 1; color: var(--ink-900); letter-spacing: -0.03em; }
.reviews-score small { display: block; font-size: 12px; color: var(--ink-500); margin-top: 4px; }
.review { padding: 18px 0; border-bottom: 1px solid var(--line-100); }
.review header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.review-author { display: flex; align-items: center; gap: 10px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--brand-green); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.review strong { color: var(--ink-900); font-size: 14px; }
.review-date { font-size: 11px; color: var(--ink-500); }
.review-stars { color: var(--brand-amber); display: flex; gap: 1px; }
.star-empty { color: var(--line-300); stroke: currentColor; fill: none; }
.review p { margin: 0; line-height: 1.6; color: var(--ink-700); font-size: 14px; }

/* ============================================================
   SERVICES PAGE
   ============================================================ */
.services-hero { background: var(--ink-900); color: #fff; padding: 72px 0 56px; }
.services-hero .ds-eyebrow { color: #6fd29a; }
.services-hero h1 { font-family: var(--font-display); font-weight: 900; font-size: 48px; line-height: 1.1; letter-spacing: -0.02em; color: #fff; margin: 12px 0 18px; max-width: 800px; }
.services-hero .ds-lead { color: #c8d2d6; max-width: 720px; }
.services-hero-trust { display: flex; gap: 32px; margin-top: 32px; flex-wrap: wrap; font-size: 13px; color: #a5b4ba; }
.services-hero-trust div { display: flex; align-items: center; gap: 8px; }
.services-hero-trust strong { color: #fff; font-weight: 700; }

.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.svc-card { background: #fff; border: 1px solid var(--line-200); border-radius: var(--radius-lg); padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; transition: transform var(--dur-fast), box-shadow var(--dur-fast), border-color var(--dur-fast); }
.svc-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.svc-ic { width: 56px; height: 56px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.svc-green .svc-ic { background: var(--brand-green-50); color: var(--brand-green); }
.svc-blue  .svc-ic { background: var(--brand-blue-50);  color: var(--brand-blue); }
.svc-red   .svc-ic { background: var(--brand-red-50);   color: var(--brand-red); }
.svc-title { font-family: var(--font-display); font-weight: 900; font-size: 22px; line-height: 1.15; color: var(--ink-900); letter-spacing: -0.015em; margin: 0; }
.svc-desc { font-size: 13px; line-height: 1.6; color: var(--ink-500); margin: 0; }
.svc-bullets { list-style: none; padding: 0; margin: 4px 0 8px; display: flex; flex-direction: column; gap: 8px; }
.svc-bullets li { font-size: 13px; color: var(--ink-700); display: flex; gap: 8px; align-items: flex-start; line-height: 1.45; }
.svc-bullets i { color: var(--brand-green); flex: none; margin-top: 3px; }
.svc-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-100); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.svc-price { font-family: var(--font-display); font-weight: 900; color: var(--ink-900); font-size: 16px; letter-spacing: -0.01em; }

/* reasons */
.reasons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.reason { background: #fff; border: 1px solid var(--line-200); border-radius: var(--radius-md); padding: 24px; }
.reason-num { font-family: var(--font-display); font-weight: 900; font-size: 52px; line-height: 1; color: var(--brand-green); letter-spacing: -0.04em; margin-bottom: 8px; }
.reason h4 { font-family: var(--font-display); font-weight: 900; font-size: 16px; color: var(--ink-900); margin: 0 0 6px; letter-spacing: -0.01em; }
.reason p { font-size: 13px; line-height: 1.55; color: var(--ink-500); margin: 0; }

.services-cta { background: var(--brand-green); color: #fff; padding: 56px 0; }
.services-cta-inner { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.services-cta h2 { font-family: var(--font-display); font-weight: 900; font-size: 32px; letter-spacing: -0.02em; color: #fff; margin: 0 0 6px; }
.services-cta p { color: #d0ebda; margin: 0; font-size: 16px; }
.services-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.services-cta .btn-primary { background: #fff; color: var(--brand-green); }
.services-cta .btn-primary:hover { background: #f5f5f5; }
.services-cta .btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.services-cta .btn-secondary:hover { background: rgba(255,255,255,0.1); }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-hero { padding: 56px 0 32px; background: var(--surface-cool); }
.contact-hero .ds-eyebrow { color: var(--brand-green); }
.contact-hero h1 { font-family: var(--font-display); font-weight: 900; font-size: 44px; letter-spacing: -0.02em; color: var(--ink-900); margin: 12px 0 14px; max-width: 800px; line-height: 1.1; }
.contact-hero .ds-lead { max-width: 720px; }

.contact-main { padding: 40px 0 60px; }
.contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; }

.phone-block { display: flex; gap: 18px; align-items: center; padding: 22px 24px; background: var(--brand-green); color: #fff; border-radius: var(--radius-lg); transition: background var(--dur-fast); }
.phone-block:hover { background: var(--brand-green-700); }
.phone-block > i { color: rgba(255,255,255,0.6); }
.phone-block small { display: block; font-size: 12px; color: rgba(255,255,255,0.7); }
.phone-block strong { display: block; font-family: var(--font-display); font-weight: 900; font-size: 28px; letter-spacing: -0.015em; line-height: 1.1; margin: 2px 0 4px; }
.phone-block span { display: block; font-size: 12px; color: rgba(255,255,255,0.8); }

.contact-msgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.msg { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #fff; border: 1px solid var(--line-200); border-radius: var(--radius-md); transition: border-color var(--dur-fast), transform var(--dur-fast); }
.msg:hover { border-color: var(--brand-green); transform: translateY(-1px); }
.msg img { width: 24px; height: 24px; flex: none; }
.msg strong { display: block; font-size: 13px; font-weight: 700; color: var(--ink-900); }
.msg small { display: block; font-size: 11px; color: var(--ink-500); }

.offices { margin-top: 28px; }
.offices h3 { margin: 0 0 14px; }
.office { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--line-100); }
.office:last-child { border-bottom: 0; }
.office-tag { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; background: var(--surface-100); color: var(--ink-700); padding: 4px 8px; border-radius: var(--radius-sm); flex: none; }
.office-body strong { display: block; font-size: 14px; color: var(--ink-900); font-weight: 500; margin-bottom: 4px; }
.office-body span { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--ink-500); margin-top: 2px; }
.office-body span i { color: var(--ink-400); }

/* form */
.contact-form { background: #fff; border: 1px solid var(--line-200); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: 14px; }
.contact-form > header { margin-bottom: 4px; }
.contact-form > header h3 { margin: 0; }
.contact-form .ds-small { color: var(--ink-500); margin-top: 2px; }
.form-tabs { display: flex; gap: 4px; padding: 4px; background: var(--surface-50); border-radius: var(--radius-md); }
.form-tabs button { flex: 1; padding: 8px 10px; background: transparent; border: 0; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500; color: var(--ink-500); cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast); }
.form-tabs button:hover { color: var(--ink-900); }
.form-tabs button.active { background: #fff; color: var(--brand-green); box-shadow: var(--shadow-1); font-weight: 700; }

.contact-form .field { display: flex; flex-direction: column; gap: 6px; }
.contact-form label { font-size: 12px; font-weight: 500; color: var(--ink-800); }
.contact-form input, .contact-form textarea { font-family: inherit; font-size: 14px; color: var(--ink-800); background: #fff; border: 1px solid var(--line-300); border-radius: var(--radius-md); padding: 10px 12px; outline: 0; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--ink-400); }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--brand-green); box-shadow: 0 0 0 3px rgba(1,147,71,0.18); }
.contact-form .input-icon { position: relative; }
.contact-form .input-icon i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-400); }
.contact-form .input-icon input { padding-left: 36px; }
.consent { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--ink-700); }
.consent input { margin-top: 2px; accent-color: var(--brand-green); }
.form-foot { font-size: 11px; color: var(--ink-500); margin: 4px 0 0; display: flex; gap: 4px; align-items: center; justify-content: center; }

.form-success { text-align: center; padding: 32px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.form-success .success-ic { width: 64px; height: 64px; border-radius: 50%; background: var(--brand-green-50); color: var(--brand-green); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.form-success h3 { font-family: var(--font-display); font-weight: 900; font-size: 22px; color: var(--ink-900); margin: 0; letter-spacing: -0.015em; }
.form-success p { font-size: 14px; color: var(--ink-500); margin: 0 0 8px; }

/* map */
.map-band { padding: 0 0 60px; }
.map { aspect-ratio: 21/9; background:
  linear-gradient(180deg, #e8f0ee 0%, #d6e3dd 100%);
  border-radius: var(--radius-lg); position: relative; overflow: hidden; border: 1px solid var(--line-200); }
.map-grid { position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(1,147,71,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(1,147,71,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 35%, transparent 75%);
}
.map-pin { position: absolute; width: 36px; height: 36px; border-radius: 50% 50% 50% 0; background: var(--brand-red); transform: rotate(-45deg); display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 4px 12px rgba(236,68,69,0.4); }
.map-pin i { transform: rotate(45deg); }
.map-pin-1 { top: 42%; left: 38%; }
.map-pin-2 { top: 58%; left: 56%; }
.map-overlay { position: absolute; top: 24px; left: 24px; background: #fff; padding: 12px 18px; border-radius: var(--radius-md); box-shadow: var(--shadow-2); }
.map-overlay strong { display: block; font-family: var(--font-display); font-weight: 900; font-size: 14px; color: var(--ink-900); letter-spacing: -0.01em; }
.map-overlay span { font-size: 12px; color: var(--ink-500); }

/* ============================================================
   ROUTING / DEMO NAV
   ============================================================ */
.viewer { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); background: rgba(26,35,39,0.96); color: #fff; padding: 4px; border-radius: var(--radius-pill); display: flex; gap: 2px; box-shadow: var(--shadow-3); z-index: 60; font-size: 11px; backdrop-filter: blur(6px); }
.viewer button { background: transparent; border: 0; color: #a5b4ba; padding: 6px 12px; border-radius: var(--radius-pill); cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 500; transition: background var(--dur-fast), color var(--dur-fast); }
.viewer button:hover { color: #fff; }
.viewer button.active { background: var(--brand-green); color: #fff; font-weight: 700; }

/* ============================================================
   LAIOLA — Site additions (promo bar, brand strip, hero variants,
   tabbed product showcase, callback modal, language toggle)
   ============================================================ */

/* ----- promo announcement bar above topbar ----- */
.promo-bar { background: var(--brand-amber); color: var(--ink-900); font-size: 12px; font-weight: 500; }
.promo-bar-inner { display: flex; justify-content: space-between; align-items: center; padding: 7px 24px; gap: 12px; }
.promo-bar strong { font-weight: 900; letter-spacing: -0.005em; }
.promo-bar .pb-msg { display: inline-flex; align-items: center; gap: 8px; }
.promo-bar .pb-msg i { color: var(--brand-red); }
.promo-bar .pb-link { color: var(--ink-900); border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.promo-bar .pb-link:hover { color: var(--brand-red); border-bottom-color: var(--brand-red); }
.promo-close { background: transparent; border: 0; color: var(--ink-700); cursor: pointer; padding: 2px 4px; display: inline-flex; }
.promo-close:hover { color: var(--ink-900); }

/* ----- language toggle ----- */
.lang-toggle { display: inline-flex; background: rgba(255,255,255,0.06); border: 1px solid #2b3a40; border-radius: var(--radius-pill); padding: 2px; gap: 0; }
.lang-toggle button { background: transparent; border: 0; color: #8a9aa1; font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; padding: 3px 10px; border-radius: var(--radius-pill); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: background var(--dur-fast), color var(--dur-fast); }
.lang-toggle button img { width: 14px; height: 10px; object-fit: cover; border-radius: 1px; }
.lang-toggle button.active { background: var(--brand-green); color: #fff; }
.lang-toggle button:hover:not(.active) { color: #fff; }

/* ----- header refinements ----- */
.header-cta { gap: 12px; }
.header-cta-text strong { letter-spacing: -0.015em; }
.brand-mark { transition: transform var(--dur-fast); }
.brand:hover .brand-mark { transform: rotate(-3deg); }

/* ----- hero variants ----- */
.hero { isolation: isolate; }
.hero-copy h1 .accent { color: #6fd29a; }
.hero-stats { display: grid; grid-template-columns: repeat(3, max-content); gap: 28px; margin-top: 36px; align-items: end; }
.hero-stat { display: flex; flex-direction: column; gap: 2px; }
.hero-stat .big { font-family: var(--font-display); font-weight: 900; font-size: 36px; color: #fff; letter-spacing: -0.03em; line-height: 1; }
.hero-stat .lbl { font-size: 11px; color: #a5b4ba; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; }

/* Hero variant — split (copy left, product card right) */
.hero.hero-split { background: var(--surface-cool); min-height: 580px; }
.hero.hero-split .hero-bg, .hero.hero-split .hero-overlay { display: none; }
.hero.hero-split .hero-inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; padding-top: 64px; padding-bottom: 72px; }
.hero.hero-split .hero-copy { color: var(--ink-900); max-width: none; }
.hero.hero-split .hero-copy .ds-eyebrow { color: var(--brand-green); }
.hero.hero-split .hero-copy h1 { color: var(--ink-900); font-size: 52px; }
.hero.hero-split .hero-copy .ds-lead { color: var(--ink-700); }
.hero.hero-split .hero-cta .btn-secondary { background: #fff; border-color: var(--line-300); color: var(--ink-900); }
.hero.hero-split .hero-cta .btn-secondary:hover { background: var(--surface-50); border-color: var(--brand-green); }
.hero.hero-split .hero-stat .big { color: var(--ink-900); }
.hero.hero-split .hero-stat .lbl { color: var(--ink-500); }
.hero.hero-split .hero-stats { gap: 36px; }

.hero-feature {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-200);
}
.hero-feature-img { aspect-ratio: 4/3; background:
  radial-gradient(circle at 70% 35%, #dbe9f1 0%, #c8dceb 40%, #b8cee0 100%);
  display: flex; align-items: center; justify-content: center; position: relative; color: var(--brand-blue); }
.hero-feature-img > svg { width: 60%; height: auto; opacity: 0.85; }
.hero-feature-tag { position: absolute; top: 16px; left: 16px; background: var(--brand-red); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--radius-pill); }
.hero-feature-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 8px; }
.hero-feature-brand { font-family: var(--font-mono); font-size: 10px; color: var(--ink-400); letter-spacing: 0.08em; text-transform: uppercase; }
.hero-feature-name { font-family: var(--font-display); font-weight: 900; font-size: 22px; color: var(--ink-900); letter-spacing: -0.015em; line-height: 1.2; margin: 0; }
.hero-feature-specs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.hero-feature-specs span { font-size: 11px; font-weight: 500; color: var(--ink-700); background: var(--surface-50); padding: 4px 10px; border-radius: var(--radius-pill); border: 1px solid var(--line-200); }
.hero-feature-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line-100); gap: 14px; }
.hero-feature-price { display: flex; flex-direction: column; gap: 2px; }
.hero-feature-price .big { font-family: var(--font-display); font-weight: 900; font-size: 26px; color: var(--ink-900); letter-spacing: -0.02em; line-height: 1; }
.hero-feature-price .old { font-size: 12px; color: var(--ink-400); text-decoration: line-through; }

/* Hero variant — editorial */
.hero.hero-editorial { background: var(--surface-0); color: var(--ink-900); min-height: 0; }
.hero.hero-editorial .hero-bg, .hero.hero-editorial .hero-overlay { display: none; }
.hero.hero-editorial .hero-inner { padding-top: 96px; padding-bottom: 72px; }
.hero.hero-editorial .hero-copy { max-width: 920px; color: var(--ink-900); }
.hero.hero-editorial .hero-copy .ds-eyebrow { color: var(--brand-green); }
.hero.hero-editorial .hero-copy h1 { color: var(--ink-900); font-size: 76px; line-height: 0.98; letter-spacing: -0.035em; }
.hero.hero-editorial .hero-copy h1 .accent { color: var(--brand-green); }
.hero.hero-editorial .hero-copy h1 .accent-red { color: var(--brand-red); }
.hero.hero-editorial .hero-copy h1 .accent-blue { color: var(--brand-blue); }
.hero.hero-editorial .hero-copy .ds-lead { color: var(--ink-700); max-width: 640px; font-size: 19px; }
.hero.hero-editorial .hero-cta .btn-secondary { background: #fff; border-color: var(--line-300); color: var(--ink-900); }
.hero.hero-editorial .hero-cta .btn-secondary:hover { background: var(--surface-50); border-color: var(--brand-green); }
.hero.hero-editorial .hero-stat .big { color: var(--ink-900); }
.hero.hero-editorial .hero-stat .lbl { color: var(--ink-500); }
.hero.hero-editorial .hero-stats {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--line-200);
  grid-template-columns: repeat(4, max-content);
  gap: 64px;
}

/* ----- brand strip ----- */
.brands { background: #fff; padding: 36px 0; border-top: 1px solid var(--line-100); border-bottom: 1px solid var(--line-100); }
.brands-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.brands-label { font-size: 12px; color: var(--ink-500); display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.brands-label::after { content: ''; flex: 0 0 32px; height: 1px; background: var(--line-200); }
.brands-row { display: flex; align-items: center; gap: 36px; flex: 1; justify-content: space-between; flex-wrap: wrap; row-gap: 18px; }
.brands-row span { font-family: var(--font-display); font-weight: 900; color: var(--ink-300); font-size: 18px; letter-spacing: -0.01em; transition: color var(--dur-med); cursor: default; line-height: 1; }
.brands-row span:hover { color: var(--ink-700); }
.brands-row span em { font-style: normal; font-weight: 400; color: inherit; font-size: 11px; vertical-align: super; margin-left: 2px; }

/* ----- product showcase (tabbed) ----- */
.showcase-tabs { display: inline-flex; background: var(--surface-50); border: 1px solid var(--line-200); border-radius: var(--radius-pill); padding: 4px; gap: 2px; }
.showcase-tabs button { background: transparent; border: 0; padding: 8px 16px; border-radius: var(--radius-pill); font-family: inherit; font-size: 13px; font-weight: 500; color: var(--ink-500); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: background var(--dur-fast), color var(--dur-fast); white-space: nowrap; }
.showcase-tabs button:hover:not(.active) { color: var(--ink-900); }
.showcase-tabs button.active { background: #fff; color: var(--ink-900); box-shadow: var(--shadow-1); font-weight: 700; }
.showcase-tabs button.active i { color: var(--brand-green); }

.section-head.compact { margin-bottom: 24px; }

/* ----- a cleaner "section-soft" pattern that uses surface-cool for variety ----- */
.section-cool { background: var(--surface-cool); }

/* ----- callback modal ----- */
.modal { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity var(--dur-med); }
.modal.open { opacity: 1; pointer-events: auto; }
.modal-card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-3); width: 100%; max-width: 460px; padding: 28px 28px 24px; transform: translateY(8px); transition: transform var(--dur-med) var(--ease-out); }
.modal.open .modal-card { transform: translateY(0); }
.modal-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 4px; }
.modal-card h3 { font-family: var(--font-display); font-weight: 900; font-size: 22px; letter-spacing: -0.015em; color: var(--ink-900); margin: 0; }
.modal-card p.sub { font-size: 13px; color: var(--ink-500); margin: 6px 0 18px; }
.modal-close { background: transparent; border: 0; cursor: pointer; color: var(--ink-500); padding: 4px; }
.modal-close:hover { color: var(--ink-900); }
.modal-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.modal-field label { font-size: 12px; color: var(--ink-800); font-weight: 500; }
.modal-field input { font-family: inherit; font-size: 14px; color: var(--ink-800); border: 1px solid var(--line-300); border-radius: var(--radius-md); padding: 10px 12px; outline: 0; }
.modal-field input:focus { border-color: var(--brand-green); box-shadow: 0 0 0 3px rgba(1,147,71,0.18); }
.modal-actions { display: flex; gap: 10px; margin-top: 12px; }
.modal-actions .btn { flex: 1; justify-content: center; }
.modal-foot { font-size: 11px; color: var(--ink-500); text-align: center; margin-top: 10px; }

.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--ink-900); color: #fff; padding: 12px 18px; border-radius: var(--radius-md); box-shadow: var(--shadow-3); font-size: 13px; display: flex; align-items: center; gap: 8px; opacity: 0; pointer-events: none; transition: opacity var(--dur-med), transform var(--dur-med) var(--ease-out); z-index: 80; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.toast i { color: #6fd29a; }

/* ----- density tweaks ----- */
body.density-spacious .section { padding: 88px 0; }
body.density-compact .section { padding: 44px 0; }
body.density-spacious .cat-grid { gap: 18px; }
body.density-compact .cat-grid { gap: 10px; }
body.density-spacious .product-grid { gap: 20px; }
body.density-compact .product-grid { gap: 10px; }

/* ----- accent token override (driven by Tweaks) ----- */
body[data-accent="blue"] {
  --accent: var(--brand-blue);
  --accent-fg: #fff;
}
body[data-accent="blue"] .btn-primary { background: var(--brand-blue); }
body[data-accent="blue"] .btn-primary:hover { background: var(--brand-blue-700); }
body[data-accent="blue"] .btn-secondary { color: var(--brand-blue); border-color: var(--brand-blue); }
body[data-accent="blue"] .btn-secondary:hover { background: var(--brand-blue-50); }
body[data-accent="blue"] .nav-cat { background: var(--brand-blue); }
body[data-accent="blue"] .nav-cat:hover { background: var(--brand-blue-700); }
body[data-accent="blue"] .nav-items li.active a,
body[data-accent="blue"] .nav-items a:hover { color: var(--brand-blue); border-bottom-color: var(--brand-blue); }
body[data-accent="blue"] .header-cta i { color: var(--brand-blue); }
body[data-accent="blue"] .icon-btn.cart { background: var(--brand-blue-50); color: var(--brand-blue-700); }

/* ----- heritage / since-1997 band ----- */
.heritage { background: var(--ink-900); color: #fff; padding: 32px 0; border-top: 1px solid #2b3a40; }
.heritage-inner { display: grid; grid-template-columns: auto 1fr auto auto auto auto; gap: 28px; align-items: center; }
.heritage-mark { display: flex; align-items: center; gap: 14px; padding-right: 24px; border-right: 1px solid #2b3a40; }
.heritage-mark .yrs { font-family: var(--font-display); font-weight: 900; font-size: 50px; letter-spacing: -0.04em; color: #fff; line-height: 1; }
.heritage-mark .ago { display: flex; flex-direction: column; gap: 3px; }
.heritage-mark .ago strong { font-family: var(--font-display); font-weight: 900; font-size: 13px; color: #fff; letter-spacing: 0.04em; text-transform: uppercase; }
.heritage-mark .ago span { font-size: 12px; color: #d8dee1; letter-spacing: 0.06em; text-transform: uppercase; }
.heritage-tag { font-size: 13px; color: #d8dee1; line-height: 1.5; max-width: 360px; }
.heritage-stat { display: flex; flex-direction: column; gap: 4px; padding: 0 16px; border-left: 1px solid #2b3a40; }
.heritage-stat strong { font-family: var(--font-display); font-weight: 900; font-size: 28px; color: #fff; letter-spacing: -0.02em; line-height: 1.05; }
.heritage-stat span { font-size: 12px; color: #d8dee1; text-transform: uppercase; letter-spacing: 0.06em; }

/* ----- showrooms ----- */
.showrooms { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.showroom { background: #fff; border: 1px solid var(--line-200); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--dur-fast), box-shadow var(--dur-fast); }
.showroom:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.showroom-img { aspect-ratio: 16/9; background:
  linear-gradient(135deg, #e7f0ee 0%, #d8e3df 50%, #c9d6d1 100%);
  position: relative; overflow: hidden;
}
.showroom-img-placeholder {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(1,147,71,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(1,147,71,0.10) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at 50% 60%, #000 30%, transparent 75%);
}
.showroom-img-storefront {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 78%; height: 60%;
  background: #fff;
  border: 1px solid #c4d0cb;
  border-bottom-width: 6px;
  border-bottom-color: var(--brand-green);
  border-radius: 4px 4px 0 0;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 14px;
  box-shadow: 0 12px 24px rgba(20,40,30,0.15);
}
.showroom-img-storefront::before {
  content: ''; position: absolute; left: 12px; right: 12px; top: 12px; bottom: 28px;
  background: linear-gradient(180deg, #d4e2dc 0%, #e3eee9 100%);
  border-radius: 2px;
  background-image: linear-gradient(90deg, rgba(255,255,255,0.6) 0 1px, transparent 1px 50%, rgba(255,255,255,0.6) 50% 51%, transparent 51% 100%);
  background-size: 24px 100%;
}
.showroom-img-storefront span {
  position: relative;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 14px;
  color: var(--brand-green);
  letter-spacing: -0.01em;
}
.showroom-img-tag { position: absolute; top: 12px; left: 12px; background: #fff; color: var(--ink-900); padding: 4px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; box-shadow: var(--shadow-1); }
.showroom-img-tag.flagship { background: var(--brand-green); color: #fff; }
.showroom-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; }
.showroom-body h3 { font-family: var(--font-display); font-weight: 900; font-size: 22px; letter-spacing: -0.015em; color: var(--ink-900); margin: 0; }
.showroom-meta { font-size: 13px; color: var(--ink-500); display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.showroom-meta div { display: flex; gap: 8px; align-items: flex-start; }
.showroom-meta i { color: var(--ink-400); flex: none; margin-top: 1px; }
.showroom-meta strong { color: var(--ink-800); font-weight: 500; }
.showroom-foot { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--line-100); margin-top: 4px; }
.showroom-foot .open-now { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--brand-green); font-weight: 700; }
.showroom-foot .open-now::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-green); box-shadow: 0 0 0 4px rgba(1,147,71,0.18); }

/* ----- card-style tweak overrides ----- */
body[data-card-style="shadow"] .product-card,
body[data-card-style="shadow"] .cat-tile,
body[data-card-style="shadow"] .showroom {
  border: 0;
  box-shadow: var(--shadow-1);
}
body[data-card-style="shadow"] .product-card:hover,
body[data-card-style="shadow"] .cat-tile:hover,
body[data-card-style="shadow"] .showroom:hover {
  box-shadow: var(--shadow-3);
}
body[data-card-style="flat"] .product-card,
body[data-card-style="flat"] .cat-tile,
body[data-card-style="flat"] .showroom {
  border: 0;
  box-shadow: none;
  background: var(--surface-50);
}
body[data-card-style="flat"] .product-card:hover,
body[data-card-style="flat"] .cat-tile:hover,
body[data-card-style="flat"] .showroom:hover {
  background: #fff;
  box-shadow: none;
  transform: translateY(-2px);
}
body[data-card-style="flat"] .product-thumb { background: var(--surface-100) !important; }
body[data-card-style="flat"] .showroom-body { background: var(--surface-50); }
body[data-card-style="flat"] .product-card,
body[data-card-style="flat"] .cat-tile,
body[data-card-style="flat"] .showroom { transition: transform var(--dur-fast), background var(--dur-fast); }
body[data-card-style="flat"] .section-soft { background: #fff; }

/* ----- nav style tweak: mega ----- */
body[data-nav-style="mega"] .nav-items a { padding: 18px 18px; font-weight: 700; letter-spacing: -0.005em; }
body[data-nav-style="mega"] .nav-cat { padding: 18px 20px; }
body[data-nav-style="mega"] .nav-callback { padding: 18px 0; }

/* ============================================================
   CATALOG PAGE
   ============================================================ */
.catalog-hero { background: var(--surface-cool); padding: 36px 0 24px; border-bottom: 1px solid var(--line-200); }
.catalog-hero .crumb { margin-bottom: 14px; }
.catalog-hero h1 { font-family: var(--font-display); font-weight: 900; font-size: 36px; letter-spacing: -0.02em; color: var(--ink-900); margin: 0 0 12px; line-height: 1.1; }
.catalog-hero p.sub { font-size: 14px; color: var(--ink-500); margin: 0; max-width: 600px; line-height: 1.55; }
.catalog-hero-meta { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--ink-700); margin-top: 14px; }
.catalog-hero-meta strong { color: var(--ink-900); font-weight: 700; }
.catalog-hero-meta span.sep { color: var(--line-300); }

.catalog-layout { display: grid; grid-template-columns: 260px 1fr; gap: 32px; padding: 32px 0 60px; align-items: start; }

.filters { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 132px; }
.filter-block { background: #fff; border: 1px solid var(--line-200); border-radius: var(--radius-md); padding: 16px 18px; }
.filter-block h4 { font-family: var(--font-display); font-weight: 900; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-900); margin: 0 0 12px; display: flex; align-items: center; justify-content: space-between; }
.filter-block h4 .count { color: var(--ink-500); font-weight: 400; font-size: 11px; letter-spacing: 0; text-transform: none; }
.filter-list { display: flex; flex-direction: column; gap: 8px; }
.filter-check { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-700); cursor: pointer; padding: 4px 0; }
.filter-check input { accent-color: var(--brand-green); width: 16px; height: 16px; flex: none; }
.filter-check .lbl { flex: 1; }
.filter-check .cnt { color: var(--ink-400); font-size: 11px; font-variant-numeric: tabular-nums; }
.filter-check:hover .lbl { color: var(--ink-900); }
.filter-check input:checked + .lbl { color: var(--ink-900); font-weight: 500; }

.filter-price-track { position: relative; height: 4px; background: var(--line-200); border-radius: 2px; margin: 4px 6px 14px; }
.filter-price-track .fill { position: absolute; top: 0; bottom: 0; background: var(--brand-green); border-radius: 2px; }
.filter-price-track .handle { position: absolute; top: -6px; width: 16px; height: 16px; background: #fff; border: 2px solid var(--brand-green); border-radius: 50%; box-shadow: var(--shadow-1); transform: translateX(-50%); }
.filter-price-inputs { display: flex; gap: 8px; align-items: center; }
.filter-price-inputs input { flex: 1; width: 100%; padding: 7px 10px; border: 1px solid var(--line-300); border-radius: var(--radius-sm); font-size: 13px; font-family: inherit; color: var(--ink-900); outline: 0; font-variant-numeric: tabular-nums; }
.filter-price-inputs input:focus { border-color: var(--brand-green); box-shadow: 0 0 0 3px rgba(1,147,71,0.18); }
.filter-price-inputs span { font-size: 12px; color: var(--ink-400); }

.filter-pill-row { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 5px 12px; background: var(--brand-green-50); color: var(--brand-green-900); border-radius: var(--radius-pill); font-size: 12px; font-weight: 500; }
.filter-pill button { background: transparent; border: 0; padding: 0; cursor: pointer; color: var(--brand-green-900); display: inline-flex; }
.filter-pill button:hover { color: var(--brand-red); }
.filter-clear { background: transparent; border: 0; color: var(--brand-blue); font-size: 12px; cursor: pointer; padding: 4px 0; text-decoration: underline; text-underline-offset: 2px; }
.filter-clear:hover { color: var(--brand-blue-700); }

.catalog-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line-200); margin-bottom: 20px; flex-wrap: wrap; }
.catalog-toolbar-count { font-size: 13px; color: var(--ink-500); }
.catalog-toolbar-count strong { color: var(--ink-900); font-weight: 700; }
.catalog-toolbar-right { display: flex; gap: 10px; align-items: center; }
.catalog-sort { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 12px; background: #fff; border: 1px solid var(--line-300); border-radius: var(--radius-md); font-size: 13px; color: var(--ink-700); cursor: pointer; }
.catalog-sort:hover { border-color: var(--brand-green); color: var(--ink-900); }
.catalog-sort select { border: 0; background: transparent; font-family: inherit; font-size: 13px; color: var(--ink-900); cursor: pointer; outline: 0; font-weight: 500; padding-right: 4px; }
.view-toggle { display: inline-flex; border: 1px solid var(--line-300); border-radius: var(--radius-md); overflow: hidden; }
.view-toggle button { background: #fff; border: 0; padding: 7px 10px; cursor: pointer; color: var(--ink-500); display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.view-toggle button.active { background: var(--surface-50); color: var(--ink-900); }
.view-toggle button + button { border-left: 1px solid var(--line-200); }

.catalog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.catalog-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line-100); }
.catalog-pagination button {
  background: #fff; border: 1px solid var(--line-300); color: var(--ink-700);
  width: 38px; height: 38px; border-radius: var(--radius-md);
  font-family: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.catalog-pagination button:hover:not(.gap) { border-color: var(--brand-green); color: var(--ink-900); }
.catalog-pagination button.active { background: var(--brand-green); color: #fff; border-color: var(--brand-green); }
.catalog-pagination button.gap { border: 0; background: transparent; cursor: default; }

/* small screens */
@media (max-width: 1000px) {
  .cat-grid, .product-grid, .footer-grid, .work, .trust-inner { grid-template-columns: 1fr 1fr; }
  .hero-copy h1 { font-size: 40px; }
  .topbar-links { display: none; }
  .hero.hero-split .hero-inner { grid-template-columns: 1fr; }
  .hero.hero-editorial .hero-copy h1 { font-size: 48px; }
  .catalog-layout { grid-template-columns: 1fr; }
  .filters { position: static; }
  .catalog-grid { grid-template-columns: repeat(2, 1fr); }
  .pp-inner { grid-template-columns: 1fr; }
  .showrooms { grid-template-columns: 1fr; }
  .heritage-inner { grid-template-columns: auto 1fr; row-gap: 18px; }
}

/* ─── added by gap-analysis pass (2026-05-26) ─── */

/* Floating Viber/WhatsApp/Messenger column — sticky right edge */
.floating-contacts { position:fixed; right:14px; bottom:80px; z-index:90;
  display:flex; flex-direction:column; gap:10px; }
.fc-btn { display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:50%; color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.18), 0 2px 4px rgba(0,0,0,.12);
  text-decoration:none; transition:transform .15s ease, box-shadow .15s ease; }
.fc-btn:hover { transform:translateY(-2px) scale(1.04);
  box-shadow:0 10px 24px rgba(0,0,0,.22), 0 3px 6px rgba(0,0,0,.14); }
@media (max-width:640px) {
  .floating-contacts { right:10px; bottom:70px; }
  .fc-btn { width:42px; height:42px; }
}

/* Page header (generic) */
.page-header { background:var(--paper-50, #f7faf7); border-bottom:1px solid var(--ink-100, #e6ebe9); }

/* Projects */
.projects-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
@media (max-width:900px) { .projects-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) { .projects-grid { grid-template-columns:1fr; } }
.project-card { border:1px solid var(--ink-100,#e6ebe9); border-radius:14px; overflow:hidden;
  background:#fff; transition:transform .15s, box-shadow .15s; }
.project-card:hover { transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,.06); }
.project-thumb { position:relative; aspect-ratio:16/10; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#eef5f1,#dceae2); color:var(--brand-green,#019347); }
.project-thumb.thumb-boiler { background:linear-gradient(135deg,#fdf3e6,#f7e2c4); color:#b86b1f; }
.project-thumb.thumb-water { background:linear-gradient(135deg,#e7f1f8,#c9dbe9); color:#1d6fa6; }
.project-year { position:absolute; top:10px; right:10px; background:rgba(0,0,0,.65); color:#fff;
  font-size:11px; font-weight:600; padding:3px 8px; border-radius:6px; }
.project-body { padding:16px; }
.project-body h3 { margin:4px 0 10px; font-size:16px; }
.project-tags { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:6px; }
.project-tags li { font-size:11px; padding:3px 8px; background:var(--ink-50,#f1f4f3);
  border:1px solid var(--ink-100,#e6ebe9); border-radius:999px; color:var(--ink-700,#404e53); }

/* Promo feature (Casa Verde) */
.promo-feature { background:#fff; border:1px solid var(--ink-100,#e6ebe9); border-radius:18px;
  padding:36px; max-width:880px; }
.promo-feature-tag { display:inline-block; color:#fff; padding:6px 12px; border-radius:999px;
  font-size:12px; font-weight:600; letter-spacing:.02em; margin-bottom:14px; }
.promo-bullets { list-style:none; padding:0; margin:18px 0; display:flex; flex-direction:column; gap:10px; }
.promo-bullets li { display:flex; align-items:center; gap:10px; color:var(--ink-700,#404e53); }
.promo-bullets svg, .promo-bullets i { color:var(--brand-green,#019347); }
.promo-feature-cta { display:flex; align-items:center; gap:20px; margin-top:24px; flex-wrap:wrap; }

/* News */
.news-list { list-style:none; padding:0; margin:0; }
.news-row { padding:18px 0; border-bottom:1px solid var(--ink-100,#e6ebe9); }
.news-row:last-child { border-bottom:0; }
.news-meta { display:flex; gap:12px; align-items:center; margin-bottom:6px;
  font-size:12px; color:var(--ink-500,#6b7a80); }
.news-cat { background:var(--ink-50,#f1f4f3); padding:2px 8px; border-radius:4px; font-weight:600;
  color:var(--ink-700,#404e53); }
.news-row h3 { margin:0; font-size:18px; }
.news-row h3 a { color:inherit; text-decoration:none; }
.news-row h3 a:hover { color:var(--brand-green,#019347); }

/* Careers */
.jobs-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:800px) { .jobs-grid { grid-template-columns:1fr; } }
.job-card { padding:24px; border:1px solid var(--ink-100,#e6ebe9); border-radius:12px; background:#fff; }
.job-card h3 { margin:0 0 6px; font-size:17px; }
.job-meta { color:var(--ink-500,#6b7a80); font-size:13px; margin:0 0 16px; }

/* Brands page */
.brands-page-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width:900px) { .brands-page-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px) { .brands-page-grid { grid-template-columns:1fr; } }
.brand-card { padding:24px; border:1px solid var(--ink-100,#e6ebe9); border-radius:12px; background:#fff;
  position:relative; min-height:120px; display:flex; flex-direction:column; justify-content:center; }
.brand-card.exclusive { border-color:var(--brand-green,#019347); background:linear-gradient(135deg,#f7fbf8,#fff); }
.brand-card-name { font-size:18px; font-weight:700; letter-spacing:.04em; color:var(--ink-900,#1a2327); }
.brand-card-note { font-size:13px; color:var(--ink-500,#6b7a80); margin-top:6px; }
.brand-card-tag { position:absolute; top:10px; right:10px; background:var(--brand-green,#019347);
  color:#fff; font-size:10px; font-weight:600; padding:3px 8px; border-radius:999px; letter-spacing:.02em; }

/* Contact page */
.contact-layout { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
@media (max-width:800px) { .contact-layout { grid-template-columns:1fr; } }
.contact-info h3 { font-size:14px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-500,#6b7a80); margin:0 0 10px; }
.contact-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.contact-list li { display:flex; align-items:center; gap:10px; }
.contact-list li a { color:inherit; text-decoration:none; font-weight:600; }
.contact-list li small { color:var(--ink-500,#6b7a80); font-weight:400; }
.map-placeholder { aspect-ratio:4/3; background:linear-gradient(135deg,#eef5f1,#dceae2);
  border:1px solid var(--ink-100,#e6ebe9); border-radius:12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  color:var(--ink-500,#6b7a80); }
.map-placeholder svg, .map-placeholder i { color:var(--brand-green,#019347); }

/* Logo-only brand (2026-05-27: 2:1 cropped logo, wordmark inside the PNG).
   Width-dominant aspect — cap the HEIGHT so the header doesn't gain dead vertical
   space; let width follow the natural ratio. */
.brand-mark-only { padding: 2px 0; display: inline-flex; align-items: center; }
.brand-mark-only .brand-mark { width: auto; height: 42px; max-height: 42px; object-fit: contain; }
@media (max-width: 720px) {
  .brand-mark-only .brand-mark { height: 36px; max-height: 36px; }
}

/* Tighten header vertical padding — the old square logo justified a tall header.
   The new 2:1 logo lets us reclaim ~12px on each side. */
.header-inner { padding-top: 10px; padding-bottom: 10px; }

/* Language toggle inside the nav (replaces the removed TopBar location).
   Restores the original compact TopBar styling — small pill, subtle background,
   flag image left untouched (no filter — that broke the RO flag display). */
.nav-lang { margin-left: auto; margin-right: 14px; align-self: center;
  display: inline-flex; gap: 0; padding: 2px;
  background: var(--surface-50); border: 1px solid var(--line-200);
  border-radius: var(--radius-pill); }
.nav-lang button { display: inline-flex; align-items: center; gap: 5px;
  background: transparent; border: 0; padding: 3px 10px;
  font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--ink-500); border-radius: var(--radius-pill); cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast); }
.nav-lang button:hover:not(.active) { color: var(--ink-900); }
.nav-lang button.active { background: var(--brand-green); color: #fff; }
.nav-lang img { width: 14px; height: 10px; object-fit: cover; border-radius: 1px; }

/* ─── v2 chrome overrides — anchor variants for nav-lang switcher ─── */
.lang-toggle a { background: transparent; border: 0; color: #8a9aa1; font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; padding: 3px 10px; border-radius: var(--radius-pill); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; text-decoration: none; transition: background var(--dur-fast), color var(--dur-fast); }
.lang-toggle a img { width: 14px; height: 10px; object-fit: cover; border-radius: 1px; }
.lang-toggle a.active { background: var(--brand-green); color: #fff; }
.lang-toggle a:hover:not(.active) { color: #fff; }
.nav-lang a { color: var(--ink-500); }
.nav-lang a:hover:not(.active) { color: var(--ink-900); }
.nav-lang a.active { background: var(--brand-green); color: #fff; }

/* ─── Long-form body content (DB-driven WYSIWYG output) ─── */
.about-body { font-size: var(--fs-16); line-height: var(--lh-loose); color: var(--fg); }
.about-body p { margin: 0 0 16px; }
.about-body h2 { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-24); line-height: var(--lh-snug); letter-spacing: -0.01em; color: var(--fg-strong); margin: 32px 0 12px; }
.about-body h3 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-20); line-height: var(--lh-snug); color: var(--fg-strong); margin: 28px 0 10px; }
.about-body h4 { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-18); color: var(--fg-strong); margin: 24px 0 8px; }
.about-body ul, .about-body ol { margin: 0 0 16px; padding-left: 24px; }
.about-body li { margin: 4px 0; }
.about-body strong { font-weight: var(--fw-bold); color: var(--fg-strong); }
.about-body a { color: var(--link); text-decoration: underline; }
.about-body a:hover { color: var(--link-hover); }
.about-body img { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: 16px 0; }

/* ─── Long-form body content (DB-driven WYSIWYG) — assertive overrides ─── */
.about-body,
.about-body * { font-family: var(--font-sans); }
.about-body { font-size: var(--fs-16); line-height: var(--lh-loose); color: var(--fg); }
.about-body p,
.about-body li { font-size: var(--fs-16); line-height: var(--lh-loose); color: var(--fg); margin: 0 0 16px; font-weight: var(--fw-regular); }
.about-body h1,
.about-body h2 { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-30); line-height: var(--lh-tight); letter-spacing: -0.015em; color: var(--fg-strong); margin: 40px 0 14px; }
.about-body h3 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-24); line-height: var(--lh-snug); letter-spacing: -0.01em; color: var(--fg-strong); margin: 32px 0 12px; }
.about-body h4,
.about-body h5,
.about-body h6 { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-18); line-height: var(--lh-snug); color: var(--fg-strong); margin: 24px 0 8px; }
.about-body strong,
.about-body b { font-weight: var(--fw-bold); color: var(--fg-strong); }
.about-body em,
.about-body i { font-style: italic; }
.about-body ul,
.about-body ol { margin: 0 0 16px; padding-left: 24px; }
.about-body li { margin: 6px 0; }
.about-body a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.about-body a:hover { color: var(--link-hover); }
.about-body img { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: 16px 0; display: block; }
.about-body blockquote { margin: 24px 0; padding: 12px 20px; border-left: 3px solid var(--brand-green); color: var(--fg-muted); font-style: italic; }
.about-body hr { border: 0; border-top: 1px solid var(--line-200); margin: 32px 0; }
.about-body table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.about-body th,
.about-body td { padding: 10px 12px; border-bottom: 1px solid var(--line-200); text-align: left; }
.about-body th { font-weight: var(--fw-bold); color: var(--fg-strong); }
/* WYSIWYG editors often emit empty <p>&nbsp;</p> — collapse */
.about-body p:empty { display: none; }
.about-body > :first-child { margin-top: 0; }
.about-body > :last-child { margin-bottom: 0; }

/* ─── Contact form — fill grid cells, responsive collapse ─── */
.contact-form input,
.contact-form textarea { width: 100%; box-sizing: border-box; }
@media (max-width: 720px) {
    .contact-form { grid-template-columns: 1fr !important; }
    .contact-form input { grid-column: 1 / -1 !important; }
}

/* ─── Casa Verde landing — folded into design system (token-based) ─── */
.cv-hero { background: linear-gradient(135deg, var(--brand-green-900) 0%, var(--brand-green) 60%, var(--brand-green-900) 100%); color: #fff; padding: 64px 0 52px; text-align: center; }
.cv-hero .cv-tag { display: inline-block; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.32); border-radius: var(--radius-pill); padding: 6px 16px; font-size: var(--fs-12); font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 20px; }
.cv-hero h1 { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-36); line-height: var(--lh-tight); letter-spacing: -0.02em; margin: 0 0 18px; color: #fff; }
.cv-hero h1 span { color: var(--brand-amber); }
.cv-hero .cv-hero-sub { font-size: var(--fs-18); line-height: var(--lh-loose); opacity: 0.92; max-width: 620px; margin: 0 auto 28px; }
.cv-hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-wa { background: #25d366; color: #fff; display: inline-flex; align-items: center; gap: 8px; }
.btn-wa:hover { background: #1eb858; color: #fff; }
.cv-on-brand { background: #fff; color: var(--brand-green); }
.cv-on-brand:hover { background: var(--surface-50); color: var(--brand-green-700); }

.cv-stats { background: var(--brand-green-700); color: #fff; padding: 32px 0; }
.cv-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: center; }
.cv-stats .cv-stat-num { font-family: var(--font-display); font-size: var(--fs-36); font-weight: var(--fw-black); line-height: 1; color: var(--brand-amber); }
.cv-stats .cv-stat-lbl { font-size: var(--fs-12); opacity: 0.9; margin-top: 6px; }
@media (max-width: 720px) { .cv-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }

.cv-note { background: var(--brand-green-50); border-left: 3px solid var(--brand-green); padding: 14px 18px; border-radius: 0 var(--radius-md) var(--radius-md) 0; font-size: var(--fs-14); line-height: var(--lh-loose); margin-top: 20px; color: var(--fg); }
.cv-note a { color: var(--brand-green-700); font-weight: var(--fw-bold); text-decoration: underline; }

.cv-cards { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; }
@media (max-width: 800px) { .cv-cards { grid-template-columns: 1fr; } }
.cv-card { background: var(--surface-0); border: 1px solid var(--line-200); border-radius: var(--radius-lg); padding: 28px; }
.cv-card.featured { border-color: var(--brand-green); border-width: 2px; }
.cv-card h3 { font-family: var(--font-display); font-size: var(--fs-20); font-weight: var(--fw-bold); color: var(--fg-strong); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.cv-card ul { list-style: none; padding: 0; margin: 0; }
.cv-card ul li { padding: 6px 0 6px 26px; position: relative; font-size: var(--fs-14); line-height: var(--lh-snug); color: var(--fg); }
.cv-card ul li::before { content: ''; position: absolute; left: 0; top: 8px; width: 16px; height: 16px; background: var(--brand-green); border-radius: 50%; }
.cv-card ul li::after { content: '✓'; position: absolute; left: 3px; top: 5px; color: #fff; font-size: 11px; font-weight: 700; }

.cv-steps { max-width: 720px; margin: 0 auto; }
.cv-step { display: flex; gap: 20px; margin-bottom: 28px; align-items: flex-start; }
.cv-step-num { background: var(--brand-green); color: #fff; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-16); flex-shrink: 0; }
.cv-step-body h4 { font-size: var(--fs-18); font-weight: var(--fw-bold); color: var(--fg-strong); margin: 8px 0 6px; }
.cv-step-body p { font-size: var(--fs-14); line-height: var(--lh-loose); color: var(--fg-muted); margin: 0; }

.cv-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 800px) { .cv-why-grid { grid-template-columns: 1fr; } }
.cv-why-item { display: flex; gap: 16px; align-items: flex-start; }
.cv-why-item .cv-why-icon { width: 44px; height: 44px; background: var(--brand-green-50); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--brand-green); }
.cv-why-item h4 { font-size: var(--fs-16); font-weight: var(--fw-bold); color: var(--fg-strong); margin: 0 0 4px; }
.cv-why-item p { font-size: var(--fs-14); line-height: var(--lh-snug); color: var(--fg-muted); margin: 0; }

.cv-faq { max-width: 720px; margin: 24px auto 0; }
.cv-faq-item { border-bottom: 1px solid var(--line-200); }
.cv-faq-q { width: 100%; text-align: left; background: none; border: 0; padding: 18px 0; font-family: var(--font-sans); font-size: var(--fs-16); font-weight: var(--fw-bold); color: var(--fg-strong); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cv-faq-q .cv-faq-ico { font-size: 22px; color: var(--brand-green); transition: transform var(--dur-med); flex-shrink: 0; line-height: 1; }
.cv-faq-q.open .cv-faq-ico { transform: rotate(45deg); }
/* Class-driven (button .open) so opening can animate; JS togglers only flip the class. */
.cv-faq-a { display: block; overflow: hidden; max-height: 0; opacity: 0; padding: 0; font-size: var(--fs-14); line-height: var(--lh-loose); color: var(--fg-muted);
            transition: max-height var(--dur-med) var(--ease-std), opacity var(--dur-med) var(--ease-std), padding var(--dur-med) var(--ease-std); }
.cv-faq-q.open + .cv-faq-a { max-height: 600px; opacity: 1; padding: 0 0 18px; }

/* Category SEO copy (products/category_copy_view) */
.cat-intro { margin-top: 16px; max-width: 760px; }
.cat-intro-lead { font-size: var(--fs-16); line-height: var(--lh-loose); color: var(--fg-default); margin: 0 0 12px; }
.cat-intro-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.cat-intro-trust li { display: flex; align-items: center; gap: 7px; font-size: var(--fs-14); color: var(--fg-muted); }
.cat-intro-trust li i { color: var(--brand-green); flex-shrink: 0; }
.cat-copy { padding: 8px 0 56px; }
.cat-guide { max-width: 760px; margin: 0 auto 8px; }
.cat-guide p { font-size: var(--fs-15); line-height: var(--lh-loose); color: var(--fg-default); margin: 0 0 14px; }
.cat-faq { margin-top: 28px; }
.cat-faq .ds-h2 { max-width: 720px; margin-left: auto; margin-right: auto; } /* align heading with the centered .cv-faq list */
.cat-faq-more { display: inline-block; margin-top: 8px; font-size: var(--fs-14); font-weight: var(--fw-bold); color: var(--brand-green); text-decoration: none; }
.cat-faq-more:hover { text-decoration: underline; }

/* Knowledge hub (/ajutor) */
.kb-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 40px; }
.kb-cat-h { font-size: var(--fs-20); margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line-200); }
.kb-cat-h a { color: var(--fg-strong); text-decoration: none; }
.kb-cat-h a:hover { color: var(--brand-green); }
.kb-list { list-style: none; margin: 0; padding: 0; }
.kb-list li { border-bottom: 1px solid var(--line-100); }
.kb-list li:last-child { border-bottom: 0; }
.kb-list a { display: flex; align-items: flex-start; gap: 10px; padding: 11px 0; font-size: var(--fs-15); color: var(--fg-default); text-decoration: none; line-height: var(--lh-normal); }
.kb-list a:hover { color: var(--brand-green); }
.kb-list a i { color: var(--brand-green); margin-top: 2px; }
.kb-answer { max-width: 760px; margin: 0 auto; }
.kb-answer p { font-size: var(--fs-16); line-height: 1.75; color: var(--fg-default); margin: 0 0 18px; }
.kb-answer h2 { font-size: var(--fs-22); font-weight: var(--fw-bold); color: var(--fg-strong); margin: 38px 0 14px; padding-top: 6px; }
.kb-answer h3 { font-size: var(--fs-18); font-weight: var(--fw-bold); color: var(--fg-strong); margin: 28px 0 10px; }
.kb-answer ul, .kb-answer ol { margin: 0 0 18px; padding-left: 22px; }
.kb-answer li { font-size: var(--fs-16); line-height: 1.7; color: var(--fg-default); margin-bottom: 9px; }
.kb-answer strong { color: var(--fg-strong); }
.kb-answer > *:first-child { margin-top: 0; }
/* Quick-answer / key-takeaway callout */
.kb-quick { display: flex; gap: 14px; background: var(--surface-50); border: 1px solid var(--line-200); border-left: 4px solid var(--brand-green); border-radius: var(--radius-md); padding: 18px 20px; margin: 0 0 28px; }
.kb-quick i { color: var(--brand-green); width: 22px; height: 22px; flex: none; margin-top: 2px; }
.kb-quick p { margin: 0; font-size: var(--fs-15); line-height: 1.65; }
.kb-quick .kb-quick-label { display: block; font-weight: var(--fw-bold); color: var(--fg-strong); margin-bottom: 3px; font-size: var(--fs-13); text-transform: uppercase; letter-spacing: .03em; }
/* Data table */
.kb-table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: var(--fs-15); }
.kb-table th, .kb-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line-200); }
.kb-table thead th { background: var(--surface-50); font-weight: var(--fw-bold); color: var(--fg-strong); border-bottom: 2px solid var(--line-300); }
.kb-table tbody tr:hover { background: var(--surface-50); }
/* Inline tip note */
.kb-note { background: #fff8e6; border: 1px solid #f3e2b0; border-radius: var(--radius-md); padding: 14px 18px; margin: 0 0 24px; font-size: var(--fs-15); line-height: 1.6; }
.kb-note strong { color: #8a6d00; }
.kb-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.kb-products { margin: 44px auto 0; padding-top: 30px; border-top: 1px solid var(--line-200); }
.kb-products > h2 { margin-bottom: 20px; }
.kb-related { max-width: 760px; margin: 40px auto 0; padding-top: 28px; border-top: 1px solid var(--line-200); }
@media (max-width: 760px) { .kb-cats { grid-template-columns: 1fr; } }

/* Google Reviews widget (partials/reviews_view) */
.gr-section { padding: 52px 0; }
.gr-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.gr-head-ico { width: 30px; height: 30px; color: var(--brand-green); flex-shrink: 0; }
.gr-sub { margin: 2px 0 0; font-size: var(--fs-14); color: var(--fg-muted); }
.gr-summary { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; flex-wrap: wrap; }
.gr-rating { font-size: 34px; font-weight: var(--fw-bold); color: var(--fg-strong); line-height: 1; }
.gr-stars { display: inline-flex; gap: 2px; }
.gr-star { width: 20px; height: 20px; color: var(--line-300); }
.gr-star.on { color: #f5b400; fill: #f5b400; }
.gr-stars.sm .gr-star { width: 15px; height: 15px; }
.gr-count { font-size: var(--fs-14); color: var(--fg-muted); }
.gr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.gr-card { background: var(--surface-0); border: 1px solid var(--line-200); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-1); }
.gr-card-top { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.gr-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--brand-green); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: var(--fw-bold); font-size: var(--fs-16); flex-shrink: 0; text-transform: uppercase; }
.gr-name { font-weight: var(--fw-bold); font-size: var(--fs-14); color: var(--fg-strong); }
.gr-quote { width: 20px; height: 20px; color: var(--line-300); margin-left: auto; flex-shrink: 0; }
.gr-text { margin: 0; font-size: var(--fs-14); line-height: var(--lh-loose); color: var(--fg-muted); }
.gr-cta-wrap { margin-top: 26px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 900px) { .gr-grid { grid-template-columns: 1fr; } }

.cv-contact-box { max-width: 560px; margin: 0 auto; background: var(--surface-0); border: 1px solid var(--line-200); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-2); }
.cv-contact-box .form-group { margin-bottom: 14px; }
.cv-contact-box input, .cv-contact-box textarea { width: 100%; box-sizing: border-box; font-family: inherit; font-size: var(--fs-14); color: var(--ink-800); background: #fff; border: 1px solid var(--line-300); border-radius: var(--radius-md); padding: 11px 13px; outline: 0; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.cv-contact-box input:focus, .cv-contact-box textarea:focus { border-color: var(--brand-green); box-shadow: 0 0 0 3px rgba(1,147,71,0.18); }
.cv-contact-box textarea { resize: vertical; min-height: 90px; }
.cv-direct { background: var(--brand-green-50); border-radius: var(--radius-md); padding: 20px; margin-top: 20px; text-align: center; }
.cv-direct .cv-or { color: var(--fg-muted); font-size: var(--fs-12); margin-bottom: 10px; }
.cv-direct .cv-tel { color: var(--fg-strong); font-weight: var(--fw-bold); font-size: var(--fs-18); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.cv-direct .cv-tel:hover { color: var(--brand-green); }
.cv-direct .wa-link { background: #25d366; color: #fff; padding: 10px 22px; border-radius: var(--radius-md); display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: var(--fs-14); font-weight: var(--fw-medium); text-decoration: none; }
.cv-direct .wa-link:hover { background: #1eb858; }
.cv-alert { padding: 14px 18px; border-radius: var(--radius-md); font-weight: var(--fw-medium); display: none; }
.cv-alert.ok { background: var(--brand-green-50); border: 1px solid var(--brand-green); color: var(--brand-green-900); }
.cv-alert.err { background: var(--brand-red-50); border: 1px solid var(--brand-red); color: #8a2426; }

/* ─── Services — DB-driven, design-system styling ─── */
.svc-layout { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start; }
@media (max-width: 900px) { .svc-layout { grid-template-columns: 1fr; } }

.svc-sidebar { position: sticky; top: 24px; }
.svc-sidebar ul { list-style: none; margin: 0; padding: 0; }
.svc-sidebar > ul { border: 1px solid var(--line-200); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-0); }
.svc-sidebar li { border-bottom: 1px solid var(--line-100); }
.svc-sidebar li:last-child { border-bottom: 0; }
.svc-sidebar a { display: block; padding: 11px 16px; font-size: var(--fs-14); color: var(--fg); text-decoration: none; line-height: var(--lh-snug); transition: background var(--dur-fast), color var(--dur-fast); }
.svc-sidebar a:hover { background: var(--surface-50); color: var(--brand-green); }
.svc-sidebar li.active > a { background: var(--brand-green-50); color: var(--brand-green-900); font-weight: var(--fw-bold); box-shadow: inset 3px 0 0 var(--brand-green); }
.svc-sidebar .ul-subcategory a { padding-left: 30px; font-size: var(--fs-13, 13px); color: var(--fg-muted); }
.svc-sidebar .ul-subcategory li.active > a { color: var(--brand-green-900); font-weight: var(--fw-bold); }
@media (max-width: 900px) { .svc-sidebar { position: static; margin-bottom: 24px; } }

.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 1000px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  /* 2-up tiles on phones (one giant full-screen card per category was wasteful) */
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .svc-tile-body { padding: 12px 14px; }
  .svc-tile-body h3 { font-size: var(--fs-14); }
  /* Category cards: icon-beside-text leaves ~60px for copy in a 2-up grid and
     long words (submersibile, regenerabile) spill out — stack vertically instead */
  .cat-tile { flex-direction: column; gap: 10px; padding: 14px; }
  .cat-tile .cat-meta { min-width: 0; }
  .cat-ic { width: 44px; height: 44px; }
  .cat-name { font-size: 15px; }
  .cat-sub { font-size: 12px; margin-bottom: 6px; }
}
.svc-tile { display: flex; flex-direction: column; border: 1px solid var(--line-200); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-0); text-decoration: none; transition: box-shadow var(--dur-med), border-color var(--dur-med), transform var(--dur-med); }
.svc-tile:hover { box-shadow: var(--shadow-2); border-color: var(--line-300); transform: translateY(-2px); }
.svc-tile-img { aspect-ratio: 4/3; background: linear-gradient(135deg, var(--brand-green-50), var(--surface-100)); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.svc-tile-img img { width: 100%; height: 100%; object-fit: cover; }
.svc-tile-img .svc-tile-ph { color: var(--brand-green); opacity: .5; }
.svc-tile-body { padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: 1; }
.svc-tile-body h3 { font-family: var(--font-sans); font-size: var(--fs-16); font-weight: var(--fw-bold); color: var(--fg-strong); margin: 0; line-height: var(--lh-snug); }
.svc-tile-body .svc-tile-arrow { color: var(--brand-green); flex-shrink: 0; }

/* Reuse .about-body for services WYSIWYG content too */
.services-body { font-size: var(--fs-16); line-height: var(--lh-loose); color: var(--fg); }
.services-body p, .services-body li { font-size: var(--fs-16); line-height: var(--lh-loose); margin: 0 0 16px; }
.services-body h2 { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-24); color: var(--fg-strong); margin: 32px 0 12px; }
.services-body h3 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-20); color: var(--fg-strong); margin: 28px 0 10px; }
.services-body ul, .services-body ol { margin: 0 0 16px; padding-left: 24px; }
.services-body strong { font-weight: var(--fw-bold); color: var(--fg-strong); }
.services-body img { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: 16px 0; }
.services-body a { color: var(--link); text-decoration: underline; }
.services-body table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.services-body th, .services-body td { padding: 10px 12px; border-bottom: 1px solid var(--line-200); text-align: left; }

/* Breadcrumb — design-system */
.ds-breadcrumb { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 20px; font-size: var(--fs-13, 13px); color: var(--fg-muted); }
.ds-breadcrumb li { display: flex; align-items: center; gap: 8px; }
.ds-breadcrumb li:not(:last-child)::after { content: '/'; color: var(--line-300); }
.ds-breadcrumb a { color: var(--fg-muted); text-decoration: none; }
.ds-breadcrumb a:hover { color: var(--brand-green); }
.ds-breadcrumb li:last-child { color: var(--fg); font-weight: var(--fw-medium); }

/* ─── Catalog product card — real-photo overrides (fix containment, match prototype) ─── */
.product-card .product-thumb { aspect-ratio: 1/1; background: #fff; padding: 14px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.product-card .product-thumb .primary-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.product-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-name { min-height: 0; }
.product-name a { color: var(--ink-900); text-decoration: none; }
.product-name a:hover { color: var(--brand-green); }
.product-cta { margin-top: auto; padding-top: 8px; }
.product-cta .btn { flex: 1; justify-content: center; gap: 6px; }
.price-curs { color: var(--ink-400); font-size: 11px; margin-left: 4px; }
.product-fav { z-index: 2; }
/* price-on-request products: single full-width button */
.product-cta.single .btn { flex: 1 1 100%; }

/* ─── jQuery UI price slider — token-based green styling ─── */
#slider-range.ui-slider { position: relative; height: 6px; background: var(--line-200); border-radius: var(--radius-pill); margin: 18px 6px 8px; }
#slider-range .ui-slider-range { position: absolute; height: 100%; background: var(--brand-green); border-radius: var(--radius-pill); }
#slider-range .ui-slider-handle { position: absolute; top: 50%; width: 18px; height: 18px; margin-left: -9px; transform: translateY(-50%); background: #fff; border: 2px solid var(--brand-green); border-radius: 50%; cursor: grab; box-shadow: var(--shadow-1); outline: none; transition: box-shadow var(--dur-fast), transform var(--dur-fast); }
#slider-range .ui-slider-handle:hover, #slider-range .ui-slider-handle:focus { box-shadow: var(--shadow-focus); }
#slider-range .ui-slider-handle:active { cursor: grabbing; transform: translateY(-50%) scale(1.08); }

/* ─── "Solicită preț" green pop button ─── */
.btn-request { background: var(--brand-green); color: #fff; transition: background var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast); }
.btn-request:hover { background: var(--brand-green-700); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn-request:active { transform: translateY(0); }

/* ─── Offer / price-request modal ─── */
.laiola-modal-overlay { position: fixed; inset: 0; background: rgba(26,35,39,0.55); display: none; align-items: center; justify-content: center; z-index: 9999; padding: 20px; opacity: 0; transition: opacity var(--dur-med); }
.laiola-modal-overlay.open { display: flex; opacity: 1; }
.laiola-modal { background: #fff; border-radius: var(--radius-lg); padding: 28px; width: 100%; max-width: 420px; box-shadow: var(--shadow-3); transform: translateY(12px) scale(0.98); transition: transform var(--dur-med) var(--ease-out); }
.laiola-modal-overlay.open .laiola-modal { transform: translateY(0) scale(1); }
.laiola-modal h3 { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-24); color: var(--fg-strong); margin: 0 0 6px; }
.laiola-modal p.sub { font-size: var(--fs-14); color: var(--fg-muted); margin: 0 0 18px; }
.laiola-modal .lm-prod { font-size: var(--fs-13, 13px); color: var(--brand-green); font-weight: var(--fw-bold); margin: 0 0 14px; }
.laiola-modal input { width: 100%; box-sizing: border-box; font-family: inherit; font-size: var(--fs-14); color: var(--ink-800); border: 1px solid var(--line-300); border-radius: var(--radius-md); padding: 11px 13px; margin-bottom: 12px; outline: 0; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.laiola-modal input:focus { border-color: var(--brand-green); box-shadow: 0 0 0 3px rgba(1,147,71,0.18); }
.laiola-modal .lm-actions { display: flex; gap: 10px; margin-top: 6px; }
.laiola-modal .lm-actions .btn { flex: 1; justify-content: center; }
.laiola-modal-close { position: absolute; top: 14px; right: 16px; background: none; border: 0; color: var(--fg-muted); cursor: pointer; font-size: 22px; line-height: 1; }
.laiola-modal-wrap { position: relative; }
.laiola-modal .lm-msg { font-size: var(--fs-14); padding: 12px 14px; border-radius: var(--radius-md); margin-bottom: 12px; display: none; }
.laiola-modal .lm-msg.ok { background: var(--brand-green-50); color: var(--brand-green-900); border: 1px solid var(--brand-green); display: block; }
.laiola-modal .lm-msg.err { background: var(--brand-red-50); color: #8a2426; border: 1px solid var(--brand-red); display: block; }

/* ─── Product detail — real-photo gallery + WYSIWYG tabs ─── */
.gallery-main { padding: 24px; overflow: hidden; }
.gallery-main img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.gallery-main a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.gallery-thumb { overflow: hidden; padding: 6px; }
.gallery-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pp-sku { color: var(--fg-muted); }
.pp-pane table { width: 100%; border-collapse: collapse; margin: 8px 0 20px; }
.pp-pane th, .pp-pane td { padding: 10px 12px; border-bottom: 1px solid var(--line-200); text-align: left; font-size: 14px; }
.pp-pane td.theader { background: var(--brand-green-50); font-weight: 700; color: var(--brand-green-900); }
.pp-pane .spec-label { color: var(--fg-muted); }

/* ─── Product gallery zoom button + lightbox overlay ─── */
.gallery-main { position: relative; }
.gallery-zoom { position: absolute; bottom: 12px; right: 12px; width: 36px; height: 36px; background: rgba(255,255,255,0.92); border: 1px solid var(--line-200); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink-700); cursor: pointer; transition: color var(--dur-fast), box-shadow var(--dur-fast); }
.gallery-zoom:hover { color: var(--brand-green); box-shadow: var(--shadow-2); }
.pp-lightbox { position: fixed; inset: 0; background: rgba(26,35,39,0.92); display: none; align-items: center; justify-content: center; z-index: 10000; padding: 40px; opacity: 0; transition: opacity var(--dur-med); cursor: zoom-out; }
.pp-lightbox.open { display: flex; opacity: 1; }
.pp-lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: var(--radius-md); box-shadow: var(--shadow-3); }
.pp-lightbox-close { position: absolute; top: 24px; right: 32px; background: none; border: 0; color: #fff; font-size: 40px; line-height: 1; cursor: pointer; opacity: 0.8; }
.pp-lightbox-close:hover { opacity: 1; }

/* ─── Home — minor responsive ─── */
@media (max-width: 800px) {
    .home-showroom-grid { grid-template-columns: 1fr !important; }
    .trust-inner { grid-template-columns: 1fr !important; }
}

/* ───────────────────────────────────────────────────────────
   Subtle motion layer (added 2026-06-05)
   Design intent: signal each section's meaning subconsciously, not "wow".
   Rules: animate only opacity/transform (GPU-friendly), keep durations short,
   content is always in the HTML — JS only *reveals* it. Fully disabled under
   prefers-reduced-motion. See partials/anim_js.php for the reveal/count-up JS.
   ─────────────────────────────────────────────────────────── */

@keyframes ds-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ds-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Hero copy is held hidden ONLY while the brand webfont is loading (JS adds
   .fonts-loading on <html> in the head), then fades in once fonts are ready.
   This stops the font-swap (FOUT) from happening mid-fade, right under the eye.
   No JS / no Font Loading API → neither class is ever set → text is instantly
   visible with no animation (safe fallback). Scoped to the hero only. */
html.fonts-loading .hero-copy .ds-eyebrow,
html.fonts-loading .hero-copy h1,
html.fonts-loading .hero-copy .ds-lead,
html.fonts-loading .hero-cta { opacity: 0; }

/* Slower than the design-token durations on purpose: the hero intro should
   feel like a deliberate settle, not a blink. ~700–800ms with a wider stagger. */
html.fonts-ready .hero-copy h1          { animation: ds-fade-in 650ms var(--ease-out) both; }
html.fonts-ready .hero-copy .ds-eyebrow { animation: ds-fade-up 700ms var(--ease-out) 120ms both; }
html.fonts-ready .hero-copy .ds-lead    { animation: ds-fade-up 750ms var(--ease-out) 280ms both; }
html.fonts-ready .hero-cta              { animation: ds-fade-up 750ms var(--ease-out) 440ms both; }

/* Generic scroll reveal — element gets [data-reveal]; JS adds .is-in in view. */
[data-reveal] { opacity: 0; }
[data-reveal].is-in { opacity: 1; }

/* Reusable staggered reveal for showcase card grids (services, projects,
   brands, promotions). Add `reveal-stagger` + `data-reveal` to the grid; its
   direct children fade up in sequence. Stagger caps at the 8th child so long
   lists don't drag — anything beyond just fades with the last batch. */
.reveal-stagger > * { opacity: 0; transform: translateY(16px);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal-stagger.is-in > * { opacity: 1; transform: none; }
.reveal-stagger.is-in > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-in > *:nth-child(2) { transition-delay: 70ms; }
.reveal-stagger.is-in > *:nth-child(3) { transition-delay: 140ms; }
.reveal-stagger.is-in > *:nth-child(4) { transition-delay: 210ms; }
.reveal-stagger.is-in > *:nth-child(5) { transition-delay: 280ms; }
.reveal-stagger.is-in > *:nth-child(6) { transition-delay: 350ms; }
.reveal-stagger.is-in > *:nth-child(7) { transition-delay: 420ms; }
.reveal-stagger.is-in > *:nth-child(n+8) { transition-delay: 490ms; }

/* Process strip: steps drop in *from above* (translateY negative), staggered,
   so the eye reads top-to-bottom = "step-by-step process" without reading words. */
.work-step { opacity: 0; transform: translateY(-18px);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.work.is-in { opacity: 1; }
.work.is-in .work-step { opacity: 1; transform: none; }
.work.is-in .work-step:nth-child(1) { transition-delay: 0ms; }
.work.is-in .work-step:nth-child(2) { transition-delay: 90ms; }
.work.is-in .work-step:nth-child(3) { transition-delay: 180ms; }
.work.is-in .work-step:nth-child(4) { transition-delay: 270ms; }
.work.is-in .work-step:nth-child(5) { transition-delay: 360ms; }
.work.is-in .work-step:nth-child(6) { transition-delay: 450ms; }

/* "Solicitați apel" — single slow heartbeat every ~4.5s so the page feels
   alive when idle. One gentle beat per cycle, mostly at rest. Pauses on hover. */
@keyframes ds-cta-pulse {
    0%, 82%, 100% { transform: scale(1); }
    88%           { transform: scale(1.055); }
    93%           { transform: scale(0.995); }
    97%           { transform: scale(1); }
}
.nav-callback { animation: ds-cta-pulse 4.5s var(--ease-std) infinite; transform-origin: center; will-change: transform; }
.nav-callback:hover, .nav-callback:focus-visible { animation-play-state: paused; }

/* Catalog flyout: unfold (not snap). Swap display-toggle for scaleY/opacity so
   it can transition. Fast (--dur-fast) — virtually no wait, just not "slapped on". */
.nav-cat-flyout {
    display: block; opacity: 0; visibility: hidden;
    transform: translateY(-6px) scaleY(0.97); transform-origin: top center;
    transition: opacity var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out),
                visibility 0s linear var(--dur-fast);
    pointer-events: none;
}
.nav-cat-wrap:hover .nav-cat-flyout, .nav-cat-wrap:focus-within .nav-cat-flyout {
    opacity: 1; visibility: visible; transform: translateY(0) scaleY(1);
    pointer-events: auto; transition-delay: 0s;
}
.nav-sub-flyout {
    display: block; opacity: 0; visibility: hidden; transform: translateX(-6px);
    transition: opacity var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out),
                visibility 0s linear var(--dur-fast);
    pointer-events: none;
}
.nav-cat-flyout > li:hover > .nav-sub-flyout {
    opacity: 1; visibility: visible; transform: translateX(0);
    pointer-events: auto; transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
    .hero-copy .ds-eyebrow, .hero-copy h1, .hero-copy .ds-lead, .hero-cta { animation: none !important; }
    .nav-callback { animation: none !important; }
    [data-reveal], [data-reveal].is-in { opacity: 1 !important; }
    .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
    .work-step { opacity: 1 !important; transform: none !important; transition: none !important; }
    .nav-cat-flyout, .nav-sub-flyout { transition: none !important; }
    .mobile-drawer, .drawer-overlay { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE / RESPONSIVE LAYER  (added 2026-06-05)
   Goal: full feature parity on phones — no hidden features, no
   compromise. Desktop chrome is preserved and simply hidden below
   the nav breakpoint; an off-canvas drawer + a thumb-zone bottom
   action bar take over. Touch targets ≥44px. Uses safe-area insets.
   ═══════════════════════════════════════════════════════════ */

/* The off-canvas drawer is parked off-screen to the RIGHT (translateX(100%)).
   A fixed element beyond the right edge still extends the page's scrollable
   width → spurious horizontal scrollbar. Clip horizontal overflow at the root
   to suppress it. html stays the vertical scroller, so the sticky header is
   unaffected. */
html { overflow-x: hidden; }

/* These chrome pieces exist only for small screens — hidden by default. */
.nav-burger,
.header-call-mobile { display: none; }
.mobile-drawer,
.drawer-overlay,
.mobile-actionbar { display: none; }

/* Off-canvas drawer + dimmer (styled here, only shown ≤900px below) */
.drawer-overlay { position: fixed; inset: 0; background: rgba(13,18,21,.5);
  opacity: 0; visibility: hidden; transition: opacity var(--dur-med) var(--ease-out), visibility 0s linear var(--dur-med); z-index: 110; }
.drawer-overlay.open { opacity: 1; visibility: visible; transition-delay: 0s; }
.mobile-drawer { position: fixed; top: 0; right: 0; height: 100%; height: 100dvh;
  width: min(86vw, 360px); background: #fff; z-index: 120;
  flex-direction: column; box-shadow: -8px 0 28px rgba(13,18,21,.18);
  transform: translateX(100%); transition: transform var(--dur-med) var(--ease-out);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: env(safe-area-inset-bottom); }
.mobile-drawer.open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--line-200); position: sticky; top: 0; background: #fff; z-index: 2; }
.drawer-title { font-family: var(--font-display); font-weight: 900; font-size: 16px; color: var(--ink-900); letter-spacing: -0.01em; }
.drawer-close { background: transparent; border: 0; width: 44px; height: 44px; margin: -10px -10px -10px 0;
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink-700); cursor: pointer; }
.drawer-nav { display: flex; flex-direction: column; padding: 8px 0; flex: 1; }
.drawer-nav > a { display: flex; align-items: center; min-height: 48px; padding: 10px 20px;
  color: var(--ink-800); font-weight: 500; font-size: 15px; border-bottom: 1px solid var(--line-100); }
.drawer-nav > a:hover, .drawer-nav > a:active { background: var(--surface-50); color: var(--brand-green); }
.drawer-acc { border-bottom: 1px solid var(--line-100); }
.drawer-acc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 48px; padding: 10px 20px; background: transparent; border: 0;
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--ink-900); cursor: pointer; text-align: left; }
.drawer-acc-lead { display: inline-flex; align-items: center; gap: 10px; }
.drawer-acc-lead i { color: var(--brand-green); }
.drawer-acc-caret { transition: transform var(--dur-fast) var(--ease-out); color: var(--ink-400); flex: none; }
.drawer-acc-head.open .drawer-acc-caret { transform: rotate(180deg); }
.drawer-acc-body { display: none; padding: 2px 0 8px; background: var(--surface-50); }
.drawer-acc-head.open + .drawer-acc-body { display: block; }
.drawer-acc-body a, .drawer-cat-link { display: flex; align-items: center; min-height: 42px;
  padding: 8px 20px 8px 34px; color: var(--ink-700); font-size: 14px; font-weight: 400; }
.drawer-cat-link { font-weight: 600; padding-left: 50px; }
.drawer-acc-body a:active, .drawer-acc-body a:hover { color: var(--brand-green); }
.drawer-acc-all { font-weight: 600; color: var(--brand-green) !important; }
.drawer-acc-sub { border-bottom: 0; }
.drawer-acc-sub .drawer-acc-head { font-size: 14px; font-weight: 600; padding-left: 34px; min-height: 44px; }
.drawer-acc-sub .drawer-acc-body { background: #eef3f1; }
.drawer-acc-sub .drawer-acc-body a { padding-left: 50px; }
.drawer-foot { padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-200); display: flex; flex-direction: column; gap: 14px; }
.drawer-callback { width: 100%; justify-content: center; }
.drawer-contact { display: flex; flex-direction: column; gap: 8px; }
.drawer-contact a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-700); font-size: 14px; font-weight: 600; }
.drawer-contact a i { color: var(--brand-green); }
.drawer-lang { align-self: flex-start; display: inline-flex; gap: 0; padding: 2px;
  background: var(--surface-50); border: 1px solid var(--line-200); border-radius: var(--radius-pill); }

/* Thumb-zone sticky bottom action bar */
.mobile-actionbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  background: #fff; border-top: 1px solid var(--line-200);
  box-shadow: 0 -4px 16px rgba(13,18,21,.08);
  padding-bottom: env(safe-area-inset-bottom); }
.mobile-actionbar { display: none; }
.mab-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 56px; padding: 6px 4px; background: transparent; border: 0;
  font-family: inherit; font-size: 11px; font-weight: 600; color: var(--ink-700); cursor: pointer;
  position: relative; text-decoration: none; }
.mab-item i { color: var(--ink-500); }
.mab-item:active { background: var(--surface-50); }
.mab-primary { color: var(--brand-green); }
.mab-primary i { color: var(--brand-green); }
.mab-badge { position: absolute; top: 4px; right: calc(50% - 22px); background: var(--brand-red);
  color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; line-height: 16px;
  border-radius: 999px; padding: 0 4px; text-align: center; }

/* Lock background scroll while the drawer is open */
body.drawer-open { overflow: hidden; }

/* ─── Breakpoint: switch chrome to mobile (≤900px) ─── */
@media (max-width: 900px) {
  /* Single-row header: logo + inline search. Calling + the menu live in the
     bottom action bar (Sunați / Meniu), so the top row drops the duplicate
     call icon, burger, cart and account — shorter, cleaner header. */
  .header-inner { flex-wrap: nowrap; gap: 14px; }
  .search { order: 0; flex: 1 1 auto; max-width: 560px; margin-left: 0; }
  .header-cta { display: none; }                /* big desktop phone block */
  .header-right { display: none; }              /* call/cart/account/burger → bottom bar + drawer */
  .nav { display: none; }                       /* desktop nav row → drawer */
  .mobile-drawer { display: flex; }
  .drawer-overlay { display: block; }
  /* Bottom action bar is the menu + call entry point across the whole mobile range */
  .mobile-actionbar { display: flex; }
  .ds-body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  .floating-contacts { bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* ─── Phones (≤600px): finer tightening on top of the ≤768 tier ─── */
@media (max-width: 600px) {
  .container { padding-left: 18px; padding-right: 18px; }
  .promo-bar-inner { padding: 7px 18px; }
  .promo-bar .pb-msg span { display: none; }    /* keep the headline + link, drop long copy */

  .hero-copy h1 { font-size: 30px !important; }
  .hero.hero-editorial .hero-copy h1 { font-size: 34px !important; }
  .hero.hero-split .hero-copy h1 { font-size: 32px !important; }
  .hero-copy .ds-lead { font-size: 15px; }

  /* stacked single-column sections that genuinely need full width */
  .trust-inner { grid-template-columns: 1fr; }
}

/* ─── Very small phones (≤400px): single-column product cards ─── */
@media (max-width: 400px) {
  .product-grid, .catalog-grid, .cat-grid { grid-template-columns: 1fr; }
  .container { padding-left: 14px; padding-right: 14px; }
  .hero-inner, .hero.hero-split .hero-inner, .hero.hero-editorial .hero-inner {
    padding-left: 16px; padding-right: 16px; }
  .hero-copy h1 { font-size: 27px !important; }
  .hero.hero-editorial .hero-copy h1 { font-size: 30px !important; }
  .hero.hero-split .hero-copy h1 { font-size: 28px !important; }
}

/* ─── Phones/small tablets (≤768px): content-level tightening ─── */
@media (max-width: 768px) {
  /* larger tap targets for pagination on touch */
  .catalog-pagination button { width: 44px; height: 44px; }
  /* spec / WYSIWYG tables scroll horizontally instead of squishing */
  .pp-pane table, .about-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  /* full-width primary buttons in modals/forms read better on phones */
  .lm-actions { flex-direction: column-reverse; }
  .lm-actions .btn { width: 100%; }

  /* Breathing room — pull content off the screen edges.
     Horizontal-only (longhand): a `padding: 0 20px` shorthand would zero the
     vertical padding on elements that are ALSO .container (header-inner,
     hero-inner), which made the search bar hug the header's bottom edge. */
  .container { padding-left: 20px; padding-right: 20px; }
  /* Roomier single-row header (logo + inline search) */
  .header-inner { padding-top: 12px; padding-bottom: 12px; }

  /* Hero: scale type down + add side room so text/buttons don't kiss the edge.
     NOTE: .hero-inner shares its element with .container, so use LONGHAND padding —
     a `padding: x 0 y` shorthand would reset the horizontal inset back to 0
     (that was the edge-touch bug). */
  .hero { min-height: 0; }
  .hero-inner, .hero.hero-split .hero-inner, .hero.hero-editorial .hero-inner {
    padding-left: 20px; padding-right: 20px; }
  .hero-inner, .hero.hero-split .hero-inner { padding-top: 44px; padding-bottom: 48px; }
  .hero.hero-editorial .hero-inner { padding-top: 56px; padding-bottom: 44px; }
  .hero-copy h1 { font-size: 34px !important; line-height: 1.12; }
  .hero.hero-editorial .hero-copy h1 { font-size: 40px !important; }
  .hero.hero-split .hero-copy h1 { font-size: 36px !important; }
  .hero-copy .ds-lead { font-size: 16px; }
  .hero-cta { gap: 10px; margin-top: 24px; }
  .hero-cta .btn { flex: 1 1 100%; justify-content: center; }
  .hero-stats { gap: 20px; }

  /* Product cards 2-up (was one giant card per row). Tighter internals.
     minmax(0,1fr): plain 1fr lets min-content win and overflow the viewport
     (categories grid was 466px wide on a 393px phone, right column cropped). */
  .product-grid, .catalog-grid, .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .product-card .product-thumb { padding: 10px; }

  /* Footer: use the horizontal space — link columns flow 2-up, brand spans full width */
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; padding-bottom: 28px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; gap: 6px; text-align: center; }
}

/* ============================================================
   Favorites (client-side) + Saved page + Quote (Cerere) page
   Added 2026-06-10 — see partials/favorites_js.php, cerere/, saved/
   ============================================================ */

/* Saved heart in header: filled-state for product hearts */
.product-fav.is-fav,
.btn.product-fav.is-fav { color: var(--brand-red); }
.product-fav.is-fav i,
.btn.product-fav.is-fav i { fill: var(--brand-red); stroke: var(--brand-red); }

/* Header saved-icon badge reuses .cart-badge styling already defined */

/* Lightweight toast (used when sweetalert isn't on the page) */
.laiola-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(12px);
  background: var(--fg-strong); color: #fff; padding: 10px 18px; border-radius: var(--radius-pill);
  font-size: 14px; font-weight: var(--fw-medium); box-shadow: var(--shadow-md, 0 6px 24px rgba(0,0,0,.18));
  opacity: 0; pointer-events: none; z-index: 9999; transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
}
.laiola-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Empty state (saved + quote) */
.saved-empty {
  text-align: center; padding: 56px 20px; color: var(--fg-muted);
  border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--bg-soft);
}
.saved-empty i { color: var(--border-strong); }
.saved-empty p { font-size: 18px; font-weight: var(--fw-medium); color: var(--fg-strong); margin: 12px 0 4px; }
.saved-empty small { display: block; max-width: 460px; margin: 0 auto; }

.saved-card .saved-remove { background: rgba(255,255,255,.92); }

/* ---- Quote (Cerere) page ---- */
.cerere-lead { color: var(--fg-muted); max-width: 640px; margin: 0 0 26px; line-height: var(--lh-normal); }
.cerere-grid { display: grid; grid-template-columns: 1fr 360px; gap: 32px; align-items: start; }
.cerere-items { display: flex; flex-direction: column; gap: 12px; }
.cerere-item {
  display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; align-items: center;
  padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg);
}
.cerere-thumb { display: block; width: 84px; height: 84px; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-soft); }
.cerere-thumb img { width: 100%; height: 100%; object-fit: contain; }
.cerere-name { font-weight: var(--fw-medium); color: var(--fg-strong); text-decoration: none; line-height: var(--lh-snug); display: block; margin-bottom: 8px; }
.cerere-name:hover { color: var(--link); }
.cerere-qty { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 2px; }
.cerere-qty button { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; cursor: pointer; border-radius: 50%; color: var(--fg); }
.cerere-qty button:hover { background: var(--bg-soft); }
.cerere-qty span { min-width: 24px; text-align: center; font-weight: var(--fw-medium); }
.cerere-remove { border: 0; background: transparent; color: var(--fg-muted); cursor: pointer; padding: 8px; border-radius: var(--radius-sm); }
.cerere-remove:hover { color: var(--danger); background: var(--bg-soft); }

.cerere-form-box { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; background: var(--bg-soft); position: sticky; top: 90px; }
.cerere-form-title { font-size: 18px; margin: 0 0 16px; color: var(--fg-strong); }
.cerere-field { display: block; margin-bottom: 14px; }
.cerere-field span { display: block; font-size: 13px; font-weight: var(--fw-medium); color: var(--fg); margin-bottom: 5px; }
.cerere-field input, .cerere-field textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  font: inherit; font-size: 14px; background: var(--bg); color: var(--fg-strong); box-sizing: border-box;
}
.cerere-field input:focus, .cerere-field textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus); }
.cerere-submit { width: 100%; justify-content: center; margin-top: 4px; }
.cerere-privacy { font-size: 12px; color: var(--fg-muted); margin: 10px 0 0; text-align: center; }
.cerere-or { text-align: center; color: var(--fg-muted); font-size: 13px; margin: 16px 0 10px; }
.cerere-call { width: 100%; justify-content: center; }

.cerere-success { text-align: center; padding: 60px 20px; }
.cerere-success i { color: var(--success); }
.cerere-success h2 { margin: 16px 0 8px; color: var(--fg-strong); }
.cerere-success p { color: var(--fg-muted); max-width: 460px; margin: 0 auto 20px; }

@media (max-width: 820px) {
  .cerere-grid { grid-template-columns: 1fr; gap: 24px; }
  .cerere-form-box { position: static; order: -1; }
}
@media (max-width: 480px) {
  .cerere-item { grid-template-columns: 64px 1fr auto; }
  .cerere-thumb { width: 64px; height: 64px; }
}

/* ═══════════════════════════════════════════════════════════
   MICRO-INTERACTION LAYER (added 2026-06-10) — pre-deploy polish.
   Product-image zoom, add-to-quote button morph, badge/heart pops,
   tab fade, lazy-image fade, promo-bar slide. All gated for
   prefers-reduced-motion at the end of this block.
   ═══════════════════════════════════════════════════════════ */

/* 1. Product card hover: image gently zooms inside its frame */
.product-card .product-thumb .primary-img { transition: transform var(--dur-med) var(--ease-out); }
.product-card:hover .product-thumb .primary-img { transform: scale(1.04); }

/* 2. Add-to-quote feedback: button morph + header badge pop */
.btn.is-added { background: var(--brand-green-700) !important; pointer-events: none; }
@keyframes ds-badge-pop { 0% { transform: scale(1); } 45% { transform: scale(1.4); } 100% { transform: scale(1); } }
.cart-badge.pop { animation: ds-badge-pop 360ms var(--ease-out); }

/* 3. Favorite heart pop (transient .just-fav set by favorites_js) */
@keyframes ds-fav-pop { 0% { transform: scale(.6); } 55% { transform: scale(1.3); } 100% { transform: scale(1); } }
.product-fav.just-fav i { animation: ds-fav-pop 300ms var(--ease-out); }

/* 6. Featured-tabs panel: fade-through on switch */
@keyframes ds-tab-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.ftabs-panel.active { animation: ds-tab-in 180ms var(--ease-out); }

/* 7. Lazy images: fade in on load (.img-fade set by anim_js on not-yet-loaded imgs) */
img.img-fade { opacity: 0; transition: opacity 350ms var(--ease-out); }
img.img-fade.is-loaded { opacity: 1; }

/* 9. Promo bar: slide-up dismiss instead of display:none snap */
.promo-bar { max-height: 80px; transition: max-height 250ms var(--ease-in), opacity 200ms var(--ease-in); overflow: hidden; }
.promo-bar.is-dismissed { max-height: 0; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .product-card .product-thumb .primary-img { transition: none; }
    .product-card:hover .product-thumb .primary-img { transform: none; }
    .cart-badge.pop, .product-fav.just-fav i, .ftabs-panel.active { animation: none !important; }
    img.img-fade { opacity: 1; transition: none; }
    .promo-bar { transition: none; }
    .cv-faq-a { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE UX PASS (added 2026-06-10) — owner-reviewed reorder:
   products before sidebar, filter bottom-sheet, sticky quote bar,
   scrollable tabs, touch feedback, drawer stagger.
   ═══════════════════════════════════════════════════════════ */

/* Catalog pages: products/tiles first, sidebar (subcats + filters + similar)
   drops to the bottom once the layout is single-column. */
@media (max-width: 1000px) {
  .catalog-layout > .filters { order: 2; }
}

/* "Filtre" button + bottom-sheet (mobile only; desktop keeps the sidebar) */
.flt-open-btn { display: none; }
.flt-head { display: none; }
.flt-backdrop { display: none; }
@media (max-width: 1000px) {
  .flt-open-btn { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; }
  .flt-backdrop { display: block; position: fixed; inset: 0; background: rgba(13,18,21,.45);
                  opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease-std); z-index: 118; }
  body.flt-open .flt-backdrop { opacity: 1; pointer-events: auto; }
  body.flt-open { overflow: hidden; }
  body.flt-open .catalog-layout > .filters {
    position: fixed; left: 0; right: 0; bottom: 0; top: 12vh; z-index: 119;
    background: var(--surface-0); border-radius: 16px 16px 0 0; overflow-y: auto;
    padding: 14px 20px calc(24px + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 32px rgba(13,18,21,.20);
    animation: flt-up 260ms var(--ease-out);
  }
  body.flt-open .flt-head { display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: -14px; margin: -14px -20px 10px; padding: 14px 20px;
    background: var(--surface-0); border-bottom: 1px solid var(--line-100); z-index: 1; }
  .flt-head strong { font-size: var(--fs-16); color: var(--ink-900); }
}
@keyframes flt-up { from { transform: translateY(48px); opacity: .4; } }

/* Product page (≤768): calmer title, capped gallery, sticky quote bar */
.pp-sticky { display: none; }
@media (max-width: 768px) {
  .pp-name { font-size: 22px; line-height: 1.2; }
  .gallery-main { aspect-ratio: auto; height: 300px; }
  .pp-sticky { display: flex; position: fixed; left: 0; right: 0;
    bottom: calc(60px + env(safe-area-inset-bottom)); z-index: 95;
    background: var(--surface-0); border-top: 1px solid var(--line-200);
    box-shadow: 0 -6px 18px rgba(13,18,21,.10); padding: 10px 16px;
    gap: 12px; align-items: center;
    transform: translateY(140%); transition: transform 240ms var(--ease-out); }
  .pp-sticky.show { transform: translateY(0); }
  .pp-sticky strong { font-family: var(--font-display); font-weight: 900; font-size: 18px;
    color: var(--ink-900); white-space: nowrap; }
  .pp-sticky .btn { flex: 1; justify-content: center; }
}

/* Featured tabs: horizontal scroll instead of wrapping to two rows */
@media (max-width: 768px) {
  .ftabs-nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
               scrollbar-width: none; }
  .ftabs-nav::-webkit-scrollbar { display: none; }
  .ftabs-btn { white-space: nowrap; flex: none; }
}

/* Stats band: numbers must never wrap mid-figure ("6 000+") */
.heritage-stat strong, .heritage-mark .yrs { white-space: nowrap; }

/* Touch feedback: hover doesn't exist on phones — acknowledge the tap */
@media (hover: none) {
  .btn { transition: transform 90ms var(--ease-out), background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); }
  .btn:active { transform: scale(.97); }
  .product-card:active, .svc-tile:active, .cat-tile:active { transform: scale(.985); }
  .mab-item:active i { color: var(--brand-green); }
}

/* Drawer items: quick stagger when the menu opens */
.mobile-drawer.open .drawer-nav > * { animation: drw-in 240ms var(--ease-out) backwards; }
.mobile-drawer.open .drawer-nav > :nth-child(1) { animation-delay: 30ms; }
.mobile-drawer.open .drawer-nav > :nth-child(2) { animation-delay: 60ms; }
.mobile-drawer.open .drawer-nav > :nth-child(3) { animation-delay: 90ms; }
.mobile-drawer.open .drawer-nav > :nth-child(4) { animation-delay: 120ms; }
.mobile-drawer.open .drawer-nav > :nth-child(5) { animation-delay: 150ms; }
.mobile-drawer.open .drawer-nav > :nth-child(6) { animation-delay: 180ms; }
.mobile-drawer.open .drawer-nav > :nth-child(7) { animation-delay: 210ms; }
.mobile-drawer.open .drawer-nav > :nth-child(n+8) { animation-delay: 240ms; }
@keyframes drw-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  body.flt-open .catalog-layout > .filters { animation: none; }
  .flt-backdrop { transition: none; }
  .pp-sticky { transition: none; }
  .mobile-drawer.open .drawer-nav > * { animation: none !important; }
  .btn:active, .product-card:active, .svc-tile:active, .cat-tile:active { transform: none; }
}

/* Heritage / stats band — compact 2x2 on phones (was ~2 screens of wrapped
   labels; the "6 000+" number must never break across lines). */
@media (max-width: 768px) {
  .heritage { padding: 22px 0; }
  .heritage-inner { grid-template-columns: 1fr 1fr; gap: 16px 14px; align-items: start; }
  .heritage-mark { padding-right: 0; border-right: 0; gap: 10px; }
  .heritage-mark .yrs { font-size: 34px; }
  .heritage-mark .ago strong { font-size: 11px; }
  .heritage-mark .ago span { font-size: 10px; }
  .heritage-stat { padding: 0; border-left: 0; gap: 2px; }
  .heritage-stat strong { font-size: 22px; }
  .heritage-stat span { font-size: 10px; letter-spacing: 0.04em; line-height: 1.4; }
}