/* ==========================================================================
   Dr.Gartner — Dessert Atelier · B2B
   Editorial aesthetic: porcelain, espresso, muted bronze, hand-work craft
   Type: Montserrat (geometric) + Cormorant Garamond (serif accents)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600&family=Montserrat:wght@300;400;500;600;700;800&display=swap');

:root{
  --porcelain:   #f4efe6;
  --porcelain-2: #ece3d5;
  --sand:        #e3d6c2;
  --paper:       #fbf8f2;
  --ink:         #1a1310;
  --ink-soft:    #4b3d34;
  --ink-60:      rgba(26,19,16,.6);
  --ink-40:      rgba(26,19,16,.4);
  --ink-15:      rgba(26,19,16,.14);
  --ink-08:      rgba(26,19,16,.07);
  --espresso:    #241812;
  --espresso-2:  #170f0a;
  --bronze:      #a06a38;
  --bronze-dark: #7c4f26;
  --bronze-light:#c99b64;
  --champagne:   #cba86a;
  --champagne-2: #e6cf9c;
  --berry:       #7c2f3c;
  --sage:        #5f6f4e;
  --line:        rgba(26,19,16,.12);
  --shadow-sm:   0 10px 30px rgba(26,19,16,.08);
  --shadow-md:   0 20px 50px rgba(26,19,16,.13);
  --shadow-lg:   0 40px 90px rgba(26,19,16,.18);
  --r-lg: 4px;   /* editorial: near-square corners */
  --r-md: 3px;
  --r-pill: 999px;
  --display: 'Montserrat', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --sans:    'Montserrat', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --serif:   'Cormorant Garamond', Georgia, serif;
  --container: 1300px;
  --header-h: 96px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: 90px; }
body{
  margin:0; font-family: var(--sans); color: var(--ink); background: var(--porcelain);
  -webkit-font-smoothing: antialiased; overflow-x: hidden; font-weight:400; line-height:1.6;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
input, textarea, select{ font-family:inherit; }
p{ margin:0; }
h1,h2,h3,h4{ font-family: var(--display); font-weight:700; margin:0; letter-spacing:-.01em; line-height:1.12; }
h1 em, h2 em, h3 em, .serif{ font-family: var(--serif); font-style:italic; font-weight:500; letter-spacing:0; }
.container{ max-width: var(--container); margin:0 auto; padding: 0 40px; }
::selection{ background: var(--champagne); color: var(--espresso); }

/* subtle marble veining used on light sections */
.veins{ pointer-events:none; position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:
    repeating-linear-gradient(118deg, transparent 0 70px, rgba(26,19,16,.018) 71px, transparent 75px 170px),
    repeating-linear-gradient(28deg, transparent 0 100px, rgba(160,106,56,.03) 101px, transparent 106px 230px); }

/* ---------- section rhythm ---------- */
.section{ position:relative; padding: 130px 0; }
.section--tight{ padding: 90px 0; }
.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family: var(--sans); font-size:12px; font-weight:700; letter-spacing:.28em; text-transform:uppercase;
  color: var(--bronze-dark);
}
.eyebrow::before{ content:''; width:26px; height:1px; background: var(--bronze); display:inline-block; }
.eyebrow--center{ justify-content:center; }
.section-head{ max-width: 780px; margin: 0 0 64px; }
.section-head--center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-title{ font-size: clamp(30px, 4.4vw, 54px); margin-top:18px; font-weight:700; text-wrap:balance; }
.section-sub{ margin-top:20px; font-size:16.5px; line-height:1.75; color: var(--ink-60); font-weight:400; }

/* ---------- reveal-on-scroll ---------- */
.reveal{ opacity:0; transform: translateY(34px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-scale{ opacity:0; transform: scale(.95); transition: opacity 1.1s ease, transform 1.1s var(--ease); }
.reveal-scale.is-visible{ opacity:1; transform:none; }
.stagger > *{ transition-delay: calc(var(--i,0) * 90ms); }
/* image clip reveal */
.clip-reveal{ clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ease); }
.clip-reveal.is-visible{ clip-path: inset(0 0 0 0); }

/* ---------- buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 16px 32px; border-radius: var(--r-pill); border:1px solid transparent; overflow:hidden;
  font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  transition: transform .4s var(--ease), box-shadow .4s, background .4s, color .4s, border-color .4s;
}
.btn::after{ /* shine */
  content:''; position:absolute; top:0; left:-120%; width:70%; height:100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-18deg);
  transition: left .7s var(--ease);
}
.btn:hover::after{ left:130%; }
.btn:active{ transform: scale(.97); }
.btn-primary{ background: var(--espresso); color: var(--paper); }
.btn-primary:hover{ background: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-gold{ background: linear-gradient(135deg, var(--champagne-2), var(--champagne)); color: var(--espresso); }
.btn-gold:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-outline{ background: transparent; border-color: var(--ink-15); color: var(--ink); }
.btn-outline:hover{ border-color: var(--ink); background: var(--ink); color: var(--paper); }
.btn-ghost-light{ background: transparent; border-color: rgba(255,255,255,.5); color:#fff; }
.btn-ghost-light:hover{ background:#fff; color:var(--espresso); }
.btn-sm{ padding:11px 22px; font-size:11px; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.6; pointer-events:none; }

/* link with animated underline */
.link-underline{ position:relative; font-weight:600; }
.link-underline::after{ content:''; position:absolute; left:0; right:100%; bottom:-3px; height:1px; background: currentColor; transition: right .4s var(--ease); }
.link-underline:hover::after{ right:0; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index:1000; height: var(--header-h);
  display:flex; align-items:center; transition: height .4s ease, box-shadow .4s ease;
}
.site-header::before{
  content:''; position:absolute; inset:0; z-index:-1; background: rgba(244,239,230,0); backdrop-filter: blur(0px);
  transition: background .45s ease, backdrop-filter .45s ease; border-bottom:1px solid transparent;
}
.site-header.is-scrolled{ height:74px; box-shadow: 0 8px 30px rgba(26,19,16,.07); }
.site-header.is-scrolled::before{ background: rgba(244,239,230,.72); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); border-bottom-color: var(--line); }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; }

.logo{ display:flex; align-items:center; gap:14px; }
.logo-mark{
  width:52px; height:52px; border-radius:50%; overflow:hidden; flex:none;
  border:1px solid var(--champagne); box-shadow: 0 4px 14px rgba(26,19,16,.1); background:#fff;
  transition: transform .5s var(--ease);
}
.site-header.is-scrolled .logo-mark{ width:46px; height:46px; }
.logo:hover .logo-mark{ transform: rotate(-6deg) scale(1.05); }
.logo-mark img{ width:100%; height:100%; object-fit:cover; }
.logo-word{ display:flex; flex-direction:column; line-height:1; }
.logo-word b{ font-family: var(--display); font-size:19px; letter-spacing:.02em; color: var(--ink); font-weight:700; }
.logo-word span{ font-size:8.5px; letter-spacing:.32em; text-transform:uppercase; color: var(--bronze-dark); margin-top:6px; font-weight:600; }

.main-nav{ display:flex; align-items:center; gap:38px; }
.main-nav a{ font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-60); position:relative; padding:6px 0; transition: color .3s; }
.main-nav a::after{ content:''; position:absolute; left:0; right:100%; bottom:0; height:1px; background: var(--bronze); transition: right .4s var(--ease); }
.main-nav a:hover, .main-nav a.active{ color: var(--ink); }
.main-nav a:hover::after, .main-nav a.active::after{ right:0; }

