/* ============================================================
   Odyssey Aerials FSE — theme.css
   Design tokens come from theme.json. This file bridges the
   WP preset CSS variables to the shorthand names used throughout
   the component CSS, then defines all component styles.
   ============================================================ */

/* ---- WordPress utilities ---- */
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); word-wrap: normal !important;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ember); color: #1a0600; padding: 10px 16px; border-radius: 0 0 10px 0;
  font-family: var(--font-display); font-weight: 600;
}
.skip-link:focus { left: 0; }
.admin-bar header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) { .admin-bar header.wp-block-template-part { top: 46px; } }

/* ---- toast (add-to-cart confirmation) ---- */
.oa-toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px);
  z-index: 120; background: var(--bg-3); border: 1px solid var(--ember); color: var(--text);
  padding: 12px 20px; border-radius: 12px; font-family: var(--font-display); font-size: 14px;
  display: flex; gap: 10px; align-items: center; box-shadow: 0 0 30px var(--ember-glow);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
}
.oa-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.oa-toast svg { color: var(--ember); }

/* ============================================================
   Design token bridge — maps WP preset vars to shorthand names
   used throughout this stylesheet. The actual values live in
   theme.json; change them there and they flow through here.
   ============================================================ */
:root {
  /* surfaces */
  --bg-0:         var(--wp--preset--color--bg-0);
  --bg-1:         var(--wp--preset--color--bg-1);
  --bg-2:         var(--wp--preset--color--bg-2);
  --bg-3:         var(--wp--preset--color--bg-3);
  --surface-card: var(--wp--preset--color--surface-card);
  --border:       var(--wp--preset--color--border);

  /* text */
  --text:         var(--wp--preset--color--text);
  --text-2:       var(--wp--preset--color--text-2);
  --text-3:       var(--wp--preset--color--text-3);
  --text-faint:   var(--wp--preset--color--text-faint);

  /* accent */
  --ember:        var(--wp--preset--color--ember);
  --ember-bright: var(--wp--preset--color--ember-bright);
  --ember-deep:   var(--wp--preset--color--ember-deep);
  --gold:         var(--wp--preset--color--gold);

  /* alpha derivatives — can't live in theme.json palette */
  --ember-glow:   rgba(255, 90, 31, 0.45);
  --ember-wash:   rgba(255, 90, 31, 0.09);
  --border-soft:  rgba(32, 32, 39, 0.08);

  /* radii */
  --radius-sm:    var(--wp--custom--radius--sm);
  --radius:       var(--wp--custom--radius--md);
  --radius-lg:    var(--wp--custom--radius--lg);

  /* layout */
  --maxw:         var(--wp--style--global--wide-size);
  --gutter:       var(--wp--custom--layout--gutter);

  /* typography */
  --font-display: var(--wp--preset--font-family--display);
  --font-body:    var(--wp--preset--font-family--body);

  /* shadows */
  --shadow-card:  var(--wp--custom--shadow--card);
  --glow-strength: 1;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* molten atmosphere */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1100px 700px at 78% -8%, rgba(255,90,31,calc(0.16 * var(--glow-strength))), transparent 60%),
    radial-gradient(900px 700px at -5% 12%, rgba(120,50,200,calc(0.05 * var(--glow-strength))), transparent 55%),
    radial-gradient(1200px 900px at 50% 120%, rgba(255,120,40,calc(0.07 * var(--glow-strength))), transparent 60%);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 1;
}

/* ---- eyebrow / section label ---- */
.eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ember);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, var(--ember), transparent);
}

/* =================== NAV =================== */
header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(18px) saturate(1.2);
  background: linear-gradient(180deg, rgba(8,8,10,0.92), rgba(8,8,10,0.7));
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  height: 74px;
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.brand { display: flex; align-items: center; gap: 14px; flex-shrink: 0; text-decoration: none; }
.brand-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.16em;
  line-height: 1;
  color: var(--text);
}
/* WP site-title block inside brand */
.brand .wp-block-site-title a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.16em;
  line-height: 1;
  color: var(--text);
  text-decoration: none;
}

.nav-links { display: flex; gap: 4px; margin-left: 14px; list-style: none; padding: 0; }
.nav-links li { list-style: none; }
.nav-links a {
  font-size: 14px;
  white-space: nowrap;
  color: var(--text-2);
  padding: 9px 14px;
  border-radius: 99px;
  transition: color .18s, background .18s;
  font-weight: 400;
}
.nav-links a:hover { color: var(--text); background: var(--bg-2); }
.nav-links .current-menu-item > a { color: var(--text); }

