/* ============================================================
   Sparky's Labs — WooCommerce overrides (dark, red glow)
   Covers: shop archive, single product, cart, checkout,
   My Account, free-shipping notice, full mobile no-bleed.
   ============================================================ */

.shop-main { padding: 24px 0 80px; }
.woocommerce-breadcrumb { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-dim); margin-bottom: 24px; }
.woocommerce-breadcrumb a { color: var(--color-text-muted); }

/* ---- Shop head ---- */
.shop-head { margin-bottom: 28px; }
.shop-title { font-family: var(--font-heading); font-size: clamp(1.6rem, 3vw, 2.25rem); margin: 6px 0 0; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.shop-count { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-muted); }

/* ---- Layout: results LEFT, sidebar RIGHT ---- */
.shop-layout { display: grid; grid-template-columns: 1fr 270px; gap: 40px; align-items: start; }
@media (max-width: 900px) { .shop-layout { grid-template-columns: 1fr; gap: 24px; } }

/* mobile filter toggle */
.shop-filter-toggle {
  display: none;
  width: 100%; margin-bottom: 18px;
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  font-family: var(--font-heading); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: 14px; min-height: 48px; cursor: pointer;
}
/* popup header (close bar) — only shown inside the mobile filter popup */
.shop-filter-pophead { display: none; }
.shop-filter-close { display: none; }

@media (max-width: 900px) {
  .shop-filter-toggle { display: block; }
  /* hidden by default so PRODUCTS show immediately on entering the shop */
  .shop-sidebar { display: none; }
  /* tapping "Search & Filter" pops the panel over the page */
  .shop-sidebar.open {
    display: flex; flex-direction: column; gap: 16px;
    position: fixed; inset: 0; z-index: 9998; margin: 0;
    padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
    background: rgba(5,5,5,0.98); overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .shop-sidebar.open .shop-filter-pophead {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; padding: 4px 0 12px; margin: -4px 0 0;
    background: rgba(5,5,5,0.98); border-bottom: 1px solid var(--color-border);
  }
  .shop-filter-pophead-title {
    font-family: var(--font-heading); font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; font-size: .9rem; color: var(--color-text);
  }
  .shop-sidebar.open .shop-filter-close {
    display: inline-flex; align-items: center;
    background: var(--color-accent); color: #fff; border: 0;
    border-radius: var(--radius); padding: 0 18px; min-height: 44px;
    font-family: var(--font-heading); font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; font-size: .82rem; cursor: pointer;
  }
  body.filters-open { overflow: hidden; }   /* lock page scroll behind popup */
}

/* ---- Search ---- */
.shop-search { display: flex; gap: 0; }
.shop-search input[type="search"] {
  flex: 1; min-width: 0; background: var(--color-primary-dk);
  border: 1px solid var(--color-border); color: var(--color-text);
  padding: 12px; font: inherit; font-size: .9rem; border-radius: var(--radius) 0 0 var(--radius);
}
.shop-search input[type="search"]:focus { outline: none; border-color: var(--color-accent); }
.shop-search button {
  background: var(--color-accent); color: #fff; border: 1px solid var(--color-accent);
  padding: 0 16px; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer; border-radius: 0 var(--radius) var(--radius) 0;
}
.shop-search button:hover { background: var(--color-accent-dk); border-color: var(--color-accent-dk); }

/* ---- Sidebar ---- */
.shop-sidebar { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 24px; }
@media (max-width: 900px) { .shop-sidebar { position: static; } }
.shop-filter { background: var(--color-surface); border: 1px solid var(--color-border); padding: 20px; border-radius: var(--radius-sm); }
.shop-filter-title { font-family: var(--font-heading); font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--color-text); margin: 0 0 14px; }
.shop-cats, .shop-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.shop-cats li a, .shop-links li a {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 10px; color: var(--color-text-muted); font-size: .9rem;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  transition: color .15s, border-color .15s, background .15s;
}
.shop-cats li a:hover, .shop-links li a:hover { color: var(--color-text); background: rgba(224,25,32,0.08); }
.shop-cats li.is-active a { color: var(--color-text); border-color: var(--color-accent); background: rgba(224,25,32,0.12); }
.shop-cats .count { font-size: .7rem; letter-spacing: .08em; color: var(--color-text-dim); flex-shrink: 0; }
.shop-filter--ship { display: flex; flex-direction: column; gap: 4px; }
.shop-filter--ship strong { color: var(--color-accent); font-family: var(--font-heading); letter-spacing: .04em; }
.shop-filter--ship span { font-size: .82rem; color: var(--color-text-muted); }

/* ---- Shop grid (robust, no bleed) ---- */
.shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
@media (max-width: 1200px) { .shop-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
/* phones keep TWO per row (1-per-row only on very small screens) */
@media (max-width: 760px)  { .shop-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; } }
@media (max-width: 340px)  { .shop-grid { grid-template-columns: 1fr; } }

