/* =========================================================
   uastyle — main.css
   Tokens, base, layout, components.
   Loaded AFTER bootstrap.min.css, OVERRIDES where needed.
   ========================================================= */

:root,
[data-theme="light"]{
  /* === Palette — light theme === */
  --us-bg:           #ffffff;
  --us-bg-soft:      #f6f5f1;     /* warm off-white */
  --us-bg-elevated:  #ffffff;
  --us-bg-inverse:   #111111;
  --us-ink:          #111111;
  --us-ink-2:        #555555;
  --us-ink-3:        #8a8a8a;
  --us-ink-inverse:  #ffffff;
  --us-line:         #e8e6e0;
  --us-line-strong:  #cfccc4;

  /* Accent — readable on white in light theme */
  --us-accent:       #65a30d;     /* lime-600 — dark enough for white bg */
  --us-accent-ink:   #ffffff;     /* white text on accent in light theme */
  --us-promo:        #c8102e;     /* sale */
  --us-success:      #1b7d4a;

  /* Static surfaces (do not flip with theme — always dark sections) */
  --us-static-dark:     #0a0a0a;
  --us-static-dark-2:   #1a1a1a;
  --us-static-dark-ink: #ffffff;

  /* Shadows */
  --us-shadow-sm:    0 1px 0 rgba(0,0,0,.04);
  --us-shadow:       0 8px 30px -10px rgba(17,17,17,.18);
  --us-overlay:      rgba(17,17,17,.06);

  /* Typography */
  --us-font-sans:    'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --us-font-logo:    'Lily Script One', cursive;

  /* Geometry */
  --us-radius:       0;
  --us-radius-sm:    2px;

  /* Card system */
  --us-card-radius:        6px;
  --us-card-radius-inner:  5px;
  --us-card-border-color:  #d4d4d4;
  --us-card-border-hover:  #888;

  /* Button system */
  --us-btn-radius:         6px;
  --us-btn-radius-sm:      4px;

  /* Layout */
  --us-header-h:     76px;
  --us-topbar-h:     34px;
  --us-container:    1440px;

  /* Bootstrap overrides */
  --bs-body-font-family: var(--us-font-sans);
  --bs-body-color:       var(--us-ink);
  --bs-body-bg:          var(--us-bg);
  --bs-border-color:     var(--us-line);
  --bs-border-radius:    0;
  --bs-border-radius-sm: 2px;
  --bs-link-color:       var(--us-ink);
  --bs-link-hover-color: var(--us-ink-2);
  --bs-emphasis-color:   var(--us-ink);
  --bs-secondary-color:  var(--us-ink-2);
  --bs-tertiary-color:   var(--us-ink-3);
  --bs-tertiary-bg:      var(--us-bg-soft);
}

[data-theme="dark"],
[data-bs-theme="dark"]{
  color-scheme: dark;
  --us-bg:           #0d0d0d;
  --us-bg-soft:      #161616;
  --us-bg-elevated:  #181818;
  --us-bg-inverse:   #f5f5f5;
  --us-ink:          #f5f5f5;
  --us-ink-2:        #b0b0b0;
  --us-ink-3:        #6e6e6e;
  --us-ink-inverse:  #0d0d0d;
  --us-line:         #262626;
  --us-line-strong:  #383838;
  --us-shadow:       0 8px 30px -10px rgba(0,0,0,.6);
  --us-overlay:      rgba(255,255,255,.05);
  --us-accent:       #c1ff3d;
  --us-accent-ink:   #0a0a0a;
  --us-card-border-color:  #2e2e2e;
  --us-card-border-hover:  #555;
  /* Bootstrap overrides for dark */
  --bs-body-bg:      #0d0d0d;
  --bs-body-color:   #f5f5f5;
  --bs-offcanvas-bg: #0d0d0d;
  --bs-modal-bg:     #161616;
  --bs-border-color: #262626;
  --bs-tertiary-bg:  #161616;
  --bs-secondary-bg: #1a1a1a;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-bs-theme="light"]){
    color-scheme: dark;
    --bs-body-bg: #0d0d0d;
    --bs-body-color: #f5f5f5;
    --bs-offcanvas-bg: #0d0d0d;
    --bs-modal-bg: #161616;
    --us-bg:           #0d0d0d;
    --us-bg-soft:      #161616;
    --us-bg-elevated:  #181818;
    --us-bg-inverse:   #f5f5f5;
    --us-ink:          #f5f5f5;
    --us-ink-2:        #b0b0b0;
    --us-ink-3:        #6e6e6e;
    --us-ink-inverse:  #0d0d0d;
    --us-line:         #262626;
    --us-line-strong:  #383838;
    --us-shadow:       0 8px 30px -10px rgba(0,0,0,.6);
    --us-overlay:      rgba(255,255,255,.05);
    --us-accent:       #c1ff3d;
    --us-accent-ink:   #0a0a0a;
    --us-card-border-color:  #2e2e2e;
    --us-card-border-hover:  #555;
  }
}

/* Mobile — shrink card radius */
@media (max-width: 768px){
  :root, [data-theme="light"], [data-theme="dark"]{
    --us-card-radius:        3px;
    --us-card-radius-inner:  2px;
    --us-btn-radius:         4px;
    --us-btn-radius-sm:      3px;
  }
}

/* Newsletter is always dark — keep bright accent there even in light theme */
.newsletter, .newsletter *{ --us-accent:#c1ff3d; --us-accent-ink:#0a0a0a; }

/* Smooth theme transition */
html,body,header,footer,section,div,a,button,input,article,nav{
  transition:background-color .3s ease, color .25s ease, border-color .3s ease;
}

/* ---------- Base ---------- */
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--us-font-sans);
  font-weight:400;
  color:var(--us-ink);
  background:var(--us-bg);
  font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased;
}

a{ text-decoration:none; color:inherit; }
a:hover{ color:var(--us-ink-2); }

img{ max-width:100%; height:auto; display:block; }

.container-xxl{ max-width:var(--us-container); }

h1,h2,h3,h4,h5{ font-family:var(--us-font-sans); font-weight:600; letter-spacing:-.01em; }
h1{ font-size:clamp(2.25rem, 4vw, 3.75rem); font-weight:700; letter-spacing:-.025em; }
h2{ font-size:clamp(1.5rem, 2.4vw, 2.25rem); letter-spacing:-.02em; }

.eyebrow{
  display:inline-block;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--us-ink-2); font-weight:500;
}

.divider{ height:1px; background:var(--us-line); border:0; }

/* ---------- Icon helper ---------- */
.icon{ width:1em; height:1em; vertical-align:-.125em; flex:none; stroke-width:1.75; }
.icon-lg{ width:1.25em; height:1.25em; }

/* ===========================================================
   Button System (standardized)
   - .btn-primary    — dark fill (CTA)
   - .btn-secondary  — outline dark
   - .btn-ghost      — text only with hover underline + arrow
   - .btn-icon       — square icon-only (default 44px)
   - .btn-icon.is-sm — 36px
   - .btn-icon.is-lg — 52px
   =========================================================== */
.btn{
  --bs-btn-border-radius:var(--us-btn-radius);
  font-weight:500;
  letter-spacing:.01em;
  font-size:.92rem;
  padding:1rem 1.75rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  transition:background .2s, color .2s, border-color .2s, transform .2s;
}
.btn .icon{ width:16px; height:16px; }

/* Solid CTA — visually dark in BOTH themes, accent lime swipe on hover */
.btn-dark, .btn-primary{
  --bs-btn-bg:var(--us-static-dark);
  --bs-btn-border-color:var(--us-static-dark);
  --bs-btn-color:var(--us-static-dark-ink);
  --bs-btn-hover-bg:var(--us-static-dark);
  --bs-btn-hover-border-color:var(--us-static-dark);
  --bs-btn-hover-color:var(--us-accent-ink);
  --bs-btn-active-bg:var(--us-static-dark);
  --bs-btn-active-color:var(--us-accent-ink);
  --bs-btn-disabled-bg:var(--us-static-dark);
  --bs-btn-disabled-color:rgba(255,255,255,.6);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.btn-dark::before, .btn-primary::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--us-accent);
  transform:translateX(-101%);
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
  z-index:-1;
}
.btn-dark:hover::before, .btn-primary:hover::before{ transform:translateX(0); }
/* Outline button — adapts to theme + accent swipe on hover */
.btn-outline-dark, .btn-secondary{
  --bs-btn-color:var(--us-ink);
  --bs-btn-bg:transparent;
  --bs-btn-border-color:var(--us-ink);
  --bs-btn-hover-bg:transparent;
  --bs-btn-hover-color:var(--us-accent-ink);
  --bs-btn-hover-border-color:var(--us-ink);
  --bs-btn-active-bg:var(--us-ink);
  --bs-btn-active-color:var(--us-ink-inverse);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.btn-outline-dark::before, .btn-secondary::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--us-accent);
  transform:translateX(-101%);
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
  z-index:-1;
}
.btn-outline-dark:hover::before, .btn-secondary:hover::before{ transform:translateX(0); }
.btn-outline-dark:hover, .btn-secondary:hover{ border-color:var(--us-accent); }
.btn-ghost{
  background:none; border:0;
  padding:.5rem 0;
  color:var(--us-ink);
  font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.6rem;
  position:relative;
}
.btn-ghost::after{
  content:""; position:absolute; left:0; bottom:.25rem; height:1px;
  width:calc(100% - 1.6rem);
  background:var(--us-ink);
  transform:scaleX(1); transform-origin:left;
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.btn-ghost:hover::after{ transform:scaleX(.6); transform-origin:right; }
.btn-ghost .icon{ width:16px; height:16px; transition:transform .25s; }
.btn-ghost:hover .icon{ transform:translateX(4px); }
.btn-ghost:hover{ color:var(--us-ink); }

.btn-link-arrow{ /* alias for backwards-compat */
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem 0; border:0; background:none;
  font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--us-ink);
  position:relative;
}
.btn-link-arrow::after{
  content:""; position:absolute; left:0; bottom:0; height:1px;
  width:calc(100% - 1.4rem);
  background:var(--us-ink);
  transform:scaleX(1); transform-origin:left;
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.btn-link-arrow:hover::after{ transform:scaleX(.6); transform-origin:right; }
.btn-link-arrow .icon{ transition:transform .25s; width:16px; height:16px; }
.btn-link-arrow:hover .icon{ transform:translateX(4px); }

/* Generic icon button */
.btn-icon{
  width:44px; height:44px;
  padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:0;
  color:var(--us-ink);
  position:relative;
  border-radius:50%;
  transition:background .2s, color .2s;
  cursor:pointer;
}
.btn-icon:hover{
  background:var(--us-bg-soft);
  color:var(--us-ink);
}
.btn-icon .icon{ width:20px; height:20px; stroke-width:1.75; }
.btn-icon.is-sm{ width:36px; height:36px; }
.btn-icon.is-sm .icon{ width:16px; height:16px; }
.btn-icon.is-lg{ width:52px; height:52px; }
.btn-icon.is-lg .icon{ width:24px; height:24px; }
.btn-icon.is-danger:hover{ background:#fdecec; color:var(--us-promo); }

/* ---------- Top bar (always dark, ignores theme) ---------- */
.topbar{
  height:var(--us-topbar-h);
  background:var(--us-static-dark);
  color:var(--us-static-dark-ink);
  font-size:.78rem;
  letter-spacing:.02em;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar a{ color:var(--us-static-dark-ink); opacity:.85; }
.topbar a:hover{ opacity:1; color:var(--us-static-dark-ink); }
.topbar .lang-switch a.is-active{ color:#fff; border-color:rgba(255,255,255,.6); }
.topbar .marquee{ overflow:hidden; flex:1; text-align:center; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:1030;
  background:color-mix(in srgb, var(--us-bg) 96%, transparent);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--us-line);
}
.site-header__inner{
  height:var(--us-header-h);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:1.5rem;
}
.site-logo{
  font-family:var(--us-font-sans);
  font-weight:800;
  font-size:1.65rem;
  line-height:1;
  letter-spacing:-.025em;
  color:var(--us-ink);
  white-space:nowrap;
}
.site-logo:hover{ color:var(--us-ink); }

.main-nav{ display:flex; gap:2rem; align-items:center; }
.main-nav > a,
.main-nav .nav-item > a{
  font-size:.88rem;
  font-weight:500;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:calc((var(--us-header-h) - 1.4rem) / 2) 0;
  position:relative;
  display:inline-block;
}
.main-nav > a::after,
.main-nav .nav-item > a::after{
  content:""; position:absolute; left:0; right:0; bottom:1.25rem; height:1px;
  background:var(--us-ink); transform:scaleX(0); transform-origin:left;
  transition:transform .25s;
}
.main-nav > a:hover::after,
.main-nav > a.is-active::after,
.main-nav .nav-item:hover > a::after,
.main-nav .nav-item > a.is-active::after{ transform:scaleX(1); }
.main-nav .is-sale{ color:var(--us-promo); }

/* ---------- Mega menu ---------- */
.nav-item{ position:static; }
.mega-menu{
  position:absolute;
  left:0; right:0;
  top:100%;
  background:var(--us-bg-elevated);
  border-top:1px solid var(--us-line);
  border-bottom:1px solid var(--us-line);
  box-shadow:var(--us-shadow);
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .2s, transform .2s, visibility .2s;
  z-index:1020;
  pointer-events:none;
}
.nav-item:hover .mega-menu,
.nav-item:focus-within .mega-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}
.mega-menu__inner{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr)) minmax(0,1.4fr);
  gap:2.5rem;
  padding:2.5rem 2rem 3rem;
}
@media(min-width:1400px){ .mega-menu__inner{ padding-left:3rem; padding-right:3rem; } }
.mega-col h6{
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--us-ink); font-weight:600; margin:0 0 1rem;
  padding-bottom:.6rem; border-bottom:1px solid var(--us-line);
}
.mega-col ul{ list-style:none; padding:0; margin:0; }
.mega-col li{ margin:.45rem 0; }
.mega-col a{
  font-size:.88rem; color:var(--us-ink-2);
  font-weight:400; letter-spacing:0; text-transform:none;
  padding:0; display:inline-block;
}
.mega-col a::after{ display:none; }
.mega-col a:hover{ color:var(--us-ink); }
.mega-col a.text-muted{ color:var(--us-ink-3) !important; font-weight:500; margin-top:.5rem; }

.mega-promo{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:var(--us-card-radius);
  background:var(--us-bg-soft);
  min-height:280px;
}
.mega-promo img{
  width:100%; height:100%; min-height:280px;
  object-fit:cover;
  transition:transform .8s;
}
.mega-promo:hover img{ transform:scale(1.04); }
.mega-promo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.5) 100%);
  pointer-events:none;
}
.mega-promo__copy{
  position:absolute; left:1.25rem; right:1.25rem; bottom:1.25rem;
  z-index:2; color:#fff;
}
.mega-promo__title{
  font-size:1.15rem; font-weight:600; margin-top:.35rem;
}

/* hide on small screens */
@media(max-width:992px){
  .mega-menu{ display:none; }
}

.header-actions{ display:flex; gap:.15rem; justify-content:flex-end; align-items:center; }
.header-actions .btn-icon:hover{
  background:var(--us-ink);
  color:var(--us-ink-inverse);
}
.header-actions .btn-icon:hover .cart-count{
  background:var(--us-accent);
  color:var(--us-accent-ink);
}
.cart-count{
  position:absolute; top:6px; right:4px;
  min-width:16px; height:16px; padding:0 4px;
  background:var(--us-ink); color:var(--us-ink-inverse);
  font-size:.62rem; font-weight:600;
  border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
}
.cart-count:empty{ display:none; }

/* ---------- Search overlay ---------- */
.search-panel{
  position:absolute; left:0; right:0; top:100%;
  background:var(--us-bg-elevated); border-bottom:1px solid var(--us-line);
  box-shadow:var(--us-shadow);
  display:none;
}
.search-panel.is-open{ display:block; }
.search-panel__inner{ padding:1.75rem 1.5rem 2.25rem; }
@media(min-width:992px){ .search-panel__inner{ padding-left:2rem; padding-right:2rem; } }
.search-input-wrap{ position:relative; }
.search-input{
  width:100%; border:0; border-bottom:1px solid var(--us-ink);
  font-family:var(--us-font-sans); font-size:1.5rem; font-weight:500;
  padding:.75rem 2.5rem .75rem 0; background:none; outline:none;
}
.search-input::placeholder{ color:var(--us-ink-3); }
.search-input-wrap .icon-search{ position:absolute; right:0; top:50%; transform:translateY(-50%); width:24px; height:24px; color:var(--us-ink-2); }

.search-suggest{ margin-top:1.5rem; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2fr); gap:2.5rem; }
.search-suggest h6{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--us-ink-3); font-weight:600; margin:0 0 .75rem; }
.search-suggest ul{ list-style:none; padding:0; margin:0; }
.search-suggest li a{ display:block; padding:.35rem 0; font-size:.92rem; }
.search-suggest .product-suggest{ display:flex; gap:.75rem; padding:.5rem 0; align-items:center; }
.search-suggest .product-suggest img{ width:48px; height:60px; object-fit:cover; background:var(--us-bg-soft); }
.search-suggest .product-suggest__title{ font-size:.88rem; font-weight:500; line-height:1.2; }
.search-suggest .product-suggest__meta{ font-size:.75rem; color:var(--us-ink-3); margin-top:2px; }

/* ---------- Hero slider ---------- */
.hero{ position:relative; }
.hero .splide__slide{ position:relative; height:min(82vh, 780px); min-height:520px; overflow:hidden; }
.hero .slide-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
}
.hero .slide-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 60%);
}
.hero .slide-content{
  position:relative; z-index:2;
  height:100%; display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 0 6rem;
  color:#fff; max-width:560px;
}
.hero .slide-content .eyebrow{ color:rgba(255,255,255,.85); }
.hero h1{ color:#fff; margin:.75rem 0 1.5rem; }
.hero .btn-light-arrow{
  display:inline-flex; align-items:center; gap:.6rem;
  background:#fff; color:var(--us-static-dark); padding:1rem 1.75rem;
  border-radius:var(--us-btn-radius);
  font-weight:600; font-size:.85rem; letter-spacing:.12em; text-transform:uppercase;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:color .3s;
}
.hero .btn-light-arrow::before{
  content:"";
  position:absolute; inset:0;
  background:var(--us-accent);
  transform:translateX(-101%);
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
  z-index:-1;
}
.hero .btn-light-arrow:hover{ color:var(--us-accent-ink); }
.hero .btn-light-arrow:hover::before{ transform:translateX(0); }
.hero .splide__pagination{ bottom:2rem; }

/* ---------- Section ---------- */
.section{ padding:5rem 0; }
.section-sm{ padding:3rem 0; }
.section-head{ display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:2.5rem; }
.section-head h2{ margin:.25rem 0 0; }

/* ---------- Category tiles ---------- */
.cat-grid{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:1rem;
}
.cat-tile{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  background:var(--us-bg-soft);
  display:block;
  border-radius:var(--us-card-radius);
}
.cat-tile img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1s cubic-bezier(.2,.7,.2,1), filter .5s;
}
.cat-tile::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
  transition:background .4s;
}
.cat-tile:hover img{ transform:scale(1.07); filter:brightness(.95); }
.cat-tile:hover::after{ background:linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.65) 100%); }

.cat-tile__label{
  position:absolute; left:1.25rem; bottom:1.25rem; right:1.25rem;
  z-index:2;
  color:#fff;
  display:flex; justify-content:space-between; align-items:flex-end;
}
.cat-tile__label-text{
  display:block;
  font-weight:600; font-size:1.1rem; letter-spacing:.005em;
  position:relative;
  padding-bottom:6px;
}
.cat-tile__label-text::after{
  content:""; position:absolute; left:0; bottom:0;
  width:24px; height:1px; background:#fff;
  transition:width .5s cubic-bezier(.2,.7,.2,1);
}
.cat-tile:hover .cat-tile__label-text::after{ width:60px; }

.cat-tile__label-arrow{
  width:36px; height:36px;
  border-radius:var(--us-btn-radius-sm);
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.4);
  transition:background .3s, transform .4s cubic-bezier(.2,.7,.2,1);
}
.cat-tile__label-arrow .icon{ width:16px; height:16px; }
.cat-tile:hover .cat-tile__label-arrow{
  background:var(--us-bg-elevated);
  color:var(--us-static-dark);
  transform:translateX(4px);
}
@media(max-width:992px){ .cat-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media(max-width:576px){ .cat-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.5rem; } }