/* WP navigation block inside .nav-links area */
.wp-block-navigation .wp-block-navigation-item__content {
  font-size: 14px;
  color: var(--text-2);
  padding: 9px 14px;
  border-radius: 99px;
  transition: color .18s, background .18s;
}
.wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--text); background: var(--bg-2); }

/* Mobile menu overlay (fse#5).
   The sticky header sets backdrop-filter, which makes it the containing block
   for the navigation block's position:fixed overlay. Core's `inset:0` then
   resolves against the 74px header instead of the viewport, collapsing the open
   menu so only the first item ("Shop") showed — in the default light palette.
   Size it with viewport units (not inset) to escape the trap, and restyle dark. */
.wp-block-navigation__responsive-container.is-menu-open {
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  width: 100vw;
  height: 100dvh;
  background-color: var(--bg-0) !important;
  padding: 84px 0 40px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  display: block;
  width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.01em;
  padding: 16px var(--gutter);
  border-radius: 0;
  border-bottom: 1px solid var(--border);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
  color: var(--ember-bright);
  background: transparent;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  top: 26px;
  right: var(--gutter);
  color: var(--text);
}

.nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.nav-search, .wp-block-search.nav-search {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 8px 15px;
  width: 230px;
  transition: border-color .18s, width .18s;
}
.nav-search:focus-within { border-color: var(--ember); width: 260px; }
.nav-search .wp-block-search__input,
.nav-search input {
  background: none; border: none; outline: none; color: var(--text);
  font-family: inherit; font-size: 13.5px; width: 100%;
}
.nav-search input::placeholder { color: var(--text-faint); }
.nav-search .wp-block-search__button { display: none; }

.icon-btn {
  position: relative;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-2);
  transition: all .18s;
}
.icon-btn:hover { color: var(--text); border-color: var(--text-3); }
.cart-count {
  position: absolute; top: -7px; right: -7px;
  min-width: 19px; height: 19px; padding: 0 5px;
  background: var(--ember); color: #150600;
  font-size: 11px; font-weight: 700; font-family: var(--font-display);
  border-radius: 99px; display: grid; place-items: center;
  box-shadow: 0 0 12px var(--ember-glow);
}
.cart-count:empty { display: none; }

/* WooCommerce customer-account + mini-cart blocks in nav */
.wc-block-customer-account,
.wc-block-mini-cart {
  color: var(--text-2);
}
.wc-block-customer-account a,
.wc-block-mini-cart__button {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-2);
  transition: all .18s;
}
.wc-block-customer-account a:hover,
.wc-block-mini-cart__button:hover { color: var(--text); border-color: var(--text-3); }
.wc-block-mini-cart__quantity-badge {
  background: transparent;
  position: relative;
}
/* The count bubble (only visible when cart has items) */
.wc-block-mini-cart__badge {
  position: absolute;
  top: -5px; left: 55%;
  min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--ember); color: #150600;
  font-size: 10px; font-weight: 700; font-family: var(--font-display);
  border-radius: 99px; display: grid; place-items: center;
  box-shadow: 0 0 8px var(--ember-glow);
}