.shop-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-sm);
  transition: border-color .2s, transform .2s, box-shadow .2s; min-width: 0;
}
.shop-card:hover { border-color: var(--color-accent); transform: translateY(-2px); box-shadow: var(--glow); }
.shop-card-image { display: block; aspect-ratio: 1/1; background: var(--color-primary-dk); position: relative; overflow: hidden; }
.shop-card-image img { width: 100%; height: 100%; object-fit: cover; padding: 0; display: block; }
.shop-card-coa {
  position: absolute; top: 10px; right: 10px;
  background: rgba(0,0,0,0.72); color: var(--color-accent);
  font-size: .62rem; font-weight: 700; letter-spacing: .14em; padding: 4px 8px;
  text-transform: uppercase; border: 1px solid var(--color-accent); border-radius: 2px;
}
.shop-card-body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.shop-card-title { font-weight: 600; font-size: 1rem; color: var(--color-text); line-height: 1.3; overflow-wrap: anywhere; min-height: 2.6em; }
.shop-card-title:hover { color: var(--color-accent); }
.shop-card-sku { font-size: .7rem; letter-spacing: .06em; color: var(--color-text-dim); overflow-wrap: anywhere; min-height: 1em; }
.shop-card-price { font-size: 1.05rem; font-weight: 700; color: var(--color-accent); margin-top: auto; padding-top: 8px; }
.shop-card-price .amount { color: var(--color-accent); }
.shop-card-btn {
  margin-top: auto; background: var(--color-accent) !important; color: #fff !important;
  border-radius: var(--radius) !important; font-weight: 600 !important; text-transform: uppercase !important;
  letter-spacing: .08em !important; font-size: .74rem !important; padding: 12px !important;
  border: 1px solid var(--color-accent) !important; text-align: center; display: block; min-height: 44px; line-height: 1.4;
}
.shop-card-btn.added::after { content: " ✓"; }
.shop-card-btn:hover { background: var(--color-accent-dk) !important; border-color: var(--color-accent-dk) !important; }

.shop-pagination { margin-top: 40px; }
.shop-pagination ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.shop-pagination li a, .shop-pagination li span { display: inline-flex; align-items: center; padding: 10px 14px; border: 1px solid var(--color-border); color: var(--color-text-muted); font-size: .84rem; text-decoration: none; border-radius: var(--radius-sm); min-height: 42px; }
.shop-pagination li span.current { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.shop-pagination li a:hover { color: var(--color-text); border-color: var(--color-accent); }

/* ============================================================
   FREE-SHIPPING NOTICE
   ============================================================ */
.sparkys-freeship { background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent); padding: 16px 18px; margin: 0 0 24px; border-radius: var(--radius-sm); }
.sparkys-freeship__msg { font-size: .92rem; color: var(--color-text); }
.sparkys-freeship__msg--win { color: #fff; }
.sparkys-freeship__msg strong { color: var(--color-accent); }
.sparkys-freeship__bar { margin-top: 10px; height: 6px; background: rgba(255,255,255,0.08); border-radius: 99px; overflow: hidden; }
.sparkys-freeship__bar span { display: block; height: 100%; background: var(--color-accent); box-shadow: var(--glow); transition: width .4s ease; }

/* ============================================================
   SINGLE PRODUCT (Revive-style)
   ============================================================ */
.sp-crumbs { padding: 24px 0 0; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-dim); }
.sp-crumbs a { color: var(--color-text-muted); }
.sp-crumbs .sep { margin: 0 8px; color: var(--color-text-dim); }
.sp-crumbs .current { color: var(--color-text-muted); }

.sp-hero { padding: 32px 0 48px; }
.sp-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .sp-hero__grid { grid-template-columns: 1fr; gap: 28px; } }

.sp-well { position: relative; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
.sp-img { width: 100%; aspect-ratio: 1/1; object-fit: cover; padding: 0; display: block; }
.sp-coa-flag { position: absolute; top: 14px; right: 14px; background: rgba(0,0,0,0.72); color: var(--color-accent); border: 1px solid var(--color-accent); font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 5px 9px; border-radius: 2px; }

.sp-buy { min-width: 0; }
.sp-eyebrow { font-family: var(--font-heading); font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 10px; }
.sp-title { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin: 0 0 8px; overflow-wrap: anywhere; }
.sp-sku { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-dim); margin-bottom: 14px; }
.sp-price { font-size: 1.7rem; font-weight: 700; color: var(--color-accent); font-family: var(--font-heading); margin-bottom: 16px; }
.sp-price .amount { color: var(--color-accent); }
.sp-short { color: var(--color-text-muted); margin-bottom: 20px; }

/* native WC add-to-cart inside .sp-form */
.sp-form { margin: 8px 0 18px; }
.sp-form .quantity { display: inline-flex; align-items: stretch; }
.woocommerce .quantity .qty-step {
  width: 44px; min-height: 48px; background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border); cursor: pointer; font-size: 1.2rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.woocommerce .quantity .qty-step:first-child { border-radius: var(--radius) 0 0 var(--radius); border-right: 0; }
.woocommerce .quantity .qty-step:last-child { border-radius: 0 var(--radius) var(--radius) 0; border-left: 0; }
.woocommerce .quantity .qty-step:hover { color: var(--color-accent); border-color: var(--color-accent); }
.sp-form .quantity input.qty { border-radius: 0 !important; }
.sp-form .quantity input.qty {
  width: 72px; background: var(--color-surface) !important; color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important; border-radius: var(--radius) !important;
  font-size: 1rem !important; font-weight: 600 !important; padding: 12px 8px !important; text-align: center !important;
}
.sp-form form.cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 0; }
.sp-form .single_add_to_cart_button {
  flex: 1; min-width: 180px;
  background: var(--color-accent) !important; color: #fff !important; border: 1px solid var(--color-accent) !important;
  border-radius: var(--radius) !important; padding: 14px 28px !important; font-family: var(--font-heading) !important;
  font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .08em !important; min-height: 50px;
}
.sp-form .single_add_to_cart_button:hover { background: var(--color-accent-dk) !important; box-shadow: var(--glow); }
/* variation (dose) selector */
.sp-form table.variations { width: 100%; margin: 0 0 14px; border-collapse: collapse; }
.sp-form table.variations td, .sp-form table.variations th { padding: 6px 0; vertical-align: middle; text-align: left; }
.sp-form table.variations label { font-family: var(--font-heading); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .82rem; color: var(--color-text); }
.sp-form .variations select {
  width: 100%; background: var(--color-surface) !important; color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important; border-radius: var(--radius) !important; padding: 12px !important; min-height: 48px;
}
.sp-form .woocommerce-variation-price .price { color: var(--color-accent) !important; font-size: 1.3rem; font-weight: 700; }
.sp-form .reset_variations { color: var(--color-text-muted); font-size: .8rem; margin-left: 8px; }

.sp-coa-link { margin: 6px 0 20px; width: 100%; box-sizing: border-box; white-space: normal; word-break: break-word; }

.sp-trust { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
.sp-trust__row { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.sp-trust__row:last-child { border-bottom: 0; }
.sp-trust__row strong { color: var(--color-text); font-family: var(--font-heading); letter-spacing: .04em; }
.sp-trust__row span { color: var(--color-text-muted); font-size: .85rem; }

.sp-ruo { background: var(--color-primary-dk); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 18px 0; }
.sp-ruo .container { font-size: .85rem; color: var(--color-text-muted); }
.sp-ruo strong { color: var(--color-accent); letter-spacing: .04em; }

.sp-detail { padding: 56px 0 80px; }
.sp-detail__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .sp-detail__grid { grid-template-columns: 1fr; gap: 28px; } }
.sp-desc h2 { margin-bottom: 14px; }
.sp-desc p, .sp-desc li { color: var(--color-text-muted); }
.sp-meta { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 24px; }
.sp-meta h3 { font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; }
.sp-dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; margin: 0; }
.sp-dl dt { color: var(--color-text-dim); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.sp-dl dd { margin: 0; color: var(--color-text); font-size: .9rem; text-align: right; overflow-wrap: anywhere; }

/* hide reviews everywhere */
.woocommerce #reviews, .woocommerce #tab-reviews, .woocommerce-tabs li.reviews_tab,
.woocommerce-product-rating, .woocommerce-review-link, .comment-reply-title { display: none !important; }

/* ============================================================
   GENERIC WC BUTTONS / FORMS / MESSAGES
   ============================================================ */
.woocommerce button.button, .woocommerce a.button, .woocommerce input.button, .woocommerce #respond input#submit {
  background: var(--color-accent) !important; color: #fff !important; border-radius: var(--radius) !important;
  font-family: var(--font-heading) !important; font-weight: 600 !important; text-transform: uppercase !important;
  letter-spacing: .08em !important; padding: 13px 24px !important; border: 1px solid var(--color-accent) !important; min-height: 46px;
}
.woocommerce button.button:hover, .woocommerce a.button:hover, .woocommerce input.button:hover { background: var(--color-accent-dk) !important; border-color: var(--color-accent-dk) !important; }
.woocommerce .button.alt, .woocommerce-cart .checkout-button { box-shadow: var(--glow); }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container--default .select2-selection--single {
  background: var(--color-surface) !important; border: 1px solid var(--color-border) !important;
  color: var(--color-text) !important; border-radius: var(--radius) !important; padding: 12px !important; min-height: 48px;
}
.woocommerce form .form-row label { color: var(--color-text); font-size: .9rem; }
.select2-dropdown, .select2-results__option { background: var(--color-surface) !important; color: var(--color-text) !important; }

.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews {
  background: var(--color-surface) !important; border-top: 3px solid var(--color-accent) !important;
  color: var(--color-text) !important; border-radius: var(--radius-sm) !important; list-style: none;
}
.woocommerce-message a, .woocommerce-info a, .woocommerce-error a { color: var(--color-accent) !important; }

/* ============================================================
   CART
   ============================================================ */