/* ---------- Product card ---------- */
.product-card{
  position:relative;
  background:var(--us-bg-elevated);
  display:flex; flex-direction:column;
}
.product-card__media{
  position:relative;
  aspect-ratio:3/4;
  background:var(--us-bg-soft);
  overflow:hidden;
  border-radius:var(--us-card-radius);
}
.product-card__media img{
  width:100%; height:100%; object-fit:cover;
  transition:opacity .3s, transform .6s;
}
.product-card__media .img-hover{
  position:absolute; inset:0; opacity:0;
}
.product-card:hover .img-hover{ opacity:1; }
.product-card:hover .img-main{ opacity:0; }

.product-card__badges{
  position:absolute; left:.75rem; bottom:.75rem;
  display:flex; gap:.35rem; flex-wrap:wrap;
  pointer-events:none;
  z-index:4;
}
.badge-soft{
  background:var(--us-bg-elevated); color:var(--us-ink);
  font-size:.65rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.3rem .55rem; font-weight:600;
  border-radius:var(--us-btn-radius-sm);
}
.badge-soft.promo{ background:var(--us-promo); color:#fff; }
.badge-soft.new{ background:var(--us-ink); color:var(--us-ink-inverse); }

.product-card__wishlist,
.product-card__compare{
  position:absolute; right:.75rem;
  width:36px; height:36px;
  border-radius:50%;
  background:var(--us-bg-elevated); border:0;
  display:inline-flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(-4px);
  transition:opacity .2s, transform .2s, background .2s, color .2s;
  z-index:5;
  cursor:pointer;
  color:var(--us-ink);
}
.product-card__wishlist{ top:.75rem; }
.product-card__compare{ top:calc(.75rem + 36px + .35rem); }
.product-card__wishlist:hover,
.product-card__compare:hover{ background:var(--us-ink); color:var(--us-ink-inverse); }
.product-card__wishlist .icon,
.product-card__compare .icon{ width:16px; height:16px; }
.product-card:hover .product-card__wishlist,
.product-card:hover .product-card__compare{ opacity:1; transform:translateY(0); }

.product-card__quick{
  position:absolute; left:.75rem; right:.75rem; bottom:.75rem;
  border-radius:var(--us-btn-radius-sm);
  background:var(--us-static-dark); color:var(--us-static-dark-ink);
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1rem;
  font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  opacity:0; transform:translateY(8px);
  transition:opacity .25s, transform .25s, color .25s;
  cursor:pointer; border:0;
  z-index:5;
  overflow:hidden;
  isolation:isolate;
}
.product-card__quick::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--us-accent);
  transform:translateX(-101%);
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
  z-index:-1;
}
.product-card__quick:hover{ color:var(--us-accent-ink); }
.product-card__quick:hover::before{ transform:translateX(0); }
.product-card__quick .icon{ width:14px; height:14px; }
.product-card:hover .product-card__quick{ opacity:1; transform:translateY(0); }
.product-card:hover .product-card__quick{ opacity:1; transform:translateY(0); }

.product-card__body{ padding:1rem .25rem 0; position:relative; }
.product-card__brand{
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--us-ink-3); font-weight:600;
}
.product-card__title{
  font-size:.95rem; font-weight:500;
  margin:.35rem 0;
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:calc(.95rem * 1.35 * 2);
  position:relative;
  z-index:3;
  transition:color .2s;
}
.product-card:hover .product-card__title{ color:var(--us-ink-2); }
.product-card__price{
  display:flex; gap:.6rem; align-items:baseline;
  font-size:1rem; font-weight:500;
  margin-top:.1rem;
}
.product-card__price .old{ color:var(--us-ink-3); text-decoration:line-through; font-size:.85rem; font-weight:400; }
.product-card__price .now.promo{ color:var(--us-promo); font-weight:600; }
.product-card__tenant{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.72rem; color:var(--us-ink-3);
  margin-top:.5rem;
  font-weight:500;
}
.product-card__tenant .icon{ width:13px; height:13px; }

/* Flags — icon stack on top-left of product media */
.product-card__flags{
  position:absolute;
  left:.75rem; top:.75rem;
  display:flex; flex-direction:column; gap:.35rem;
  z-index:5;
}
.product-card__flag{
  width:28px; height:28px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--us-bg-soft);
  border:1px solid var(--us-line);
  border-radius:var(--us-btn-radius-sm);
  cursor:help;
  position:relative;
  z-index:5;
  transition:background .2s, color .2s, border-color .2s, transform .2s;
}
.product-card__flag:hover{ transform:scale(1.08); }
.product-card__flag .icon{ width:14px; height:14px; }

/* Default colored states per flag */
.product-card__flag.flag-new        { background:var(--us-ink);     color:var(--us-ink-inverse); border-color:var(--us-ink); }
.product-card__flag.flag-sale       { background:var(--us-promo);   color:#fff;                  border-color:var(--us-promo); }
.product-card__flag.flag-bestseller { background:#c8553d;           color:#fff;                  border-color:#c8553d; }
.product-card__flag.flag-featured   { background:var(--us-accent);  color:var(--us-accent-ink);  border-color:var(--us-accent); }

/* Promoted: deliberate, not crowded */
.product-card.promoted .product-card__body{ padding-top:1.25rem; }
.product-card.promoted .product-card__body::before{
  content:"PROMOTED";
  position:absolute;
  left:.25rem; top:0;
  font-size:.6rem; letter-spacing:.16em; font-weight:700;
  color:var(--us-ink);
  padding:0;
}
.product-card.promoted .product-card__body::after{
  content:""; position:absolute;
  left:.25rem; top:.85rem;
  width:18px; height:1px;
  background:var(--us-ink);
}

/* ---------- Editorial split banner ---------- */
.editorial-split{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1rem;
}
.editorial-split a{
  position:relative; aspect-ratio:16/11; overflow:hidden; background:var(--us-bg-soft);
  display:block;
  border-radius:var(--us-card-radius);
}
.editorial-split img{ width:100%; height:100%; object-fit:cover; transition:transform .8s; }
.editorial-split a:hover img{ transform:scale(1.04); }
.editorial-split .copy{
  position:absolute; left:2.5rem; bottom:2.5rem; right:2.5rem; color:#fff;
}
.editorial-split .copy h3{ font-size:clamp(1.25rem,2.2vw,2rem); font-weight:700; letter-spacing:-.01em; margin:.5rem 0 1rem; }
@media(max-width:768px){ .editorial-split{ grid-template-columns:minmax(0,1fr); } .editorial-split .copy{ left:1.25rem; right:1.25rem; bottom:1.25rem; } }

/* ---------- Boutiques (tenants) ---------- */
.boutique-card{
  display:flex; flex-direction:column;
  background:var(--us-bg-elevated);
  aspect-ratio:4/5;
  position:relative; overflow:hidden;
  border:1px solid var(--us-card-border-color);
  border-radius:var(--us-card-radius);
  transition:border-color .3s, box-shadow .3s;
  cursor:pointer;
}
/* Stretched-link overlay above body z:2 */
.boutique-card > .stretched-link::after{ z-index:3; }
.boutique-card__media{
  position:relative;
  height:62%;
  overflow:hidden;
  background:var(--us-bg-soft);
  border-top-left-radius:var(--us-card-radius-inner);
  border-top-right-radius:var(--us-card-radius-inner);
}
.boutique-card__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.2,1), filter .5s;
}
.boutique-card__media::after{
  content:""; position:absolute; inset:0;
  background:rgba(17,17,17,0);
  transition:background .35s;
  pointer-events:none;
}
.boutique-card__body{
  padding:1.1rem 1.25rem;
  flex:1;
  display:flex; flex-direction:column; justify-content:space-between;
  background:var(--us-bg-elevated);
  position:relative;
  z-index:2;
  transform:translateY(0);
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.boutique-card__name{ font-weight:600; font-size:1.05rem; letter-spacing:-.005em; }
.boutique-card__meta{ font-size:.72rem; color:var(--us-ink-3); letter-spacing:.04em; margin-top:.15rem; }
.boutique-card__cta{
  font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.12em;
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top:.6rem;
  position:relative;
  padding-bottom:3px;
}
.boutique-card__cta::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--us-ink);
  transform:scaleX(0); transform-origin:right;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.boutique-card__cta .icon{
  width:14px; height:14px;
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}

/* hover */
.boutique-card:hover{ border-color:var(--us-card-border-hover); box-shadow:0 6px 24px -12px rgba(0,0,0,.18); }
.boutique-card:hover .boutique-card__media img{ transform:scale(1.07); filter:brightness(.92); }
.boutique-card:hover .boutique-card__media::after{ background:rgba(17,17,17,.06); }
.boutique-card:hover .boutique-card__body{ transform:translateY(-14px); }
.boutique-card:hover .boutique-card__cta::after{ transform:scaleX(1); transform-origin:left; }
.boutique-card:hover .boutique-card__cta .icon{ transform:translateX(6px); }

/* ---------- Brand strip ---------- */
.brand-strip{ background:var(--us-bg-soft); padding:3rem 0; }
.brand-strip .splide__slide{ display:flex; align-items:center; justify-content:center; height:80px; }
.brand-strip .brand-logo{
  font-family:var(--us-font-sans); font-weight:700; font-size:1.4rem; letter-spacing:.04em;
  color:var(--us-ink-3); text-transform:uppercase;
  filter:grayscale(1); opacity:.65; transition:.2s;
}
.brand-strip .brand-logo:hover{ color:var(--us-ink); opacity:1; }

/* ---------- Editorial articles ---------- */
.article-card{ display:block; position:relative; }
.article-card__media{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--us-bg-soft);
  border-radius:var(--us-card-radius);
}
.article-card__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1s cubic-bezier(.2,.7,.2,1), filter .5s;
}
.article-card__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.45) 100%);
  opacity:0;
  transition:opacity .4s;
}
.article-card__read{
  position:absolute;
  left:1.25rem; bottom:1.25rem;
  z-index:2;
  color:var(--us-static-dark-ink);
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem .9rem;
  background:var(--us-static-dark);
  opacity:0;
  transform:translateY(12px);
  transition:opacity .4s cubic-bezier(.2,.7,.2,1), transform .4s cubic-bezier(.2,.7,.2,1);
}
.article-card__read .icon{ width:14px; height:14px; }

.article-card__meta{
  display:flex; gap:.75rem;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--us-ink-3); margin-top:1.1rem;
}
.article-card__meta span{ position:relative; }
.article-card__meta span + span::before{
  content:""; position:absolute; left:-.5rem; top:50%;
  width:3px; height:3px; background:var(--us-ink-3); border-radius:50%; transform:translateY(-50%);
}
.article-card__title{
  font-size:1.2rem; font-weight:600; line-height:1.3;
  margin:.6rem 0 .4rem;
  position:relative;
  display:inline;
  background-image:linear-gradient(var(--us-ink), var(--us-ink));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0 1px;
  transition:background-size .5s cubic-bezier(.2,.7,.2,1);
  padding-bottom:2px;
}
.article-card__excerpt{
  display:block;
  color:var(--us-ink-2); font-size:.9rem; line-height:1.5;
  margin-top:.5rem;
}

/* hover */
.article-card:hover .article-card__media img{ transform:scale(1.06); filter:brightness(.95); }
.article-card:hover .article-card__media::after{ opacity:1; }
.article-card:hover .article-card__read{ opacity:1; transform:translateY(0); }
.article-card:hover .article-card__title{ background-size:100% 1px; }

/* ---------- Newsletter (lime gradient + grid) ---------- */
.newsletter{
  background:
    radial-gradient(ellipse 80% 60% at 90% 100%, var(--us-accent) 0%, transparent 55%),
    radial-gradient(ellipse 100% 80% at 10% 0%, color-mix(in srgb, var(--us-accent) 40%, #0a0a0a) 0%, #0a0a0a 60%),
    #0a0a0a;
  color:var(--us-static-dark-ink);
  padding:5rem 0;
  position:relative;
  overflow:hidden;
}
/* grid overlay */
.newsletter::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 100% 48px,
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 48px 100%;
  pointer-events:none;
  z-index:1;
  mask-image:radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at center, black 30%, transparent 80%);
}
/* blur lime orb */
.newsletter::after{
  content:"";
  position:absolute;
  width:520px; height:520px;
  right:-160px; bottom:-160px;
  border-radius:50%;
  background:radial-gradient(circle, var(--us-accent) 0%, transparent 65%);
  filter:blur(80px);
  opacity:.55;
  pointer-events:none;
  z-index:0;
}
.newsletter > *{
  position:relative;
  z-index:2;
}
.newsletter h2{ color:var(--us-static-dark-ink); font-size:clamp(1.5rem,2.6vw,2.25rem); }
.newsletter p{ color:rgba(255,255,255,.7); margin-bottom:2rem; }
.newsletter form{
  display:flex; gap:0;
  max-width:520px; width:100%;
  margin:0 auto;
  padding:0 1rem;
  box-sizing:border-box;
}
.newsletter input{
  flex:1; min-width:0;
  background:none; border:0; border-bottom:1px solid rgba(255,255,255,.4);
  color:#fff; font-family:var(--us-font-sans); font-size:1rem;
  padding:.85rem .25rem; outline:none;
}
.newsletter input::placeholder{ color:rgba(255,255,255,.5); }
@media(max-width:576px){
  .newsletter button .btn-label{ display:none; }
  .newsletter button{ padding-right:.5rem; }
}
.newsletter button{
  background:none; border:0;
  color:var(--us-static-dark-ink);
  padding:.85rem 1rem .85rem .25rem;
  font-weight:600; letter-spacing:.12em; text-transform:uppercase; font-size:.78rem;
  display:inline-flex; align-items:center; gap:.6rem;
  position:relative;
  cursor:pointer;
}
.newsletter button::after{
  content:"";
  position:absolute;
  left:.25rem; right:1rem; bottom:0;
  height:1px;
  background:var(--us-static-dark-ink);
  transform-origin:left;
  transition:transform .4s cubic-bezier(.2,.7,.2,1), background .25s;
}
.newsletter button:hover::after{
  background:var(--us-accent);
  transform:scaleX(1.05);
}
.newsletter button .icon{
  transition:transform .35s cubic-bezier(.2,.7,.2,1), color .25s;
}
.newsletter button:hover{ color:var(--us-accent); }
.newsletter button:hover .icon{ transform:translateX(6px); }

/* ---------- Footer ---------- */
.site-footer{
  background:var(--us-bg); color:var(--us-ink);
  border-top:1px solid var(--us-line);
  padding:5rem 0 2rem;
  overflow-wrap:break-word;
  word-wrap:break-word;
}
.site-footer h6{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; margin-bottom:1.25rem; }
.site-footer ul{ list-style:none; padding:0; margin:0; }
.site-footer li{ margin-bottom:.6rem; }
.site-footer ul a{
  color:var(--us-ink-2); font-size:.9rem;
  display:inline-block;
  overflow-wrap:anywhere;
  word-break:break-word;
  max-width:100%;
  background-image:linear-gradient(var(--us-accent), var(--us-accent));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0 1px;
  padding-bottom:2px;
  transition:background-size .35s cubic-bezier(.2,.7,.2,1), color .25s;
}
.site-footer ul a:hover{
  color:var(--us-ink);
  background-size:100% 1px;
}
.site-footer a{ color:var(--us-ink-2); }
.site-footer__brand{ font-family:var(--us-font-sans); font-weight:800; font-size:1.65rem; line-height:1; letter-spacing:-.025em; margin-bottom:1rem; display:block; }
.site-footer__bottom{ border-top:1px solid var(--us-line); margin-top:3rem; padding-top:1.5rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; font-size:.78rem; color:var(--us-ink-3); }
.payments{ display:flex; gap:.5rem; align-items:stretch; flex-wrap:wrap; }
.payments span{ display:inline-flex; align-items:center; justify-content:center; text-align:center; font-size:.7rem; padding:.45rem .65rem; border:1px solid var(--us-line); border-radius:var(--us-btn-radius-sm); letter-spacing:.04em; font-weight:600; color:var(--us-ink-2); line-height:1.1; }
.lang-switch{ display:flex; gap:.5rem; }
.lang-switch a{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; padding:.2rem .4rem; }
.lang-switch a.is-active{ color:var(--us-ink); border-bottom:1px solid var(--us-ink); }

/* ---------- Cart offcanvas ---------- */
.offcanvas{ --bs-offcanvas-width:440px; }
.offcanvas-header{ border-bottom:1px solid var(--us-line); padding:1.5rem 1.75rem; align-items:center; }
.offcanvas-title{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--us-ink); }

/* Close button — minimal icon-only */
.offcanvas-header .btn-icon,
.modal-header .btn-icon{
  width:44px; height:44px;
  padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:0;
  color:var(--us-ink);
  margin:-.5rem -.75rem -.5rem 0;
  border-radius:50%;
  transition:background .2s;
}
.offcanvas-header .btn-icon:hover,
.modal-header .btn-icon:hover{
  background:var(--us-bg-soft);
  color:var(--us-ink);
}
.offcanvas-header .btn-icon .icon,
.modal-header .btn-icon .icon{
  width:22px; height:22px;
  stroke-width:1.5;
  transition:transform .35s ease;
}
.offcanvas-header .btn-icon:hover .icon,
.modal-header .btn-icon:hover .icon{
  transform:rotate(90deg);
}
.offcanvas-body{ padding:1.25rem 1.5rem; }
.cart-line{ display:flex; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--us-line); }
.cart-line img{ width:80px; height:100px; object-fit:cover; background:var(--us-bg-soft); border-radius:var(--us-btn-radius-sm); }
.cart-line__title{ font-size:.9rem; font-weight:500; }
.cart-line__meta{ font-size:.78rem; color:var(--us-ink-3); margin-top:.25rem; }
.qty-stepper{
  display:inline-flex; align-items:center;
  border:1px solid var(--us-line);
  border-radius:var(--us-btn-radius-sm);
  margin-top:.5rem;
  background:var(--us-bg-elevated);
}
.qty-stepper button{
  width:30px; height:30px;
  background:none; border:0;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--us-ink);
  cursor:pointer;
  transition:background .15s;
}
.qty-stepper button:hover{ background:var(--us-bg-soft); }
.qty-stepper button .icon{ width:14px; height:14px; }
.qty-stepper input{
  width:34px; text-align:center;
  border:0;
  font-size:.85rem; font-weight:500;
  outline:none;
  background:transparent;
  color:var(--us-ink);
  -moz-appearance:textfield;
}
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.cart-summary{ border-top:1px solid var(--us-line-strong); padding-top:1rem; }
.cart-summary .row-line{ display:flex; justify-content:space-between; padding:.35rem 0; font-size:.9rem; }
.cart-summary .total{ font-size:1.1rem; font-weight:700; padding-top:.5rem; border-top:1px solid var(--us-line); margin-top:.5rem; }

/* ---------- Splide arrows — themed ---------- */
.splide__arrow{
  background:var(--us-bg-elevated) !important;
  border:1px solid var(--us-line) !important;
  border-radius:var(--us-btn-radius) !important;
  width:44px; height:44px;
  opacity:1;
  transition:background .15s, border-color .15s;
}
.splide__arrow:hover{
  background:var(--us-ink) !important;
  border-color:var(--us-ink) !important;
}
.splide__arrow svg{
  width:14px; height:14px;
  fill:var(--us-ink);
  transition:fill .15s;
}
.splide__arrow:hover svg{ fill:var(--us-ink-inverse); }
.splide__arrow:disabled{ opacity:.35; }
/* default Splide theme already flips prev arrow, but enforce in case core CSS used */
.splide__arrow--prev svg{ transform:scaleX(-1); }
.splide__arrow--next svg{ transform:none; }

