/* ══════════════════════════════════════════════════════════════
   luggagefashion.com — utility price guide
   Visual language adapted from mycarmerch.com (XStore/WooCommerce):
   slate header, red accent, light product grid, badge system —
   minus cart/checkout/account machinery.
   ══════════════════════════════════════════════════════════════ */

:root{
  --ink:#1a1a1a;
  --text:#555;
  --muted:#7a7a7a;
  --line:#e1e1e1;
  --line-soft:#efefef;
  --bg:#ffffff;
  --surface:#f7f8f9;

  --header:#232f3f;
  --header-text:#ffffff;
  --nav:#f0f2f1;
  --nav-text:#222222;

  --accent:#db2d2f;
  --accent-dark:#b52022;
  --sale:#c62828;
  --new:#2e7d32;
  --star:#fdd835;
  --price:#1a1a1a;

  --radius:6px;
  --radius-lg:10px;
  --container:1240px;
  --shadow:0 2px 10px rgba(0,0,0,.06);
  --shadow-hover:0 8px 24px rgba(0,0,0,.12);

  --font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:14px; line-height:1.6;
}
img{ max-width:100%; display:block; }
a{ color:var(--ink); text-decoration:none; }
a:hover{ color:var(--accent); }
h1,h2,h3,h4,p,ul,ol,figure,table{ margin:0; }
ul,ol{ padding:0; list-style:none; }
button{ font:inherit; cursor:pointer; }
input,select,textarea{ font:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip-link{ position:fixed; top:-60px; left:12px; z-index:200; background:var(--accent); color:#fff; padding:10px 14px; border-radius:var(--radius); }
.skip-link:focus{ top:12px; }

.container{ max-width:var(--container); margin:0 auto; padding:0 20px; }

/* ── Header ──────────────────────────────────────────────── */
.site-header{ background:var(--header); color:var(--header-text); }
.header-main{ display:flex; align-items:center; gap:20px; padding:14px 20px; }
.brand{ display:inline-flex; align-items:center; gap:10px; color:#fff; white-space:nowrap; }
.brand:hover{ color:#fff; }
.brand-mark{ width:28px; height:28px; color:var(--accent); flex:none; }
/* Your own logo file (see partials/header.php + private/site-config.php) */
.brand-logo{ height:52px; width:auto; display:block; }
@media (max-width:900px){ .brand-logo{ height:44px; } }
@media (max-width:640px){ .brand-logo{ height:36px; } }

/* Footer logo (same file, smaller; footer background is the dark slate too) */
.footer-logo-link{ display:inline-block; margin-bottom:10px; }
.footer-logo{ height:44px; width:auto; display:block; }
@media (max-width:640px){ .footer-logo{ height:36px; } }
.brand-text{ font-size:22px; font-weight:400; letter-spacing:.2px; }
.brand-text strong{ font-weight:700; }
.brand-tld{ color:rgba(255,255,255,.6); font-size:14px; }

.header-search{ display:flex; flex:1 1 auto; max-width:640px; margin-left:auto; background:#fff; border-radius:var(--radius); overflow:hidden; }
.header-search input{
  flex:1; border:0; padding:11px 14px; font-size:14px; color:var(--ink); min-width:0;
}
.header-search input:focus{ outline:none; }
.header-search button{
  border:0; background:var(--accent); color:#fff; padding:0 18px; display:grid; place-items:center;
}
.header-search button:hover{ background:var(--accent-dark); }
.header-search button svg{ width:18px; height:18px; }

/* ── Category nav ────────────────────────────────────────── */

/* ── Category nav ────────────────────────────────────────── */
.cat-nav{ background:var(--nav); border-bottom:1px solid var(--line); }
.cat-nav-inner{ display:flex; align-items:center; gap:16px; }
.cat-list{ display:flex; flex-wrap:wrap; gap:2px; }
.cat-list a{
  display:block; padding:12px 11px; font-size:12.5px; font-weight:600; color:var(--nav-text);
  text-transform:uppercase; letter-spacing:.2px;
}
.cat-list a:hover{ color:var(--accent); }

/* ── Breadcrumbs ─────────────────────────────────────────── */
.breadcrumbs{ font-size:12px; color:var(--muted); padding:14px 0 0; }
.breadcrumbs a{ color:var(--muted); }
.breadcrumbs a:hover{ color:var(--accent); }
.breadcrumbs span{ margin:0 6px; }

/* ── Sections & heads ───────────────────────────────────── */
.section{ padding:34px 0; }
.section-tight{ padding:20px 0; }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:18px; }
.section-head h2{ font-size:20px; color:var(--ink); }
.section-head .more{ font-size:13px; font-weight:600; color:var(--accent); }

.page-head{ padding:22px 0 8px; }
.page-head h1{ font-size:26px; line-height:1.25; color:var(--ink); }
.page-head .lede{ margin-top:10px; max-width:78ch; color:var(--text); }
.page-head .feed-note{ margin-top:10px; font-size:12.5px; color:var(--muted); }

/* ── Hero (home) ─────────────────────────────────────────── */
.hero{ background:var(--surface); border-bottom:1px solid var(--line); }
.hero-inner{ display:grid; grid-template-columns:1.15fr .85fr; gap:28px; align-items:center; padding:34px 20px; }
.hero h1{ font-size:30px; line-height:1.2; color:var(--ink); }
.hero p{ margin-top:12px; max-width:56ch; }
.hero-points{ margin-top:16px; display:grid; gap:8px; }
.hero-points li{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; }
.hero-points svg{ width:18px; height:18px; color:var(--new); flex:none; margin-top:2px; }
.hero-panel{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:18px; box-shadow:var(--shadow);
}
.hero-panel h2{ font-size:14px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); }
.hero-panel ul{ margin-top:12px; display:grid; gap:8px; }
.hero-panel li{ display:flex; justify-content:space-between; gap:12px; font-size:13.5px; border-bottom:1px dashed var(--line); padding-bottom:8px; }
.hero-panel li:last-child{ border-bottom:0; padding-bottom:0; }
.hero-panel .k{ color:var(--muted); }
.hero-panel .v{ font-weight:700; color:var(--ink); }

/* ── Product grid & cards ───────────────────────────────── */
.grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.rail{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(210px,1fr); gap:16px; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x mandatory; }
.rail .card{ scroll-snap-align:start; }

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  display:flex; flex-direction:column; overflow:hidden; transition:box-shadow .18s ease, transform .18s ease;
}
.card:hover{ box-shadow:var(--shadow-hover); transform:translateY(-2px); }
.card-media{ position:relative; display:block; background:var(--surface); aspect-ratio:1/1; }
.card-media img{ width:100%; height:100%; object-fit:contain; padding:10px; }
.badges{ position:absolute; top:8px; left:8px; display:flex; flex-direction:column; gap:4px; align-items:flex-start; }
.badge{ font-size:11px; font-weight:700; padding:3px 7px; border-radius:3px; color:#fff; line-height:1.4; }
.badge-sale{ background:var(--sale); }
.badge-hot{ background:var(--header); }
.badge-new{ background:var(--new); }

.card-body{ padding:12px; display:flex; flex-direction:column; gap:7px; flex:1; }
.card-title{ font-size:13.5px; font-weight:600; line-height:1.45; color:var(--ink); }
.card-title a{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card-chip{
  align-self:flex-start; font-size:11.5px; color:var(--muted);
  border:1px solid var(--line); border-radius:3px; padding:2px 6px;
}
.card-price{ display:flex; align-items:baseline; gap:8px; margin-top:auto; }
.price-now{ font-size:17px; font-weight:700; color:var(--price); }
.price-was{ font-size:13px; color:var(--muted); text-decoration:line-through; }
.card-meta{ display:flex; gap:12px; font-size:12px; color:var(--muted); }
.stars{ color:#b98900; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid transparent; border-radius:var(--radius);
  padding:10px 16px; font-size:13.5px; font-weight:600; text-align:center;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-dark); color:#fff; }
.btn-ghost{ background:#fff; border-color:var(--line); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn-card{ background:var(--accent); color:#fff; margin-top:4px; }
.btn-card:hover{ background:var(--accent-dark); color:#fff; }
.btn-lg{ padding:13px 22px; font-size:15px; }
.btn-block{ width:100%; }

/* ── Filters / pagination ───────────────────────────────── */
.toolbar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; margin-bottom:16px; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  border:1px solid var(--line); background:#fff; border-radius:999px; padding:6px 12px;
  font-size:12.5px; color:var(--text);
}
.chip.is-active{ border-color:var(--accent); color:var(--accent); font-weight:600; }
.result-count{ font-size:12.5px; color:var(--muted); }

.pagination{ display:flex; gap:6px; justify-content:center; margin:26px 0 6px; flex-wrap:wrap; }
.pagination a,.pagination span{
  min-width:36px; height:36px; display:grid; place-items:center; padding:0 10px;
  border:1px solid var(--line); border-radius:var(--radius); font-size:13px; background:#fff;
}
.pagination .is-current{ background:var(--header); border-color:var(--header); color:#fff; font-weight:700; }
.pagination a:hover{ border-color:var(--accent); color:var(--accent); }

/* ── Product page ───────────────────────────────────────── */
.product-layout{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:30px; align-items:start; }
.product-gallery{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px; }
.product-gallery img{ width:100%; max-width:520px; margin:0 auto; aspect-ratio:1/1; object-fit:contain; }
.product-title{ font-size:23px; line-height:1.3; color:var(--ink); }

.price-block{
  border:1px solid var(--line); border-radius:var(--radius); padding:16px; background:#fff; margin-top:14px;
}
.price-block .now{ font-size:28px; font-weight:700; color:var(--price); }
.price-block .was{ font-size:15px; color:var(--muted); text-decoration:line-through; margin-left:10px; }
.price-block .save{ display:inline-block; margin-left:10px; background:#fdecea; color:var(--sale); font-size:12px; font-weight:700; padding:3px 7px; border-radius:3px; }
.price-block .stamp{ margin-top:8px; font-size:12.5px; color:var(--muted); }
.price-block .disclaimer{ margin-top:6px; font-size:12px; color:var(--muted); }

.disclosure{
  background:#fff8e6; border:1px solid #f2dfa8; border-radius:var(--radius);
  padding:10px 12px; font-size:12.5px; color:#6b5a20; margin:14px 0;
}

.spec-table{ width:100%; border-collapse:collapse; font-size:13.5px; margin-top:8px; }
.spec-table th,.spec-table td{ text-align:left; padding:9px 10px; border-bottom:1px solid var(--line-soft); vertical-align:top; }
.spec-table th{ width:38%; color:var(--muted); font-weight:600; }

.sidebar{ display:grid; gap:18px; }
.panel{ border:1px solid var(--line); border-radius:var(--radius); background:#fff; padding:16px; }
.panel h2{ font-size:14px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin-bottom:10px; }
.panel ul{ display:grid; gap:8px; font-size:13px; }
.panel li{ display:flex; gap:8px; }
.panel .k{ color:var(--muted); min-width:88px; }

/* ── Ad slots ───────────────────────────────────────────── */
.ad-slot{
  display:grid; place-items:center; gap:4px; text-align:center;
  background:var(--surface); border:1px dashed var(--line); border-radius:var(--radius);
  color:var(--muted); padding:18px;
}
.ad-slot .ad-label{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; }
.ad-slot .ad-placeholder{ font-size:12.5px; }
.ad-leaderboard{ min-height:96px; margin:16px 0; }
.ad-infeed{ grid-column:1/-1; min-height:110px; }
.ad-inline{ min-height:110px; margin:20px 0; }
.ad-sidebar{ min-height:260px; }
.ad-article{ min-height:110px; margin:18px 0; }

/* ── Editorial / guides ─────────────────────────────────── */
.article{ max-width:820px; }
.article h1{ font-size:28px; color:var(--ink); line-height:1.25; }
.article h2{ font-size:20px; color:var(--ink); margin:26px 0 8px; }
.article h3{ font-size:16px; color:var(--ink); margin:20px 0 6px; }
.article p{ margin:10px 0; }
.article ul{ list-style:disc; padding-left:22px; margin:10px 0; }
.article li{ margin:5px 0; }
.article-meta{ font-size:12.5px; color:var(--muted); margin-top:6px; }
.guide-list{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.guide-card{ border:1px solid var(--line); border-radius:var(--radius); padding:16px; background:#fff; }
.guide-card h3{ font-size:15.5px; margin-bottom:6px; }
.guide-card p{ font-size:13px; color:var(--text); }

/* ── Forms (contact) ────────────────────────────────────── */
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:5px; }
.field input,.field textarea{
  width:100%; border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; color:var(--ink); background:#fff;
}
.field input:focus,.field textarea:focus{ border-color:var(--accent); outline:none; }
.form-note{ font-size:12.5px; color:var(--muted); }
.form-status{ font-size:13px; margin-top:10px; }
.hp-field{ position:absolute !important; left:-9999px; }

/* ── Consent banner ─────────────────────────────────────── */
.consent{
  position:fixed; left:0; right:0; bottom:0; z-index:150;
  background:#fff; border-top:1px solid var(--line); box-shadow:0 -6px 20px rgba(0,0,0,.08);
}
.consent-inner{
  max-width:var(--container); margin:0 auto; padding:14px 20px;
  display:flex; gap:18px; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.consent-text{ font-size:12.5px; max-width:70ch; }
.consent-actions{ display:flex; gap:10px; }

/* ── Footer ─────────────────────────────────────────────── */
.site-footer{ background:var(--surface); border-top:1px solid var(--line); margin-top:34px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:24px; padding:34px 20px 22px; }
.footer-brand{ font-size:19px; color:var(--ink); }
.footer-brand strong{ font-weight:700; }
.footer-note{ font-size:12.5px; color:var(--muted); margin-top:8px; }
.footer-head{ font-size:12.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--ink); margin-bottom:10px; }
.footer-list{ display:grid; gap:7px; font-size:13px; }
.footer-list a{ color:var(--text); }
.footer-list a:hover{ color:var(--accent); }
.footer-legal{ border-top:1px solid var(--line); padding:16px 20px 26px; font-size:12px; color:var(--muted); }
.footer-legal p{ margin-bottom:8px; max-width:110ch; }
.footer-copy a{ color:var(--muted); }

/* ── Utility pages ──────────────────────────────────────── */
.prose{ max-width:820px; }
.prose h2{ font-size:19px; color:var(--ink); margin:22px 0 8px; }
.prose p,.prose li{ margin:8px 0; }
.prose ul{ list-style:disc; padding-left:22px; }

.empty{ border:1px dashed var(--line); border-radius:var(--radius); padding:28px; text-align:center; color:var(--muted); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width:1080px){
  .grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .guide-list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px){
  .hero-inner{ grid-template-columns:1fr; }
  .product-layout{ grid-template-columns:1fr; }
  .header-main{ flex-wrap:wrap; gap:14px; }
  .header-meta{ order:3; }
  .cat-toggle{ display:inline-flex; }
  .cat-list{ display:none; flex-direction:column; width:100%; padding-bottom:10px; }
  .cat-list.is-open{ display:flex; }
}
@media (max-width:640px){
  .grid,.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .rail{ grid-auto-columns:minmax(160px,1fr); }
  .footer-grid{ grid-template-columns:1fr; }
  .guide-list{ grid-template-columns:1fr; }
  .hero h1{ font-size:24px; }
  .card-title{ font-size:13px; }
  .topbar-inner{ flex-direction:column; align-items:flex-start; gap:4px; padding:6px 0; }
  .consent-inner{ flex-direction:column; align-items:stretch; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
  .card:hover{ transform:none; }
}

/* ══════════════════════════════════════════════════════════════
   Theme layer v2 — nav, scrolling rails, footer, polish
   ══════════════════════════════════════════════════════════════ */

/* Sticky header with a shadow once scrolled */
.site-header{ position:sticky; top:0; z-index:60; transition:box-shadow .2s ease; }
.site-header.is-stuck{ box-shadow:0 8px 26px rgba(16,24,40,.20); }

/* ── Mega menu ─────────────────────────────────────────────── */
.mega{ position:relative; }
.mega-toggle{
  display:inline-flex; align-items:center; gap:9px; background:none; border:0; cursor:pointer;
  padding:13px 2px; font-size:12.5px; font-weight:700; letter-spacing:.6px;
  text-transform:uppercase; color:var(--nav-text);
}
.mega-toggle:hover{ color:var(--accent); }
.mega-bars, .mega-bars::before, .mega-bars::after{
  content:""; display:block; width:16px; height:2px; background:currentColor; position:relative;
}
.mega-bars::before{ position:absolute; top:-5px; }
.mega-bars::after{ position:absolute; top:5px; }
.mega-chev{ width:14px; height:14px; transition:transform .2s ease; }
.mega-toggle[aria-expanded="true"] .mega-chev{ transform:rotate(180deg); }

.mega-panel{
  position:absolute; left:0; top:calc(100% + 1px); z-index:70;
  width:min(980px, 92vw); background:#fff; border:1px solid var(--line);
  border-radius:0 0 12px 12px; box-shadow:0 26px 50px -20px rgba(16,24,40,.38);
  display:grid; grid-template-columns:1fr 236px; overflow:hidden;
}
.mega-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; padding:14px; }
.mega-item{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:8px; transition:background .15s ease; }
.mega-item:hover{ background:var(--surface); }
.mega-name{ font-size:13.5px; font-weight:600; color:var(--ink); }
.mega-count{ font-size:11.5px; color:var(--muted); }
.mega-aside{ background:var(--surface); border-left:1px solid var(--line); padding:18px 16px; }
.mega-aside-title{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.mega-aside ul{ display:grid; gap:8px; font-size:13px; }
.mega-aside a{ color:var(--ink); font-weight:600; }
.mega-aside a:hover{ color:var(--accent); }

.nav-highlight{ display:none; }
.cat-list a{ border-radius:6px; }
.cat-list a:hover{ background:rgba(35,47,63,.06); }

/* ── Section heads ─────────────────────────────────────────── */
.section-head h2{ position:relative; padding-bottom:8px; }
.section-head h2::after{
  content:""; position:absolute; left:0; bottom:0; width:46px; height:3px; border-radius:3px;
  background:linear-gradient(90deg, var(--accent), #f0a08a);
}

/* ── Scrolling rails ──────────────────────────────────────── */
.rail-section{ padding:26px 0 8px; }
.rail-section .section-head{ margin-bottom:14px; }
.rail-wrap{ position:relative; }
.rail{ scroll-behavior:smooth; scrollbar-width:thin; padding-top:4px; padding-bottom:10px; }
.rail::-webkit-scrollbar{ height:8px; }
.rail::-webkit-scrollbar-thumb{ background:#d6dbe1; border-radius:99px; }
.rail::-webkit-scrollbar-track{ background:transparent; }
.rail .card{ min-width:214px; }
.rail-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  background:rgba(255,255,255,.97); color:var(--ink); display:grid; place-items:center;
  box-shadow:0 8px 20px rgba(16,24,40,.18);
  transition:color .18s ease, background .18s ease;
}
.rail-nav svg{ width:18px; height:18px; }
.rail-nav:hover{ background:#fff; color:var(--accent); }
.rail-prev{ left:6px; }
.rail-next{ right:6px; }

/* ── Hero & cards polish ──────────────────────────────────── */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,#f7f8f9 0%, #eef1f4 100%);
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(42rem 24rem at 88% -20%, rgba(219,45,47,.10), transparent 62%),
             radial-gradient(30rem 20rem at 6% 110%, rgba(35,47,63,.08), transparent 60%);
}
.hero-inner{ position:relative; }
.hero-panel{ border-top:3px solid var(--accent); }
/* Intro section relocated to the bottom of the home page */
.hero-bottom{
  border-top:1px solid var(--line); border-bottom:0;
  background:linear-gradient(180deg,#ffffff 0%, #f4f6f8 100%);
  margin-top:26px;
}
.hero-bottom::before{ opacity:.7; }
.hero-bottom h1{ font-size:26px; }
.hero-bottom .hero-panel{ background:#fff; }
.card{ border-radius:10px; border-color:#e6e8ec; }
.card-media{ background:linear-gradient(180deg,#fbfcfd,#f2f4f7); }
.card-media img{ transition:transform .28s ease; }
.card:hover .card-media img{ transform:scale(1.04); }
.badge{ border-radius:999px; padding:4px 9px; box-shadow:0 2px 6px rgba(16,24,40,.18); }
.btn-card{ border-radius:8px; font-weight:700; }
.disclosure-bottom{ margin:28px 0 8px; }

/* ── Footer as a dark bookend ─────────────────────────────── */
.site-footer{ background:var(--header); border-top:0; color:rgba(255,255,255,.78); }
.footer-brand{ color:#fff; }
.footer-note{ color:rgba(255,255,255,.66); }
.footer-head{ color:#fff; }
.footer-list a{ color:rgba(255,255,255,.78); }
.footer-list a:hover{ color:#fff; }
.footer-legal{ border-top-color:rgba(255,255,255,.14); color:rgba(255,255,255,.6); }
.footer-copy a{ color:rgba(255,255,255,.75); }

/* ── Scroll reveal ────────────────────────────────────────── */
.js .reveal{ opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s ease; }
.js .reveal.is-in{ opacity:1; transform:none; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width:1080px){
  .mega-panel{ grid-template-columns:1fr; width:min(560px,94vw); }
  .mega-aside{ border-left:0; border-top:1px solid var(--line); }
  .mega-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .cat-list{ display:none; }
  .header-actions .header-link{ display:none; }
  .nav-highlight{ margin-left:0; }
  .mega-panel{ position:absolute; left:0; right:auto; width:min(560px,94vw); }
}
@media (max-width:640px){
  .rail .card{ min-width:168px; }
  .rail-nav{ display:none; }
  .mega-grid{ grid-template-columns:1fr; }
  .mega-panel{ width:calc(100vw - 40px); }
}

@media (prefers-reduced-motion: reduce){
  .rail{ scroll-behavior:auto; }
  .js .reveal{ opacity:1; transform:none; }
  .card:hover .card-media img{ transform:none; }
}

/* ══════════════════════════════════════════════════════════════
   Theme layer v3 — star ratings, trust strip, modern polish
   ══════════════════════════════════════════════════════════════ */

/* ── Star ratings (SVG, partial fill, one aria-label) ─────── */
.rating{ display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:12.5px; line-height:1; }
.rating-stars{ position:relative; display:inline-block; }
.rating-base,.rating-fill{ display:block; white-space:nowrap; }
.rating-base svg{ width:14px; height:14px; fill:#dfe3e8; }
.rating-fill{ position:absolute; inset:0; overflow:hidden; }
.rating-fill svg{ width:14px; height:14px; fill:#f6a609; }
.rating-value{ color:var(--ink); font-size:12.5px; }
.rating-count{ color:var(--muted); }
.rating-md{ font-size:13.5px; gap:7px; }
.rating-md .rating-base svg,.rating-md .rating-fill svg{ width:17px; height:17px; }
.rating-empty{ font-size:12px; color:var(--muted); }

/* ── Card proof row + price emphasis ─────────────────────── */
.card-proof{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:20px; }
.card-sold{ font-size:11.5px; color:var(--muted); white-space:nowrap; }
.card-price{ display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; margin-top:auto; }
.price-now{ font-size:19px; font-weight:800; letter-spacing:-.2px; color:var(--ink); }
.price-was{ font-size:12.5px; }
.price-save{ font-size:11px; font-weight:700; color:#1a7f4b; background:#e7f6ee; border-radius:999px; padding:2px 8px; }
.badge-top{ background:#0f766e; }
.card-chip{ margin-top:0; }

/* ── Product page rating summary ─────────────────────────── */
.rating-summary{
  display:flex; align-items:center; gap:14px; background:#fff;
  border:1px solid var(--line); border-radius:12px; padding:14px 16px;
}
.rating-big{ font-size:30px; font-weight:800; line-height:1; color:var(--ink); }
.rating-summary-meta{ display:grid; gap:5px; }
.rating-meta{ font-size:12.5px; color:var(--muted); }
.rating-meta strong{ color:var(--ink); }

/* ── Trust strip ─────────────────────────────────────────── */
.trust-strip{ background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.trust-inner{ display:flex; flex-wrap:wrap; gap:12px 30px; padding:12px 20px; justify-content:center; }
.trust-item{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:#3d4753; }
.trust-item svg{ width:17px; height:17px; color:var(--accent); flex:none; }

/* ── Modern polish ───────────────────────────────────────── */
:root{ --radius:10px; }
body{ font-size:15px; line-height:1.65; }
.card{ border-radius:12px; box-shadow:0 1px 2px rgba(16,24,40,.04); }
.card:hover{ box-shadow:0 14px 32px -14px rgba(16,24,40,.28); }
.card-title a{ font-weight:600; }
.card-title a:hover{ color:var(--accent); }
.btn{ min-height:44px; transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.btn-primary,.btn-card{ box-shadow:0 6px 16px -8px rgba(219,45,47,.55); }
.btn-primary:hover,.btn-card:hover{ box-shadow:0 10px 22px -10px rgba(219,45,47,.72); }
.btn-ghost:hover{ background:var(--surface); }
.badge{ letter-spacing:.2px; }
.rail-nav{ width:44px; height:44px; }

.site-header{
  background:rgba(35,47,63,.92);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
}
.site-header.is-stuck{ background:rgba(35,47,63,.97); }

a:focus-visible,button:focus-visible,.rail:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }

.section{ padding:38px 0; }
.section-head h2{ font-size:21px; }
.page-head h1,.article h1{ letter-spacing:-.2px; }
.guide-card{ border-radius:12px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.guide-card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -16px rgba(16,24,40,.28); border-color:#dfe3e8; }
.header-search{ border-radius:999px; }
.header-search button{ border-radius:999px; margin:3px; }
.field input,.field textarea{ border-radius:10px; }

@media (max-width:640px){
  .price-now{ font-size:17px; }
  .trust-inner{ justify-content:flex-start; gap:10px 18px; }
  .rating-summary{ padding:12px; gap:10px; }
  .rating-big{ font-size:26px; }
  .card-proof{ flex-wrap:wrap; }
}

/* ══════════════════════════════════════════════════════════════
   Theme layer v4 — mobile & touch (ui-ux-pro-max rules)
   44px targets, 16px inputs (no iOS zoom), no horizontal scroll,
   correct stacking order, thumb-reachable primary action.
   ══════════════════════════════════════════════════════════════ */

html{ scroll-padding-top:150px; overflow-x:clip; }
body{ overflow-x:clip; }
img,svg,table{ max-width:100%; }
.card-title a,.product-title,td,th{ overflow-wrap:anywhere; }

/* Product page stacking: gallery -> info (price/CTA) -> specs -> sidebar */
.product-layout{
  display:grid; gap:30px; align-items:start;
  grid-template-columns:minmax(0,1fr) 340px;
  grid-template-areas:
    "gallery info"
    "detail  sidebar";
}
.product-gallery-col{ grid-area:gallery; min-width:0; }
.product-info{ grid-area:info; display:grid; gap:14px; min-width:0; }
.product-detail{ grid-area:detail; min-width:0; }
.product-layout > .sidebar{ grid-area:sidebar; }

/* Thumb-reachable primary action on phones */
.mobile-cta{ display:none; }

/* Touch + type scaling */
@media (max-width:900px){
  html{ scroll-padding-top:170px; }
  .product-layout{
    grid-template-columns:1fr; gap:18px;
    grid-template-areas:"gallery" "info" "detail" "sidebar";
  }
  .product-gallery img{ max-height:330px; }

  .mobile-cta{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    position:fixed; left:0; right:0; bottom:0; z-index:80;
    background:rgba(255,255,255,.98); border-top:1px solid var(--line);
    padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -8px 24px rgba(16,24,40,.12);
  }
  .mobile-cta .now{ font-size:18px; font-weight:800; color:var(--ink); }
  .mobile-cta .was{ font-size:12.5px; color:var(--muted); text-decoration:line-through; margin-left:6px; }
  .mobile-cta .btn{ flex:0 0 auto; }
  body.product{ padding-bottom:88px; }
  body.has-consent .mobile-cta{ display:none; }

  /* mega panel becomes a scrollable sheet */
  .mega-panel{ max-height:min(70vh,520px); overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .mega-item{ min-height:44px; }
  .mega-aside a{ display:block; min-height:44px; padding:10px 0; }

  /* sort chips scroll horizontally instead of stacking */
  .chips{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:6px; scrollbar-width:none; }
  .chips::-webkit-scrollbar{ display:none; }
  .chip{ flex:0 0 auto; min-height:44px; display:inline-flex; align-items:center; }
  .pagination a,.pagination span{ min-width:44px; height:44px; }
  .footer-list a{ display:inline-block; min-height:44px; padding:11px 0; }

  /* prevent iOS zoom on focus */
  .header-search input,.field input,.field textarea,select{ font-size:16px; }
  body{ font-size:16px; line-height:1.6; }
  .result-count,.card-sold,.rating,.micro{ font-size:12.5px; }
}

@media (max-width:640px){
  .section{ padding:26px 0; }
  .rail-section{ padding:20px 0 4px; }
  .card-body{ padding:10px; gap:6px; }
  .spec-table th,.spec-table td{ padding:8px 8px; font-size:13.5px; }
  .product-title{ font-size:19px; }
  .price-block .now{ font-size:24px; }
  .breadcrumbs{ font-size:12px; }
  .hero-bottom h1{ font-size:22px; }
  .mega-grid{ padding:10px; }
  .trust-inner{ padding:10px 16px; }
}

/* Touch devices: no sticky hover lift, add press feedback */
@media (hover: none){
  .card:hover,.guide-card:hover,.btn:hover,.mega-item:hover{ transform:none; }
  .card:active,.guide-card:active{ transform:scale(.99); }
  .btn:active{ transform:translateY(1px); }
  .rail{ scroll-snap-type:x mandatory; }
}

/* ══════════════════════════════════════════════════════════════
   Theme layer v5 — header simplification + mobile menu sheet
   ══════════════════════════════════════════════════════════════ */

/* The utility strip and header links are gone; shorter sticky header,
   so anchor jumps need less offset. */
html{ scroll-padding-top:118px; }

/* Desktop: logo left, search right — nothing else in the row */
.header-main{ padding:14px 20px; }
.header-search{ margin-left:auto; }

/* ── Mobile: logo and search share one row (no second row) ── */
@media (max-width:900px){
  .header-main{ flex-wrap:nowrap; gap:10px; padding:10px 14px; }
  .brand{ flex:0 0 auto; }
  .brand-logo{ height:38px; }
  .header-search{
    flex:1 1 auto; min-width:0; max-width:none; margin-left:0; order:0;
  }
  .header-search input{ padding:9px 12px; text-overflow:ellipsis; }
  .header-search button{ padding:0 14px; }

  /* Mega menu becomes a full-width sheet under the nav */
  .cat-nav{ position:relative; }
  .mega{ position:static; }
  .mega-panel{
    position:absolute; left:0; right:0; width:auto; top:100%;
    max-height:calc(100dvh - 130px); overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    border-radius:0 0 12px 12px;
    grid-template-columns:1fr;
  }
  .mega-grid{ grid-template-columns:repeat(2,1fr); gap:4px; }
  .mega-aside{ border-left:0; border-top:1px solid var(--line); }
  .mega-aside ul{ display:grid; gap:0; }
  .mega-aside a{ display:flex; align-items:center; min-height:44px; padding:0; border-bottom:1px solid var(--line-soft); }
  .mega-item{ min-height:48px; padding:9px 12px; }

  /* nav row: menu button + horizontally scrollable quick links */
  .cat-nav-inner{ gap:10px; padding:0 14px; }
  .cat-list{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .cat-list::-webkit-scrollbar{ display:none; }
  .cat-list a{ min-height:44px; display:flex; align-items:center; white-space:nowrap; }
}

@media (max-width:640px){
  .mega-grid{ grid-template-columns:1fr; }
  .mega-panel{ max-height:calc(100dvh - 118px); }
}

/* ══════════════════════════════════════════════════════════════
   Partner offers (CPA travel programmes — hotels, car hire, tours)
   Deliberately styled differently from product cards: these are
   booking partners, not listings, and must never look like our feed.
   ══════════════════════════════════════════════════════════════ */
.offer-band{ background:var(--line-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.offer-band-product{ background:transparent; border:0; }
.offer-band-product .offer-disclosure{ display:none; }
.offer-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.offer-card{
  position:relative; background:#fff; border:1px solid var(--line); border-left:4px solid var(--accent);
  border-radius:var(--radius); padding:16px 18px; display:flex; flex-direction:column; gap:8px;
}
.offer-label{
  margin:0; font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  color:var(--muted);
}
.offer-title{ margin:0; font-size:16.5px; line-height:1.3; color:var(--ink); }
.offer-blurb{ margin:0; font-size:13.5px; color:var(--muted); line-height:1.5; }
.offer-card .btn-offer{ align-self:flex-start; margin-top:2px; }
.offer-disclosure{ margin:12px 0 0; font-size:11.5px; color:var(--muted); }
.offer-band-product .offer-card{ padding:14px; }

/* ══════════════════════════════════════════════════════════════
   Theme layer v6 — varied homepage rows + tabbed deals block
   (mycarmerch-style: the page is not one endless identical grid)
   ══════════════════════════════════════════════════════════════ */

/* Section headings can carry a one-line explanation */
.section-head-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.section-sub{ margin:0; font-size:13px; color:var(--muted); line-height:1.45; }

/* ── Row sizes ─────────────────────────────────────────────── */
/* feature: fewer, larger cards that lead the page */
.rail-feature{ padding-top:34px; }
.rail-track-feature{ grid-auto-columns:minmax(258px,1fr); }
.rail-track-feature .card{ min-width:262px; }
.card-lg .card-title{ font-size:15px; }
.card-lg .card-body{ padding:14px; gap:9px; }
.card-lg .btn-card{ padding:11px 14px; font-size:14px; }
.card-lg .price-now{ font-size:19px; }

/* compact: denser rows lower down the page */
.rail-track-compact{ grid-auto-columns:minmax(162px,1fr); }
.rail-track-compact .card{ min-width:166px; }
.rail-compact{ padding:20px 0 4px; }
.card-sm .card-body{ padding:10px; gap:5px; }
.card-sm .card-title{ font-size:12.5px; line-height:1.4; }
.card-sm .price-now{ font-size:14.5px; }
.card-sm .btn-card{ padding:8px 10px; font-size:12.5px; }
.card-sm .card-media img{ padding:7px; }
.card-sm .badge{ font-size:10px; padding:2px 6px; }

/* ── Tabbed deals ──────────────────────────────────────────── */
.deals{ background:var(--line-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.deals-tabbar{
  display:flex; gap:4px; overflow-x:auto; scrollbar-width:none;
  border-bottom:1px solid var(--line); margin-bottom:18px;
}
.deals-tabbar::-webkit-scrollbar{ display:none; }
.deals-tab{
  appearance:none; background:none; border:0; border-bottom:2px solid transparent;
  padding:11px 15px; min-height:44px; cursor:pointer; white-space:nowrap;
  font:inherit; font-size:13.5px; font-weight:600; color:var(--muted);
  transition:color .15s ease, border-color .15s ease;
}
.deals-tab:hover{ color:var(--ink); }
.deals-tab.is-active{ color:var(--ink); border-bottom-color:var(--accent); }
.deals-tab:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.deals-panel[hidden]{ display:none !important; }
.deals-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }

@media (max-width:900px){
  .rail-track-feature{ grid-auto-columns:minmax(230px,1fr); }
  .rail-track-feature .card{ min-width:234px; }
  .deals-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:640px){
  .rail-track-feature{ grid-auto-columns:minmax(196px,1fr); }
  .rail-track-feature .card{ min-width:200px; }
  .rail-track-compact{ grid-auto-columns:minmax(146px,1fr); }
  .rail-track-compact .card{ min-width:150px; }
  .deals-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .section-sub{ font-size:12px; }
}

/* ══════════════════════════════════════════════════════════════
   Theme layer v7 — featured hero, oversized cards, "available for less"
   ══════════════════════════════════════════════════════════════ */

/* ── Hero promo (mycarmerch-style: copy left, one big product right) ── */
.hero-promo{
  background:linear-gradient(180deg,#f7f9fb,#eef2f6);
  border-bottom:1px solid var(--line);
  padding:26px 0 30px;
}
.hero-promo-inner{
  display:grid; grid-template-columns:1.05fr .95fr; gap:26px; align-items:center;
}
.hero-promo-copy{ min-width:0; }
.hero-promo-eyebrow{
  margin:0 0 8px; font-size:11.5px; font-weight:700; letter-spacing:.7px; text-transform:uppercase;
  color:var(--accent);
}
.hero-promo-title{
  margin:0 0 10px; font-size:clamp(22px,3.2vw,34px); line-height:1.15; color:var(--ink); letter-spacing:-.4px;
}
.hero-promo-blurb{ margin:0 0 14px; font-size:14.5px; line-height:1.55; color:#4a5568; max-width:52ch; }
.hero-promo-from{
  margin:0; font-size:11.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--muted);
}
.hero-promo-price{ margin:2px 0 16px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.hero-promo-now{ font-size:clamp(26px,4vw,38px); font-weight:800; color:var(--sale); line-height:1; }
.hero-promo-was{ font-size:16px; color:var(--muted); }
.hero-promo-actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.hero-promo-link{ font-size:13.5px; font-weight:600; color:var(--ink); border-bottom:1px solid var(--line); padding-bottom:2px; }
.hero-promo-link:hover{ color:var(--accent); border-bottom-color:var(--accent); }

.hero-promo-media{
  position:relative; display:block; background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:18px; box-shadow:0 24px 60px -34px rgba(16,24,40,.45);
}
.hero-promo-media img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:contain; display:block; }
.hero-promo-badge{
  position:absolute; top:14px; left:14px; background:var(--sale); color:#fff;
  font-size:13px; font-weight:800; padding:6px 11px; border-radius:99px;
}

/* ── Oversized cards (the "bigger product card" treatment) ── */
.featured-band{ padding-top:26px; }
.featured-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.card-xl{ border-radius:14px; }
.card-xl .card-media img{ padding:16px; }
.card-xl .card-body{ padding:16px; gap:10px; }
.card-xl .card-title{ font-size:16px; line-height:1.4; }
.card-xl .card-title a{ -webkit-line-clamp:3; }
.card-xl .price-now{ font-size:22px; font-weight:800; color:var(--sale); }
.card-xl .price-was{ font-size:13.5px; }
.card-xl .price-save{ font-size:12px; }
.card-xl .btn-card{ padding:12px 16px; font-size:14.5px; }
.card-xl .badge{ font-size:12px; padding:4px 9px; }

/* ── "Available for less" flag on product pages ── */
.deal-flag{
  display:flex; gap:14px; align-items:flex-start;
  background:#fff5f5; border:1px solid #f6d5d5; border-left:4px solid var(--sale);
  border-radius:10px; padding:14px 16px; margin:14px 0 0;
}
.deal-flag-plain{ background:var(--line-soft); border-color:var(--line); border-left-color:var(--muted); }
.deal-flag-badge{
  flex:0 0 auto; background:var(--sale); color:#fff; font-size:14px; font-weight:800;
  padding:6px 10px; border-radius:8px; line-height:1;
}
.deal-flag-copy{ min-width:0; }
.deal-flag-title{ margin:0 0 4px; font-size:15px; font-weight:700; color:var(--ink); }
.deal-flag-body{ margin:0; font-size:13.5px; line-height:1.55; color:#4a5568; }
.deal-flag-body strong{ color:var(--sale); }
.deal-flag-plain .deal-flag-body strong{ color:var(--ink); }
.deal-flag-note{ margin:6px 0 0; font-size:11.5px; color:var(--muted); }

/* ── Partner offers: top-of-page band, deliberately loud ── */
.offer-band-home{
  background:linear-gradient(135deg,#fff3f2 0%,#fdeceb 55%,#fff8f6 100%);
  border-top:1px solid #f6d5d5; border-bottom:1px solid #f6d5d5;
  padding:20px 0 22px;
}
.offer-band-home .section-title{
  margin:0 0 12px; font-size:12.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
  color:var(--accent); display:flex; align-items:center; gap:8px;
}
.offer-band-home .section-title::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); flex:0 0 auto;
}
.offer-band-home .offer-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.offer-band-home .offer-card{
  border-left:5px solid var(--accent); border-radius:12px; padding:16px 18px; gap:9px;
  box-shadow:0 14px 34px -22px rgba(16,24,40,.45);
  transition:transform .18s ease, box-shadow .18s ease;
}
.offer-band-home .offer-card:hover{ transform:translateY(-2px); box-shadow:0 20px 44px -22px rgba(16,24,40,.5); }
.offer-band-home .offer-label{
  display:inline-flex; align-items:center; gap:6px; font-size:10.5px; letter-spacing:.7px;
  color:var(--accent); background:#fff1f0; border:1px solid #f7d4d2; border-radius:99px;
  padding:3px 9px; align-self:flex-start;
}
.offer-band-home .offer-title{ font-size:18px; font-weight:700; line-height:1.28; letter-spacing:-.2px; }
.offer-band-home .offer-card .btn-offer{
  align-self:stretch; width:100%; justify-content:center; text-align:center;
  background:var(--accent); border-color:var(--accent); color:#fff;
  padding:12px 16px; font-size:14.5px; font-weight:700; border-radius:10px; margin-top:4px;
}
.offer-band-home .offer-card .btn-offer:hover{ filter:brightness(1.06); color:#fff; }

@media (max-width:640px){
  .offer-band-home{ padding:16px 0 18px; }
  .offer-band-home .offer-grid{ grid-template-columns:1fr; gap:12px; }
  .offer-band-home .offer-title{ font-size:16px; }
  .offer-band-home .offer-card .btn-offer{ padding:11px 14px; font-size:14px; }
}

@media (max-width:900px){
  .hero-promo-inner{ grid-template-columns:1fr; gap:16px; }
  .hero-promo-media{ order:-1; padding:12px; }
  .hero-promo-media img{ max-height:280px; }
  .featured-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .card-xl .price-now{ font-size:19px; }
}
@media (max-width:640px){
  .featured-grid{ grid-template-columns:1fr; gap:12px; }
  .deal-flag{ padding:12px; gap:10px; }
}