/* =========================================================
   PAYLANCE — Marketplace Home (light premium · Etsy/Airbnb vibe)
   Tokens · Base · Header · Subnav · Hero · Search
   Shops · Categories · Listings · Factories · Open-shop · Footer
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --primary:#0E2540; --primary-hover:#1A3553;
  --success:#4A7B5C; --gold:#B8852E; --warn:#FF9500; --danger:#A6453B;

  --bg:#FAFAFA;
  --bg-soft:#F5F5F7;
  --surface:#FFFFFF;
  --border:#E5E5EA;
  --border-strong:#D2D2D7;

  --text:#15181D;
  --text-muted:#6B7280;
  --text-faint:#98A0AD;

  --radius-sm:8px;
  --radius:10px;
  --radius-lg:14px;
  --radius-xl:18px;
  --pill:980px;

  --shadow-1:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
  --shadow-2:0 8px 24px -12px rgba(16,24,40,.18);
  --shadow-3:0 24px 60px -20px rgba(16,24,40,.25);

  --font-sans: 'Geist Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;
  --font: var(--font-sans);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--surface);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"kern","ss01"}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}
section{position:relative}

/* =========================================================
   UNIFIED HEADER — hp-hdr (Apple style · single row · all pages)
   ========================================================= */
.hp-hdr {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid #E5E5EA;
  overflow: visible;
}
.hp-hdr__row {
  max-width: 1280px; margin: 0 auto; padding: 0 24px;
  height: 60px; display: flex; align-items: center; gap: 16px;
  overflow: visible;
}
/* Logo */
.hp-logo {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 16px; color: #1D1D1F;
  letter-spacing: -.02em; flex-shrink: 0; text-decoration: none;
}
.hp-logo .pl-logo-img { width: 32px; height: 32px; }
/* Location picker */
.hp-loc {
  display: flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: 20px;
  font: 500 13px/1 var(--font); color: #424245;
  background: transparent; border: none; cursor: pointer;
  white-space: nowrap; flex-shrink: 0; transition: background .15s;
  font-family: var(--font);
}
.hp-loc:hover { background: #F5F5F7; }
/* Centered nav */
.hp-nav {
  display: flex; align-items: center; gap: 0;
  flex: 1; justify-content: center;
  overflow-x: auto; scrollbar-width: none; min-width: 0;
}
.hp-nav::-webkit-scrollbar { display: none; }
.hp-nav__link {
  padding: 6px 13px; border-radius: 20px;
  font: 500 13.5px/1 var(--font); color: #424245;
  white-space: nowrap; flex-shrink: 0;
  transition: background .15s, color .15s;
  text-decoration: none;
}
.hp-nav__link:hover { background: #F5F5F7; color: #1D1D1F; }
.hp-nav__link.is-active { color: #1D1D1F; font-weight: 600; background: #F5F5F7; }
.hp-nav__link--shops,
.hp-nav__link[href*="shops"] {
  color: #d5b45f;
  font-weight: 600;
}
.hp-nav__link--shops:hover,
.hp-nav__link[href*="shops"]:hover {
  color: #e9c86f;
  background: rgba(213, 180, 95, 0.1);
}
/* Right actions */
.hp-hdr__right {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.hp-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  color: #424245; position: relative; transition: background .15s;
  text-decoration: none;
}
.hp-icon-btn:hover { background: #F5F5F7; }
.hp-badge {
  position: absolute; top: 4px; right: 4px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #0071E3; color: #fff;
  font: 700 9px/1 var(--font);
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}
.hp-user-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 4px;
  border: 1.5px solid #E5E5EA; border-radius: 100px;
  cursor: pointer; transition: background .15s;
  text-decoration: none; color: #1D1D1F;
}
.hp-user-chip:hover { background: #F5F5F7; }
.hp-user-chip__av {
  width: 28px; height: 28px; border-radius: 50%;
  background: #1D1D1F; color: #fff;
  font: 700 10px/1 var(--font);
  display: flex; align-items: center; justify-content: center;
}
.hp-user-chip__name { font: 600 13px/1 var(--font); color: #1D1D1F; }
/* Responsive header */
@media (max-width: 768px) {
  .hp-nav { display: none; }
  .hp-loc { display: none; }
  .hp-hdr__row { gap: 10px; }
}

/* =========================================================
   HEADER — white premium (unified global · Apple style)
   ========================================================= */
.mp-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid #E5E5EA;
  overflow:visible;
}
.mp-header__row{
  max-width:1280px;margin:0 auto;padding:0 24px;
  height:56px;display:flex;align-items:center;gap:16px;
  overflow:visible;
}

/* Logo — circle + square mark */
.mp-logo{
  font:800 15px/1 var(--font);
  letter-spacing:.12em;
  display:inline-flex;align-items:center;gap:9px;
  color:#1D1D1F;text-decoration:none;flex-shrink:0;
  text-transform:uppercase;
}
.mp-logo:hover{opacity:.75}
.mp-logo .pl-logo-img{width:32px;height:32px}

/* Search bar */
.mp-search{
  flex:1;max-width:480px;
  display:flex;align-items:center;gap:8px;
  background:#F5F5F7;
  border:1.5px solid #E5E5EA;
  border-radius:12px;padding:0 14px;height:38px;
  transition:.18s;
}
.mp-search:focus-within{
  background:#fff;
  border-color:#1F3A5F;
  box-shadow:0 0 0 3px rgba(31,58,95,.08);
}
.mp-search svg{flex-shrink:0;color:var(--text-muted)}
.mp-search input{flex:1;background:transparent;border:0;outline:none;color:var(--text);font:500 13.5px/1 var(--font)}
.mp-search input::placeholder{color:var(--text-faint)}

/* Header actions */
.mp-header__actions{display:flex;gap:6px;align-items:center;margin-left:auto;position:relative;overflow:visible}

/* Messages icon button */
.mp-msg-btn{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:10px;
  background:#F5F5F7;
  border:1.5px solid #E5E5EA;
  color:var(--text-muted);
  cursor:pointer;transition:.15s;
  flex-shrink:0;
}
.mp-msg-btn:hover{background:#EBEBF0;color:var(--text)}
.mp-msg-badge{
  position:absolute;top:-4px;right:-4px;
  min-width:16px;height:16px;
  background:#3B82F6;color:#fff;
  font:700 9.5px/1 var(--font);
  border-radius:8px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;
  border:2px solid #fff;
}

/* Header buttons */
.mp-btn{font:600 13px/1 var(--font);letter-spacing:-0.01em;padding:0 16px;height:34px;border-radius:980px;border:0;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:6px;text-decoration:none;white-space:nowrap}
.mp-btn:active{transform:scale(.97)}
.mp-btn--primary{background:#1D1D1F;color:#fff}
.mp-btn--primary:hover{background:#3A3A3C;box-shadow:0 4px 16px -4px rgba(29,29,31,.3)}
.mp-btn--ghost{background:transparent;color:var(--text);border:1.5px solid #D2D2D7}
.mp-btn--ghost:hover{background:#F5F5F7}
.mp-btn--quiet{background:#F5F5F7;color:var(--text);border:1.5px solid #E5E5EA}
.mp-btn--quiet:hover{background:#EBEBF0;border-color:#D2D2D7}
.mp-btn--lg{padding:0 24px;height:42px;font-size:14px}

/* =========================================================
   TYPE-NAV — white premium · Apple style
   ========================================================= */
.type-nav{
  background:rgba(255,255,255,.97);
  border-bottom:1px solid #E5E5EA;
  position:sticky;top:56px;z-index:90;
}
.type-nav::after{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(31,58,95,.08),transparent);
  pointer-events:none;
}

.type-nav__row{
  max-width:1280px;margin:0 auto;padding:0 20px;
  display:flex;justify-content:center;
  overflow-x:auto;scrollbar-width:none;gap:0;
}
.type-nav__row::-webkit-scrollbar{display:none}

.type-nav__tab{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:11px 18px 10px;
  color:var(--text-muted);
  font:500 11px/1 var(--font);
  letter-spacing:.025em;
  text-transform:uppercase;
  text-decoration:none;
  border-bottom:2px solid transparent;
  white-space:nowrap;flex-shrink:0;
  position:relative;
  transition:color .18s, border-color .18s, background .18s;
  border-radius:0;
}
.type-nav__tab svg{
  flex-shrink:0;
  opacity:.5;
  transition:opacity .18s, transform .18s;
}
.type-nav__tab:hover{
  color:var(--text);
  background:rgba(0,0,0,.03);
}
.type-nav__tab:hover svg{opacity:.75}

.type-nav__tab.is-active{
  color:#1D1D1F;
  border-bottom-color:#1D1D1F;
  background:rgba(0,0,0,.02);
}
.type-nav__tab.is-active svg{
  opacity:1;
}
/* subtle accent below active tab */
.type-nav__tab.is-active::after{
  content:'';
  position:absolute;
  bottom:-1px;left:20%;right:20%;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(31,58,95,.35),transparent);
  border-radius:2px;
}

/* Badges */
.type-nav__badge{
  position:absolute;top:5px;right:4px;
  font:700 8px/1 var(--font);letter-spacing:.04em;text-transform:uppercase;
  padding:2px 5px;border-radius:4px;
  background:rgba(0,0,0,.07);color:var(--text-muted);
}
.type-nav__badge--green{background:rgba(16,185,129,.12);color:#059669}
.type-nav__badge--gold{background:rgba(184,133,46,.14);color:#B8852E}
.type-nav__badge--blue{background:rgba(59,130,246,.12);color:#2563EB}

/* Keep mp-subnav for any legacy references (hidden) */
.mp-subnav{display:none}

/* =========================================================
   HERO (premium light, search-first)
   ========================================================= */
.hero{background:linear-gradient(180deg,#F8F9FC 0%,#FFFFFF 60%);padding:52px 24px 56px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(31,58,95,.055),transparent 68%);top:-340px;right:-220px;pointer-events:none}
.hero::after{content:'';position:absolute;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(184,133,46,.045),transparent 68%);bottom:-220px;left:-120px;pointer-events:none}

.hero__row{max-width:1100px;margin:0 auto;text-align:center;position:relative;z-index:1}

/* Eyebrow pill — clean live indicator */
.hero__eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:#fff;border:1px solid rgba(31,58,95,.12);border-radius:var(--pill);font:600 11.5px/1 var(--font);color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:20px;box-shadow:0 2px 12px -4px rgba(16,24,40,.08)}
.hero__eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:#34C759;box-shadow:0 0 0 3px rgba(52,199,89,.2);animation:plPulse 2.4s ease infinite}
.hero__eyebrow b{color:#1D1D1F;font-weight:700;font-feature-settings:"tnum";letter-spacing:-0.01em}
@keyframes plPulse{0%,100%{box-shadow:0 0 0 3px rgba(52,199,89,.2)}50%{box-shadow:0 0 0 5px rgba(52,199,89,.08)}}

/* H1 */
.hero h1{font:800 56px/1.02 var(--font);letter-spacing:-0.04em;color:#1D1D1F;margin:0 auto 16px;text-wrap:balance;max-width:860px}
.hero h1 em{font-style:normal;background:linear-gradient(125deg,#1F3A5F 0%,#3B6FA0 50%,#1F3A5F 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Sub */
.hero__sub{font:400 18px/1.6 var(--font);color:#6E6E73;max-width:560px;margin:0 auto 32px;letter-spacing:-0.005em}
.hero__sub b{color:#1D1D1F;font-weight:600}

/* ---------- Hero search — integrated mode picker ---------- */
.hero-search{max-width:760px;margin:0 auto}

.hero-search__form{display:flex;align-items:center;background:#fff;border:1.5px solid var(--border);border-radius:var(--pill);padding:7px 7px 7px 0;box-shadow:0 4px 32px -8px rgba(16,24,40,.12),0 1px 4px rgba(0,0,0,.04);transition:.22s}
.hero-search__form:focus-within{border-color:#1F3A5F;box-shadow:0 6px 40px -10px rgba(31,58,95,.18),0 0 0 3px rgba(31,58,95,.07);transform:translateY(-1px)}

/* Left: mode picker (Товары / Магазины) */
.hero-search__pick{position:relative;display:inline-flex;align-items:center;gap:6px;padding:0 16px 0 22px;border-right:1.5px solid var(--border);cursor:pointer;min-width:112px;flex-shrink:0;user-select:none;height:52px}
.hero-search__pick-label{font:700 14px/1 var(--font);color:var(--text);letter-spacing:-0.01em;white-space:nowrap}
.hero-search__pick-chev{color:var(--text-muted);transition:transform .18s;flex-shrink:0}
.hero-search__pick.is-open .hero-search__pick-chev{transform:rotate(180deg)}
/* dropdown */
.hero-search__pick-drop{position:absolute;top:calc(100% + 10px);left:0;background:#fff;border:1px solid var(--border);border-radius:14px;padding:5px;min-width:150px;box-shadow:0 8px 32px -6px rgba(0,0,0,.14);z-index:50;opacity:0;transform:translateY(-6px) scale(.97);pointer-events:none;transition:.18s cubic-bezier(.34,1.3,.64,1);list-style:none;margin:0}
.hero-search__pick-drop.is-open{opacity:1;transform:none;pointer-events:auto}
.hero-search__pick-opt{display:flex;align-items:center;gap:9px;padding:10px 13px;border-radius:9px;font:500 13.5px/1 var(--font);color:var(--text-muted);cursor:pointer;transition:.12s}
.hero-search__pick-opt:hover{background:var(--bg-soft);color:var(--text)}
.hero-search__pick-opt.is-on{background:rgba(31,58,95,.07);color:var(--text);font-weight:700}
.hero-search__pick-opt svg{opacity:.55;flex-shrink:0}
.hero-search__pick-opt.is-on svg{opacity:.9;color:#1F3A5F}

/* Divider (handled by border-right on pick — no extra element needed) */
.hero-search__divider{display:none}

/* Search icon */
.hero-search__icon{flex:0 0 20px;color:var(--text-muted);padding-left:18px;display:flex;align-items:center}

/* Input */
.hero-search__input{flex:1;border:0;outline:none;background:transparent;font:500 17px/1.2 var(--font);color:var(--text);padding:16px 10px 16px 10px;letter-spacing:-0.01em;min-width:0}
.hero-search__input::placeholder{color:var(--text-muted);transition:opacity .35s}
.hero-search__input.is-fading::placeholder{opacity:0}

/* Submit button */
.hero-search__go{flex:0 0 auto;background:linear-gradient(135deg,#1F3A5F 0%,#2d4f7a 100%);color:#fff;border:0;border-radius:var(--pill);padding:14px 26px;font:700 14.5px/1 var(--font);cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:.18s;letter-spacing:-0.01em;white-space:nowrap}
.hero-search__go:hover{background:linear-gradient(135deg,#162d47 0%,#1F3A5F 100%);transform:translateY(-1px);box-shadow:0 8px 24px -6px rgba(31,58,95,.45)}
.hero-search__go svg{transition:transform .15s}
.hero-search__go:hover svg{transform:translateX(3px)}

/* VISUAL CATEGORY TILES (Avito-inspired) — main hero filler */
.hero-cats{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;max-width:1100px;margin:24px auto 22px;padding:0 4px}
.hero-cat{position:relative;background:#fff;border:1px solid var(--border);border-radius:12px;padding:18px 12px 14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-decoration:none;color:var(--text);transition:.2s;text-align:center;min-height:118px;overflow:hidden}
.hero-cat::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,var(--cat-bg,#FAFAFA) 0%,#FFFFFF 70%);opacity:.55;pointer-events:none;transition:opacity .2s;z-index:0}
.hero-cat:hover{transform:translateY(-4px);box-shadow:0 16px 32px -14px rgba(16,24,40,.18);border-color:var(--cat-border,var(--border-strong))}
.hero-cat:hover::before{opacity:.85}
.hero-cat__icon{width:36px;height:36px;position:relative;z-index:1;display:grid;place-items:center;filter:drop-shadow(0 2px 6px rgba(0,0,0,.08))}
.hero-cat__icon svg{width:28px;height:28px}
.hero-cat__name{font:700 13.5px/1.2 var(--font);letter-spacing:-0.005em;position:relative;z-index:1;color:var(--text)}
.hero-cat__count{font:500 11px/1 var(--font);color:var(--text-muted);position:relative;z-index:1;font-feature-settings:"tnum"}

/* Tone variants — different soft pastel backgrounds */
.hero-cat[data-tone="electronics"]{--cat-bg:#E8EEF5;--cat-border:#1F3A5F}
.hero-cat[data-tone="auto"]       {--cat-bg:#F0D4D4;--cat-border:#A65C45}
.hero-cat[data-tone="home"]       {--cat-bg:#F5E6D3;--cat-border:#B8852E}
.hero-cat[data-tone="fashion"]    {--cat-bg:#E8D5F0;--cat-border:#7C3AED}
.hero-cat[data-tone="food"]       {--cat-bg:#FAF1D8;--cat-border:#B8852E}
.hero-cat[data-tone="b2b"]        {--cat-bg:#FDF1DC;--cat-border:#B8852E;background:linear-gradient(180deg,#FFFFFF,#FDF6E3)}
.hero-cat[data-tone="b2b"]::after{content:'★';position:absolute;top:8px;right:10px;font-size:11px;color:var(--gold);z-index:2}
.hero-cat[data-tone="services"]   {--cat-bg:#D4E4D4;--cat-border:#4A7B5C}

/* Chips (popular queries) */
.hero-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:20px auto 0;max-width:700px}
.hero-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--pill);background:#fff;border:1px solid var(--border);color:var(--text);font:500 13px/1 var(--font);letter-spacing:-0.005em;text-decoration:none;cursor:pointer;transition:.15s}
.hero-chip:hover{background:var(--bg-soft);border-color:var(--text);transform:translateY(-1px)}

/* Tiny trust line */
.hero-trust{display:flex;justify-content:center;align-items:center;gap:0 28px;flex-wrap:wrap;margin-top:32px;font:500 13px/1.4 var(--font);color:var(--text-muted)}
.hero-trust__item{display:inline-flex;align-items:center;gap:7px}
.hero-trust__item svg{flex-shrink:0;color:var(--text-muted);opacity:.7}
.hero-trust__sep{color:var(--text-faint);user-select:none}

/* =========================================================
   HERO PROMO ROW — 2 CTA landings under hero
   (Buyer pitch + Seller pitch)
   ========================================================= */
.hero-promo-row{max-width:1280px;margin:0 auto;padding:0 24px 56px;display:grid;grid-template-columns:1fr 1fr;gap:18px}

.hero-promo{position:relative;padding:36px;border-radius:16px;display:flex;flex-direction:column;min-height:300px;overflow:hidden;text-decoration:none;color:inherit;transition:.25s;cursor:pointer}
.hero-promo:hover{transform:translateY(-4px);box-shadow:0 30px 60px -24px rgba(16,24,40,.22)}
.hero-promo > *{position:relative;z-index:2}

.hero-promo__eyebrow{font:700 11.5px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
.hero-promo__title{font:700 28px/1.15 var(--font);letter-spacing:-0.025em;margin:0 0 12px;text-wrap:balance}
.hero-promo__sub{font:500 15px/1.55 var(--font);margin:0 0 22px;max-width:420px}

.hero-promo__features{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.hero-promo__feature{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--pill);font:600 12px/1 var(--font);letter-spacing:-0.005em}
.hero-promo__feature svg{flex-shrink:0;width:12px;height:12px}

.hero-promo__cta{align-self:flex-start;margin-top:auto;display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:var(--pill);font:700 14.5px/1 var(--font);letter-spacing:-0.005em;transition:.15s}
.hero-promo__cta svg{transition:transform .15s}
.hero-promo:hover .hero-promo__cta svg{transform:translateX(3px)}

.hero-promo__visual{position:absolute;right:-30px;bottom:-30px;width:220px;height:220px;opacity:.08;pointer-events:none;z-index:1;user-select:none;display:grid;place-items:center}
.hero-promo__visual svg{width:180px;height:180px}

/* ---------- Buyer variant (light, premium) ---------- */
.hero-promo--buyer{background:linear-gradient(135deg,#FFFFFF 0%,#F0F5FA 100%);border:1px solid var(--border)}
.hero-promo--buyer .hero-promo__eyebrow{color:var(--primary)}
.hero-promo--buyer .hero-promo__title{color:var(--text)}
.hero-promo--buyer .hero-promo__sub{color:var(--text-muted)}
.hero-promo--buyer .hero-promo__feature{background:#fff;color:var(--text);border:1px solid var(--border)}
.hero-promo--buyer .hero-promo__feature svg{color:var(--success)}
.hero-promo--buyer .hero-promo__cta{background:var(--text);color:#fff}
.hero-promo--buyer:hover .hero-promo__cta{background:#000;box-shadow:0 12px 28px -8px rgba(0,0,0,.3)}
.hero-promo--buyer .hero-promo__visual{color:#1F3A5F;opacity:.06}

/* ---------- Seller variant (dark, golden) ---------- */
.hero-promo--seller{background:linear-gradient(135deg,#15181D 0%,#1F232C 100%);color:#fff;border:1px solid rgba(255,255,255,.12)}
.hero-promo--seller::before{content:'';position:absolute;top:-30%;right:-15%;width:60%;height:120%;background:radial-gradient(circle,rgba(184,133,46,.2),transparent 60%);pointer-events:none;z-index:1}
.hero-promo--seller .hero-promo__eyebrow{color:#FFD9A0}
.hero-promo--seller .hero-promo__title{color:#fff}
.hero-promo--seller .hero-promo__title em{font-style:normal;background:linear-gradient(135deg,#FFD9A0 0%,#B8852E 50%,#FFD9A0 100%);background-size:200% 200%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:goldShimmer 8s linear infinite}
.hero-promo--seller .hero-promo__sub{color:rgba(255,255,255,.7)}
.hero-promo--seller .hero-promo__feature{background:rgba(255,255,255,.08);color:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px)}
.hero-promo--seller .hero-promo__feature svg{color:#FFD9A0}
.hero-promo--seller .hero-promo__cta{background:linear-gradient(135deg,#B8852E,#D4A24A);color:#fff;box-shadow:0 8px 20px -6px rgba(184,133,46,.45)}
.hero-promo--seller:hover .hero-promo__cta{box-shadow:0 14px 32px -8px rgba(184,133,46,.55)}
.hero-promo--seller .hero-promo__visual{color:#fff;opacity:.05}

/* =========================================================
   GENERIC SECTION SCAFFOLD
   ========================================================= */
.sec{max-width:1280px;margin:0 auto;padding:80px 24px}
.sec--tight{padding:48px 24px}
.sec--soft-wrap{background:var(--bg-soft)}

.sec__head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:32px;flex-wrap:wrap}
.sec__eyebrow{font:600 12px/1 var(--font);color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.sec__title{font:700 36px/1.1 var(--font);letter-spacing:-0.025em;margin:0;max-width:760px;color:var(--text)}
.sec__sub{font:500 15px/1.55 var(--font);color:var(--text-muted);margin:10px 0 0;max-width:560px}
.sec__link{display:inline-flex;align-items:center;gap:6px;font:600 14px/1 var(--font);color:var(--text);padding:10px 14px;border-radius:var(--pill);transition:.15s;letter-spacing:-0.005em}
.sec__link:hover{background:var(--bg-soft)}
.sec__link svg{transition:transform .15s}
.sec__link:hover svg{transform:translateX(2px)}

/* =========================================================
   FEATURED SHOPS — horizontal carousel
   ========================================================= */
.shops{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:none;margin:0 -24px;padding-left:24px;padding-right:24px}
.shops::-webkit-scrollbar{display:none}
.shop-card{flex:0 0 320px;scroll-snap-align:start;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;text-decoration:none;color:inherit;transition:.2s;display:flex;flex-direction:column}
.shop-card:hover{transform:translateY(-3px);border-color:var(--border-strong);box-shadow:var(--shadow-2)}

.shop-card__cover{aspect-ratio:16/9;background:linear-gradient(135deg,#E8EEF5,#C9D6E5);position:relative;overflow:hidden;display:grid;place-items:center;color:rgba(31,58,95,.5)}
.shop-card__cover svg{width:48px;height:48px}
.shop-card__cover[data-tone="warm"]{background:linear-gradient(135deg,#F5E6D3,#E8C497);color:rgba(146,89,38,.6)}
.shop-card__cover[data-tone="cool"]{background:linear-gradient(135deg,#D4E4D4,#A8C9A8);color:rgba(74,123,92,.6)}
.shop-card__cover[data-tone="lavender"]{background:linear-gradient(135deg,#E8D5F0,#C9A4D6);color:rgba(120,80,150,.6)}
.shop-card__cover[data-tone="slate"]{background:linear-gradient(135deg,#D2D7E0,#A1A6B8);color:rgba(55,65,90,.6)}
.shop-card__cover[data-tone="rose"]{background:linear-gradient(135deg,#F0D4D4,#D69A9A);color:rgba(150,60,60,.6)}

.shop-card__type{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:5px;padding:5px 10px;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-radius:var(--pill);font:700 10.5px/1 var(--font);letter-spacing:.05em;text-transform:uppercase;color:var(--text)}
.shop-card__type--factory{background:linear-gradient(135deg,#B8852E,#D4A24A);color:#fff}
.shop-card__type--small{background:rgba(255,255,255,.95);color:var(--primary)}

.shop-card__body{padding:16px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.shop-card__head{display:flex;align-items:center;gap:10px}
.shop-card__logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#1F3A5F,#475569);color:#fff;display:grid;place-items:center;font:700 14px/1 var(--font);flex-shrink:0;letter-spacing:-0.02em}
.shop-card__name{font:700 15px/1.2 var(--font);letter-spacing:-0.015em;display:flex;align-items:center;gap:6px}
.shop-card__name svg{color:var(--success);flex-shrink:0}
.shop-card__cat{font:500 12px/1.2 var(--font);color:var(--text-muted);margin-top:2px}
.shop-card__stats{display:flex;align-items:center;gap:10px;font:500 12.5px/1.2 var(--font);color:var(--text-muted);font-feature-settings:"tnum"}
.shop-card__stats b{color:var(--text);font-weight:700}
.shop-card__stats svg{color:var(--gold);width:13px;height:13px}
.shop-card__stats-dot{width:3px;height:3px;border-radius:50%;background:var(--text-faint)}

.shop-card__thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.shop-card__thumb{aspect-ratio:1;border-radius:8px;background:linear-gradient(135deg,#F2F2F7,#E5E5EA);display:grid;place-items:center;color:rgba(0,0,0,.3)}
.shop-card__thumb svg{width:18px;height:18px}

/* =========================================================
   CATEGORIES — bento (light)
   ========================================================= */
.bento{display:grid;grid-template-columns:1.6fr 1fr 1fr;grid-template-rows:repeat(2,minmax(180px,auto));gap:14px}
.bento .b-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:.2s;overflow:hidden;position:relative;min-height:180px;text-decoration:none;color:inherit}
.bento .b-card:hover{transform:translateY(-3px);border-color:var(--border-strong);box-shadow:var(--shadow-2)}
.bento .b-card__icon{width:48px;height:48px;border-radius:14px;background:var(--bg-soft);display:grid;place-items:center}
.bento .b-card__icon svg{width:24px;height:24px}
.bento .b-card__title{font:700 18px/1.3 var(--font);letter-spacing:-0.015em;margin:14px 0 4px;color:var(--text)}
.bento .b-card__sub{font:500 13px/1.4 var(--font);color:var(--text-muted)}
.bento .b-card__arrow{position:absolute;top:24px;right:24px;width:32px;height:32px;border-radius:50%;background:var(--bg-soft);display:grid;place-items:center;color:var(--text-muted);transition:.15s}
.bento .b-card:hover .b-card__arrow{background:var(--text);color:#fff}

.bento .b-hero{grid-row:span 2;background:linear-gradient(135deg,#1F3A5F,#0E2540);color:#fff;border-color:transparent;padding:32px;justify-content:flex-end;overflow:hidden;position:relative}
.bento .b-hero::before{content:'';position:absolute;top:-30%;right:-20%;width:80%;height:80%;background:radial-gradient(circle,rgba(184,133,46,.2),transparent 60%);pointer-events:none}
.bento .b-hero .b-card__icon{background:rgba(255,255,255,.1);width:56px;height:56px;position:relative}
.bento .b-hero .b-card__icon svg{width:28px;height:28px}
.bento .b-hero .b-card__title{font:700 28px/1.1 var(--font);margin:18px 0 8px;position:relative;color:#fff}
.bento .b-hero .b-card__sub{font:500 15px/1.5 var(--font);color:rgba(255,255,255,.7);max-width:280px;position:relative;margin-bottom:18px}
.bento .b-hero .b-card__cta{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--font);letter-spacing:-0.01em;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);padding:11px 18px;border-radius:var(--pill);align-self:flex-start;position:relative}
.bento .b-hero:hover .b-card__cta{background:rgba(255,255,255,.18)}

/* =========================================================
   LISTINGS GRID
   ========================================================= */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}

.lst{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;transition:.2s;cursor:pointer;text-decoration:none;color:inherit}
.lst:hover{transform:translateY(-2px);border-color:var(--border-strong);box-shadow:var(--shadow-2)}
.lst__cover{position:relative;aspect-ratio:4/3;background:linear-gradient(135deg,#F2F2F7,#E5E5EA);overflow:hidden;display:grid;place-items:center;color:rgba(0,0,0,.18)}
.lst__cover-img{width:100%;height:100%;object-fit:cover;transition:transform .4s;position:absolute;inset:0}
.lst:hover .lst__cover-img{transform:scale(1.04)}
.lst__cover-icon{display:grid;place-items:center;opacity:.45;pointer-events:none}
.lst__cover-icon svg{width:40px;height:40px}
.lst__badge{position:absolute;top:10px;left:10px;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);color:var(--text);font:700 10.5px/1 var(--font);padding:6px 9px;border-radius:6px;display:inline-flex;align-items:center;gap:4px;letter-spacing:.02em}
.lst__badge svg{color:var(--success)}
.lst__fav{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;border:0;cursor:pointer;color:var(--text-muted);transition:.15s}
.lst__fav:hover{background:#fff;color:var(--danger);transform:scale(1.08)}

.lst__body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.lst__price-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:2px}
.lst__price{font:700 19px/1.1 var(--font);letter-spacing:-0.015em;color:var(--text);font-feature-settings:"tnum"}
.lst__price-old{font:500 13px/1 var(--font);color:var(--text-faint);text-decoration:line-through;font-feature-settings:"tnum";flex-shrink:0}
.lst__title{font:500 14px/1.35 var(--font);color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;letter-spacing:-0.005em}

.lst__shop{display:flex;align-items:center;gap:7px;font:500 12px/1.2 var(--font);color:var(--text-muted);margin-top:4px}
.lst__shop-logo{width:18px;height:18px;border-radius:5px;background:linear-gradient(135deg,#1F3A5F,#475569);color:#fff;display:grid;place-items:center;font:700 9px/1 var(--font);flex-shrink:0}
.lst__shop b{color:var(--text);font-weight:600}
.lst__shop svg{color:var(--success);width:11px;height:11px}

.lst__meta{margin-top:auto;padding-top:6px;display:flex;align-items:center;gap:6px;font:500 11.5px/1.2 var(--font);color:var(--text-faint)}
.lst__dot{width:3px;height:3px;border-radius:50%;background:var(--text-faint)}

.sk{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.sk__cover{aspect-ratio:4/3;background:#EEF0F3}
.sk__body{padding:14px;display:flex;flex-direction:column;gap:8px}
.sk__line{height:14px;border-radius:6px;background:linear-gradient(90deg,#EEF0F3,#F5F5F7,#EEF0F3);background-size:200% 100%;animation:shim 1.4s linear infinite}
.sk__line.short{width:40%}
@keyframes shim{0%{background-position:200% 0}100%{background-position:-200% 0}}

.lst__empty{grid-column:1/-1;border:1px dashed var(--border);border-radius:var(--radius-lg);background:var(--surface);padding:48px;text-align:center;color:var(--text-muted)}
.lst__empty-emoji{font-size:36px;margin-bottom:8px}
.lst__empty h3{font:700 16px var(--font);color:var(--text);margin:0 0 4px}
.lst__empty p{font:500 13px var(--font);margin:0}
.lst__empty a{color:var(--text);font-weight:700;border-bottom:1px solid var(--border-strong)}

/* =========================================================
   SERVICES — 4 feature cards (landing-style for B2B, Escrow,
   Trade-In, Shops on the homepage)
   ========================================================= */
.services-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}

.service-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);padding:36px;display:flex;flex-direction:column;min-height:300px;text-decoration:none;color:inherit;transition:.25s;overflow:hidden}
.service-card::before{content:'';position:absolute;top:-30%;right:-15%;width:55%;height:130%;border-radius:50%;opacity:0;transition:opacity .25s;pointer-events:none}
.service-card:hover{transform:translateY(-4px);box-shadow:0 30px 60px -24px rgba(16,24,40,.18)}
.service-card:hover::before{opacity:.6}
.service-card > *{position:relative;z-index:1}

.service-card__icon{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;margin-bottom:22px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.service-card__icon svg{width:30px;height:30px}

.service-card__eyebrow{font:700 11.5px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}

.service-card__title{font:700 28px/1.1 var(--font);letter-spacing:-0.025em;color:var(--text);margin:0 0 10px;text-wrap:balance}
.service-card__title em{font-style:normal;background-image:linear-gradient(135deg,currentColor 0%,#fff 50%,currentColor 100%);background-size:200% 200%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

.service-card__sub{font:500 15px/1.55 var(--font);color:var(--text-muted);margin:0 0 22px;max-width:380px;letter-spacing:-0.005em}

.service-card__stats{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:24px;padding:14px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.service-card__stat{display:flex;flex-direction:column;gap:3px}
.service-card__stat-v{font:800 18px/1 var(--font);letter-spacing:-0.02em;color:var(--text);font-feature-settings:"tnum"}
.service-card__stat-l{font:600 10.5px/1 var(--font);color:var(--text-muted);letter-spacing:.05em;text-transform:uppercase}

.service-card__cta{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font:700 14px/1 var(--font);letter-spacing:-0.005em;align-self:flex-start;padding:11px 18px;border-radius:var(--pill);transition:.15s}
.service-card__cta svg{transition:transform .18s}
.service-card:hover .service-card__cta svg{transform:translateX(3px)}

/* ---------- VARIANT: B2B (gold) ---------- */
.service-card--b2b::before{background:radial-gradient(circle,rgba(184,133,46,.15),transparent 60%)}
.service-card--b2b:hover{border-color:#B8852E}
.service-card--b2b .service-card__icon{background:linear-gradient(135deg,#B8852E,#D4A24A);color:#fff;box-shadow:0 12px 28px -8px rgba(184,133,46,.45)}
.service-card--b2b .service-card__eyebrow{color:#B8852E}
.service-card--b2b .service-card__cta{background:linear-gradient(135deg,#B8852E,#D4A24A);color:#fff}
.service-card--b2b:hover .service-card__cta{box-shadow:0 12px 28px -8px rgba(184,133,46,.45)}

/* ---------- VARIANT: Escrow (navy blue) ---------- */
.service-card--escrow::before{background:radial-gradient(circle,rgba(31,58,95,.14),transparent 60%)}
.service-card--escrow:hover{border-color:#1F3A5F}
.service-card--escrow .service-card__icon{background:linear-gradient(135deg,#1F3A5F,#2A4D7A);color:#fff;box-shadow:0 12px 28px -8px rgba(31,58,95,.45)}
.service-card--escrow .service-card__eyebrow{color:#1F3A5F}
.service-card--escrow .service-card__cta{background:linear-gradient(135deg,#1F3A5F,#2A4D7A);color:#fff}
.service-card--escrow:hover .service-card__cta{box-shadow:0 12px 28px -8px rgba(31,58,95,.45)}

/* ---------- VARIANT: Trade-In (green) ---------- */
.service-card--tradein::before{background:radial-gradient(circle,rgba(74,123,92,.14),transparent 60%)}
.service-card--tradein:hover{border-color:#4A7B5C}
.service-card--tradein .service-card__icon{background:linear-gradient(135deg,#4A7B5C,#6A9F7E);color:#fff;box-shadow:0 12px 28px -8px rgba(74,123,92,.45)}
.service-card--tradein .service-card__eyebrow{color:#4A7B5C}
.service-card--tradein .service-card__cta{background:linear-gradient(135deg,#4A7B5C,#6A9F7E);color:#fff}
.service-card--tradein:hover .service-card__cta{box-shadow:0 12px 28px -8px rgba(74,123,92,.45)}

/* ---------- VARIANT: Shops (violet) ---------- */
.service-card--shops::before{background:radial-gradient(circle,rgba(124,58,237,.13),transparent 60%)}
.service-card--shops:hover{border-color:#7C3AED}
.service-card--shops .service-card__icon{background:linear-gradient(135deg,#7C3AED,#A78BFA);color:#fff;box-shadow:0 12px 28px -8px rgba(124,58,237,.45)}
.service-card--shops .service-card__eyebrow{color:#7C3AED}
.service-card--shops .service-card__cta{background:linear-gradient(135deg,#7C3AED,#A78BFA);color:#fff}
.service-card--shops:hover .service-card__cta{box-shadow:0 12px 28px -8px rgba(124,58,237,.45)}

/* =========================================================
   B2B — FACTORY CARDS
   ========================================================= */
.b2b-section{background:linear-gradient(180deg,#FAFAFA 0%,#F5F5F7 100%)}
.b2b-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

.factory-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;text-decoration:none;color:inherit;transition:.2s;display:flex;flex-direction:column;position:relative}
.factory-card:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 16px 40px -16px rgba(184,133,46,.25)}

.factory-card__cover{aspect-ratio:16/9;background:linear-gradient(135deg,#3A3F4A,#1F232C);position:relative;overflow:hidden;display:grid;place-items:center;color:rgba(255,255,255,.5)}
.factory-card__cover svg{width:42px;height:42px;position:relative;z-index:1}
.factory-card__cover::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,rgba(184,133,46,.18),transparent 60%);pointer-events:none}
.factory-card__badge{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:5px;padding:6px 11px;background:linear-gradient(135deg,#B8852E,#D4A24A);color:#fff;font:700 11px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;border-radius:6px;box-shadow:0 4px 12px rgba(184,133,46,.4);z-index:1}
.factory-card__badge svg{flex-shrink:0;width:11px;height:11px}

.factory-card__body{padding:18px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.factory-card__name{font:700 17px/1.2 var(--font);letter-spacing:-0.015em;color:var(--text)}
.factory-card__desc{font:500 13.5px/1.45 var(--font);color:var(--text-muted);margin:0}
.factory-card__moq{font:600 12.5px/1 var(--font);color:var(--gold);text-transform:uppercase;letter-spacing:.04em}
.factory-card__moq b{font-weight:700;color:var(--gold);font-feature-settings:"tnum"}
.factory-card__tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto}
.factory-card__tag{padding:4px 9px;background:var(--bg-soft);border-radius:var(--pill);font:600 11px/1 var(--font);color:var(--text);letter-spacing:-0.005em}
.factory-card__cta{margin-top:14px;padding:11px 16px;background:var(--text);color:#fff;border-radius:var(--pill);font:600 13px/1 var(--font);text-align:center;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:.15s;letter-spacing:-0.005em}
.factory-card:hover .factory-card__cta{background:#000}
.factory-card__cta svg{transition:transform .15s}
.factory-card:hover .factory-card__cta svg{transform:translateX(2px)}

/* =========================================================
   OPEN-SHOP CTA (single block)
   ========================================================= */
.open-shop{background:linear-gradient(135deg,#15181D,#1F232C);color:#fff;border-radius:var(--radius-xl);padding:64px 48px;text-align:center;position:relative;overflow:hidden;max-width:1280px;margin:80px auto;box-shadow:var(--shadow-3)}
.open-shop::before{content:'';position:absolute;top:-30%;left:50%;transform:translateX(-50%);width:140%;height:80%;background:radial-gradient(ellipse,rgba(184,133,46,.18),transparent 70%);pointer-events:none}
.open-shop > *{position:relative;z-index:1}
.open-shop__eyebrow{display:inline-block;padding:6px 13px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:var(--pill);font:600 11.5px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.85);margin-bottom:18px}
.open-shop h2{font:700 44px/1.1 var(--font);letter-spacing:-0.03em;margin:0 auto 16px;text-wrap:balance;max-width:720px}
.open-shop p{font:500 17px/1.55 var(--font);color:rgba(255,255,255,.72);margin:0 auto 28px;max-width:540px}
.open-shop__row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.open-shop__btn{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:var(--pill);font:600 14.5px/1 var(--font);letter-spacing:-0.01em;text-decoration:none;cursor:pointer;border:0;transition:.15s}
.open-shop__btn--primary{background:#fff;color:var(--text)}
.open-shop__btn--primary:hover{background:var(--bg-soft);transform:translateY(-1px);box-shadow:0 12px 28px -8px rgba(255,255,255,.3)}
.open-shop__btn--ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.22)}
.open-shop__btn--ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.4)}
.open-shop__bullets{display:flex;justify-content:center;flex-wrap:wrap;gap:16px 32px;margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);font:500 13px/1.4 var(--font);color:rgba(255,255,255,.7)}
.open-shop__bullet{display:inline-flex;align-items:center;gap:7px}
.open-shop__bullet svg{color:var(--success);flex-shrink:0}
.open-shop__bullet b{color:#fff;font-weight:700}

/* =========================================================
   FOOTER
   ========================================================= */
footer{background:#15181D;color:rgba(255,255,255,.7);padding:64px 0 32px;margin-top:96px}
.ft__row{max-width:1280px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
.ft__brand h4{font:800 13px/1 var(--font);color:#fff;margin:0 0 12px;display:flex;align-items:center;gap:10px;letter-spacing:.12em;text-transform:uppercase}
.ft__brand p{font:500 14px/1.6 var(--font);margin:0 0 16px;max-width:320px}
.ft__col h5{font:700 12px/1 var(--font);color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.06em;margin:0 0 14px}
.ft__col a{display:block;padding:6px 0;font:500 14px/1.4 var(--font);color:rgba(255,255,255,.7);transition:color .15s}
.ft__col a:hover{color:#fff}
.ft__bottom{max-width:1280px;margin:32px auto 0;padding:24px 24px 0;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font:500 13px/1 var(--font);color:rgba(255,255,255,.45)}
.ft__slogan{font:700 12px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55)}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1100px){
  .hero h1{font-size:46px;letter-spacing:-0.038em}
  .bento{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .bento .b-hero{grid-row:span 1;grid-column:span 2;min-height:240px}
  .b2b-grid{grid-template-columns:1fr 1fr}
  .open-shop h2{font-size:34px}
}
@media (max-width:1024px){
  .hero-cats{grid-template-columns:repeat(4,1fr)}
  .hero-promo{padding:28px;min-height:240px}
  .hero-promo__title{font-size:24px}
}
@media (max-width:760px){
  .hero-promo-row{grid-template-columns:1fr;padding-bottom:48px}
  .hero-promo{padding:24px;min-height:200px}
  .hero-promo__title{font-size:22px}
  .hero-promo__visual{width:160px;height:160px;right:-20px;bottom:-20px}
  .hero-promo__visual svg{width:130px;height:130px}
}
@media (max-width:900px){
  .services-grid{grid-template-columns:1fr}
  .service-card{padding:28px;min-height:auto}
  .service-card__title{font-size:24px}
  .hero-cats{grid-template-columns:repeat(4,1fr);gap:8px}
  .hero-cat{min-height:104px;padding:14px 8px 12px}
  .hero-cat__icon svg{width:24px;height:24px}
  .hero-cat__name{font-size:12.5px}
  .hero-cat__count{font-size:10.5px}
}
@media (max-width:560px){
  .hero-cats{grid-template-columns:repeat(3,1fr)}
  .hero-search__pick{display:none}
}
@media (max-width:380px){
  .hero-cats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .mp-header__row{grid-template-columns:auto 1fr;gap:10px}
  .mp-header__actions{display:none}
  .hero{padding:48px 20px 40px}
  .hero h1{font-size:34px;letter-spacing:-0.035em}
  .hero__sub{font-size:15px;margin-bottom:24px}
  .hero-search__form{padding:5px 5px 5px 0}
  .hero-search__pick{min-width:90px;padding:0 12px 0 16px;height:46px}
  .hero-search__pick-label{font-size:13px}
  .hero-search__icon{padding-left:12px}
  .hero-search__input{font-size:15px;padding:13px 8px}
  .hero-search__go{padding:11px 16px;font-size:13px}
  .hero-search__go span{display:none}
  .hero-trust{gap:10px 18px;font-size:12px;margin-top:24px}
  .sec{padding:56px 20px}
  .sec__title{font-size:26px}
  .bento{grid-template-columns:1fr}
  .bento .b-hero{grid-column:span 1}
  .b2b-grid{grid-template-columns:1fr}
  .ft__row{grid-template-columns:1fr 1fr;gap:24px}
  .open-shop{padding:48px 24px;border-radius:var(--radius-lg)}
  .open-shop h2{font-size:28px}
  .open-shop p{font-size:15px}
  .shop-card{flex:0 0 280px}
}