/* Hero arrows = bigger and translucent */
.hero .splide__arrow{
  background:rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.4) !important;
  width:48px; height:48px;
}
.hero .splide__arrow svg{ fill:#fff; }
.hero .splide__arrow:hover{ background:#fff !important; }
.hero .splide__arrow:hover svg{ fill:var(--us-ink); }

/* Splide pagination dots — flat editorial */
.splide__pagination{ gap:.5rem; }
.splide__pagination__page{
  width:24px; height:2px;
  border-radius:0 !important;
  background:rgba(0,0,0,.25);
  opacity:1;
  margin:0;
}
.splide__pagination__page.is-active{
  background:var(--us-ink);
  transform:none;
}
.hero .splide__pagination__page{ background:rgba(255,255,255,.5); }
.hero .splide__pagination__page.is-active{ background:#fff; }

/* Product carousel arrows — sit above the slider in section header */
.splide.product-carousel{ padding-top:0; }
.splide.product-carousel .splide__arrow{
  top:-3.75rem;
  transform:none;
}
.splide.product-carousel .splide__arrow--prev{ left:auto; right:3.5rem; }
.splide.product-carousel .splide__arrow--next{ right:0; }
.splide.product-carousel .splide__pagination{ display:none; }
@media(max-width:576px){
  .splide.product-carousel .splide__arrow{ display:none; }
}

/* ---------- Quick add modal ---------- */
.modal-content{
  border-radius:var(--us-btn-radius);
  border:1px solid var(--us-line);
}
.modal-header,
.modal-footer{
  border-color:var(--us-line);
  padding:1.25rem 1.5rem;
}
.modal-title{
  font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
}
.modal-body{ padding:1.5rem; }
.modal-footer{ gap:.75rem; }
.modal-footer .btn{ flex:1; }

.quick-add-product{
  display:flex; gap:1rem; align-items:center;
}
.quick-add-product img{
  width:80px; height:100px; object-fit:cover; background:var(--us-bg-soft);
}
.quick-add-product__brand{ font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--us-ink-3); font-weight:500; }
.quick-add-product__title{ font-size:1rem; font-weight:500; margin:.15rem 0; }
.quick-add-product__price{ font-size:1rem; font-weight:600; }

/* Variants — same model in other colors/styles */
.quick-add-variants{
  margin-top:1.5rem;
  padding-top:1.25rem;
  border-top:1px solid var(--us-line);
}
.quick-add-variants__label{
  display:flex; align-items:baseline; gap:.5rem;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; color:var(--us-ink);
  margin-bottom:.85rem;
}
.quick-add-variants__label .muted{
  font-weight:500; letter-spacing:.04em; text-transform:none;
  color:var(--us-ink-3);
  font-size:.78rem;
}
.quick-add-variants__grid{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:.5rem;
}
@media(max-width:480px){ .quick-add-variants__grid{ grid-template-columns:repeat(5, minmax(0, 1fr)); } }
.quick-add-variants__grid button{
  position:relative;
  aspect-ratio:3/4;
  background:var(--us-bg-soft);
  border:1px solid var(--us-line);
  border-radius:var(--us-btn-radius-sm);
  padding:0;
  cursor:pointer;
  overflow:hidden;
  transition:border-color .2s;
}
.quick-add-variants__grid button::after{
  content:"";
  position:absolute; inset:0;
  background:rgba(255,255,255,0);
  transition:background .2s;
}
.quick-add-variants__grid button img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .35s;
}
.quick-add-variants__grid button:hover{ border-color:var(--us-ink); }
.quick-add-variants__grid button:hover img{ transform:scale(1.05); }
.quick-add-variants__grid button.is-active{
  border-color:var(--us-ink);
  outline:1px solid var(--us-ink);
  outline-offset:-2px;
}
.quick-add-variants__grid button.is-active::before{
  content:"";
  position:absolute; left:4px; top:4px;
  width:14px; height:14px; border-radius:50%;
  background:var(--us-ink);
  z-index:2;
  box-shadow:0 0 0 2px #fff;
}

.size-grid{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:.5rem;
}
@media(max-width:480px){ .size-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }

.size-chip{
  display:flex; align-items:center; justify-content:center;
  height:46px;
  border:1px solid var(--us-line);
  border-radius:var(--us-btn-radius-sm);
  font-size:.85rem; font-weight:500; letter-spacing:.04em;
  cursor:pointer;
  transition:border-color .15s, background .15s, color .15s;
  user-select:none;
}
.size-chip:hover{ border-color:var(--us-ink); }
.btn-check:checked + .size-chip{
  background:var(--us-ink); color:var(--us-ink-inverse); border-color:var(--us-ink);
}
.size-chip.is-out{
  color:var(--us-ink-3);
  background:repeating-linear-gradient(-45deg, transparent 0 6px, var(--us-bg-soft) 6px 7px);
  cursor:not-allowed;
}

/* ---------- Toast ---------- */
.toast{
  border-radius:var(--us-btn-radius);
  border:1px solid var(--us-ink);
  background:var(--us-bg-elevated);
  box-shadow:var(--us-shadow);
  font-size:.88rem;
}
.toast .toast-body{ padding:.85rem 1rem; }

/* ---------- USP strip ---------- */
.usp-strip{
  border-top:1px solid var(--us-line);
  border-bottom:1px solid var(--us-line);
  padding:3.5rem 0;
  background:var(--us-bg);
}
.usp-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:0;
}
.usp-item{
  text-align:center;
  padding:1.25rem 1.5rem;
  border-right:1px solid var(--us-line);
  cursor:default;
  position:relative;
  overflow:hidden;
}
.usp-item:last-child{ border-right:0; }
.usp-item::before{
  content:"";
  position:absolute;
  left:50%; bottom:0;
  width:0; height:2px;
  background:var(--us-accent);
  transform:translateX(-50%);
  transition:width .45s cubic-bezier(.2,.7,.2,1);
}
.usp-item:hover::before{ width:60%; }

.usp-item .icon-wrap{
  width:56px; height:56px;
  margin:0 auto 1rem;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--us-ink);
  position:relative;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.usp-item .icon-wrap::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  background:var(--us-bg-soft);
  transform:scale(0);
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
  z-index:-1;
}
.usp-item:hover .icon-wrap{ transform:translateY(-4px); }
.usp-item:hover .icon-wrap::after{ transform:scale(1); }
.usp-item .icon-wrap .icon{ width:32px; height:32px; stroke-width:1.5; transition:transform .5s; }
.usp-item:hover .icon-wrap .icon{ transform:rotate(-8deg); }

.usp-item h6{
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; margin:0 0 .35rem;
  transition:color .25s;
}
.usp-item p{ font-size:.85rem; color:var(--us-ink-2); margin:0; line-height:1.5; }
@media(max-width:992px){
  .usp-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:2rem 0; }
  .usp-item:nth-child(2){ border-right:0; }
  .usp-item{ border-bottom:0; }
}
@media(max-width:576px){
  .usp-grid{ grid-template-columns:minmax(0,1fr); gap:2rem 0; }
  .usp-item{ border-right:0 !important; }
}

/* ---------- FAQ accordion ---------- */
.faq-section{ background:var(--us-bg-soft); }
.faq-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:4rem;
}
@media(max-width:992px){ .faq-grid{ grid-template-columns:minmax(0,1fr); gap:2rem; } }
.faq-grid .faq-intro h2{ margin-top:.5rem; }
.faq-grid .faq-intro p{ color:var(--us-ink-2); margin-top:1rem; max-width:340px; }

.accordion{ --bs-accordion-border-color:var(--us-line); --bs-accordion-border-radius:0; --bs-accordion-inner-border-radius:0; }
.accordion-item{
  background:transparent;
  border:0;
  border-bottom:1px solid var(--us-line);
}
.accordion-item:first-of-type{ border-top:1px solid var(--us-line); }
.accordion-button{
  background:transparent !important;
  box-shadow:none !important;
  padding:1.5rem 0;
  font-size:1.05rem;
  font-weight:600;
  color:var(--us-ink);
  letter-spacing:-.005em;
}
.accordion-button:not(.collapsed){ color:var(--us-ink); }
.accordion-button::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");
  background-size:20px;
  width:20px; height:20px;
  transition:transform .3s;
}
.accordion-button:not(.collapsed)::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  transform:none;
}
.accordion-body{
  padding:0 0 1.5rem;
  font-size:.95rem;
  color:var(--us-ink-2);
  line-height:1.6;
  max-width:680px;
}

/* ---------- Section CTA bottom ---------- */
.section-cta{
  display:flex; justify-content:center;
  margin-top:3rem;
}

/* ===========================================================
   CATEGORY PAGE / CATALOG
   =========================================================== */
.catalog-hero{ padding:2.5rem 0 1.5rem; }
.catalog-hero .eyebrow{ display:block; }
.catalog-hero h1{
  font-size:clamp(2rem, 3.4vw, 3rem);
  margin:.5rem 0 .85rem;
}
.catalog-hero p{ color:var(--us-ink-2); max-width:680px; margin:0; }
.catalog-hero .catalog-meta{
  font-size:.78rem; letter-spacing:.04em;
  color:var(--us-ink-3); margin-top:.5rem;
}

.catalog-layout{
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  gap:2.5rem;
  align-items:start;
  padding-bottom:4rem;
}
@media(max-width:992px){
  .catalog-layout{ grid-template-columns:minmax(0,1fr); }
  .catalog-sidebar{ display:none; }
  .catalog-sidebar.is-mobile-open{
    display:block;
    position:fixed; left:0; top:0; bottom:0; right:0;
    background:var(--us-bg);
    z-index:1050;
    overflow-y:auto;
    padding:1.25rem;
  }
}

.catalog-sidebar{
  position:sticky; top:calc(var(--us-header-h) + var(--us-topbar-h) + 1rem);
  max-height:calc(100vh - var(--us-header-h) - var(--us-topbar-h) - 2rem);
  overflow-y:auto;
  padding-right:.5rem;
}
.catalog-sidebar::-webkit-scrollbar{ width:6px; }
.catalog-sidebar::-webkit-scrollbar-thumb{ background:var(--us-line); border-radius:3px; }

.catalog-toolbar{
  display:flex; align-items:center; gap:1rem;
  padding:1rem 0;
  border-top:1px solid var(--us-line);
  border-bottom:1px solid var(--us-line);
  margin-bottom:1.25rem;
  flex-wrap:wrap;
}
.catalog-toolbar__count{ font-size:.85rem; color:var(--us-ink-2); }
.catalog-toolbar__count strong{ color:var(--us-ink); }
.catalog-toolbar__spacer{ flex:1; }
.catalog-toolbar__sort{ display:inline-flex; align-items:center; gap:.5rem; font-size:.85rem; color:var(--us-ink-2); }
.catalog-toolbar__sort select{
  border:0; background:none;
  font-family:var(--us-font-sans); font-weight:600;
  color:var(--us-ink); cursor:pointer;
  padding:.4rem .5rem .4rem 0;
  font-size:.85rem;
}
.catalog-toolbar__view{
  display:inline-flex; gap:.25rem;
  border:1px solid var(--us-line);
  border-radius:var(--us-btn-radius-sm);
  padding:2px;
}
.catalog-toolbar__view button{
  width:32px; height:32px;
  background:none; border:0;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--us-ink-3);
  border-radius:calc(var(--us-btn-radius-sm) - 2px);
  cursor:pointer;
}
.catalog-toolbar__view button .icon{ width:16px; height:16px; }
.catalog-toolbar__view button.is-active{ background:var(--us-ink); color:var(--us-ink-inverse); }

.catalog-toolbar__filter-mobile{ display:none; }
@media(max-width:992px){
  .catalog-toolbar__filter-mobile{
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.6rem 1rem;
    border:1px solid var(--us-line);
    border-radius:var(--us-btn-radius-sm);
    background:var(--us-bg-elevated);
    font-size:.85rem; font-weight:600;
    color:var(--us-ink);
  }
}

.catalog-active-chips{
  display:flex; gap:.5rem; flex-wrap:wrap;
  margin-bottom:1.25rem;
}

.catalog-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1.25rem 1rem;
}
@media(max-width:1200px){ .catalog-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media(max-width:768px){ .catalog-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1rem .5rem; } }

.catalog-grid .feed-insert{
  grid-column:1 / -1;
  border:1px solid var(--us-line);
  border-radius:var(--us-card-radius);
  background:var(--us-bg-elevated);
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  overflow:hidden;
  min-height:240px;
  text-decoration:none;
  color:inherit;
  transition:border-color .25s, box-shadow .25s;
}
.catalog-grid .feed-insert:hover{ border-color:var(--us-card-border-hover); box-shadow:0 6px 24px -12px rgba(0,0,0,.18); }
.catalog-grid .feed-insert__media{
  position:relative;
  background:var(--us-bg-soft);
  overflow:hidden;
}
.catalog-grid .feed-insert__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.catalog-grid .feed-insert:hover .feed-insert__media img{ transform:scale(1.04); }
.catalog-grid .feed-insert__body{
  padding:2rem 2.25rem;
  display:flex; flex-direction:column; justify-content:center;
}
.catalog-grid .feed-insert__eyebrow{
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--us-ink-3); font-weight:600;
}
.catalog-grid .feed-insert__title{
  font-size:1.4rem; font-weight:600; line-height:1.25;
  margin:.5rem 0 .85rem;
}
.catalog-grid .feed-insert__excerpt{
  color:var(--us-ink-2); font-size:.92rem;
  margin-bottom:1.25rem; line-height:1.5;
}
@media(max-width:768px){
  .catalog-grid .feed-insert{ grid-template-columns:minmax(0,1fr); }
  .catalog-grid .feed-insert__body{ padding:1.25rem; }
  .catalog-grid .feed-insert__media{ aspect-ratio:16/9; }
}

.catalog-seo{
  margin-top:3rem;
  padding-top:2.5rem;
  border-top:1px solid var(--us-line);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:3rem;
}
.catalog-seo h2{ font-size:1.5rem; margin:0 0 1rem; }
.catalog-seo .seo-content{ color:var(--us-ink-2); line-height:1.7; max-width:680px; }
.catalog-seo .seo-content p{ margin:0 0 1rem; }
@media(max-width:992px){ .catalog-seo{ grid-template-columns:minmax(0,1fr); gap:1rem; } }

/* ===========================================================
   PRODUCT PAGE (PDP)
   =========================================================== */
.pdp-layout{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:3.5rem;
  padding:1.5rem 0 4rem;
  align-items:start;
}
@media(max-width:992px){
  .pdp-layout{ grid-template-columns:minmax(0,1fr); gap:2rem; }
}

/* Gallery (sticky on desktop) */
.pdp-gallery{
  position:sticky;
  top:calc(var(--us-header-h) + var(--us-topbar-h) + 1rem);
  display:grid;
  grid-template-columns:80px minmax(0,1fr);
  gap:1rem;
}
@media(max-width:992px){
  .pdp-gallery{ position:static; grid-template-columns:minmax(0,1fr); gap:.5rem; }
}
.pdp-gallery__thumbs{
  display:flex; flex-direction:column; gap:.5rem;
  max-height:calc(100vh - var(--us-header-h) - 4rem);
  overflow-y:auto;
  scroll-behavior:smooth;
  padding-right:4px;
  scrollbar-width:thin;
  scrollbar-color:var(--us-line) transparent;
  position:relative;
}
.pdp-gallery__thumbs::-webkit-scrollbar{ width:4px; }
.pdp-gallery__thumbs::-webkit-scrollbar-track{ background:transparent; }
.pdp-gallery__thumbs::-webkit-scrollbar-thumb{
  background:var(--us-line); border-radius:2px;
}
.pdp-gallery__thumbs::-webkit-scrollbar-thumb:hover{ background:var(--us-line-strong); }
/* fade indicators when list is scrollable */
.pdp-gallery__thumbs-wrap{ position:relative; }
.pdp-gallery__thumbs-wrap::before,
.pdp-gallery__thumbs-wrap::after{
  content:""; position:absolute; left:0; right:4px;
  height:24px; pointer-events:none; z-index:2;
  opacity:0; transition:opacity .2s;
}
.pdp-gallery__thumbs-wrap::before{ top:0; background:linear-gradient(180deg, var(--us-bg) 30%, transparent 100%); }
.pdp-gallery__thumbs-wrap::after{ bottom:0; background:linear-gradient(0deg, var(--us-bg) 30%, transparent 100%); }
.pdp-gallery__thumbs-wrap.has-top::before{ opacity:1; }
.pdp-gallery__thumbs-wrap.has-bottom::after{ opacity:1; }
@media(max-width:992px){
  .pdp-gallery__thumbs{ flex-direction:row; max-height:none; order:2; }
}
.pdp-gallery__thumb{
  aspect-ratio:3/4;
  background:var(--us-bg-soft);
  border:1px solid var(--us-line);
  border-radius:var(--us-btn-radius-sm);
  overflow:hidden;
  cursor:pointer;
  transition:border-color .2s, transform .2s;
  flex:none;
  width:80px;
  padding:0;
}
.pdp-gallery__thumb img{ width:100%; height:100%; object-fit:cover; }
.pdp-gallery__thumb:hover{ border-color:var(--us-ink); }
.pdp-gallery__thumb.is-active{ border-color:var(--us-ink); outline:1px solid var(--us-ink); outline-offset:-2px; }
.pdp-gallery__main{
  position:relative;
  aspect-ratio:3/4;
  background:var(--us-bg-soft);
  border-radius:var(--us-card-radius);
  overflow:hidden;
}
.pdp-gallery__main img{ width:100%; height:100%; object-fit:cover; }
.pdp-gallery__main .pdp-zoom{
  position:absolute; right:1rem; top:1rem; z-index:2;
}
.pdp-gallery__main .pdp-badges{
  position:absolute; left:1rem; top:1rem;
  display:flex; gap:.4rem;
}

/* Info column */
.pdp-info{
  position:sticky;
  top:calc(var(--us-header-h) + var(--us-topbar-h) + 1rem);
}
@media(max-width:992px){ .pdp-info{ position:static; } }