.woocommerce-cart .shop_table, .woocommerce-checkout .shop_table, .woocommerce table.shop_table {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); border-collapse: collapse; width: 100%;
}
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-top: 1px solid var(--color-border); color: var(--color-text); padding: 14px; }
.woocommerce table.shop_table thead th { font-family: var(--font-heading); letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; color: var(--color-text-muted); }
.woocommerce .cart_item img { width: 64px; height: auto; border: 1px solid var(--color-border); background: var(--color-primary-dk); }
.woocommerce a.remove { color: var(--color-accent) !important; border-radius: 50%; }
.woocommerce a.remove:hover { background: var(--color-accent) !important; color: #fff !important; }
.woocommerce .cart-collaterals .cart_totals, .woocommerce .cart_totals {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 24px;
}
.woocommerce .cart_totals h2 { font-size: 1.2rem; margin-bottom: 14px; }
.woocommerce .coupon .input-text { max-width: 200px; }

/* ============================================================
   CHECKOUT
   ============================================================ */
.woocommerce-checkout #order_review, .woocommerce-checkout .col2-set { color: var(--color-text); }
.woocommerce-checkout #order_review_heading { margin-top: 24px; }
.woocommerce-checkout #payment { background: var(--color-surface) !important; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--color-border); }
.woocommerce-checkout #payment div.payment_box { background: var(--color-surface-alt) !important; color: var(--color-text-muted); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--color-surface-alt) !important; }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a { color: var(--color-accent); }
.woocommerce-checkout #place_order { width: 100%; }

/* ============================================================
   MY ACCOUNT
   ============================================================ */
.woocommerce-account .woocommerce { display: grid; grid-template-columns: 230px 1fr; gap: 40px; align-items: start; padding: 56px 0 80px; max-width: var(--container); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.woocommerce-account .woocommerce-MyAccount-navigation { margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block; padding: 14px 16px; color: var(--color-text-muted); background: var(--color-surface);
  font-family: var(--font-heading); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .84rem;
  border-bottom: 1px solid var(--color-border); transition: color .15s, background .15s;
}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child a { border-bottom: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { color: var(--color-text); background: rgba(224,25,32,0.08); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: #fff; background: var(--color-accent); }
.woocommerce-account .woocommerce-MyAccount-content { min-width: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 28px; }
.woocommerce-account .woocommerce-MyAccount-content p { color: var(--color-text-muted); }
.woocommerce-account .woocommerce-MyAccount-content a { color: var(--color-accent); }
.woocommerce-account .woocommerce-MyAccount-content mark { background: transparent; color: var(--color-text); }
.woocommerce-account .addresses .title h3 { font-size: 1.05rem; }
.woocommerce-account .woocommerce-Address address { color: var(--color-text-muted); font-style: normal; }

/* login / register cards — login view is NOT the dashboard grid: render as a tight centered block */
.woocommerce-account:not(.logged-in) .woocommerce {
  display: block; grid-template-columns: 1fr; gap: 0;
  max-width: 460px; margin: 0 auto; padding: 4px 0 40px;
}
.woocommerce-account:not(.logged-in) .woocommerce > h2 { margin-top: 0; font-size: 1.5rem; }
.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper:empty { display: none; margin: 0; }
.woocommerce form.login { margin-top: 16px; }
.woocommerce .col2-set .col-1, .woocommerce .col2-set .col-2,
.woocommerce-account .u-columns .col-1, .woocommerce-account .u-columns .col-2 { float: none; width: 100%; }
.woocommerce form.login, .woocommerce form.register {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 28px;
}

/* ============================================================
   MOBILE — responsive tables (no horizontal bleed)
   ============================================================ */
@media (max-width: 768px) {
  /* My Account: stack nav above content */
  .woocommerce-account .woocommerce { grid-template-columns: 1fr; gap: 20px; }
  .woocommerce-account .woocommerce-MyAccount-navigation ul { flex-direction: column; }

  /* WC responsive tables: turn rows into stacked cards */
  .woocommerce table.shop_table_responsive thead { display: none; }
  .woocommerce table.shop_table_responsive tbody tr { display: block; border: 1px solid var(--color-border); border-radius: var(--radius-sm); margin-bottom: 14px; background: var(--color-surface); }
  .woocommerce table.shop_table_responsive tbody tr td {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    text-align: right; padding: 12px 14px; border-top: 1px solid var(--color-border);
  }
  .woocommerce table.shop_table_responsive tbody tr td::before {
    content: attr(data-title); font-weight: 600; color: var(--color-text-muted);
    font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; text-align: left;
  }
  .woocommerce table.shop_table_responsive tbody tr td.product-remove { justify-content: flex-end; }
  .woocommerce-cart .wc-proceed-to-checkout, .woocommerce .cart_totals { width: 100%; }
  .woocommerce .cart-collaterals .cart_totals { float: none; width: 100%; }
  .woocommerce #content table.cart td.actions .input-text, .woocommerce table.cart td.actions .input-text { width: 100% !important; margin-bottom: 10px; }

  /* checkout single column */
  .woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { float: none; width: 100%; }

  .sp-detail { padding: 40px 0 90px; }   /* room for sticky ATC bar */
}

/* ============================================================
   STICKY MOBILE ADD-TO-CART BAR (single product only)
   ============================================================ */
.mobile-atc-bar { display: none; }
@media (max-width: 768px) {
  body.single-product .mobile-atc-bar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
    background: var(--color-primary-dk); border-top: 1px solid var(--color-border);
    padding: 10px 14px; gap: 12px; align-items: center; justify-content: space-between;
  }
  body.single-product .mobile-atc-bar .info { min-width: 0; flex: 1; }
  body.single-product .mobile-atc-bar .name { font-size: .85rem; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.single-product .mobile-atc-bar .price { font-size: .95rem; font-weight: 700; color: var(--color-accent); }
  body.single-product .mobile-atc-bar .btn { flex-shrink: 0; padding: 12px 18px; font-size: .78rem; min-height: 48px; }
  body.single-product { padding-bottom: 76px; }
}

/* ============================================================
   MOBILE OPTIMIZATION PASS — WC BLOCKS (cart + checkout) + iOS inputs
   Cart & Checkout on this store render as WooCommerce *Blocks*, so the
   legacy table rules above never reach them. WC ships these with light
   defaults — on our near-black theme that's unreadable. Style them dark +
   on-brand, and guarantee mobile-safe inputs (16px = no iOS zoom, 48px tap).
   ============================================================ */

/* Media never overflows its container (safety net) */
img, svg, video, iframe { max-width: 100%; height: auto; }

/* Cart & Checkout are wrapped in the generic .prose (max-width 800px) page
   template — too narrow for a 2-column cart/checkout, so it looked half-width.
   Let those pages use the full container width. */
body.woocommerce-cart .prose,
body.woocommerce-checkout .prose { max-width: 100% !important; }
/* WC's own block max-width caps can also pin it narrow — release them */
body.woocommerce-cart .wc-block-cart,
body.woocommerce-checkout .wc-block-checkout,
body.woocommerce-cart .wp-block-woocommerce-cart,
body.woocommerce-checkout .wp-block-woocommerce-checkout { max-width: 100% !important; }
/* two-column layout: items/form on the left, summary on the right */
.wc-block-cart, .wc-block-checkout { display: flex !important; gap: 40px !important; align-items: flex-start !important; }
.wc-block-cart__main, .wc-block-checkout__main { flex: 1 1 auto !important; min-width: 0 !important; }
.wc-block-cart__sidebar, .wc-block-checkout__sidebar { flex: 0 0 360px !important; max-width: 360px !important; }
@media (max-width: 880px) {
  .wc-block-cart, .wc-block-checkout { display: block !important; }
  .wc-block-cart__sidebar, .wc-block-checkout__sidebar { flex-basis: auto !important; max-width: 100% !important; margin-top: 24px !important; }
}

/* --- Block text colors (dark theme) --- */
.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout,
.wc-block-cart, .wc-block-checkout { color: var(--color-text); }

.wc-block-components-text-input label,
.wc-block-components-checkout-step__title,
.wc-block-components-title,
.wc-block-components-product-name,
.wc-block-cart-item__product-name,
.wc-block-components-totals-item__label,
.wc-block-checkout__main h2, .wc-block-cart h2 { color: var(--color-text) !important; }

.wc-block-components-checkout-step__description,
.wc-block-components-product-metadata,
.wc-block-components-product-details,
.wc-block-components-order-summary-item__description,
.wc-block-components-totals-item,
.wc-block-cart-item__quantity { color: var(--color-text-muted) !important; }

.wc-block-checkout a, .wc-block-cart a,
.wc-block-components-checkout-step a { color: var(--color-accent) !important; }

/* --- Inputs / selects: dark surface, light text, iOS-safe sizing --- */
.wc-block-components-text-input input,
.wc-block-components-text-input input.input-text,
.wc-block-components-select select,
.wc-block-components-address-form input,
.wc-block-components-combobox input,
.wc-block-components-quantity-selector input {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
  font-size: 16px !important;
  min-height: 48px !important;
  border-radius: var(--radius) !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus,
.wc-block-components-combobox input:focus {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px rgba(224,25,32,0.15) !important;
  outline: none !important;
}
.wc-block-components-text-input.is-active label { color: var(--color-accent) !important; }

/* --- Order-summary panel: ONE card (on the summary block, not the wrapper) --- */
.wc-block-cart__sidebar,
.wc-block-checkout__sidebar {
  background: transparent !important; border: 0 !important; padding: 0 !important;
}
.wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 22px !important;
}
/* inner sections must NOT draw their own box — transparent, divider only */
.wc-block-components-totals-wrapper,
.wc-block-components-panel,
.wp-block-woocommerce-cart-order-summary-coupon-form-block,
.wp-block-woocommerce-checkout-order-summary-coupon-form-block,
.wp-block-woocommerce-cart-order-summary-subtotal-block,
.wp-block-woocommerce-cart-order-summary-shipping-block,
.wp-block-woocommerce-cart-order-summary-totals-block {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  padding: 12px 0 !important;
  margin: 0 !important;
}
/* heading row + the first section under it: no stray top divider */
.wp-block-woocommerce-cart-order-summary-heading-block {
  border: 0 !important; background: transparent !important;
  padding: 0 0 8px !important; margin: 0 !important;
  font-family: var(--font-heading); letter-spacing: .14em; text-transform: uppercase;
  font-size: .8rem; color: var(--color-text-muted);
}
.wp-block-woocommerce-cart-order-summary-heading-block + * { border-top: 0 !important; }
.wc-block-components-totals-item {
  border: 0 !important; background: transparent !important; padding: 5px 0 !important;
}
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value { color: var(--color-text) !important; }
/* grand total emphasis */
.wc-block-components-totals-footer-item { padding-top: 12px !important; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-weight: 700 !important; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: var(--color-accent) !important; font-size: 1.25rem !important; font-weight: 700 !important;
}
.wc-block-cart-items, .wc-block-cart-items__row, .wc-block-checkout__form { border-color: var(--color-border) !important; }

/* --- Coupon accordion: blend into the panel --- */
.wc-block-components-totals-coupon__button,
.wc-block-components-panel__button {
  color: var(--color-text) !important; background: transparent !important;
  padding: 4px 0 !important; font-weight: 600 !important;
}
.wc-block-components-panel__button svg,
.wc-block-components-totals-coupon__button svg { fill: var(--color-text-muted) !important; }

/* --- Cart line items --- */
.wc-block-cart-items__row { padding: 18px 0 !important; }
.wc-block-cart-item__image img {
  border: 1px solid var(--color-border) !important; border-radius: var(--radius-sm) !important;
  background: var(--color-primary-dk) !important;
}
.wc-block-cart-item__product-name,
a.wc-block-components-product-name { color: var(--color-text) !important; font-weight: 600 !important; }
a.wc-block-components-product-name:hover { color: var(--color-accent) !important; }
/* hide the long short-description clutter inside cart rows */
.wc-block-cart-item__product .wc-block-components-product-metadata__description,
.wc-block-cart-item__product .wc-block-components-product-metadata > .wc-block-components-product-details { display: none !important; }
.wc-block-cart-item__remove-link { color: var(--color-text-dim) !important; }
.wc-block-cart-item__remove-link:hover { color: var(--color-accent) !important; }

/* --- Quantity selector --- */
.wc-block-components-quantity-selector {
  border: 1px solid var(--color-border) !important; border-radius: var(--radius) !important;
  background: var(--color-surface) !important; overflow: hidden !important; max-width: 120px !important;
}
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
  border: 0 !important; background: transparent !important; min-height: 42px !important; color: var(--color-text) !important;
}
.wc-block-components-quantity-selector__button {
  color: var(--color-text) !important; background: transparent !important; border: 0 !important;
  min-width: 38px !important; font-size: 1.1rem !important;
}
.wc-block-components-quantity-selector__button:hover { color: var(--color-accent) !important; }

/* --- Primary actions → brand red, full tap height --- */
.wc-block-components-button.contained,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  background: var(--color-accent) !important;
  color: #fff !important; border: 0 !important;
  border-radius: var(--radius) !important; min-height: 52px !important;
  font-family: var(--font-heading) !important; letter-spacing: .04em !important;
}
.wc-block-components-button.contained:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover { background: var(--color-accent-dk) !important; }

@media (max-width: 782px) {
  /* iOS auto-zooms any input < 16px on focus — force 16px + 48px tap on EVERY form */
  input[type=text], input[type=email], input[type=tel], input[type=url],
  input[type=password], input[type=number], input[type=search],
  select, textarea, .wc-block-components-text-input input {
    font-size: 16px !important;
    min-height: 48px !important;
  }
  /* Blocks cart/checkout: single column, full width */
  .wc-block-checkout, .wc-block-cart { display: block !important; }
  .wc-block-checkout__main, .wc-block-checkout__sidebar,
  .wc-block-cart__main, .wc-block-cart__sidebar {
    width: 100% !important; max-width: 100% !important;
    padding-left: 0 !important; padding-right: 0 !important;
  }
  /* Contact form: full-width submit, comfortable tap */
  .sparkys-contact-form .btn { width: 100%; }
}

/* ============================================================
   CLASSIC CART & CHECKOUT (shortcode) — dark theme
   The store uses [woocommerce_cart] / [woocommerce_checkout] (classic) so the
   CevGate gateway shows. WC ships light defaults; restyle for the dark theme.
   ============================================================ */

/* --- Notices --- */
.woocommerce-info, .woocommerce-message, .woocommerce-error, .woocommerce-noreviews {
  background: var(--color-surface) !important; color: var(--color-text) !important;
  border-top: 3px solid var(--color-accent) !important; border-radius: var(--radius-sm);
  padding: 16px 18px !important; list-style: none;
}
/* hide WC's default absolutely-positioned icon (was overlapping text as a red blob) */
.woocommerce-info::before, .woocommerce-message::before, .woocommerce-error::before { display: none !important; }
.woocommerce-info a, .woocommerce-message a, .woocommerce-error a { color: var(--color-accent) !important; }

/* --- Cart + checkout tables --- */
.woocommerce table.shop_table {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  color: var(--color-text); border-collapse: separate;
}
.woocommerce table.shop_table th { color: var(--color-text); font-family: var(--font-heading); letter-spacing: .06em; text-transform: uppercase; font-size: .78rem; }
.woocommerce table.shop_table td, .woocommerce table.shop_table th { border-top: 1px solid var(--color-border); padding: 14px 16px; }
.woocommerce table.shop_table a { color: var(--color-text); }
.woocommerce table.shop_table a:hover { color: var(--color-accent); }
.woocommerce .cart_item img, .woocommerce .product-thumbnail img {
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-primary-dk);
}
.woocommerce .cart-subtotal td, .woocommerce .order-total td, .woocommerce .order-total th { color: var(--color-text); }
.woocommerce .order-total .amount, .woocommerce .cart_totals .amount { color: var(--color-accent); }

/* --- Coupon + qty on cart --- */
.woocommerce .cart .button, .woocommerce .actions .button { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); }
.woocommerce .cart .button:hover, .woocommerce .actions .button:hover { border-color: var(--color-accent); color: var(--color-text); }
.woocommerce .quantity input.qty {
  background: var(--color-primary-dk); border: 1px solid var(--color-border); color: var(--color-text);
  border-radius: var(--radius); min-height: 44px;
}
.woocommerce .wc-proceed-to-checkout a.checkout-button {
  background: var(--color-accent) !important; color: #fff !important; border: 0; border-radius: var(--radius);
  font-family: var(--font-heading); letter-spacing: .04em; min-height: 52px; display: flex; align-items: center; justify-content: center;
}
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover { background: var(--color-accent-dk) !important; }

/* --- Checkout form fields --- */
.woocommerce form .form-row label, .woocommerce-checkout h3, .woocommerce-checkout label { color: var(--color-text); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce #order_comments {
  background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text);
  border-radius: var(--radius); padding: 12px 14px; font-size: 16px; min-height: 48px;
}
/* native selects: no vertical padding so the value doesn't spill out the bottom */
.woocommerce-checkout select, .woocommerce form .form-row select {
  background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text);
  border-radius: var(--radius); height: 48px !important; line-height: 1.2; padding: 0 12px !important; font-size: 16px;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce-checkout select:focus {
  outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(224,25,32,0.15);
}
.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: var(--color-accent); }

/* select2 (country / state) dark */
.select2-container .select2-selection--single,
.select2-container--default .select2-selection--single {
  background: var(--color-surface) !important; border: 1px solid var(--color-border) !important;
  border-radius: var(--radius) !important; height: 48px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--color-text) !important; line-height: 48px !important; height: 48px !important; padding-left: 12px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px !important; }
.select2-dropdown { background: var(--color-surface) !important; border: 1px solid var(--color-border) !important; color: var(--color-text); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--color-accent) !important; }
.select2-search--dropdown .select2-search__field { background: var(--color-primary-dk) !important; border: 1px solid var(--color-border) !important; color: var(--color-text) !important; }

