/* ═══════════════════════════════════════════════════════════
   ALPINA MOTORSPORT — DESIGN SYSTEM v2
   Layered AFTER legacy style.css. Legacy stays as the base;
   this file refines tokens, typography, components, and fixes.
   Signature: BMW M tricolor hairline + disciplined red.
   ═══════════════════════════════════════════════════════════ */

/* ─── Tokens v2 ─────────────────────────────────────────── */
:root {
  --ms-bg:          #0B0B0C;
  --ms-bg-deep:     #070708;
  --ms-bg-card:     #141416;
  --ms-bg-elevated: #1C1C1F;
  --ms-border:      #26262B;
  --ms-border-soft: #1E1E22;
  --ms-text:        #F4F4F5;
  --ms-text-muted:  #9C9CA3;
  --ms-text-subtle: #5F5F66;

  --m-blue:  #4A9FE8;
  --m-navy:  #16588E;
  --m-red:   #E7222E;

  --ms-red:     #E8000B;
  --ms-red-hot: #FF2A35;

  --ms-tricolor: linear-gradient(90deg,
      var(--m-blue) 0 33.33%,
      var(--m-navy) 33.33% 66.66%,
      var(--m-red)  66.66% 100%);

  --ms-radius:    3px;
  --ms-shadow-1:  0 2px 10px rgba(0,0,0,.45);
  --ms-shadow-2:  0 14px 40px rgba(0,0,0,.55);
  --ms-glow-red:  0 4px 24px rgba(232,0,11,.22);
  --ms-transition: .18s cubic-bezier(.2,.7,.3,1);

  /* type scale */
  --ms-h1: clamp(2.4rem, 5vw, 3.8rem);
  --ms-h2: clamp(1.8rem, 3.4vw, 2.6rem);
  --ms-h3: clamp(1.3rem, 2.2vw, 1.7rem);
}

/* ─── Base refinements ──────────────────────────────────── */
html, body, .ast-page-builder-template {
  background-color: var(--ms-bg) !important;
}

body {
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: .01em;
}

::selection { background: var(--ms-red); color: #fff; }

/* Racing stripe → M tricolor hairline */
body::before {
  height: 4px !important;
  background: var(--ms-tricolor) !important;
}

/* Focus visibility (a11y) */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--m-blue) !important;
  outline-offset: 2px;
}

/* ─── Typography rhythm ─────────────────────────────────── */
h1, .entry-title, .page-title, .product_title { font-size: var(--ms-h1) !important; line-height: .95 !important; }
h2 { font-size: var(--ms-h2) !important; line-height: 1.02 !important; }
h3 { font-size: var(--ms-h3) !important; line-height: 1.1 !important; }

/* Section headings — tricolor tick signature */
.entry-content > h2,
.entry-content .wp-block-heading,
.related.products > h2,
.up-sells > h2 {
  position: relative;
  padding-left: 18px !important;
}
.entry-content > h2::before,
.entry-content .wp-block-heading::before,
.related.products > h2::before,
.up-sells > h2::before {
  content: '';
  position: absolute;
  left: 0; top: 8%; bottom: 8%;
  width: 5px;
  background: var(--ms-tricolor);
  background: linear-gradient(180deg, var(--m-blue) 0 33%, var(--m-navy) 33% 66%, var(--m-red) 66% 100%);
}

/* ─── Header & Navigation ───────────────────────────────── */
#masthead, .site-header, .ast-primary-header-bar {
  background-color: rgba(7,7,8,.96) !important;
  border-bottom: 1px solid var(--ms-border) !important;
  box-shadow: var(--ms-shadow-1) !important;
}

/* FIX: menu items were letter-wrapping when flex squeezed them */
.main-header-menu .menu-link,
.ast-nav-list > li > a,
.ast-builder-menu .menu-item > .menu-link {
  white-space: nowrap !important;
}

.main-header-menu .menu-link {
  position: relative;
  font-size: 14px !important;
  letter-spacing: .14em !important;
  padding: 14px 16px !important;
}

/* nav hover — sliding underline instead of bare color swap */
.main-header-menu > .menu-item > .menu-link::after {
  content: '';
  position: absolute;
  left: 16px; right: 100%;
  bottom: 8px;
  height: 2px;
  background: var(--ms-red);
  transition: right var(--ms-transition);
}
.main-header-menu > .menu-item:hover > .menu-link::after,
.main-header-menu > .current-menu-item > .menu-link::after,
.main-header-menu > .current-menu-ancestor > .menu-link::after {
  right: 16px;
}
.ast-nav-list > li.current-menu-item > a,
.ast-nav-list > li.current-menu-ancestor > a {
  border-bottom: none !important; /* replaced by ::after underline */
}