.header-actions{ display:flex; align-items:center; gap:14px; }
.icon-btn{ position:relative; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: rgba(26,19,16,.05); border:1px solid var(--ink-15); transition: background .3s, transform .3s, color .3s; }
.icon-btn:hover{ background: var(--espresso); color:#fff; transform: translateY(-2px); }
.icon-btn svg{ width:19px; height:19px; }
.cart-count{ position:absolute; top:-4px; right:-4px; min-width:19px; height:19px; padding:0 4px; border-radius:999px; background: var(--bronze-dark); color:#fff; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow: 0 0 0 2px var(--porcelain); transform: scale(0); transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.cart-count.show{ transform: scale(1); }

.burger{ display:none; width:46px; height:46px; border-radius:50%; border:1px solid var(--ink-15); background:transparent; align-items:center; justify-content:center; flex-direction:column; gap:5px; }
.burger span{ width:18px; height:1.5px; background: var(--ink); transition: transform .3s, opacity .3s; }
.burger.is-open span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

.mobile-nav{ position:fixed; inset: var(--header-h) 0 0 0; z-index:999; background: var(--paper); transform: translateY(-8px); opacity:0; pointer-events:none; transition: opacity .3s ease, transform .3s ease; padding: 34px 32px; overflow-y:auto; }
.mobile-nav.is-open{ opacity:1; transform:none; pointer-events:auto; }
.mobile-nav a{ display:block; font-family: var(--display); font-weight:600; font-size:22px; text-transform:uppercase; letter-spacing:.02em; padding:18px 0; border-bottom:1px solid var(--line); }
.mobile-nav .mobile-contact{ margin-top:32px; font-size:14px; color:var(--ink-60); line-height:2; }

/* ==========================================================================
   HERO (editorial — no fullscreen photo)
   ========================================================================== */
.hero{ position:relative; padding: calc(var(--header-h) + 40px) 0 70px; overflow:hidden; background: var(--porcelain); }
.hero .veins{ opacity:.7; }
.hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns: 1.08fr .92fr; gap:60px; align-items:center; }
.hero-content{ max-width:620px; }
.hero-eyebrow{ display:inline-flex; align-items:center; gap:12px; font-size:12px; font-weight:700; letter-spacing:.3em; text-transform:uppercase; color: var(--bronze-dark); }
.hero-eyebrow::before{ content:''; width:34px; height:1px; background: var(--bronze); }
.hero-title{ font-size: clamp(40px, 6vw, 78px); line-height:1.02; margin-top:26px; font-weight:700; letter-spacing:-.02em; }
.hero-title .word{ display:inline-block; opacity:0; transform: translateY(40px); }
.hero-title em{ color: var(--bronze-dark); }
.hero-sub{ color: var(--ink-60); font-size: clamp(16px,1.5vw,18px); max-width:500px; margin-top:28px; line-height:1.75; }
.hero-cta{ margin-top:38px; display:flex; gap:16px; flex-wrap:wrap; }
.hero-stats{ margin-top:56px; display:flex; gap:44px; flex-wrap:wrap; }
.hero-stat b{ font-family: var(--display); font-size:38px; font-weight:700; display:block; line-height:1; letter-spacing:-.02em; }
.hero-stat span{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-60); margin-top:8px; display:block; }
.hero-stat .amp{ color: var(--bronze); }