/* --- Order review + payment box --- */
.woocommerce-checkout #order_review, .woocommerce-checkout #order_review_heading { }
.woocommerce-checkout #payment {
  background: var(--color-surface) !important; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
}
.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid var(--color-border); padding: 14px 18px;
}
.woocommerce-checkout #payment ul.payment_methods li { color: var(--color-text); list-style: none; }
.woocommerce-checkout #payment label { color: var(--color-text); }
.woocommerce-checkout #payment div.payment_box {
  background: var(--color-primary-dk) !important; color: var(--color-text-muted);
  border-radius: var(--radius-sm);
}
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--color-primary-dk) !important; }
.woocommerce-checkout #payment .place-order { padding: 16px 18px; }
.woocommerce #place_order, .woocommerce-checkout button#place_order {
  background: var(--color-accent) !important; color: #fff !important; border: 0 !important;
  border-radius: var(--radius); font-family: var(--font-heading); letter-spacing: .04em;
  min-height: 54px; width: 100%; font-size: .95rem;
}
.woocommerce #place_order:hover { background: var(--color-accent-dk) !important; }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a { color: var(--color-accent); }

/* two-column checkout layout on desktop (classic) — explicit rows so "Your
   order" sits at the TOP of the right column, never pushed below the form */
@media (min-width: 769px) {
  .woocommerce-checkout form.checkout {
    display: grid !important; grid-template-columns: 1.4fr 1fr; column-gap: 40px; align-items: start;
  }
  .woocommerce-checkout form.checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; width: 100% !important; float: none !important; }
  .woocommerce-checkout form.checkout #order_review_heading { grid-column: 2; grid-row: 1; margin-top: 0 !important; }
  .woocommerce-checkout form.checkout #order_review { grid-column: 2; grid-row: 2; width: 100% !important; float: none !important; }
}

/* smaller Cart/Checkout page hero */
body.woocommerce-cart .page-hero, body.woocommerce-checkout .page-hero { padding: 44px 0 20px; }
body.woocommerce-cart .page-hero h1, body.woocommerce-checkout .page-hero h1 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }

/* ============================================================
   CUSTOM CART — two equal cards (items | totals), card line items
   (template: woocommerce/cart/cart.php)
   ============================================================ */
.sparky-cart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; margin-top: 8px; }
.sparky-cart-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 24px; display: flex; flex-direction: column; }

.sparky-cart-lines { display: flex; flex-direction: column; gap: 16px; flex: 1; }
.sparky-cart-line { display: grid; grid-template-columns: 84px 1fr auto; gap: 16px; align-items: start; padding-bottom: 16px; border-bottom: 1px solid var(--color-border); }
.sparky-cart-line:last-child { border-bottom: 0; padding-bottom: 0; }
.scl-thumb { display: block; width: 84px; flex-shrink: 0; }
.scl-thumb img { width: 84px; height: 84px; object-fit: cover; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-primary-dk); display: block; }
.scl-main { min-width: 0; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.scl-name { color: var(--color-text); font-weight: 600; font-size: 1rem; line-height: 1.3; }
.scl-name:hover { color: var(--color-accent); }
.scl-remove { font-size: .74rem; color: var(--color-text-dim); letter-spacing: .04em; text-transform: uppercase; }
.scl-remove:hover { color: var(--color-accent); }
.scl-figures { display: flex; flex-direction: column; gap: 12px; text-align: right; min-width: 92px; }
.scl-fig { display: flex; flex-direction: column; gap: 2px; }
.scl-label { font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-dim); }
.scl-val { font-weight: 700; color: var(--color-text); }
.scl-subtotal .scl-val { color: var(--color-accent); font-size: 1.05rem; }