/* =================== BUTTONS =================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-display);
  font-weight: 500; font-size: 14px;
  padding: 13px 22px; border-radius: 12px;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .12s, box-shadow .2s, background .2s, border-color .2s;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(180deg, var(--ember-bright), var(--ember));
  color: #1a0600;
  box-shadow: 0 0 0 1px rgba(255,90,31,0.4), 0 10px 30px -8px var(--ember-glow);
  font-weight: 600;
}
.btn-primary:hover { box-shadow: 0 0 0 1px rgba(255,90,31,0.6), 0 14px 38px -8px var(--ember-glow); }
.btn-ghost {
  background: var(--bg-2);
  border-color: var(--border);
  color: var(--text);
}
.btn-ghost:hover { border-color: var(--text-3); background: var(--bg-3); }
.btn-sm { padding: 9px 15px; font-size: 13px; border-radius: 10px; }
.btn-block { width: 100%; }

/* WP button block */
.wp-block-button__link {
  font-family: var(--font-display) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link {
  background: var(--bg-2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

/* =================== HERO =================== */
.hero { position: relative; padding-top: 64px; overflow: hidden; }
.hero .wp-block-columns { align-items: center; min-height: 560px; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px;
  align-items: center;
  min-height: 560px;
}
.hero-copy { max-width: 540px; }
.hero h1, .hero .wp-block-heading {
  font-size: clamp(48px, 7vw, 92px);
  font-weight: 600;
  margin: 22px 0 0;
  line-height: 0.95;
}
.hero h1 .molten, .molten {
  background: linear-gradient(100deg, var(--gold), var(--ember) 50%, var(--ember-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 28px var(--ember-glow));
}
.hero-sub { color: var(--text-2); font-size: 17.5px; margin: 24px 0 32px; max-width: 440px; }
.hero-cta { display: flex; gap: 13px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 34px; margin-top: 46px; }
.hero-stat .n { font-family: var(--font-display); font-size: 26px; font-weight: 600; color: var(--text); }
.hero-stat .n span { color: var(--ember); }
.hero-stat .l { font-size: 12.5px; color: var(--text-3); letter-spacing: 0.04em; margin-top: 2px; }

.hero-visual {
  position: relative;
  aspect-ratio: 1 / 0.92;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 70% 20%, rgba(255,90,31,0.18), transparent 55%),
    linear-gradient(160deg, #1a1a20, #0c0c0f);
  border: 1px solid var(--border);
  display: grid; place-items: center;
}
.hero-orbit { position: absolute; inset: -30% -30% auto auto; width: 80%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, transparent 58%, rgba(255,90,31,0.10) 60%, transparent 64%); }

/* placeholder visual */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.018) 0 10px, transparent 10px 20px),
    var(--bg-2);
  border: 1px dashed var(--border);
  display: grid; place-items: center; text-align: center;
  color: var(--text-faint);
  font-family: var(--font-body); font-size: 12px; letter-spacing: 0.04em;
  border-radius: var(--radius);
}
.ph .ph-tag {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 11px; color: var(--text-3);
  padding: 5px 10px; border: 1px solid var(--border); border-radius: 99px;
  background: rgba(0,0,0,0.3);
}
.ph svg { opacity: 0.25; margin-bottom: 12px; }

/* =================== SECTION HEADERS =================== */
section, .wp-block-group { position: relative; z-index: 1; }
.section { padding: 88px 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 38px; }
.section-head h2 { font-size: clamp(30px, 4vw, 44px); }
.section-head p { color: var(--text-3); margin: 12px 0 0; max-width: 460px; font-size: 15px; }

/* =================== CATEGORY RAIL =================== */
.cat-rail { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.cat-card {
  position: relative;
  flex: 0 0 216px;
  padding: 16px 16px 18px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform .2s, border-color .2s, box-shadow .2s;
  overflow: hidden;
  text-align: left;
  color: inherit; text-decoration: none;
  display: flex; flex-direction: column; gap: 12px;
}
.cat-card:hover { transform: translateY(-4px); border-color: var(--ember); box-shadow: 0 18px 40px -22px var(--ember-glow); }
.cat-card .cat-ico {
  width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center; color: var(--ember);
  background: var(--ember-wash); border: 1px solid rgba(255,90,31,0.2);
}
.cat-card .cat-thumb {
  display: block; width: 100%; border-radius: 11px; overflow: hidden;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
  border: 1px solid var(--border);
}
.cat-card .cat-thumb-img {
  width: 100%; height: auto; padding: 10px;
  display: block; transition: transform .25s;
}
.cat-card:hover .cat-thumb-img { transform: scale(1.04); }
/* margin-top:auto pins the caption to the card floor, so names stay aligned
   across the rail even when the category images differ in aspect ratio. */
.cat-card .cat-name { display: block; margin-top: auto; font-family: var(--font-display); font-weight: 600; font-size: 15.5px; }
.cat-card .cat-count { display: block; font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.cat-card .arrow { position: absolute; top: 18px; right: 18px; color: var(--text-faint); transition: color .2s, transform .2s; }
.cat-card:hover .arrow { color: var(--ember); transform: translate(2px,-2px); }

/* =================== PARTS FINDER =================== */
.finder {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background:
    radial-gradient(700px 300px at 100% 0%, rgba(255,90,31,0.10), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg-1));
  padding: clamp(28px, 4vw, 48px);
  position: relative;
  overflow: hidden;
}
/* Copy + controls on the left, the selected frame on the right. */
.finder-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 28px 40px; align-items: start; }
.finder-intro { min-width: 0; }
.finder h2 { font-size: clamp(26px, 3.2vw, 38px); }
.finder p { color: var(--text-2); margin: 12px 0 0; max-width: 420px; font-size: 15px; }
.finder-controls { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 26px; }
.model-select {
  appearance: none;
  background: var(--bg-3); border: 1px solid var(--border); color: var(--text);
  font-family: var(--font-display); font-size: 15px; font-weight: 500;
  padding: 14px 44px 14px 18px; border-radius: 12px; cursor: pointer; min-width: 240px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ff5a1f' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
  transition: border-color .18s;
}
.model-select:focus { outline: none; border-color: var(--ember); }

