/* Eurosell — flat, functional colour.
 *
 * Design rules, deliberately:
 *  · Gradients are for DEPTH, never for decoration: single-hue, two stops, low
 *    contrast. What read as AI-generated was the multi-hue rainbow wash, the glow
 *    orbs and the gradient-clipped headline — those stay gone for good.
 *  · Colour is WAYFINDING, not decoration: each department owns a hue band
 *    (pink→violet / amber→green / cyan→indigo) and its categories sit inside it.
 *    Tile colours are solved for >=4.6:1 on white text in finalize_catalog.py.
 *  · Semantic colour is reserved and never used for decoration:
 *    green = in stock / free, yellow = deal, pink = offer, red = out of stock.
 *  · Sections strictly alternate dark <-> light.
 *  · Product shots only ever sit on WHITE.
 */

:root {
  /* chrome — PURPLE/INDIGO is the brand. (Names kept as --navy-* so the ~90 call
     sites don't churn; the values are what matter.) */
  --navy-900: #150A33;   /* deepest purple-black */
  --navy-800: #1E0F47;
  --navy-700: #2E1065;   /* deep purple */
  --navy-600: #3C1D8A;
  --navy-500: #4C2BB0;

  /* accents */
  --indigo:   #4F46E5;
  --violet:   #8B5CF6;
  --cyan:     #0E7490;
  --cyan-br:  #22D3EE;
  --green:    #14855F;
  --green-br: #2BD9A0;
  --yellow:   #F2B705;
  --yellow-d: #8A6A00;
  --pink:     #D0246B;
  --red:      #C4283C;

  /* surfaces */
  --paper:    #FFFFFF;
  --paper-2:  #F4F6FA;
  --paper-3:  #E9EDF5;

  --on-dark:    #E6EAF6;
  --on-dark-mu: #9AA6C9;
  --on-light:   #131A32;
  --on-light-mu:#5A6484;

  --line-d:   rgba(255,255,255,0.14);
  --line-l:   #DCE2ED;

  --f-disp: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --f-body: 'Inter', system-ui, -apple-system, sans-serif;

  --r:    6px;
  --r-lg: 10px;
  --sh:    0 1px 2px rgba(19,26,50,0.06), 0 4px 12px rgba(19,26,50,0.06);
  --sh-lg: 0 8px 30px rgba(19,26,50,0.14);
  --wrap: 1240px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f-body);
  background: var(--paper);
  color: var(--on-light);
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.ms {
  font-family: 'Material Symbols Rounded';
  font-weight: normal; font-style: normal;
  line-height: 1; letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; word-wrap: normal;
  direction: ltr; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── sections: strict dark <-> light alternation ──────────────────────────── */
.sec { padding: 72px 0; position: relative; }
.sec-dark   { background: linear-gradient(180deg, var(--navy-800), var(--navy-900)); color: var(--on-dark); }
.sec-darker { background: var(--navy-900); color: var(--on-dark); }
.sec-light  { background: linear-gradient(180deg, var(--paper), var(--paper-2) 55%); color: var(--on-light); }
.sec-white  { background: var(--paper); color: var(--on-light); }
/* Map/visit section on a pastel-lavender wash (keeps sec-light's dark-on-light text). */
#visit.sec-light { background: linear-gradient(180deg, #F3F0FD, #E7E1F8 72%); }

.eyebrow {
  font-family: var(--f-disp); font-size: .78rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--cyan-br);
  margin-bottom: 12px;
}
.sec-light .eyebrow, .sec-white .eyebrow { color: var(--indigo); }

h1, h2, h3 { font-family: var(--f-disp); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.sec-head { margin-bottom: 34px; max-width: 720px; }
.sec-head h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin-bottom: 12px; }
.sec-head p { color: var(--on-dark-mu); font-size: 1.05rem; }
.sec-light .sec-head p, .sec-white .sec-head p { color: var(--on-light-mu); }

/* a hairline rule under a heading reads as "designed" where a gradient reads as filler */
.rule { height: 3px; width: 46px; background: var(--cyan-br); margin-bottom: 16px; }
.sec-light .rule, .sec-white .rule { background: var(--indigo); }

/* ── header ───────────────────────────────────────────────────────────────── */
.hdr { position: sticky; top: 0; z-index: 60; background: var(--navy-900); border-bottom: 1px solid var(--line-d); }
.hdr-in { display: flex; align-items: center; gap: 16px; height: 64px; }
.hdr-logo img { height: 24px; width: auto; }
.nav { display: flex; gap: 2px; align-items: center; }
.nav a {
  font-family: var(--f-disp); font-size: .9rem; font-weight: 600;
  padding: 8px 12px; border-radius: var(--r); color: var(--on-dark);
  transition: color .15s, background .15s; white-space: nowrap;
}
.nav a:hover { background: var(--navy-700); color: #fff; }
.nav a.on { color: var(--cyan-br); }

/* search — the single biggest thing that helps someone find what they came for */
.search { position: relative; margin-left: auto; flex: 1 1 260px; max-width: 340px; }
.search input {
  width: 100%; height: 38px; padding: 0 36px 0 34px; font-size: .9rem; font-family: var(--f-body);
  background: var(--navy-700); border: 1px solid var(--line-d); color: #fff; border-radius: var(--r);
}
.search input::placeholder { color: var(--on-dark-mu); }
.search input:focus { outline: 2px solid var(--cyan-br); outline-offset: 0; border-color: transparent; }
.search > .ms { position: absolute; left: 9px; top: 9px; font-size: 20px; color: var(--on-dark-mu); pointer-events: none; }
.sug {
  position: absolute; top: 44px; left: 0; right: 0; z-index: 90; background: #fff;
  border: 1px solid var(--line-l); border-radius: var(--r); box-shadow: var(--sh-lg);
  max-height: 380px; overflow-y: auto; display: none;
}
.sug.on { display: block; }
.sug a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line-l); }
.sug a:last-child { border-bottom: 0; }
.sug a:hover, .sug a.cur { background: var(--paper-2); }
.sug img { width: 38px; height: 38px; object-fit: contain; flex: none; }
.sug b { font-size: .82rem; font-weight: 600; color: var(--on-light); display: block; line-height: 1.25;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sug .s-pr { margin-left: auto; font-family: var(--f-disp); font-weight: 700; font-size: .84rem; color: var(--indigo); flex: none; }
.sug .s-all { justify-content: center; font-weight: 700; font-size: .82rem; color: var(--indigo); font-family: var(--f-disp); }
.sug .s-none { padding: 16px; text-align: center; color: var(--on-light-mu); font-size: .86rem; }

.bag {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  background: linear-gradient(180deg, #3FDCF2, var(--cyan-br)); color: #06283A;
  font-family: var(--f-disp); font-weight: 700; font-size: .86rem;
  padding: 9px 14px; border-radius: var(--r); border: 0; cursor: pointer;
  transition: background .15s;
}
.bag:hover { background: #67E8F9; }
.burger { display: none; background: none; border: 0; color: var(--on-dark); cursor: pointer; padding: 6px; }
.burger .ms { font-size: 26px; }

/* ── hero — flat navy, no wash ─────────────────────────────────────────────── */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 64px 0 68px; border-bottom: 3px solid var(--cyan-br);
  background: linear-gradient(118deg, #2B0B5E 0%, #3A1A8C 38%, #3730A3 68%, #1E3A8A 100%);
}
/* Blurred backdrop of whichever category the banner is currently showing. Swapped by
   main.js on every cycle; cross-fades via two stacked layers so a swap never flashes. */
.hero-bg {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center center; background-repeat: no-repeat;
  opacity: 0; transition: opacity .7s ease;
}
.hero-bg.on { opacity: .5; }
.hero:after {                       /* the overlay the backdrop sits behind */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(27,8,60,0.94) 0%, rgba(43,17,104,0.86) 38%, rgba(55,48,163,0.62) 68%, rgba(30,58,138,0.44) 100%);
}
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); color: #fff; margin-bottom: 18px; }
.hero h1 u { text-decoration: none; color: var(--cyan-br); }
.hero p.lede { font-size: 1.12rem; color: var(--on-dark-mu); max-width: 520px; margin-bottom: 22px; }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }
.kicker {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
  background: var(--yellow); color: #3A2C00; font-family: var(--f-disp); font-weight: 700;
  font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--r);
}
.btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--f-disp); font-weight: 700; font-size: .96rem;
  padding: 14px 22px; border-radius: var(--r); border: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.btn-cyan  { background: linear-gradient(180deg, #3FDCF2, var(--cyan-br)); color: #06283A; }
.btn-cyan:hover { background: #67E8F9; }
.btn-primary { background: linear-gradient(180deg, #4551C4, var(--indigo)); color: #fff; }
.btn-primary:hover { background: var(--navy-500); }
.btn-violet { background: linear-gradient(180deg, var(--violet), #6D28D9); color: #fff; }
.btn-violet:hover { background: #7C3AED; }
.btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.4); }
.btn-ghost:hover { background: rgba(255,255,255,0.1); }
.btn-light { background: var(--on-light); color: #fff; }
.btn-light:hover { background: var(--navy-600); }
.btn-yellow { background: var(--yellow); color: #3A2C00; }
.btn-yellow:hover { background: #FFD24A; }

.hero-stats { display: flex; gap: 26px; flex-wrap: wrap; }
.hero-stats div b { font-family: var(--f-disp); font-size: 1.9rem; color: #fff; display: block; line-height: 1; }
.hero-stats div span { font-size: .74rem; color: var(--on-dark-mu); text-transform: uppercase; letter-spacing: .08em; }

/* hero: 3x3 block cycling category by category */
.hero-art {
  display: grid; grid-template-rows: auto 1fr; gap: 12px;
  /* the translucent/blurred card the products sit on */
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--r-lg);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 18px 60px rgba(10,4,30,0.42);
  padding: 14px;
}
.ha-top {
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  padding: 2px 4px 12px; min-height: 44px;
}
.ha-mark { width: 34px; height: 34px; border-radius: var(--r); flex: none; display: grid; place-items: center;
  background: var(--ha-tile, var(--violet)); }
.ha-shop {
  margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 6px;
  background: #fff; color: #1E0F47; font-family: var(--f-disp); font-weight: 700;
  font-size: .78rem; letter-spacing: .04em; padding: 8px 14px; border-radius: var(--r);
  transition: background .15s, transform .15s;
}
.ha-shop:hover { background: var(--cyan-br); transform: translateY(-1px); }
.ha-shop .ms { font-size: 16px; }
.ha-mark .ms { font-size: 20px; color: #fff; }
.ha-txt { min-width: 0; }
.ha-top b { font-family: var(--f-disp); font-size: 1.08rem; color: #fff; display: block; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ha-top span.n { font-size: .74rem; color: rgba(255,255,255,0.7); }

.ha-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 8px; }
.ha-grid figure {
  background: none; padding: 4px; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.ha-grid figure img { filter: drop-shadow(0 6px 14px rgba(8,3,24,0.45)); transition: transform .25s; }
.ha-grid figure:hover img { transform: scale(1.06); }
.ha-grid img { max-height: 100%; max-width: 100%; object-fit: contain; }
.ha-grid figure.in { animation: ha-in .4s ease backwards; }
.ha-grid figure.in:nth-child(1) { animation-delay: 0ms; }
.ha-grid figure.in:nth-child(2) { animation-delay: 45ms; }
.ha-grid figure.in:nth-child(3) { animation-delay: 90ms; }
.ha-grid figure.in:nth-child(4) { animation-delay: 135ms; }
.ha-grid figure.in:nth-child(5) { animation-delay: 180ms; }
.ha-grid figure.in:nth-child(6) { animation-delay: 225ms; }
@keyframes ha-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ha-top.in { animation: ha-in .35s ease backwards; }
@media (prefers-reduced-motion: reduce) { .ha-grid figure.in, .ha-top.in { animation: none; } }

/* ── trust bar — the conversion furniture, straight under the fold ─────────── */
.trust { background: var(--paper); border-bottom: 1px solid var(--line-l); }
.trust-in { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-it { display: flex; gap: 11px; align-items: flex-start; padding: 18px 16px 18px 0; }
.trust-it .ms { font-size: 22px; flex: none; margin-top: 1px; }
.trust-it:nth-child(1) .ms { color: var(--green); }
.trust-it:nth-child(2) .ms { color: var(--indigo); }
.trust-it:nth-child(3) .ms { color: var(--pink); }
.trust-it:nth-child(4) .ms { color: var(--yellow-d); }
.trust-it b { font-family: var(--f-disp); font-size: .9rem; display: block; color: var(--on-light); }
.trust-it span { font-size: .8rem; color: var(--on-light-mu); }

/* ── category matrix — flat, colour-coded wayfinding ──────────────────────── */
.dept-band { margin-bottom: 40px; position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r-lg); padding: 22px 22px 24px; border: 1px solid var(--line-d); }
.dept-band:last-child { margin-bottom: 0; }
/* Blurred department product-wash: drifts from the section's dark purple at the top
   into the department hue below, so each band reads as its own aisle yet melts into
   the #categories backdrop at its top edge. */
.dept-band .dband-bg { position: absolute; inset: 0; z-index: -2; background-size: cover;
  background-position: center; opacity: .5; }
.dept-band:after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(21,10,51,0.94) 0%, rgba(21,10,51,0.66) 34%, rgba(21,10,51,0.5) 100%); }
.dept-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
  padding-bottom: 10px; border-bottom: 1px solid var(--line-l); }
.sec-dark .dept-head, .sec-darker .dept-head { border-bottom-color: var(--line-d); }
.dept-head .swatch { width: 12px; height: 22px; flex: none; }
.dept-head h3 { font-size: 1.45rem; }
.dept-head .n { font-size: .8rem; color: var(--on-light-mu); }
.sec-dark .dept-head .n { color: var(--on-dark-mu); }
.dept-head a { font-size: .84rem; font-weight: 700; font-family: var(--f-disp); margin-left: auto; color: var(--indigo); }
.sec-dark .dept-head a { color: var(--cyan-br); }
.dept-head a:hover { text-decoration: underline; }

.matrix { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 8px; }
.tile {
  position: relative; border-radius: var(--r); padding: 15px 14px 13px; min-height: 116px;
  display: flex; flex-direction: column; justify-content: space-between;
  color: #fff; background: linear-gradient(155deg, var(--t), var(--t2, var(--t)));
  transition: transform .15s, filter .15s;
}
.tile:hover { filter: brightness(1.14); transform: translateY(-2px); }
.tile .ms { font-size: 26px; }
.tile b { font-family: var(--f-disp); font-size: 1.02rem; line-height: 1.2; display: block; }
.tile span.n { font-size: .74rem; opacity: .85; }
.tile .go { position: absolute; top: 12px; right: 11px; font-size: 16px; opacity: .6; }
.tile:hover .go { opacity: 1; }

/* ── products — no card; shot floats on white, text beneath ───────────────── */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: 30px 20px; }
.prod { display: flex; flex-direction: column; }
.prod .p-img { aspect-ratio: 1; display: grid; place-items: center; position: relative; overflow: hidden; }
.prod .p-img img { max-height: 88%; max-width: 88%; width: auto; height: auto; object-fit: contain; transition: transform .3s ease; }
.prod:hover .p-img img { transform: scale(1.04); }
.prod .p-brand { font-family: var(--f-disp); font-size: .66rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--on-light-mu); margin-top: 10px; }
.prod .p-name { font-size: .89rem; font-weight: 600; line-height: 1.3; color: var(--on-light); margin: 3px 0 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.24em; }
.prod .p-name:hover { color: var(--indigo); }
.prod .p-stock { font-size: .72rem; font-weight: 700; color: var(--green); display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.prod .p-stock .ms { font-size: 13px; }
.prod .p-stock.out { color: var(--on-light-mu); font-weight: 500; }
.prod .p-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.prod .p-price { font-family: var(--f-disp); font-weight: 700; font-size: 1.22rem; color: var(--on-light); }
.prod .p-add {
  background: linear-gradient(180deg, #4551C4, var(--indigo)); color: #fff; border: 0; cursor: pointer;
  font-family: var(--f-disp); font-weight: 700; font-size: .72rem;
  letter-spacing: .08em; text-transform: uppercase; padding: 8px 12px; border-radius: var(--r);
  transition: background .15s;
}
.prod .p-add:hover { background: var(--navy-500); }
.prod .p-add[disabled] { background: var(--paper-3); color: #98A2B8; cursor: not-allowed; }
.badge {
  position: absolute; top: 0; left: 0; z-index: 2;
  font-family: var(--f-disp); font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 7px; border-radius: var(--r); background: var(--yellow); color: #3A2C00;
}
.badge.out { background: var(--paper-3); color: #6B7280; }

/* ── slider rail ──────────────────────────────────────────────────────────── */
.slider { padding: 56px 0; overflow: hidden; }
.rail { display: flex; gap: 12px; width: max-content; animation: slide var(--dur, 64s) linear infinite; }
.rail:hover { animation-play-state: paused; }
.rail.rev { animation-direction: reverse; margin-top: 12px; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .rail { animation: none; } }
.slide { flex: 0 0 auto; width: 168px; padding: 4px; }
.slide .im { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.slide img { max-height: 88%; max-width: 88%; object-fit: contain; }
.slide b { font-family: var(--f-disp); font-size: .76rem; color: var(--on-light); display: block; line-height: 1.3;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2em; }
.slide .pr { font-family: var(--f-disp); font-weight: 700; color: var(--indigo); font-size: .92rem; margin-top: 3px; }

/* ── branded loading ──────────────────────────────────────────────────────────
   A violet sheen on the brand's own surface, not a grey stock shimmer. Only ever
   shown when a fetch is slow enough to notice — never in place of content we
   already have. */
.sk-b {
  background: var(--paper-2);
  background-image: linear-gradient(100deg,
    rgba(139,92,246,0) 20%, rgba(139,92,246,0.16) 46%, rgba(139,92,246,0) 72%);
  background-size: 240% 100%;
  border-radius: var(--r);
  animation: sk 1.15s ease-in-out infinite;
}
@keyframes sk { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@media (prefers-reduced-motion: reduce) { .sk-b { animation: none; } }
.prod.sk { pointer-events: none; }
.prod.sk .p-img { display: block; width: 100%; }
.sk-l { display: block; height: 11px; margin-top: 8px; }

/* inline spinner for anything that has no shape to skeleton */
.spin { width: 22px; height: 22px; border-radius: 50%; display: inline-block;
  border: 2px solid rgba(139,92,246,0.25); border-top-color: var(--violet);
  animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2.4s; } }

/* ── shop layout ──────────────────────────────────────────────────────────── */
.shop-layout { display: grid; grid-template-columns: 244px 1fr; gap: 32px; align-items: start; }
.shop-side { position: sticky; top: 84px; }
.fgroup { border-bottom: 1px solid var(--line-l); padding: 13px 0; }
.fgroup:first-child { padding-top: 0; }
.fgroup:last-child { border-bottom: 0; }
.fgroup h4 { font-family: var(--f-disp); text-transform: uppercase; letter-spacing: .1em; font-size: .74rem;
  color: var(--on-light-mu); display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; }
.fgroup h4 .ms { transition: transform .2s; font-size: 18px; }
.fgroup.collapsed h4 .ms { transform: rotate(-90deg); }
.fgroup.collapsed .fbody { display: none; }
.fbody { margin-top: 8px; display: flex; flex-direction: column; gap: 1px; max-height: 262px; overflow-y: auto; }
.fopt { display: flex; align-items: center; gap: 9px; padding: 6px 7px; border-radius: var(--r);
  font-size: .84rem; cursor: pointer; color: var(--on-light); transition: background .12s; }
.fopt:hover { background: var(--paper-2); }
.fopt input { accent-color: var(--indigo); width: 15px; height: 15px; flex: none; }
.fopt .cnt { margin-left: auto; color: var(--on-light-mu); font-size: .74rem; }
.fopt.on { color: var(--indigo); font-weight: 700; }
.fopt.lnk.cur { background: var(--paper-2); color: var(--indigo); font-weight: 700; }
.fopt .sw { width: 9px; height: 9px; flex: none; }

.shop-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line-l); }
.shop-count { font-size: .86rem; color: var(--on-light-mu); }
.shop-count b { color: var(--on-light); font-family: var(--f-disp); }
.shop-sort { font-family: var(--f-body); font-size: .82rem; padding: 8px 10px; border-radius: var(--r);
  border: 1px solid var(--line-l); background: #fff; color: var(--on-light); cursor: pointer; }
.f-clear { border: 0; color: var(--indigo); font-weight: 700; background: none; padding: 0; cursor: pointer; font-size: .82rem; font-family: var(--f-disp); }
.mob-filter { display: none; }
.pager { display: flex; gap: 5px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }
.pager button { min-width: 36px; height: 36px; border-radius: var(--r); border: 1px solid var(--line-l);
  background: #fff; color: var(--on-light); font-family: var(--f-disp); font-weight: 600; cursor: pointer; }
.pager button:hover:not(:disabled) { border-color: var(--indigo); color: var(--indigo); }
.pager button.on { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.pager button:disabled { opacity: .35; cursor: default; }
.p-empty { text-align: center; padding: 64px 0; color: var(--on-light-mu); }

/* ── enquiry ──────────────────────────────────────────────────────────────── */
.enq-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 44px; align-items: start; }
.enq-pts { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.enq-pt { display: flex; gap: 12px; align-items: flex-start; }
.enq-pt .ms { color: var(--green); font-size: 20px; flex: none; margin-top: 2px; }
.enq-pt b { font-family: var(--f-disp); display: block; font-size: .94rem; color: var(--on-light); }
.enq-pt span { font-size: .86rem; color: var(--on-light-mu); }
form.enq { background: #fff; border: 1px solid var(--line-l); border-radius: var(--r); padding: 26px; box-shadow: var(--sh); }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fld { margin-bottom: 12px; }
.fld label { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--on-light-mu); margin-bottom: 5px; }
.fld input, .fld select, .fld textarea {
  width: 100%; padding: 11px 12px; border-radius: var(--r); font-family: var(--f-body); font-size: .92rem;
  background: #fff; border: 1px solid var(--line-l); color: var(--on-light);
}
.fld textarea { resize: vertical; min-height: 92px; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: 2px solid var(--indigo); outline-offset: 0; border-color: transparent; }
.f-note { font-size: .76rem; color: var(--on-light-mu); margin-top: 10px; }
.f-msg { margin-top: 11px; font-size: .88rem; font-weight: 600; display: none; }
.f-msg.ok { display: block; color: var(--green); }
.f-msg.err { display: block; color: var(--red); }

/* ── CTA cards ────────────────────────────────────────────────────────────── */
.cta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.cta-card { background: var(--navy-700); border: 1px solid var(--line-d); border-radius: var(--r);
  padding: 20px 18px; transition: background .15s, border-color .15s; }
.cta-card:hover { background: var(--navy-600); border-color: var(--cyan-br); }
.cta-card .ms { font-size: 24px; color: var(--cyan-br); margin-bottom: 8px; }
.cta-card b { font-family: var(--f-disp); font-size: 1.06rem; display: block; color: #fff; margin-bottom: 4px; }
.cta-card span { font-size: .82rem; color: var(--on-dark-mu); }
.sec-light .cta-card, .sec-white .cta-card { background: #fff; border-color: var(--line-l); }
.sec-light .cta-card:hover, .sec-white .cta-card:hover { border-color: var(--indigo); background: #fff; box-shadow: var(--sh); }
.sec-light .cta-card .ms, .sec-white .cta-card .ms { color: var(--indigo); }
.sec-light .cta-card b, .sec-white .cta-card b { color: var(--on-light); }
.sec-light .cta-card span, .sec-white .cta-card span { color: var(--on-light-mu); }

/* ── map ──────────────────────────────────────────────────────────────────── */
.map-grid { display: grid; grid-template-columns: .82fr 1.18fr; border: 1px solid var(--line-l); border-radius: var(--r); overflow: hidden; }
.map-info { background: linear-gradient(165deg, var(--navy-700), var(--navy-800)); padding: 34px 30px; color: var(--on-dark); }
.map-info h2 { font-size: 1.8rem; color: #fff; margin-bottom: 6px; }
.map-line { display: flex; gap: 11px; align-items: flex-start; margin-top: 15px; }
.map-line .ms { color: var(--cyan-br); font-size: 19px; flex: none; margin-top: 2px; }
.map-line b { font-family: var(--f-disp); display: block; color: #fff; font-size: .92rem; }
.map-line span, .map-line a { font-size: .86rem; color: var(--on-dark-mu); }
.map-line a:hover { color: var(--cyan-br); }
#map { min-height: 420px; background: var(--paper-3); }
.hours { list-style: none; margin-top: 6px; }
.hours li { display: flex; justify-content: space-between; font-size: .84rem; padding: 2px 0; color: var(--on-dark-mu); }
.hours li.today { color: var(--cyan-br); font-weight: 700; }
.hours li b { font-weight: 600; }

/* ── footer ───────────────────────────────────────────────────────────────── */
.ftr { background: var(--navy-900); color: var(--on-dark); padding: 54px 0 22px; }
.ftr-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 34px; }
.ftr img.lg { height: 24px; margin-bottom: 13px; }
.ftr p { font-size: .86rem; color: var(--on-dark-mu); max-width: 320px; }
.ftr h4 { font-family: var(--f-disp); font-size: .76rem; letter-spacing: .13em; text-transform: uppercase; color: var(--cyan-br); margin-bottom: 11px; }
.ftr ul { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.ftr ul a { font-size: .86rem; color: var(--on-dark-mu); }
.ftr ul a:hover { color: #fff; }
.ftr-bot { border-top: 1px solid var(--line-d); padding-top: 20px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: .8rem; color: #6B769C; }
.ftr-bot a:hover { color: var(--cyan-br); }

/* ── breadcrumb + subpage chrome ──────────────────────────────────────────── */
.crumb-bar { background: var(--navy-900); }
.crumb { font-size: .8rem; color: var(--on-dark-mu); padding: 14px 0; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.crumb a:hover { color: var(--cyan-br); }
.crumb .ms { font-size: 14px; opacity: .5; }
/* Category banner: a pre-blurred reference shot of the category, behind a coloured
   overlay in that category's own hue. --bg is set per page; without it the overlay
   alone still reads as a solid band, so a missing image degrades quietly. */
.sub-hero {
  position: relative; padding: 30px 0 42px; color: #fff; isolation: isolate;
  overflow: hidden;   /* .sh-bg is scaled 1.06 — without this it bleeds over the crumb */
  background: linear-gradient(160deg, var(--h, var(--navy-800)), var(--h2, var(--h, var(--navy-900))));
}
/* A REAL element, not a ::before with var(--bg).
   A relative url() inside a custom property resolves against the STYLESHEET, not the
   document — `url(assets/img/...)` became /assets/css/assets/img/... and 404'd
   silently. An inline background-image on an element resolves against the document. */
.sub-hero .sh-bg {
  position: absolute; inset: 0; z-index: -2;
  /* Width fits the banner, height is cropped — `cover` would crop the sides off
     instead and lose the subject. 100% auto pins the width and lets the height spill. */
  background-size: 100% auto; background-position: center center; background-repeat: no-repeat;
  background-color: var(--h2, var(--navy-900));   /* fills if the image is shorter */
}
.sub-hero.has-bg:after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* Solid behind the copy on the left, opening up on the right so the reference
     shot actually reads. At 88/72 the image was invisible — no point generating it. */
  background: linear-gradient(100deg,
    var(--h, var(--navy-800)) 0%,
    color-mix(in srgb, var(--h, var(--navy-800)) 92%, transparent) 34%,
    color-mix(in srgb, var(--h, var(--navy-800)) 62%, transparent) 62%,
    color-mix(in srgb, var(--h2, var(--navy-900)) 34%, transparent) 100%);
}
.sub-hero.has-bg { background: var(--h2, var(--navy-900)); }
.sub-hero h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); color: #fff; margin-bottom: 8px; }
.sub-hero p { color: rgba(255,255,255,0.86); max-width: 660px; font-size: .96rem; }
.sub-hero .meta { display: flex; gap: 16px; margin-top: 14px; flex-wrap: wrap; font-size: .82rem; color: rgba(255,255,255,0.8); }
.sub-hero .meta b { color: #fff; font-family: var(--f-disp); }
.sub-hero .eyebrow { color: rgba(255,255,255,0.75); }

.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 22px; }
.chip { font-size: .8rem; font-weight: 600; padding: 6px 11px; border-radius: var(--r);
  background: #fff; border: 1px solid var(--line-l); color: var(--on-light); transition: .15s; }
.chip:hover, .chip.on { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.chip.out { opacity: .5; }

/* ── product detail ───────────────────────────────────────────────────────── */
.pd { display: grid; grid-template-columns: 1fr 1fr; gap: 42px; align-items: start; }
.pd-gal .main { background: #fff; border: 1px solid var(--line-l); border-radius: var(--r); padding: 24px; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center; }
.pd-gal .main img { max-height: 100%; object-fit: contain; }
.pd-thumbs { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.pd-thumbs button { width: 64px; height: 64px; background: #fff; border-radius: var(--r); padding: 5px; cursor: pointer;
  border: 1px solid var(--line-l); }
.pd-thumbs button.on { border-color: var(--indigo); border-width: 2px; }
.pd-thumbs img { width: 100%; height: 100%; object-fit: contain; }
.pd-info h1 { font-size: clamp(1.3rem, 2.4vw, 1.85rem); margin: 8px 0 10px; }
.pd-price { font-family: var(--f-disp); font-size: 2.35rem; font-weight: 700; color: var(--on-light); margin: 12px 0; }
.pd-stock { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; font-weight: 700; color: var(--green); }
.pd-stock.out { color: var(--red); }
.pd-feat { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.pd-feat li { display: flex; gap: 9px; font-size: .9rem; color: var(--on-light-mu); align-items: flex-start; }
.pd-feat .ms { color: var(--green); font-size: 17px; flex: none; margin-top: 3px; }
.spec { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: .87rem; }
.spec th, .spec td { text-align: left; padding: 8px 11px; border-bottom: 1px solid var(--line-l); }
.spec th { font-family: var(--f-disp); color: var(--on-light); font-weight: 600; width: 40%; }
.spec td { color: var(--on-light-mu); }
.vari { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
.pd-buy { display: flex; gap: 9px; flex-wrap: wrap; margin: 16px 0; }
.pd-ship { display: flex; flex-direction: column; gap: 7px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-l); }
.pd-ship div { display: flex; gap: 8px; align-items: center; font-size: .84rem; color: var(--on-light-mu); }
.pd-ship .ms { font-size: 17px; color: var(--green); flex: none; }

/* ── responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .hero-grid, .enq-grid, .map-grid, .pd { grid-template-columns: 1fr; }
  .hero-art { max-width: 460px; }
  .ftr-grid { grid-template-columns: 1fr 1fr; }
  .trust-in { grid-template-columns: 1fr 1fr; }
  #map { min-height: 300px; }
  .shop-layout { grid-template-columns: 1fr; }
  .shop-side { position: fixed; inset: 0; z-index: 350; background: #fff; padding: 20px;
    overflow-y: auto; transform: translateX(-100%); transition: transform .25s; display: none; }
  .shop-side.on { display: block; transform: none; }
  .mob-filter { display: inline-flex; }
}
@media (max-width: 860px) {
  /* Logo · burger · basket on one row, search full-width beneath. Without the
     shrink + icon-only basket the three don't fit at 375px and the burger wraps
     onto a line of its own. */
  .hdr-in { flex-wrap: wrap; height: auto; padding-top: 10px; gap: 10px; }
  .hdr-logo { order: 1; }
  .hdr-logo img { height: 20px; }
  .burger { order: 2; margin-left: auto; }
  .bag { order: 3; }
  .search { order: 4; flex-basis: 100%; max-width: none; margin: 0 0 10px; }
  .bag .lbl { display: none; }
  .bag { padding: 9px 11px; }
}
@media (max-width: 720px) {
  .sec { padding: 50px 0; }
  /* Sits below the header's ACTUAL height, not a magic 64px. On mobile the search
     wraps onto its own row (~110px), so a hard-coded 64px left the search peeking out
     from under the open menu. --hdr-h is measured in main.js and kept in step on
     resize; the 64px fallback only applies before the script runs. */
  .nav { position: fixed; top: var(--hdr-h, 64px); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--navy-800); padding: 8px; border-bottom: 1px solid var(--line-d);
    transform: translateY(-140%); transition: transform .25s; z-index: 55; }
  .nav.open { transform: translateY(0); }
  .nav a { padding: 12px; }
  .burger { display: block; }
  .matrix { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
  .tile { min-height: 100px; padding: 12px 11px; }
  .pgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 12px; }
  .f-row, .trust-in { grid-template-columns: 1fr; }
  .ftr-grid { grid-template-columns: 1fr; }
  .hero { padding: 40px 0 48px; }
  .trust-it { padding: 12px 8px 12px 0; }
}

/* ── wholesale & partnership feature pages ────────────────────────────────── */
.feat-hero { position: relative; isolation: isolate; overflow: hidden; padding: 92px 0; color: #fff;
  background: linear-gradient(120deg, #2B0B5E, #3730A3 60%, #0E7490); }
.feat-hero .sh-bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; opacity: .32; }
.feat-hero:after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, rgba(43,11,94,0.92), rgba(55,48,163,0.72) 60%, rgba(14,116,144,0.55)); }
.feat-hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: 14px; max-width: 780px; }
.feat-hero p.lede { font-size: 1.14rem; color: #DDD6FE; max-width: 620px; margin-bottom: 26px; }
.feat-band { position: relative; isolation: isolate; overflow: hidden; }
.feat-band .sh-bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; opacity: .3; }
.feat-band.sec-dark:after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(21,10,51,0.84), rgba(21,10,51,0.92)); }
/* Purple-accented dark feature band (wholesale): a deep-purple veil instead of the
   near-black one, so the section reads distinctly purple while text stays legible. */
.feat-band.sec-dark.accent-purple:after {
  background: linear-gradient(180deg, rgba(46,16,101,0.88), rgba(30,15,71,0.93)); }
/* Purple feature bands (partnerships): a purple veil, not near-black, so the backdrop
   reads AND white text keeps a strong contrast ratio. */
.feat-band.sec-purple:after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, rgba(46,16,101,0.90), rgba(60,29,138,0.78) 60%, rgba(49,46,129,0.72)); }
.sec-purple { background: linear-gradient(160deg, var(--purple), var(--indigo) 70%); color: var(--on-dark); }

.wsteps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; counter-reset: ws; }
.wstep { background: rgba(255,255,255,0.06); border: 1px solid var(--line-d); border-radius: var(--r-lg); padding: 24px 20px; position: relative; }
.wstep:before { counter-increment: ws; content: counter(ws); font-family: var(--f-disp); font-weight: 700; font-size: 1.1rem;
  width: 34px; height: 34px; border-radius: 50%; background: var(--cyan-br); color: #06283A; display: grid; place-items: center; margin-bottom: 14px; }
.wstep b { font-family: var(--f-disp); font-size: 1.05rem; color: #fff; display: block; margin-bottom: 6px; }
.wstep span { font-size: .9rem; color: var(--on-dark-mu); }

.wtiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.wtier { background: #fff; border: 1px solid var(--line-l); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--sh); }
.wtier .amt { font-family: var(--f-disp); font-weight: 700; font-size: 1.6rem; color: var(--indigo); }
.wtier h3 { font-size: 1.15rem; margin: 4px 0 10px; }
.wtier ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.wtier li { display: flex; gap: 9px; font-size: .9rem; color: var(--on-light-mu); align-items: flex-start; }
.wtier li .ms { color: var(--green); font-size: 17px; flex: none; margin-top: 2px; }

.big-cta { text-align: center; }
.big-cta h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin-bottom: 12px; }
.big-cta .row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── CTA tiles (91taqueria-style) ─────────────────────────────────────────── */
.tiles3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 760px; margin: 0 auto; }
.ctile { background: var(--tg, rgba(255,255,255,0.05)); border: 1px solid var(--line-d); border-radius: var(--r-lg);
  padding: 22px 18px; text-align: center; transition: transform .15s, border-color .15s; }
.ctile:hover { transform: translateY(-3px); border-color: var(--tc, var(--cyan-br)); }
.ctile .ms { font-size: 30px; color: var(--tc, var(--cyan-br)); }
.ctile b { font-family: var(--f-disp); font-size: 1rem; color: #fff; display: block; margin-top: 8px; }
.ctile span { font-size: .82rem; color: var(--on-dark-mu); }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 620px; margin: 22px auto 0; }
.duo .btn { justify-content: center; padding: 18px; font-size: 1.05rem; }
.minirow { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; max-width: 760px; margin: 18px auto 0; }
.minibtn { font-family: var(--f-disp); font-weight: 600; font-size: .82rem; padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.07); border: 1px solid var(--line-d); color: var(--on-dark); transition: .15s; }
.minibtn:hover { background: var(--navy-600); color: #fff; border-color: var(--violet); }

/* map marker with the brand logo */
.map-pin { background: #fff; border-radius: 50%; box-shadow: 0 6px 18px rgba(0,0,0,.5);
  display: grid; place-items: center; border: 3px solid var(--cyan-br); overflow: hidden; }
.map-pin img { display: block; object-fit: contain; }
/* Dark CARTO tiles read a touch flat — nudge contrast so white streets pop on black. */
#map .leaflet-tile { filter: contrast(1.12) brightness(0.92); }
#map .leaflet-container { background: #06060B; }
@media (max-width: 720px) { .tiles3 { grid-template-columns: 1fr; } .duo { grid-template-columns: 1fr; } }

/* ── enquiry modal ────────────────────────────────────────────────────────── */
.enq-ov { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 20px;
  background: rgba(11,6,32,0.66); backdrop-filter: blur(4px); opacity: 0; transition: opacity .22s; overflow-y: auto; }
.enq-ov.on { opacity: 1; }
.enq-modal { background: #fff; color: var(--on-light); width: min(560px, 100%); border-radius: var(--r-lg);
  padding: 30px; box-shadow: var(--sh-lg); position: relative; transform: translateY(12px); transition: transform .22s; }
.enq-ov.on .enq-modal { transform: none; }
.enq-x { position: absolute; top: 12px; right: 14px; background: none; border: 0; font-size: 28px; line-height: 1;
  color: var(--on-light-mu); cursor: pointer; }
.enq-modal h3 { font-size: 1.5rem; margin-bottom: 6px; }
.enq-lede { color: var(--on-light-mu); font-size: .92rem; margin-bottom: 18px; }
.enq-modal .fld label { color: var(--on-light-mu); }
.enq-note { font-size: .8rem; color: var(--on-light-mu); margin-top: 10px; text-align: center; }
.enq-note a { color: var(--violet); font-weight: 600; }

/* ── seo.html marketing visuals ───────────────────────────────────────────── */
.kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kpi .k { background: rgba(255,255,255,0.055); border: 1px solid var(--line-d); border-radius: var(--r-lg); padding: 22px; }
.kpi .k b { font-family: var(--f-disp); font-size: 2.2rem; color: #fff; display: block; line-height: 1; }
.kpi .k .up { color: var(--green-br); font-weight: 700; font-size: .82rem; }
.kpi .k span.l { font-size: .84rem; color: var(--on-dark-mu); display: block; margin-top: 6px; }

.pipe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; align-items: stretch; }
.pipe .stg { position: relative; background: rgba(255,255,255,0.05); border: 1px solid var(--line-d); padding: 22px 18px; }
.pipe .stg:not(:last-child):after { content: "→"; position: absolute; right: -13px; top: 50%; transform: translateY(-50%);
  z-index: 2; color: var(--cyan-br); font-size: 22px; font-weight: 700; }
.pipe .stg .ms { font-size: 26px; color: var(--cyan-br); }
.pipe .stg b { font-family: var(--f-disp); display: block; color: #fff; margin: 8px 0 4px; }
.pipe .stg span { font-size: .84rem; color: var(--on-dark-mu); }
.pipe .stg .n { font-family: var(--f-disp); font-weight: 700; color: var(--cyan-br); font-size: 1.3rem; }
.funnel { max-width: 620px; margin: 0 auto; display: flex; flex-direction: column; gap: 7px; }
.frow { display: flex; align-items: center; gap: 14px; }
.fbar { height: 46px; min-width: 128px; border-radius: var(--r); display: flex; align-items: center; padding: 0 14px; color: #fff;
  font-family: var(--f-disp); font-weight: 700; font-size: .9rem; white-space: nowrap; background: linear-gradient(90deg, var(--violet), var(--indigo)); }
.frow .lab { font-size: .88rem; color: var(--on-dark-mu); }
.frow .lab b { color: #fff; font-family: var(--f-disp); }

.cmp2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cmp2 .col { border-radius: var(--r-lg); padding: 26px; }
.cmp2 .old { background: #fff; border: 1px solid var(--line-l); }
.cmp2 .old h3 { color: var(--on-light-mu); }
.cmp2 .old li { color: var(--on-light-mu); }
.cmp2 .new { background: var(--navy-800); color: #fff; }
.cmp2 h3 { font-size: 1.15rem; margin-bottom: 14px; }
.cmp2 ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.cmp2 li { display: flex; gap: 10px; font-size: .92rem; align-items: flex-start; }
.cmp2 li .ms { flex: none; font-size: 18px; margin-top: 1px; }
.cmp2 .new li .ms { color: var(--green-br); }
.cmp2 .old li .ms { color: #C3CAD8; }

.vs { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--r-lg); overflow: hidden; font-size: .92rem; }
.vs th, .vs td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line-l); color: var(--on-light); }
.vs thead th { font-family: var(--f-disp); background: var(--navy-800); color: #fff; }
.vs thead th.win { background: var(--violet); }
.vs td.feat { font-weight: 600; color: var(--on-light); }
.vs td .ms { vertical-align: -3px; font-size: 18px; }
.vs td .yes { color: var(--green); } .vs td .no { color: #C0392B; }
.vs td.euro { background: rgba(139,92,246,0.08); font-weight: 700; color: var(--indigo); }
.vs tr:last-child td { border-bottom: 0; }
.yearcard { background: linear-gradient(150deg, var(--purple), var(--indigo) 70%); border-radius: var(--r-lg); padding: 34px; text-align: center; }
.yearcard .big { font-family: var(--f-disp); font-weight: 700; font-size: clamp(2.4rem,6vw,4rem); color: var(--cyan-br); line-height: 1; }

/* seo — hero stat band (high-contrast headline numbers) */
.statband { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 34px; }
.bigstat { background: rgba(255,255,255,0.06); border: 1px solid var(--line-d); border-radius: var(--r-lg); padding: 18px 16px; }
.bigstat b { font-family: var(--f-disp); font-weight: 700; font-size: clamp(1.55rem, 2.6vw, 2.3rem); color: #fff; display: block; line-height: 1; }
.bigstat span { font-size: .8rem; color: var(--on-dark-mu); display: block; margin-top: 8px; }
.bigstat.accent { background: linear-gradient(160deg, rgba(139,92,246,.3), rgba(79,70,229,.2)); border-color: rgba(139,92,246,.55); }
.bigstat.accent b { color: var(--cyan-br); }

/* seo — search-demand table with relative-volume bars + difficulty pills */
.demand { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--r-lg); overflow: hidden; font-size: .92rem; }
.demand th, .demand td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line-l); color: var(--on-light); vertical-align: middle; }
.demand thead th { font-family: var(--f-disp); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; background: var(--navy-800); color: #fff; }
.demand td.q a { font-weight: 700; color: var(--indigo); }
.demand td.q a:hover { text-decoration: underline; }
.demand td.vol { position: relative; min-width: 172px; }
.demand td.vol .volbar { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 22px; border-radius: 4px;
  background: linear-gradient(90deg, #4F46E5, #8B5CF6); opacity: .2; z-index: 0; }
.demand td.vol b { position: relative; z-index: 1; font-family: var(--f-disp); }
.demand td.note { font-size: .84rem; color: var(--on-light-mu); }
.demand .pill { display: inline-block; font-family: var(--f-disp); font-weight: 700; font-size: .72rem; letter-spacing: .03em;
  color: #fff; background: var(--pc); padding: 3px 9px; border-radius: 20px; }
.demand tfoot td { background: var(--paper-2); font-weight: 700; border-bottom: 0; color: var(--on-light); }
.demand tfoot td.note { color: var(--on-light-mu); font-weight: 400; }

/* seo — revenue mapping (funnel beside a priced table) */
.rev-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 28px; align-items: start; }
.rev-grid .funnel { margin: 0; max-width: none; }
.revt { width: 100%; border-collapse: collapse; background: rgba(255,255,255,0.05); border: 1px solid var(--line-d); border-radius: var(--r-lg); overflow: hidden; font-size: .9rem; }
.revt th, .revt td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line-d); color: var(--on-dark); }
.revt thead th { font-family: var(--f-disp); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--on-dark-mu); background: rgba(255,255,255,0.04); }
.revt td.s { font-weight: 600; color: #fff; }
.revt td.v { font-family: var(--f-disp); font-weight: 700; color: var(--cyan-br); text-align: right; white-space: nowrap; }
.revt td.v.tot { color: #fff; font-size: 1.15rem; }
.revt td.note { font-size: .8rem; color: var(--on-dark-mu); }
.revt .tag { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #DDD6FE; background: rgba(139,92,246,.3); padding: 2px 6px; border-radius: 4px; margin-left: 6px; vertical-align: 1px; }
.revt tfoot td { background: rgba(139,92,246,.12); border-bottom: 0; }
.revnote { font-size: .82rem; color: var(--on-dark-mu); margin-top: 12px; }

/* seo — KPI cards on light sections */
.kpi.light .k { background: #fff; border-color: var(--line-l); }
.kpi.light .k b { color: var(--on-light); }
.kpi.light .k span.l { color: var(--on-light-mu); }

@media (max-width: 820px){ .pipe{grid-template-columns:1fr 1fr} .cmp2{grid-template-columns:1fr} .pipe .stg:after{display:none} .vs{font-size:.82rem} .vs th,.vs td{padding:9px 10px}
  .statband{grid-template-columns:1fr 1fr} .rev-grid{grid-template-columns:1fr} .demand{font-size:.82rem} .demand th,.demand td{padding:9px 10px} }

/* ── basket count badge (mirrors the widget cart via data-wksw-count) ──────── */
.bag { position: relative; }
.bag-n { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--pink); color: #fff; font-family: var(--f-disp);
  font-weight: 800; font-size: 11px; line-height: 18px; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.bag-n[data-wksw-empty="1"] { display: none; }

/* ── attention-looping "Browse the full shop" button ──────────────────────── */
.btn-hue { color: #fff; position: relative; animation: hueBtn 16s linear infinite, huePulse 2.2s ease-in-out infinite; }
.btn-hue .ms:last-child { transition: transform .2s; }
.btn-hue:hover .ms:last-child { transform: translateX(4px); }
@keyframes hueBtn {
  0%   { background: #D0246B; box-shadow: 0 8px 26px rgba(208,36,107,.45); }
  20%  { background: #7A3BD6; box-shadow: 0 8px 26px rgba(122,59,214,.45); }
  40%  { background: #4F46E5; box-shadow: 0 8px 26px rgba(79,70,229,.45); }
  60%  { background: #0E7490; box-shadow: 0 8px 26px rgba(14,116,144,.45); }
  80%  { background: #14855F; box-shadow: 0 8px 26px rgba(20,133,95,.45); }
  100% { background: #D0246B; box-shadow: 0 8px 26px rgba(208,36,107,.45); }
}
@keyframes huePulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.045); } }

/* the "In stock now" band tints to a near-white pastel of the same looping hue */
/* Section stays white — only .btn-hue changes colour. */
@media (prefers-reduced-motion: reduce) {
  .btn-hue { animation: none; background: var(--indigo); }
}

/* ── banner overlay tint (colours with the category animation) ────────────── */
.hero-tint { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--hero-tint, transparent); opacity: .28; mix-blend-mode: soft-light;
  transition: background .7s ease; }