/* qty stepper inside the card */
.scl-qty .quantity { display: inline-flex; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; background: var(--color-surface); max-width: 132px; }
.scl-qty .quantity input.qty { border: 0 !important; background: transparent !important; color: var(--color-text) !important; width: 46px; min-height: 42px; text-align: center; -moz-appearance: textfield; }
.scl-qty .qty-step { background: transparent; border: 0; color: var(--color-text); min-width: 34px; min-height: 42px; cursor: pointer; font-size: 1.15rem; line-height: 1; }
.scl-qty .qty-step:hover { color: var(--color-accent); }

/* coupon (branded) + update row */
.sparky-cart-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--color-border); }
.sparky-cart-coupon { display: flex; flex: 1 1 220px; min-width: 0; }
.sparky-cart-coupon input#coupon_code {
  flex: 1 1 auto; min-width: 0; background: var(--color-primary-dk) !important; color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important; border-right: 0 !important;
  border-radius: var(--radius) 0 0 var(--radius) !important; padding: 0 14px !important; min-height: 48px !important; font-size: 16px;
}
.sparky-cart-coupon input#coupon_code:focus { outline: none; border-color: var(--color-accent) !important; }
.sparky-cart-coupon input#coupon_code::placeholder { color: var(--color-text-dim); }
.sparky-apply-coupon {
  background: var(--color-accent) !important; color: #fff !important; border: 0 !important;
  border-radius: 0 var(--radius) var(--radius) 0 !important; min-height: 48px !important; padding: 0 20px !important;
  font-family: var(--font-heading); letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; white-space: nowrap; cursor: pointer;
}
.sparky-apply-coupon:hover { background: var(--color-accent-dk) !important; }
.sparky-update-cart {
  background: transparent !important; color: var(--color-text) !important; border: 1px solid var(--color-border) !important;
  border-radius: var(--radius) !important; min-height: 48px !important; padding: 0 20px !important;
  font-family: var(--font-heading); letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; cursor: pointer;
}
.sparky-update-cart:hover { border-color: var(--color-accent) !important; color: var(--color-text) !important; background: rgba(224,25,32,0.08) !important; }

/* right summary card */
.sparky-cart-summary { padding: 24px; }
.sparky-cart-summary .cart_totals { width: 100% !important; float: none !important; }
.sparky-cart-summary .cart_totals h2 { font-family: var(--font-heading); letter-spacing: .12em; text-transform: uppercase; font-size: .95rem; color: var(--color-text); margin: 0 0 16px; }
.sparky-cart-summary table.shop_table { background: transparent !important; border: 0 !important; }
.sparky-cart-summary table.shop_table td, .sparky-cart-summary table.shop_table th { border-top: 1px solid var(--color-border); padding: 12px 0; }
.sparky-cart-summary .order-total .amount { font-size: 1.2rem; }
.sparky-cart-summary .wc-proceed-to-checkout { padding: 18px 0 0; margin-top: auto; }
.sparky-cart-summary .wc-proceed-to-checkout a.checkout-button { width: 100%; }

@media (max-width: 880px) {
  .sparky-cart-grid { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 480px) {
  .sparky-cart-line { grid-template-columns: 64px 1fr; }
  .scl-thumb, .scl-thumb img { width: 64px; height: 64px; }
  .scl-figures { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; text-align: left; border-top: 1px solid var(--color-border); padding-top: 10px; min-width: 0; }
}