.finder-results { margin-top: 30px; }
.finder-results-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 13.5px; color: var(--text-2); }
.finder-results-head b { color: var(--text); font-family: var(--font-display); }
.compat-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: #4ade80; background: rgba(74,222,128,0.1);
  border: 1px solid rgba(74,222,128,0.25); padding: 4px 11px; border-radius: 99px;
  font-family: var(--font-display); letter-spacing: 0.02em;
}
/* The frame kit, shown apart from the parts. Its image is 4:3; a part's is 3:4. */
.finder-frame { min-width: 0; }
.frame-card {
  background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; transition: border-color .2s;
}
.frame-card:hover { border-color: var(--ember); }
.frame-card .fc-eyebrow {
  display: inline-block; margin-bottom: 12px;
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ember);
}
.frame-card .fc-img { display: block; aspect-ratio: 4/3; border-radius: 10px; overflow: hidden; }
.frame-card .fc-img .ph { height: 100%; }
.frame-card .fc-name { font-family: var(--font-display); font-weight: 500; font-size: 15px; line-height: 1.25; margin-top: 14px; }
.frame-card .fc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.frame-card .fc-price { font-family: var(--font-display); font-weight: 600; color: var(--text); }
.finder .frame-card-empty .fc-empty-text { color: var(--text-3); font-size: 13.5px; margin: 14px 0 0; max-width: none; }

/* Grid, not a rail: every compatible part is visible without a horizontal scrollbar. */
.finder-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.mini-part {
  display: flex; flex-direction: column;
  background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px; transition: border-color .2s, transform .2s;
}
.mini-part:hover { border-color: var(--ember); transform: translateY(-3px); }
.mini-part .mp-img { aspect-ratio: 3/4; border-radius: 10px; margin-bottom: 12px; }
.mini-part .mp-name { font-family: var(--font-display); font-weight: 500; font-size: 14px; line-height: 1.2; }
/* Rows are height-matched in a grid, so pin the price row down: a one-line name
   and a two-line name must still line their buttons up. */
.mini-part .mp-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 12px; }
.mini-part .mp-price { font-family: var(--font-display); font-weight: 600; color: var(--text); }

/* =================== SHOP / PRODUCT GRID =================== */
.shop-bar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-tab {
  font-family: var(--font-display); font-size: 13.5px; font-weight: 500;
  padding: 9px 16px; border-radius: 99px; border: 1px solid var(--border);
  background: transparent; color: var(--text-2); transition: all .18s; white-space: nowrap;
}
.filter-tab:hover { color: var(--text); border-color: var(--text-3); }
.filter-tab.active { background: var(--ember-wash); border-color: var(--ember); color: var(--ember-bright); }

.shop-tools { display: flex; gap: 10px; align-items: center; }
.shop-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 13px; width: 210px;
}
.shop-search input { background: none; border: none; outline: none; color: var(--text); font-family: inherit; font-size: 13.5px; width: 100%; }
.shop-search input::placeholder { color: var(--text-faint); }
.shop-search svg { color: var(--text-3); }
.sort-select {
  appearance: none; background: var(--bg-2); border: 1px solid var(--border); color: var(--text-2);
  font-family: var(--font-body); font-size: 13.5px; padding: 9px 32px 9px 13px; border-radius: 10px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237d808c' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}

.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* Centre a short final row of products, the way .cat-rail already does.
   WooCommerce's own CSS wins on .wc-block-product-template and resolves it to
   `display: flex`, so the grid-template-columns above never takes effect there —
   which is lucky, because a grid cannot do this: its items land in fixed column
   tracks and a short last row always sits left. As flex lines, `justify-content`
   applies per line, so full rows (which fill the width exactly) don't move and
   only the leftover row centres.

   This covers the shop/archive collections (`.is-flex-container`). It does NOT
   cover the homepage one — see below. */
.product-grid,
.wc-block-product-template { justify-content: center; }

/* The homepage product collection ("Frames") uses Woo's *other* layout,
   `.wc-block-product-template__responsive`, which is a real CSS grid. The rule
   above cannot centre it: the auto-fill tracks already fill the container
   exactly, so justify-content has no free space to distribute and a leftover
   card just lands in column 1.

   Woo sizes that grid intrinsically, with no breakpoint of its own —
   `repeat(auto-fill, minmax(max(150px, …), 1fr))` — so it falls to 2 columns
   whenever the container drops below ~490px. Match that with a *container*
   query rather than a viewport media query: it is the container width Woo
   actually reacts to, so this stays correct if the section ever gains a side
   gutter (today it has none, so container width == viewport width).

   In the 2-column band, a lone trailing card is by definition the odd one out.
   Span it across both tracks and centre it at exactly one track's width —
   `.625em` is half of Woo's `1.25em` grid gap, the same figure Woo itself uses
   for its 2-column flex items. The min-width guard keeps this off the 1-column
   layout below 320px, where the card must stay full width. */
.wp-block-woocommerce-product-collection { container-type: inline-size; }

@container (min-width: 320px) and (max-width: 489px) {
  .wc-block-product-template__responsive > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - 0.625em);
    margin-inline: auto;
  }
}

.card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .22s cubic-bezier(.2,.7,.3,1), border-color .22s, box-shadow .22s;
  position: relative;
}
.card:hover { transform: translateY(-5px); border-color: var(--border); box-shadow: 0 26px 50px -28px rgba(0,0,0,0.95), 0 0 0 1px rgba(255,90,31,0.25); }
.card-media { position: relative; aspect-ratio: 1/1; overflow: hidden; background: linear-gradient(160deg, var(--bg-3), var(--bg-1)); }
.card-media .ph { position: absolute; inset: 0; border: none; border-radius: 0; }
.card-badges { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; z-index: 2; }
.badge {
  font-family: var(--font-display); font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 7px; backdrop-filter: blur(6px);
}
.badge-flag { background: linear-gradient(180deg, var(--ember-bright), var(--ember)); color: #1a0600; }
.badge-new { background: rgba(74,222,128,0.16); color: #6ee7a0; border: 1px solid rgba(74,222,128,0.3); }
.badge-stock { background: rgba(0,0,0,0.5); color: var(--text-2); border: 1px solid var(--border); }
.card-fav {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: rgba(0,0,0,0.45); border: 1px solid var(--border); color: var(--text-2);
  backdrop-filter: blur(6px); opacity: 0; transform: translateY(-4px); transition: all .2s;
}
.card:hover .card-fav { opacity: 1; transform: translateY(0); }
.card-fav:hover, .card-fav.on { color: var(--ember); border-color: var(--ember); }

.card-body { padding: 17px 17px 18px; display: flex; flex-direction: column; flex: 1; }
.card-cat { font-size: 11.5px; color: var(--text-3); letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--font-display); }
.card-name { font-family: var(--font-display); font-weight: 500; font-size: 16.5px; margin-top: 6px; line-height: 1.2; }
.card-desc { font-size: 13px; color: var(--text-3); margin-top: 6px; flex: 1; }
.card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; gap: 10px; }
.card-price { font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.card-price .free { color: #6ee7a0; font-size: 15px; }
.add-btn {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--ember-wash); border: 1px solid rgba(255,90,31,0.3); color: var(--ember-bright);
  transition: all .16s;
}
.add-btn:hover { background: var(--ember); color: #1a0600; box-shadow: 0 0 18px var(--ember-glow); }
.add-btn.wide { width: auto; padding: 0 16px; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 13.5px; }

.empty-state { grid-column: 1/-1; text-align: center; padding: 70px 20px; color: var(--text-3); }
.empty-state svg { opacity: 0.3; margin-bottom: 14px; }

/* =================== BEYOND =================== */
.beyond-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.beyond-card {
  padding: 30px 28px; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1)); border: 1px solid var(--border);
  position: relative; overflow: hidden; transition: border-color .2s;
}
.beyond-card:hover { border-color: var(--ember); }
.beyond-card .b-ico { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center;
  background: var(--ember-wash); color: var(--ember); border: 1px solid rgba(255,90,31,0.2); margin-bottom: 22px; }
