/* =========================================================
   BULQQ — "Midnight Pastel" theme, v2: purple + yellow
   ---------------------------------------------------------
   Loaded after style.css (and any per-page stylesheet) on every page,
   so it can redefine the design tokens and restyle components without
   touching style.css or its minified copy. Remove this one <link> in
   includes/header.php and the site is back to the old neon theme.

   The brand pair is purple and yellow again, as in the original
   #7b1ef6 + #ccff00 scheme, now in bright pastel:
     Purple #B996FF  brand, main buttons, links, active nav
     Yellow #E9FF7A  codes and savings, highlights, badges, focus ring
                     (the old lime, softened)
   with supporting pastels, one job each:
     Blush  #FF9EC4  cosplay, wishlist, discount badges
     Sky    #8FCBFF  specs and lace
     Peach  #FFB98A  textures and tools
     Mint   #7DE8C2  in stock
   Pastel fills always carry dark ink text (#170F24); never white.

   Contrast (WCAG AA needs 4.5:1), all measured:
     #F7F3FC text on #120F18 .......... 17.4:1
     #D3CBE1 secondary on #1A1524 ..... 11.4:1
     #ADA4C0 faint on #1A1524 ......... 7.5:1
     #B996FF purple on #1A1524 ........ 7.5:1
     #E9FF7A yellow on #1A1524 ........ 16.2:1
     #170F24 ink on purple / yellow ... 7.9 / 16.9:1
     #FFFFFF on #5B45A8 deep violet ... 7.3:1  (the old gradient's slots)
   ========================================================= */

/* Metric-matched stand-ins while the web fonts load (see header.php). */
@font-face { font-family: 'DM Sans Fallback'; src: local('Arial'), local('Helvetica'); size-adjust: 98%; ascent-override: 98%; descent-override: 30%; line-gap-override: 0%; }
@font-face { font-family: 'Fraunces Fallback'; src: local('Georgia'), local('Times New Roman'); size-adjust: 104%; ascent-override: 94%; descent-override: 24%; line-gap-override: 0%; }