.pdp-brand{
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--us-ink-3); font-weight:600;
  display:inline-block;
  margin-bottom:.5rem;
}
.pdp-brand:hover{ color:var(--us-ink); }
.pdp-title{
  font-size:clamp(1.5rem, 2.4vw, 2rem);
  font-weight:600;
  letter-spacing:-.01em;
  margin:0 0 .85rem;
}
.pdp-rating{
  display:flex; align-items:center; gap:.6rem;
  margin-bottom:1.25rem;
}
.pdp-rating__stars{ display:inline-flex; gap:2px; color:#f5b700; }
.pdp-rating__stars .icon{ width:16px; height:16px; }
.pdp-rating__stars .icon.empty{ color:var(--us-line); }
.pdp-rating__count{
  font-size:.82rem; color:var(--us-ink-2);
}
.pdp-rating__count a{ text-decoration:underline; color:var(--us-ink-2); }
.pdp-rating__count a:hover{ color:var(--us-ink); }

.pdp-price{
  display:flex; align-items:baseline; gap:.85rem;
  margin-bottom:.5rem;
}
.pdp-price__now{
  font-size:1.85rem; font-weight:700; letter-spacing:-.01em;
}
.pdp-price__old{
  font-size:1.05rem; color:var(--us-ink-3);
  text-decoration:line-through;
}
.pdp-price__discount{
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700;
  color:var(--us-accent-ink);
  background:var(--us-accent);
  padding:.3rem .55rem;
  border-radius:var(--us-btn-radius-sm);
}
.pdp-price-sub{
  font-size:.78rem; color:var(--us-ink-3); margin-bottom:1.5rem;
}
.pdp-price-sub strong{ color:var(--us-ink); }

/* Variants (color group) — reuse modal grid */
.pdp-variants{ margin:1.5rem 0; }
.pdp-variants__label{
  display:flex; align-items:baseline; gap:.5rem;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; margin-bottom:.65rem;
}
.pdp-variants__label .muted{
  font-weight:500; letter-spacing:.04em; text-transform:none;
  color:var(--us-ink-3); font-size:.78rem;
}
.pdp-variants__grid{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:.5rem;
  max-height:340px;
  overflow-y:auto;
  padding:2px;
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color:var(--us-line) transparent;
}
.pdp-variants__grid::-webkit-scrollbar{ width:4px; }
.pdp-variants__grid::-webkit-scrollbar-thumb{ background:var(--us-line); border-radius:2px; }
.pdp-variants__grid.is-compact{ grid-template-columns:repeat(8, minmax(0, 1fr)); }
.pdp-variants__grid.is-compact .pdp-variants__grid-item{ aspect-ratio:1/1; }
.pdp-variants__grid a{
  position:relative;
  aspect-ratio:3/4;
  background:var(--us-bg-soft);
  border:1px solid var(--us-line);
  border-radius:var(--us-btn-radius-sm);
  overflow:hidden;
  display:block;
  transition:border-color .2s;
}
.pdp-variants__grid a img{ width:100%; height:100%; object-fit:cover; transition:transform .35s; }
.pdp-variants__grid a:hover{ border-color:var(--us-ink); }
.pdp-variants__grid a:hover img{ transform:scale(1.05); }
.pdp-variants__grid a.is-active{ border-color:var(--us-ink); outline:1px solid var(--us-ink); outline-offset:-2px; }
.pdp-variants__grid a .variant-tip{
  position:absolute;
  left:50%; bottom:calc(100% + 6px);
  transform:translateX(-50%);
  background:var(--us-ink); color:var(--us-ink-inverse);
  font-size:.7rem; letter-spacing:.04em; font-weight:500;
  padding:.35rem .55rem;
  border-radius:var(--us-btn-radius-sm);
  white-space:nowrap;
  opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s;
}
.pdp-variants__grid a:hover .variant-tip{
  opacity:1;
  transform:translateX(-50%) translateY(-2px);
}


/* PDP variants — text chips (for non-visual attributes: volume, capacity, material, etc.) */
.pdp-variants__chips{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin-top:.4rem;
}
.pdp-variants__chip{
  position:relative;
  display:inline-flex; align-items:baseline; gap:.4rem;
  padding:.7rem 1rem;
  border:1px solid var(--us-line);
  border-radius:var(--us-btn-radius-sm);
  background:var(--us-bg-elevated);
  color:var(--us-ink);
  text-decoration:none;
  font-size:.9rem;
  font-weight:600;
  cursor:pointer;
  transition:border-color .2s, background .2s;
}
.pdp-variants__chip:hover{ border-color:var(--us-ink); }
.pdp-variants__chip.is-active{
  border-color:var(--us-ink);
  background:var(--us-ink);
  color:var(--us-ink-inverse);
}
.pdp-variants__chip.is-out{
  color:var(--us-ink-3);
  background:repeating-linear-gradient(-45deg, transparent 0 6px, var(--us-bg-soft) 6px 7px);
  cursor:not-allowed;
}
.pdp-variants__chip-meta{
  font-size:.75rem; color:var(--us-ink-3); font-weight:500;
}
.pdp-variants__chip.is-active .pdp-variants__chip-meta{ color:rgba(255,255,255,.75); }

/* Mini circle color swatches (for many colors — yarn, paint case) */
.pdp-variants__circles{
  display:flex; flex-wrap:wrap; gap:.4rem;
  max-height:140px;
  overflow-y:auto;
  padding:2px;
  scrollbar-width:thin;
  scrollbar-color:var(--us-line) transparent;
}
.pdp-variants__circles::-webkit-scrollbar{ width:4px; }
.pdp-variants__circles::-webkit-scrollbar-thumb{ background:var(--us-line); border-radius:2px; }
.pdp-variants__circles a{
  width:32px; height:32px; border-radius:50%;
  background:var(--c, #999);
  border:1px solid var(--us-line);
  cursor:pointer;
  position:relative;
  transition:transform .15s;
}
.pdp-variants__circles a:hover{ transform:scale(1.12); }
.pdp-variants__circles a.is-active::after{
  content:""; position:absolute; inset:-4px;
  border:2px solid var(--us-ink);
  border-radius:50%;
}

/* Sizes */
.pdp-sizes{ margin:1.5rem 0 .5rem; }
.pdp-sizes__head{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:.65rem;
}
.pdp-sizes__head h6{
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; margin:0;
}
.pdp-sizes__guide{
  font-size:.78rem; color:var(--us-ink-2);
  text-decoration:underline;
}
.pdp-sizes__guide:hover{ color:var(--us-ink); }

.pdp-fit-note{
  font-size:.78rem; color:var(--us-ink-2);
  margin-top:.65rem;
  padding:.6rem .85rem;
  background:var(--us-bg-soft);
  border-radius:var(--us-btn-radius-sm);
  display:inline-flex; align-items:center; gap:.5rem;
}
.pdp-fit-note .icon{ width:14px; height:14px; }

/* CTA row */
.pdp-cta{
  display:flex; gap:.5rem;
  margin-top:1.5rem;
}
.pdp-cta .btn-primary{ flex:1; padding:1.15rem 1.5rem; font-size:.85rem; }
.pdp-cta .btn-icon{
  width:54px; height:54px;
  border:1px solid var(--us-line);
  border-radius:var(--us-btn-radius);
}
.pdp-cta .btn-icon:hover{ background:var(--us-ink); color:var(--us-ink-inverse); }

/* Stock + delivery line */
.pdp-stock{
  display:flex; align-items:center; gap:.5rem;
  margin-top:1rem;
  font-size:.85rem;
}
.pdp-stock__dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--us-success);
}
.pdp-stock__low .pdp-stock__dot{ background:#d68a00; }

/* USP mini list */
.pdp-usp{
  margin-top:1.5rem;
  border-top:1px solid var(--us-line);
  padding-top:1.25rem;
  display:flex; flex-direction:column; gap:.6rem;
}
.pdp-usp li{
  display:flex; align-items:center; gap:.75rem;
  font-size:.85rem; color:var(--us-ink-2);
}
.pdp-usp li .icon{ width:18px; height:18px; color:var(--us-ink); flex:none; }
.pdp-usp{ list-style:none; padding:0; }

/* Tenant card */
.pdp-tenant-card{
  margin-top:1.5rem;
  padding:1rem 1.25rem;
  background:var(--us-bg-soft);
  border:1px solid var(--us-line);
  border-radius:var(--us-card-radius);
  display:flex; align-items:center; gap:1rem;
}
.pdp-tenant-card__avatar{
  width:48px; height:48px;
  background:var(--us-bg-elevated);
  border:1px solid var(--us-line);
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
}
.pdp-tenant-card__avatar .icon{ width:22px; height:22px; }
.pdp-tenant-card__info{ flex:1; min-width:0; }
.pdp-tenant-card__name{ font-weight:600; font-size:.95rem; }
.pdp-tenant-card__meta{ font-size:.75rem; color:var(--us-ink-3); }
.pdp-tenant-card__cta{
  font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.4rem;
}

/* Attributes table */
.pdp-attrs{
  margin-top:1.5rem;
}
.pdp-attrs dt{
  font-size:.78rem; color:var(--us-ink-3);
  font-weight:500;
}
.pdp-attrs dd{
  font-size:.88rem; color:var(--us-ink);
  font-weight:500;
  margin-bottom:.85rem;
}

/* Tags */
.pdp-tags{
  display:flex; gap:.4rem; flex-wrap:wrap;
  margin-top:1rem;
}
.pdp-tag{
  display:inline-block;
  padding:.35rem .65rem;
  border:1px solid var(--us-line);
  border-radius:999px;
  font-size:.72rem;
  color:var(--us-ink-2);
  text-decoration:none;
  transition:border-color .2s, color .2s;
}
.pdp-tag:hover{ border-color:var(--us-ink); color:var(--us-ink); }

/* ====== Tabs section ====== */
.pdp-tabs-section{
  padding:3rem 0;
  border-top:1px solid var(--us-line);
}
.pdp-tabs-section .tab-content{
  padding:1.5rem 0;
  max-width:760px;
  color:var(--us-ink-2);
  line-height:1.7;
  font-size:.95rem;
}
.pdp-tabs-section .tab-content p{ margin:0 0 1rem; }
.pdp-tabs-section .tab-content ul{ padding-left:1.25rem; }
.pdp-tabs-section .tab-content li{ margin-bottom:.4rem; }

/* ====== Reviews ====== */
.reviews-section{
  padding:3rem 0;
  border-top:1px solid var(--us-line);
}
.reviews-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  flex-wrap:wrap; gap:1rem;
  margin-bottom:2rem;
}
.reviews-summary{
  display:flex; align-items:center; gap:2rem;
}
.reviews-summary__score{
  font-size:3rem; font-weight:700; line-height:1;
}
.reviews-summary__bars{ display:flex; flex-direction:column; gap:.35rem; min-width:240px; }
.reviews-summary__bar{
  display:flex; align-items:center; gap:.5rem;
  font-size:.78rem; color:var(--us-ink-2);
}
.reviews-summary__bar .label{ width:14px; }
.reviews-summary__bar .track{
  flex:1; height:6px;
  background:var(--us-line);
  border-radius:999px; overflow:hidden;
}
.reviews-summary__bar .fill{
  display:block;
  height:100%; background:#f5b700; border-radius:999px;
}
.reviews-summary__bar .count{ width:30px; text-align:right; }

.reviews-list{ display:flex; flex-direction:column; gap:1.5rem; }
.review-card{
  padding:1.5rem;
  border:1px solid var(--us-line);
  border-radius:var(--us-card-radius);
  background:var(--us-bg-elevated);
}
.review-card__head{
  display:flex; align-items:center; gap:1rem;
  margin-bottom:.85rem;
}
.review-card__avatar{
  width:44px; height:44px; border-radius:50%;
  background:var(--us-bg-soft);
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:600; color:var(--us-ink);
}
.review-card__name{ font-weight:600; font-size:.92rem; }
.review-card__date{ font-size:.75rem; color:var(--us-ink-3); }
.review-card__stars{ margin-left:auto; color:#f5b700; display:inline-flex; gap:2px; }
.review-card__stars .icon{ width:15px; height:15px; }
.review-card__stars .icon.empty{ color:var(--us-line); }
.review-card__title{ font-weight:600; margin:.5rem 0; }
.review-card__text{ color:var(--us-ink-2); font-size:.92rem; line-height:1.6; }
.review-card__meta{
  margin-top:.85rem;
  font-size:.78rem; color:var(--us-ink-3);
  display:flex; gap:1.25rem;
}
.review-card__meta strong{ color:var(--us-ink); }

.review-form{
  margin-top:2.5rem;
  padding:2rem;
  background:var(--us-bg-soft);
  border-radius:var(--us-card-radius);
}
.review-form h3{ margin:0 0 1rem; font-size:1.15rem; }
.review-form .star-input{ display:inline-flex; gap:6px; margin-bottom:1rem; cursor:pointer; }
.review-form .star-input .icon{ outline:none; -webkit-tap-highlight-color:transparent; }
.review-form .star-input .icon:focus,
.review-form .star-input .icon:focus-visible{ outline:none; }
.review-form .star-input .icon:focus-visible{ filter:drop-shadow(0 0 0 2px var(--us-accent)); }
.review-form .star-input .icon{ width:28px; height:28px; color:var(--us-line); transition:color .12s, transform .12s; }
.review-form .star-input .icon.is-selected{ color:#f5b700; }
.review-form .star-input.is-hovering .icon{ color:var(--us-line); }
.review-form .star-input.is-hovering .icon.is-hover{ color:#f5b700; }
.review-form .star-input .icon.is-hover{ transform:scale(1.1); }
/* ===========================================================
   ARTICLE PAGE (BLOG / NEWS)
   =========================================================== */
.article-page{ padding-bottom:5rem; }

.article-hero{
  padding:2.5rem 0 2rem;
  text-align:center;
  max-width:780px;
  margin:0 auto;
}
.article-hero__category{
  display:inline-block;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700;
  color:var(--us-accent-ink);
  background:var(--us-accent);
  padding:.4rem .65rem;
  border-radius:var(--us-btn-radius-sm);
  margin-bottom:1.25rem;
}
.article-hero h1{
  font-size:clamp(2rem, 4vw, 3.25rem);
  line-height:1.15;
  margin:0 0 1rem;
  letter-spacing:-.02em;
}
.article-hero__lead{
  font-size:1.05rem;
  color:var(--us-ink-2);
  line-height:1.5;
  max-width:640px;
  margin:0 auto 1.5rem;
}
.article-hero__meta{
  display:flex; align-items:center; justify-content:center;
  gap:1.5rem; flex-wrap:wrap;
  font-size:.78rem; color:var(--us-ink-3);
  letter-spacing:.04em;
}
.article-hero__meta span{ display:inline-flex; align-items:center; gap:.4rem; }
.article-hero__meta .icon{ width:14px; height:14px; }

.article-cover{
  margin:0 0 3rem;
  border-radius:var(--us-card-radius);
  overflow:hidden;
  aspect-ratio:21/9;
  background:var(--us-bg-soft);
}
.article-cover img{ width:100%; height:100%; object-fit:cover; }

.article-layout{ align-items:flex-start; }
.article-layout > .article-body{ max-width:760px; }
@media(max-width:992px){
  .article-layout > .article-toc,
  .article-layout > .article-share{ display:none; }
}

.article-share{
  position:sticky;
  top:calc(var(--us-header-h) + var(--us-topbar-h) + 2rem);
  display:flex; flex-direction:column; gap:.5rem;
  align-items:flex-end;
}
.article-share h6{
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--us-ink-3); font-weight:600;
  margin:0 0 .35rem;
}
.article-share .btn-icon{
  width:42px; height:42px;
  border:1px solid var(--us-line);
  border-radius:50%;
}
.article-share .btn-icon:hover{ background:var(--us-ink); color:var(--us-ink-inverse); }

.article-toc{
  position:sticky;
  top:calc(var(--us-header-h) + var(--us-topbar-h) + 2rem);
}
.article-toc h6{
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--us-ink-3); font-weight:600;
  margin:0 0 1rem;
}
.article-toc ol{
  list-style:none; padding:0; margin:0;
  counter-reset:item;
  display:flex; flex-direction:column; gap:.5rem;
}
.article-toc li{
  counter-increment:item;
  font-size:.85rem;
}
.article-toc a{
  color:var(--us-ink-2);
  display:flex; gap:.5rem;
  padding-left:.6rem;
  border-left:2px solid transparent;
  transition:color .15s, border-color .15s;
}
.article-toc a::before{
  content:"0" counter(item);
  font-size:.7rem; color:var(--us-ink-3); font-weight:600;
}
.article-toc a:hover{ color:var(--us-ink); border-left-color:var(--us-accent); }
.article-toc a.is-active{ color:var(--us-ink); border-left-color:var(--us-ink); }

/* Article body */
.article-body{
  font-size:1.05rem;
  line-height:1.75;
  color:var(--us-ink);
}
.article-body p{ margin:0 0 1.5rem; }
.article-body h2{
  font-size:1.65rem;
  margin:3rem 0 1rem;
  letter-spacing:-.01em;
}
.article-body h3{
  font-size:1.25rem;
  margin:2rem 0 .75rem;
}
.article-body img{
  border-radius:var(--us-card-radius);
  margin:1.5rem 0;
}
.article-body a{
  color:var(--us-ink);
  text-decoration:underline;
  text-decoration-color:var(--us-ink-3);
  text-underline-offset:3px;
  transition:text-decoration-color .2s;
}
.article-body a:hover{ text-decoration-color:var(--us-accent); }
.article-body blockquote{
  margin:2rem 0;
  padding:1.25rem 1.5rem;
  border-left:3px solid var(--us-accent);
  background:var(--us-bg-soft);
  border-radius:var(--us-card-radius);
  font-size:1.1rem;
  font-style:italic;
  color:var(--us-ink);
}
.article-body blockquote cite{
  display:block;
  font-size:.85rem;
  font-style:normal;
  color:var(--us-ink-3);
  margin-top:.5rem;
}
.article-body ul, .article-body ol{
  margin:0 0 1.5rem;
  padding-left:1.5rem;
}
.article-body li{ margin-bottom:.5rem; }

/* Inline product card inside article */
.article-product-inline{
  display:grid;
  grid-template-columns:140px minmax(0,1fr);
  gap:1.25rem;
  margin:2rem 0;
  padding:1.25rem;
  background:var(--us-bg-soft);
  border:1px solid var(--us-line);
  border-radius:var(--us-card-radius);
  text-decoration:none !important;
  color:inherit !important;
  transition:border-color .2s;
}
.article-product-inline:hover{ border-color:var(--us-card-border-hover); }
.article-product-inline img{
  width:100%; aspect-ratio:3/4; object-fit:cover;
  border-radius:var(--us-btn-radius-sm);
  margin:0 !important;
}
.article-product-inline__brand{
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--us-ink-3); font-weight:600;
}
.article-product-inline__title{
  font-size:1.05rem; font-weight:600;
  margin:.35rem 0 .5rem;
}
.article-product-inline__price{
  font-size:1rem; font-weight:600; color:var(--us-ink);
  display:block; margin-bottom:.85rem;
}
.article-product-inline__cta{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  padding-bottom:3px; border-bottom:1px solid var(--us-ink);
}

/* Tags row */
.article-tags{
  margin-top:3rem;
  padding:1.5rem 0;
  border-top:1px solid var(--us-line);
  border-bottom:1px solid var(--us-line);
  display:flex; gap:.5rem; flex-wrap:wrap; align-items:center;
}
.article-tags__label{
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--us-ink-3); font-weight:600; margin-right:.5rem;
}

/* Author block */
.article-author{
  margin-top:3rem;
  padding:2rem;
  background:var(--us-bg-soft);
  border-radius:var(--us-card-radius);
  display:flex; gap:1.5rem; align-items:center;
}
.article-author__avatar{
  width:80px; height:80px; border-radius:50%;
  background:var(--us-bg-elevated);
  border:1px solid var(--us-line);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.4rem; font-weight:700;
  color:var(--us-ink);
  flex:none;
}
.article-author__name{
  font-weight:700; font-size:1.05rem;
}
.article-author__role{
  font-size:.78rem; color:var(--us-ink-3);
  letter-spacing:.04em;
}
.article-author__bio{
  margin-top:.5rem;
  font-size:.9rem; color:var(--us-ink-2);
  line-height:1.5;
}

/* Inline newsletter strip inside article */
.article-newsletter{
  margin:3rem 0;
  padding:2.5rem;
  background:var(--us-static-dark);
  color:var(--us-static-dark-ink);
  border-radius:var(--us-card-radius);
  text-align:center;
}
.article-newsletter h3{
  color:#fff; font-size:1.35rem; margin:0 0 .5rem;
}
.article-newsletter p{
  color:rgba(255,255,255,.7);
  font-size:.92rem;
  margin:0 0 1.25rem;
}
.article-newsletter form{
  display:flex; gap:.5rem; max-width:420px; margin:0 auto;
}
.article-newsletter input{
  flex:1; min-width:0;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2);
  border-radius:var(--us-btn-radius);
  padding:.85rem 1rem;
  color:#fff;
  font-family:var(--us-font-sans);
  font-size:.95rem;
  outline:none;
}
.article-newsletter input::placeholder{ color:rgba(255,255,255,.5); }
.article-newsletter input:focus{ border-color:var(--us-accent); }

/* ===========================================================
   CART PAGE (full page, not offcanvas)
   =========================================================== */
.cart-page{ padding:2rem 0 5rem; }
.cart-page__head{
  display:flex; align-items:end; justify-content:space-between;
  margin-bottom:2rem; flex-wrap:wrap; gap:1rem;
}
.cart-page__head h1{
  font-size:clamp(1.75rem, 3vw, 2.5rem);
  margin:0;
}
.cart-page__head .count{ color:var(--us-ink-3); font-size:1rem; font-weight:500; }

.cart-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr);
  gap:3rem;
  align-items:start;
}
.cart-grid > * { min-width:0; }
@media(max-width:992px){
  .cart-grid{ grid-template-columns:minmax(0,1fr); gap:2rem; }
}

.cart-items{
  display:flex; flex-direction:column;
}
.cart-item{
  display:grid;
  grid-template-columns:120px minmax(0,1fr) auto;
  gap:0 1.5rem;
  padding:1.5rem 0;
  border-bottom:1px solid var(--us-line);
  align-items:start;
}
.cart-item__media{ grid-column:1; grid-row:1; }
.cart-item > div:not(.cart-item__media):not(.cart-item__price):not(.cart-item__actions){ grid-column:2; grid-row:1; }
.cart-item__price{ grid-column:3; grid-row:1; }
.cart-item__actions{ grid-column:2 / -1; grid-row:2; margin-top:.85rem; }
.cart-item:first-child{ border-top:1px solid var(--us-line); }
.cart-item__media{
  background:var(--us-bg-soft);
  aspect-ratio:3/4;
  border-radius:var(--us-btn-radius-sm);
  overflow:hidden;
}
.cart-item__media img{ width:100%; height:100%; object-fit:cover; }
.cart-item__brand{
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--us-ink-3); font-weight:600;
}
.cart-item__title{ font-size:1.05rem; font-weight:600; margin:.25rem 0 .5rem; }
.cart-item__attrs{
  display:flex; gap:1rem; flex-wrap:wrap;
  font-size:.85rem; color:var(--us-ink-2);
  margin-bottom:.85rem;
}
.cart-item__attrs strong{ color:var(--us-ink); font-weight:600; }
.cart-item__tenant{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.75rem; color:var(--us-ink-3);
  text-decoration:none;
  margin-bottom:.85rem;
}
.cart-item__tenant .icon{ width:13px; height:13px; }
.cart-item__tenant:hover{ color:var(--us-ink); }
.cart-item__actions{
  display:flex; align-items:center; gap:1rem;
}
.cart-item__remove{
  background:none; border:0;
  font-size:.78rem; color:var(--us-ink-3);
  text-decoration:underline;
  cursor:pointer;
  padding:.4rem 0;
  transition:color .2s;
}
.cart-item__remove:hover{ color:var(--us-promo); }
.cart-item__action{
  width:36px; height:36px;
  border-radius:50%;
  border:1px solid var(--us-line);
  background:var(--us-bg-elevated);
  color:var(--us-ink);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .2s, color .2s, border-color .2s;
}
.cart-item__action:hover{ background:var(--us-ink); color:var(--us-ink-inverse); border-color:var(--us-ink); }
.cart-item__action .icon{ width:16px; height:16px; }
.cart-item__price{
  text-align:right;
  display:flex; flex-direction:column; align-items:flex-end;
  gap:.25rem;
}
.cart-item__price strong{ font-size:1.1rem; font-weight:700; }
.cart-item__price .old{
  font-size:.85rem; color:var(--us-ink-3);
  text-decoration:line-through;
}