.beyond-card h3 { font-size: 21px; }
.beyond-card p { color: var(--text-2); font-size: 14.5px; margin: 12px 0 20px; }
.beyond-tags { display: flex; gap: 9px; flex-wrap: wrap; }
.tag-btn {
  font-family: var(--font-display); font-size: 13px; font-weight: 500; color: var(--text);
  padding: 8px 16px; border-radius: 99px; border: 1px solid var(--border); background: var(--bg-3); transition: all .18s;
}
.tag-btn:hover { border-color: var(--ember); color: var(--ember-bright); }
.read-more { display: inline-flex; align-items: center; gap: 8px; color: var(--ember-bright); font-family: var(--font-display); font-weight: 500; font-size: 14px; }
.read-more svg { transition: transform .2s; }
.beyond-card:hover .read-more svg { transform: translateX(4px); }

/* =================== TESTIMONIALS =================== */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.testi {
  padding: 28px; border-radius: var(--radius-lg);
  background: var(--surface-card); border: 1px solid var(--border); position: relative;
}
.testi .quote-mark { font-family: var(--font-display); font-size: 56px; line-height: 0.5; color: var(--ember); opacity: 0.5; height: 26px; }
.testi-text { font-size: 16px; color: var(--text); margin: 8px 0 22px; font-style: italic; }
.testi-author { display: flex; align-items: center; gap: 12px; }
.testi-avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(140deg, var(--ember-deep), var(--bg-3)); flex-shrink: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; color: var(--text); }
.testi-name { font-family: var(--font-display); font-weight: 500; font-size: 14.5px; }
.testi-stars { color: var(--ember); font-size: 12px; letter-spacing: 2px; margin-top: 2px; }

/* =================== FOOTER =================== */
footer.wp-block-template-part {
  border-top: 1px solid var(--border);
  margin-top: 40px;
  background: var(--bg-1);
  position: relative;
  z-index: 1;
}
.footer-inner { padding: 64px 0 40px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.footer-col h4,
.footer-col-heading {
  font-family: var(--font-display); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 16px;
}
.footer-col a,
.footer-col .wp-block-navigation-item__content { display: block; color: var(--text-2); font-size: 14px; padding: 5px 0; transition: color .15s; }
.footer-col a:hover,
.footer-col .wp-block-navigation-item__content:hover { color: var(--ember-bright); }
.footer-blurb { color: var(--text-3); font-size: 14px; max-width: 280px; margin: 16px 0 0; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap; margin-top: 54px; padding-top: 26px;
  border-top: 1px solid var(--border); color: var(--text-faint); font-size: 13px;
}
.footer-bottom p { margin: 0; }

/* =================== CART DRAWER =================== */
.drawer-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(3px); z-index: 90; opacity: 0; pointer-events: none; transition: opacity .25s; }
.drawer-scrim.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 100vw); z-index: 100;
  background: var(--bg-1); border-left: 1px solid var(--border);
  transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); box-shadow: -30px 0 80px -30px rgba(0,0,0,0.9); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--border); }
.drawer-head h3 { font-size: 18px; letter-spacing: 0.02em; }
.drawer-items { flex: 1; overflow-y: auto; padding: 14px 18px; }
.drawer-empty { display: grid; place-items: center; height: 100%; color: var(--text-3); text-align: center; gap: 14px; }
.cart-item { display: flex; gap: 13px; padding: 14px 6px; border-bottom: 1px solid var(--border); }
.cart-item .ci-img { width: 64px; height: 64px; border-radius: 10px; flex-shrink: 0; background: var(--bg-3); }
.cart-item .ci-name { font-family: var(--font-display); font-weight: 500; font-size: 14.5px; line-height: 1.2; }
.cart-item .ci-cat { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 9px; margin-top: 10px; overflow: hidden; }
.qty button { width: 28px; height: 28px; background: var(--bg-2); border: none; color: var(--text-2); font-size: 15px; display: grid; place-items: center; }
.qty button:hover { color: var(--ember); }
.qty span { min-width: 30px; text-align: center; font-family: var(--font-display); font-size: 13.5px; }
.ci-right { margin-left: auto; text-align: right; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; }
.ci-price { font-family: var(--font-display); font-weight: 600; }
.ci-remove { color: var(--text-faint); font-size: 12px; background: none; border: none; padding: 4px; transition: color .15s; }
.ci-remove:hover { color: var(--ember); }
.drawer-foot { padding: 20px 24px 24px; border-top: 1px solid var(--border); }
.drawer-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--text-2); margin-bottom: 8px; }
.drawer-total { display: flex; justify-content: space-between; font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--text); margin: 14px 0 18px; }

/* =================== ENTRY CONTENT =================== */
.entry-content, .wp-block-post-content {
  color: var(--text-2);
  font-size: 17px;
  line-height: 1.75;
}
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4,
.wp-block-post-content h1, .wp-block-post-content h2,
.wp-block-post-content h3, .wp-block-post-content h4 { color: var(--text); margin: 1.5em 0 0.5em; }
.entry-content a, .wp-block-post-content a { color: var(--ember-bright); text-decoration: underline; text-underline-offset: 3px; }

/* =================== misc =================== */
.divider-label { display:flex; align-items:center; gap:16px; color: var(--text-faint); font-family: var(--font-display); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; }
.divider-label::before, .divider-label::after { content:""; height:1px; flex:1; background: var(--border); }

@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: fadeUp .6s cubic-bezier(.2,.7,.3,1); }
}

/* =================== RESPONSIVE =================== */
@media (max-width: 1080px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .cat-card { flex-basis: 30%; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 520px; }
  .beyond-grid, .testi-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
/* The 230px nav search is the widest thing in the header and neither it nor
   .brand can shrink (both flex-shrink:0), so below 1024px the header row no
   longer fits and pushes the whole page sideways — a horizontal scroll into
   empty background (988px of content on an 820px iPad; 647px on a 390px phone).
   Drop the search below 1024px; the burger menu still reaches every page.

   The selector must carry the same specificity as the base rule that shows it
   (`.wp-block-search.nav-search`, 0-2-0). A bare `.nav-search` (0-1-0) loses to
   it and this rule silently did nothing for a while, because a media query adds
   no specificity of its own. Keep all three selectors if you touch this. */
@media (max-width: 1023px) {
  .nav-search,
  .wp-block-search.nav-search,
  .nav-inner .wp-block-search { display: none; }
}

@media (max-width: 720px) {
  .nav-links { display: none; }

  /* Even with the search gone the row still has to fit logo + title + burger +
     cart on a 320px screen, so let the brand give ground here. */
  .nav-inner { gap: 12px; }
  .brand { min-width: 0; gap: 10px; }
  .brand .wp-block-site-title { min-width: 0; }
  .brand .wp-block-site-title a {
    font-size: clamp(13px, 3.6vw, 16px);
    letter-spacing: 0.08em;
  }

  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-card { flex-basis: calc(50% - 7px); }
  .hero-stats { gap: 22px; flex-wrap: wrap; }
  .section { padding: 44px 0; }
  .shop-bar { flex-direction: column; align-items: stretch; }

  /* Homepage product grid hidden on mobile — CTA button takes over */
  #shop .wp-block-woocommerce-product-collection { display: none; }
  #shop .shop-toolbar { display: none; }
  #shop .wp-block-buttons { margin-top: 4px !important; }

  /* Parts Finder: stack controls vertically for touch, frame under them */
  .finder-top { grid-template-columns: 1fr; }
  .finder-controls { flex-direction: column; align-items: stretch; }
  .model-select { min-width: 0; width: 100%; }
  .finder-controls .btn { width: 100%; justify-content: center; }
  /* ~292px of usable width here: a 150px minimum would fall back to one column. */
  .finder-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .product-grid { grid-template-columns: 1fr; }
}

/* =================== TRUST BAR (single product) =================== */
.oa-trust-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--text-3);
  margin-top: 16px;
  line-height: 1.4;
}
.oa-trust-bar svg { color: var(--ember); opacity: 0.75; flex-shrink: 0; }
.oa-trust-bar a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
.oa-trust-bar a:hover { color: var(--ember-bright); }
.trust-sep { color: var(--border); user-select: none; }

/* =================== WC BLOCK OVERRIDES =================== */

/* Hide empty store-notices wrapper */
.wp-block-woocommerce-store-notices:empty,
.woocommerce-store-notice:empty { display: none; }
.wc-block-store-notices { margin: 0; padding: 0; }