.hero-visual{ position:relative; height:min(560px, 64vw); }
.hero-arch{
  position:absolute; right:0; top:50%; transform: translateY(-50%); width:82%; height:100%;
  border-radius: 260px 260px 8px 8px; overflow:hidden; box-shadow: var(--shadow-lg); background: var(--sand);
  transition: transform .5s var(--ease);
}
.hero-arch img{ width:100%; height:100%; object-fit:cover; transform: scale(1.08); will-change: transform; }
.hero-float{
  position:absolute; left:-6%; bottom:6%; width:190px; height:190px; border-radius:50%; overflow:hidden;
  border:6px solid var(--porcelain); box-shadow: var(--shadow-md); background: var(--sand); z-index:2;
  animation: floaty 6s ease-in-out infinite;
}
.hero-float img{ width:100%; height:100%; object-fit:cover; }
@keyframes floaty{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-16px); } }

/* rotating circular badge — logo static, text ring spins */
.hero-badge{ position:absolute; left:-9%; top:-2%; width:124px; height:124px; z-index:3; filter: drop-shadow(0 10px 24px rgba(26,19,16,.14)); transition: transform .6s var(--ease); }
.hero-badge .badge-ring{ position:absolute; inset:0; width:100%; height:100%; animation: spin 26s linear infinite; }
.hero-badge .badge-logo{ position:absolute; inset:19px; border-radius:50%; overflow:hidden; background:#fff; border:1px solid var(--champagne); }
.hero-badge .badge-logo img{ width:100%; height:100%; object-fit:cover; }
@keyframes spin{ to{ transform: rotate(360deg); } }
.hero-badge text{ font-family: var(--sans); font-size:9.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; fill: var(--bronze-dark); }

/* ---------- marquee ---------- */
.marquee{ margin-top:70px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 0; overflow:hidden; position:relative; z-index:1; }
.marquee-track{ display:flex; gap:0; width:max-content; animation: marquee 32s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state: paused; }
.marquee-item{ display:inline-flex; align-items:center; font-family: var(--serif); font-style:italic; font-size:26px; color: var(--ink-40); padding:0 34px; white-space:nowrap; }
.marquee-item::after{ content:'✦'; font-style:normal; font-size:13px; color: var(--bronze); margin-left:34px; }
@keyframes marquee{ to{ transform: translateX(-50%); } }

/* ==========================================================================
   TELEGRAM BANNER
   ========================================================================== */
.tg-banner{ position:relative; z-index:2; }
.tg-banner-card{
  display:flex; align-items:center; gap:26px; padding:34px 44px; border-radius: 28px;
  background: linear-gradient(120deg, #22352c, #16241d 60%); color:#fff; box-shadow: var(--shadow-md); flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.tg-banner-card::before{ content:''; position:absolute; right:-60px; top:-60px; width:200px; height:200px; border-radius:50%; background: rgba(255,255,255,.05); }
.tg-icon{ width:62px; height:62px; border-radius:50%; background: rgba(255,255,255,.1); flex:none; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.25); }
.tg-icon svg{ width:28px; height:28px; }
.tg-banner-text{ flex:1; min-width:240px; }
.tg-banner-text b{ font-family: var(--display); font-weight:700; font-size:19px; display:block; margin-bottom:6px; }
.tg-banner-text span{ color: rgba(255,255,255,.7); font-size:14.5px; }

/* ==========================================================================
   WHY US
   ========================================================================== */
.why-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:0; border-top:1px solid var(--line); }
.why-card{ padding:44px 30px 40px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition: background .4s; position:relative; }
.why-card:last-child{ border-right:none; }
.why-card::before{ content:''; position:absolute; left:0; top:-1px; width:0; height:2px; background: var(--bronze); transition: width .5s var(--ease); }
.why-card:hover{ background: var(--paper); }
.why-card:hover::before{ width:100%; }
.why-num{ font-family: var(--serif); font-size:15px; color: var(--bronze); font-style:italic; }
.why-icon{ width:52px; height:52px; margin:22px 0 24px; display:flex; align-items:center; justify-content:center; color: var(--bronze-dark); }
.why-icon svg{ width:34px; height:34px; }
.why-card h3{ font-size:18px; margin-bottom:12px; font-weight:700; }
.why-card p{ font-size:14px; color: var(--ink-60); line-height:1.7; }

/* ==========================================================================
   SIGNATURE SHOWCASE (home)
   ========================================================================== */
.showcase{ display:grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: repeat(2, minmax(0,1fr)); gap:20px; height:640px; }
.show-card{ position:relative; border-radius: var(--r-lg); overflow:hidden; display:block; background: var(--espresso); box-shadow: var(--shadow-sm); }
.show-card--feature{ grid-row: span 2; }
.show-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform 1.1s var(--ease); }
.show-card:hover img{ transform: scale(1.06); }
.show-card::before{ content:''; position:absolute; inset:0; z-index:1; background: linear-gradient(0deg, rgba(15,9,6,.86) 0%, rgba(15,9,6,.2) 52%, transparent 100%); }
.show-card-tag{ position:absolute; top:18px; left:18px; z-index:2; padding:7px 15px; border-radius:999px; background: var(--champagne); color: var(--espresso); font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.show-card-arrow{ position:absolute; top:18px; right:18px; z-index:2; width:40px; height:40px; border-radius:50%; background: rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.4); display:flex; align-items:center; justify-content:center; transform: rotate(-45deg); transition: transform .5s var(--ease), background .4s; }
.show-card:hover .show-card-arrow{ transform: rotate(0deg); background: var(--champagne); border-color: var(--champagne); }
.show-card-arrow svg{ width:16px; height:16px; color:#fff; }
.show-card:hover .show-card-arrow svg{ color: var(--espresso); }
.show-card-body{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:26px 26px; color:#fff; transform: translateY(6px); transition: transform .5s var(--ease); }
.show-card:hover .show-card-body{ transform:none; }
.show-card-body span{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color: rgba(255,255,255,.62); }
.show-card-body h3{ margin-top:8px; color:#fff; font-weight:700; font-size:20px; line-height:1.25; }
.show-card--feature .show-card-body h3{ font-size:30px; }

/* category cloud (elegant text links instead of square tiles) */
.cat-cloud{ display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; margin-top:40px; padding-top:34px; border-top:1px solid var(--line); }
.cat-cloud-label{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color: var(--ink-50); flex:none; }
.cat-cloud-links{ display:flex; flex-wrap:wrap; gap:10px 14px; }
.cat-link{ position:relative; font-family: var(--serif); font-size:20px; color: var(--ink-80); padding:2px 2px; transition: color .3s; }
.cat-link::after{ content:''; position:absolute; left:0; right:100%; bottom:-1px; height:1px; background: var(--bronze); transition: right .35s var(--ease); }
.cat-link:hover{ color: var(--espresso); }
.cat-link:hover::after{ right:0; }
.cat-link:not(:last-child)::before{ content:'·'; position:absolute; right:-9px; color: var(--line); }
.showcase-cta{ margin-top:42px; text-align:center; }

/* ==========================================================================
   HOW WE WORK
   ========================================================================== */
.steps{ display:grid; grid-template-columns: repeat(4,1fr); gap:0; position:relative; }
.steps::before{ content:''; position:absolute; top:30px; left:8%; right:8%; height:1px; background: repeating-linear-gradient(90deg, var(--ink-15) 0 7px, transparent 7px 15px); }
.step{ position:relative; padding-right:26px; }
.step-num{ width:62px; height:62px; border-radius:50%; background: var(--paper); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-family: var(--serif); font-style:italic; font-size:24px; color: var(--bronze-dark); position:relative; z-index:1; margin-bottom:28px; box-shadow: var(--shadow-sm); transition: transform .4s var(--ease), background .4s, color .4s; }
.step:hover .step-num{ transform: translateY(-6px); background: var(--espresso); color: var(--champagne-2); }
.step h3{ font-size:17px; margin-bottom:11px; font-weight:700; }
.step p{ font-size:14px; color: var(--ink-60); line-height:1.7; }

/* ==========================================================================
   CTA FORM SECTION
   ========================================================================== */
.cta-section{ background: linear-gradient(155deg, #241812 0%, #150d08 100%); color:#fff; border-radius: var(--r-lg); position:relative; overflow:hidden; }
.cta-section::before{ content:''; position:absolute; inset:0; background: radial-gradient(ellipse 60% 60% at 92% 0%, rgba(203,168,106,.16), transparent 60%); }
.cta-grid{ position:relative; display:grid; grid-template-columns: 1fr 1fr; gap:64px; padding:76px; align-items:center; }
.cta-info .eyebrow{ color: var(--champagne-2); }
.cta-info .eyebrow::before{ background: var(--champagne-2); }
.cta-info h2{ color:#fff; font-size: clamp(26px,3vw,40px); margin-top:18px; font-weight:700; }
.cta-info p{ color: rgba(255,255,255,.72); margin-top:18px; line-height:1.75; font-size:15px; }
.cta-urgent{ margin-top:34px; padding-top:30px; border-top:1px solid rgba(255,255,255,.14); }
.cta-urgent > span{ display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color: rgba(255,255,255,.5); margin-bottom:12px; }
.cta-urgent a{ display:inline-flex; align-items:center; gap:8px; font-weight:700; color: var(--champagne-2); margin-right:24px; font-size:15px; }
.cta-urgent a:hover{ text-decoration:underline; }

/* ==========================================================================
   FORMS
   ========================================================================== */
.form-card{ background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius: var(--r-md); padding:38px; }
.form-card.form-light{ background: var(--paper); border-color: var(--line); box-shadow: var(--shadow-sm); }
.field{ margin-bottom:18px; position:relative; }
.field label{ display:block; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:9px; color: rgba(255,255,255,.55); }
.form-light .field label{ color: var(--ink-60); }
.field input, .field textarea, .field select{ width:100%; padding:15px 16px; border-radius: var(--r-md); border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); color:#fff; font-size:14.5px; transition: border-color .3s, background .3s; }
.form-light .field input, .form-light .field textarea, .form-light .field select{ border-color: var(--line); background: var(--porcelain); color: var(--ink); }
.field input::placeholder, .field textarea::placeholder{ color: rgba(255,255,255,.35); }
.form-light .field input::placeholder, .form-light .field textarea::placeholder{ color: var(--ink-40); }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color: var(--champagne); }
.field textarea{ resize:vertical; min-height:100px; }
.field.has-error input, .field.has-error textarea{ border-color:#c0392b; }
.field-error{ font-size:12px; color:#e08b8b; margin-top:6px; display:none; }
.form-light .field-error{ color:#c0392b; }
.field.has-error .field-error{ display:block; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-note{ font-size:12px; color: rgba(255,255,255,.45); margin-top:16px; line-height:1.6; }
.form-light .form-note{ color: var(--ink-60); }

.toast{ position:fixed; top:24px; right:24px; z-index:3000; max-width:360px; background: var(--espresso); color:#fff; padding:18px 22px; border-radius: var(--r-md); box-shadow: var(--shadow-lg); display:flex; gap:14px; align-items:flex-start; transform: translateX(420px); opacity:0; transition: transform .5s var(--ease), opacity .5s; }
.toast.show{ transform:none; opacity:1; }
.toast-icon{ width:30px; height:30px; border-radius:50%; background: var(--champagne); color:var(--espresso); flex:none; display:flex; align-items:center; justify-content:center; }
.toast b{ display:block; font-size:14px; margin-bottom:3px; font-weight:700; }
.toast p{ font-size:13px; color: rgba(255,255,255,.7); }

/* ==========================================================================
   BADGES
   ========================================================================== */
.badge{ display:inline-flex; align-items:center; padding:5px 11px; border-radius:999px; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.badge-new{ background: var(--champagne); color: var(--espresso); }
.badge-hit{ background: var(--berry); color:#fff; }
.badge-seasonal{ background: var(--sage); color:#fff; }
.badge-vegan{ background:#e7efe0; color: var(--sage); border:1px solid var(--sage); }

/* ==========================================================================
   TOOLBAR / TABS / PRODUCT GRID
   ========================================================================== */
.toolbar{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; justify-content:space-between; margin-bottom:34px; }
.search-box{ position:relative; flex:1; min-width:240px; max-width:440px; }
.search-box input{ width:100%; padding:14px 20px 14px 46px; border-radius:999px; border:1px solid var(--line); background: var(--paper); font-size:14.5px; }
.search-box input:focus{ outline:none; border-color: var(--bronze); }
.search-box svg{ position:absolute; left:18px; top:50%; transform:translateY(-50%); width:17px; height:17px; color: var(--ink-60); }

.tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:44px; }
.tab{ padding:11px 20px; border-radius:999px; border:1px solid var(--line); background: var(--paper); font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color: var(--ink-60); transition: all .3s; }
.tab:hover{ border-color: var(--bronze); color: var(--ink); }
.tab.is-active{ background: var(--espresso); color:#fff; border-color: var(--espresso); }

.product-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:26px; }
.product-card{ background: var(--paper); border-radius: var(--r-lg); overflow:hidden; border:1px solid var(--line); transition: transform .5s var(--ease), box-shadow .5s; display:flex; flex-direction:column; }
.product-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-md); }
.product-card.is-hidden{ display:none; }
.product-media{ position:relative; aspect-ratio: 1/1; overflow:hidden; background: var(--porcelain-2); cursor:pointer; }
.product-media img{ width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease); }
.product-card:hover .product-media img{ transform: scale(1.07); }
.product-badges{ position:absolute; top:14px; left:14px; z-index:2; display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.product-quick{ position:absolute; right:14px; bottom:14px; z-index:2; width:42px; height:42px; border-radius:50%; background:#fff; box-shadow: var(--shadow-sm); display:flex; align-items:center; justify-content:center; transform: translateY(60px); opacity:0; transition: transform .4s var(--ease), opacity .4s; }
.product-card:hover .product-quick{ transform:none; opacity:1; }
.product-quick svg{ width:18px; height:18px; color: var(--ink); }
.product-body{ padding:22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.product-cat{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color: var(--bronze-dark); font-weight:700; }
.product-body h3{ font-size:17px; line-height:1.3; font-weight:700; }
.product-desc{ font-size:13px; color: var(--ink-60); line-height:1.6; flex:1; }
.product-meta{ display:flex; align-items:center; justify-content:space-between; font-size:13px; color: var(--ink-60); padding-top:12px; border-top:1px solid var(--line); margin-top:4px; }
.product-price{ font-family: var(--serif); font-size:20px; color: var(--ink); font-weight:600; }
.product-actions{ margin-top:6px; }

.dessert-placeholder{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; text-align:center; padding:20px; }
.dessert-placeholder svg{ width:44px; height:44px; opacity:.5; }
.dessert-placeholder span{ font-family: var(--serif); font-style:italic; font-size:14px; color: var(--ink-soft); max-width:180px; }
.ph-tone-1{ background: linear-gradient(150deg, #efe0c6, #e2c99a); }
.ph-tone-2{ background: linear-gradient(150deg, #efd7cf, #e0b3a7); }
.ph-tone-3{ background: linear-gradient(150deg, #e2dcc6, #cbceb0); }
.ph-tone-4{ background: linear-gradient(150deg, #e6d3bf, #c7a479); }
.ph-tone-5{ background: linear-gradient(150deg, #ead4de, #d5b2c4); }
.dessert-placeholder svg{ color: var(--ink-soft); }

/* ==========================================================================
   MODAL
   ========================================================================== */
.modal-overlay{ position:fixed; inset:0; z-index:2000; background: rgba(15,9,6,.55); backdrop-filter: blur(4px); display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; pointer-events:none; transition: opacity .35s ease; }
.modal-overlay.is-open{ opacity:1; pointer-events:auto; }
.modal-card{ background: var(--paper); border-radius: var(--r-lg); max-width:940px; width:100%; max-height:88vh; overflow:auto; display:grid; grid-template-columns: 1fr 1fr; box-shadow: var(--shadow-lg); transform: translateY(30px) scale(.97); transition: transform .45s var(--ease); }
.modal-overlay.is-open .modal-card{ transform:none; }
.modal-media{ position:relative; min-height:360px; background: var(--porcelain-2); }
.modal-media img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.modal-body{ padding:48px; position:relative; }
.modal-close{ position:absolute; top:20px; right:20px; width:38px; height:38px; border-radius:50%; background: var(--porcelain); display:flex; align-items:center; justify-content:center; z-index:5; transition: background .3s, transform .3s; }
.modal-close:hover{ background: var(--espresso); color:#fff; transform: rotate(90deg); }
.modal-badges{ display:flex; gap:8px; margin-bottom:18px; }
.modal-body h2{ font-size:30px; margin-bottom:16px; font-weight:700; }
.modal-body .product-desc{ font-size:14.5px; margin-bottom:24px; }
.modal-facts{ display:flex; gap:28px; margin-bottom:28px; flex-wrap:wrap; }
.modal-fact span{ display:block; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-60); margin-bottom:5px; }
.modal-fact b{ font-family: var(--serif); font-size:19px; font-weight:600; }
.qty-control{ display:flex; align-items:center; border:1px solid var(--line); border-radius:999px; overflow:hidden; width:fit-content; margin-bottom:22px; }
.qty-control button{ width:44px; height:44px; background:transparent; font-size:18px; color: var(--ink); }
.qty-control button:hover{ background: var(--porcelain); }
.qty-control input{ width:48px; text-align:center; border:none; background:transparent; font-size:15px; font-weight:700; }
.qty-control input:focus{ outline:none; }

/* ==========================================================================
   CATALOG TABLE
   ========================================================================== */
.catalog-layout{ display:grid; grid-template-columns: 260px 1fr; gap:40px; align-items:flex-start; }
.catalog-side{ position:sticky; top:100px; }
.catalog-side h4{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-60); margin-bottom:16px; font-weight:700; }
.filter-list{ display:flex; flex-direction:column; gap:2px; margin-bottom:30px; }
.filter-item{ text-align:left; padding:11px 16px; border-radius:6px; background:transparent; border:none; font-size:13.5px; font-weight:600; color:var(--ink-60); transition: all .3s; display:flex; justify-content:space-between; align-items:center; }
.filter-item:hover{ background: var(--paper); color: var(--ink); }
.filter-item.is-active{ background: var(--espresso); color:#fff; }
.filter-item .count{ font-size:11px; opacity:.6; }
.catalog-main{ min-width:0; }
.catalog-toolbar{ display:flex; gap:16px; align-items:center; justify-content:space-between; margin-bottom:26px; flex-wrap:wrap; }
.catalog-table-wrap{ background: var(--paper); border-radius: var(--r-lg); border:1px solid var(--line); overflow:hidden; box-shadow: var(--shadow-sm); }
.catalog-table{ width:100%; border-collapse:collapse; }
.catalog-table thead th{ text-align:left; padding:18px 20px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-60); border-bottom:1px solid var(--line); background: var(--porcelain-2); font-weight:700; }
.catalog-table tbody td{ padding:16px 20px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:middle; }
.catalog-table tbody tr{ transition: background .3s; cursor:pointer; }
.catalog-table tbody tr:hover{ background: var(--porcelain-2); }
.catalog-table tbody tr:last-child td{ border-bottom:none; }
.catalog-thumb{ width:64px; height:64px; border-radius:10px; overflow:hidden; position:relative; background: var(--porcelain-2); flex:none; }
.catalog-thumb img{ width:100%; height:100%; object-fit:cover; }
.catalog-thumb .dessert-placeholder{ gap:0; }
.catalog-thumb .dessert-placeholder svg{ width:24px; height:24px; }
.catalog-thumb .dessert-placeholder span{ display:none; }
.catalog-name-cell{ display:flex; align-items:center; gap:14px; min-width:260px; }
.catalog-name b{ font-family: var(--display); font-weight:700; font-size:14.5px; display:block; }
.catalog-name .badge{ margin-top:6px; }
.cell-price{ font-family: var(--serif); font-size:17px; font-weight:600; white-space:nowrap; }
.cell-desc{ max-width:300px; color: var(--ink-60); font-size:12.5px; line-height:1.55; }
.cell-cat{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color: var(--bronze-dark); font-weight:700; }
.catalog-empty{ padding:80px 20px; text-align:center; color: var(--ink-60); }
.table-add{ width:40px; height:40px; border-radius:50%; background: var(--porcelain-2); display:inline-flex; align-items:center; justify-content:center; transition: background .3s, color .3s, transform .3s; }
.table-add:hover{ background: var(--espresso); color:#fff; transform: scale(1.08); }
.table-add svg{ width:17px; height:17px; }

/* ==========================================================================
   CART DRAWER
   ========================================================================== */
.cart-overlay{ position:fixed; inset:0; z-index:2500; background: rgba(15,9,6,.5); opacity:0; pointer-events:none; transition: opacity .4s ease; }
.cart-overlay.is-open{ opacity:1; pointer-events:auto; }
.cart-drawer{ position:fixed; top:0; right:0; bottom:0; width:min(460px, 100vw); z-index:2600; background: var(--paper); box-shadow: -20px 0 60px rgba(0,0,0,.2); transform: translateX(100%); transition: transform .5s var(--ease); display:flex; flex-direction:column; }
.cart-drawer.is-open{ transform:none; }
.cart-head{ display:flex; align-items:center; justify-content:space-between; padding:26px 28px; border-bottom:1px solid var(--line); }
.cart-head h3{ font-size:20px; font-weight:700; }
.cart-close{ width:38px; height:38px; border-radius:50%; background: var(--porcelain); display:flex; align-items:center; justify-content:center; transition: background .3s, transform .3s; }
.cart-close:hover{ background: var(--espresso); color:#fff; transform: rotate(90deg); }
.cart-scroll{ flex:1; overflow-y:auto; display:flex; flex-direction:column; }
.cart-body{ padding:14px 28px 0; }
.cart-item{ display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); animation: cartIn .4s var(--ease); }
@keyframes cartIn{ from{ opacity:0; transform: translateX(20px); } }
.cart-item-media{ width:74px; height:74px; border-radius:10px; overflow:hidden; background: var(--porcelain-2); flex:none; position:relative; }
.cart-item-media img{ width:100%; height:100%; object-fit:cover; }
.cart-item-info{ flex:1; }
.cart-item-info h4{ font-family: var(--display); font-weight:700; font-size:14.5px; margin-bottom:4px; }
.cart-item-info span{ font-size:12.5px; color: var(--ink-60); }
.cart-item-row{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; }
.cart-item-qty{ display:flex; align-items:center; border:1px solid var(--line); border-radius:999px; }
.cart-item-qty button{ width:28px; height:28px; background:none; font-size:14px; }
.cart-item-qty input{ width:32px; text-align:center; border:none; background:none; font-size:13px; font-weight:700; }
.cart-item-price{ font-family: var(--serif); font-size:16px; font-weight:600; }
.cart-item-remove{ color: var(--berry); font-size:12px; text-decoration:underline; margin-top:8px; display:inline-block; }
.cart-empty{ text-align:center; padding:70px 20px; }
.cart-empty svg{ width:60px; height:60px; color: var(--ink-15); margin:0 auto 22px; }
.cart-empty h3{ font-family: var(--display); font-size:19px; font-weight:700; }
.cart-empty p{ color: var(--ink-60); font-size:14px; margin-top:8px; }
.cart-summary{ padding:22px 28px; border-top:1px solid var(--line); }
.cart-summary-row{ display:flex; justify-content:space-between; font-size:14px; margin-bottom:6px; color: var(--ink-60); }
.cart-summary-row.total{ font-family: var(--serif); font-size:20px; font-weight:600; color: var(--ink); margin:14px 0 4px; }
.cart-form{ padding:8px 28px 28px; }
.cart-form h4{ font-size:14px; margin-bottom:16px; padding-top:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
/* cart drawer is a light surface — force light field styling */
.cart-drawer .field label{ color: var(--ink-60); }
.cart-drawer .field input, .cart-drawer .field textarea{ border-color: var(--line); background: var(--porcelain); color: var(--ink); }
.cart-drawer .field input::placeholder, .cart-drawer .field textarea::placeholder{ color: var(--ink-40); }
.cart-drawer .field input:focus, .cart-drawer .field textarea:focus{ border-color: var(--bronze); }
.cart-drawer .form-note{ color: var(--ink-60); }
.cart-drawer .field-error{ color:#c0392b; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background: var(--espresso-2); color: rgba(255,255,255,.72); padding: 90px 0 32px; }
.footer-top{ display:grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap:50px; padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-brand .logo-word b{ color:#fff; }
.footer-brand p{ margin-top:22px; font-size:14px; line-height:1.75; max-width:330px; color: rgba(255,255,255,.55); }
.footer-col h4{ color:#fff; font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:22px; font-family:var(--display); font-weight:700; }
.footer-col ul li{ margin-bottom:13px; }
.footer-col a{ font-size:14px; transition: color .3s; }
.footer-col a:hover{ color: var(--champagne-2); }
.footer-col li{ font-size:14px; color: rgba(255,255,255,.55); line-height:1.5; margin-bottom:13px; }
.footer-tg{ display:inline-flex; align-items:center; gap:10px; margin-top:8px; padding:12px 20px; border:1px solid rgba(255,255,255,.25); border-radius:999px; font-size:13px; transition: border-color .3s, color .3s; }
.footer-tg:hover{ border-color: var(--champagne-2); color: var(--champagne-2); }
.footer-tg svg{ width:18px; height:18px; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:28px; font-size:12px; color: rgba(255,255,255,.4); flex-wrap:wrap; gap:12px; }

/* ==========================================================================
   PAGE HERO (sub pages)
   ========================================================================== */
.page-hero{ padding: calc(var(--header-h) + 76px) 0 64px; text-align:center; position:relative; overflow:hidden; }
.page-hero h1{ font-size: clamp(36px,5.4vw,64px); margin-top:18px; font-weight:700; letter-spacing:-.02em; }
.page-hero p{ max-width:620px; margin: 20px auto 0; color: var(--ink-60); font-size:16px; line-height:1.7; }
.breadcrumbs{ display:flex; gap:8px; justify-content:center; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color: var(--ink-40); margin-bottom:20px; }
.breadcrumbs a:hover{ color: var(--bronze-dark); }

/* content blocks: Terms / Contacts */
.info-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:22px; }
.info-card{ background: var(--paper); border:1px solid var(--line); border-radius: var(--r-lg); padding:38px; transition: transform .4s var(--ease), box-shadow .4s; }
.info-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.info-card .card-num{ font-family: var(--serif); font-style:italic; font-size:15px; color: var(--bronze); }
.info-card h3{ font-size:20px; margin:14px 0 14px; display:flex; align-items:center; gap:12px; font-weight:700; }
.info-card h3 svg{ width:24px; height:24px; color: var(--bronze-dark); flex:none; }
.info-card p, .info-card li{ font-size:14.5px; color: var(--ink-60); line-height:1.75; }
.info-card ul{ margin-top:12px; }
.info-card li{ position:relative; padding-left:22px; margin-bottom:10px; }
.info-card li::before{ content:''; position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:50%; background: var(--bronze); }
.note-pill{ display:inline-block; margin-top:16px; padding:10px 16px; border-radius:8px; background: var(--porcelain-2); font-size:13px; color: var(--bronze-dark); font-weight:600; }

.two-col{ display:grid; grid-template-columns: 1.05fr .95fr; gap:64px; align-items:flex-start; }
.contact-list{ display:flex; flex-direction:column; gap:6px; margin-top:30px; }
.contact-item{ display:flex; gap:18px; align-items:flex-start; padding:20px 0; border-bottom:1px solid var(--line); }
.contact-item:last-child{ border-bottom:none; }
.contact-item .icon{ width:52px; height:52px; border-radius:50%; background: var(--porcelain-2); display:flex; align-items:center; justify-content:center; flex:none; color: var(--bronze-dark); transition: background .3s, color .3s; }
.contact-item:hover .icon{ background: var(--espresso); color: var(--champagne-2); }
.contact-item .icon svg{ width:22px; height:22px; }
.contact-item b{ display:block; font-family: var(--display); font-weight:700; font-size:16px; margin-bottom:4px; }
.contact-item a b:hover{ color: var(--bronze-dark); }
.contact-item span{ font-size:13.5px; color: var(--ink-60); }

/* stats band */
.stats-band{ display:grid; grid-template-columns: repeat(4,1fr); gap:0; border:1px solid var(--line); border-radius: var(--r-lg); overflow:hidden; background: var(--paper); }
.stat-cell{ padding:44px 30px; text-align:center; border-right:1px solid var(--line); }
.stat-cell:last-child{ border-right:none; }
.stat-cell b{ font-family: var(--display); font-size:44px; font-weight:700; display:block; line-height:1; letter-spacing:-.02em; }
.stat-cell b .amp{ color: var(--bronze); }
.stat-cell span{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-60); margin-top:12px; display:block; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px){
  .container{ padding:0 28px; }
  .hero-grid{ grid-template-columns:1fr; gap:40px; }
  .hero-visual{ height:min(440px, 80vw); max-width:520px; }
  .hero-stats{ margin-top:40px; }
  .why-grid{ grid-template-columns: repeat(2,1fr); }
  .why-card:nth-child(2){ border-right:none; }
  .product-grid{ grid-template-columns: repeat(3,1fr); }
  .steps{ grid-template-columns: repeat(2,1fr); row-gap:44px; }
  .steps::before{ display:none; }
  .cta-grid{ grid-template-columns:1fr; padding:52px; }
  .footer-top{ grid-template-columns: 1fr 1fr; row-gap:44px; }
  .two-col{ grid-template-columns:1fr; gap:44px; }
  .info-grid{ grid-template-columns:1fr; }
  .modal-card{ grid-template-columns:1fr; }
  .modal-media{ min-height:260px; }
  .catalog-layout{ grid-template-columns:1fr; }
  .catalog-side{ position:static; }
  .filter-list{ flex-direction:row; flex-wrap:wrap; }
  .filter-item{ border:1px solid var(--line); }
  .stats-band{ grid-template-columns: repeat(2,1fr); }
  .stat-cell:nth-child(2){ border-right:none; }
  .showcase{ height:540px; }
  .show-card--feature .show-card-body h3{ font-size:26px; }
}

@media (max-width: 760px){
  .showcase{ grid-template-columns:1fr; grid-template-rows:none; height:auto; }
  .show-card{ aspect-ratio: 4/3; }
  .show-card--feature{ grid-row:auto; aspect-ratio: 4/3.6; }
  .show-card--feature .show-card-body h3{ font-size:24px; }
  .cat-cloud{ flex-direction:column; align-items:flex-start; gap:14px; }
  .cat-link{ font-size:18px; }
  .container{ padding:0 20px; }
  .main-nav{ display:none; }
  .header-actions .btn{ display:none; }
  .burger{ display:flex; }
  .section{ padding:84px 0; }
  .section-head{ margin-bottom:44px; }
  .hero{ padding-top: calc(var(--header-h) + 24px); }
  .hero-visual{ height:min(400px, 92vw); width:100%; }
  .hero-arch{ width:88%; border-radius: 200px 200px 6px 6px; }
  .hero-float{ width:130px; height:130px; }
  .hero-badge{ width:92px; height:92px; left:auto; right:0; top:-4%; }
  .hero-stats{ gap:28px; }
  .hero-stat b{ font-size:30px; }
  .marquee-item{ font-size:20px; padding:0 22px; }
  .why-grid{ grid-template-columns:1fr; }
  .why-card{ border-right:none; }
  .product-grid{ grid-template-columns: 1fr 1fr; gap:16px; }
  .steps{ grid-template-columns:1fr; }
  .cta-grid{ padding:36px 24px; }
  .footer-top{ grid-template-columns:1fr; gap:36px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .tg-banner-card{ padding:26px 24px; }
  .field-row{ grid-template-columns:1fr; }
  .cart-drawer{ width:100vw; }
  .stats-band{ grid-template-columns:1fr 1fr; }
  .modal-body{ padding:32px 26px; }

  /* table -> cards */
  .catalog-table thead{ display:none; }
  .catalog-table, .catalog-table tbody, .catalog-table tr, .catalog-table td{ display:block; width:100%; }
  .catalog-table tr{ padding:18px; border-bottom:8px solid var(--porcelain); }
  .catalog-table td{ border:none; padding:6px 0; }
  .catalog-table td[data-label]::before{ content: attr(data-label); display:block; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-60); margin-bottom:4px; font-weight:700; }
  .catalog-name-cell{ min-width:0; }
  .catalog-table td.cell-action{ margin-top:8px; }
}

@media (max-width: 480px){
  .product-grid{ grid-template-columns: 1fr; }
  .stats-band{ grid-template-columns:1fr; }
  .stat-cell{ border-right:none; border-bottom:1px solid var(--line); }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal, .reveal-scale, .clip-reveal{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  .hero-title .word{ opacity:1 !important; transform:none !important; }
}