@media(max-width:768px){
  .cart-item{
    grid-template-columns:90px minmax(0,1fr);
    gap:.15rem .85rem;
  }
  .cart-item__media{
    grid-column:1;
    grid-row:1 / span 2;
    align-self:start;
    aspect-ratio:3/4;
  }
  .cart-item__price{
    grid-column:2;
    grid-row:1;
    text-align:left;
    align-items:flex-start;
    margin:0;
    gap:0;
  }
  .cart-item > div:not(.cart-item__media):not(.cart-item__price):not(.cart-item__actions){
    grid-column:2;
    grid-row:2;
  }
  .cart-item__actions{
    grid-column:1 / -1;
    grid-row:3;
    margin-top:.5rem;
  }
  .cart-item__brand{ font-size:.65rem; }
  .cart-item__title{ font-size:.95rem; margin:.15rem 0 .35rem; }
  .cart-item__price strong{ font-size:1.05rem; }
}

.cart-empty-promo{
  margin-top:1.5rem;
  padding:1.25rem 1.5rem;
  background:var(--us-bg-soft);
  border-radius:var(--us-card-radius);
  display:flex; align-items:center; gap:.85rem;
}
.cart-empty-promo .icon{ color:var(--us-success); width:24px; height:24px; flex:none; }
.cart-empty-promo p{ margin:0; font-size:.9rem; color:var(--us-ink-2); }

/* Cart sidebar — order summary */
.cart-summary-box{
  background:var(--us-bg-elevated);
  border:1px solid var(--us-line);
  border-radius:var(--us-card-radius);
  padding:1.75rem;
}

.cart-summary-box h3{
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; margin:0 0 1.25rem;
}
.cart-summary-box .row-line{
  display:flex; justify-content:space-between;
  padding:.5rem 0;
  font-size:.92rem;
  color:var(--us-ink-2);
}
.cart-summary-box .row-line strong{ color:var(--us-ink); font-weight:600; }
.cart-summary-box .row-line.bonus strong{ color:var(--us-success); }
.cart-summary-box .row-line.discount strong{ color:var(--us-promo); }
.cart-summary-box .row-line.total{
  border-top:1px solid var(--us-line);
  margin-top:.85rem; padding-top:1rem;
  font-size:1.05rem;
  color:var(--us-ink);
}
.cart-summary-box .row-line.total strong{ font-size:1.4rem; font-weight:700; }

.cart-promo-input{
  display:flex; gap:.5rem;
  margin:1.25rem 0;
}
.cart-promo-input input{
  flex:1; min-width:0;
  padding:.7rem .85rem;
  border:1px solid var(--us-line);
  border-radius:var(--us-btn-radius-sm);
  font-family:var(--us-font-sans); font-size:.85rem;
  background:var(--us-bg);
  color:var(--us-ink);
}
.cart-promo-input input:focus{ outline:none; border-color:var(--us-ink); }
.cart-promo-input button{
  padding:.7rem 1rem;
  background:none;
  border:1px solid var(--us-line);
  border-radius:var(--us-btn-radius-sm);
  font-size:.78rem; font-weight:600; letter-spacing:.06em;
  color:var(--us-ink); cursor:pointer;
  transition:border-color .2s;
}
.cart-promo-input button:hover{ border-color:var(--us-ink); }
.cart-promo-input button{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; }
.cart-promo-input button .icon{ width:16px; height:16px; display:none; }
@media(max-width:576px){
  .cart-summary-box{ padding:1.25rem; }
  .cart-promo-input button{ padding:.7rem .85rem; flex:none; }
  .cart-promo-input button .btn-label{ display:none; }
  .cart-promo-input button .icon{ display:inline-block; }
}

.cart-bonus-toggle{
  display:flex; justify-content:space-between; align-items:center;
  padding:.85rem 0;
  border-top:1px solid var(--us-line);
  border-bottom:1px solid var(--us-line);
  margin:1rem 0;
  font-size:.85rem;
}
.cart-bonus-toggle__info{ color:var(--us-ink-2); }
.cart-bonus-toggle__info strong{ color:var(--us-success); }

.cart-payment-icons{
  display:flex; gap:.5rem; flex-wrap:wrap;
  margin-top:1.25rem;
  padding-top:1.25rem;
  border-top:1px solid var(--us-line);
}
.cart-payment-icons span{
  font-size:.65rem; padding:.3rem .55rem;
  border:1px solid var(--us-line);
  border-radius:var(--us-btn-radius-sm);
  font-weight:600; color:var(--us-ink-2);
  letter-spacing:.04em;
}

/* ===========================================================
   CHECKOUT PAGE
   =========================================================== */
.checkout-page{ padding:2rem 0 5rem; }
.checkout-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr);
  gap:3rem;
  align-items:start;
}
.checkout-grid > * { min-width:0; }
@media(max-width:992px){ .checkout-grid{ grid-template-columns:minmax(0,1fr); } }

.checkout-step{
  border:1px solid var(--us-line);
  border-radius:var(--us-card-radius);
  background:var(--us-bg-elevated);
  margin-bottom:1rem;
  overflow:hidden;
}
.checkout-step.is-active{ border-color:var(--us-ink); }
.checkout-step__head{
  display:flex; align-items:center; gap:1rem;
  padding:1.25rem 1.5rem;
  cursor:pointer;
}
.checkout-step__num{
  width:32px; height:32px;
  border-radius:50%;
  background:var(--us-bg-soft);
  border:1px solid var(--us-line);
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.85rem; color:var(--us-ink-3);
  flex:none;
}
.checkout-step.is-active .checkout-step__num,
.checkout-step.is-done .checkout-step__num{
  background:var(--us-ink); color:var(--us-ink-inverse); border-color:var(--us-ink);
}
.checkout-step__title{
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; color:var(--us-ink); margin:0;
}
.checkout-step__edit{
  margin-left:auto;
  font-size:.78rem; color:var(--us-ink-3);
  text-decoration:underline;
  background:none; border:0; cursor:pointer;
}
.checkout-step__body{
  padding:0 1.5rem 1.75rem 1.5rem;
}
.checkout-step__summary{
  padding:0 1.5rem 1.25rem 1.5rem;
  font-size:.88rem; color:var(--us-ink-2);
}

/* Delivery method radio cards */
.delivery-options{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:.75rem;
  margin-bottom:1.25rem;
}
@media(max-width:576px){ .delivery-options{ grid-template-columns:minmax(0,1fr); } }
.delivery-option{
  position:relative;
  padding:1.25rem;
  border:1px solid var(--us-line);
  border-radius:var(--us-btn-radius);
  cursor:pointer;
  transition:border-color .2s;
}
.delivery-option:hover{ border-color:var(--us-ink); }
.delivery-option input{
  position:absolute; opacity:0; pointer-events:none;
}
.delivery-option__head{
  display:flex; align-items:center; gap:.6rem;
  margin-bottom:.5rem;
}
.delivery-option__head .icon{ width:18px; height:18px; flex:none; }
.delivery-option__name{ font-weight:600; font-size:.95rem; }
.delivery-option__price{
  display:block;
  font-weight:700; font-size:1.05rem;
  color:var(--us-ink);
  margin-bottom:.25rem;
}
.delivery-option__meta{ font-size:.78rem; color:var(--us-ink-3); }
.delivery-option input:checked + .delivery-option__head{ }
.delivery-option:has(input:checked){
  border-color:var(--us-ink);
  background:var(--us-bg-soft);
}
.delivery-option:has(input:checked) .delivery-option__name::after{
  content:" ✓";
  color:var(--us-success);
}

/* Payment options — same pattern */
.payment-options{ display:flex; flex-direction:column; gap:.5rem; }
.payment-option{
  display:flex; align-items:center; gap:.85rem;
  padding:1rem 1.25rem;
  border:1px solid var(--us-line);
  border-radius:var(--us-btn-radius);
  cursor:pointer;
  transition:border-color .2s;
}
.payment-option:hover{ border-color:var(--us-ink); }
.payment-option:has(input:checked){
  border-color:var(--us-ink);
  background:var(--us-bg-soft);
}
.payment-option input{ position:absolute; opacity:0; }
.payment-option__icon{
  width:32px; height:32px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--us-bg-soft);
  border-radius:var(--us-btn-radius-sm);
}
.payment-option__icon .icon{ width:18px; height:18px; }
.payment-option__name{ font-weight:600; font-size:.92rem; flex:1; }
.payment-option__meta{ font-size:.78rem; color:var(--us-ink-3); }

/* Modifiers for cart-summary-box reuse in account/static contexts */
.cart-summary-box.is-default{ border:2px solid var(--us-ink); }
.cart-summary-box.is-danger{ border-color:var(--us-promo); }
.cart-summary-box.is-balance{
  text-align:center;
  padding:3rem 2rem;
  background:var(--us-static-dark);
  color:var(--us-static-dark-ink);
  border:0;
}
.cart-summary-box.is-balance h3{ color:rgba(255,255,255,.7); }
.cart-summary-box.is-balance .row-line,
.cart-summary-box.is-balance .row-line strong{ color:rgba(255,255,255,.85); }
.cart-summary-box.is-summary{
  text-align:left;
  max-width:520px;
  margin:3rem auto 0;
}

/* Compact items list in summary */
.checkout-mini-items{
  display:flex; flex-direction:column; gap:1rem;
  margin-bottom:1.25rem;
  padding-bottom:1.25rem;
  border-bottom:1px solid var(--us-line);
}
.checkout-mini-item{
  display:flex; gap:.85rem;
  font-size:.85rem;
}
.checkout-mini-item img{
  width:60px; aspect-ratio:3/4; object-fit:cover;
  border-radius:var(--us-btn-radius-sm);
  background:var(--us-bg-soft);
  flex:none;
}
.checkout-mini-item__body{ flex:1; min-width:0; }
.checkout-mini-item__brand{
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--us-ink-3);
}
.checkout-mini-item__title{ font-weight:500; }
.checkout-mini-item__attrs{ font-size:.75rem; color:var(--us-ink-3); margin-top:.15rem; }
.checkout-mini-item__price{ font-weight:600; white-space:nowrap; }

@media(max-width:768px){
  .checkout-mini-item{
    display:grid;
    grid-template-columns:60px minmax(0,1fr);
    gap:.75rem .85rem;
  }
  .checkout-mini-item img{
    grid-row:1 / span 2;
    width:60px;
  }
  .checkout-mini-item__price{
    grid-column:2; grid-row:1;
    text-align:left;
    font-size:1rem;
  }
  .checkout-mini-item__body{ grid-column:2; grid-row:2; }
}

/* ===========================================================
   ORDER SUCCESS / THANK YOU
   =========================================================== */
.success-page{
  padding:5rem 0;
  text-align:center;
  max-width:680px;
  margin:0 auto;
}
.success-page__icon{
  width:96px; height:96px;
  border-radius:50%;
  background:var(--us-accent);
  color:var(--us-accent-ink);
  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:2rem;
}
.success-page__icon .icon{ width:48px; height:48px; stroke-width:2; }
.success-page h1{
  font-size:clamp(2rem, 4vw, 3rem);
  margin:0 0 1rem;
}
.success-page__order{
  display:inline-block;
  padding:.4rem 1rem;
  background:var(--us-bg-soft);
  border-radius:var(--us-btn-radius-sm);
  font-family:monospace;
  font-size:1rem;
  color:var(--us-ink);
  margin:.5rem 0 1.5rem;
}
.success-page p{ color:var(--us-ink-2); font-size:1.05rem; margin:0 0 1.5rem; }
.success-page__actions{
  display:flex; gap:.75rem; justify-content:center;
  margin:2rem 0;
  flex-wrap:wrap;
}

/* ===========================================================
   AUTH PAGES (login / register / forgot)
   =========================================================== */
.auth-page{
  min-height:calc(100vh - var(--us-header-h) - var(--us-topbar-h));
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch;
}
@media(max-width:992px){
  .auth-page{ grid-template-columns:minmax(0,1fr); }
}
.auth-page__visual{
  background:var(--us-bg-soft);
  position:relative;
  overflow:hidden;
}
@media(max-width:992px){ .auth-page__visual{ display:none; } }
.auth-page__visual img{
  width:100%; height:100%; object-fit:cover;
}
.auth-page__visual::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.5) 100%);
}
.auth-page__visual-copy{
  position:absolute; left:3rem; bottom:3rem; right:3rem;
  z-index:2;
  color:#fff;
}
.auth-page__visual-copy .eyebrow{ color:rgba(255,255,255,.85); display:block; margin-bottom:.5rem; }
.auth-page__visual-copy h2{
  color:#fff;
  font-size:clamp(1.5rem, 3vw, 2.25rem);
  letter-spacing:-.01em;
}

.auth-page__form{
  padding:3.5rem 3rem;
  display:flex; flex-direction:column; justify-content:center;
  max-width:520px;
  width:100%;
  margin:0 auto;
}
.auth-page__form h1{
  font-size:clamp(1.75rem, 3vw, 2.25rem);
  margin:0 0 .5rem;
}
.auth-page__form > p{
  color:var(--us-ink-2);
  margin:0 0 2rem;
}
.auth-page__divider{
  display:flex; align-items:center; gap:1rem;
  margin:1.5rem 0;
  font-size:.78rem; color:var(--us-ink-3);
  text-transform:uppercase; letter-spacing:.1em;
}
.auth-page__divider::before,
.auth-page__divider::after{
  content:""; flex:1; height:1px; background:var(--us-line);
}
.auth-social{
  display:flex; gap:.5rem;
}
.auth-social button{
  flex:1;
  padding:.85rem;
  border:1px solid var(--us-line);
  border-radius:var(--us-btn-radius);
  background:var(--us-bg-elevated);
  color:var(--us-ink);
  font-weight:600; font-size:.85rem;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  transition:border-color .2s;
}
.auth-social button:hover{ border-color:var(--us-ink); }
.auth-page__footer{
  margin-top:2rem;
  text-align:center;
  font-size:.88rem;
  color:var(--us-ink-2);
}
.auth-page__footer a{
  color:var(--us-ink); font-weight:600;
  text-decoration:underline;
}

/* ===========================================================
   404 PAGE
   =========================================================== */
.error-page{
  padding:5rem 0;
  text-align:center;
  max-width:680px;
  margin:0 auto;
}
.error-page__code{
  font-family:var(--us-font-logo);
  font-size:clamp(6rem, 16vw, 12rem);
  line-height:1;
  color:var(--us-ink);
  letter-spacing:-.04em;
  margin-bottom:1rem;
}
.error-page__code .logo-dot{ font-size:1.2em; }
.error-page h1{
  font-size:clamp(1.5rem, 3vw, 2.25rem);
  margin:0 0 1rem;
}
.error-page p{ color:var(--us-ink-2); font-size:1.05rem; margin:0 0 2rem; }

/* ===========================================================
   ACCOUNT LAYOUT (dashboard, orders, favorites, settings, etc.)
   =========================================================== */
.account-page{ padding:2rem 0 5rem; }
.account-page__head{ margin-bottom:2rem; }
.account-page__head h1{ font-size:clamp(1.75rem, 3vw, 2.5rem); margin:0; }
.account-page__head p{ color:var(--us-ink-2); margin:.5rem 0 0; }

.account-grid{
  display:grid;
  grid-template-columns:260px minmax(0, 1fr);
  gap:2.5rem;
  align-items:start;
}
.account-grid > * { min-width:0; }
@media(max-width:992px){
  .account-grid{ grid-template-columns:minmax(0,1fr); gap:1.5rem; }
}

.account-sidebar{
  position:sticky;
  top:calc(var(--us-header-h) + var(--us-topbar-h) + 1rem);
  background:var(--us-bg-elevated);
  border:1px solid var(--us-line);
  border-radius:var(--us-card-radius);
  overflow:hidden;
}
@media(max-width:992px){
  .account-sidebar{
    position:static;
    top:auto;
  }
  .account-sidebar nav{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
    padding:0;
  }
  .account-sidebar.is-expanded nav{
    max-height:600px;
    padding:.75rem 0;
  }
}
.account-sidebar__user{
  padding:1.5rem;
  display:flex; align-items:center; gap:.85rem;
  border-bottom:1px solid var(--us-line);
}
.account-sidebar__user-info{ flex:1; min-width:0; }
.account-sidebar__toggle{
  display:inline-flex;
  width:36px; height:36px;
  border:1px solid var(--us-line);
  background:var(--us-bg);
  border-radius:50%;
  align-items:center; justify-content:center;
  color:var(--us-ink);
  cursor:pointer;
  flex:none;
  transition:background .2s, transform .25s;
}
@media(min-width:993px){
  .account-sidebar__toggle{ display:none; }
}
.account-sidebar__toggle .icon{ width:16px; height:16px; transition:transform .25s; }
.account-sidebar.is-expanded .account-sidebar__toggle .icon{ transform:rotate(180deg); }
.account-sidebar__toggle:hover{ background:var(--us-bg-soft); }
.account-sidebar__avatar{
  width:48px; height:48px;
  border-radius:50%;
  background:var(--us-accent);
  color:var(--us-accent-ink);
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700;
  flex:none;
}
.account-sidebar__name{ font-weight:600; font-size:.95rem; }
.account-sidebar__email{ font-size:.78rem; color:var(--us-ink-3); }

.account-sidebar nav{
  display:flex; flex-direction:column;
  padding:.75rem 0;
}
.account-sidebar nav a{
  display:flex; align-items:center; gap:.85rem;
  padding:.85rem 1.5rem;
  color:var(--us-ink-2);
  font-size:.92rem; font-weight:500;
  text-decoration:none;
  border-left:2px solid transparent;
  transition:background .15s, color .15s, border-color .15s;
}
.account-sidebar nav a .icon{ width:18px; height:18px; flex:none; }
.account-sidebar nav a:hover{ background:var(--us-bg-soft); color:var(--us-ink); }
.account-sidebar nav a.is-active{
  color:var(--us-ink);
  background:var(--us-bg-soft);
  border-left-color:var(--us-ink);
  font-weight:600;
}
.account-sidebar nav a .badge-num{
  margin-left:auto;
  background:var(--us-bg-soft);
  font-size:.7rem; padding:.15rem .45rem;
  border-radius:999px;
  color:var(--us-ink-3); font-weight:600;
}
.account-sidebar nav a.is-active .badge-num{ background:var(--us-ink); color:var(--us-ink-inverse); }
.account-sidebar nav .divider{
  margin:.5rem 1.5rem;
  height:1px; background:var(--us-line);
}
.account-sidebar nav a.logout{ color:var(--us-ink-3); }
.account-sidebar nav a.logout:hover{ color:var(--us-promo); }

/* Stats cards on dashboard */
.account-stats{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1rem;
  margin-bottom:2.5rem;
}
@media(max-width:992px){ .account-stats{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.account-stat{
  padding:1.25rem 1.5rem;
  background:var(--us-bg-elevated);
  border:1px solid var(--us-line);
  border-radius:var(--us-card-radius);
}
.account-stat__label{
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--us-ink-3); font-weight:600;
}
.account-stat__value{
  font-size:1.65rem; font-weight:700;
  margin-top:.25rem;
}
.account-stat__sub{
  font-size:.78rem; color:var(--us-ink-3);
  margin-top:.15rem;
}
.account-stat.accent{
  background:color-mix(in srgb, var(--us-accent) 12%, transparent);
  border-color:var(--us-accent);
}
.account-stat.accent .account-stat__value{ color:var(--us-ink); }

/* Section subhead */
.account-subhead{
  display:flex; justify-content:space-between; align-items:end;
  margin-bottom:1.25rem;
  margin-top:2.5rem;
}
.account-subhead h2{ font-size:1.25rem; margin:0; }

/* Order list */
.order-list{ display:flex; flex-direction:column; gap:1rem; }
.order-card{
  background:var(--us-bg-elevated);
  border:1px solid var(--us-line);
  border-radius:var(--us-card-radius);
  padding:1.25rem 1.5rem;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:1rem;
  align-items:center;
}
.order-card__head{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  margin-bottom:.85rem;
}
.order-card__num{
  font-family:monospace; font-size:.85rem; font-weight:600;
  color:var(--us-ink);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .2s;
}
a.order-card__num:hover{ border-bottom-color:var(--us-ink); }
.order-card__date{ font-size:.78rem; color:var(--us-ink-3); }
.order-card__status{
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:700;
  padding:.3rem .55rem;
  border-radius:var(--us-btn-radius-sm);
}
.order-card__status.delivered{ background:color-mix(in srgb, var(--us-success) 18%, transparent); color:var(--us-success); }
.order-card__status.shipping{ background:color-mix(in srgb, var(--us-accent) 18%, transparent); color:var(--us-ink); }
.order-card__status.pending{ background:var(--us-bg-soft); color:var(--us-ink-2); }
.order-card__status.cancelled{ background:color-mix(in srgb, var(--us-promo) 12%, transparent); color:var(--us-promo); }

.order-card__items{
  display:flex; gap:.5rem; margin-bottom:.5rem;
}
.order-card__items img{
  width:48px; height:60px; object-fit:cover;
  border-radius:var(--us-btn-radius-sm);
  background:var(--us-bg-soft);
  border:1px solid var(--us-line);
}
.order-card__items .more{
  width:48px; height:60px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--us-bg-soft);
  border:1px solid var(--us-line);
  border-radius:var(--us-btn-radius-sm);
  font-size:.78rem; font-weight:600; color:var(--us-ink-2);
}
.order-card__price{
  text-align:right;
}
.order-card__price .total{ font-size:1.1rem; font-weight:700; }
.order-card__price .meta{ font-size:.78rem; color:var(--us-ink-3); margin-top:.2rem; }

/* ===========================================================
   SEARCH RESULTS
   =========================================================== */
.search-results-page{ padding:2rem 0 5rem; }
.search-results-page__head{
  margin-bottom:2rem;
}
.search-results-page__head h1{
  font-size:clamp(1.5rem, 2.6vw, 2rem);
  margin:0;
}
.search-results-page__query{ color:var(--us-ink); }
.search-results-page__count{
  font-size:.92rem; color:var(--us-ink-2); margin-top:.5rem;
}

/* tabs above results */
.search-tabs{
  display:flex; gap:1.5rem;
  border-bottom:1px solid var(--us-line);
  margin-bottom:2rem;
  flex-wrap:wrap;
}
.search-tabs a{
  display:inline-flex; align-items:baseline; gap:.4rem;
  padding:.85rem 0;
  font-size:.85rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--us-ink-3);
  border-bottom:2px solid transparent;
  transition:color .2s, border-color .2s;
}
.search-tabs a:hover{ color:var(--us-ink); }
.search-tabs a.is-active{ color:var(--us-ink); border-bottom-color:var(--us-ink); }
.search-tabs a .badge-num{
  font-size:.7rem; padding:.1rem .4rem;
  background:var(--us-bg-soft);
  border-radius:999px;
  font-weight:600; letter-spacing:0;
}

/* ===========================================================
   BRANDS / BOUTIQUES INDEX + STOREFRONT
   =========================================================== */
.brands-index{ padding:2rem 0 5rem; }
.brands-az{
  display:flex; gap:.35rem; flex-wrap:wrap;
  padding:1.25rem 0;
  border-top:1px solid var(--us-line);
  border-bottom:1px solid var(--us-line);
  margin-bottom:2.5rem;
  align-items:center;
}
.brands-az span{
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--us-ink-3); font-weight:600; margin-right:.5rem;
}
.brands-az a{
  width:32px; height:32px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--us-line);
  border-radius:var(--us-btn-radius-sm);
  font-size:.85rem; font-weight:600;
  color:var(--us-ink);
}
.brands-az a:hover{ background:var(--us-bg-soft); border-color:var(--us-ink); }
.brands-az a.is-active{ background:var(--us-ink); color:var(--us-ink-inverse); border-color:var(--us-ink); }
.brands-az a.is-disabled{ color:var(--us-ink-3); pointer-events:none; }

.brands-letter-section{
  margin-bottom:3rem;
}
.brands-letter-section h2{
  font-family:var(--us-font-logo);
  font-size:3rem;
  margin:0 0 1rem;
  line-height:1;
}
.brands-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:.5rem 2rem;
}
@media(max-width:768px){ .brands-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.brands-grid a{
  display:flex; justify-content:space-between; align-items:center;
  padding:.85rem 0;
  border-bottom:1px solid var(--us-line);
  font-size:.95rem; font-weight:500;
  color:var(--us-ink);
  transition:color .2s;
}
.brands-grid a:hover{ color:var(--us-ink-2); }
.brands-grid a span{ font-size:.78rem; color:var(--us-ink-3); }

/* Boutique storefront hero */
.boutique-hero{
  position:relative;
  height:280px;
  background:var(--us-bg-soft);
  overflow:hidden;
  margin-bottom:5rem;
}
.boutique-hero img{ width:100%; height:100%; object-fit:cover; }
.boutique-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.5) 100%);
}
.boutique-info-card{
  position:absolute;
  left:50%; bottom:-3rem;
  transform:translateX(-50%);
  width:90%; max-width:760px;
  background:var(--us-bg-elevated);
  border:1px solid var(--us-line);
  border-radius:var(--us-card-radius);
  padding:2rem;
  display:flex; gap:1.5rem; align-items:center;
  z-index:2;
  box-shadow:0 10px 40px -20px rgba(0,0,0,.3);
}
.boutique-info-card__avatar{
  width:80px; height:80px;
  border-radius:50%;
  background:var(--us-bg-soft);
  border:1px solid var(--us-line);
  display:inline-flex; align-items:center; justify-content:center;
  flex:none;
  font-family:var(--us-font-logo);
  font-size:1.5rem;
}
.boutique-info-card__body{ flex:1; min-width:0; }
.boutique-info-card h1{ margin:0; font-size:1.65rem; }
.boutique-info-card .meta{ font-size:.85rem; color:var(--us-ink-2); margin-top:.25rem; }
.boutique-info-card .meta span{ display:inline-flex; align-items:center; gap:.3rem; margin-right:1rem; }
.boutique-info-card .meta .icon{ width:14px; height:14px; }

/* ===========================================================
   STATIC INFO PAGES (about, delivery, payment, legal, etc.)
   =========================================================== */
.info-page{ padding:3rem 0 5rem; }
.info-hero{ text-align:center; max-width:760px; margin:0 auto 3rem; }
.info-hero h1{ font-size:clamp(2rem, 4vw, 3rem); margin:.5rem 0 1rem; }
.info-hero p{ color:var(--us-ink-2); font-size:1.1rem; line-height:1.5; }

.info-content{
  max-width:760px;
  margin:0 auto;
  font-size:1.05rem;
  line-height:1.75;
  color:var(--us-ink);
}
.info-content h2{ font-size:1.5rem; margin:2.5rem 0 1rem; }
.info-content h3{ font-size:1.15rem; margin:1.75rem 0 .75rem; }
.info-content p{ margin:0 0 1.25rem; color:var(--us-ink-2); }
.info-content ul, .info-content ol{ margin:0 0 1.25rem; padding-left:1.5rem; color:var(--us-ink-2); }
.info-content li{ margin-bottom:.5rem; }
.info-content table{
  width:100%; border-collapse:collapse; margin:1.5rem 0;
  border:1px solid var(--us-line); border-radius:var(--us-card-radius); overflow:hidden;
}
.info-content th, .info-content td{
  padding:.85rem 1rem;
  border-bottom:1px solid var(--us-line);
  text-align:left;
}
.info-content thead{ background:var(--us-bg-soft); }
.info-content th{ font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--us-ink); }

/* About — split sections */
.about-stats{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1rem;
  margin:3rem 0;
}
@media(max-width:768px){ .about-stats{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.about-stat{
  text-align:center;
  padding:2rem 1rem;
  background:var(--us-bg-soft);
  border-radius:var(--us-card-radius);
}
.about-stat__num{
  font-size:2.5rem; font-weight:700;
  color:var(--us-ink);
  line-height:1;
}
.about-stat__label{
  font-size:.78rem; color:var(--us-ink-3);
  letter-spacing:.04em;
  margin-top:.5rem;
}

/* Team grid */
.team-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1.5rem;
  margin-top:2rem;
}
@media(max-width:768px){ .team-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.team-member__photo{
  aspect-ratio:1/1;
  border-radius:var(--us-card-radius);
  background:var(--us-bg-soft);
  margin-bottom:1rem;
  overflow:hidden;
}
.team-member__photo img{ width:100%; height:100%; object-fit:cover; }
.team-member__name{ font-weight:600; font-size:1rem; }
.team-member__role{ font-size:.82rem; color:var(--us-ink-3); }

/* Contacts grid */
.contacts-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:3rem;
  margin-top:2rem;
}
@media(max-width:768px){ .contacts-grid{ grid-template-columns:minmax(0,1fr); } }
.contact-info-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:1.5rem; }
.contact-info-list li{ display:flex; align-items:flex-start; gap:1rem; }
.contact-info-list .icon-wrap{
  width:44px; height:44px; flex:none;
  background:var(--us-bg-soft);
  border-radius:var(--us-btn-radius-sm);
  display:inline-flex; align-items:center; justify-content:center;
}
.contact-info-list h6{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; margin:0 0 .25rem; }
.contact-info-list p{ margin:0; color:var(--us-ink-2); font-size:.95rem; line-height:1.5; }

.contact-map{
  aspect-ratio:4/3;
  background:var(--us-bg-soft);
  border-radius:var(--us-card-radius);
  display:flex; align-items:center; justify-content:center;
  color:var(--us-ink-3);
  border:1px solid var(--us-line);
}

/* ===========================================================
   TENANT LANDING (sell on ua.style)
   =========================================================== */
.tenant-hero{
  position:relative;
  min-height:80vh;
  display:flex; align-items:center;
  background:var(--us-static-dark);
  color:var(--us-static-dark-ink);
  overflow:hidden;
}
.tenant-hero__bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:.35;
}
.tenant-hero__content{
  position:relative; z-index:2;
  max-width:760px;
  padding:5rem 0;
}
.tenant-hero h1{
  font-size:clamp(2.5rem, 6vw, 5rem);
  line-height:1;
  letter-spacing:-.03em;
  margin:.5rem 0 1.5rem;
  color:#fff;
}
.tenant-hero h1 span{ color:var(--us-accent); }
.tenant-hero__lead{
  font-size:1.2rem; line-height:1.5;
  color:rgba(255,255,255,.8);
  max-width:560px;
  margin-bottom:2rem;
}
.tenant-hero__cta{ display:flex; gap:.75rem; flex-wrap:wrap; }

.tenant-stats{
  background:var(--us-bg-soft);
  padding:3rem 0;
  border-bottom:1px solid var(--us-line);
}
.tenant-stats__grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:0;
}
@media(max-width:768px){ .tenant-stats__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:2rem 0; } }
.tenant-stat{
  text-align:center;
  padding:1rem 1.5rem;
  border-right:1px solid var(--us-line);
}
.tenant-stat:last-child{ border-right:0; }
.tenant-stat__num{
  font-size:clamp(2rem, 4vw, 3rem);
  font-weight:700;
  color:var(--us-ink);
  line-height:1;
}
.tenant-stat__label{
  font-size:.78rem; color:var(--us-ink-3);
  letter-spacing:.04em;
  margin-top:.5rem;
}

.tenant-section{ padding:5rem 0; }
.tenant-section h2{
  font-size:clamp(1.75rem, 3vw, 2.5rem);
  margin:.25rem 0 2rem;
}

.tenant-steps{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:2rem;
  position:relative;
}
@media(max-width:768px){ .tenant-steps{ grid-template-columns:minmax(0,1fr); } }
.tenant-step{
  position:relative;
}
.tenant-step__num{
  font-family:var(--us-font-logo);
  font-size:5rem;
  line-height:1;
  color:var(--us-accent);
  margin-bottom:.5rem;
}
.tenant-step h3{ font-size:1.15rem; margin:0 0 .5rem; }
.tenant-step p{ font-size:.92rem; color:var(--us-ink-2); margin:0; line-height:1.5; }

.tenant-features{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1rem;
}
@media(max-width:768px){ .tenant-features{ grid-template-columns:minmax(0,1fr); } }
.tenant-feature{
  padding:1.75rem;
  background:var(--us-bg-elevated);
  border:1px solid var(--us-line);
  border-radius:var(--us-card-radius);
  transition:border-color .25s, transform .25s;
}
.tenant-feature:hover{ border-color:var(--us-card-border-hover); transform:translateY(-3px); }
.tenant-feature .icon-wrap{
  width:48px; height:48px;
  background:var(--us-bg-soft);
  border-radius:var(--us-btn-radius);
  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:1rem;
}
.tenant-feature .icon-wrap .icon{ width:24px; height:24px; }
.tenant-feature h3{ font-size:1rem; margin:0 0 .35rem; }
.tenant-feature p{ font-size:.88rem; color:var(--us-ink-2); margin:0; line-height:1.5; }

/* Pricing */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1.25rem;
}
@media(max-width:768px){ .pricing-grid{ grid-template-columns:minmax(0,1fr); } }
.pricing-card{
  padding:2.5rem 2rem;
  background:var(--us-bg-elevated);
  border:1px solid var(--us-line);
  border-radius:var(--us-card-radius);
  display:flex; flex-direction:column;
}
.pricing-card.is-popular{
  border:2px solid var(--us-accent);
  position:relative;
}
.pricing-card.is-popular::before{
  content:"Популярный";
  position:absolute;
  top:-12px; left:50%; transform:translateX(-50%);
  background:var(--us-accent);
  color:var(--us-accent-ink);
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700;
  padding:.4rem .85rem;
  border-radius:var(--us-btn-radius-sm);
}
.pricing-card__name{
  font-size:.85rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; color:var(--us-ink);
}
.pricing-card__price{
  font-size:2.5rem; font-weight:700;
  margin:1rem 0;
  line-height:1;
}
.pricing-card__price small{ font-size:.95rem; font-weight:500; color:var(--us-ink-3); }
.pricing-card__features{
  list-style:none; padding:0; margin:1.5rem 0;
  display:flex; flex-direction:column; gap:.65rem;
  flex:1;
}
.pricing-card__features li{
  display:flex; align-items:center; gap:.5rem;
  font-size:.9rem; color:var(--us-ink-2);
}
.pricing-card__features .icon{ width:14px; height:14px; color:var(--us-success); flex:none; }

/* Testimonials */
.testimonials-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1.5rem;
}
@media(max-width:768px){ .testimonials-grid{ grid-template-columns:minmax(0,1fr); } }
.testimonial-card{
  padding:2rem;
  background:var(--us-bg-soft);
  border-radius:var(--us-card-radius);
}
.testimonial-card__quote{
  font-size:1.05rem;
  line-height:1.6;
  font-style:italic;
  color:var(--us-ink);
  margin-bottom:1.5rem;
}
.testimonial-card__author{
  display:flex; align-items:center; gap:.85rem;
}
.testimonial-card__avatar{
  width:48px; height:48px;
  border-radius:50%;
  background:var(--us-accent);
  color:var(--us-accent-ink);
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700;
  flex:none;
}
.testimonial-card__name{ font-weight:600; font-size:.92rem; }
.testimonial-card__role{ font-size:.78rem; color:var(--us-ink-3); }

/* Final CTA form */
.tenant-final-cta{
  background:var(--us-static-dark);
  color:var(--us-static-dark-ink);
  padding:5rem 0;
}
.tenant-final-cta h2{ color:#fff; text-align:center; }
.tenant-final-cta p{ text-align:center; color:rgba(255,255,255,.7); max-width:560px; margin:0 auto 2rem; }
.tenant-final-cta form{
  max-width:560px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:.75rem;
}
.tenant-final-cta input{
  padding:1rem 1.25rem;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2);
  border-radius:var(--us-btn-radius);
  color:#fff;
  font-family:var(--us-font-sans);
}
.tenant-final-cta input::placeholder{ color:rgba(255,255,255,.5); }
.tenant-final-cta input:focus{ outline:none; border-color:var(--us-accent); }
.tenant-final-cta input.span-2,
.tenant-final-cta button.span-2{ grid-column:1 / -1; }
@media(max-width:576px){ .tenant-final-cta form{ grid-template-columns:minmax(0,1fr); } }

/* ===========================================================
   CAREERS PAGE
   =========================================================== */
.jobs-list{ display:flex; flex-direction:column; gap:.75rem; }
.job-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:1.5rem;
  align-items:center;
  padding:1.5rem 1.75rem;
  background:var(--us-bg-elevated);
  border:1px solid var(--us-line);
  border-radius:var(--us-card-radius);
  transition:border-color .25s, transform .2s;
  text-decoration:none;
  color:inherit;
}
.job-card:hover{ border-color:var(--us-ink); transform:translateY(-2px); }
.job-card__title{ font-size:1.1rem; font-weight:600; margin:0 0 .25rem; }
.job-card__meta{ font-size:.85rem; color:var(--us-ink-3); }
.job-card__meta span{ margin-right:1rem; }
.job-card__dept{
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; color:var(--us-ink);
  background:var(--us-bg-soft);
  padding:.4rem .65rem;
  border-radius:var(--us-btn-radius-sm);
}
.job-card .icon-arrow{
  width:32px; height:32px;
  border:1px solid var(--us-line);
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .2s, color .2s;
}
.job-card:hover .icon-arrow{ background:var(--us-ink); color:var(--us-ink-inverse); border-color:var(--us-ink); }

.dept-filter{
  display:flex; gap:.5rem; flex-wrap:wrap;
  margin-bottom:2rem;
  padding:1.25rem 0;
  border-top:1px solid var(--us-line);
  border-bottom:1px solid var(--us-line);
}
.dept-filter button{
  padding:.5rem 1rem;
  background:transparent;
  border:1px solid var(--us-line);
  border-radius:999px;
  font-size:.78rem; font-weight:600;
  color:var(--us-ink);
  cursor:pointer;
  transition:border-color .2s, background .2s;
}
.dept-filter button:hover{ border-color:var(--us-ink); }
.dept-filter button.is-active{ background:var(--us-ink); color:var(--us-ink-inverse); border-color:var(--us-ink); }

/* ===========================================================
   RESPONSIVE FIXES (mobile polish)
   =========================================================== */

/* Boutique storefront — fix absolute info card on mobile */
@media(max-width:768px){
  .boutique-hero{ height:200px; margin-bottom:7rem; }
  .boutique-info-card{
    position:absolute;
    left:1rem; right:1rem; bottom:-6rem;
    transform:none;
    width:auto; max-width:none;
    padding:1.25rem;
    flex-direction:column;
    align-items:flex-start;
    gap:1rem;
    text-align:left;
  }
  .boutique-info-card__avatar{ width:56px; height:56px; font-size:1.1rem; }
  .boutique-info-card h1{ font-size:1.25rem; }
  .boutique-info-card .meta{ font-size:.78rem; }
  .boutique-info-card .meta span{ display:block; margin-right:0; margin-bottom:.2rem; }
  .boutique-info-card .btn{ width:100%; }
}

/* Tenant landing — mobile compression */
@media(max-width:768px){
  .tenant-hero{ min-height:60vh; }
  .tenant-hero__content{ padding:3rem 0; }
  .tenant-hero h1{ font-size:clamp(2rem, 9vw, 3.5rem); }
  .tenant-hero__lead{ font-size:1rem; }
  .tenant-stats{ padding:2rem 0; }
  .tenant-stat{ padding:.75rem 1rem; }
  .tenant-section{ padding:3rem 0; }
  .tenant-step__num{ font-size:3.5rem; }
}
@media(max-width:576px){
  .tenant-final-cta{ padding:3rem 0; }
}

/* Account bonuses — balance card on mobile */
@media(max-width:768px){
  .cart-summary-box[style*="background:var(--us-static-dark)"]{
    padding:2rem 1.25rem !important;
  }
  .cart-summary-box[style*="background:var(--us-static-dark)"] > div[style*="font-size:4rem"]{
    font-size:3rem !important;
  }
  .cart-summary-box[style*="background:var(--us-static-dark)"] .account-stats{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:.5rem !important;
  }
  .cart-summary-box[style*="background:var(--us-static-dark)"] .account-stats > div > div:first-child{
    font-size:1.1rem !important;
  }
}