/* Search field in header */
.wp-block-search__input {
  background: var(--ms-bg-elevated) !important;
  border: 1px solid var(--ms-border) !important;
  color: var(--ms-text) !important;
  border-radius: var(--ms-radius) !important;
  transition: border-color var(--ms-transition);
}
.wp-block-search__input:focus { border-color: var(--m-blue) !important; }
.wp-block-search__button {
  background: var(--ms-red) !important;
  border: none !important;
  border-radius: var(--ms-radius) !important;
}

/* Cart count badge */
.ast-cart-menu-wrap .count {
  border-radius: 999px !important;
  box-shadow: var(--ms-glow-red);
}

/* ─── Buttons ───────────────────────────────────────────── */
.button, .wp-element-button, .wp-block-button__link,
.ast-button, .single_add_to_cart_button,
.woocommerce a.button, .woocommerce button.button,
.checkout-button, input[type="submit"] {
  font-family: var(--ms-font-display) !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  background: var(--ms-red) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--ms-radius) !important;
  padding: 13px 28px !important;
  position: relative;
  transition: transform var(--ms-transition), box-shadow var(--ms-transition), background var(--ms-transition) !important;
}
.button:hover, .wp-element-button:hover, .wp-block-button__link:hover,
.single_add_to_cart_button:hover, .woocommerce a.button:hover,
.checkout-button:hover, input[type="submit"]:hover {
  background: var(--ms-red-hot) !important;
  transform: translateY(-2px);
  box-shadow: var(--ms-glow-red);
}
.button:active, .single_add_to_cart_button:active { transform: translateY(0); }

/* ─── Product cards (shop/related/home grids) ───────────── */
ul.products li.product,
.woocommerce ul.products li.product {
  background: var(--ms-bg-card) !important;
  border: 1px solid var(--ms-border-soft) !important;
  border-radius: var(--ms-radius) !important;
  overflow: hidden;
  transition: transform var(--ms-transition), border-color var(--ms-transition), box-shadow var(--ms-transition) !important;
}
ul.products li.product:hover {
  transform: translateY(-5px);
  border-color: var(--ms-border) !important;
  box-shadow: var(--ms-shadow-2), var(--ms-glow-red);
}

/* image zone — consistent, subtle zoom on hover */
.astra-shop-thumbnail-wrap { overflow: hidden; background: #101012; }
ul.products li.product img {
  transition: transform .5s cubic-bezier(.2,.7,.3,1) !important;
}
ul.products li.product:hover img { transform: scale(1.05); }

/* card body spacing */
.astra-shop-summary-wrap { padding: 16px 16px 20px !important; }

/* category eyebrow above title */
ul.products li.product .ast-woo-product-category {
  color: var(--ms-red) !important;
  font-size: 11px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}

.woocommerce-loop-product__title {
  font-size: 15px !important;
  letter-spacing: .05em !important;
  line-height: 1.25 !important;
  min-height: 2.5em;
}

/* price */
ul.products li.product .price,
.woocommerce div.product p.price {
  color: var(--ms-text) !important;
  font-family: var(--ms-font-display) !important;
  font-weight: 800 !important;
  font-size: 1.15rem !important;
  letter-spacing: .04em;
}
ul.products li.product .price del,
.woocommerce div.product p.price del {
  color: var(--ms-text-subtle) !important;
  font-weight: 400 !important;
  margin-right: 8px;
}
ul.products li.product .price ins,
.woocommerce div.product p.price ins {
  color: var(--ms-red-hot) !important;
  text-decoration: none !important;
}

/* SALE badge — tricolor edge */
span.onsale, .woocommerce span.onsale {
  background: var(--ms-red) !important;
  color: #fff !important;
  font-family: var(--ms-font-display) !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
  border-radius: 2px !important;
  padding: 4px 12px !important;
  min-height: 0 !important;
  min-width: 0 !important;
  line-height: 1.6 !important;
  border-left: 4px solid var(--m-blue) !important;
}

/* Out of stock overlay chip */
.ast-shop-product-out-of-stock {
  background: rgba(7,7,8,.85) !important;
  color: var(--ms-text-muted) !important;
  border: 1px solid var(--ms-border) !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  font-family: var(--ms-font-display) !important;
}

/* ─── Single product ────────────────────────────────────── */
/* FIX: Woo ships gallery at opacity:0 until JS fades it in —
   if the script stalls the hero never appears. CSS fallback. */
.woocommerce-product-gallery { opacity: 1 !important; }

.woocommerce-product-gallery {
  border: 1px solid var(--ms-border-soft);
  border-radius: var(--ms-radius);
  background: #101012;
  padding: 10px;
}
.woocommerce-product-gallery .flex-control-thumbs li img {
  border: 1px solid var(--ms-border-soft) !important;
  border-radius: 2px;
  opacity: .55;
  transition: opacity var(--ms-transition), border-color var(--ms-transition);
}
.woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs li img:hover {
  opacity: 1;
  border-color: var(--ms-red) !important;
}

.woocommerce div.product p.price { font-size: 1.9rem !important; }

/* meta row */
.product_meta {
  border-top: 1px solid var(--ms-border-soft);
  padding-top: 16px;
  color: var(--ms-text-subtle) !important;
  font-size: 13px;
  letter-spacing: .04em;
}
.product_meta a { color: var(--ms-text-muted) !important; }
.product_meta a:hover { color: var(--ms-red) !important; }

/* quantity input */
.woocommerce .quantity .qty {
  background: var(--ms-bg-elevated) !important;
  border: 1px solid var(--ms-border) !important;
  color: var(--ms-text) !important;
  border-radius: var(--ms-radius) !important;
  height: 48px;
}

/* tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  border-bottom: 1px solid var(--ms-border) !important;
  padding-left: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--ms-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--ms-text-muted) !important;
  padding: 14px 22px !important;
  border-bottom: 2px solid transparent !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--ms-text) !important;
  border-bottom-color: var(--ms-red) !important;
}
.woocommerce-Tabs-panel {
  background: var(--ms-bg-card) !important;
  border: 1px solid var(--ms-border-soft) !important;
  border-radius: var(--ms-radius);
  padding: 28px !important;
}

/* ─── Cart / Checkout ───────────────────────────────────── */
.woocommerce table.shop_table {
  background: var(--ms-bg-card) !important;
  border: 1px solid var(--ms-border-soft) !important;
  border-radius: var(--ms-radius) !important;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  border-color: var(--ms-border-soft) !important;
}
.woocommerce-checkout #payment,
#add_payment_method #payment {
  background: var(--ms-bg-card) !important;
  border: 1px solid var(--ms-border-soft) !important;
  border-radius: var(--ms-radius) !important;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  background: var(--ms-bg-elevated) !important;
  border: 1px solid var(--ms-border) !important;
  color: var(--ms-text) !important;
  border-radius: var(--ms-radius) !important;
  padding: 12px 14px !important;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--m-blue) !important;
}

/* notices */
.woocommerce-message, .woocommerce-info {
  background: var(--ms-bg-card) !important;
  color: var(--ms-text) !important;
  border-top-color: var(--ms-red) !important;
}

/* ─── Home page blocks ──────────────────────────────────── */
/* Cover/hero blocks — cinematic gradient + breathing room */
.wp-block-cover {
  border-radius: var(--ms-radius);
  overflow: hidden;
  min-height: 440px;
}
.wp-block-cover .wp-block-cover__background {
  background: linear-gradient(180deg, rgba(7,7,8,.25) 0%, rgba(7,7,8,.82) 82%) !important;
  opacity: 1 !important;
}
.wp-block-cover h1, .wp-block-cover h2 { text-shadow: 0 2px 24px rgba(0,0,0,.6); }

/* generic content section spacing rhythm */
.entry-content > .wp-block-group,
.entry-content > .wp-block-columns {
  margin-top: 56px;
  margin-bottom: 56px;
}

/* ─── Footer ────────────────────────────────────────────── */
.site-footer, .ast-builder-footer-wrapper, [data-section="section-footer-builder"] {
  background: var(--ms-bg-deep) !important;
  border-top: 1px solid var(--ms-border) !important;
  position: relative;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 3px;
  background: var(--ms-tricolor);
}
.site-footer .widget-title, .footer-widget-area .widget-title {
  font-family: var(--ms-font-display) !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--ms-text) !important;
}
.site-footer a { color: var(--ms-text-muted) !important; transition: color var(--ms-transition); }
.site-footer a:hover { color: var(--ms-red) !important; }
.ast-footer-copyright, .site-footer .ast-footer-copyright {
  color: var(--ms-text-subtle) !important;
  letter-spacing: .06em;
}

