/* Hodler Supply — core.css (merged universal styles, self-hosted font) */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400 800;font-display:swap;src:url("../fonts/plus-jakarta-sans.woff2") format("woff2");}

/* ===== system.css ===== */
/* ============================================================
   HODLERSUPPLY — Shared Design System
   Daily Deals Store (OpenCart reference mockups)
   Light theme only. Locked palette: Indigo blue #3A4FD0 system.
   ============================================================ */

/* ---- Font: Plus Jakarta Sans (display + body) ---- */

:root {
  /* ---- LOCKED PALETTE ---- */
  --brand:        #3A4FD0;   /* indigo blue — header, brand, mascot */
  --brand-dark:   #2E3FA6;   /* deeper indigo for hover/gradient */
  --brand-light:  #7D8BE0;   /* light indigo for gradient tops */
  --brand-tint:   #EFF1FB;   /* very light indigo wash */

  --cta:          #FFB020;   /* amber/gold — primary CTA + save badges */
  --cta-hover:    #F0A012;
  --cta-tint:     #FFF4DD;

  --coral:        #FF5A36;   /* coral — small "Below Amazon" tags ONLY */
  --coral-tint:   #FFEAE4;

  --emerald:      #10B981;   /* trust / stock / authorized */
  --emerald-dark: #0E9D6F;
  --emerald-tint: #E2F6EF;

  --ink:          #1C252C;   /* primary text */
  --ink-2:        #50606C;   /* secondary text */
  --ink-3:        #8A97A1;   /* muted / metadata */

  --white:        #FFFFFF;   /* page bg */
  --surface:      #F1F2F5;   /* cards, bands, photo containers */
  --surface-2:    #F8F9FB;   /* lighter surface */
  --border:       #E8EAEE;   /* card / divider borders */
  --border-2:     #DBDFE6;

  /* ---- Type scale ---- */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.8125rem; /* 13px */
  --text-base: 0.9375rem; /* 15px */
  --text-md:   1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.375rem;  /* 22px */
  --text-2xl:  1.75rem;   /* 28px */
  --text-3xl:  2.25rem;   /* 36px */

  /* ---- Spacing (4px base) ---- */
  --s1: 0.25rem; --s2: 0.5rem;  --s3: 0.75rem; --s4: 1rem;
  --s5: 1.25rem; --s6: 1.5rem;  --s8: 2rem;    --s10: 2.5rem;
  --s12: 3rem;   --s16: 4rem;   --s20: 5rem;

  /* ---- Radius ---- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 9999px;

  /* ---- Shadow ---- */
  --sh-sm: 0 1px 2px rgba(28,37,44,0.06);
  --sh-md: 0 4px 14px rgba(28,37,44,0.08);
  --sh-lg: 0 12px 32px rgba(28,37,44,0.12);
  --sh-brand: 0 8px 24px rgba(58,79,208,0.28);

  /* ---- Layout ---- */
  --maxw: 1280px;

  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--ink);
  background: var(--white);
}
img, svg { display: block; max-width: 100%; height: auto; }
button { cursor: pointer; background: none; border: none; font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
h1,h2,h3,h4 { font-family: var(--font-display); line-height: 1.12; color: var(--ink); }
input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s8); }

/* ============================================================
   HEADER — two levels
   ============================================================ */