/* Order card — mobile stacking */
@media(max-width:768px){
  .order-card{
    grid-template-columns:minmax(0,1fr);
    gap:1rem;
  }
  .order-card__price{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    text-align:left;
    border-top:1px solid var(--us-line);
    padding-top:1rem;
    gap:.85rem;
  }
  .order-card__price .total{ flex:1; }
  .order-card__price .meta{ display:none; }
  .order-card__price .btn-link-arrow{ margin:0; flex:none; }
  .order-card__head{ gap:.5rem; }
  .order-card__head .order-card__num{ width:auto; }
}

/* Brands A-Z — mobile chip row */
@media(max-width:768px){
  .brands-az{ overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
  .brands-az::-webkit-scrollbar{ display:none; }
  .brands-az span{ flex:none; }
  .brands-az a{ flex:none; }
  .brands-letter-section h2{ font-size:2rem; }
  .brands-grid{ grid-template-columns:minmax(0,1fr); }
}

/* Careers — job card mobile stacking */
@media(max-width:768px){
  .job-card{
    grid-template-columns:minmax(0,1fr);
    gap:1rem;
    padding:1.25rem 1.5rem;
  }
  .job-card__dept{ justify-self:start; }
  .job-card .icon-arrow{ display:none; }
  .dept-filter{ overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
  .dept-filter::-webkit-scrollbar{ display:none; }
  .dept-filter button{ flex:none; }
}

/* Pagination wrap on mobile */
@media(max-width:576px){
  .kit-pagination{ flex-wrap:wrap; gap:.25rem; }
  .kit-page{ min-width:36px; height:36px; font-size:.8rem; }
}

/* Review card mobile head */
@media(max-width:576px){
  .review-card{ padding:1.25rem; }
  .review-card__head{ flex-wrap:wrap; gap:.6rem; }
  .review-card__stars{ margin-left:0; width:100%; }
}

/* PDP CTA mobile */
@media(max-width:576px){
  .pdp-cta .btn-primary{ font-size:.78rem; padding:1rem; }
  .pdp-cta .btn-icon{ width:48px; height:48px; }
}

/* Mobile filter drawer (catalog) */
.catalog-sidebar.is-mobile-open{
  display:block !important;
  position:fixed; left:0; top:0; bottom:0; right:0;
  z-index:1050;
  background:var(--us-bg);
  overflow-y:auto;
  padding:1.25rem;
  max-height:100vh;
}
.catalog-sidebar.is-mobile-open .kit-filters{
  border:0; padding:0;
}
.catalog-sidebar__close{
  position:sticky; top:0;
  display:none;
  align-items:center; justify-content:space-between;
  padding:.5rem 0 1rem;
  background:var(--us-bg);
  border-bottom:1px solid var(--us-line);
  margin-bottom:1.25rem;
  z-index:2;
}
.catalog-sidebar.is-mobile-open .catalog-sidebar__close{ display:flex; }
.catalog-sidebar__close h6{
  font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; margin:0;
}

/* ===========================================================
   SEARCH CONTENT BLOCKS (reccms search_contents)
   =========================================================== */
.search-content-block{
  margin:0 0 2.5rem;
  padding:1.75rem 2rem;
  background:var(--us-bg-soft);
  border-left:3px solid var(--us-accent);
  border-radius:var(--us-card-radius);
}
.search-content-block h2{
  font-size:1.35rem;
  margin:0 0 .85rem;
  letter-spacing:-.005em;
}
.search-content-block p{
  margin:0 0 .85rem;
  color:var(--us-ink-2);
  line-height:1.65;
  font-size:.95rem;
}
.search-content-block p:last-child{ margin-bottom:0; }
.search-content-block a{
  color:var(--us-ink);
  text-decoration:underline;
  text-underline-offset:3px;
}
.search-content-block--after{
  margin-top:3rem;
  margin-bottom:3rem;
}


/* ===========================================================
   COMPARE TABLE — fixed product image cells
   =========================================================== */
.compare-table{
  width:100%;
  table-layout:fixed;
  min-width:760px;
}
.compare-table thead th{
  width:25%;
  vertical-align:top;
  padding:1rem;
}
.compare-table thead th:first-child{ width:160px; }
.compare-table .compare-thumb{
  width:160px;
  aspect-ratio:3/4;
  margin:0 auto 1rem;
  background:var(--us-bg-soft);
  border-radius:var(--us-card-radius);
  overflow:hidden;
  position:relative;
}
.compare-table .compare-thumb img{
  width:100%; height:100%;
  object-fit:cover;
}
.compare-table .compare-thumb__remove{
  position:absolute;
  right:.4rem; top:.4rem;
  width:28px; height:28px;
  border-radius:50%;
  background:var(--us-bg-elevated);
  border:0;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--us-ink);
  cursor:pointer;
  z-index:2;
}
.compare-table .compare-thumb__remove:hover{ background:var(--us-promo); color:#fff; }
.compare-table .compare-thumb__remove .icon{ width:14px; height:14px; }
.compare-table thead a{
  display:block;
  font-weight:600;
  color:var(--us-ink);
  text-decoration:none;
  margin-top:.5rem;
}
.compare-table thead .price{
  font-size:1.15rem;
  font-weight:700;
  margin-top:.5rem;
  display:block;
}
@media(max-width:768px){
  .compare-table thead th:first-child{ width:120px; }
  .compare-table .compare-thumb{ width:120px; }
}

/* ===========================================================
   LIGHTBOX (image zoom modal — used on PDP)
   =========================================================== */
.lightbox{
  position:fixed; inset:0;
  background:rgba(0,0,0,.92);
  z-index:1080;
  display:none;
  align-items:center; justify-content:center;
  padding:2rem;
}
.lightbox.is-open{ display:flex; animation:lb-fade .2s ease; }
@keyframes lb-fade{ from{opacity:0} to{opacity:1} }
.lightbox__img{
  max-width:100%; max-height:100%;
  object-fit:contain;
  border-radius:var(--us-card-radius);
  cursor:zoom-out;
}
.lightbox__close,
.lightbox__nav{
  position:absolute;
  width:48px; height:48px;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.08);
  color:#fff;
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .2s, border-color .2s, color .2s;
}
.lightbox__close:hover,
.lightbox__nav:hover{ background:#fff; color:#0a0a0a; border-color:#fff; }
.lightbox__close{ top:2rem; right:2rem; }
.lightbox__nav.prev{ left:2rem; top:50%; transform:translateY(-50%); }
.lightbox__nav.next{ right:2rem; top:50%; transform:translateY(-50%); }
.lightbox__nav .icon, .lightbox__close .icon{ width:20px; height:20px; }
.lightbox__counter{
  position:absolute;
  bottom:2rem; left:50%; transform:translateX(-50%);
  color:#fff; font-size:.85rem; letter-spacing:.04em;
  background:rgba(0,0,0,.5);
  padding:.4rem .85rem; border-radius:999px;
}
.pdp-gallery__main{ cursor:zoom-in; }
@media(max-width:576px){
  .lightbox{ padding:1rem; }
  .lightbox__close{ top:1rem; right:1rem; width:40px; height:40px; }
  .lightbox__nav{ width:40px; height:40px; }
  .lightbox__nav.prev{ left:.5rem; }
  .lightbox__nav.next{ right:.5rem; }
}


/* ===========================================================
   UTILITY CLASSES (replace common inline styles)
   =========================================================== */
.eyebrow.is-light{ color:rgba(255,255,255,.85); }
.text-on-dark{ color:rgba(255,255,255,.85); }
.text-on-dark-muted{ color:rgba(255,255,255,.7); }
.text-success{ color:var(--us-success); }
.text-promo{ color:var(--us-promo); }
.text-link-sm{
  font-size:.78rem;
  text-decoration:underline;
  color:var(--us-ink-2);
}
.text-link-sm:hover{ color:var(--us-ink); }
.text-meta-sm{ font-size:.78rem; color:var(--us-ink-3); }
.text-meta-xs{ font-size:.85rem; color:var(--us-ink-3); }
.site-footer__brand-desc{
  color:var(--us-ink-2);
  font-size:.9rem;
  max-width:320px;
}
.is-bordered-success{ color:var(--us-success); font-weight:600; }
.text-accent{ color:var(--us-accent); }
.text-link-ink{ color:var(--us-ink); text-decoration:underline; text-underline-offset:2px; }
.text-link-ink:hover{ color:var(--us-ink-2); }
.text-underline{ text-decoration:underline; text-underline-offset:2px; }
.toast-container--app{ z-index:1090; }
.site-logo--mobile{ font-size:1.6rem; }


/* ===========================================================
   ADDITIONAL UTILITY CLASSES (replace remaining inlines)
   =========================================================== */
.tier-card{
  padding:1.5rem;
  border:1px solid var(--us-line);
  border-radius:var(--us-card-radius);
  background:var(--us-bg-elevated);
}
.tier-card.is-current{
  border:2px solid var(--us-accent);
  background:color-mix(in srgb, var(--us-accent) 10%, transparent);
}
.tier-card h6{ font-size:.85rem; }
.tier-card p{ margin:.25rem 0; }

.btn-light-on-dark{ color:#fff; border-color:#fff; }
.btn-light-on-dark:hover{ color:var(--us-static-dark); background:#fff; }

.icon-flip-x{ transform:scaleX(-1); }

.section-narrow{ max-width:560px; margin:0 auto; }
.section-narrow-wide{ max-width:680px; margin:0 auto; }

.lead-meta{ color:var(--us-ink-2); line-height:1.6; }

.success-circle-3{
  font-size:1.5rem; font-weight:700;
}

.btn-text-link{
  text-transform:none;
  letter-spacing:0;
  color:var(--us-ink-2);
  text-decoration:underline;
  font-weight:500;
}
.btn-text-link:hover{ color:var(--us-ink); }

.btn-sm-pill{ font-size:.78rem; padding:.7rem 1rem; }
.btn-sm-compact{ font-size:.78rem; padding:.7rem 1rem; }
.fs-meta-md{ font-size:.9rem; }
.fs-meta-lg{ font-size:.95rem; }
.lead-on-dark{ opacity:.85; font-size:1.05rem; }
.min-vh-60{ min-height:60vh; }
.balance-stats-3{
  margin-top:2.5rem;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1rem;
}
.balance-stat-num{ font-size:1.5rem; font-weight:700; }
.balance-big{
  font-size:4rem; font-weight:700;
  color:var(--us-accent);
  line-height:1;
}
.bg-static-dark{ background:var(--us-static-dark); }
.bg-success-strong{ background:var(--us-success); }
.bg-promo{ background:var(--us-promo); }
.bg-bg-soft{ background:var(--us-bg-soft); }
.font-mono{ font-family:monospace; }
.text-meta{ color:var(--us-ink-2); }



/* ---------- Cookie banner — Wildberries-style left slim ---------- */
.cookie-banner{
  position:fixed;
  left:1.25rem; bottom:1.25rem;
  z-index:1080;
  background:var(--us-bg-elevated);
  border:1px solid var(--us-ink);
  border-radius:var(--us-card-radius);
  padding:1.25rem 1.5rem;
  display:flex; flex-direction:column; gap:.85rem;
  box-shadow:var(--us-shadow);
  max-width:340px;
  font-size:.82rem;
}
.cookie-banner p{ margin:0; color:var(--us-ink-2); line-height:1.5; }
.cookie-banner p a{ text-decoration:underline; color:var(--us-ink); }
.cookie-banner__actions{ display:flex; gap:.5rem; }
.cookie-banner .btn{
  padding:.7rem 1rem;
  font-size:.7rem;
  flex:1;
}
.cookie-banner.is-hidden{ display:none; }

/* ---------- Floating action stack (right bottom) ---------- */
.fab-stack{
  position:fixed;
  right:1.25rem; bottom:3.65rem;
  z-index:1030;     /* below offcanvas backdrop (1040) */
  display:flex; flex-direction:column; gap:.6rem;
}
.fab{
  width:48px; height:48px;
  border-radius:50%;
  background:var(--us-ink);
  color:#fff;
  border:0;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:var(--us-shadow);
  cursor:pointer;
  transition:background .2s, transform .25s, opacity .3s;
}
.fab:hover{ background:var(--us-bg-inverse); color:var(--us-ink-inverse); transform:translateY(-2px); }
.fab .icon{ width:20px; height:20px; stroke-width:1.75; }
.fab.is-chat{ background:var(--us-bg-elevated); color:var(--us-ink); border:1px solid var(--us-line-strong); }
.fab.is-chat:hover{ background:var(--us-bg-inverse); color:var(--us-ink-inverse); }
.fab-scroll-top{ opacity:0; pointer-events:none; transform:translateY(8px); }
.fab-scroll-top.is-visible{ opacity:1; pointer-events:auto; transform:translateY(0); }

@media(max-width:576px){
  .cookie-banner{ left:.75rem; right:.75rem; max-width:none; bottom:.75rem; }
}

/* ---------- Responsive header ---------- */
.mobile-menu-btn{ display:none; }

@media (max-width:992px){
  .site-header__inner{
    display:flex;
    align-items:center;
    gap:.25rem;
    grid-template-columns:none;
  }
  .main-nav{ display:none; }
  .site-logo{ flex:0 0 auto; font-size:1.6rem; }
  .mobile-menu-btn{ display:inline-flex !important; flex:0 0 auto; }
  .header-actions{
    margin-left:auto;
    gap:0;
    flex:0 0 auto;
  }
  .header-actions .btn-icon,
  .header-actions .theme-toggle,
  .mobile-menu-btn{
    width:38px; height:38px;
  }
  .header-actions a.btn-icon[aria-label="Сравнение"]{ display:none; }
  .header-actions .btn-icon .icon,
  .header-actions .theme-toggle .icon,
  .mobile-menu-btn .icon{ width:18px; height:18px; }
  .cart-count{ top:3px; right:1px; }
}

/* Mobile menu offcanvas — make sure close button is visible */
#mobileMenu .offcanvas-header{ padding:1.25rem 1.5rem; }
#mobileMenu .offcanvas-header .btn-icon{
  display:inline-flex !important;
  margin:0 -.5rem 0 0;
  background:var(--us-bg-soft);
}

@media (max-width:576px){
  .section{ padding:3rem 0; }
  .site-logo{ font-size:1.6rem; }
  .hero .slide-content{ padding-bottom:4rem; max-width:100%; }
  .splide.product-carousel .splide__arrow{ display:none; }
  .search-suggest{ grid-template-columns:minmax(0,1fr); gap:1.5rem; }
}

/* ===========================================================
   THEME-AWARE SURFACE OVERRIDES
   Replace hardcoded #fff with theme variables.
   =========================================================== */
.site-header{ background:color-mix(in srgb, var(--us-bg) 96%, transparent); }
[data-theme="dark"] .site-header{ background:rgba(13,13,13,.92); }
.search-panel{ background:var(--us-bg-elevated); border-bottom-color:var(--us-line); box-shadow:var(--us-shadow); }
.product-card{ background:var(--us-bg); }
.product-card__media{ background:var(--us-bg-soft); }
.product-card__wishlist{ background:var(--us-bg-elevated); color:var(--us-ink); }
.product-card__quick{ background:var(--us-ink); color:var(--us-ink-inverse); }
.product-card__quick:hover{ background:var(--us-bg-inverse); }
.cat-tile{ background:var(--us-bg-soft); }
.brand-strip{ background:var(--us-bg-soft); }
.editorial-split a{ background:var(--us-bg-soft); }
.boutique-card{ background:var(--us-bg-elevated); }
.boutique-card__body{ background:var(--us-bg-elevated); }
.boutique-card:hover{ border-color:var(--us-card-border-hover); box-shadow:0 6px 24px -12px rgba(0,0,0,.18); }
.boutique-card__media{ background:var(--us-bg-soft); }
.article-card__media{ background:var(--us-bg-soft); }
.modal-content{ background:var(--us-bg-elevated); border-color:var(--us-line); color:var(--us-ink); }
.offcanvas{ background:var(--us-bg-elevated); color:var(--us-ink); }
.toast{ background:var(--us-bg-elevated); border-color:var(--us-ink); color:var(--us-ink); }
.cookie-banner{ background:var(--us-bg-elevated); border-color:var(--us-ink); color:var(--us-ink); }
.usp-strip{ background:var(--us-bg); border-top-color:var(--us-line); border-bottom-color:var(--us-line); }
.faq-section{ background:var(--us-bg-soft); }
.site-footer{ background:var(--us-bg); border-top-color:var(--us-line); }
.mega-menu{ background:var(--us-bg-elevated); border-top-color:var(--us-line); border-bottom-color:var(--us-line); }
.cart-line, .cart-line img{ border-color:var(--us-line); background:var(--us-bg-soft); }
.size-chip{ border-color:var(--us-line); }
.qty-stepper{ border-color:var(--us-line); }
.btn-icon:hover{ background:var(--us-bg-soft); }
.fab.is-chat{ background:var(--us-bg-elevated); color:var(--us-ink); border-color:var(--us-ink); }
.fab.is-chat:hover{ background:var(--us-ink); color:var(--us-ink-inverse); }
.fab{ background:var(--us-ink); color:var(--us-ink-inverse); }
.fab:hover{ background:var(--us-bg-inverse); }

/* ===========================================================
   ACCENT — лого ua.style — точка
   =========================================================== */
.site-logo{ display:inline-flex; align-items:baseline; }
.logo-dot{
  display:inline-block;
  color:var(--us-accent);
  text-shadow:0 0 0.4em color-mix(in srgb, var(--us-accent) 40%, transparent);
  transform:translateY(-.02em);
}
.site-footer__brand .logo-dot{ text-shadow:0 0 0.5em color-mix(in srgb, var(--us-accent) 45%, transparent); }

/* ===========================================================
   THEME TOGGLE button (in topbar)
   =========================================================== */
/* topbar variant — small text + icon */
.topbar .theme-toggle{
  background:none; border:0;
  display:inline-flex; align-items:center; gap:.4rem;
  color:var(--us-static-dark-ink); opacity:.85;
  font-size:.78rem; letter-spacing:.02em;
  padding:0 .4rem; cursor:pointer;
}
.topbar .theme-toggle:hover{ opacity:1; }
.topbar .theme-toggle .icon{ width:14px; height:14px; }

/* header theme-toggle inherits .btn-icon — only label visibility override */
.header-actions .theme-toggle .label-light,
.header-actions .theme-toggle .label-dark{ display:none; }

/* show/hide moon/sun across both variants */
.theme-toggle .label-light,
.theme-toggle .label-dark{ display:none; }
:root:not([data-theme="dark"]) .theme-toggle .label-dark{ display:inline; }
[data-theme="dark"] .theme-toggle .label-light{ display:inline; }
.theme-toggle .icon-sun{ display:none; }
.theme-toggle .icon-moon{ display:inline-block; }
[data-theme="dark"] .theme-toggle .icon-sun{ display:inline-block; }
[data-theme="dark"] .theme-toggle .icon-moon{ display:none; }
.header-actions .theme-toggle .label-light,
.header-actions .theme-toggle .label-dark{ display:none !important; }

/* ===========================================================
   FOOTER — bigger logo + h6 with accent bar (md-fashion style)
   =========================================================== */
.site-footer__brand{
  font-family:var(--us-font-sans);
  font-weight:800;
  font-size:1.65rem;
  line-height:1;
  letter-spacing:-.025em;
  margin-bottom:1.25rem;
  display:inline-flex; align-items:baseline;
  color:var(--us-ink);
}
.site-footer h6{
  position:relative;
  padding-left:18px;
  display:flex; align-items:center;
}
.site-footer h6::before{
  content:"";
  position:absolute;
  left:0; top:50%;
  width:10px; height:2px;
  background:var(--us-accent);
  transform:translateY(-50%);
}

/* ===========================================================
   SOCIAL ICONS — circles with hover invert
   =========================================================== */
.social-list{ display:flex; gap:.5rem; margin-top:1rem; }
.social-link{
  width:40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--us-line);
  border-radius:var(--us-btn-radius-sm);
  background:var(--us-bg);
  color:var(--us-ink);
  position:relative;
  overflow:hidden;
  transition:color .25s, border-color .25s;
}
.social-link::before{
  content:"";
  position:absolute; inset:0;
  background:var(--us-ink);
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
  z-index:0;
}
.social-link:hover,
.site-footer .social-link:hover{ color:var(--us-accent-ink); border-color:var(--us-accent); }
.social-link:hover::before{ transform:translateY(0); background:var(--us-accent); }
.social-link .icon{
  width:18px; height:18px;
  position:relative; z-index:1;
  stroke-width:1.75;
}

/* ===========================================================
   NEW COLLECTIONS slider — premium cards
   =========================================================== */
.collections-section{ padding:5rem 0; background:var(--us-bg); }
.collection-card{
  position:relative;
  display:block;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--us-bg-soft);
  border-radius:var(--us-card-radius);
}
.collection-card img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1), filter .5s;
}
.collection-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.7) 100%);
  transition:opacity .4s;
}
.collection-card__copy{
  position:absolute;
  left:1.5rem; right:1.5rem; bottom:1.5rem;
  z-index:2;
  color:#fff;
}
.collection-card__eyebrow{
  display:inline-block;
  font-size:.65rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700;
  color:var(--us-accent-ink);
  background:var(--us-accent);
  border-radius:var(--us-btn-radius-sm);
  padding:.35rem .55rem .3rem;
  margin-bottom:.85rem;
}
.collection-card__title{
  font-size:1.65rem; font-weight:700; line-height:1.1; letter-spacing:-.015em;
  margin:0 0 .35rem;
}
.collection-card__meta{
  font-size:.78rem; color:rgba(255,255,255,.85);
  margin-bottom:1rem;
}
.collection-card__cta{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#fff;
  padding-bottom:4px; border-bottom:1px solid #fff;
}
.collection-card__cta .icon{ width:14px; height:14px; transition:transform .3s; }
.collection-card:hover img{ transform:scale(1.06); }
.collection-card:hover .collection-card__cta .icon{ transform:translateX(6px); }

/* ===========================================================
   PRODUCT CARD — mouse-X hover gallery (Farfetch style)
   =========================================================== */
.product-card__media[data-gallery]{ cursor:pointer; }
.product-card__media[data-gallery] .gallery-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .15s;
}
.product-card__media[data-gallery] .gallery-img.is-active{ opacity:1; }
.gallery-dots{
  position:absolute;
  left:.75rem; right:.75rem; top:.75rem;
  display:flex; gap:4px;
  padding:6px 8px;
  border-radius:999px;
  background:rgba(10,10,10,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.18);
  z-index:3;
  opacity:0;
  transition:opacity .25s;
  pointer-events:none;
}
.product-card:hover .gallery-dots{ opacity:1; }
.gallery-dots span{
  flex:1; height:2px;
  background:rgba(255,255,255,.4);
  transition:background .15s;
}
.gallery-dots span.is-active{ background:#fff; }

/* ===========================================================
   PRODUCT CARD title — keep clamp, but as <a> link
   =========================================================== */
a.product-card__title{
  color:var(--us-ink);
  text-decoration:none;
}
a.product-card__title:hover{ color:var(--us-ink-2); }

/* clickable brand & tenant — must be above stretched-link */
a.product-card__brand,
a.product-card__tenant{
  position:relative;
  z-index:5;
  text-decoration:none;
  display:inline-block;
}
a.product-card__brand:hover{ color:var(--us-ink); }
a.product-card__tenant{ display:inline-flex; align-items:center; gap:.35rem; }
a.product-card__tenant:hover{ color:var(--us-ink); }
a.product-card__tenant:hover .icon{ color:var(--us-ink); }

/* brand-strip clickable logos */
.brand-strip a.brand-logo{
  text-decoration:none;
  cursor:pointer;
}
.brand-strip a.brand-logo:hover{
  color:var(--us-ink);
  opacity:1;
  filter:none;
}

/* ===========================================================
   BOOTSTRAP TOOLTIP — themed
   =========================================================== */
.tooltip{ --bs-tooltip-bg:var(--us-ink); --bs-tooltip-color:var(--us-ink-inverse); --bs-tooltip-border-radius:0; --bs-tooltip-font-size:.78rem; --bs-tooltip-padding-x:.65rem; --bs-tooltip-padding-y:.45rem; --bs-tooltip-max-width:240px; }
.tooltip .tooltip-inner{ font-weight:500; letter-spacing:.01em; }


/* ===========================================================
   COMPONENTS (merged from components.css)
   =========================================================== */
/* =========================================================
   ua.style — components.css
   Стили для UI Kit + переиспользуемые компоненты,
   которых нет в main.css (breadcrumbs, pagination, tabs,
   filters, empty state, table, alerts, stepper).
   ========================================================= */

/* ---------- Kit layout ---------- */
.kit-header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--us-bg) 95%, transparent);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--us-line);
  height:72px;
  display:flex; align-items:center;
}
.kit-header .container-xxl{ display:flex; align-items:center; gap:1.5rem; }
.kit-tag{
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--us-ink-3); font-weight:600;
}

.kit-toc{
  position:fixed;
  left:0; top:72px; bottom:0;
  width:240px;
  background:var(--us-bg-soft);
  border-right:1px solid var(--us-line);
  padding:2rem 1.5rem;
  overflow-y:auto;
  z-index:50;
}
.kit-toc h6{
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--us-ink-3); margin:0 0 1rem;
}
.kit-toc nav{ display:flex; flex-direction:column; gap:.45rem; }
.kit-toc a{
  font-size:.88rem; color:var(--us-ink-2);
  padding:.25rem 0;
  border-left:2px solid transparent;
  padding-left:.6rem;
  transition:color .15s, border-color .15s;
}
.kit-toc a:hover{ color:var(--us-ink); border-left-color:var(--us-accent); }

.kit-main{
  margin-left:240px;
  padding:3rem 3rem 6rem;
  max-width:1100px;
}
@media(max-width:992px){
  .kit-toc{ display:none; }
  .kit-main{ margin-left:0; padding:2rem 1.5rem 4rem; }
}

.kit-section{
  padding:2.5rem 0;
  border-bottom:1px solid var(--us-line);
}
.kit-section:last-child{ border-bottom:0; }
.kit-section h2{ margin-bottom:.5rem; font-size:1.5rem; }
.kit-lead{ color:var(--us-ink-2); margin-bottom:2rem; max-width:560px; }
.kit-lead code{ background:var(--us-bg-soft); padding:.1rem .35rem; border-radius:var(--us-btn-radius-sm); font-size:.9em; }
.kit-meta{
  display:inline-block;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--us-ink-3); font-weight:600;
  min-width:160px;
}
.kit-row{ display:flex; align-items:center; gap:1.5rem; padding:1rem 0; border-bottom:1px dashed var(--us-line); flex-wrap:wrap; }
.kit-row:last-child{ border-bottom:0; }
.kit-stack{ display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; }
.kit-stack-vert{ display:flex; flex-direction:column; gap:.5rem; max-width:480px; }
.kit-subhead{
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--us-ink); font-weight:700; margin:1.5rem 0 1rem;
}

.type-row{
  display:flex; align-items:baseline; gap:1.5rem;
  padding:.75rem 0;
  border-bottom:1px dashed var(--us-line);
}
.type-row:last-child{ border-bottom:0; }

/* ---------- Color swatches ---------- */
.swatch-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:.75rem;
}
.swatch{
  aspect-ratio:3/2;
  border:1px solid var(--us-line);
  border-radius:var(--us-card-radius);
  padding:.75rem;
  display:flex; align-items:flex-end;
  font-size:.72rem; font-weight:600; letter-spacing:.04em;
  color:var(--us-ink);
}
.swatch.dark{ color:#fff; border-color:transparent; }

/* ---------- Form controls ---------- */
.kit-label{
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--us-ink); font-weight:600;
  margin-bottom:.4rem;
}
.kit-input{
  border-radius:var(--us-btn-radius);
  border-color:var(--us-line);
  background:var(--us-bg-elevated);
  color:var(--us-ink);
  padding:.75rem 1rem;
  font-size:.95rem;
  font-family:var(--us-font-sans);
  transition:border-color .2s, box-shadow .2s;
}
.kit-input:focus{
  border-color:var(--us-ink);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--us-accent) 30%, transparent);
  background:var(--us-bg-elevated);
  color:var(--us-ink);
}
.form-check-input{ border-radius:var(--us-btn-radius-sm); border-color:var(--us-line); }
.form-check-input:checked{ background-color:var(--us-ink); border-color:var(--us-ink); }
.form-check-input:focus{ box-shadow:0 0 0 3px color-mix(in srgb, var(--us-accent) 30%, transparent); }
.form-check-label{ font-size:.9rem; color:var(--us-ink-2); }

/* ---------- Alerts ---------- */
.kit-alert{
  display:flex; align-items:center; gap:.75rem;
  padding:.85rem 1rem;
  border:1px solid var(--us-line);
  border-left-width:3px;
  border-radius:var(--us-btn-radius);
  background:var(--us-bg-elevated);
  font-size:.9rem;
}
.kit-alert .icon{ width:18px; height:18px; flex:none; }
.kit-alert.success{ border-left-color:var(--us-success); }
.kit-alert.warning{ border-left-color:#d68a00; }
.kit-alert.error  { border-left-color:var(--us-promo); }
.kit-alert.info   { border-left-color:var(--us-ink); }

/* ---------- Breadcrumbs ---------- */
.kit-breadcrumb{
  display:flex; align-items:center; gap:.5rem;
  font-size:.82rem; color:var(--us-ink-3);
  flex-wrap:wrap;
}
.kit-breadcrumb a{
  color:var(--us-ink-2);
  transition:color .15s;
}
.kit-breadcrumb a:hover{ color:var(--us-ink); }
.kit-breadcrumb span{ color:var(--us-ink); font-weight:500; }
.kit-breadcrumb .icon{ width:12px; height:12px; color:var(--us-ink-3); }

/* ---------- Pagination ---------- */
.kit-pagination{ display:flex; align-items:center; gap:.35rem; }
.kit-page{
  min-width:40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--us-line);
  border-radius:var(--us-btn-radius-sm);
  font-size:.88rem; font-weight:500;
  color:var(--us-ink);
  background:var(--us-bg-elevated);
  text-decoration:none;
  transition:border-color .15s, background .15s, color .15s;
}
.kit-page:hover{ border-color:var(--us-ink); }
.kit-page.is-active{ background:var(--us-ink); color:var(--us-ink-inverse); border-color:var(--us-ink); }
.kit-page.is-disabled{ opacity:.4; pointer-events:none; }
.kit-page-dots{ padding:0 .35rem; color:var(--us-ink-3); font-weight:600; }
.kit-page .icon{ width:14px; height:14px; }

/* ---------- Tabs (BS override) ---------- */
.kit-tabs{
  border-bottom:1px solid var(--us-line);
  gap:1.5rem;
  margin-bottom:1.25rem;
}
.kit-tabs .nav-link{
  padding:.85rem 0;
  background:none;
  border:0;
  border-bottom:2px solid transparent;
  font-size:.85rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--us-ink-3);
  border-radius:0 !important;
  cursor:pointer;
  transition:color .2s, border-color .2s;
}
.kit-tabs .nav-link:hover{ color:var(--us-ink); }
.kit-tabs .nav-link.active{ color:var(--us-ink); border-bottom-color:var(--us-ink); }
.kit-tab-pane .tab-pane{ font-size:.95rem; color:var(--us-ink-2); line-height:1.6; max-width:680px; }

/* ---------- Filters sidebar ---------- */
.kit-filters{
  display:flex;
  flex-direction:column;
  gap:.85rem;
}
.kit-filter-group{
  background:var(--us-bg-elevated);
  border:1px solid var(--us-line);
  border-radius:var(--us-card-radius);
  padding:1.25rem 1.4rem;
  transition:border-color .2s;
}
.kit-filter-group:hover{ border-color:var(--us-card-border-hover); }
.kit-filter-group h6{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; margin:0 0 .9rem;
  color:var(--us-ink);
  display:flex; align-items:center; justify-content:space-between;
}
.kit-filter-group h6::after{
  content:"";
  flex:1;
  margin-left:.75rem;
  height:1px;
  background:var(--us-line);
}
.kit-filter-group ul{ list-style:none; padding:0; margin:0; }
.kit-filter-group li{ margin:.4rem 0; }
.kit-filter-group label{
  display:flex; align-items:center; gap:.6rem;
  font-size:.9rem; color:var(--us-ink-2);
  cursor:pointer;
  transition:color .15s;
}
.kit-filter-group label:hover{ color:var(--us-ink); }
.kit-filter-group input[type="checkbox"]{
  width:16px; height:16px; accent-color:var(--us-ink);
}
.kit-count{ margin-left:auto; font-size:.78rem; color:var(--us-ink-3); }

.color-swatches{
  display:grid;
  grid-template-columns:repeat(8, minmax(0, 1fr));
  gap:.5rem;
  padding:.15rem;
}
.color-swatches button{
  aspect-ratio:1/1;
  width:auto; height:auto;
  border-radius:50%;
  background:var(--c) !important;
  background-color:var(--c) !important;
  border:1px solid rgba(0,0,0,.12);
  cursor:pointer;
  position:relative;
  padding:0;
  transition:transform .15s, box-shadow .15s;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35), 0 1px 3px rgba(0,0,0,.08);
}
.color-swatches button:hover{
  transform:scale(1.12);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.6), 0 2px 6px rgba(0,0,0,.15);
}
.color-swatches button.is-active{
  box-shadow:inset 0 0 0 2px #fff, 0 0 0 2px var(--us-ink), 0 1px 3px rgba(0,0,0,.1);
  z-index:2;
}
@media(max-width:992px){
  .color-swatches{ grid-template-columns:repeat(6, minmax(0, 1fr)); }
}

/* ---------- Price range (dual slider) ---------- */
.price-range{
  position:relative;
  height:32px;
  margin:1rem .85rem 1.25rem;
}
.price-range__track{
  position:absolute;
  left:-12px; right:-12px; top:50%;
  height:6px;
  background:color-mix(in srgb, var(--us-accent) 35%, var(--us-bg-soft));
  border-radius:999px;
  transform:translateY(-50%);
}
.price-range__fill{
  position:absolute;
  top:50%; height:6px;
  background:var(--us-accent);
  border-radius:999px;
  transform:translateY(-50%);
}
.price-range input[type="range"]{
  position:absolute;
  left:-12px; right:-12px; top:0;
  width:calc(100% + 24px);
  height:32px;
  background:none;
  pointer-events:none;
  -webkit-appearance:none; appearance:none;
  margin:0;
}
.price-range input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  pointer-events:auto;
  width:24px; height:24px;
  border-radius:50%;
  background:var(--us-accent);
  border:2px solid var(--us-bg-elevated);
  cursor:grab;
  box-shadow:0 2px 8px rgba(0,0,0,.18), 0 0 0 1px color-mix(in srgb, var(--us-accent) 50%, transparent);
  transition:transform .1s, box-shadow .15s;
}
.price-range input[type="range"]::-webkit-slider-thumb:hover{
  transform:scale(1.08);
  box-shadow:0 3px 12px rgba(0,0,0,.22), 0 0 0 4px color-mix(in srgb, var(--us-accent) 25%, transparent);
}
.price-range input[type="range"]::-webkit-slider-thumb:active{
  cursor:grabbing;
  transform:scale(1.12);
}
.price-range input[type="range"]::-moz-range-thumb{
  pointer-events:auto;
  width:24px; height:24px;
  border-radius:50%;
  background:var(--us-accent);
  border:2px solid var(--us-bg-elevated);
  cursor:grab;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}

.price-range__inputs{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:.65rem;
  margin-top:1rem;
}
.price-range__field{
  position:relative;
}
.price-range__field input{
  width:100%;
  padding:.85rem 1rem;
  border:1px solid var(--us-line);
  border-radius:var(--us-btn-radius);
  background:var(--us-bg-elevated);
  color:var(--us-ink);
  font-family:var(--us-font-sans);
  font-size:.95rem;
  font-weight:500;
  text-align:left;
  transition:border-color .15s;
}
.price-range__field input:focus{
  outline:none;
  border-color:var(--us-ink);
}
.price-range__field-label{
  position:absolute;
  left:1rem; top:.35rem;
  font-size:.65rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--us-ink-3);
  font-weight:600;
  pointer-events:none;
}
.price-range__field input{ padding-top:1.4rem; padding-bottom:.55rem; }

.filter-chips{
  display:flex; gap:.5rem; flex-wrap:wrap; align-items:center;
}
.filter-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem .35rem .4rem .75rem;
  background:var(--us-bg-soft);
  border:1px solid var(--us-line);
  border-radius:999px;
  font-size:.78rem; font-weight:500;
  color:var(--us-ink);
}
.filter-chip button{
  width:18px; height:18px;
  border:0; background:transparent;
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--us-ink-3);
  cursor:pointer;
  font-size:1.1rem; line-height:1;
  transition:background .15s, color .15s;
}
.filter-chip button:hover{ background:var(--us-ink); color:var(--us-ink-inverse); }
.filter-chip-clear{
  background:none; border:0;
  font-size:.78rem; font-weight:600; letter-spacing:.04em;
  color:var(--us-ink-3);
  text-decoration:underline;
  cursor:pointer;
  padding:.4rem .5rem;
}
.filter-chip-clear:hover{ color:var(--us-ink); }

/* ---------- Empty state ---------- */
.kit-empty{
  text-align:center;
  padding:3rem 1rem;
  border:1px dashed var(--us-line);
  border-radius:var(--us-card-radius);
  max-width:520px;
  margin:0 auto;
}
.kit-empty .icon{ width:48px; height:48px; color:var(--us-ink-3); stroke-width:1.25; }
.kit-empty h3{ font-size:1.25rem; margin:1rem 0 .5rem; }
.kit-empty p{ color:var(--us-ink-2); margin-bottom:1.5rem; }

/* ---------- Tables (Bootstrap .table + .kit-table override) ---------- */
.kit-table{
  --bs-table-bg:transparent;
  --bs-table-color:var(--us-ink);
  --bs-table-border-color:var(--us-line);
  --bs-table-striped-bg:var(--us-bg-soft);
  --bs-table-hover-bg:var(--us-bg-soft);
  width:100%;
  margin-bottom:0;
  font-size:.92rem;
  border:1px solid var(--us-line);
  border-radius:var(--us-card-radius);
  overflow:hidden;
  vertical-align:middle;
}
.kit-table thead{
  background:var(--us-bg-soft);
}
.kit-table th{
  padding:.85rem 1rem;
  text-align:left;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; color:var(--us-ink);
  border-bottom:1px solid var(--us-line);
}
.kit-table td{
  padding:.85rem 1rem;
  border-bottom:1px solid var(--us-line);
  color:var(--us-ink-2);
}
.kit-table tbody tr:last-child td{ border-bottom:0; }
.kit-table tr.is-current td{
  background:color-mix(in srgb, var(--us-accent) 12%, transparent);
  color:var(--us-ink); font-weight:600;
}

/* Icon grid in components page */
.icon-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(110px, 1fr));
  gap:.5rem;
}
.icon-tile{
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  padding:1rem .5rem;
  background:var(--us-bg-soft);
  border:1px solid var(--us-line);
  border-radius:var(--us-card-radius);
  font-size:.7rem;
  color:var(--us-ink-3);
  font-family:monospace;
  text-align:center;
  word-break:break-word;
  transition:border-color .2s, background .2s;
}
.icon-tile:hover{ border-color:var(--us-ink); background:var(--us-bg-elevated); }
.icon-tile .icon{ width:24px; height:24px; color:var(--us-ink); }

/* ---------- Stepper (checkout) ---------- */
.kit-stepper{
  list-style:none;
  display:flex;
  align-items:center;
  gap:0;
  padding:0; margin:0;
  counter-reset:step;
}
.kit-stepper li{
  flex:1;
  display:flex; align-items:center; gap:.75rem;
  position:relative;
}
.kit-stepper li::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--us-line);
  margin:0 .75rem;
}
.kit-stepper li:last-child::after{ display:none; }
.kit-step__num{
  width:32px; height:32px;
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--us-line);
  background:var(--us-bg-elevated);
  color:var(--us-ink-3);
  font-size:.85rem; font-weight:600;
  flex:none;
}
.kit-step__label{
  font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--us-ink-3);
}
.kit-stepper li.is-done .kit-step__num{
  background:var(--us-ink); color:var(--us-ink-inverse); border-color:var(--us-ink);
}
.kit-stepper li.is-done .kit-step__label{ color:var(--us-ink); }
.kit-stepper li.is-active .kit-step__num{
  background:var(--us-accent); color:var(--us-accent-ink); border-color:var(--us-accent);
}
.kit-stepper li.is-active .kit-step__label{ color:var(--us-ink); }
@media(max-width:768px){
  .kit-stepper{ flex-direction:column; align-items:flex-start; gap:.85rem; }
  .kit-stepper li{ width:100%; }
  .kit-stepper li::after{ display:none; }
}

/* Auth state visibility — use on any element */
.is-logged-in .hide-logged, .is-logged-in .hide-logged.d-md-inline, .is-logged-in .hide-logged.d-inline { display: none !important; }
.is-guest .hide-guest { display: none !important; }