/* ─── Breadcrumbs ───────────────────────────────────────── */
.woocommerce-breadcrumb, .rank-math-breadcrumb {
  color: var(--ms-text-subtle) !important;
  font-size: 12px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
}
.woocommerce-breadcrumb a, .rank-math-breadcrumb a { color: var(--ms-text-muted) !important; }

/* ─── Pagination ────────────────────────────────────────── */
.woocommerce nav.woocommerce-pagination ul { border: none !important; }
.woocommerce nav.woocommerce-pagination ul li {
  border: none !important;
  margin: 0 3px !important;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  background: var(--ms-bg-card) !important;
  border: 1px solid var(--ms-border-soft) !important;
  color: var(--ms-text-muted) !important;
  border-radius: var(--ms-radius) !important;
  padding: 10px 16px !important;
  font-family: var(--ms-font-display) !important;
  font-weight: 700 !important;
  transition: border-color var(--ms-transition), color var(--ms-transition);
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
  border-color: var(--ms-red) !important;
  color: var(--ms-text) !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--ms-red) !important;
  border-color: var(--ms-red) !important;
  color: #fff !important;
}

/* ─── Blog cards ────────────────────────────────────────── */
.ast-article-post, article.post {
  background: var(--ms-bg-card) !important;
  border: 1px solid var(--ms-border-soft) !important;
  border-radius: var(--ms-radius) !important;
  transition: transform var(--ms-transition), box-shadow var(--ms-transition);
}
.ast-article-post:hover { transform: translateY(-4px); box-shadow: var(--ms-shadow-2); }

/* ─── Scrollbar (webkit) ────────────────────────────────── */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--ms-bg-deep); }
::-webkit-scrollbar-thumb { background: var(--ms-border); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--ms-red); }

/* ─── Single product: layout clearance fixes ────────────── */
.woocommerce div.product div.summary > * { clear: none; }
.woocommerce div.product form.cart {
  margin: 26px 0 !important;
  display: flex;
  align-items: stretch;
  gap: 12px;
  float: none !important;
}
.woocommerce div.product .woocommerce-product-details__short-description {
  margin-bottom: 8px;
}

/* tabs — stop label overlap, keep one row scrollable if tight */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex !important;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin: 0 0 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  white-space: nowrap !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none !important; }

/* ─── Home page: width + full-bleed hero ────────────────── */
.home .site-content .ast-container,
.page-id-1193 .site-content .ast-container {
  max-width: 1280px !important;
}

/* first cover block on home becomes a full-bleed cinematic hero */
.home .entry-content > .wp-block-cover:first-child,
.home .entry-content > .wp-block-image:first-child {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0;
  border-radius: 0;
  min-height: 540px;
}
.home .entry-content > .wp-block-cover:first-child .wp-block-cover__inner-container {
  max-width: 1280px;
}
.home .entry-content > .wp-block-cover:first-child h1,
.home .entry-content > .wp-block-cover:first-child h2 {
  font-size: clamp(2.6rem, 6vw, 4.6rem) !important;
}

/* ═══ Forge-review triage (2026-08-30) ══════════════════── */

/* F1: 100vw full-bleed causes horizontal scroll w/ visible scrollbars */
html, body { overflow-x: hidden; }

/* F3: re-assert Astra global palette in the LAST-loaded sheet so
   Astra's inline customizer :root can't silently reclaim these tokens */
:root {
  --ast-global-color-0: #E8000B;
  --ast-global-color-1: #FF1A24;
  --ast-global-color-2: #111111;
  --ast-global-color-3: #FFFFFF;
  --ast-global-color-4: #111111;
  --ast-global-color-5: #FFFFFF;
  --ast-global-color-6: #1A1A1A;
  --ast-global-color-7: #999999;
  --ast-global-color-8: #000000;
}

/* F2: block-based cart/checkout (wc-block-*) dark coverage */
.wc-block-components-text-input input,
.wc-block-components-form .wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-block-components-select .components-custom-select-control__button,
.wc-block-checkout__form input, .wc-block-checkout__form select {
  background: var(--ms-bg-elevated) !important;
  border: 1px solid var(--ms-border) !important;
  color: var(--ms-text) !important;
  border-radius: var(--ms-radius) !important;
}
.wc-block-components-text-input label,
.wc-block-components-checkout-step__title,
.wc-block-components-totals-item {
  color: var(--ms-text) !important;
}
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-components-order-summary {
  background: var(--ms-bg-card) !important;
  border: 1px solid var(--ms-border-soft) !important;
}

/* F5: My Account */
.woocommerce-MyAccount-navigation ul { border: 1px solid var(--ms-border-soft); border-radius: var(--ms-radius); overflow: hidden; }
.woocommerce-MyAccount-navigation ul li a {
  display: block;
  background: var(--ms-bg-card) !important;
  color: var(--ms-text-muted) !important;
  border-bottom: 1px solid var(--ms-border-soft) !important;
  padding: 12px 16px !important;
  font-family: var(--ms-font-display) !important;
  letter-spacing: .1em; text-transform: uppercase; font-size: 13px;
}
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover {
  background: var(--ms-bg-elevated) !important;
  color: var(--ms-text) !important;
  box-shadow: inset 3px 0 0 var(--ms-red);
}
.woocommerce-MyAccount-content {
  background: var(--ms-bg-card);
  border: 1px solid var(--ms-border-soft);
  border-radius: var(--ms-radius);
  padding: 24px;
}

/* F6: variable-product variation UI */
.woocommerce div.product form.cart table.variations select,
.woocommerce table.variations select {
  background: var(--ms-bg-elevated) !important;
  border: 1px solid var(--ms-border) !important;
  color: var(--ms-text) !important;
  border-radius: var(--ms-radius) !important;
  padding: 10px 12px !important;
}
.reset_variations { color: var(--ms-text-subtle) !important; font-size: 12px; }
.single_variation_wrap .price { color: var(--ms-text) !important; }

/* F7: retire legacy red corner triangle on cards (v2 cards carry the accent) */
ul.products li.product::after { content: none !important; }

/* F8: order-received / thank-you */
.woocommerce-order-overview {
  background: var(--ms-bg-card) !important;
  border: 1px solid var(--ms-border-soft) !important;
  border-radius: var(--ms-radius);
  padding: 20px !important;
}
.woocommerce-order-overview li { color: var(--ms-text-muted) !important; border-color: var(--ms-border-soft) !important; }
.woocommerce-order-overview li strong { color: var(--ms-text) !important; }
.woocommerce-thankyou-order-received { color: var(--ms-text) !important; font-family: var(--ms-font-display) !important; font-size: 1.4rem !important; }

/* F9: quantity steppers */
.ast-quantity-btn, .quantity .plus, .quantity .minus {
  background: var(--ms-bg-elevated) !important;
  border: 1px solid var(--ms-border) !important;
  color: var(--ms-text) !important;
}
.ast-quantity-btn:hover, .quantity .plus:hover, .quantity .minus:hover {
  color: var(--ms-red) !important;
  border-color: var(--ms-red) !important;
}

/* F10: nav underline via transform (compositor-friendly) */
.main-header-menu > .menu-item > .menu-link::after {
  right: 16px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--ms-transition);
}
.main-header-menu > .menu-item:hover > .menu-link::after,
.main-header-menu > .current-menu-item > .menu-link::after,
.main-header-menu > .current-menu-ancestor > .menu-link::after {
  transform: scaleX(1);
}

/* F12: cross-sells heading tick + descender-safe headings */
.cross-sells > h2 { position: relative; padding-left: 18px !important; }
.cross-sells > h2::before {
  content: '';
  position: absolute; left: 0; top: 8%; bottom: 8%; width: 5px;
  background: linear-gradient(180deg, var(--m-blue) 0 33%, var(--m-navy) 33% 66%, var(--m-red) 66% 100%);
}
h1, .entry-title, .page-title, .product_title { line-height: 1.02 !important; }

/* Cato-audit fix: 922-1120px squeeze band — nowrap made the menu
   overflow the viewport instead of letter-wrapping. Compress it. */
@media (min-width: 922px) and (max-width: 1120px) {
  .main-header-menu .menu-link {
    font-size: 12px !important;
    letter-spacing: .07em !important;
    padding: 14px 9px !important;
  }
}

/* ─── Mobile polish ─────────────────────────────────────── */
@media (max-width: 921px) {
  .main-header-menu .menu-link { white-space: normal !important; } /* drawer items may wrap whole words */
  h1, .product_title { font-size: clamp(1.9rem, 7vw, 2.6rem) !important; }
  .astra-shop-summary-wrap { padding: 12px 12px 16px !important; }
  ul.products li.product:hover { transform: none; } /* no lift on touch */
  .woocommerce-Tabs-panel { padding: 18px !important; }
}