/* Archive / shop page title */
.wp-block-query-title {
  font-size: clamp(22px, 3vw, 34px);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 24px;
}

/* Shop toolbar */
.shop-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 24px; gap: 12px; flex-wrap: wrap;
}
.wc-block-product-results-count { color: var(--text-3); font-size: 14px; }
.wc-block-catalog-sorting select {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); padding: 6px 12px; font-size: 14px;
}

/* Product card: each <li class="wc-block-product"> */
li.wc-block-product {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Product image: the uploaded file already carries the intended ratio. */
.wc-block-components-product-image img,
.wc-block-grid__product-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Images differ in height, so the card's slack collects *below* the image:
   title, price and button then sit on the card floor and line up across a
   row. Taking the slack here rather than via margin-top on the title, which
   the post-title block overrides with an inline margin. */
li.wc-block-product .wc-block-components-product-image { margin-bottom: auto; }

/* Product title inside card. Hyphenated model names are kept whole by the
   U+2011 swap in functions.php, not here — CSS has no way to do it. */
li.wc-block-product .wp-block-post-title {
  padding: 10px 16px 2px;
  font-size: 15px;
  font-family: var(--font-display);
  font-weight: 500;
  margin: 0;
  overflow-wrap: break-word;
}
li.wc-block-product .wp-block-post-title a { color: var(--text); text-decoration: none; }
li.wc-block-product .wp-block-post-title a:hover { color: var(--ember-bright); }

/* Product price */
li.wc-block-product .wc-block-components-product-price {
  display: block;
  padding: 2px 16px 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
}
li.wc-block-product .wc-block-components-product-price .woocommerce-Price-amount { color: var(--ember-bright); }

/* Product button: small icon button matching .add-btn from classic theme */
/* No margin-top:auto here: the image above already claims the card's slack.
   Two auto margins would split it and leave the title floating mid-card. */
li.wc-block-product .wp-block-button.wc-block-components-product-button {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  padding: 0 14px 14px !important;
  margin-top: 0 !important;
}
li.wc-block-product .wp-block-button__link.wc-block-components-product-button__button {
  width: 40px !important;
  height: 40px !important;
  min-width: 0 !important;
  border-radius: 10px !important;
  padding: 0 !important;
  background: var(--ember-wash, rgba(255,90,31,0.12)) !important;
  border: 1px solid rgba(255,90,31,0.3) !important;
  color: var(--ember-bright) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  font-size: 0 !important;
  transition: all .16s !important;
  position: relative !important;
}
li.wc-block-product .wp-block-button__link.wc-block-components-product-button__button::after {
  content: '+';
  font-size: 22px;
  font-weight: 300;
  color: var(--ember-bright);
  line-height: 1;
  font-family: system-ui, sans-serif;
}
li.wc-block-product .wp-block-button__link.wc-block-components-product-button__button:hover {
  background: var(--ember) !important;
  border-color: var(--ember) !important;
  box-shadow: 0 0 18px var(--ember-glow) !important;
}
li.wc-block-product .wp-block-button__link.wc-block-components-product-button__button:hover::after {
  color: #1a0600;
}

/* Mini-cart button: icon-btn style */
.wc-block-mini-cart__button {
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 0 !important;
  padding: 0 !important;
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  color: var(--text-2) !important;
  box-shadow: none !important;
}
/* Quantity badge is just the icon wrapper — no background */
.wc-block-mini-cart__quantity-badge {
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
}
.wc-block-mini-cart__icon {
  width: 20px !important; height: 20px !important;
}
.wc-block-mini-cart { position: relative; }

/* Nav search: constrain width */
.nav-inner .wp-block-search,
.nav-search.wp-block-search {
  flex: 0 0 230px !important;
  max-width: 230px !important;
  width: 230px !important;
}

/* Primary button in block context */
.wp-block-button.btn-primary .wp-block-button__link,
.wp-block-button.btn-primary .wp-element-button {
  background: linear-gradient(180deg, var(--ember-bright), var(--ember)) !important;
  color: #1a0600 !important;
  font-weight: 600 !important;
  border: none !important;
  box-shadow: 0 0 0 1px rgba(255,90,31,0.4), 0 10px 30px -8px var(--ember-glow) !important;
}
.wp-block-button.btn-primary .wp-block-button__link:hover,
.wp-block-button.btn-primary .wp-element-button:hover { opacity: 0.88 !important; }