/* woo-overrides.css — WooCommerce block overrides — Phases 4–8/11/13
 * Reference: [DS_ROOT]/Hendr1kaDesignSystem/ui_kits/store/store.css (WooCommerce sections)
 * Preview files: components-product-card.html, components-mini-cart-popup.html, components-order-summary.html
 * RULE: var(--wp--preset--color--{slug}, #fallback) for ALL color references.
 * RULE: radius tokens — cards/modal = 8px (--radius-lg), nav/icons = 6px (--radius-md),
 *       buttons/inputs/chips = 4px (--radius-sm), cart badge = 9999px. No magenta. Card bg = #1A1A24.
 */

/* ============================================================
   PHASE 4 — PRODUCT COLLECTION GRID
   ============================================================ */

/*
 * Force the product template to render as a proper grid row.
 * WC block defaults can collapse the template wrapper.
 */
.wp-block-woocommerce-product-collection > .wp-block-woocommerce-product-template {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

/* Remove ghost ::before / ::after flex spacers WC injects */
.wc-block-product-template.is-flex-container::before,
.wc-block-product-template.is-flex-container::after {
  display: none !important;
}

/* 4-column desktop grid */
.wc-block-product-template.is-flex-container.columns-4 > li {
  flex: 0 0 calc(25% - 20px) !important;
  max-width: calc(25% - 20px) !important;
}

/* 3-column tablet */
@media (max-width: 900px) {
  .wc-block-product-template.is-flex-container.columns-4 > li {
    flex: 0 0 calc((100% - 40px) / 3) !important;
    max-width: calc((100% - 40px) / 3) !important;
  }
}

/* 2-column mobile */
@media (max-width: 600px) {
  .wc-block-product-template.is-flex-container.columns-4 > li {
    flex: 0 0 calc((100% - 20px) / 2) !important;
    max-width: calc((100% - 20px) / 2) !important;
  }
}

/* ============================================================
   PRODUCT CARD BASE
   Canonical bg: #1A1A24 (--dark-card). NOT #1A1A1A (--cyberpunk-dark-grey).
   ============================================================ */
.wp-block-woocommerce-product-collection .wc-block-product,
.wc-block-grid__product {
  background: var(--wp--preset--color--dark-card, #1A1A24) !important;
  border: 2px solid var(--wp--preset--color--dark-border, #2A2A3A) !important;
  border-radius: 8px !important;
  overflow: hidden;
  transition: all var(--dur-base) var(--ease-in-out);
  position: relative;
}

.wp-block-woocommerce-product-collection .wc-block-product:hover,
.wc-block-grid__product:hover {
  border-color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  box-shadow: 0 0 20px rgba(255, 0, 128, 0.30) !important;
  transform: translateY(-4px);
}

/*
 * Full-card scanline overlay (hot-pink diagonal lines, very subtle).
 * z-index: 1 — sits above card bg but below content.
 */
.wp-block-woocommerce-product-collection .wc-block-product::after,
.wc-block-grid__product::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent, transparent 10px,
    rgba(255, 0, 128, 0.06) 10px, rgba(255, 0, 128, 0.06) 20px
  );
  pointer-events: none;
  z-index: 1;
}

/* ============================================================
   PRODUCT IMAGE
   ============================================================ */
.wc-block-components-product-image,
.wc-block-grid__product-image {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    var(--wp--preset--color--dark-border, #2A2A3A),
    var(--wp--preset--color--dark-card, #1A1A24)
  );
  aspect-ratio: 1 / 1;
}

/*
 * Scanline overlay on product image only.
 * Slightly stronger than card-level overlay for visual depth.
 */
.wc-block-components-product-image::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: repeating-linear-gradient(
    45deg,
    transparent, transparent 10px,
    rgba(255, 0, 128, 0.10) 10px, rgba(255, 0, 128, 0.10) 20px
  );
  pointer-events: none;
}

.wc-block-components-product-image img {
  position: relative;
  z-index: 2;
  transition: transform var(--dur-base);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wc-block-product:hover .wc-block-components-product-image img {
  transform: scale(1.05);
}

/* ============================================================
   SALE BADGE
   ============================================================ */
.wc-block-components-product-badge,
.wc-block-components-sale-badge,
.wp-block-woocommerce-product-sale-badge {
  background: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  color: #000000 !important;
  border-radius: 4px !important;
  font-family: var(--font-display) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 3px 8px !important;
}

/* ============================================================
   PRODUCT TITLE
   ============================================================ */
li.wc-block-product .wp-block-post-title,
.wp-block-woocommerce-product-collection .wp-block-post-title {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--wp--preset--color--fg-1, #FFFFFF) !important;
  padding: 14px 16px 0;
  margin: 0;
  min-height: 34px;
  line-height: 1.3;
  position: relative;
  z-index: 2;
}

li.wc-block-product .wp-block-post-title a {
  color: var(--wp--preset--color--fg-1, #FFFFFF);
  text-decoration: none;
}

li.wc-block-product .wp-block-post-title a:hover {
  color: var(--wp--preset--color--neon-cyan, #00FFFF);
}

/* ============================================================
   CATEGORY TERM (product_cat taxonomy below title)
   ============================================================ */
.wp-block-woocommerce-product-collection .product-cat-term,
.wp-block-woocommerce-product-collection .product-cat-term a {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  color: var(--wp--preset--color--fg-5, #6B7280) !important;
  text-shadow: none !important;
  padding: 4px 16px 0;
  display: block;
  position: relative;
  z-index: 2;
  text-decoration: none;
}

/* ============================================================
   PRICE
   ============================================================ */
.wp-block-woocommerce-product-price,
.wc-block-components-product-price {
  padding: 10px 16px 0;
  margin: 0;
  position: relative;
  z-index: 2;
}

/* Regular price amount — Orbitron, cyan glow */
.woocommerce-Price-amount,
.wc-block-components-product-price .woocommerce-Price-amount,
.wc-block-formatted-money-amount {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  text-shadow: 0 0 10px var(--wp--preset--color--neon-cyan, #00FFFF) !important;
}

/* Sale: strike-through old price in muted color */
.wc-block-components-product-price del .woocommerce-Price-amount,
.wc-block-components-product-price del .wc-block-formatted-money-amount {
  color: var(--wp--preset--color--fg-5, #6B7280) !important;
  text-shadow: none !important;
  font-size: 12px !important;
}

/* Sale: new price in cyan (inherits from above — no extra rule needed) */

/* ============================================================
   ADD-TO-CART BUTTON
   ============================================================ */
.wp-block-woocommerce-product-button,
.wc-block-components-product-button {
  padding: 10px 16px 16px;
  position: relative;
  z-index: 2;
}

.wc-block-components-product-button .wp-block-button__link,
.wp-block-woocommerce-product-button .wp-block-button__link,
.wc-block-components-product-button a.wp-block-button__link {
  display: inline-block;
  font-family: var(--font-display) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  background: transparent !important;
  border: 1px solid var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  border-radius: 4px !important;
  padding: 6px 12px !important;
  text-decoration: none;
  transition: all var(--dur-base);
}

.wc-block-components-product-button .wp-block-button__link:hover,
.wp-block-woocommerce-product-button .wp-block-button__link:hover,
.wc-block-components-product-button a.wp-block-button__link:hover {
  background: linear-gradient(
    45deg,
    var(--wp--preset--color--neon-pink-hot, #FF0080),
    #FF1493
  ) !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 12px rgba(255, 0, 128, 0.5) !important;
  transform: translateY(-2px);
}

/* "Added to cart" / loading state — keep consistent */
.wc-block-components-product-button .wp-block-button__link.added,
.wc-block-components-product-button .wp-block-button__link.loading {
  background: rgba(255, 0, 128, 0.10) !important;
  color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  border-color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  border-radius: 4px !important;
  cursor: default;
  transform: none;
}

/* ============================================================
   PRODUCT-CATEGORIES WIDGET IN SIDEBAR
   (woocommerce/product-categories block)
   ============================================================ */
.wp-block-woocommerce-product-categories ul.wc-block-product-categories-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.wp-block-woocommerce-product-categories .wc-block-product-categories-list-item {
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--wp--preset--color--fg-3, #D1D5DB);
  border-left: 2px solid transparent;
  transition: all var(--transition-base);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wp-block-woocommerce-product-categories .wc-block-product-categories-list-item:hover,
.wp-block-woocommerce-product-categories .wc-block-product-categories-list-item--active {
  color: var(--wp--preset--color--neon-cyan, #00FFFF);
  border-left-color: var(--wp--preset--color--neon-cyan, #00FFFF);
  background: rgba(0, 255, 255, 0.05);
}

.wp-block-woocommerce-product-categories .wc-block-product-categories-list-item a {
  color: inherit;
  text-decoration: none;
}

.wp-block-woocommerce-product-categories .wc-block-product-categories-list-item a:hover {
  color: var(--wp--preset--color--neon-cyan, #00FFFF);
}

.wp-block-woocommerce-product-categories .wc-block-product-categories-list-item__count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--wp--preset--color--fg-5, #6B7280);
}

/* ============================================================
   PHASE 5 — PDP (SINGLE PRODUCT PAGE)
   Reference: preview/components-image-gallery-thumbs.html
              preview/components-qty-stepper.html
              preview/components-buttons-store.html
              preview/components-tabs.html
              preview/components-related-products.html
              ui_kits/store/store.css (.pdp-* section)
   ============================================================ */

/* ------------------------------------------------------------
   PDP PAGE LAYOUT
   ------------------------------------------------------------ */
.pdp-page {
  padding: 100px 24px 56px;
}

.pdp-layout {
  gap: 56px;
  padding-top: 32px;
}

/* Gallery column: sticky so info scrolls past it on long descriptions */
.pdp-gallery-col .wc-block-product-image-gallery,
.pdp-gallery-col .woocommerce-product-gallery {
  position: sticky;
  top: 100px;
}

/* Info column: flex column so elements stack naturally */
.pdp-info-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ------------------------------------------------------------
   BREADCRUMBS
   ------------------------------------------------------------ */
.woocommerce-breadcrumb,
.wc-block-breadcrumbs {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--fg-5, #6B7280) !important;
  background: transparent !important;
}

.woocommerce-breadcrumb a,
.wc-block-breadcrumbs a {
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  text-decoration: none;
}

.woocommerce-breadcrumb a:hover,
.wc-block-breadcrumbs a:hover {
  color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
}

/* ------------------------------------------------------------
   PDP TITLE
   Source: design-parity-implementation.md §5.2 + components-image-gallery-thumbs.html
   .pdp-title — Orbitron, fg-1, no inline colors
   ------------------------------------------------------------ */
.pdp-title,
.single-product .wp-block-post-title,
.single-product h1.product_title {
  font-family: var(--font-display) !important;
  font-size: clamp(1.4rem, 3.5vw, 2.2rem) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--wp--preset--color--fg-1, #FFFFFF) !important;
  text-shadow: 0 0 8px rgba(255, 0, 128, 0.4) !important;
  line-height: 1.2 !important;
  margin: 8px 0 0 !important;
}

/* ------------------------------------------------------------
   PDP PRICE — larger than archive (archive = 18px, PDP = 2rem)
   Source: components-sale-treatment.html
   Regular: cyan glow | Sale: strike old in fg-5, new in cyan,
   savings badge in pink
   ------------------------------------------------------------ */
.pdp-price .woocommerce-Price-amount,
.single-product .pdp-price .woocommerce-Price-amount,
.single-product .price .woocommerce-Price-amount {
  font-size: 2rem !important;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.8) !important;
}

/* Sale: struck-through original price */
.single-product .price del .woocommerce-Price-amount,
.pdp-price del .woocommerce-Price-amount {
  font-size: 1rem !important;
  color: var(--wp--preset--color--fg-5, #6B7280) !important;
  text-shadow: none !important;
}

/* Sale: savings badge injected by WC */
.wc-block-components-product-price__value.is-discounted ~ .wc-block-components-product-price__regular,
.woocommerce-price-suffix {
  color: var(--wp--preset--color--fg-5, #6B7280);
  font-size: 11px;
  font-family: var(--font-body);
}

/* VAT note */
.woocommerce-price-vat-note,
.price .tax_label {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--wp--preset--color--fg-5, #6B7280) !important;
  text-shadow: none !important;
}

/* ------------------------------------------------------------
   PRODUCT RATING STARS
   Source: components-ratings.html
   Stars: hot-pink fill + hot-pink drop-shadow
   Score label: Orbitron, cyan
   ------------------------------------------------------------ */
.wc-block-components-product-rating .wc-block-components-product-rating__stars,
.woocommerce-product-rating .star-rating {
  color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
}

.wc-block-components-product-rating .wc-block-components-product-rating__stars::before,
.woocommerce-product-rating .star-rating::before {
  color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  filter: drop-shadow(0 0 4px rgba(255, 0, 128, 0.6)) !important;
}

.wc-block-components-product-rating__reviews-count,
.woocommerce-product-rating .rating-count a {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--fg-5, #6B7280) !important;
}

/* ------------------------------------------------------------
   PRODUCT SHORT DESCRIPTION
   ------------------------------------------------------------ */
.woocommerce-product-details__short-description,
.wp-block-post-excerpt.wp-block-woocommerce-product-summary {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: var(--wp--preset--color--fg-3, #D1D5DB) !important;
}

/* ------------------------------------------------------------
   ADD-TO-CART FORM + QUANTITY STEPPER
   Source: components-qty-stepper.html + components-buttons-store.html
   Stepper: dark-surface bg, dark-border border, radius:0, cyan buttons
   ATC: hot-pink gradient, cyan border, radius:0, Orbitron
   ------------------------------------------------------------ */
.woocommerce form.cart,
.wc-block-components-product-add-to-cart {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Quantity stepper wrapper */
.wc-block-components-quantity-selector,
.quantity {
  display: flex;
  align-items: center;
  border: 1px solid var(--wp--preset--color--dark-border, #2A2A3A) !important;
  border-radius: 4px !important;
  background: var(--wp--preset--color--dark-bg, #0A0A0F) !important;
  width: fit-content;
}

.wc-block-components-quantity-selector:focus-within,
.quantity:focus-within {
  border-color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.25) !important;
}

/* Minus / Plus buttons */
.wc-block-components-quantity-selector__button,
.quantity button {
  width: 40px;
  height: 44px;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast, 0.15s);
}

.wc-block-components-quantity-selector__button:hover,
.quantity button:hover {
  color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
}

/* Qty input */
.wc-block-components-quantity-selector input,
.quantity input.qty {
  width: 48px;
  text-align: center;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--wp--preset--color--fg-1, #FFFFFF) !important;
  font-family: var(--font-display) !important;
  font-size: 15px !important;
  font-weight: 700;
  outline: none;
}

/* ATC button — primary PDP action */
.single-product .wp-block-woocommerce-add-to-cart-form .single_add_to_cart_button,
.wc-block-components-product-add-to-cart-button button,
.single-product button.single_add_to_cart_button {
  background: linear-gradient(
    45deg,
    var(--wp--preset--color--neon-pink-hot, #FF0080),
    #FF1493
  ) !important;
  border: 2px solid var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  border-radius: 4px !important;
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--fg-1, #FFFFFF) !important;
  padding: 14px 24px !important;
  width: 100%;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.4) !important;
  transition: all var(--transition-base, 0.25s) !important;
  cursor: pointer;
}

.single-product .wp-block-woocommerce-add-to-cart-form .single_add_to_cart_button:hover,
.wc-block-components-product-add-to-cart-button button:hover,
.single-product button.single_add_to_cart_button:hover {
  background: linear-gradient(
    45deg,
    var(--wp--preset--color--neon-cyan, #00FFFF),
    #00BFFF
  ) !important;
  color: #000000 !important;
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.6) !important;
  transform: translateY(-2px);
}

/* ATC loading/added state */
.single_add_to_cart_button.loading,
.single_add_to_cart_button.added {
  opacity: 0.75;
  transform: none !important;
  cursor: default;
}

/* ATC variation-selection-needed (no variant chosen yet) — ghost outline, not dimmed pink.
   Specificity must beat .single-product button.single_add_to_cart_button (0,2,1). */
.single-product button.single_add_to_cart_button.disabled,
.single-product button.single_add_to_cart_button.wc-variation-selection-needed,
.woocommerce-variation-add-to-cart-disabled .single-product button.single_add_to_cart_button {
  background: transparent !important;
  background-image: none !important;
  border: 2px solid var(--wp--preset--color--dark-border, #2A2A3A) !important;
  color: var(--wp--preset--color--fg-5, #6B7280) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  cursor: default !important;
  transform: none !important;
}

/* ------------------------------------------------------------
   VARIABLE PRODUCT — VARIATION SELECT (Finish, Size, etc.)
   ------------------------------------------------------------ */

/* Variations table layout */
table.variations {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-bottom: 16px !important;
}

table.variations td,
table.variations th {
  padding: 8px 0 !important;
  border: none !important;
  background: transparent !important;
  vertical-align: middle !important;
}

table.variations .label {
  width: auto !important;
  padding-right: 16px !important;
  white-space: nowrap !important;
}

table.variations .label label {
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--fg-1, #FFFFFF) !important;
}

/* The select element */
table.variations select,
.variations select,
.woocommerce-variation-add-to-cart select,
.single-product .variations select {
  background-color: var(--wp--preset--color--dark-bg, #0A0A0F) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2300FFFF' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 10px 7px !important;
  color: var(--wp--preset--color--fg-2, #E0E0E0) !important;
  border: 1px solid var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  border-radius: 4px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  padding: 10px 36px 10px 12px !important;
  width: 100% !important;
  min-width: 200px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  outline: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

table.variations select:focus,
.variations select:focus {
  border-color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  box-shadow: 0 0 0 2px rgba(0, 255, 255, 0.2) !important;
  outline: none !important;
}

/* Placeholder "Choose an option" state */
table.variations select option[value=""] {
  color: var(--wp--preset--color--fg-5, #6B7280) !important;
  background-color: var(--wp--preset--color--dark-bg, #0A0A0F) !important;
}

table.variations select option {
  background-color: var(--wp--preset--color--dark-card, #1A1A24) !important;
  color: var(--wp--preset--color--fg-2, #E0E0E0) !important;
}

/* Reset variation link */
.reset_variations {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  color: var(--wp--preset--color--fg-5, #6B7280) !important;
  text-decoration: none !important;
  display: inline-block !important;
  margin-top: 6px !important;
}

.reset_variations:hover {
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
}

/* ------------------------------------------------------------
   PRODUCT IMAGE GALLERY
   Source: components-image-gallery-thumbs.html
   Main frame: dark-card bg, hot-pink border 2px, scanline overlay
   Thumbnails: dark-card bg, inactive=dark-border, active=neon-cyan
   radius:0 everywhere
   ------------------------------------------------------------ */

/* Gallery outer container */
.woocommerce-product-gallery,
.wc-block-product-image-gallery,
.wp-block-woocommerce-product-image-gallery {
  background: var(--wp--preset--color--dark-card, #1A1A24);
  border: 1px solid var(--wp--preset--color--dark-border, #2A2A3A);
  border-radius: 8px !important;
}

/* Main product image frame */
.woocommerce-product-gallery__image,
.wc-block-product-image-gallery__large-image-wrapper,
.woocommerce-product-gallery .flex-viewport {
  position: relative;
  background: linear-gradient(
    135deg,
    var(--wp--preset--color--dark-card, #1A1A24),
    var(--wp--preset--color--dark-border, #2A2A3A)
  );
  border: 2px solid var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  border-radius: 8px !important;
  overflow: hidden;
  box-shadow: 0 0 16px rgba(255, 0, 128, 0.25);
}

/* Scanline overlay on main image — diagonal hot-pink lines */
.woocommerce-product-gallery__image::before,
.wc-block-product-image-gallery__large-image-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: repeating-linear-gradient(
    45deg,
    transparent, transparent 10px,
    rgba(255, 0, 128, 0.08) 10px, rgba(255, 0, 128, 0.08) 20px
  );
  pointer-events: none;
}

/* Main image itself — sits above scanline */
.woocommerce-product-gallery__image img,
.wc-block-product-image-gallery__large-image-wrapper img {
  position: relative;
  z-index: 2;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 0 !important;
}

/* Fullscreen expand button */
.woocommerce-product-gallery__trigger,
.wc-block-product-image-gallery__zoom-button {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, 0.6) !important;
  border: 1px solid var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  border-radius: 6px !important;
  color: var(--wp--preset--color--neon-cyan, #00FFFF);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Image counter badge */
.wc-block-product-image-gallery__pager-position-indicator {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 3;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid var(--wp--preset--color--dark-border, #2A2A3A);
  border-radius: 4px !important;
  font-family: var(--font-display);
  font-size: 10px;
  color: var(--wp--preset--color--fg-1, #FFFFFF);
  letter-spacing: 0.1em;
}

/* Thumbnail strip */
.woocommerce-product-gallery .flex-control-nav,
.wc-block-product-image-gallery__thumbnails {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Individual thumbnail */
.woocommerce-product-gallery .flex-control-nav li img,
.wc-block-product-image-gallery__thumbnails .wc-block-product-image-gallery__pager-button img,
.wc-block-product-image-gallery__pager-button img {
  display: block;
  background: var(--wp--preset--color--dark-card, #1A1A24);
  border: 1px solid var(--wp--preset--color--dark-border, #2A2A3A) !important;
  border-radius: 4px !important;
  opacity: 0.65;
  transition: opacity var(--transition-base, 0.25s), border-color var(--transition-base, 0.25s);
  cursor: pointer;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/* Active thumbnail */
.woocommerce-product-gallery .flex-control-nav .flex-active img,
.wc-block-product-image-gallery__pager-button--selected img,
.wc-block-product-image-gallery__pager-button:hover img {
  opacity: 1 !important;
  border-color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  box-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
}

/* Selected thumbnail pager button */
.wc-block-product-image-gallery__pager-button--selected {
  border: 2px solid var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  border-radius: 4px !important;
}

/* Thumbnail pager wrapper */
.wc-block-product-image-gallery__pager {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 80px;
}

/* ------------------------------------------------------------
   PRODUCT META (SKU, CATEGORY, TAGS)
   Source: store.css .pdp-meta
   ------------------------------------------------------------ */
.pdp-meta-row,
.woocommerce-product-details__short-description + .product_meta,
.wp-block-woocommerce-product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--wp--preset--color--fg-5, #6B7280);
  border-top: 1px solid var(--wp--preset--color--dark-border, #2A2A3A);
  padding-top: 14px;
}

.wp-block-woocommerce-product-sku,
.pdp-meta-term,
.woocommerce-product-details__short-description + .product_meta span {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  color: var(--wp--preset--color--fg-5, #6B7280) !important;
}

.wp-block-woocommerce-product-sku strong,
.pdp-meta-term strong,
.woocommerce-product-details__short-description + .product_meta span strong {
  color: var(--wp--preset--color--fg-3, #D1D5DB) !important;
}

.pdp-meta-term a,
.wp-block-post-terms a {
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  text-decoration: none;
}

.pdp-meta-term a:hover,
.wp-block-post-terms a:hover {
  color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
}

/* ------------------------------------------------------------
   STOCK STATUS INDICATOR
   Source: components-stock-status.html
   In stock: green | Low stock: amber | Sold out: pink
   All: Orbitron, 10px, radius:0
   ------------------------------------------------------------ */
.woocommerce-stock-status,
.wc-block-components-product-stock-indicator,
.stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-family: var(--font-display) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
}

.in-stock,
.wc-block-components-product-stock-indicator.is-in-stock {
  background: rgba(16, 185, 129, 0.15) !important;
  border: 1px solid rgba(16, 185, 129, 0.5) !important;
  color: #34D399 !important;
}

.out-of-stock,
.wc-block-components-product-stock-indicator.is-out-of-stock {
  background: rgba(255, 0, 128, 0.15) !important;
  border: 1px solid rgba(255, 0, 128, 0.5) !important;
  color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
}

.available-on-backorder {
  background: rgba(157, 0, 255, 0.15) !important;
  border: 1px solid rgba(157, 0, 255, 0.5) !important;
  color: var(--wp--preset--color--neon-purple, #9D00FF) !important;
}

/* "Only N left" low-stock warning */
.woocommerce-low-stock-amount {
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid rgba(245, 158, 11, 0.5) !important;
  color: #F59E0B !important;
}

/* ------------------------------------------------------------
   TRUST BADGES + PAYMENT PILLS
   Source: components-trust-payment.html
   ------------------------------------------------------------ */
.trust-badges {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--wp--preset--color--dark-border, #2A2A3A);
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.trust-badge--secure  { color: #34D399; }
.trust-badge--ship    { color: var(--wp--preset--color--neon-cyan, #00FFFF); }
.trust-badge--authentic { color: var(--wp--preset--color--neon-pink-hot, #FF0080); }

.trust-badge svg { flex-shrink: 0; stroke: currentColor; }

.payment-method-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 4px;
}

.payment-pill {
  display: inline-block;
  padding: 6px 12px;
  background: var(--wp--preset--color--dark-surface, #12121A);
  border: 1px solid var(--wp--preset--color--dark-border, #2A2A3A);
  border-radius: 4px !important;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--wp--preset--color--fg-3, #D1D5DB);
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   PRODUCT DETAILS TABS (Description / Additional Info / Reviews)
   Source: components-tabs.html
   Outer border: 2px solid neon-cyan | Active tab: pink bg + pink border
   Inactive tab: near-black bg + cyan border
   radius:0 everywhere (override WC default)
   ------------------------------------------------------------ */
.woocommerce-tabs,
.wp-block-woocommerce-product-details,
.wc-tabs-wrapper {
  margin-top: 48px;
  border-top: none !important;
}

.woocommerce-tabs ul.tabs,
.wp-block-woocommerce-product-details .wc-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  margin: 0;
  padding: 0;
  list-style: none;
  background: transparent;
}

/* Tab item */
.woocommerce-tabs ul.tabs li,
.wp-block-woocommerce-product-details .wc-tabs li {
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce-tabs ul.tabs li a,
.wp-block-woocommerce-product-details .wc-tabs li a {
  display: block;
  padding: 12px 20px;
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  background: rgba(0, 0, 0, 0.8) !important;
  border: 1px solid var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  border-bottom: none !important;
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  border-radius: 0 !important;
  text-decoration: none;
  transition: background var(--transition-fast, 0.15s), color var(--transition-fast, 0.15s);
}

/* Active tab — pink */
.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover,
.wp-block-woocommerce-product-details .wc-tabs li.active a,
.wp-block-woocommerce-product-details .wc-tabs li a:hover {
  background: rgba(255, 0, 128, 0.15) !important;
  border-color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  text-shadow: 0 0 6px rgba(255, 0, 128, 0.6) !important;
}

/* Tab content panel */
.woocommerce-tabs .panel,
.woocommerce-Tabs-panel,
.wp-block-woocommerce-product-details .woocommerce-Tabs-panel {
  background: var(--wp--preset--color--dark-bg, #0A0A0F);
  border: 1px solid var(--wp--preset--color--dark-border, #2A2A3A);
  border-top: none;
  padding: 24px;
}

/* Tab panel typography */
.woocommerce-Tabs-panel h2 {
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  margin-bottom: 16px !important;
}

.woocommerce-Tabs-panel p,
.woocommerce-Tabs-panel td,
.woocommerce-Tabs-panel th {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: var(--wp--preset--color--fg-3, #D1D5DB) !important;
}

/* Additional info table */
.woocommerce-product-attributes th {
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--fg-5, #6B7280) !important;
  background: transparent !important;
  border-bottom: 1px solid var(--wp--preset--color--dark-border, #2A2A3A) !important;
  padding: 10px 12px !important;
}

.woocommerce-product-attributes td {
  background: transparent !important;
  border-bottom: 1px solid var(--wp--preset--color--dark-border, #2A2A3A) !important;
  padding: 10px 12px !important;
}

/* ------------------------------------------------------------
   REVIEWS TAB
   Source: components-ratings.html + components-customer-review.html
   Score: Orbitron, cyan | Stars: hot-pink | Review card: dark-card
   ------------------------------------------------------------ */

/* Review list */
#reviews,
.woocommerce-Reviews {
  background: transparent;
}

.comment-form-rating label,
#review_form .comment-notes,
.woocommerce-Reviews #respond h3 {
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--fg-3, #D1D5DB) !important;
}

/* Individual review */
.woocommerce-Reviews .review,
.comment.byuser {
  background: var(--wp--preset--color--dark-card, #1A1A24) !important;
  border: 1px solid var(--wp--preset--color--dark-border, #2A2A3A) !important;
  border-radius: 8px !important;
  padding: 16px;
  margin-bottom: 16px;
}

.woocommerce-Reviews .comment-author,
.woocommerce-Reviews .woocommerce-review__author {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--wp--preset--color--fg-1, #FFFFFF) !important;
}

.woocommerce-Reviews .description p {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  color: var(--wp--preset--color--fg-3, #D1D5DB) !important;
  line-height: 1.6 !important;
}

.woocommerce-Reviews .star-rating {
  color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
}

/* Review form submit */
#review_form #submit {
  background: linear-gradient(
    45deg,
    var(--wp--preset--color--neon-pink-hot, #FF0080),
    #FF1493
  ) !important;
  border: 2px solid var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  border-radius: 4px !important;
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--fg-1, #FFFFFF) !important;
  padding: 12px 24px !important;
  cursor: pointer;
}

#review_form input[type="text"],
#review_form input[type="email"],
#review_form textarea {
  background: var(--wp--preset--color--dark-bg, #0A0A0F) !important;
  border: 1px solid var(--wp--preset--color--dark-border, #2A2A3A) !important;
  border-radius: 4px !important;
  color: var(--wp--preset--color--fg-1, #FFFFFF) !important;
  font-family: var(--font-body) !important;
}

#review_form input:focus,
#review_form textarea:focus {
  border-color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  box-shadow: 0 0 0 2px rgba(0, 255, 255, 0.15) !important;
  outline: none;
}

/* ------------------------------------------------------------
   RELATED PRODUCTS SECTION
   Source: components-related-products.html
   Heading: Orbitron, hot-pink, 13px, 0.12em tracking
   "View all →" link: cyan
   Cards reuse Phase 4 card styles — only layout overrides here
   ------------------------------------------------------------ */
.related.products,
.up-sells.products,
.wc-block-related-products,
.wp-block-woocommerce-related-products {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--wp--preset--color--dark-border, #2A2A3A);
}

.related.products > h2,
.up-sells.products > h2,
.wc-block-related-products h2,
.wp-block-woocommerce-related-products h2 {
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  text-shadow: 0 0 6px rgba(255, 0, 128, 0.5) !important;
  margin-bottom: 20px !important;
}

/* Related grid: 4-column desktop, 2 mobile */
.related.products ul.products,
.up-sells.products ul.products,
.wc-block-related-products ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

@media (max-width: 600px) {
  .related.products ul.products,
  .up-sells.products ul.products,
  .wc-block-related-products ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Related product card image area — scanline + dark bg */
.related.products li.product .woocommerce-product-gallery,
.related.products li.product img,
.up-sells.products li.product img {
  border-radius: 0 !important;
  background: var(--wp--preset--color--dark-card, #1A1A24);
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 10px;
  background-image: repeating-linear-gradient(
    45deg,
    transparent, transparent 8px,
    rgba(255, 0, 128, 0.06) 8px, rgba(255, 0, 128, 0.06) 16px
  );
}

/* Related card text info */
.related.products li.product .woocommerce-loop-product__title,
.up-sells.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--wp--preset--color--fg-1, #FFFFFF) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 8px 8px 2px !important;
  text-transform: none !important;
}

.related.products li.product .price,
.up-sells.products li.product .price {
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  text-shadow: 0 0 4px rgba(0, 255, 255, 0.5) !important;
  padding: 0 8px 8px !important;
}

/* ------------------------------------------------------------
   MOBILE — PDP RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .pdp-layout {
    flex-direction: column !important;
    gap: 24px;
  }

  .pdp-gallery-col,
  .pdp-info-col {
    width: 100% !important;
    flex-basis: 100% !important;
  }

  .pdp-gallery-col .woocommerce-product-gallery,
  .pdp-gallery-col .wc-block-product-image-gallery {
    position: static !important;
  }

  .pdp-page {
    padding-top: 80px;
  }
}

/* ============================================================
   PHASE 6 — CART / CHECKOUT
   References:
     preview/components-order-summary.html
     preview/components-input.html
     preview/components-payment-methods.html
     preview/components-checkout-steps.html
     preview/components-shipping-methods.html
     preview/components-coupon-entry.html
     ui_kits/store/store.css (.cart-drawer, .cart-*, .btn-checkout)
   RULE: var(--wp--preset--color--{slug}, #fallback) for ALL color refs.
   RULE: border-radius: 0 everywhere. No magenta. No inline style="".
   ============================================================ */

/* ------------------------------------------------------------
   PAGE LAYOUT — CART + CHECKOUT
   Body class: .woocommerce-cart / .woocommerce-checkout
   The .cart-page / .checkout-page group block provides constrained
   layout. WP block constrained adds side padding via --wp--style--
   root--padding-right/left. We set top/bottom directly.
   ------------------------------------------------------------ */
body.woocommerce-cart .cart-page,
body.woocommerce-cart main.wp-block-group {
  padding-top: 100px !important;
  padding-bottom: 56px !important;
}

body.woocommerce-checkout .checkout-page,
body.woocommerce-checkout main.wp-block-group {
  padding-top: 100px !important;
  padding-bottom: 56px !important;
}

/* ------------------------------------------------------------
   CART TABLE
   Source: store.css .cart-items + .cart-item pattern
   WC block classes: .wc-block-cart, .wc-block-cart-items__header,
   .wc-block-cart-items__row, .wc-block-cart-item__*
   ------------------------------------------------------------ */

/* Cart outer wrapper */
.wc-block-cart {
  background: var(--wp--preset--color--dark-bg, #0A0A0F);
  color: var(--wp--preset--color--fg-2, #E0E0E0);
}

/* Cart table head row */
.wc-block-cart-items__header {
  background: transparent;
  border-bottom: 1px solid var(--wp--preset--color--dark-border, #2A2A3A) !important;
}

.wc-block-cart-items__header th {
  font-family: var(--font-display) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  background: transparent !important;
  padding: 12px 0 !important;
  border-bottom: none !important;
}

/* Cart item row */
.wc-block-cart-items__row {
  background: var(--wp--preset--color--dark-surface, #12121A) !important;
  border-bottom: 1px solid var(--wp--preset--color--dark-border, #2A2A3A) !important;
  padding: 12px 0 !important;
}

/* Cart item hover */
.wc-block-cart-items__row:hover {
  background: rgba(26, 26, 36, 0.8) !important;
}

/* Cart item — thumbnail image */
.wc-block-cart-item__image img {
  border-radius: 4px !important;
  border: 1px solid var(--wp--preset--color--dark-border, #2A2A3A) !important;
  background: var(--wp--preset--color--dark-card, #1A1A24);
  object-fit: contain;
}

/* Cart item — product name link */
.wc-block-cart-item__product-name,
.wc-block-cart-item__product-name a,
.wc-block-components-product-name,
.wc-block-components-product-name a {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--wp--preset--color--fg-1, #FFFFFF) !important;
  text-decoration: none !important;
}

.wc-block-cart-item__product-name a:hover {
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
}

/* Cart item — variation/meta text below product name */
.wc-block-cart-item__product-metadata,
.wc-block-cart-item__product-metadata dd,
.wc-block-cart-item__product-metadata dt {
  font-family: var(--font-display) !important;
  font-size: 9px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--fg-5, #6B7280) !important;
  margin-top: 2px !important;
}

/* Cart item — unit price */
.wc-block-cart-item__individual-prices .woocommerce-Price-amount,
.wc-block-cart-item__price .woocommerce-Price-amount {
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--wp--preset--color--fg-1, #FFFFFF) !important;
  text-shadow: none !important;
}

/* Cart item — line subtotal (rightmost column) */
.wc-block-cart-item__total .woocommerce-Price-amount {
  font-family: var(--font-display) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  text-shadow: 0 0 6px rgba(0, 255, 255, 0.5) !important;
}

/* Cart item — quantity input (reuses Phase 5 qty stepper, reinforce here) */
.wc-block-cart-item .wc-block-components-quantity-selector {
  border: 1px solid var(--wp--preset--color--dark-border, #2A2A3A) !important;
  border-radius: 4px !important;
  background: var(--wp--preset--color--dark-bg, #0A0A0F) !important;
}

.wc-block-cart-item .wc-block-components-quantity-selector:focus-within {
  border-color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  box-shadow: 0 0 0 2px rgba(0, 255, 255, 0.15) !important;
}

.wc-block-cart-item .wc-block-components-quantity-selector input {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--wp--preset--color--fg-1, #FFFFFF) !important;
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  width: 48px !important;
  text-align: center !important;
}

.wc-block-cart-item .wc-block-components-quantity-selector__button {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  width: 40px !important;
  height: 44px !important;
  cursor: pointer;
}

.wc-block-cart-item .wc-block-components-quantity-selector__button:hover {
  color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
}

/* Cart item — remove button */
.wc-block-cart-item__remove-link,
.wc-block-cart-item__remove-link a {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  color: var(--wp--preset--color--fg-5, #6B7280) !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

.wc-block-cart-item__remove-link:hover,
.wc-block-cart-item__remove-link a:hover {
  color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
}

/* ------------------------------------------------------------
   CART TOTALS PANEL
   Source: components-order-summary.html
   Container: dark-surface bg, dark-border border, no radius
   Totals rows: Inter 13px fg-3 | final total: Orbitron, cyan glow
   Top border of total row: 2px solid neon-pink-hot (matches design)
   ------------------------------------------------------------ */

/* Cart totals outer wrapper */
.wc-block-cart__sidebar,
.wc-block-cart__submit {
  background: var(--wp--preset--color--dark-surface, #12121A) !important;
  border: 1px solid var(--wp--preset--color--dark-border, #2A2A3A) !important;
  border-radius: 8px !important;
  padding: 14px !important;
}

/* "Order summary" heading above totals */
.wc-block-components-order-summary__title,
.wc-block-cart__sidebar > h2,
.wc-block-cart__sidebar > h3 {
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  text-shadow: 0 0 6px rgba(255, 0, 128, 0.5) !important;
  margin-bottom: 12px !important;
}

/* Order summary line items (product rows) */
.wc-block-components-order-summary-item {
  border-bottom: 1px dashed var(--wp--preset--color--dark-border, #2A2A3A) !important;
  padding: 8px 0 !important;
}

.wc-block-components-order-summary-item__description {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--wp--preset--color--fg-1, #FFFFFF) !important;
}

.wc-block-components-order-summary-item__quantity {
  font-family: var(--font-display) !important;
  font-size: 9px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--fg-5, #6B7280) !important;
  margin-top: 2px !important;
}

.wc-block-components-order-summary-item__individual-prices .woocommerce-Price-amount,
.wc-block-components-order-summary-item .woocommerce-Price-amount {
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--wp--preset--color--fg-1, #FFFFFF) !important;
  text-shadow: none !important;
}

/* Totals table rows (subtotal, shipping, discount, VAT) */
.wc-block-components-totals-item {
  display: flex;
  justify-content: space-between;
  padding: 6px 0 !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  color: var(--wp--preset--color--fg-3, #D1D5DB) !important;
  border: none !important;
  background: transparent !important;
}

.wc-block-components-totals-item__label {
  color: var(--wp--preset--color--fg-3, #D1D5DB) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
}

.wc-block-components-totals-item__value .woocommerce-Price-amount {
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  text-shadow: 0 0 4px rgba(0, 255, 255, 0.4) !important;
}

/* Discount row — show savings in green */
.wc-block-components-totals-coupon-code,
.wc-block-components-totals-discount .wc-block-components-totals-item__value .woocommerce-Price-amount {
  color: #34D399 !important;
  text-shadow: 0 0 4px rgba(52, 211, 153, 0.4) !important;
}

/* Separator before grand total */
.wc-block-components-totals-footer-item {
  border-top: 2px solid var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  margin-top: 6px !important;
  padding-top: 10px !important;
}

/* Grand total label */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--fg-5, #6B7280) !important;
}

/* Grand total amount — broad selector + specific, covers all WC DOM variants */
.wc-block-components-totals-footer-item .woocommerce-Price-amount,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value .woocommerce-Price-amount {
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.6) !important;
}

/* ------------------------------------------------------------
   COUPON CODE INPUT + APPLY BUTTON
   Source: components-coupon-entry.html
   Input: dark-surface bg, dark-border 1px, radius:0, Inter
   Button: transparent bg, neon-cyan 2px border, Orbitron, radius:0
   ------------------------------------------------------------ */

/* Coupon row wrapper */
.wc-block-components-totals-coupon {
  display: flex !important;
  gap: 6px !important;
  margin-top: 8px !important;
}

.wc-block-components-totals-coupon__form {
  display: flex !important;
  gap: 6px !important;
  width: 100% !important;
}

/* Coupon text input */
.wc-block-components-totals-coupon__input input,
.wc-block-components-coupon input[type="text"] {
  flex: 1 !important;
  padding: 11px 14px !important;
  background: var(--wp--preset--color--dark-surface, #12121A) !important;
  border: 1px solid var(--wp--preset--color--dark-border, #2A2A3A) !important;
  border-radius: 4px !important;
  color: var(--wp--preset--color--fg-1, #FFFFFF) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  outline: none !important;
}

.wc-block-components-totals-coupon__input input::placeholder {
  color: var(--wp--preset--color--fg-5, #6B7280) !important;
  text-transform: uppercase !important;
}

.wc-block-components-totals-coupon__input input:focus,
.wc-block-components-coupon input:focus {
  border-color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  box-shadow: 0 0 0 2px rgba(0, 255, 255, 0.15) !important;
}

/* Apply coupon button */
.wc-block-components-totals-coupon__button,
.wc-block-components-coupon button[type="submit"] {
  padding: 11px 20px !important;
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border: 2px solid var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  border-radius: 4px !important;
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.wc-block-components-totals-coupon__button:hover,
.wc-block-components-coupon button[type="submit"]:hover {
  background: rgba(0, 255, 255, 0.12) !important;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.3) !important;
}

/* Applied coupon badge */
.wc-block-components-chip {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  background: rgba(16, 185, 129, 0.10) !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  border-radius: 4px !important;
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #34D399 !important;
}

.wc-block-components-chip__remove {
  background: transparent !important;
  border: none !important;
  color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  text-decoration: underline !important;
  cursor: pointer !important;
}

/* Proceed to checkout button (cart page CTA) */
.wc-block-cart__submit-button,
.wc-block-cart__submit .wp-element-button {
  display: block !important;
  width: 100% !important;
  padding: 14px 18px !important;
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--fg-1, #FFFFFF) !important;
  background: linear-gradient(
    45deg,
    var(--wp--preset--color--neon-pink-hot, #FF0080),
    #FF1493
  ) !important;
  border: 2px solid var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  border-radius: 4px !important;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.4) !important;
  cursor: pointer !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  margin-top: 12px !important;
}

.wc-block-cart__submit-button:hover,
.wc-block-cart__submit .wp-element-button:hover {
  background: linear-gradient(
    45deg,
    var(--wp--preset--color--neon-cyan, #00FFFF),
    #00BFFF
  ) !important;
  color: #000000 !important;
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.6) !important;
  transform: translateY(-2px);
}

/* Return to shop link */
.wc-block-cart__return-to-shopping {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  text-decoration: none !important;
  display: block !important;
  text-align: center !important;
  margin-top: 10px !important;
  letter-spacing: 0.06em !important;
}

.wc-block-cart__return-to-shopping:hover {
  color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
}

/* ------------------------------------------------------------
   CHECKOUT FORM — PAGE-LEVEL HEADING
   ------------------------------------------------------------ */

.woocommerce-checkout .wc-block-checkout__main h2,
.wp-block-woocommerce-checkout-shipping-address-block h2,
.wp-block-woocommerce-checkout-billing-address-block h2,
.wp-block-woocommerce-checkout-contact-information-block h2,
.wp-block-woocommerce-checkout-payment-block h2 {
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  text-shadow: 0 0 6px rgba(255, 0, 128, 0.4) !important;
  margin-bottom: 14px !important;
  border-bottom: 1px solid var(--wp--preset--color--dark-border, #2A2A3A) !important;
  padding-bottom: 8px !important;
}

/* Step label (used in multi-step checkout if active) */
.wc-block-checkout__step-title {
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
}

/* ------------------------------------------------------------
   CHECKOUT FORM INPUTS
   Source: components-input.html
   Background: dark-surface (#12121A), border: dark-border 1px,
   radius: 0, focus: neon-cyan border + 2px glow ring
   Labels: Inter 13px fg-3
   ------------------------------------------------------------ */

/* Form field labels */
.wc-block-components-text-input label,
.wc-block-components-address-form label,
.wc-block-components-select label,
.wc-block-components-checkbox label,
.wc-block-components-combobox label {
  display: block !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  color: var(--wp--preset--color--fg-3, #D1D5DB) !important;
  margin-bottom: 6px !important;
}

/* Text inputs, selects, textareas */
.wc-block-components-text-input input,
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-address-form input,
.wc-block-components-address-form input[type="text"],
.wc-block-components-address-form input[type="email"],
.wc-block-components-address-form input[type="tel"],
.wc-block-components-select select,
.wc-block-components-combobox input,
.wc-block-components-textarea textarea,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout select {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 12px 16px !important;
  background: var(--wp--preset--color--dark-bg, #0A0A0F) !important;
  border: 1px solid var(--wp--preset--color--dark-border, #2A2A3A) !important;
  border-radius: 4px !important;
  color: var(--wp--preset--color--fg-1, #FFFFFF) !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  outline: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Focus state */
.wc-block-components-text-input input:focus,
.wc-block-components-address-form input:focus,
.wc-block-components-select select:focus,
.wc-block-components-combobox input:focus,
.wc-block-components-textarea textarea:focus,
.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus {
  border-color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  box-shadow: 0 0 0 2px rgba(0, 255, 255, 0.15) !important;
}

/* Placeholder text */
.wc-block-components-text-input input::placeholder,
.wc-block-components-address-form input::placeholder,
.woocommerce-checkout input::placeholder {
  color: var(--wp--preset--color--fg-5, #6B7280) !important;
}

/* Select dropdown arrow — replace browser default with cyan */
.wc-block-components-select select,
.woocommerce-checkout select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2300FFFF' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 40px !important;
}

/* Checkbox (opt-in, save address, etc.) */
.wc-block-components-checkbox input[type="checkbox"] {
  accent-color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 0 !important;
  cursor: pointer !important;
}

.wc-block-components-checkbox .wc-block-components-checkbox__label {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  color: var(--wp--preset--color--fg-3, #D1D5DB) !important;
}

/* ------------------------------------------------------------
   CHECKOUT ORDER SUMMARY (RIGHT PANEL)
   Source: components-order-summary.html
   Panel: dark-surface bg, dark-border 1px, no radius
   Matches cart totals panel styling above
   ------------------------------------------------------------ */

/* Checkout order summary panel outer wrapper */
.wc-block-checkout__sidebar,
.wc-block-checkout__order-summary {
  background: var(--wp--preset--color--dark-surface, #12121A) !important;
  border: 1px solid var(--wp--preset--color--dark-border, #2A2A3A) !important;
  border-radius: 8px !important;
  padding: 14px !important;
}

/* Checkout sidebar headings */
.wc-block-checkout__sidebar h2,
.wc-block-checkout__order-summary h2 {
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  text-shadow: 0 0 6px rgba(255, 0, 128, 0.5) !important;
  margin-bottom: 12px !important;
}

/* Expandable order summary toggle */
.wc-block-components-order-summary {
  background: var(--wp--preset--color--dark-surface, #12121A) !important;
  border: 1px solid var(--wp--preset--color--dark-border, #2A2A3A) !important;
  border-radius: 8px !important;
}

.wc-block-components-order-summary__button,
.wc-block-components-order-summary button {
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 10px 14px !important;
}

/* ------------------------------------------------------------
   SHIPPING METHOD SELECTOR
   Source: components-shipping-methods.html
   Selected: cyan bg tint + 2px cyan border + cyan glow
   Unselected: dark-surface bg + dark-border 1px
   Label: Orbitron 12px uppercase | Description: Inter 11px fg-5
   Price: Orbitron 13px (cyan if selected, fg-1 if not, green if free)
   radius: 0 (override design system preview which uses 6px)
   ------------------------------------------------------------ */

.wc-block-components-shipping-rates-control,
.wc-block-components-radio-control {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* Each shipping option row */
.wc-block-components-radio-control__option,
.wc-block-components-shipping-rates-control__package-option {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px !important;
  background: var(--wp--preset--color--dark-surface, #12121A) !important;
  border: 1px solid var(--wp--preset--color--dark-border, #2A2A3A) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}

/* Selected shipping option */
.wc-block-components-radio-control__option:has(input:checked),
.wc-block-components-shipping-rates-control__package-option:has(input:checked) {
  background: rgba(0, 255, 255, 0.06) !important;
  border: 2px solid var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  box-shadow: 0 0 14px rgba(0, 255, 255, 0.2) !important;
}

/* Radio button dot */
.wc-block-components-radio-control__option input[type="radio"] {
  accent-color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
}

/* Shipping option label text */
.wc-block-components-radio-control__option-layout,
.wc-block-components-shipping-rates-control__package-option-layout {
  flex: 1 !important;
}

.wc-block-components-radio-control__option .wc-block-components-radio-control__label,
.wc-block-components-shipping-rates-control__package-option-label {
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--fg-3, #D1D5DB) !important;
}

.wc-block-components-radio-control__option:has(input:checked) .wc-block-components-radio-control__label {
  color: var(--wp--preset--color--fg-1, #FFFFFF) !important;
  text-shadow: 0 0 4px rgba(0, 255, 255, 0.5) !important;
}

/* Shipping option secondary text (delivery time) */
.wc-block-components-radio-control__option .wc-block-components-radio-control__secondary-label,
.wc-block-components-shipping-rates-control__package-option-description {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  color: var(--wp--preset--color--fg-5, #6B7280) !important;
  margin-top: 2px !important;
}

/* Shipping option price */
.wc-block-components-shipping-rates-control__package-option-price .woocommerce-Price-amount,
.wc-block-components-radio-control__option .wc-block-components-radio-control__price {
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--wp--preset--color--fg-1, #FFFFFF) !important;
  text-shadow: none !important;
}

.wc-block-components-radio-control__option:has(input:checked) .wc-block-components-radio-control__price .woocommerce-Price-amount {
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  text-shadow: 0 0 6px rgba(0, 255, 255, 0.5) !important;
}

/* Free shipping — show in green */
.wc-block-components-radio-control__option .wc-block-components-radio-control__price[data-amount="0"] .woocommerce-Price-amount,
.is-free-shipping .woocommerce-Price-amount {
  color: #34D399 !important;
  text-shadow: 0 0 6px rgba(16, 185, 129, 0.5) !important;
}

/* ------------------------------------------------------------
   PAYMENT METHOD SELECTION
   Source: components-payment-methods.html
   Selected: pink bg tint + 2px pink border + pink glow
   Unselected: dark-surface bg + dark-border 1px
   Labels: Inter 11px fg-3 | Method logo area: dark-card bg
   radius: 0 everywhere
   ------------------------------------------------------------ */

/* Payment methods list */
.wc-block-components-payment-methods,
.wc-block-checkout__payment-method {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* Individual payment method option */
.wc-block-components-payment-methods .wc-block-components-payment-method-label,
.wc-block-components-payment-method {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px !important;
  background: var(--wp--preset--color--dark-surface, #12121A) !important;
  border: 1px solid var(--wp--preset--color--dark-border, #2A2A3A) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
  min-height: 60px !important;
}

/* Selected payment method */
.wc-block-components-payment-method.is-active,
.wc-block-checkout__payment-method--active {
  background: rgba(255, 0, 128, 0.10) !important;
  border: 2px solid var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  box-shadow: 0 0 14px rgba(255, 0, 128, 0.2) !important;
}

/* Payment method title */
.wc-block-components-payment-method-label__brand,
.wc-block-components-payment-method-label {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  color: var(--wp--preset--color--fg-3, #D1D5DB) !important;
}

.wc-block-components-payment-method.is-active .wc-block-components-payment-method-label {
  color: var(--wp--preset--color--fg-1, #FFFFFF) !important;
}

/* Payment method content area (card fields, etc.) */
.wc-block-components-payment-method-options,
.wc-block-components-payment-method__content {
  padding: 12px 14px !important;
  background: var(--wp--preset--color--dark-bg, #0A0A0F) !important;
  border: 1px solid var(--wp--preset--color--dark-border, #2A2A3A) !important;
  border-top: none !important;
  border-radius: 0 !important;
}

/* Stripe card fields */
.wc-block-components-payment-method__content iframe,
.wc-block-components-payment-method__content .StripeElement {
  background: var(--wp--preset--color--dark-surface, #12121A) !important;
  border: 1px solid var(--wp--preset--color--dark-border, #2A2A3A) !important;
  border-radius: 4px !important;
  padding: 12px !important;
}

/* Privacy policy / terms note */
.wc-block-checkout__privacy-policy,
.wc-block-checkout__terms {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  color: var(--wp--preset--color--fg-5, #6B7280) !important;
  text-align: center !important;
  margin-top: 12px !important;
}

.wc-block-checkout__privacy-policy a,
.wc-block-checkout__terms a {
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  text-decoration: none !important;
}

.wc-block-checkout__privacy-policy a:hover,
.wc-block-checkout__terms a:hover {
  color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
}

/* ------------------------------------------------------------
   PLACE ORDER BUTTON
   Source: store.css .btn-checkout pattern
   Full-width, hot-pink gradient, 2px cyan border, radius:0
   Orbitron, uppercase, 13px, 0.10em tracking
   Hover: flip to cyan gradient, black text
   ------------------------------------------------------------ */
.wc-block-components-checkout-place-order-button,
.wc-block-checkout__actions .wc-block-components-checkout-place-order-button {
  display: block !important;
  width: 100% !important;
  padding: 14px 18px !important;
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--fg-1, #FFFFFF) !important;
  background: linear-gradient(
    45deg,
    var(--wp--preset--color--neon-pink-hot, #FF0080),
    #FF1493
  ) !important;
  border: 2px solid var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  border-radius: 4px !important;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.4) !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: all 0.25s ease !important;
  margin-top: 16px !important;
}

.wc-block-components-checkout-place-order-button:hover {
  background: linear-gradient(
    45deg,
    var(--wp--preset--color--neon-cyan, #00FFFF),
    #00BFFF
  ) !important;
  color: #000000 !important;
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.6) !important;
  transform: translateY(-2px);
}

/* Loading state */
.wc-block-components-checkout-place-order-button.is-busy,
.wc-block-components-checkout-place-order-button:disabled {
  opacity: 0.7 !important;
  transform: none !important;
  cursor: wait !important;
}

/* ------------------------------------------------------------
   FORM ERROR + NOTICE STYLING
   Source: components-form-states.html (inline validation),
           WC notice patterns in woocommerce.css
   Error border-left: 4px solid neon-pink-hot
   Info border-left: 4px solid neon-cyan
   Success border-left: 4px solid #34D399 (green)
   All: dark bg, radius:0, Inter body text
   ------------------------------------------------------------ */

/* Block-level validation error (under inputs) */
.wc-block-components-validation-error,
.wc-block-components-text-input.has-error input,
.wc-block-components-address-form .has-error input {
  border-color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  box-shadow: 0 0 0 2px rgba(255, 0, 128, 0.15) !important;
}

.wc-block-components-validation-error p,
.wc-block-components-validation-error span {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  margin-top: 4px !important;
}

/* WooCommerce notices (cart + checkout) — covers block store notice + no-payment variant */
.woocommerce-error,
.wc-block-components-notice.is-error,
.wc-block-store-notice.is-error,
.wc-block-checkout__no-payment-methods-notice {
  background: rgba(255, 0, 128, 0.08) !important;
  border-left: 4px solid var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  border-radius: 0 !important;
  color: var(--wp--preset--color--fg-2, #E0E0E0) !important;
  font-family: var(--font-body) !important;
  padding: 12px 16px !important;
  margin-bottom: 12px !important;
}

.woocommerce-message,
.wc-block-components-notice.is-success {
  background: rgba(0, 255, 255, 0.06) !important;
  border-left: 4px solid var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  border-radius: 0 !important;
  color: var(--wp--preset--color--fg-2, #E0E0E0) !important;
  font-family: var(--font-body) !important;
  padding: 12px 16px !important;
  margin-bottom: 12px !important;
}

.woocommerce-info,
.wc-block-components-notice.is-info {
  background: rgba(157, 0, 255, 0.06) !important;
  border-left: 4px solid var(--wp--preset--color--neon-purple, #9D00FF) !important;
  border-radius: 0 !important;
  color: var(--wp--preset--color--fg-2, #E0E0E0) !important;
  font-family: var(--font-body) !important;
  padding: 12px 16px !important;
  margin-bottom: 12px !important;
}

/* Notice link/button within the notice bar */
.woocommerce-message a,
.woocommerce-error a,
.woocommerce-info a {
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

.woocommerce-message a:hover,
.woocommerce-error a:hover,
.woocommerce-info a:hover {
  color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
}

/* ------------------------------------------------------------
   CHECKOUT STEP INDICATOR
   Source: components-checkout-steps.html
   Completed step: pink-to-cyan gradient circle, checkmark, black text
   Active step: cyan bg tint, 2px cyan border, cyan number + glow
   Pending step: dark-surface bg, dark-border 2px, fg-5 number
   Connector line: completed = pink-to-cyan gradient | pending = dark-border
   Step label: Orbitron 10px uppercase (active = cyan, pending = fg-5)
   ------------------------------------------------------------ */

.wc-block-checkout__step-list {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  margin-bottom: 24px !important;
}

.wc-block-checkout__step {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  flex: 1 !important;
  position: relative !important;
}

/* Connector between steps */
.wc-block-checkout__step:not(:first-child)::before {
  content: '' !important;
  position: absolute !important;
  top: 18px !important;
  left: -50% !important;
  right: 50% !important;
  height: 2px !important;
  background: var(--wp--preset--color--dark-border, #2A2A3A) !important;
  z-index: 0 !important;
}

.wc-block-checkout__step.is-complete:not(:first-child)::before {
  background: linear-gradient(90deg, #FF0080, #00FFFF) !important;
}

/* Step number circle */
.wc-block-checkout__step-number {
  position: relative !important;
  z-index: 1 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;  /* circles are exempt from radius:0 rule */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  background: var(--wp--preset--color--dark-surface, #12121A) !important;
  border: 2px solid var(--wp--preset--color--dark-border, #2A2A3A) !important;
  color: var(--wp--preset--color--fg-5, #6B7280) !important;
}

.wc-block-checkout__step.is-active .wc-block-checkout__step-number {
  background: rgba(0, 255, 255, 0.15) !important;
  border-color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  text-shadow: 0 0 6px rgba(0, 255, 255, 0.7) !important;
  box-shadow: 0 0 16px rgba(0, 255, 255, 0.4) !important;
}

.wc-block-checkout__step.is-complete .wc-block-checkout__step-number {
  background: linear-gradient(45deg, #FF0080, #00FFFF) !important;
  border-color: transparent !important;
  color: #000000 !important;
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.5) !important;
}

/* Step label text */
.wc-block-checkout__step-label {
  font-family: var(--font-display) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  margin-top: 8px !important;
  color: var(--wp--preset--color--fg-5, #6B7280) !important;
}

.wc-block-checkout__step.is-active .wc-block-checkout__step-label {
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
}

.wc-block-checkout__step.is-complete .wc-block-checkout__step-label {
  color: var(--wp--preset--color--fg-5, #6B7280) !important;
}

/* ------------------------------------------------------------
   MOBILE — CART + CHECKOUT RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 600px) {
  /* Stack cart item columns vertically */
  .wc-block-cart-items__row {
    flex-wrap: wrap !important;
  }

  /* Full-width checkout address inputs */
  .wc-block-components-address-form .wc-block-components-text-input {
    width: 100% !important;
  }

  /* Stack checkout 2-col layout to single column */
  .wc-block-checkout__main,
  .wc-block-checkout__sidebar {
    width: 100% !important;
    flex-basis: 100% !important;
  }

  /* Payment method grid: single column */
  .wc-block-checkout__payment-method {
    grid-template-columns: 1fr !important;
  }

  /* Place order button: full-width (already block, but reinforce) */
  .wc-block-components-checkout-place-order-button {
    width: 100% !important;
    padding: 16px 18px !important;
  }

  /* Shipping option rows: smaller padding */
  .wc-block-components-radio-control__option,
  .wc-block-components-shipping-rates-control__package-option {
    padding: 10px !important;
  }
}

/* ============================================================
   PHASE 7 — MINI-CART
   References:
     preview/components-mini-cart-popup.html
     preview/components-toasts-alerts.html
     design-parity-implementation.md Phase 7.1 + 7.2
   RULE: var(--wp--preset--color--{slug}, #fallback) for ALL color refs.
   RULE: border-radius: 0 everywhere. No magenta.
   Drawer bg = #12121A (--dark-surface). NOT #1A1A24 (--dark-card).
   ============================================================ */

/* ------------------------------------------------------------
   MINI-CART BUTTON IN HEADER (header .cn-icon context)
   store.css already sets base styles on .cn-icon .wc-block-mini-cart__button.
   These rules extend/reinforce that for the full feature set.
   ------------------------------------------------------------ */

/* Button base — 6px radius matches nav icon button token */
.wc-block-mini-cart__button {
  border-radius: 6px !important;
}

/* Badge — count above the cart icon */
.wc-block-mini-cart__badge {
  background: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  color: #FFFFFF !important;
  border-radius: 9999px !important;
  font-family: var(--font-display) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  min-width: 16px !important;
  height: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4px !important;
}

/* Amount label shown next to icon (hasHiddenPrice:false) */
.wc-block-mini-cart__amount {
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
}

/* ------------------------------------------------------------
   MINI-CART DRAWER / FLYOUT PANEL
   WC renders this as a full-screen overlay with a right-side panel.
   Dark surface background, hot-pink top accent, cyan left border.
   z-index must clear nav (z-index:100 in store.css).
   Slide-in from right.
   ------------------------------------------------------------ */

/* Drawer container */
.wc-block-mini-cart__drawer,
.wc-block-mini-cart__drawer.components-modal__screen-overlay {
  background: rgba(0, 0, 0, 0.70) !important; /* dim backdrop */
  z-index: 200 !important;
}

/* Inner panel (the visible slide-in card) */
.wc-block-mini-cart__drawer .wc-block-mini-cart__template-part,
.wc-block-mini-cart__drawer .components-modal__frame {
  background: var(--wp--preset--color--dark-card, #1A1A24) !important;
  border-left: 2px solid var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  border-top: 3px solid var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  border-radius: 0 !important;
  max-width: 420px !important;
  width: 100% !important;
  margin-left: auto !important;
  color: var(--wp--preset--color--fg-2, #E0E0E0) !important;
  box-shadow: -4px 0 40px rgba(0, 0, 0, 0.6) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Slide-in animation */
@keyframes hendr1ka-drawer-slide-in {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

.wc-block-mini-cart__drawer .components-modal__frame {
  animation: hendr1ka-drawer-slide-in 0.22s ease-out both !important;
}

/* ------------------------------------------------------------
   DRAWER HEADER — "YOUR CART" + close button
   ------------------------------------------------------------ */

.wc-block-mini-cart__drawer .components-modal__header,
.wc-block-mini-cart__header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--wp--preset--color--dark-border, #2A2A3A) !important;
  background: var(--wp--preset--color--dark-surface, #12121A) !important;
  flex-shrink: 0 !important;
}

/* "YOUR CART" title */
.wc-block-mini-cart__title,
.wc-block-mini-cart__drawer .components-modal__header-heading {
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.5) !important;
  margin: 0 !important;
}

/* Close button (x) — covers components-modal pattern and newer drawer pattern */
.wc-block-mini-cart__drawer .components-modal__header button,
.wc-block-mini-cart__close-button,
.wc-block-components-drawer__close {
  background: transparent !important;
  border: 1px solid var(--wp--preset--color--dark-border, #2A2A3A) !important;
  border-radius: 6px !important;
  color: var(--wp--preset--color--fg-5, #6B7280) !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  cursor: pointer !important;
  transition: color 0.15s ease, border-color 0.15s ease !important;
  padding: 0 !important;
}

.wc-block-mini-cart__drawer .components-modal__header button:hover,
.wc-block-mini-cart__close-button:hover,
.wc-block-components-drawer__close:hover {
  color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  border-color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
}

/* ------------------------------------------------------------
   CART ITEM ROWS
   Product image | title + meta | price | qty stepper | remove x
   ------------------------------------------------------------ */

/* Scrollable items area */
.wc-block-mini-cart__items {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  padding: 0 !important;
}

/* Scrollbar — minimal cyberpunk style */
.wc-block-mini-cart__items::-webkit-scrollbar {
  width: 4px;
}
.wc-block-mini-cart__items::-webkit-scrollbar-track {
  background: var(--wp--preset--color--dark-bg, #0A0A0F);
}
.wc-block-mini-cart__items::-webkit-scrollbar-thumb {
  background: var(--wp--preset--color--dark-border, #2A2A3A);
  border-radius: 2px;
}
.wc-block-mini-cart__items::-webkit-scrollbar-thumb:hover {
  background: var(--wp--preset--color--neon-cyan, #00FFFF);
}

/* Individual item row */
.wc-block-mini-cart__products-table tr,
.wc-block-cart-items__row.wc-block-mini-cart__products-table__row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 12px 20px !important;
  border-bottom: 1px solid var(--wp--preset--color--dark-border, #2A2A3A) !important;
  background: transparent !important;
  transition: background 0.15s ease !important;
}

.wc-block-mini-cart__products-table tr:hover {
  background: rgba(255, 255, 255, 0.025) !important;
}

/* Product thumbnail image */
.wc-block-mini-cart__product-image,
.wc-block-mini-cart__products-table .wc-block-cart-item__image {
  width: 56px !important;
  height: 56px !important;
  flex-shrink: 0 !important;
  background: var(--wp--preset--color--dark-card, #1A1A24) !important;
  border: 1px solid var(--wp--preset--color--dark-border, #2A2A3A) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.wc-block-mini-cart__product-image img,
.wc-block-mini-cart__products-table .wc-block-cart-item__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  padding: 4px !important;
}

/* Product info cell */
.wc-block-mini-cart__products-table .wc-block-cart-item__product {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

/* Product title */
.wc-block-mini-cart__products-table .wc-block-mini-cart__product-name,
.wc-block-mini-cart__products-table .wc-block-cart-item__product-name a,
.wc-block-mini-cart__products-table .wc-block-components-product-name a {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--wp--preset--color--fg-1, #FFFFFF) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}

.wc-block-mini-cart__products-table .wc-block-cart-item__product-name a:hover {
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
}

/* Variation / meta text (QTY * VARIANT) */
.wc-block-mini-cart__products-table .wc-block-cart-item__product-metadata,
.wc-block-mini-cart__products-table .wc-block-cart-item__product-metadata dd,
.wc-block-mini-cart__products-table .wc-block-cart-item__product-metadata dt {
  font-family: var(--font-display) !important;
  font-size: 9px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--fg-5, #6B7280) !important;
  margin: 0 !important;
}

/* Price per line item */
.wc-block-mini-cart__products-table .wc-block-mini-cart__product-price,
.wc-block-mini-cart__products-table .wc-block-cart-item__total .woocommerce-Price-amount,
.wc-block-mini-cart__products-table .woocommerce-Price-amount {
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  text-shadow: 0 0 4px rgba(0, 255, 255, 0.5) !important;
  white-space: nowrap !important;
}

/* ------------------------------------------------------------
   QUANTITY STEPPER (inside mini-cart)
   Reuses Phase 5/6 stepper patterns; mini-cart context selectors.
   ------------------------------------------------------------ */

.wc-block-mini-cart__products-table .wc-block-components-quantity-selector {
  display: flex !important;
  align-items: center !important;
  border: 1px solid var(--wp--preset--color--dark-border, #2A2A3A) !important;
  border-radius: 4px !important;
  background: var(--wp--preset--color--dark-bg, #0A0A0F) !important;
  width: fit-content !important;
  margin-top: 6px !important;
}

.wc-block-mini-cart__products-table .wc-block-components-quantity-selector:focus-within {
  border-color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  box-shadow: 0 0 8px rgba(0, 255, 255, 0.2) !important;
}

.wc-block-mini-cart__products-table .wc-block-components-quantity-selector__button {
  width: 32px !important;
  height: 36px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  font-family: var(--font-display) !important;
  font-size: 16px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: color 0.15s ease !important;
}

.wc-block-mini-cart__products-table .wc-block-components-quantity-selector__button:hover {
  color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
}

.wc-block-mini-cart__products-table .wc-block-components-quantity-selector input {
  width: 36px !important;
  text-align: center !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--wp--preset--color--fg-1, #FFFFFF) !important;
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  outline: none !important;
}

/* ------------------------------------------------------------
   REMOVE ITEM BUTTON (x)
   Muted by default, hot-pink on hover.
   ------------------------------------------------------------ */

.wc-block-mini-cart__products-table .wc-block-cart-item__remove-link,
.wc-block-mini-cart__products-table .wc-block-cart-item__remove-link a {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  color: var(--wp--preset--color--fg-5, #6B7280) !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: color 0.15s ease !important;
}

.wc-block-mini-cart__products-table .wc-block-cart-item__remove-link:hover,
.wc-block-mini-cart__products-table .wc-block-cart-item__remove-link a:hover {
  color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
}

/* ------------------------------------------------------------
   SUBTOTAL / TOTALS ROW
   Orbitron, cyan glow. Sits above the footer CTA buttons.
   ------------------------------------------------------------ */

.wc-block-mini-cart__totals-item,
.wc-block-mini-cart__totals-items {
  padding: 12px 20px !important;
  border-top: 1px solid var(--wp--preset--color--dark-border, #2A2A3A) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background: var(--wp--preset--color--dark-surface, #12121A) !important;
}

.wc-block-mini-cart__totals-item span:first-child {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  color: var(--wp--preset--color--fg-5, #6B7280) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

.wc-block-mini-cart__totals-item .wc-block-mini-cart__subtotal-price,
.wc-block-mini-cart__totals-item .woocommerce-Price-amount {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--wp--preset--color--fg-1, #FFFFFF) !important;
  text-shadow: none !important;
}

/* Subtotal amount — cyan glow on the total price */
.wc-block-mini-cart__subtotal .woocommerce-Price-amount,
.wc-block-mini-cart__totals .woocommerce-Price-amount {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.6) !important;
}

/* Item count label ("3 items - Subtotal") */
.wc-block-mini-cart__items-counter,
.wc-block-mini-cart__quantity-label {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  color: var(--wp--preset--color--fg-5, #6B7280) !important;
}

/* Tax note */
.wc-block-mini-cart__tax-label {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  color: var(--wp--preset--color--fg-5, #6B7280) !important;
}

/* ------------------------------------------------------------
   DRAWER FOOTER — "VIEW CART" + "CHECKOUT" BUTTONS
   View Cart  = outline (2px cyan border, transparent bg)
   Checkout   = hot-pink solid gradient, 2px cyan border
   Both: radius:0, Orbitron, uppercase
   ------------------------------------------------------------ */

.wc-block-mini-cart__footer {
  flex-shrink: 0 !important;
  padding: 16px 20px !important;
  border-top: 2px solid var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  background: var(--wp--preset--color--dark-surface, #12121A) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* View Cart button — outline secondary */
.wc-block-mini-cart__footer .wc-block-mini-cart__footer-cart,
.wc-block-mini-cart__footer-cart.wp-element-button {
  display: block !important;
  width: 100% !important;
  padding: 12px 18px !important;
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border: 2px solid var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  border-radius: 4px !important;
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.2s ease, box-shadow 0.2s ease !important;
}

.wc-block-mini-cart__footer .wc-block-mini-cart__footer-cart:hover,
.wc-block-mini-cart__footer-cart.wp-element-button:hover {
  background: rgba(0, 255, 255, 0.10) !important;
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.3) !important;
}

/* Checkout button — hot-pink solid CTA */
.wc-block-mini-cart__footer .wc-block-mini-cart__footer-checkout,
.wc-block-mini-cart__footer-checkout.wp-element-button {
  display: block !important;
  width: 100% !important;
  padding: 13px 18px !important;
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--fg-1, #FFFFFF) !important;
  background: linear-gradient(
    45deg,
    var(--wp--preset--color--neon-pink-hot, #FF0080),
    #FF1493
  ) !important;
  border: 2px solid var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  border-radius: 4px !important;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.35) !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.wc-block-mini-cart__footer .wc-block-mini-cart__footer-checkout:hover,
.wc-block-mini-cart__footer-checkout.wp-element-button:hover {
  background: linear-gradient(
    45deg,
    var(--wp--preset--color--neon-cyan, #00FFFF),
    #00BFFF
  ) !important;
  color: #000000 !important;
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.55) !important;
  transform: translateY(-1px);
}

/* ------------------------------------------------------------
   EMPTY CART STATE
   Muted centered message + "Start Shopping" link in cyan.
   ------------------------------------------------------------ */

.wc-block-mini-cart__empty-cart-wrapper,
.wc-block-mini-cart__template-part .empty-cart {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 40px 24px !important;
  text-align: center !important;
}

.wc-block-mini-cart__empty-cart-wrapper p,
.wc-block-mini-cart__empty-cart-wrapper .wc-block-mini-cart__empty-cart-message {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: var(--wp--preset--color--fg-5, #6B7280) !important;
  margin-bottom: 20px !important;
  line-height: 1.6 !important;
}

/* "Start Shopping" link */
.wc-block-mini-cart__empty-cart-wrapper a,
.wc-block-mini-cart__empty-cart-wrapper .wp-element-button {
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  text-decoration: none !important;
  border: 2px solid var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  border-radius: 4px !important;
  padding: 10px 20px !important;
  display: inline-block !important;
  transition: background 0.2s ease !important;
}

.wc-block-mini-cart__empty-cart-wrapper a:hover {
  background: rgba(0, 255, 255, 0.10) !important;
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
}

/* ------------------------------------------------------------
   MOBILE OVERFLOW FIX
   Bug: .wc-block-mini-cart__button extends 39px past viewport at 375px.
   Fix: constrain button + parent at <= 480px. Use box-sizing and
   max-width: 100% to prevent overflow regardless of WC reflows.
   ------------------------------------------------------------ */

@media (max-width: 480px) {
  /* Hide the search form in the nav at mobile — it takes ~246px and pushes
   * the mini-cart button beyond the viewport right edge.
   * The search icon/button (hamburger menu) still appears in the nav toggle. */
  .cyber-nav .cn-search,
  .wp-block-group.cyber-nav .cn-search {
    display: none !important;
  }

  /* Prevent the mini-cart block container from overflowing.
   * overflow:visible so the button itself stays visible inside the flex nav. */
  .wc-block-mini-cart,
  .wp-block-woocommerce-mini-cart {
    max-width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    min-width: 44px !important;
  }

  /* Constrain the trigger button itself */
  .wc-block-mini-cart__button {
    max-width: 100% !important;
    width: auto !important;
    box-sizing: border-box !important;
    /* Tighten padding so it fits within nav at 375px */
    padding: 6px 10px !important;
    font-size: 10px !important;
  }

  /* Drawer: full-width panel at mobile (no side panel; full screen) */
  .wc-block-mini-cart__drawer .components-modal__frame,
  .wc-block-mini-cart__drawer .wc-block-mini-cart__template-part {
    max-width: 100% !important;
    width: 100% !important;
    border-left: none !important;
    border-top: 3px solid var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  }
}

/* ------------------------------------------------------------
   WC NOTICES (Phase 7.2 from design-parity-implementation.md)
   These are sitewide toast/alert styles — also appended here.
   Phase 6 added block-component notice variants; these cover
   the legacy .woocommerce-* notice classes emitted by WC hooks.
   ------------------------------------------------------------ */

/* Already handled in Phase 6 — confirming legacy class variants */
.woocommerce-message:not(.wc-block-components-notice) {
  background: rgba(0, 255, 255, 0.06) !important;
  border-left: 4px solid var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  border-radius: 0 !important;
  color: var(--wp--preset--color--fg-2, #E0E0E0) !important;
  font-family: var(--font-body) !important;
  padding: 12px 16px !important;
  margin-bottom: 12px !important;
}

.woocommerce-error:not(.wc-block-components-notice) {
  background: rgba(255, 0, 128, 0.08) !important;
  border-left: 4px solid var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  border-radius: 0 !important;
  color: var(--wp--preset--color--fg-2, #E0E0E0) !important;
  font-family: var(--font-body) !important;
  padding: 12px 16px !important;
  margin-bottom: 12px !important;
}

.woocommerce-info:not(.wc-block-components-notice) {
  background: rgba(157, 0, 255, 0.06) !important;
  border-left: 4px solid var(--wp--preset--color--neon-purple, #9D00FF) !important;
  border-radius: 0 !important;
  color: var(--wp--preset--color--fg-2, #E0E0E0) !important;
  font-family: var(--font-body) !important;
  padding: 12px 16px !important;
  margin-bottom: 12px !important;
}

/* PHASE 7 FIX — broader subtotal glow coverage for footer total line */
.wc-block-mini-cart__footer .woocommerce-Price-amount,
.wc-block-mini-cart__footer .wc-block-formatted-money-amount,
.wc-block-mini-cart__totals-item--subtotal .woocommerce-Price-amount,
.wc-block-mini-cart__subtotal-price .woocommerce-Price-amount {
  font-family: var(--font-display) !important;
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.6) !important;
}

/* ============================================================
   PHASE 8 — MY ACCOUNT
   Selectors: .woocommerce-account, .woocommerce-MyAccount-*
   References: components-login-form.html, components-account-settings.html,
               components-address-card.html, components-order-tracking.html
   ============================================================ */

/* ----------------------------------------------------------
   8.0 — Page wrapper
   ---------------------------------------------------------- */

/* Constrain and pad the account page content area */
.account-page,
.woocommerce-account .wp-block-group.account-page {
  padding-top: 100px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  padding-bottom: 56px !important;
}

/* ----------------------------------------------------------
   8.1 — Login / Register form container
   Source: components-login-form.html
   ---------------------------------------------------------- */

/* WooCommerce wraps login/register in .woocommerce-form-login and
   .woocommerce-form-register. On not-logged-in /my-account/ the
   wrapping div is .u-columns.col2-set or .woocommerce */
.woocommerce-account .woocommerce,
.woocommerce-account .woocommerce-form-login-toggle,
.woocommerce-account .u-columns {
  max-width: 960px;
  margin: 0 auto;
}

/* Login card */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
  background: var(--wp--preset--color--dark-card, #1A1A24) !important;
  border: 1px solid var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  border-radius: 8px !important;
  padding: 32px !important;
  box-shadow: 0 0 24px rgba(255, 0, 128, 0.12) !important;
}

/* Section headings inside the login/register forms */
.woocommerce-account .woocommerce-form-login h2,
.woocommerce-account .woocommerce-form-register h2,
.woocommerce-account .col-1 h2,
.woocommerce-account .col-2 h2 {
  font-family: var(--wp--preset--font-family--display) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.5) !important;
  margin-bottom: 24px !important;
}

/* "Sign in to continue" / subtitle label */
.woocommerce-account .woocommerce-form-login::before {
  content: 'SIGN IN TO CONTINUE';
  display: block;
  font-family: var(--wp--preset--font-family--display) !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  text-shadow: 0 0 6px rgba(0, 255, 255, 0.5) !important;
  text-align: center !important;
  margin-bottom: 20px !important;
}

/* ----------------------------------------------------------
   8.2 — Form inputs (login, register, account details)
   Source: components-login-form.html, components-account-settings.html
   ---------------------------------------------------------- */

.woocommerce-account .woocommerce-form-login input[type="text"],
.woocommerce-account .woocommerce-form-login input[type="email"],
.woocommerce-account .woocommerce-form-login input[type="password"],
.woocommerce-account .woocommerce-form-register input[type="text"],
.woocommerce-account .woocommerce-form-register input[type="email"],
.woocommerce-account .woocommerce-form-register input[type="password"],
.woocommerce-account .woocommerce-EditAccountForm input[type="text"],
.woocommerce-account .woocommerce-EditAccountForm input[type="email"],
.woocommerce-account .woocommerce-EditAccountForm input[type="password"],
.woocommerce-account .woocommerce-address-fields input[type="text"],
.woocommerce-account .woocommerce-address-fields input[type="tel"],
.woocommerce-account .woocommerce-address-fields input[type="email"],
.woocommerce-account .woocommerce-address-fields select {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 11px 14px !important;
  background: var(--wp--preset--color--dark-bg, #0A0A0F) !important;
  border: 1px solid var(--wp--preset--color--dark-border, #2A2A3A) !important;
  border-radius: 4px !important;
  color: var(--wp--preset--color--fg-1, #FFFFFF) !important;
  font-family: var(--wp--preset--font-family--body) !important;
  font-size: 13px !important;
  outline: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Cyan focus ring — overrides the default WC purple/blue */
.woocommerce-account .woocommerce-form-login input:focus,
.woocommerce-account .woocommerce-form-register input:focus,
.woocommerce-account .woocommerce-EditAccountForm input:focus,
.woocommerce-account .woocommerce-address-fields input:focus,
.woocommerce-account .woocommerce-address-fields select:focus {
  border-color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.25) !important;
}

/* Placeholders */
.woocommerce-account .woocommerce-form-login input::placeholder,
.woocommerce-account .woocommerce-form-register input::placeholder,
.woocommerce-account .woocommerce-EditAccountForm input::placeholder {
  color: var(--wp--preset--color--fg-5, #6B7280) !important;
}

/* Labels */
.woocommerce-account .woocommerce-form-login label,
.woocommerce-account .woocommerce-form-register label,
.woocommerce-account .woocommerce-EditAccountForm label,
.woocommerce-account .woocommerce-address-fields label {
  display: block !important;
  font-family: var(--wp--preset--font-family--body) !important;
  font-size: 11px !important;
  color: var(--wp--preset--color--fg-4, #9CA3AF) !important;
  margin-bottom: 4px !important;
}

/* ----------------------------------------------------------
   8.3 — Login / Register buttons
   Source: components-login-form.html — hot-pink, uppercase, radius:0
   ---------------------------------------------------------- */

.woocommerce-account .woocommerce-form-login .woocommerce-Button,
.woocommerce-account .woocommerce-form-login button[type="submit"],
.woocommerce-account .woocommerce-form-login input[type="submit"],
.woocommerce-account .woocommerce-form-register .woocommerce-Button,
.woocommerce-account .woocommerce-form-register button[type="submit"],
.woocommerce-account .woocommerce-form-register input[type="submit"] {
  display: block !important;
  width: 100% !important;
  padding: 12px 24px !important;
  margin-top: 8px !important;
  font-family: var(--wp--preset--font-family--display) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  background: linear-gradient(45deg, var(--wp--preset--color--neon-pink-hot, #FF0080), #FF1493) !important;
  border: 2px solid var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  border-radius: 4px !important;
  color: var(--wp--preset--color--fg-1, #FFFFFF) !important;
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.4) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.woocommerce-account .woocommerce-form-login .woocommerce-Button:hover,
.woocommerce-account .woocommerce-form-login button[type="submit"]:hover,
.woocommerce-account .woocommerce-form-login input[type="submit"]:hover,
.woocommerce-account .woocommerce-form-register .woocommerce-Button:hover,
.woocommerce-account .woocommerce-form-register button[type="submit"]:hover,
.woocommerce-account .woocommerce-form-register input[type="submit"]:hover {
  background: linear-gradient(45deg, var(--wp--preset--color--neon-cyan, #00FFFF), #0088CC) !important;
  color: #000 !important;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.6) !important;
}

/* "Remember me" checkbox accent */
.woocommerce-account .woocommerce-form-login__rememberme input[type="checkbox"] {
  accent-color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
}

/* "Lost your password?" link */
.woocommerce-account a.woocommerce-LostPassword,
.woocommerce-account .lost_password a {
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  font-size: 11px !important;
  text-decoration: none !important;
}
.woocommerce-account a.woocommerce-LostPassword:hover,
.woocommerce-account .lost_password a:hover {
  text-decoration: underline !important;
}

/* "New here? Create an account" inline link */
.woocommerce-account .woocommerce-form-login .woocommerce-privacy-policy-text a,
.woocommerce-account .register-note a {
  color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  font-weight: 600 !important;
}

/* ----------------------------------------------------------
   8.4 — My Account dashboard layout
   Logged-in state: sidebar nav (left) + content area (right)
   ---------------------------------------------------------- */

/* Dashboard wrapper — two-column layout */
.woocommerce-account .woocommerce-MyAccount-navigation-link,
.woocommerce-account .woocommerce {
  display: block;
}

/* Two-column flex on desktop for the logged-in account view */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
  display: flex !important;
  gap: 32px !important;
  align-items: flex-start !important;
}

@media (max-width: 768px) {
  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
    flex-direction: column !important;
    gap: 24px !important;
  }
}

/* ----------------------------------------------------------
   8.5 — Dashboard sidebar nav
   Source: components-account-settings.html sidebar pattern
   ---------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-navigation {
  flex: 0 0 220px !important;
  background: var(--wp--preset--color--dark-surface, #12121A) !important;
  border: 1px solid var(--wp--preset--color--dark-border, #2A2A3A) !important;
  border-radius: 8px !important;
  padding: 8px 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: block !important;
  padding: 12px 20px !important;
  font-family: var(--wp--preset--font-family--body) !important;
  font-size: 13px !important;
  color: var(--wp--preset--color--fg-3, #D1D5DB) !important;
  text-decoration: none !important;
  border-left: 3px solid transparent !important;
  transition: all 0.2s ease !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  border-left-color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  background: rgba(0, 255, 255, 0.06) !important;
  text-shadow: 0 0 6px rgba(0, 255, 255, 0.4) !important;
}

/* Active nav item — hot-pink */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a.is-active {
  color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  border-left-color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  background: rgba(255, 0, 128, 0.08) !important;
  text-shadow: 0 0 6px rgba(255, 0, 128, 0.5) !important;
  font-weight: 600 !important;
}

/* Nav section label (WC adds no heading — not needed) */

/* ----------------------------------------------------------
   8.6 — Dashboard content area
   ---------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-content {
  flex: 1 !important;
  background: var(--wp--preset--color--dark-card, #1A1A24) !important;
  border: 1px solid var(--wp--preset--color--dark-border, #2A2A3A) !important;
  border-radius: 8px !important;
  padding: 28px !important;
  min-width: 0 !important; /* Prevent flex blowout */
}

/* Dashboard welcome paragraph */
.woocommerce-account .woocommerce-MyAccount-content p {
  font-family: var(--wp--preset--font-family--body) !important;
  font-size: 14px !important;
  color: var(--wp--preset--color--fg-2, #E0E0E0) !important;
  line-height: 1.65 !important;
}

/* Content section headings (h2, h3) */
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
  font-family: var(--wp--preset--font-family--display) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  text-shadow: 0 0 6px rgba(0, 255, 255, 0.4) !important;
  margin-bottom: 16px !important;
}

/* ----------------------------------------------------------
   8.7 — Orders table
   Source: components-order-tracking.html
   Dark rows, alternating subtle bg, cyan order number links
   ---------------------------------------------------------- */

.woocommerce-account .woocommerce-orders-table,
.woocommerce-account table.shop_table,
.woocommerce-account table.woocommerce-orders-table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: transparent !important;
}

/* Table header row */
.woocommerce-account table.shop_table thead th,
.woocommerce-account table.woocommerce-orders-table thead th {
  font-family: var(--wp--preset--font-family--display) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--fg-5, #6B7280) !important;
  border-bottom: 1px solid var(--wp--preset--color--dark-border, #2A2A3A) !important;
  padding: 10px 12px !important;
  text-align: left !important;
  background: transparent !important;
}

/* Table body rows */
.woocommerce-account table.shop_table tbody tr,
.woocommerce-account table.woocommerce-orders-table tbody tr {
  background: transparent !important;
  border-bottom: 1px solid rgba(42, 42, 58, 0.7) !important;
  transition: background 0.15s ease !important;
}

/* Alternating subtle background */
.woocommerce-account table.shop_table tbody tr:nth-child(even),
.woocommerce-account table.woocommerce-orders-table tbody tr:nth-child(even) {
  background: rgba(18, 18, 26, 0.5) !important;
}

.woocommerce-account table.shop_table tbody tr:hover,
.woocommerce-account table.woocommerce-orders-table tbody tr:hover {
  background: rgba(0, 255, 255, 0.04) !important;
}

/* Table cells */
.woocommerce-account table.shop_table tbody td,
.woocommerce-account table.woocommerce-orders-table tbody td {
  font-family: var(--wp--preset--font-family--body) !important;
  font-size: 13px !important;
  color: var(--wp--preset--color--fg-2, #E0E0E0) !important;
  padding: 12px 12px !important;
  vertical-align: middle !important;
}

/* Order number links — cyan */
.woocommerce-account table.shop_table .order-number a,
.woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__cell-order-number a {
  font-family: var(--wp--preset--font-family--display) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  text-shadow: 0 0 6px rgba(0, 255, 255, 0.5) !important;
  text-decoration: none !important;
}
.woocommerce-account table.shop_table .order-number a:hover,
.woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__cell-order-number a:hover {
  text-decoration: underline !important;
}

/* Order status badge */
.woocommerce-account table .wc-order-status mark,
.woocommerce-account table .woocommerce-orders-table__cell-order-status mark {
  background: transparent !important;
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  font-family: var(--wp--preset--font-family--display) !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 3px 8px !important;
  border: 1px solid var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  border-radius: 4px !important;
}

/* "View" / action buttons in orders table */
.woocommerce-account table .button.woocommerce-Button,
.woocommerce-account table a.button {
  padding: 6px 12px !important;
  font-family: var(--wp--preset--font-family--display) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border: 1px solid var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  border-radius: 4px !important;
  color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.woocommerce-account table .button.woocommerce-Button:hover,
.woocommerce-account table a.button:hover {
  background: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  color: var(--wp--preset--color--fg-1, #FFFFFF) !important;
  box-shadow: 0 0 10px rgba(255, 0, 128, 0.5) !important;
}

/* ----------------------------------------------------------
   8.8 — Account details form (Edit Account)
   Source: components-account-settings.html
   ---------------------------------------------------------- */

/* Section divider */
.woocommerce-account .woocommerce-EditAccountForm .woocommerce-form-row {
  margin-bottom: 12px !important;
}

/* Two-column name fields (first/last) */
.woocommerce-account .woocommerce-EditAccountForm .woocommerce-form-row--first,
.woocommerce-account .woocommerce-EditAccountForm .woocommerce-form-row--last {
  display: inline-block !important;
  width: calc(50% - 8px) !important;
}
.woocommerce-account .woocommerce-EditAccountForm .woocommerce-form-row--last {
  margin-left: 14px !important;
}

/* Password section heading */
.woocommerce-account .woocommerce-EditAccountForm fieldset {
  border: 1px solid var(--wp--preset--color--dark-border, #2A2A3A) !important;
  border-radius: 0 !important;
  padding: 16px !important;
  margin-top: 20px !important;
}
.woocommerce-account .woocommerce-EditAccountForm fieldset legend {
  font-family: var(--wp--preset--font-family--display) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  padding: 0 8px !important;
}

/* Save button */
.woocommerce-account .woocommerce-EditAccountForm button[type="submit"],
.woocommerce-account .woocommerce-EditAccountForm input[type="submit"] {
  padding: 12px 32px !important;
  font-family: var(--wp--preset--font-family--display) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  background: linear-gradient(45deg, var(--wp--preset--color--neon-pink-hot, #FF0080), #FF1493) !important;
  border: 2px solid var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  border-radius: 4px !important;
  color: var(--wp--preset--color--fg-1, #FFFFFF) !important;
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.3) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin-top: 16px !important;
}
.woocommerce-account .woocommerce-EditAccountForm button[type="submit"]:hover,
.woocommerce-account .woocommerce-EditAccountForm input[type="submit"]:hover {
  background: linear-gradient(45deg, var(--wp--preset--color--neon-cyan, #00FFFF), #0088CC) !important;
  color: #000 !important;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.6) !important;
}

/* ----------------------------------------------------------
   8.9 — Address cards
   Source: components-address-card.html
   Default address: cyan border + glow. Secondary: dashed dark border.
   ---------------------------------------------------------- */

.woocommerce-account .woocommerce-Addresses {
  display: flex !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
}

.woocommerce-account .woocommerce-Address {
  flex: 1 !important;
  min-width: 280px !important;
  background: var(--wp--preset--color--dark-surface, #12121A) !important;
  border: 2px solid var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  border-radius: 8px !important;
  padding: 20px !important;
  box-shadow: 0 0 16px rgba(0, 255, 255, 0.15) !important;
  position: relative !important;
}

/* Address type heading (Billing / Shipping) */
.woocommerce-account .woocommerce-Address-title h3 {
  font-family: var(--wp--preset--font-family--display) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  text-shadow: 0 0 5px rgba(255, 0, 128, 0.5) !important;
  margin-bottom: 8px !important;
}

/* Address text */
.woocommerce-account address {
  font-family: var(--wp--preset--font-family--body) !important;
  font-size: 13px !important;
  color: var(--wp--preset--color--fg-3, #D1D5DB) !important;
  line-height: 1.65 !important;
  font-style: normal !important;
}

/* Edit address link */
.woocommerce-account .woocommerce-Address-title a {
  padding: 6px 12px !important;
  font-family: var(--wp--preset--font-family--display) !important;
  font-size: 10px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border: 1px solid var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  border-radius: 4px !important;
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  float: right !important;
}
.woocommerce-account .woocommerce-Address-title a:hover {
  background: rgba(0, 255, 255, 0.12) !important;
  box-shadow: 0 0 8px rgba(0, 255, 255, 0.3) !important;
}

/* ----------------------------------------------------------
   8.10 — Logout link
   Muted by default, hot-pink on hover
   ---------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout a {
  color: var(--wp--preset--color--fg-5, #6B7280) !important;
  font-size: 12px !important;
  border-left-color: transparent !important;
  background: transparent !important;
  text-shadow: none !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout a:hover {
  color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  border-left-color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  background: rgba(255, 0, 128, 0.06) !important;
  text-shadow: 0 0 5px rgba(255, 0, 128, 0.5) !important;
}

/* ----------------------------------------------------------
   8.11 — Mobile: stack layout at ≤ 600px
   ---------------------------------------------------------- */

@media (max-width: 600px) {
  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
    flex-direction: column !important;
    gap: 16px !important;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation {
    flex: none !important;
    width: 100% !important;
  }

  .woocommerce-account .woocommerce-MyAccount-content {
    padding: 20px !important;
  }

  .woocommerce-account .woocommerce-EditAccountForm .woocommerce-form-row--first,
  .woocommerce-account .woocommerce-EditAccountForm .woocommerce-form-row--last {
    display: block !important;
    width: 100% !important;
    margin-left: 0 !important;
  }

  .woocommerce-account .woocommerce-form-login,
  .woocommerce-account .woocommerce-form-register {
    padding: 20px !important;
  }

  .woocommerce-account .woocommerce-Address {
    min-width: 100% !important;
  }
}

/* ============================================================
   PHASE 11 — ORDER CONFIRMATION
   Selectors: .order-confirmation-page, .wc-block-order-confirmation-*
   References: components-order-tracking.html, components-order-summary.html
   ============================================================ */

/* ----------------------------------------------------------
   11.0 — Page wrapper / padding
   Mirrors .checkout-page and .account-page padding pattern.
   ---------------------------------------------------------- */

body.woocommerce-order-received main.wp-block-group,
.order-confirmation-page {
  padding-top: 100px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  padding-bottom: 56px !important;
}

/* ----------------------------------------------------------
   11.1 — Status banner (order-received headline + order #)
   Source: components-order-tracking.html — "Placed" step,
           cyan left-border accent pattern.
   ---------------------------------------------------------- */

.wc-block-order-confirmation-status {
  background: rgba(0, 255, 255, 0.06) !important;
  border: 1px solid var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  border-left: 4px solid var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  border-radius: 0 !important;
  padding: 24px 28px !important;
  margin-bottom: 32px !important;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.08) !important;
}

/* "Order received" / "Thank you" headline (WC renders h1 in blocks, h2 in legacy) */
.wc-block-order-confirmation-status h1,
.wc-block-order-confirmation-status h2,
.wc-block-order-confirmation-status .wc-block-order-confirmation-status__title {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.5) !important;
  margin-bottom: 8px !important;
}

/* "Thank you" — WC Blocks renders the status title as <p>, not <h1>/<h2> */
.wc-block-order-confirmation-status > p:first-of-type,
.wp-block-woocommerce-order-confirmation-status > p:first-of-type {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.5) !important;
  margin-bottom: 8px !important;
  line-height: 1.3 !important;
}

/* Confirmation sub-text — subsequent <p> elements (email confirmation sentence) */
.wc-block-order-confirmation-status p:not(:first-of-type),
.wp-block-woocommerce-order-confirmation-status p:not(:first-of-type) {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: var(--wp--preset--color--fg-3, #D1D5DB) !important;
  line-height: 1.6 !important;
  margin-bottom: 0 !important;
}

/* Order number inline value — hot-pink Orbitron */
.wc-block-order-confirmation-status .order-number,
.wc-block-order-confirmation-status__order-number {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  text-shadow: 0 0 10px var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  letter-spacing: 0.06em !important;
}

/* Order status badge (e.g. "Processing", "On hold") */
.wc-block-order-confirmation-status .wc-block-order-confirmation-status__status,
.woocommerce-order-status {
  display: inline-block !important;
  background: var(--wp--preset--color--dark-card, #1A1A24) !important;
  border: 1px solid var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  border-radius: 4px !important;
  padding: 4px 12px !important;
  font-family: var(--font-display) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  text-shadow: 0 0 6px rgba(255, 0, 128, 0.5) !important;
  margin-top: 10px !important;
}

/* ----------------------------------------------------------
   11.2 — Shared dark card shell for all detail sections
   Source: components-order-summary.html — dark card with
           dashed dividers and cyan total pattern.
   ---------------------------------------------------------- */

.wc-block-order-confirmation-summary,
.wc-block-order-confirmation-totals,
.wc-block-order-confirmation-shipping,
.wc-block-order-confirmation-billing,
.wc-block-order-confirmation-additional-fields {
  background: var(--wp--preset--color--dark-card, #1A1A24) !important;
  border: 1px solid var(--wp--preset--color--dark-border, #2A2A3A) !important;
  border-radius: 8px !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
}

/* Section headings (ORDER SUMMARY, SHIPPING ADDRESS, etc.) */
.wc-block-order-confirmation-summary h2,
.wc-block-order-confirmation-totals h2,
.wc-block-order-confirmation-shipping h2,
.wc-block-order-confirmation-billing h2,
.wc-block-order-confirmation-additional-fields h2,
.wc-block-order-confirmation-summary__title,
.wc-block-order-confirmation-totals__title,
.wc-block-order-confirmation-shipping__title,
.wc-block-order-confirmation-billing__title {
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  text-shadow: 0 0 6px rgba(255, 0, 128, 0.4) !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--wp--preset--color--dark-border, #2A2A3A) !important;
}

/* ----------------------------------------------------------
   11.3 — Order summary table (line items)
   Source: components-order-summary.html — item rows with
           dashed dividers, Orbitron prices.
   ---------------------------------------------------------- */

.wc-block-order-confirmation-summary table {
  width: 100% !important;
  border-collapse: collapse !important;
}

/* Column headers (Product, Quantity, Price) */
.wc-block-order-confirmation-summary table th {
  font-family: var(--font-display) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--fg-5, #6B7280) !important;
  border-bottom: 1px solid var(--wp--preset--color--dark-border, #2A2A3A) !important;
  padding: 8px 0 !important;
  background: transparent !important;
}

/* Data cells */
.wc-block-order-confirmation-summary table td {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  color: var(--wp--preset--color--fg-2, #E0E0E0) !important;
  border-bottom: 1px dashed var(--wp--preset--color--dark-border, #2A2A3A) !important;
  padding: 12px 0 !important;
  background: transparent !important;
}

/* Product name cell */
.wc-block-order-confirmation-summary table td:first-child {
  color: var(--wp--preset--color--fg-1, #FFFFFF) !important;
  font-weight: 600 !important;
}

/* Price cells — Orbitron */
.wc-block-order-confirmation-summary table td .woocommerce-Price-amount,
.wc-block-order-confirmation-summary .woocommerce-Price-amount {
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--wp--preset--color--fg-1, #FFFFFF) !important;
}

/* ----------------------------------------------------------
   11.4 — Order totals table (subtotal / shipping / VAT / total)
   Source: components-order-summary.html — hot-pink top border
           on total row, cyan grand total Orbitron.
   ---------------------------------------------------------- */

.wc-block-order-confirmation-totals table {
  width: 100% !important;
  border-collapse: collapse !important;
}

.wc-block-order-confirmation-totals table th,
.wc-block-order-confirmation-totals table td {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  color: var(--wp--preset--color--fg-3, #D1D5DB) !important;
  padding: 6px 0 !important;
  border: none !important;
  background: transparent !important;
}

/* "Total" row — hot-pink top border, larger type */
.wc-block-order-confirmation-totals tfoot tr:last-child th,
.wc-block-order-confirmation-totals tfoot tr:last-child td,
.wc-block-order-confirmation-totals .wc-block-components-totals-footer-item th,
.wc-block-order-confirmation-totals .wc-block-components-totals-footer-item td {
  border-top: 2px solid var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  padding-top: 12px !important;
  margin-top: 8px !important;
}

/* Grand total label */
.wc-block-order-confirmation-totals tfoot tr:last-child th,
.wc-block-order-confirmation-totals .wc-block-components-totals-footer-item th {
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--fg-5, #6B7280) !important;
}

/* Grand total amount — cyan Orbitron glow */
.wc-block-order-confirmation-totals .woocommerce-Price-amount,
.wc-block-order-confirmation-totals tfoot tr:last-child .woocommerce-Price-amount,
.wc-block-order-confirmation-totals .wc-block-components-totals-footer-item .woocommerce-Price-amount {
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.6) !important;
}

/* Shipping / tax / subtotal price values — cyan to match totals row */
.wc-block-order-confirmation-totals tbody .woocommerce-Price-amount,
.wc-block-order-confirmation-totals tbody .wc-block-formatted-money-amount {
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  text-shadow: none !important;
}

/* Payment method row */
.wc-block-order-confirmation-totals .wc-block-order-confirmation-totals__payment-method {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  color: var(--wp--preset--color--fg-3, #D1D5DB) !important;
  padding: 6px 0 !important;
}

/* ----------------------------------------------------------
   11.5 — Shipping / billing address cards
   Source: components-order-tracking.html address display pattern.
   ---------------------------------------------------------- */

.wc-block-order-confirmation-shipping address,
.wc-block-order-confirmation-billing address,
.wc-block-order-confirmation-shipping .wc-block-order-confirmation-shipping__address,
.wc-block-order-confirmation-billing .wc-block-order-confirmation-billing__address {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: var(--wp--preset--color--fg-3, #D1D5DB) !important;
  font-style: normal !important;
}

/* Recipient name inside address */
.wc-block-order-confirmation-shipping .wc-block-order-confirmation-shipping__name,
.wc-block-order-confirmation-billing .wc-block-order-confirmation-billing__name {
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--wp--preset--color--fg-1, #FFFFFF) !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* ----------------------------------------------------------
   11.6 — Digital downloads section (shown only when applicable)
   ---------------------------------------------------------- */

.wc-block-order-confirmation-downloads {
  background: var(--wp--preset--color--dark-card, #1A1A24) !important;
  border: 1px solid var(--wp--preset--color--dark-border, #2A2A3A) !important;
  border-radius: 8px !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
}

.wc-block-order-confirmation-downloads h2 {
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--wp--preset--color--dark-border, #2A2A3A) !important;
}

.wc-block-order-confirmation-downloads a {
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  text-decoration: none !important;
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
}
.wc-block-order-confirmation-downloads a:hover {
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.6) !important;
}

/* ----------------------------------------------------------
   11.7 — "Continue Shopping" button
   WooCommerce renders this as a standard WP button block.
   Source: store.css .btn-checkout pattern — hot-pink,
           border-radius: 0, Orbitron uppercase.
   ---------------------------------------------------------- */

.wc-block-order-confirmation-status a.button,
.wc-block-order-confirmation-status .wp-block-button__link,
.order-confirmation-page .wp-block-button__link,
.order-confirmation-page a.wc-backward,
.order-confirmation-page a[href*="shop"],
body.woocommerce-order-received .wp-block-button__link {
  display: inline-block !important;
  padding: 14px 28px !important;
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--fg-1, #FFFFFF) !important;
  background: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  border: 2px solid var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  box-shadow: 0 0 15px rgba(255, 0, 128, 0.35) !important;
  transition: background 0.2s, box-shadow 0.2s, color 0.2s !important;
  cursor: pointer !important;
}

.wc-block-order-confirmation-status a.button:hover,
.wc-block-order-confirmation-status .wp-block-button__link:hover,
.order-confirmation-page .wp-block-button__link:hover,
body.woocommerce-order-received .wp-block-button__link:hover {
  background: transparent !important;
  color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  box-shadow: 0 0 20px rgba(255, 0, 128, 0.5) !important;
  text-shadow: 0 0 8px rgba(255, 0, 128, 0.5) !important;
}

/* ----------------------------------------------------------
   11.8 — Mobile responsive (≤ 600px)
   ---------------------------------------------------------- */

@media (max-width: 600px) {
  body.woocommerce-order-received main.wp-block-group,
  .order-confirmation-page {
    padding-top: 80px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .wc-block-order-confirmation-status,
  .wc-block-order-confirmation-summary,
  .wc-block-order-confirmation-totals,
  .wc-block-order-confirmation-shipping,
  .wc-block-order-confirmation-billing,
  .wc-block-order-confirmation-downloads,
  .wc-block-order-confirmation-additional-fields {
    padding: 16px !important;
  }

  .wc-block-order-confirmation-totals .woocommerce-Price-amount,
  .wc-block-order-confirmation-totals tfoot tr:last-child .woocommerce-Price-amount {
    font-size: 18px !important;
  }
}

/* PHASE 11 FIX — Continue Shopping button */
.order-confirmation-actions,
.wp-block-buttons.order-confirmation-actions {
  margin-top: 40px;
  text-align: center;
}

.order-confirmation-actions .wp-block-button__link,
.wp-block-button.continue-shopping .wp-block-button__link {
  background: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  border: 2px solid var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  border-radius: 4px !important;
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  padding: 14px 32px !important;
  text-transform: uppercase !important;
  transition: background var(--transition-fast), color var(--transition-fast) !important;
}

.order-confirmation-actions .wp-block-button__link:hover,
.wp-block-button.continue-shopping .wp-block-button__link:hover {
  background: transparent !important;
  color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  text-shadow: 0 0 10px var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
}

/* ============================================================
   PHASE 10 — MOBILE PASS
   ============================================================ */

/* 10.1 — Nav: hide search at tablet/mobile (≤768px)
   Prevents search form (246px) from overflowing the nav flex container at 768px.
   Already hidden at ≤480px (Phase 7); this extends to tablet breakpoint. */
@media (max-width: 768px) {
  .cyber-nav .cn-search {
    display: none !important;
  }
}

/* 10.2 — Product grid border-box fix
   WC product cards have border: 2px solid (4px per item, content-box).
   flex-basis formulas (25%, 33.33%, 50%) don't account for these borders,
   causing items to overflow their row and collapse to fewer columns.
   border-box makes flex-basis include the border so math works correctly. */
.wc-block-product-template.is-flex-container.columns-4 > li {
  box-sizing: border-box !important;
}

/* 10.3 — Order confirmation email-confirm button: constrain at mobile
   WC renders input[type=submit] inside .wc-block-order-confirmation-status-description
   at its intrinsic width (403px), overflowing the 375px viewport by 44px. */
@media (max-width: 600px) {
  .wc-block-order-confirmation-status-description input[type="submit"],
  .wc-block-order-confirmation-status-description input.wp-element-button,
  form.woocommerce-verify-email input[type="submit"],
  form.woocommerce-verify-email input.wp-element-button {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ============================================================
   PHASE 13 — QUICK-VIEW MODAL + TOAST
   ============================================================ */

/* Overlay backdrop */
.qv-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.qv-overlay.open {
  opacity: 1;
}
.qv-overlay[hidden] {
  display: none;
}

/* Modal 2-column card */
.qv-modal {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 860px;
  width: 100%;
  background: #1A1A24;
  border: 1px solid var(--wp--preset--color--neon-pink-hot, #FF0080);
  border-radius: 8px;
  overflow: hidden;
  max-height: 90vh;
  transform: translateY(20px);
  transition: transform 0.25s ease;
  box-shadow: 0 0 40px rgba(255, 0, 128, 0.15);
}
.qv-overlay.open .qv-modal {
  transform: translateY(0);
}

/* Close button */
.qv-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 10;
  width: 2rem;
  height: 2rem;
  background: rgba(26, 26, 36, 0.9);
  border: 1px solid var(--wp--preset--color--dark-border, #2A2A3A);
  border-radius: 4px;
  color: var(--wp--preset--color--fg-1, #F0F0FF);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, color 0.2s;
}
.qv-close:hover {
  border-color: var(--wp--preset--color--neon-cyan, #00FFFF);
  color: var(--wp--preset--color--neon-cyan, #00FFFF);
}

/* Image panel */
.qv-img-panel {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #0F0F18;
}
.qv-img-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.12) 2px,
    rgba(0, 0, 0, 0.12) 4px
  );
  pointer-events: none;
}
.qv-img-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Body */
.qv-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.75rem 1.5rem;
  overflow-y: auto;
}

/* Category chip */
.qv-cat {
  font-family: var(--wp--preset--font-family--orbitron, 'Orbitron', sans-serif);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--neon-cyan, #00FFFF);
}

/* Title */
.qv-title {
  font-family: var(--wp--preset--font-family--orbitron, 'Orbitron', sans-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--wp--preset--color--fg-1, #F0F0FF);
  margin: 0;
  line-height: 1.3;
}

/* Price */
.qv-price {
  font-family: var(--wp--preset--font-family--orbitron, 'Orbitron', sans-serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--wp--preset--color--neon-cyan, #00FFFF);
  text-shadow: 0 0 10px var(--wp--preset--color--neon-cyan, #00FFFF);
}
.qv-price .woocommerce-Price-currencySymbol {
  font-size: 0.85em;
  vertical-align: super;
}

/* Description */
.qv-desc {
  font-size: 0.82rem;
  color: var(--wp--preset--color--fg-2, #A0A0B8);
  line-height: 1.55;
  margin: 0;
}

/* Attribute chips container */
#qv-options {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.qv-attr-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.qv-attr-label {
  font-family: var(--wp--preset--font-family--orbitron, 'Orbitron', sans-serif);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--fg-2, #A0A0B8);
}
.qv-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.qv-chip {
  padding: 0.3rem 0.7rem;
  background: transparent;
  border: 1px solid var(--wp--preset--color--dark-border, #2A2A3A);
  border-radius: 4px;
  color: var(--wp--preset--color--fg-1, #F0F0FF);
  font-size: 0.75rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.qv-chip:hover,
.qv-chip.selected {
  border-color: var(--wp--preset--color--neon-pink-hot, #FF0080);
  color: var(--wp--preset--color--neon-pink-hot, #FF0080);
  background: rgba(255, 0, 128, 0.06);
}

/* Qty + ATC row */
.qv-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
}

/* Qty stepper */
.qv-qty-box {
  display: flex;
  align-items: center;
  border: 1px solid var(--wp--preset--color--dark-border, #2A2A3A);
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}
.qv-qty-btn {
  width: 2rem;
  height: 2.25rem;
  background: transparent;
  border: none;
  color: var(--wp--preset--color--fg-1, #F0F0FF);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, background 0.2s;
}
.qv-qty-btn:hover {
  color: var(--wp--preset--color--neon-cyan, #00FFFF);
  background: rgba(0, 255, 255, 0.06);
}
.qv-qty-val {
  min-width: 2rem;
  text-align: center;
  font-family: var(--wp--preset--font-family--orbitron, 'Orbitron', sans-serif);
  font-size: 0.85rem;
  color: var(--wp--preset--color--fg-1, #F0F0FF);
  border-left: 1px solid var(--wp--preset--color--dark-border, #2A2A3A);
  border-right: 1px solid var(--wp--preset--color--dark-border, #2A2A3A);
  padding: 0 0.3rem;
}

/* ATC button */
.qv-atc-btn {
  flex: 1;
  padding: 0.65rem 1rem;
  background: var(--wp--preset--color--neon-pink-hot, #FF0080);
  border: 1px solid var(--wp--preset--color--neon-cyan, #00FFFF);
  border-radius: 4px;
  color: #fff;
  font-family: var(--wp--preset--font-family--orbitron, 'Orbitron', sans-serif);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}
.qv-atc-btn:hover:not(:disabled) {
  background: #ff1a8c;
  box-shadow: 0 0 14px rgba(255, 0, 128, 0.5);
}
.qv-atc-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* "View full product" link */
.qv-view-link {
  display: none;
}
.qv-view-full {
  display: inline-block;
  font-family: var(--wp--preset--font-family--orbitron, 'Orbitron', sans-serif);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--neon-cyan, #00FFFF);
  text-decoration: none;
  border-bottom: 1px solid var(--wp--preset--color--neon-cyan, #00FFFF);
  padding-bottom: 1px;
  transition: color 0.2s, text-shadow 0.2s;
}
.qv-view-full:hover {
  text-shadow: 0 0 8px var(--wp--preset--color--neon-cyan, #00FFFF);
}

/* SKU/Ships meta */
.qv-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: 0.72rem;
  color: var(--wp--preset--color--fg-2, #A0A0B8);
  margin-top: 0.25rem;
}
.qv-meta strong {
  color: var(--wp--preset--color--fg-1, #F0F0FF);
  font-weight: 600;
}

/* ── Toast ─────────────────────────────────────────────────────────────────── */
.wc-qv-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(1rem);
  z-index: 100000;
  background: #1A1A24;
  border: 1px solid var(--wp--preset--color--neon-pink-hot, #FF0080);
  border-radius: 4px;
  padding: 0.6rem 1.4rem;
  font-family: var(--wp--preset--font-family--orbitron, 'Orbitron', sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--fg-1, #F0F0FF);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  box-shadow: 0 0 16px rgba(255, 0, 128, 0.25);
}
.wc-qv-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Quick-view mobile stacking (≤640px) ────────────────────────────────── */
@media (max-width: 640px) {
  .qv-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .qv-modal {
    grid-template-columns: 1fr;
    max-height: 92dvh;
    border-radius: 8px 8px 0 0;
    border-bottom: none;
  }
  .qv-img-panel {
    aspect-ratio: 16 / 9;
    max-height: 220px;
  }
  .qv-body {
    padding: 1.25rem 1rem;
  }
  .qv-title {
    font-size: 1rem;
  }
}