:root {
  --black:       #120F18;
  --black-soft:  #16121F;
  --surface:     #1A1524;
  --surface-2:   #241D32;
  --border:      #382F4A;

  --purple:      #9D74FF;
  --purple-deep: #5B45A8;
  --purple-glow: #B996FF;
  --accent:      #B996FF;
  --accent-dim:  #A784FF;
  --accent-ink:  #170F24;

  --yellow: #E9FF7A;
  --mint:   #7DE8C2;
  --blush:  #FF9EC4;
  --peach:  #FFB98A;
  --sky:    #8FCBFF;
  --butter: #E9FF7A;
  --ink-on-pastel: #170F24;

  --text:       #F7F3FC;
  --text-dim:   #D3CBE1;
  --text-faint: #ADA4C0;

  --gradient-brand:     linear-gradient(90deg, #B996FF 0%, #E9FF7A 100%);
  --gradient-brand-v:   linear-gradient(160deg, #241D32 0%, #120F18 60%, #1C1630 130%);
  --gradient-brand-btn: #5B45A8;
  --shadow-neon-purple: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-accent:      0 10px 28px rgba(185, 150, 255, 0.28);
  --shadow-neon-pink:   0 10px 28px rgba(255, 158, 196, 0.22);
  --focus-ring: 0 0 0 2px #120F18, 0 0 0 4px #E9FF7A;

  --radius: 22px;
  --radius-sm: 12px;
  --font-display: 'Fraunces', 'Fraunces Fallback', Georgia, serif;
  --font-body: 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;
}

body { background: var(--black); color: var(--text); }
h1, h2, h3, h4, .font-display { font-weight: 600; letter-spacing: -0.005em; }
::selection { background: var(--yellow); color: var(--ink-on-pastel); }
.noise-overlay { display: none; }
::-webkit-scrollbar-thumb { background: #4A3F63; }
html { scrollbar-color: #4A3F63 var(--black); }

/* ---- Readability ----
   Long copy one step brighter and a touch larger than the old theme,
   and links underlined in running text so they don't rely on colour. */
.static-content p, .static-content li, .blog-body, .page-header-intro, .page-header p { color: var(--text-dim); }
.static-content a, .blog-body a, .page-header-intro a {
  color: var(--purple-glow);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.static-content a:hover, .blog-body a:hover { color: var(--yellow); }
.blog-body { font-size: 17px; }
.breadcrumbs a, .breadcrumb a { color: var(--text-dim); }
.breadcrumbs a:hover, .breadcrumb a:hover { color: var(--yellow); }

/* Keyboard focus: one yellow ring, everywhere. */
:focus-visible { box-shadow: var(--focus-ring); outline: none; }
a:focus-visible, button:focus-visible, summary:focus-visible { box-shadow: var(--focus-ring); }
input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: var(--focus-ring); border-color: var(--yellow); }

/* ---- Buttons ---- */
.btn { min-height: 44px; }
.btn-primary, .btn-accent {
  background: var(--purple-glow);
  color: var(--ink-on-pastel);
  border: none;
  box-shadow: none;
  font-weight: 700;
}
.btn-primary:hover, .btn-accent:hover {
  background: #C9ADFF;
  color: var(--ink-on-pastel);
  box-shadow: var(--shadow-accent);
}
.btn-primary:visited, .btn-accent:visited { color: var(--ink-on-pastel); }
.btn-outline { border: 1.5px solid #514566; color: var(--text); background: transparent; }
.btn-outline:hover { background: rgba(185, 150, 255, 0.1); border-color: var(--purple-glow); box-shadow: none; color: var(--text); }
.btn-yellow, .btn-mint { background: var(--yellow); color: var(--ink-on-pastel); border: none; font-weight: 700; }
.btn-yellow:hover, .btn-mint:hover { background: #F2FFA6; color: var(--ink-on-pastel); }

/* ---- Form controls ---- */
.sort-select, .price-inputs input, .tool-input, .cos-search input, .blog-search input {
  background: var(--surface);
  border: 1px solid #45395A;
  color: var(--text);
  border-radius: 12px;
}
.sort-select:hover, .price-inputs input:hover { border-color: var(--purple-glow); }
::placeholder { color: #9A90AE; opacity: 1; }

/* ---- Header ---- */
.site-header { background: rgba(18, 15, 24, 0.94); border-bottom-color: #2E263D; }
.site-header.is-condensed { background: rgba(18, 15, 24, 0.98); }
.header-topbar { background: #1C1628; border-bottom: 1px solid #2E263D; }
.topbar-msg { color: var(--text-dim); font-weight: 500; letter-spacing: 0; }
.topbar-msg b { color: var(--yellow); font-weight: 700; }
.topbar-msg a { color: var(--purple-glow); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.topbar-msg a:hover { color: var(--yellow); }
.topbar-msg svg { vertical-align: -3px; margin-right: 6px; }

.logo { gap: 11px; }
.logo-mark {
  background: none;
  box-shadow: 0 6px 18px rgba(157, 116, 255, 0.35);
  width: 42px;
  height: 42px;
  border-radius: 13px;
  overflow: hidden;
  transition: transform 0.25s var(--ease);
}
.logo:hover .logo-mark { transform: rotate(-6deg) scale(1.04); }
.logo-mark svg { display: block; width: 100%; height: 100%; }
.logo-text { font-weight: 700; letter-spacing: -0.02em; font-size: 28px; line-height: 1; }
.logo-dot { color: var(--yellow); }
.site-header.is-condensed .logo-mark { box-shadow: none; }

.header-search input { background: var(--surface); border: 1px solid #45395A; border-radius: 999px; color: var(--text); }
.header-search input:focus { border-color: var(--purple-glow); }
.header-search button { background: var(--purple-glow); color: var(--ink-on-pastel); box-shadow: none; }
.header-search button:hover { background: #C9ADFF; }
.header-actions { gap: 10px; }
.icon-btn { color: var(--blush); border-color: #45395A; }
.icon-btn:hover { color: var(--blush); border-color: var(--blush); }
.icon-btn .badge { background: var(--blush); color: var(--ink-on-pastel); }
.header-find { min-height: 44px; padding: 0 18px; font-size: 14.5px; white-space: nowrap; }
@media (max-width: 760px) { .header-find { display: none; } }

/* Nav */
.nav-link { color: var(--text-dim); font-weight: 500; }
.nav-link:hover { color: var(--text); }
.nav-link.active, .nav-dd.is-current > .nav-dd-summary { background: rgba(185, 150, 255, 0.16); color: var(--text); box-shadow: inset 0 -2px 0 var(--purple-glow); }
.nav-badge, .nav-link.active .nav-badge { background: var(--yellow); color: var(--ink-on-pastel); font-weight: 700; }
.nav-divider { width: 1px; height: 22px; background: #45395A; flex: 0 0 auto; align-self: center; }
.nav-link-cosplay { color: var(--blush); }
.nav-link-cosplay:hover, .nav-link-cosplay.active { color: var(--blush); background: rgba(255, 158, 196, 0.12); box-shadow: inset 0 -2px 0 var(--blush); }
.nav-dd-panel { background: var(--surface); border-color: #45395A; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); }
.nav-dd-head { color: var(--yellow); }
.nav-dd-count { color: var(--text-faint); }
.nav-dd-item:hover, .nav-dd-ref:hover, .nav-dd-tool:hover { background: rgba(185, 150, 255, 0.1); }
.nav-dd-find { width: min(420px, calc(100vw - 48px)); }
.nav-dd-find .nav-dd-ref { display: block; }
.nav-swatches { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 4px 0 12px; }
.nav-swatch { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--text-dim); min-height: 32px; }
.nav-swatch:hover { color: var(--text); }
.nav-swatch i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #514566; flex: 0 0 auto; }

/* ---- Common pieces ---- */
.eyebrow, .section-head .eyebrow, .page-header .eyebrow { color: var(--yellow); }
.page-header h1 { font-weight: 600; letter-spacing: -0.015em; }
.card-badge { background: var(--blush); color: var(--ink-on-pastel); font-weight: 700; }
.filter-list a { color: var(--text-dim); }
.filter-list a.active { background: rgba(185, 150, 255, 0.16); color: var(--text); }
.pagination a:hover { border-color: var(--purple-glow); color: var(--text); }
.pagination > .active { background: var(--purple-glow); color: var(--ink-on-pastel); }
.category-chip { color: var(--text-dim); }
.category-chip:hover { border-color: var(--purple-glow); color: var(--text); }
.category-chip:hover span { color: var(--yellow); }
.facet-opt.is-on .facet-box { background: var(--purple-glow); border-color: var(--purple-glow); color: var(--ink-on-pastel); }
.skip-link { background: var(--yellow); color: var(--ink-on-pastel); }
.quiz-option input:checked + .quiz-option-body { background: var(--purple-glow); border-color: var(--purple-glow); }
.quiz-option input:checked + .quiz-option-body .quiz-option-title,
.quiz-option input:checked + .quiz-option-body .quiz-option-sub { color: var(--ink-on-pastel); }
.quiz-progress-bar { background: var(--yellow); }
.quiz-badge { background: var(--yellow); color: var(--ink-on-pastel); }
.blog-level-chip.active { background: var(--purple-glow); color: var(--ink-on-pastel); }
.style-vibe-tag { background: var(--surface-2); color: var(--purple-glow); }
.level-advanced { background: rgba(233, 255, 122, 0.12); color: var(--yellow); }
.lace-a { stroke: var(--sky); fill: rgba(143, 203, 255, 0.16); }
.lace-b { stroke: var(--sky); fill: rgba(143, 203, 255, 0.08); }
.compare-table tr.is-diff td { background: rgba(233, 255, 122, 0.07); }
.tool-panel-warn { border-color: rgba(233, 255, 122, 0.4); }
.tool-table tr.is-best { background: rgba(233, 255, 122, 0.07); }
.tool-figure-main { border-color: rgba(185, 150, 255, 0.5); }
.tool-pick.is-top { border-color: rgba(185, 150, 255, 0.55); }
.blog-cta .btn-primary { background: var(--purple-glow); color: var(--ink-on-pastel); }
.empty-state { border-color: #45395A; }

/* Back to top, share, cookie banner */
.back-to-top { background: var(--surface-2); border-color: #514566; color: var(--text); }
.back-to-top:hover { border-color: var(--yellow); color: var(--yellow); }
.share-trigger:hover { border-color: var(--purple-glow); }
.consent-banner { background: rgba(26, 21, 36, 0.98); border-top: 1px solid #514566; }
.consent-text { color: var(--text-dim); }
.consent-text a { color: var(--purple-glow); text-decoration: underline; }

/* Codes and savings are yellow everywhere: the old lime, softened. */
.card-code { color: var(--yellow); }
.card-code strong { color: var(--yellow); }
.deal-line { color: var(--text-dim); border-color: #6E7A3E; }
.deal-line strong, .deal-line b { color: var(--yellow); }
.pd-code-price {
  border: 1.5px dashed #7A8A3E;
  background: #1C1F12;
  border-radius: 20px;
}
.pd-code-price-amt { color: var(--yellow); font-family: var(--font-display); font-weight: 600; font-size: 26px; }
.pd-code-price-sub { color: var(--text-dim); }
.pd-code-price-sub a { color: var(--yellow); }
.pd-code-copy { background: var(--yellow); color: var(--ink-on-pastel); border-color: var(--yellow); font-weight: 700; }

/* Spec chips: lace, cap, texture at a glance. */
.spec-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.spec-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--text-dim);
  border: 1px solid #45395A;
  line-height: 1.35;
}
.spec-chip.is-sky { background: #172A3D; color: var(--sky); border-color: #2A4A68; }
.spec-chip.is-butter, .spec-chip.is-yellow { background: #262A14; color: var(--yellow); border-color: #4A5226; }
.spec-chip.is-blush { background: #3A1F31; color: var(--blush); border-color: #5E2F4E; }

/* ---- Product card ---- */
.product-card {
  background: var(--surface);
  border: 1px solid #2E263D;
  border-radius: var(--radius);
  box-shadow: none;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.product-card:hover { border-color: #5A4C75; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4); transform: translateY(-3px); }
.product-card .card-media { background: #2A2045; }
.product-grid > .product-card:nth-child(4n+2) .card-media { background: #1E2E45; }
.product-grid > .product-card:nth-child(4n+3) .card-media { background: #3A2038; }
.product-grid > .product-card:nth-child(4n+4) .card-media { background: #2C2A1A; }
.card-retailer {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.card-category { color: var(--peach); }
.card-title {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-title:hover { color: var(--purple-glow); }
.card-price { font-family: var(--font-display); font-weight: 600; color: var(--text); }
.card-price-old { color: var(--text-faint); }
.card-hook { color: var(--text-dim); }
.card-cta { border: 1.5px solid #514566; color: var(--text); min-height: 44px; }
.card-cta:hover { background: var(--purple-glow); color: var(--ink-on-pastel); border-color: var(--purple-glow); }
.wishlist-toggle { color: var(--blush); }
.wishlist-toggle.active { color: var(--blush); }
.card-compare-label { color: var(--text-dim); }
.card-compare-box { border-color: #6A5C85; }
.compare-toggle:checked + .card-compare-box { background: var(--yellow); border-color: var(--yellow); }

/* ---- Footer ---- */
.site-footer { background: #0D0A13; border-top-color: #2E263D; }
.footer-glow { opacity: 0.1; background: var(--gradient-brand); }
.footer-col h4, .footer-col h4 a { font-family: var(--font-display); font-weight: 600; color: var(--text); }
.footer-col a { color: var(--text-dim); }
.footer-col a:hover { color: var(--yellow); }
.footer-cosplay { color: var(--blush) !important; }
.footer-disclosure p, .footer-bottom { color: var(--text-faint); }

/* ---- Wig page ---- */
.pd-chips { margin: 2px 0 6px; }
.pd-price { font-family: var(--font-display); font-weight: 600; color: var(--text); }
.pd-glance { margin: 22px 0 6px; }
.pd-glance-heading, .pd-fit-heading {
  font-family: var(--font-body);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sky);
  margin: 0 0 10px;
}
.pd-glance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
.pd-glance-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid #2E263D;
}
.pd-glance-tile svg { display: block; }
.pd-glance-tile span { font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); font-weight: 700; }
.pd-glance-tile b { font-size: 15px; color: var(--text); font-weight: 600; }
.pd-fit {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 18px 0 6px;
  padding: 18px;
  border-radius: 20px;
  background: var(--purple-glow);
  color: var(--ink-on-pastel);
}
.pd-fit svg { flex: 0 0 auto; }
.pd-fit p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-on-pastel); }
.pd-fit b { display: block; font-size: 16.5px; }
.pd-fit a { color: var(--ink-on-pastel); font-weight: 700; text-decoration: underline; }
.pd-media { background: #2A2045; border-radius: 28px; }
.pd-thumb.is-on { border-color: var(--yellow); }
.spec-table th { color: var(--text-faint); font-weight: 500; }
.pd-stock { color: var(--text-dim); }
.pd-stock .dot { background: var(--mint); box-shadow: 0 0 8px rgba(125, 232, 194, 0.6); }
.pd-price-check.is-good strong { color: var(--yellow); }
.sticky-buy-bar { background: rgba(18, 15, 24, 0.97); border-top-color: #45395A; }

/* =========================================================
   HOMEPAGE (index.php)
   ========================================================= */
.hp-sec { padding: 72px 0 0; }
.hp-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 28px; }
.hp-head h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; margin: 8px 0 0; }
.hp-head p { color: var(--text-dim); font-size: 17px; line-height: 1.6; margin: 12px 0 0; max-width: 620px; }
.hp-head > a { font-weight: 600; color: var(--purple-glow); }
.hp-head > a:hover { color: var(--yellow); }
.hp-eyebrow { display: inline-block; font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; }

/* Hero */
.hp-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 48px; align-items: center; padding-top: 56px; }
.hp-hero-copy { display: flex; flex-direction: column; gap: 22px; }
.hp-hero h1 { font-size: clamp(42px, 5.4vw, 70px); line-height: 1.02; letter-spacing: -0.02em; margin: 0; }
.hp-hero h1 em {
  font-style: italic;
  color: var(--yellow);
  background: linear-gradient(transparent 82%, rgba(185, 150, 255, 0.55) 82%, rgba(185, 150, 255, 0.55) 94%, transparent 94%);
  padding: 0 2px;
}
.hp-hero-lede { margin: 0; font-size: 18.5px; line-height: 1.6; color: var(--text-dim); max-width: 520px; }
.hp-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hp-ticks { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14.5px; color: var(--text-dim); }
.hp-ticks li { display: flex; align-items: center; gap: 8px; }
.hp-visual { position: relative; min-height: 500px; }
.hp-visual-frame {
  position: absolute;
  inset: 0 40px;
  border-radius: 36px;
  background: #2A2045;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  box-shadow: 0 0 0 1px #3A2F55, 0 30px 80px rgba(157, 116, 255, 0.18);
}
.hp-visual-frame img { width: 100%; height: 100%; object-fit: cover; }
.hp-visual-frame svg { width: 100%; height: 100%; }
.hp-float {
  position: absolute;
  background: var(--surface);
  border: 1px solid #45395A;
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  font-size: 14px;
  color: var(--text);
  max-width: 280px;
  transition: transform 0.2s, border-color 0.2s;
}
.hp-float:hover { transform: translateY(-2px); border-color: var(--purple-glow); color: var(--text); }
.hp-float b { display: block; }
.hp-float small { display: block; color: var(--text-faint); font-size: 12.5px; }
.hp-float-1 { top: 56px; left: 0; }
.hp-float-2 { top: 220px; right: 0; }
.hp-float-3 { bottom: 28px; left: 8px; border: 1.5px dashed #7A8A3E; display: block; }
.hp-float-3 .hp-deal { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.hp-float-3 s { color: var(--text-faint); }
.hp-float-3 .hp-deal b { font-family: var(--font-display); font-size: 26px; font-weight: 600; display: inline; }
.hp-float-3 .hp-deal span { color: var(--yellow); font-weight: 700; font-size: 13.5px; }
@media (max-width: 760px) {
  .hp-visual { min-height: 380px; }
  .hp-visual-frame { inset: 0 0; }
  .hp-float-1 { top: 16px; left: 12px; }
  .hp-float-2 { display: none; }
  .hp-float-3 { bottom: 12px; left: 12px; }
}

/* Textures */
.hp-tex-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 12px; }
.hp-tex {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 18px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid #2E263D;
  color: var(--text);
  transition: border-color 0.2s, transform 0.2s, background 0.2s;
}
.hp-tex:hover { border-color: var(--purple-glow); background: #211A2F; transform: translateY(-2px); color: var(--text); }
.hp-tex b { font-weight: 600; font-size: 15.5px; }
.hp-tex span { font-size: 13px; color: var(--text-faint); line-height: 1.45; }
@media (max-width: 560px) {
  .hp-tex-grid { display: flex; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; scroll-snap-type: x mandatory; }
  .hp-tex { flex: 0 0 120px; scroll-snap-align: start; }
}

/* Colours */
.hp-swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 16px; }
.hp-sw { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--text); font-size: 14px; font-weight: 600; }
.hp-sw:hover { color: var(--yellow); }
.hp-sw i { display: block; width: 76px; height: 76px; border-radius: 50%; border: 3px solid #382F4A; transition: border-color 0.2s, transform 0.2s; }
.hp-sw:hover i { border-color: var(--yellow); transform: scale(1.05); }
.hp-sw small { display: block; font-weight: 500; color: var(--text-faint); font-size: 12.5px; }
@media (max-width: 560px) {
  .hp-swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 8px; }
  .hp-sw i { width: 58px; height: 58px; }
}

/* Fit tools */
.hp-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; }
.hp-tool { display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: 24px; color: var(--ink-on-pastel); transition: transform 0.2s, box-shadow 0.2s; }
.hp-tool:hover { transform: translateY(-3px); color: var(--ink-on-pastel); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); }
.hp-tool h3 { font-size: 24px; margin: 0; color: var(--ink-on-pastel); }
.hp-tool p { margin: 0; font-size: 15px; line-height: 1.55; color: #2A2040; }
.hp-tool .go { font-weight: 700; font-size: 14.5px; }

/* Codes */
.hp-codes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.hp-code { padding: 22px; border-radius: 22px; background: var(--surface); border: 1.5px dashed #7A8A3E; display: flex; flex-direction: column; gap: 10px; }
.hp-code .hp-code-shop { font-size: 12.5px; color: var(--text-faint); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.hp-code .hp-code-tag { font-weight: 700; font-size: 20px; letter-spacing: 0.06em; color: var(--yellow); font-family: ui-monospace, Menlo, Consolas, monospace; }
.hp-code .hp-code-title { margin: 0; color: var(--text-dim); font-size: 14.5px; line-height: 1.5; }
.hp-code .btn { align-self: flex-start; }
.hp-code-more { border-style: solid; border-color: #45395A; justify-content: center; color: var(--text); }
.hp-code-more:hover { border-color: var(--yellow); color: var(--text); }
.hp-code-more b { font-family: var(--font-display); font-weight: 600; font-size: 22px; }
.hp-code-more span { color: var(--yellow); font-weight: 700; }

/* Guides */
.hp-guides { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.hp-guide { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 22px; background: var(--surface); border: 1px solid #2E263D; color: var(--text); transition: border-color 0.2s, transform 0.2s; }
.hp-guide:hover { border-color: var(--purple-glow); color: var(--text); transform: translateY(-2px); }
.hp-guide h3 { font-size: 21px; line-height: 1.25; margin: 0; }
.hp-guide p { margin: 0; color: var(--text-dim); font-size: 14.5px; line-height: 1.55; }
.hp-guide .spec-chip { align-self: flex-start; }

/* Cosplay band */
.hp-cosplay {
  border-radius: 32px;
  background: #2A1A2E;
  border: 1px solid #55304F;
  padding: clamp(24px, 4vw, 44px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  align-items: center;
}
.hp-cosplay h2 { font-size: clamp(26px, 3vw, 36px); margin: 0; }
.hp-cosplay p { margin: 0; color: var(--text-dim); font-size: 16.5px; line-height: 1.6; }
.hp-cosplay .btn-blush { background: var(--blush); color: var(--ink-on-pastel); border: none; font-weight: 700; }
.hp-cosplay .btn-blush:hover { background: #FFB3D2; color: var(--ink-on-pastel); }
.hp-cos-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.hp-cos-chips a { padding: 10px 16px; min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; border-radius: 999px; background: var(--surface); border: 1px solid #45395A; color: var(--text); font-size: 14.5px; font-weight: 600; }
.hp-cos-chips a:hover { border-color: var(--blush); color: var(--text); }
.hp-cos-chips a.is-more { background: transparent; color: var(--blush); border-color: #6A3A5E; }

/* Reduced motion: no lifts or rotations. */
@media (prefers-reduced-motion: reduce) {
  .product-card:hover, .hp-tex:hover, .hp-tool:hover, .hp-guide:hover, .hp-float:hover, .hp-sw:hover i, .logo:hover .logo-mark { transform: none; }
}

/* ---- Readability audit fixes ----
   Found by checking every visible text element's contrast against its
   real background on 14 page types (WCAG AA), and anything under 12px. */
/* Buttons inside running text keep button colours, not link colours. */
.static-content a.btn, .blog-body a.btn, .page-header-intro a.btn { text-decoration: none; }
.static-content a.btn-accent, .static-content a.btn-primary,
.blog-body a.btn-accent, .blog-body a.btn-primary { color: var(--ink-on-pastel); }
.static-content a.btn-outline, .blog-body a.btn-outline { color: var(--text); }
/* Dark ink on every pastel fill. */
.blog-level-chip.active span { color: rgba(23, 15, 36, 0.75); }
.pd-code-copy-hint, .pd-code-copy:hover .pd-code-copy-hint { color: var(--ink-on-pastel); }
/* Nothing under 12px. */
.nav-badge { font-size: 12.5px; padding: 2px 8px; }
.card-retailer { font-size: 12px; }
.pd-glance-tile span { font-size: 12px; }
.cos-swatch-name { font-size: 12px; }
.wc-ref, .wc-ref a { font-size: 12px; }