.hdr-top {
  background: linear-gradient(180deg, #5D6FD8 0%, var(--brand) 100%);
  color: #fff;
}
.hdr-top__inner {
  max-width: var(--maxw); margin-inline: auto;
  padding: var(--s4) var(--s8);
  display: flex; align-items: center; gap: var(--s6);
}
.brand { display: flex; align-items: center; gap: var(--s3); flex-shrink: 0; }
.brand__mark {
  width: 42px; height: 42px; border-radius: 11px;
  background: rgba(255,255,255,0.16);
  display: grid; place-items: center;
}
.brand__mark img { width: 30px; height: 30px; }
.brand__name {
  font-family: var(--font-display); font-weight: 900;
  font-size: 1.2rem; letter-spacing: 0.04em; color: #fff;
  text-transform: uppercase; line-height: 1; white-space: nowrap;
}
.brand__name small { display:block; font-size:0.56rem; font-weight:700; letter-spacing:0.22em; opacity:0.85; }

.hdr-top__inner .search {
  flex: 1; display: flex; align-items: center;
  background: #fff; border-radius: var(--r-full);
  padding: 0 var(--s2) 0 var(--s5);
  box-shadow: var(--sh-sm); max-width: 620px;
}
.hdr-top__inner .search input {
  flex: 1; border: none; outline: none; background: none;
  padding: var(--s3) 0; font-size: var(--text-base); color: var(--ink);
}
.hdr-top__inner .search input::placeholder { color: var(--ink-3); }
.hdr-top__inner .search button {
  background: var(--brand); color: #fff;
  border-radius: var(--r-full); padding: var(--s2) var(--s5);
  font-weight: 600; font-size: var(--text-sm); display:flex; align-items:center; gap:6px;
  transition: background .15s ease;
}
.hdr-top__inner .search button:hover { background: var(--brand-dark, #2E3FA6); }
.hdr-top__inner .search button:hover svg { stroke: #fff; }
.hdr-actions { display: flex; align-items: center; gap: var(--s5); flex-shrink: 0; }
.hdr-act {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: #fff; font-size: var(--text-sm); font-weight: 500; position: relative;
}
.hdr-act svg { width: 22px; height: 22px; }
.cart-count {
  position: absolute; top: -6px; right: -10px;
  background: var(--cta); color: var(--ink);
  font-size: 0.6875rem; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: var(--r-full);
  display: grid; place-items: center; padding: 0 4px;
}

/* ===== Header mini-cart preview ===== */
.hdr-cart { position: relative; }
.mini-cart {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 300px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 14px 34px rgba(16, 18, 40, 0.15);
  color: var(--ink);
  padding: var(--s4);
  z-index: 1200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.mini-cart.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
/* little pointer + invisible hover bridge so the gap doesn't close the panel */
.mini-cart::before {
  content: ""; position: absolute; top: -7px; right: 24px;
  width: 12px; height: 12px; background: #fff;
  border-left: 1px solid var(--border); border-top: 1px solid var(--border);
  transform: rotate(45deg);
}
.mini-cart::after {
  content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}
.mc-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: var(--s3); margin-bottom: var(--s3);
  border-bottom: 1px solid var(--border);
}
.mc-head__title { font-weight: 700; font-size: var(--text-sm); }
.mc-head__count { font-size: var(--text-xs); color: var(--ink-3); }
.mc-list { display: flex; flex-direction: column; gap: var(--s4); max-height: 300px; overflow-y: auto; padding: 2px 0; }
.mc-item { display: flex; align-items: center; gap: var(--s3); }
.mc-item__well {
  flex: 0 0 auto; width: 40px; height: 40px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.mc-item__well img { width: 80%; height: 80%; object-fit: contain; mix-blend-mode: multiply; }
.mc-item__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.mc-item__name {
  font-size: var(--text-sm); font-weight: 600; color: var(--ink); line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mc-item__meta { font-size: var(--text-xs); color: var(--ink-3); line-height: 1.3; }
.mc-item__price { font-size: var(--text-sm); font-weight: 700; color: var(--ink); white-space: nowrap; }
.mc-empty { font-size: var(--text-sm); color: var(--ink-3); padding: var(--s3) 0; text-align: center; }
.mc-save {
  display: flex; align-items: center; gap: var(--s2);
  margin-top: var(--s3); padding: var(--s2) var(--s3);
  background: var(--emerald-tint); border-radius: var(--r-md);
  font-size: var(--text-xs); color: var(--emerald); line-height: 1.3;
}
.mc-save svg { flex: 0 0 auto; width: 14px; height: 14px; color: var(--emerald); }
.mc-save strong { color: var(--emerald); }
.mc-foot { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--border); }
.mc-foot__row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--text-sm); color: var(--ink-2); margin-bottom: var(--s3);
}
.mc-foot__sub { font-size: var(--text-base); font-weight: 700; color: var(--ink); }
.mc-btn {
  width: 100%; box-shadow: none;
  height: 38px; min-height: 0; padding: 0 var(--s3);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-sm); line-height: 1; text-align: center;
}
.mc-btn--go { margin-top: var(--s2); }
/* On touch / small screens, anchor the panel so it never overflows the viewport */
@media (max-width: 560px) {
  .mini-cart { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: auto; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .mini-cart::before { display: none; }
}

.hdr-nav {
  background: #fff; border-bottom: 1px solid var(--border);
  box-shadow: var(--sh-sm);
}
.hdr-nav__inner {
  max-width: var(--maxw); margin-inline: auto;
  padding: 0 var(--s8);
  display: flex; align-items: center; gap: var(--s2);
  overflow-x: auto;
}
.nav-link {
  padding: var(--s4) var(--s4); font-size: var(--text-base);
  font-weight: 500; color: var(--ink-2); white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.nav-link:hover { color: var(--brand); }
.nav-link--strong { color: var(--ink); font-weight: 600; }
.nav-link--accent { color: var(--coral); font-weight: 600; }
.nav-link.is-active { color: var(--brand); border-bottom-color: var(--brand); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-base);
  border-radius: var(--r-md); padding: var(--s3) var(--s5);
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn--cta { background: var(--cta); color: var(--ink); box-shadow: 0 4px 14px rgba(255,176,32,0.35); }
.btn--cta:hover { background: var(--cta-hover); }
.btn--brand { background: var(--brand); color: #fff; box-shadow: var(--sh-brand); }
.btn--brand:hover { background: var(--brand-dark); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: #0f161b; }
.btn--outline { background: #fff; color: var(--ink); border: 1.5px solid var(--border-2); }
.btn--outline:hover { border-color: var(--brand); color: var(--brand); }
.btn--lg { padding: var(--s4) var(--s8); font-size: var(--text-md); }
.btn--block { width: 100%; }

/* ============================================================
   BADGES & TAGS
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--text-xs); font-weight: 600; border-radius: var(--r-sm);
  padding: 4px 9px; line-height: 1.2;
}
.badge--save   { background: var(--cta); color: var(--ink); font-weight: 700; }
.badge--coral  { background: var(--coral-tint); color: var(--coral); }
.badge--coral-solid { background: var(--coral); color: #fff; }
.badge--stock  { background: var(--surface); color: var(--ink-2); }
.badge--low    { background: #fff; color: var(--coral); border: 1px solid var(--coral); font-weight: 700; }
.badge--trust  { background: var(--emerald-tint); color: var(--emerald-dark); }
.badge--brand  { background: var(--brand-tint); color: var(--brand); }
.badge--new    { background: var(--brand-tint); color: var(--brand); }

.dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dot--emerald { background: var(--emerald); }

/* ============================================================
   PRODUCT CARD
   ============================================================ */
.card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.card:hover { box-shadow: var(--sh-md); transform: translateY(-3px); border-color: var(--border-2); }
.card__media {
  position: relative; background: var(--surface);
  aspect-ratio: 1 / 1; display: grid; place-items: center; padding: var(--s5);
}
.card__media img { width: 78%; height: 78%; object-fit: contain; mix-blend-mode: multiply; }
.card__flags { position: absolute; top: var(--s3); left: var(--s3); display: flex; flex-direction: column; gap: 6px; }
.card__fav {
  position: absolute; top: var(--s3); right: var(--s3);
  width: 32px; height: 32px; border-radius: 50%; background: #fff;
  display: grid; place-items: center; box-shadow: var(--sh-sm); color: var(--ink-3);
}
.card__fav:hover { color: var(--coral); }
.card__fav svg { width: 17px; height: 17px; }
.card__body { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.card__cat { font-size: var(--text-xs); color: var(--ink-3); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
/* Длинные амазоновские названия идут на 3–4 строки, и при 1.35 выносные
   элементы соседних строк почти смыкались — межстрочный увеличен. */
.card__name { font-size: var(--text-base); font-weight: 500; color: var(--ink); line-height: 1.5; min-height: 3em; margin-bottom: 2px; }
.card__name a:hover { color: var(--brand); }
.card__specs { font-size: var(--text-xs); color: var(--ink-3); line-height: 1.45; min-height: 2.9em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__pricing { display: flex; align-items: baseline; gap: var(--s3); margin-top: auto; }
.price-now { font-family: var(--font-display); font-weight: 900; font-size: var(--text-xl); color: var(--ink); }
.price-was { font-size: var(--text-sm); color: var(--ink-3); text-decoration: line-through; }
/* Цена не заполнена (импорт без цены): вместо "$0" — спокойная подпись. */
.price-now--tba { font-family: var(--font-body, inherit); font-weight: 600; font-size: var(--text-sm); color: var(--ink-2); letter-spacing: 0; }
.card__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.card__stock { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--ink-2); font-weight: 500; }
.card__actions { display: flex; gap: var(--s2); margin-top: var(--s2); }
.card__actions .btn { flex: 1; padding: var(--s3) var(--s3); }

.amazon-tag { font-size: var(--text-xs); color: var(--ink-3); }
.amazon-tag s { color: var(--ink-3); }

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section { padding-block: var(--s12); }
.section--tight { padding-block: var(--s10); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s6); }
.sec-head__title { font-size: var(--text-2xl); font-weight: 700; }
.sec-head__sub { font-size: var(--text-base); color: var(--ink-2); margin-top: 4px; }
.sec-head__link { font-size: var(--text-base); font-weight: 600; color: var(--brand); display: flex; align-items: center; gap: 4px; }
.sec-head__link:hover { gap: 8px; }

.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5); }

/* ============================================================
   FOOTER
   ============================================================ */
.ftr { background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%); color: rgba(255,255,255,0.82); margin-top: var(--s16); }
.ftr__inner { max-width: var(--maxw); margin-inline: auto; padding: var(--s12) var(--s8) var(--s8); }
.ftr__cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--s8); }
.ftr__brand .brand__name { color: #fff; }
.ftr__brand .brand__mark { background: rgba(255,255,255,0.18); }
.ftr__about { font-size: var(--text-base); color: rgba(255,255,255,0.75); margin-top: var(--s4); line-height: 1.6; max-width: 34ch; }
.ftr h4 { color: #fff; font-size: var(--text-base); font-weight: 600; margin-bottom: var(--s4); font-family: var(--font-body); }
.ftr__links { display: flex; flex-direction: column; gap: var(--s3); }
.ftr__links a { font-size: var(--text-base); color: rgba(255,255,255,0.78); }
.ftr__links a:hover { color: #fff; }
.ftr__pay { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.pay-chip {
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22); border-radius: var(--r-sm);
  padding: 6px 10px; font-size: var(--text-xs); font-weight: 600; color: rgba(255,255,255,0.9);
  display: flex; align-items: center; gap: 6px;
}
.ftr__bar { border-top: 1px solid rgba(255,255,255,0.15); padding: var(--s5) var(--s8); }
.ftr__bar-inner { max-width: var(--maxw); margin-inline: auto; display: flex; justify-content: space-between; gap: var(--s4); font-size: var(--text-xs); color: rgba(255,255,255,0.6); flex-wrap: wrap; }

/* ============================================================
   UTILITIES
   ============================================================ */
.mascot-band {
  background: linear-gradient(120deg, var(--brand) 0%, var(--brand-dark) 100%);
  border-radius: var(--r-xl); color: #fff;
  display: flex; align-items: center; gap: var(--s8);
  padding: var(--s8) var(--s10); overflow: hidden; position: relative;
}
.mascot-band__art { width: 160px; height: 160px; flex-shrink: 0; filter: drop-shadow(0 10px 24px rgba(0,0,0,0.25)); }
.mascot-band h3 { color: #fff; font-size: var(--text-2xl); font-weight: 900; }
.mascot-band p { color: rgba(255,255,255,0.88); font-size: var(--text-md); margin-top: var(--s2); max-width: 48ch; }
.mascot-band .btn { margin-top: var(--s5); }

/* Крошки всегда в одну строку: длинные названия товаров с Amazon переносились
   на два-три ряда и разъезжались. Обрезаем многоточием только последний
   элемент — ссылки Home/Категория обязаны остаться кликабельными целиком. */
.breadcrumbs { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--s2); min-width: 0; font-size: var(--text-base); color: var(--ink-3); padding-block: var(--s5); }
.breadcrumbs > a,
.breadcrumbs > span.sep { flex: 0 0 auto; white-space: nowrap; }
.breadcrumbs .cur { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.breadcrumbs a:hover { color: var(--brand); }
.breadcrumbs span.sep { color: var(--border-2); }
.breadcrumbs .cur { color: var(--ink); font-weight: 500; }

.divider { height: 1px; background: var(--border); border: none; }

.flex { display: flex; } .items-center { align-items: center; } .gap-2 { gap: var(--s2); } .gap-3 { gap: var(--s3); }
.muted { color: var(--ink-2); } .faint { color: var(--ink-3); }

/* mobile frame helper for screenshots */
.mobile { max-width: 390px; }

/* ============================================================
   MOBILE — shared header/footer/component responsive rules
   ============================================================ */
@media (max-width: 760px) {
  .wrap { padding-inline: var(--s4); }

  /* Header reflows: row 1 = logo + actions; row 2 = full-width search */
  .hdr-top__inner {
    flex-wrap: wrap; gap: var(--s3); padding: var(--s3) var(--s4);
  }
  .brand { order: 1; }
  .brand__mark { width: 36px; height: 36px; }
  .brand__mark img { width: 26px; height: 26px; }
  .brand__name { font-size: 1rem; }
  .hdr-actions { order: 2; margin-left: auto; gap: var(--s4); }
  .hdr-act { font-size: 0.75rem; }
  .hdr-act svg { width: 20px; height: 20px; }
  .hdr-top__inner .search { order: 3; flex: 1 1 100%; max-width: none; padding-left: var(--s4); }
  .hdr-top__inner .search input { padding: var(--s2) 0; }
  .hdr-top__inner .search button { padding: var(--s2) var(--s3); }
  .hdr-top__inner .search button span.lbl { display: none; }

  .hdr-nav__inner { padding-inline: var(--s4); gap: 0; }
  .nav-link { padding: var(--s3) var(--s3); font-size: var(--text-sm); }

  /* Footer stacks */
  .ftr__cols { grid-template-columns: 1fr 1fr; gap: var(--s6); }
  .ftr__brand { grid-column: 1 / -1; }
  .ftr__inner { padding: var(--s8) var(--s4) var(--s5); }
  .ftr__bar { padding-inline: var(--s4); }
  .ftr__bar-inner { flex-direction: column; gap: var(--s2); }

  /* Cards */
  .card__name { font-size: var(--text-sm); min-height: 3em; }
  .price-now { font-size: var(--text-lg); }
  .card__actions { flex-direction: column; }
  .card__body { padding: var(--s3); gap: var(--s2); }
  .card__media { padding: var(--s4); }

  .mascot-band { flex-direction: column; text-align: center; padding: var(--s6) var(--s5); gap: var(--s4); }
  .mascot-band__art { width: 110px; height: 110px; }
  .mascot-band h3 { font-size: var(--text-xl); }
  .mascot-band p { margin-inline: auto; }
}

/* ============================================================
   COOKIE CONSENT BANNER (site-wide, injected via partials.js)
   ============================================================ */
.cookie-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  background: #fff; border-top: 1px solid var(--border);
  box-shadow: 0 -6px 24px rgba(15,23,42,0.10);
  transform: translateY(110%); opacity: 0;
  transition: transform .28s ease, opacity .28s ease;
  pointer-events: none;
}
.cookie-bar.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.cookie-bar__inner {
  max-width: var(--maxw); margin-inline: auto;
  padding: var(--s5) var(--s8);
  display: flex; align-items: center; gap: var(--s6); flex-wrap: wrap;
}
.cookie-bar__text {
  flex: 1 1 420px; min-width: 280px;
  font-size: var(--text-sm); color: var(--ink-2); line-height: 1.55; margin: 0;
}
.cookie-bar__text a { color: var(--brand); font-weight: 600; }
.cookie-bar__text a:hover { color: var(--brand-dark); }
.cookie-bar__actions { display: flex; gap: var(--s3); flex-shrink: 0; }
/* Explicit button styling so there are no shadows on the cookie buttons */
.cookie-bar .btn { box-shadow: none; border-radius: var(--r-full); }
.cookie-bar .cookie-accept {
  background: var(--brand); color: #fff; border: 1.5px solid var(--brand);
}
.cookie-bar .cookie-accept:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.cookie-bar .cookie-decline {
  background: #fff; color: var(--ink); border: 1.5px solid var(--border-2);
}
.cookie-bar .cookie-decline:hover { border-color: var(--brand); color: var(--brand); background: #fff; }

/* "Review cookie choices" inline button on the Cookie Policy page */
.cookie-reopen {
  display: inline-flex; align-items: center;
  font: inherit; font-weight: 600; color: var(--brand);
  background: none; border: none; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.cookie-reopen:hover { color: var(--brand-dark); }

@media (max-width: 860px) {
  .cookie-bar__inner { padding: var(--s4) var(--s4); gap: var(--s4); }
  .cookie-bar__actions { width: 100%; }
  .cookie-bar__actions .btn { flex: 1 1 auto; }
}

/* ===== mono.css ===== */
/* ============================================================
   HODLERSUPPLY — MONOCHROME OVERLAY (below the header)
   Inspired by DJI / Samsung / eBay: neutral carries the UI,
   color reserved for the single primary action only.
   Load AFTER system.css + page css to override.
   Header stays indigo; everything below becomes monochrome.
   ============================================================ */

:root {
  /* Neutral scale used for the monochrome content area */
  --mono-ink:     #16181D;   /* near-black, primary text + dark buttons */
  --mono-ink-2:   #4A5159;   /* secondary text */
  --mono-ink-3:   #8A9099;   /* tertiary / meta */
  --mono-line:    #E3E5E9;   /* hairlines */
  --mono-surface: #F4F5F7;   /* photo wells, chips */
  --mono-chip:    #1C252C;   /* dark chip bg for save/discount */
}

/* ---- BADGES & TAGS → neutral ---- */
.badge--save {                 /* was amber */
  background: var(--mono-chip); color: #fff; font-weight: 700;
}
.badge--coral {                /* "Below Amazon" → quiet gray text label */
  background: transparent; color: var(--mono-ink-3);
  padding-left: 0; padding-right: 0; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.6875rem;
}
.badge--coral-solid { background: var(--mono-chip); color: #fff; }
/* badge--low ("Only N left") INTENTIONALLY left un-overridden so it keeps
   its coral/red outline from system.css — the one allowed colored signal. */
.badge--trust { background: var(--mono-surface); color: var(--mono-ink-2); }
.badge--brand,
.badge--new   { background: var(--mono-surface); color: var(--mono-ink-2); }
.badge--stock { background: var(--mono-surface); color: var(--mono-ink-2); }

/* stock dot → neutral */
.dot--emerald { background: var(--mono-ink-3); }

/* ---- PRODUCT CARD → monochrome ---- */
.card { border-color: var(--mono-line); }
.card:hover { border-color: var(--mono-ink-3); }
.card__media { background: var(--mono-surface); }
.card__name a:hover { color: var(--mono-ink); }
.card__fav:hover { color: var(--mono-ink); }
.price-now { color: var(--mono-ink); }
.card__stock { color: var(--mono-ink-2); }

/* Primary action: dark monochrome button (DJI/eBay style) */
.card__actions .btn--cta,
.btn--cta {
  background: var(--mono-ink); color: #fff;
  box-shadow: none;
}
.btn--cta:hover { background: #000; }

/* ---- SECTION HEADERS / LINKS → neutral ---- */
.sec-head__link { color: var(--mono-ink); }
.sec-head__link:hover { color: #000; }

/* breadcrumbs + generic links below header */
.breadcrumbs a:hover { color: var(--mono-ink); }

/* ---- HERO accent text → ink instead of indigo ---- */
.hero__title .accent,
.hero h1 .accent { color: var(--mono-ink); }

/* trust strip icons → neutral */
.trust-strip svg, .trust-item svg { color: var(--mono-ink-2) !important; }

/* "how it works" step bubbles → neutral */
.howto__num, .step-bubble { background: var(--mono-ink) !important; color:#fff !important; }

/* category tiles hover */
.cat-tile:hover { border-color: var(--mono-ink-3); }

/* ---- SECTION BANDS → plain white (drop the gray container) ---- */
.band { background: transparent; border-block: none; }

/* Woo после обновления корзины ставит фокус на уведомление (tabindex=-1) — браузер рисует синюю рамку. */
.woocommerce-message:focus, .woocommerce-info:focus, .woocommerce-error:focus,
.wc-block-components-notice-banner:focus { outline: none; }

/* ---- SAVINGS LINE (replaces on-photo badge in mono mode) ---- */
/* Quiet text line under price: "Amazon price: $X · You save $Y (Z%)".
   No frame, no box on the photo — just light gray type. */
.card__save-line {
  margin-top: var(--s1, 4px);
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--mono-ink-3);
  font-weight: 500;
}
.card__save-line s { color: var(--mono-ink-3); text-decoration-thickness: 1px; }
.card__save-line .save-amt { color: var(--mono-ink-2); font-weight: 600; }

/* ---- MASCOT BAND → neutral light gray (was indigo gradient) ---- */
.mascot-band {
  background: var(--mono-surface);
  border: 1px solid var(--mono-line);
  color: var(--mono-ink);
}
.mascot-band h3 { color: var(--mono-ink); }
.mascot-band p  { color: var(--mono-ink-2); }
/* mascot art keeps its indigo (reads fine on light gray); soften shadow */
.mascot-band__art { filter: drop-shadow(0 8px 18px rgba(22,24,29,0.14)); }
/* band CTA inherits near-black btn--cta override above */

/* ===== hybrid.css ===== */
/* ============================================================
   HYBRID OVERLAY  (load AFTER system.css, home.css, mono.css)
   Monochrome canvas + indigo header/footer (inherited),
   but with TWO deliberate additions:
     1. Savings amount gets emerald color (the one "value" signal)
     2. Star-rating trust row on cards + a trust reassurance band
   Everything else inherits the monochrome treatment from mono.css.
   ============================================================ */

:root {
  --emerald: #0E9F6E;          /* slightly deeper than system emerald for text contrast */
  --emerald-tint: #E7F6EF;
}

/* ---- ROUNDED (PILL) BUTTONS ---- */
.btn { border-radius: var(--r-full); }
.card__fav { border-radius: var(--r-full); }  /* already round, kept for clarity */

/* ---- WHITE PHOTO BACKGROUNDS (was light-gray well) ---- */
/* Card thumbnails: white fill, hairline divider so the well still reads framed */
.card__media {
  background: #fff;
  border-bottom: 1px solid var(--mono-line);
}
/* Product page gallery + thumbnails: white wells */
.pd-main, .pd-main__media, .pd-stage {
  background: #fff;
  border: 1px solid var(--mono-line);
}
.pd-thumb {
  background: #fff;
  border-color: var(--mono-line);
}

/* ---- PRIMARY BUTTON = near-black (inherits from mono.css) ---- */
/* Reverted to monochrome dark button per request; pill shape kept above. */

/* ---- SAVINGS: bring back a touch of value-green ---- */
.card__save-line { color: var(--mono-ink-3); }
.card__save-line .save-amt {
  color: var(--emerald);
  font-weight: 700;
}

/* ---- STAR RATING (trust signal under product name) ---- */
.card__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 6px;
}
.card__rating .stars { display: inline-flex; gap: 1px; line-height: 0; }
.card__rating .star--on  { color: #F5A623; }     /* warm amber stars — universal rating color */
.card__rating .star--off { color: var(--mono-line); }
.card__rating .rating-num {
  font-size: 0.78rem; font-weight: 700; color: var(--mono-ink-2);
}
.card__rating .rating-count {
  font-size: 0.75rem; color: var(--mono-ink-3);
}

/* ---- TRUST REASSURANCE BAND (US buyers verify before buying) ---- */
.trust-band {
  border: 1px solid var(--mono-line);
  border-radius: var(--r-lg, 16px);
  background: #fff;
  padding: var(--s6, 24px) var(--s7, 28px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s6, 24px);
}
.trust-band__item { display: flex; gap: 12px; align-items: flex-start; }
.trust-band__ico {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  background: var(--mono-surface); color: var(--mono-ink);
  display: grid; place-items: center;
}
.trust-band__ico svg { width: 19px; height: 19px; }
.trust-band__txt strong {
  display: block; font-size: 0.9rem; font-weight: 700; color: var(--mono-ink);
  margin-bottom: 2px;
}
.trust-band__txt span { font-size: 0.8rem; color: var(--mono-ink-2); line-height: 1.4; }

@media (max-width: 720px) {
  .trust-band { grid-template-columns: repeat(2, 1fr); gap: var(--s5, 20px); }
}

/* ============================================================
   PRODUCT PAGE (hybrid)
   ============================================================ */
/* rating stars warm amber, count in neutral ink (not brand link blue) */
.pd-rating .stars { color: #F5A623; }
.pd-rating__count { color: var(--mono-ink-3); }

/* big strikethrough next to price (replaces the Save% badge) */
.pd-price__wasbig s { color: var(--mono-ink-3); font-size: 1.1rem; font-weight: 500; }

/* savings line: emerald */
.pd-price__save { color: var(--emerald); }
.pd-price__amazon, .pd-price__amazon s { color: var(--mono-ink-3); }
.pd-price__compare { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }

/* guarantee bar neutral (was emerald-tinted), keep emerald check only */
.pd-guarantee { color: var(--mono-ink-2); border-top-color: var(--mono-line); }
.pd-guarantee svg { color: var(--emerald); }

/* on-photo flag: keep ONLY the coral scarcity pill (already coral via badge--low) */
.pd-main__flag { /* inherits coral outline from system badge--low */ }

/* ===== brand-3A4FD0.css ===== */
/* brand-3A4FD0.css — brand color = #3A4FD0 (original indigo). */
:root{
  --brand: #3A4FD0;
  --brand-dark: #2E3FA6;   /* deeper indigo for hover */
  --brand-light: #7D8BE0;
}
.hdr-top{ background: linear-gradient(180deg, #5D6FD8 0%, #3A4FD0 100%) !important; }
.ftr{ background: linear-gradient(180deg, #3A4FD0 0%, #2E3FA6 100%) !important; }

/* ===== hover-blue.css ===== */
/* hover-blue.css — primary CTA hovers to brand blue. No shadows, no movement. */
/* Loads AFTER mono.css so this hover wins. Match mono.css specificity. */
.card__actions .btn--cta:hover,
.btn--cta:hover {
  background: var(--brand);   /* brand blue (#1A47C2 when set) */
  color: #fff;
}
.btn--cta:hover svg { stroke: #fff; }

/* secondary/outline hover: border + light fill, no shadow */
.btn--outline:hover {
  border-color: var(--mono-ink, #16181D);
  background: var(--mono-surface, #F4F5F7);
}

/* ===== buy-outline.css ===== */
/* buy-outline.css — PRODUCT CARD actions.
   "Add to Cart" = SOLID indigo at rest (white text/icon), deepens on hover. Primary.
   "View" = outline secondary, on the LEFT (View already comes first in markup).
   No shadows, no movement. Loads AFTER mono.css + hover-blue.css so this wins.
   Scoped to .card__actions so it does NOT affect the product-page main CTA. */

/* primary: Add to Cart — solid indigo */
.card__actions .btn--cta {
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand);
  padding: 7px 16px;
  font-size: 13px;
  gap: 6px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.card__actions .btn--cta svg {
  stroke: #fff;
  width: 14px;
  height: 14px;
  transition: stroke .15s ease;
}
/* hover = deepen */
.card__actions .btn--cta:hover {
  background: var(--brand-dark, #2E3FA6);
  border-color: var(--brand-dark, #2E3FA6);
  color: #fff;
}
.card__actions .btn--cta:hover svg { stroke: #fff; }

/* secondary: View — outline, stays on the left, lower emphasis */
.card__actions .btn--outline {
  background: #fff;
  color: var(--brand);
  border: 1px solid var(--brand);
  padding: 7px 16px;
  font-size: 13px;
}
.card__actions .btn--outline:hover {
  background: var(--brand-tint, #EFF1FB);
  border-color: var(--brand);
  color: var(--brand);
}

.card__actions { align-items: center; }

/* ---- Product-page main CTA: solid indigo primary (matches brand) ---- */
.pd-buy__add.btn--cta {
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand);
}
.pd-buy__add.btn--cta svg { stroke: #fff; }
.pd-buy__add.btn--cta:hover {
  background: var(--brand-dark, #2E3FA6);
  border-color: var(--brand-dark, #2E3FA6);
  color: #fff;
}

/* ===== cta-indigo.css ===== */
/* cta-indigo.css — unify ALL primary CTAs to indigo solid (overrides mono.css black).
   Hero "Shop today's deals", hero feature "View deal", mascot-band "Explore all deals",
   and any other .btn--cta. Outline secondaries (.btn--outline) untouched.
   No shadows. Deepen on hover. Loads AFTER mono.css + buy-outline.css. */

.btn--cta {
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand);
  box-shadow: none;
}
.btn--cta svg { stroke: #fff; }
.btn--cta:hover {
  background: var(--brand-dark, #2E3FA6);
  border-color: var(--brand-dark, #2E3FA6);
  color: #fff;
}
.btn--cta:hover svg { stroke: #fff; }

/* ===== ink-unify.css ===== */
/* ink-unify.css — collapse BOTH gray systems (system.css + mono.css) to ONE clean
   neutral ramp. Loads last so it wins everywhere. */
:root{
  --ink:   #16181D;  --mono-ink:   #16181D;   /* primary: names, prices, headings */
  --ink-2: #3D434B;  --mono-ink-2: #3D434B;   /* body / secondary copy */
  --ink-3: #6B727B;  --mono-ink-3: #6B727B;   /* muted meta, struck Amazon price, stock */
}
/* faint tier (eyebrows, review counts) — these used ink-3; nudge to a lighter neutral */
.card__cat, .eyebrow, .card__name + .stars .rev, .rev { color: #9AA0A8 !important; }

/* ===== hover-card-C.css ===== */
/* hover-card-C.css — Soft shadow only, no lift. Nothing moves. */
.card { transition: border-color .2s ease, box-shadow .2s ease; }
.card:hover { transform: none; top: 0; border-color: var(--border-2,#DBDFE6);
  box-shadow: 0 6px 20px rgba(20,24,40,0.10); }

/* ===== hdr-fullwidth.css ===== */
/* hdr-fullwidth.css — stretch header bar contents to full page width,
   and make the search button icon-only (no "Search" text). */

/* Let the inner header row span the full viewport, not the max-width container */
.hdr-top__inner,
.hdr-nav__inner {
  max-width: none !important;
  width: 100%;
  padding-inline: clamp(20px, 3vw, 48px);
}

/* Let the search field grow to fill the available space between logo and actions */
.hdr-top__inner .search {
  flex: 1 1 auto;
  max-width: none !important;
}

/* Icon-only search button: hide the "Search" label, keep just the magnifier */
.hdr-top__inner .search button .lbl { display: none !important; }
.hdr-top__inner .search button {
  padding-inline: 16px;
}
.hdr-top__inner .search button svg { display: block; }

/* Footer + main content stay max-width as before (only the header stretches) */

/* ===== Header action hover states (Account / Favorites / Cart) ===== */
.hdr-act {
  padding: 6px 10px;
  border-radius: var(--r-md);
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
  cursor: pointer;
}
.hdr-act:hover {
  /* subtle translucent wash on the indigo bar — no shadow */
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
}
.hdr-act:active { transform: translateY(0); }
.hdr-act:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}
/* icon nudges a touch on hover for liveliness */
.hdr-act svg { transition: transform .15s ease; }
.hdr-act:hover svg { transform: scale(1.06); }
/* cart badge pops slightly brighter on hover */
.hdr-act:hover .cart-count { background: var(--cta); }

/* ===== mega-menu.css ===== */
/* mega-menu.css — single-step "All Deals" departments menu (Journal-style look, no gate) */
/* Replaces the flat .hdr-nav row. Loads AFTER mono/brand/ink overlays. */

.hdr-nav{background:#fff;border-bottom:1px solid var(--border,#E8EAEE);position:relative;z-index:40}
.hdr-nav__inner{display:flex;align-items:center;gap:10px;max-width:none;width:100%;padding-inline:clamp(20px,3vw,48px);margin:0 auto;min-height:60px}

/* Anchored colored "All Deals" trigger — ROUNDED pill, separated from blue header */
.mm-trigger{
  display:flex;align-items:center;gap:10px;
  background:var(--brand,#3A4FD0);color:#fff;
  font-weight:700;font-size:15px;letter-spacing:.01em;
  padding:0 22px;height:44px;border:none;cursor:pointer;
  border-radius:999px;
  position:relative;z-index:30;font-family:inherit;
  transition:background .18s, box-shadow .18s, transform .12s;
}
.mm-trigger svg{width:18px;height:18px}
.mm-trigger .mm-chev{transition:transform .2s}
.hdr-nav.is-open .mm-trigger .mm-chev{transform:rotate(180deg)}

/* ===== HOVER STATE for the round All Deals button =====
   CHOSEN: Option D — lightens to soft indigo on hover / open (no shadow per preference) */
.mm-trigger:hover,.hdr-nav.is-open .mm-trigger{background:var(--brand-light,#7D8BE0);color:#fff}

/* inline category links — all categories, Clearance pushed to the far right */
.mm-links{display:flex;align-items:center;gap:0;margin-left:8px;flex:1;min-width:0}
.mm-links a{
  font-size:15px;color:var(--ink-2,#3D434B);font-weight:600;white-space:nowrap;
  padding:0 10px;height:60px;display:flex;align-items:center;
  text-decoration:underline;text-decoration-color:transparent;
  text-decoration-thickness:1px;text-underline-offset:5px;
  border-bottom:2px solid transparent;transition:color .15s,text-decoration-color .15s;
}
.mm-links a:hover{color:var(--brand,#3A4FD0);text-decoration-color:var(--brand,#3A4FD0)}
.mm-links a.is-active{color:var(--brand,#3A4FD0);text-decoration-color:var(--brand,#3A4FD0)}
.mm-links a.mm-link--accent{color:var(--coral,#FF5A36);font-weight:700;text-decoration-color:transparent}
.mm-links a.mm-link--accent:hover{color:var(--coral,#FF5A36);text-decoration-color:var(--coral,#FF5A36);border-bottom-color:transparent}
.mm-links__spacer{flex:1;min-width:8px}

/* tighten when space is constrained */
@media (max-width:1320px){
  .mm-links a{padding:0 8px;font-size:14px}
}
@media (max-width:1180px){
  .mm-links a{padding:0 7px;font-size:13px}
}

/* ===== mega panel ===== */
.mm-panel{
  position:absolute;left:clamp(20px,3vw,48px);right:clamp(20px,3vw,48px);top:62px;z-index:25;
  background:#fff;border:1px solid var(--border,#E8EAEE);
  border-radius:14px;box-shadow:0 24px 60px rgba(16,18,29,.14);
  display:none;grid-template-columns:232px 1fr;overflow:hidden;
}
.hdr-nav.is-open .mm-panel{display:grid}

/* category rail */
.mm-rail{background:var(--surface,#F1F2F5);border-right:1px solid var(--border,#E8EAEE);padding:18px 0}
.mm-rail__h{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3,#6B727B);padding:0 22px 10px}
.mm-cat{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:10px 22px;font-size:14px;color:var(--ink,#16181D);text-decoration:none;font-weight:600;
  background:none;border:none;cursor:pointer;font-family:inherit;text-align:left;
}
.mm-cat svg{width:15px;height:15px;opacity:0;transition:.15s}
.mm-cat:hover{background:#fff;color:var(--brand,#3A4FD0)}
.mm-cat:hover svg{opacity:1;color:var(--brand,#3A4FD0)}
.mm-cat.is-active{background:#fff;color:var(--brand,#3A4FD0);box-shadow:inset 3px 0 0 var(--brand,#3A4FD0)}
.mm-cat.is-active svg{opacity:1;color:var(--brand,#3A4FD0)}

/* body */
.mm-body{padding:18px 26px 22px;min-height:430px}
.mm-filter{display:flex;align-items:flex-start;gap:9px;flex-wrap:wrap;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--border,#E8EAEE)}
.mm-filter__lbl{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3,#6B727B);margin-right:2px;display:inline-flex;align-items:center;min-height:34px}
.mm-brand{
  font-size:12.5px;font-weight:700;color:var(--ink-2,#3D434B);
  border:1px solid var(--border,#E8EAEE);border-radius:999px;padding:6px 15px;
  text-decoration:none;background:#fff;cursor:pointer;font-family:inherit;
}
.mm-brand:hover{border-color:var(--brand-light,#7D8BE0);color:var(--brand,#3A4FD0)}
.mm-brand.is-on{background:var(--brand,#3A4FD0);border-color:var(--brand,#3A4FD0);color:#fff}
.mm-brands{display:flex;flex-wrap:wrap;gap:10px 16px;flex:1 1 0;min-width:0}

.mm-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:13px}
.mm-head h4{font-size:15px;margin:0;color:var(--ink,#16181D);font-weight:700}
.mm-head h4 em{font-style:normal;color:var(--brand,#3A4FD0)}
.mm-head a{font-size:13px;color:var(--brand,#3A4FD0);text-decoration:none;font-weight:700}
/* clickable category name in the heading */
.mm-cat-link{text-decoration:none}
.mm-cat-link em{font-style:normal;color:var(--brand,#3A4FD0);border-bottom:1px solid transparent;transition:border-color .15s}
.mm-cat-link:hover em{border-bottom-color:var(--brand,#3A4FD0)}
/* removable brand token (× clears the brand filter) — rendered as a <button> */
.mm-token{display:inline-flex;align-items:center;gap:6px;text-decoration:none;cursor:pointer;
  font-family:inherit;font-size:15px;line-height:1;
  background:rgba(58,79,208,.08);border:1px solid var(--brand-light,#7D8BE0);
  border-radius:999px;padding:3px 7px 3px 12px;vertical-align:middle;transition:background .15s,border-color .15s}
.mm-token em{font-style:normal;color:var(--brand,#3A4FD0);font-weight:700}
.mm-token__x{display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:999px;background:var(--brand,#3A4FD0);color:#fff;
  line-height:0;transition:background .15s}
.mm-token__x svg{display:block}
.mm-token:hover{background:rgba(58,79,208,.14)}
.mm-token:hover .mm-token__x{background:var(--brand-dark,#2E3FA6)}

.mm-prods{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.mm-prod{border:1px solid var(--border,#E8EAEE);border-radius:12px;padding:11px;text-decoration:none;display:block;background:#fff;transition:border-color .15s,box-shadow .15s}
.mm-prod:hover{border-color:var(--brand-light,#7D8BE0);box-shadow:0 8px 20px rgba(16,18,29,.08)}
.mm-prod__well{background:#fff;border:1px solid transparent;border-radius:8px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:9px;position:relative}
.mm-prod__well img{width:78%;height:78%;object-fit:contain;transition:transform .2s}
.mm-prod:hover .mm-prod__well img{transform:scale(1.05)}
.mm-low{position:absolute;top:8px;right:8px;font-size:10px;font-weight:700;background:#fff;color:var(--coral,#FF5A36);border:1px solid var(--border,#E8EAEE);border-radius:999px;padding:2px 8px}
.mm-prod__name{font-size:12px;line-height:1.32;color:var(--ink,#16181D);font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:32px;margin-bottom:5px}
.mm-prod__price{display:flex;align-items:baseline;gap:6px}
.mm-prod__now{font-size:14.5px;font-weight:800;color:var(--ink,#16181D)}
.mm-prod__now--tba{font-size:12.5px;font-weight:600;color:var(--ink-2,#50606C)}
.mm-prod__was{font-size:11.5px;color:var(--ink-3,#9aa0a8);text-decoration:line-through}
.mm-prod__save{font-size:10.5px;font-weight:700;color:#0E9E73;margin-top:2px;display:block}

.mm-empty{padding:40px 8px;color:var(--ink-3,#6B727B);font-size:14px}

/* backdrop catcher (click outside to close) */
.mm-scrim{position:fixed;inset:0;z-index:20;display:none}
.hdr-nav.is-open .mm-scrim{display:block}

@media (max-width:900px){
  .mm-panel{grid-template-columns:1fr}
  .mm-prods{grid-template-columns:repeat(2,1fr)}
  .mm-links{display:none}
}

/* ===== hdr-contentwidth.css ===== */
/* hdr-contentwidth.css — constrain the header bar + nav to the same width as the
   page content area (.wrap, max-width: var(--maxw)), centered, with matching
   horizontal padding. The mega-menu keeps 4 products per row.
   Loaded AFTER hdr-fullwidth.css and mega-menu.css so it wins. */
.hdr-top__inner {
  max-width: var(--maxw) !important;
  width: 100%;
  margin-inline: auto !important;
  padding-inline: var(--s8) !important;
}

/* Nav row (All Deals trigger + category links) matches the same content width.
   Position:relative so the absolutely-positioned mega panel anchors to it. */
.hdr-nav__inner {
  max-width: var(--maxw) !important;
  width: 100%;
  margin-inline: auto !important;
  padding-inline: var(--s8) !important;
  position: relative;
  /* IMPORTANT: must stay visible so the absolutely-positioned mega panel can
     extend BELOW the nav row. An earlier overflow-x:auto (system.css) was
     clipping the dropdown, making the mega menu appear not to open. */
  overflow: visible !important;
}

/* Mega panel must paint above the full-screen scrim (z-index:20). */
.mm-panel { z-index: 30 !important; }

/* Mega panel aligns to the content edges of the now fixed-width nav container
   (which already carries the matching --s8 padding), not the viewport. */
.mm-panel {
  left: 0 !important;
  right: 0 !important;
}

/* Keep 4 products per row in the mega-menu (unchanged, stated explicitly so the
   narrower panel doesn't get re-flowed by any earlier rule) */
.mm-prods {
  grid-template-columns: repeat(4, 1fr) !important;
}

/* The cart count badge is absolutely positioned at right:-10px on the last
   header action, so it overhangs the content edge. Give the actions cluster a
   little right padding so the cart icon + its badge stay inside the content
   boundary, while the icon labels remain visually aligned. */
.hdr-actions {
  padding-right: 12px;
}

/* Make Account / Favorites / Cart the same size, and a bit smaller.
   They previously sized to their label text (47–79px wide). Fix an equal
   width and trim the icon + label so the cluster is more compact. */
.hdr-act {
  width: 66px;
  padding: 6px 4px;
  gap: 3px;
  font-size: 0.8125rem;
}
.hdr-act svg { width: 21px; height: 21px; }

/* Keep all nav links + Clearance inside the content area. The category links
   plus Clearance were wider than the available row, so Clearance overflowed the
   right content edge. Tighten per-link horizontal padding so everything fits,
   and drop Clearance's right padding so its right edge sits flush. */
.mm-links a {
  padding-left: 6px !important;
  padding-right: 6px !important;
}
.mm-links a.mm-link--accent {
  padding-right: 0 !important;
}

/* Pull the cart count badge in close so it overlaps the cart icon's top-right
   corner, instead of floating off to the far right of the button. The icon is
   centered in a 66px button, so position the badge relative to the icon. */
.hdr-act--cart { position: relative; }
.hdr-act--cart .cart-count {
  top: -2px !important;
  right: 14px !important;
  min-width: 16px;
  height: 16px;
  font-size: 0.625rem;
}

/* Logo mark: no tinted box, no border, fully transparent so the 3D mascot
   floats directly on the header. Let the mascot fill the mark a bit more. */
.hdr-top .brand__mark {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  width: 44px;
  height: 44px;
}
.hdr-top .brand__mark img {
  width: 44px !important;
  height: 44px !important;
  object-fit: contain;
}

/* Flat 2D lockup (mascot + wordmark in one transparent PNG) used in the header.
   No box/border; sized to the header height. */
.hdr-top .brand--lockup {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.hdr-top .brand__lockup {
  height: 38px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* Footer: big indigo 3D mascot as a decorative illustration on the right.
   The footer has position:relative so the illustration anchors to it. It sits
   behind the columns (low z-index) and is clipped by overflow:hidden. A soft
   drop-shadow lifts it off the matching indigo background. */
.ftr {
  position: relative;
  overflow: hidden;
}
.ftr__illu {
  position: absolute;
  right: -40px;
  bottom: -70px;
  width: 340px;
  height: auto;
  z-index: 0;
  pointer-events: none;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,0.28));
  transform: rotate(-6deg);
}
.ftr__inner, .ftr__bar { position: relative; z-index: 1; }
/* Footer brand lockup sizing */
.ftr .brand--lockup-ftr { display: inline-flex; align-items: center; text-decoration: none; }
.ftr .brand__lockup { height: 40px; width: auto; display: block; object-fit: contain; }

/* Trim the search bar from the LEFT so its left edge lines up vertically with
   the "Consumer Electronics" category link in the row below (~46px right shift).
   Right edge stays put, so the bar just gets shorter on the left. */
.hdr-top__inner .search { margin-left: 20px; }

/* Nudge the logo right so its horizontal center lines up with the center of the
   "All Deals" button in the row below (~26px). */
.hdr-top__inner .brand--lockup { margin-left: 26px; }

@media (max-width: 900px) {
  .ftr__illu { width: 220px; right: -30px; bottom: -50px; opacity: 0.85; }
}

/* ===== typography-calm.css ===== */
/* ============================================================
   typography-calm.css
   Calmer, less "shouting" weight scale — SITE-WIDE (Satoshi kept).
   Reduces heavy 900/800 weights to 700/600/500 and softens tracking.
   Loaded LAST on every page so it overrides system/home/product/mega-menu.
   ============================================================ */

/* Hero headline ("Curated deals. Limited stock. Better prices than Amazon."):
   thinner + a touch smaller. 900 -> 600. */
.hero h1 {
  font-weight: 600;
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
}

/* Section titles ("Featured deals", "Best deals"...): lighter + a step smaller.
   700 -> 500, --text-2xl -> --text-xl, softer tracking. */
.sec-head__title { font-weight: 500; font-size: var(--text-xl); letter-spacing: -0.005em; }

/* Prices: 900 -> 700 */
.price-now,
.pd-price__now { font-weight: 700; }

/* Product title: 900 -> 700 */
.pd-title { font-weight: 700; }

/* Review score: 900 -> 700 */
.rev-summary__score > span:first-child { font-weight: 700; }

/* Mascot band heading ("We hunt the best deals daily so you don't have to."):
   thinner + smaller. 900 -> 600, drop one size step. */
.mascot-band h3 { font-weight: 600; font-size: var(--text-xl); }

/* Value band heading ("Shop with less noise. Find better value."):
   thinner + smaller. inherited 700 -> 500, cap the clamp lower. */
.story__head h2 { font-weight: 500; font-size: clamp(20px, 2vw, 25px); }

/* Menu trigger: 700 -> 600 ; links 600 -> 500 */
.mm-trigger { font-weight: 600; }
.mm-links a { font-weight: 500; }

/* Uppercase micro-labels: 800 -> 600 */
.mm-rail__h,
.mm-filter__lbl { font-weight: 600; }

/* ===== review-stock-fix.css ===== */
/* review-stock-fix.css — loads LAST so it wins everywhere.
   1) Review stars = amber on every surface (cards, product page, catalog).
      Filled stars amber; empty stars a soft amber tint (not gray).
   2) "In stock" dot = green (emerald), overriding the mono gray. */

:root{
  --star-amber: #F5A623;          /* warm amber rating color */
  --star-amber-off: #F6D9A0;      /* soft amber tint for empty stars */
  --stock-green: #10B981;         /* emerald in-stock */
}

/* ---------- 1. REVIEW STARS → AMBER ---------- */

/* Card rating stars (home, catalog, search, category) */
.card__rating .stars,
.card__rating .star,
.card__rating .star--on,
.card__rating svg.star--on{
  color: var(--star-amber) !important;
  fill: currentColor !important;
}
.card__rating .star--off,
.card__rating svg.star--off{
  color: var(--star-amber-off) !important;
  fill: currentColor !important;
}

/* Catalog svg star variant */
.rstars svg.on{ color: var(--star-amber) !important; fill: currentColor !important; }
.rstars svg.off{ color: var(--star-amber-off) !important; fill: currentColor !important; }

/* Product detail page rating */
.pd-rating .stars,
.pd-rating .stars svg,
.pd-rating .star--on{ color: var(--star-amber) !important; fill: currentColor !important; }
.pd-rating .star--off{ color: var(--star-amber-off) !important; fill: currentColor !important; }

/* Generic fallback: any glyph-based .stars span reads amber */
.stars{ color: var(--star-amber); }

/* ---------- 2. IN-STOCK DOT → GREEN ---------- */
.dot--emerald{ background: var(--stock-green) !important; }
.card__stock .dot--emerald{ background: var(--stock-green) !important; }

/* ---------- 3. EQUAL-HEIGHT PRODUCT PHOTOS ---------- */
/* Tall product images (e.g. phone, vacuum) were forcing their card media
   well taller than the square 1/1 spec, so card photos looked uneven on the
   home grid. Lock the well to a perfect square and contain the image inside
   it via flex + max-dimensions so every product photo shares the same box. */
.card__media{
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.card__media img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain;
  mix-blend-mode: normal;
}

/* Content-page wrapper (theme) */
.hs-page { padding-top: var(--s6); padding-bottom: var(--s16); }
.track-form-wrap { max-width: 720px; }

/* ===== Header search autocomplete ===== */
.hdr-top__inner .search { position: relative; }
.search-suggest {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--sh-lg); padding: 6px; display: none;
  max-height: 70vh; overflow-y: auto;
}
.search-suggest.is-open { display: block; }
.search-suggest .ss-item {
  display: flex; align-items: center; gap: var(--s3);
  padding: 8px; border-radius: var(--r-md);
  color: var(--ink); text-decoration: none;
}
.search-suggest .ss-item:hover,
.search-suggest .ss-item.is-active { background: var(--brand-tint); }
.ss-thumb {
  width: 44px; height: 44px; flex: none; overflow: hidden;
  background: var(--surface-2, #f6f7fb); border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
}
.ss-thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.ss-info { display: flex; flex-direction: column; min-width: 0; }
.ss-name {
  font-size: var(--text-sm); font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ss-price { font-size: var(--text-sm); color: var(--ink-2); margin-top: 2px; }
.ss-price strong { color: var(--brand); font-weight: 700; }
.ss-price s { color: var(--ink-3); margin-left: 5px; font-weight: 500; }
.search-suggest .ss-all {
  display: block; text-align: center; padding: 10px; margin-top: 4px;
  border-top: 1px solid var(--border);
  font-size: var(--text-sm); font-weight: 600; color: var(--brand); text-decoration: none;
}
.search-suggest .ss-all:hover,
.search-suggest .ss-all.is-active { background: var(--brand-tint); border-radius: var(--r-md); }
.search-suggest__empty {
  padding: 16px; text-align: center; color: var(--ink-3); font-size: var(--text-sm);
}

/* ===== AJAX add-to-cart feedback (grid cards + single-product buy box) ===== */
.hs-add-cart, .single_add_to_cart_button { position: relative; }
.hs-add-cart.is-loading, .single_add_to_cart_button.is-loading { color: transparent !important; pointer-events: none; }
.hs-add-cart.is-loading svg, .single_add_to_cart_button.is-loading svg { visibility: hidden; }
.hs-add-cart.is-loading::after, .single_add_to_cart_button.is-loading::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 2px solid rgba(255, 255, 255, .5); border-top-color: #fff;
  border-radius: 50%; animation: hs-spin .6s linear infinite;
}
@keyframes hs-spin { to { transform: rotate(360deg); } }
.hs-add-cart.is-added, .single_add_to_cart_button.is-added {
  background: var(--emerald) !important; border-color: var(--emerald) !important; color: #fff !important; pointer-events: none;
}
.hs-add-cart.is-added svg, .single_add_to_cart_button.is-added svg { color: #fff; }

/* Header cart count bump when an item is added */
@keyframes hs-bump { 0% { transform: scale(1); } 30% { transform: scale(1.4); } 60% { transform: scale(.9); } 100% { transform: scale(1); } }
.cart-count.is-bumped { animation: hs-bump .45s ease; }

/* ===== 404 — page not found ===== */
.err404 { text-align: center; max-width: 620px; margin: 0 auto; padding: var(--s16) var(--s4); }
.err404__code { display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: 2.75rem; color: var(--brand); background: var(--brand-tint); border-radius: var(--r-full); padding: 6px 22px; margin-bottom: var(--s5); letter-spacing: .04em; }
.err404 h1 { font-size: var(--text-2xl); margin-bottom: var(--s3); }
.err404 p { color: var(--ink-2); font-size: var(--text-md); line-height: 1.6; margin-bottom: var(--s6); }

/* ============================================================
   Favorite button — clear saved-state + polish
   (appended; overrides the earlier mono A/B rules by source order)
   ============================================================ */
.card__fav {
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.94);
  border: 1px solid var(--border);
  color: var(--ink-3);
  box-shadow: 0 2px 6px rgba(28,37,44,0.12);
  cursor: pointer;
  transition: transform .18s ease, color .18s ease, background .18s ease,
              box-shadow .18s ease, border-color .18s ease;
}
.card__fav svg { width: 18px; height: 18px; transition: transform .18s ease; }

.card__fav:hover {
  color: var(--coral);
  border-color: color-mix(in srgb, var(--coral) 40%, var(--border));
  box-shadow: 0 5px 14px rgba(28,37,44,0.18);
  transform: translateY(-1px);
}
.card__fav:hover svg { transform: scale(1.12); }
.card__fav:active { transform: scale(0.92); }
.card__fav:focus-visible {
  outline: none;
  border-color: var(--coral);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral) 25%, transparent);
}

/* Saved — filled coral heart, obvious at a glance */
.card__fav.is-fav {
  color: var(--coral);
  background: #fff;
  border-color: color-mix(in srgb, var(--coral) 55%, transparent);
}
.card__fav.is-fav svg path { fill: currentColor; stroke: currentColor; }

/* Tooltip — sits BELOW the button, inside the square media,
   so the media's overflow:hidden can't clip it. */
.card__fav::after {
  content: "Add to favorites";
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  white-space: nowrap;
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  padding: 5px 8px;
  border-radius: 6px;
  opacity: 0;
  transform: translateY(-3px);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
  z-index: 3;
}
.card__fav.is-fav::after { content: "Saved \2713"; background: var(--coral); }
.card__fav:hover::after,
.card__fav:focus-visible::after { opacity: 1; transform: translateY(0); }

/* ============================================================
   Favorites — card remove-on-hover (×) + header badge & popup
   ============================================================ */

/* Saved card: hovering shows a clear remove (×) affordance. */
.card__fav.is-fav:hover {
  color: var(--coral);
  border-color: var(--coral);
  background: color-mix(in srgb, var(--coral) 10%, #fff);
}
.card__fav.is-fav:hover svg { opacity: 0; }
.card__fav.is-fav:hover::before {
  content: "\2715";                 /* ✕ */
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 17px; line-height: 1; font-weight: 700;
  color: var(--coral);
}
.card__fav.is-fav:hover::after { content: "Remove"; background: var(--coral); }

/* Header favorites: count badge (mirrors the cart badge). */
.hdr-fav { position: relative; }
.hdr-act--fav { position: relative; }
.fav-count {
  position: absolute; top: -2px; right: 14px;
  background: var(--coral); color: #fff;
  font-size: 0.625rem; font-weight: 700; line-height: 1;
  min-width: 16px; height: 16px; border-radius: var(--r-full);
  display: grid; place-items: center; padding: 0 4px;
}
.fav-count[hidden] { display: none; }
.fav-count.is-bumped { animation: hs-bump .45s ease; }

/* Header favorites: hover popup (reuses .mini-cart shell). */
.fav-pop { width: 320px; }
.fav-item {
  display: flex; align-items: center; gap: var(--s3);
}
.fav-item .mc-item__info { flex: 1; min-width: 0; }
.fav-item .mc-item__name {
  display: block; color: var(--ink); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fav-item .mc-item__name:hover { color: var(--brand); }
.fav-item__rm {
  border: 0; background: transparent; cursor: pointer;
  color: var(--ink-3); font-size: 20px; line-height: 1;
  width: 26px; height: 26px; border-radius: var(--r-full);
  display: grid; place-items: center; flex-shrink: 0;
  transition: color .15s ease, background .15s ease;
}
.fav-item__rm:hover { color: var(--coral); background: color-mix(in srgb, var(--coral) 12%, transparent); }
.fav-pop__foot { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--border); }
.fav-pop__foot .btn { width: 100%; justify-content: center; }
.fav-pop .mc-empty { color: var(--ink-3); font-size: var(--text-sm); padding: var(--s3) 0; text-align: center; }

/* Favorites popup — loading spinner (shown only on first load / slow network) */
.fav-pop .mc-loading {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: var(--s5) 0; color: var(--ink-3); font-size: var(--text-sm);
}
.fav-pop .mc-spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--brand);
  animation: hsSpin .7s linear infinite;
}
@keyframes hsSpin { to { transform: rotate(360deg); } }

/* Product image link fills the media well so the image itself centres
   (otherwise the <a> wrapper shrinks and the image sits left-aligned). */
.card__media a { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }