/**
 * SurRonSkins WooCommerce Bridge Stylesheet
 *
 * Maps stock WooCommerce markup onto the SurRonSkins design system.
 * Base theme styles live in assets/css/site.css.
 * Sections below are filled by subsequent tasks.
 */

/* ========================================
   SHOP GRID
   ======================================== */

/* Reset only: Woo wraps loop items in <ul class="products"><li>. Mirrors
   .product-grid's grid-template/gap from assets/css/site.css so the layout
   matches the static shop grid. The card itself is unstyled here — site.css
   owns .product-card via the classes content-product.php ports. */
ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.4vw, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.products li.product {
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 1100px) {
  ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  ul.products {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 420px) {
  ul.products {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   SINGLE PRODUCT
   ======================================== */

/* Scope: single-product.php only. Maps WooCommerce's native variation-form
   markup (table.variations / .single_variation_wrap /
   .woocommerce-variation-add-to-cart / .quantity / .single_add_to_cart_button)
   onto the "Select finish" look already defined for .product-detail select
   in site.css, and onto the primary-CTA button look. Woo's own generated
   DOM (table rows, hidden wrap divs, wc-added classes like ".disabled") is
   left completely untouched structurally — wc-add-to-cart-variation.js
   depends on that exact class/structure contract to drive selection,
   pricing and the disabled state. Everything else on the single-product
   page (.product-gallery, .product-detail, .product-trust-strip,
   .product-included, .product-why, .product-tabs, etc.) already has full
   coverage in assets/css/site.css from the "PRODUCT PAGE PREMIUM UPGRADE"
   section, so no additional rules are needed for those. */

.product-add-to-cart {
  margin: 0.9rem 0 0.4rem;
}

.product-add-to-cart p.stock {
  display: inline-block;
  margin: 0 0 0.6rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.82rem;
}

.product-add-to-cart p.stock.out-of-stock {
  color: #ff6b6b;
}

.product-add-to-cart table.variations {
  width: 100%;
  margin-bottom: 0.4rem;
  border-collapse: collapse;
}

.product-add-to-cart table.variations tr {
  display: block;
  margin-bottom: 0.6rem;
}

.product-add-to-cart table.variations th.label {
  display: block;
  margin-bottom: 0.35rem;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
}

.product-add-to-cart table.variations td.value {
  display: block;
}

.product-add-to-cart table.variations select {
  width: 100%;
  min-height: 2.45rem;
  border: 1px solid var(--line);
  border-radius: 0.18rem;
  background: #151515;
  color: #fff;
  padding: 0.65rem;
  font-family: inherit;
  font-size: 0.9rem;
}

.product-add-to-cart .reset_variations {
  display: inline-block;
  margin-top: 0.4rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  text-decoration: underline;
}

.product-add-to-cart .woocommerce-variation-price {
  margin: 0.6rem 0;
  color: var(--accent);
  font-size: 1.35rem;
  font-weight: 800;
}

.product-add-to-cart .woocommerce-variation-price .amount {
  color: var(--accent);
}

.product-add-to-cart .woocommerce-variation-description p {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.product-add-to-cart .woocommerce-variation-availability .stock {
  font-size: 0.8rem;
}

.product-add-to-cart .woocommerce-variation-add-to-cart,
.product-add-to-cart form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.5rem;
}

.product-add-to-cart .quantity {
  display: block;
}

.product-add-to-cart .qty {
  width: 4.4rem;
  min-height: 3.5rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: #151515;
  color: #fff;
  text-align: center;
  font-family: inherit;
  font-size: 1rem;
}

.product-add-to-cart .single_add_to_cart_button {
  flex: 1;
  min-width: 10rem;
  min-height: 3.5rem;
  border: 0;
  border-radius: 0.5rem;
  background: var(--accent);
  color: #050505;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease, opacity 0.2s ease;
}

.product-add-to-cart .single_add_to_cart_button:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 12px 30px rgba(216, 255, 0, 0.22);
}

.product-add-to-cart .single_add_to_cart_button.disabled,
.product-add-to-cart .single_add_to_cart_button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Trust strip: site.css assumes the static page's 5 items
   (grid-template-columns: repeat(5, ...)); the owner-approved launch strip
   has 4, so re-column it here. Scoped to min-width 861px because this file
   loads AFTER site.css — an unconditional rule would also out-cascade
   site.css's max-width-860px 2-column mobile rule (which suits 4 items
   as 2x2 and must keep winning there). */
@media (min-width: 861px) {
  .product-trust-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* site.css's `.product-trust-strip div` flex rule out-specifies its own
   `.trust-copy` grid rule, so each item's title+subline share one flex row
   whose children can't shrink below word width (flex min-width:auto). That
   was invisible with the static site's short sublines but the longer
   owner-approved launch copy overflowed the viewport at mobile widths.
   Let the row wrap and long tokens (the support email) break. */
.product-trust-strip .trust-copy {
  flex-wrap: wrap;
}

.product-trust-strip .trust-copy b,
.product-trust-strip .trust-copy span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ========================================
   CART DRAWER (MINI-CART)
   ======================================== */

/* Scope: template-parts/cart-drawer.php only. That template's own wrapper
   classes (.cart-modal/.cart-backdrop/.cart-panel/.cart-head/.cart-close)
   are already fully styled by assets/css/site.css (ported from the static
   site's cartModal()) — nothing below redeclares those. This section only
   maps WooCommerce's own mini-cart markup (woocommerce_mini_cart() output:
   .woocommerce-mini-cart*, .widget_shopping_cart_content) onto that same
   dark-card design language, since Woo's template markup can't carry the
   theme's own class names. */

/* .cart-panel is a fixed-height flex column with overflow:hidden
   (assets/css/site.css) so the drawer never grows off-screen; this is the
   one child that actually scrolls when the basket is long. */
.widget_shopping_cart_content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.6rem clamp(1.1rem, 2.5vw, 1.6rem) clamp(1.1rem, 2.5vw, 1.6rem);
}

.woocommerce-mini-cart__empty-message {
  margin: 2.2rem 0;
  padding: 2.4rem 1rem;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
}

/* Maps to the same grid/gap as .cart-items (site.css) — can't apply that
   class directly since this <ul> is Woo core template markup. */
ul.woocommerce-mini-cart {
  display: grid;
  gap: 0.58rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Maps to the same card look as .cart-item (site.css), adapted to Woo's
   actual per-line child order (remove link, then a single <a> wrapping both
   thumbnail + name, then variation data, then qty x price) instead of the
   3-column img/info/action grid .cart-item assumes. */
li.woocommerce-mini-cart-item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 2.6rem 0.65rem 0.65rem;
  border: 1px solid rgba(216, 255, 0, 0.11);
  border-radius: 0.85rem;
  background:
    linear-gradient(90deg, rgba(216, 255, 0, 0.065), rgba(0, 0, 0, 0.36)),
    rgba(255, 255, 255, 0.018);
  transition: border-color 180ms var(--ease), background 180ms var(--ease);
}

li.woocommerce-mini-cart-item:hover {
  border-color: rgba(216, 255, 0, 0.28);
}

li.woocommerce-mini-cart-item > a:not(.remove) {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: 1 1 12rem;
  min-width: 0;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
}

li.woocommerce-mini-cart-item > a:not(.remove) img,
li.woocommerce-mini-cart-item > img {
  width: 4.4rem;
  height: 3.4rem;
  flex-shrink: 0;
  border-radius: 0.55rem;
  object-fit: cover;
  background: #090909;
}

li.woocommerce-mini-cart-item dl.variation {
  flex-basis: 100%;
  margin: 0.15rem 0 0 5.1rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.4rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.78rem;
  font-weight: 700;
}

li.woocommerce-mini-cart-item dl.variation dt,
li.woocommerce-mini-cart-item dl.variation dd {
  margin: 0;
  display: inline;
}

li.woocommerce-mini-cart-item dl.variation dd p {
  display: inline;
  margin: 0;
}

li.woocommerce-mini-cart-item .quantity {
  flex-basis: 100%;
  margin: 0.15rem 0 0 5.1rem;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 900;
}

li.woocommerce-mini-cart-item .quantity .amount {
  color: var(--accent);
}

li.woocommerce-mini-cart-item a.remove {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.58);
  font-size: 1.1rem;
  line-height: 1;
  text-decoration: none;
  transition: border-color 180ms var(--ease), color 180ms var(--ease), background 180ms var(--ease);
}

li.woocommerce-mini-cart-item a.remove:hover {
  border-color: rgba(216, 255, 0, 0.48);
  background: rgba(216, 255, 0, 0.08);
  color: #fff;
}

.woocommerce-mini-cart__total.total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0.9rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.woocommerce-mini-cart__total .woocommerce-Price-amount {
  color: var(--accent);
  font-size: 1.15rem;
}

.woocommerce-mini-cart__buttons.buttons {
  display: flex;
  gap: 0.6rem;
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
}

.woocommerce-mini-cart__buttons.buttons .button {
  flex: 1;
  min-height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 0.5rem;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition: transform 0.15s ease, filter 0.2s ease;
}

.woocommerce-mini-cart__buttons.buttons .button:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.woocommerce-mini-cart__buttons.buttons .button.wc-forward:not(.checkout) {
  border: 1px solid var(--line);
  background: transparent;
  color: #fff;
}

.woocommerce-mini-cart__buttons.buttons .button.checkout {
  border: 0;
  background: var(--accent);
  color: #050505;
}

/* Body scroll-lock while the drawer is open reuses the existing
   body.cart-open rule (assets/css/site.css:313, overflow:hidden) — that
   class was already defined for this exact static-site cart-modal purpose
   and otherwise unused, so main.js#initCartDrawer toggles it directly
   instead of a new, duplicate rule being added here. */

@media (prefers-reduced-motion: reduce) {
  .cart-panel {
    animation: none;
  }
}

/* ========================================
   CART PAGE
   ======================================== */

/* Scope: everywhere below is prefixed with the `.woocommerce-cart` BODY
   class WooCommerce itself adds only on the cart page (wc_body_class()).
   page.php's `.page-content` wrapper and Woo's own `.woocommerce` shortcode
   wrapper div are shared by every page.php-rendered page (Cart, Checkout,
   My Account all currently fall through to page.php), so an unscoped
   `.page-content`/`.woocommerce` rule would leak onto Checkout/My Account —
   the body-class prefix is what keeps this section cart-only, per the task
   brief's "do not style Checkout or My Account" boundary. Every class
   targeted past that prefix (.woocommerce-cart-form, table.shop_table.cart,
   .coupon, .cart_totals, .wc-proceed-to-checkout, .woocommerce-notices-wrapper
   / .woocommerce-message/-error/-info, .wc-empty-cart-message) is stock
   WooCommerce cart-template markup — no template override, CSS only. */

.woocommerce-cart .page-content {
  padding: clamp(1.2rem, 4vw, 3rem) clamp(1rem, 4vw, 4.25rem);
  background: #080808;
}

/* Woo's shortcode output is a flat `<div class="woocommerce">` containing
   (in source order) the notices wrapper, then either
   `.woocommerce-cart-form` + `.cart-collaterals` (filled cart) or just
   `.wc-empty-cart-message` (empty cart) as siblings — there's no wrapper
   element around the form+totals pair to apply a flex/grid layout to other
   than this shared parent, so the two-column layout is built here via
   explicit grid-column placement on the children below. */
.woocommerce-cart .woocommerce {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 24rem);
  align-items: start;
  gap: 0 2rem;
}

@media (max-width: 860px) {
  .woocommerce-cart .woocommerce {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* ---- Notices (added-to-cart / cart-update / coupon success or info) ---- */

.woocommerce-cart .woocommerce-notices-wrapper {
  grid-column: 1 / -1;
}

.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1.2rem;
  margin: 0 0 1rem;
  padding: 0.9rem 1.3rem;
  border: 1px solid rgba(216, 255, 0, 0.2);
  border-radius: 0.7rem;
  background: rgba(216, 255, 0, 0.05);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.4;
}

.woocommerce-cart .woocommerce-error {
  margin: 0 0 1rem;
  padding: 0.9rem 1.3rem;
  list-style: none;
  border: 1px solid rgba(255, 107, 107, 0.35);
  border-radius: 0.7rem;
  background: rgba(255, 107, 107, 0.07);
}

.woocommerce-cart .woocommerce-error li {
  color: #ffb3b3;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.4;
}

.woocommerce-cart .woocommerce-error li + li {
  margin-top: 0.45rem;
}

.woocommerce-cart .woocommerce-message a.button,
.woocommerce-cart .woocommerce-info a.button {
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  border-radius: 0.4rem;
  background: var(--accent);
  color: #050505;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

/* ---- Empty cart ---- */

.woocommerce-cart .wc-empty-cart-message {
  grid-column: 1 / -1;
  padding: 3.4rem 1.5rem;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.02);
  text-align: center;
}

.woocommerce-cart .cart-empty {
  margin: 0 0 1.3rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.05rem;
  font-weight: 700;
}

.woocommerce-cart .return-to-shop {
  margin: 0;
}

.woocommerce-cart .return-to-shop .button.wc-backward {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0 1.8rem;
  border: 0;
  border-radius: 0.5rem;
  background: var(--accent);
  color: #050505;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.15s ease, filter 0.2s ease;
}

.woocommerce-cart .return-to-shop .button.wc-backward:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

/* ---- Cart form / line items table ---- */

.woocommerce-cart .woocommerce-cart-form {
  grid-column: 1;
  min-width: 0;
}

.woocommerce-cart table.shop_table.cart {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0.6rem;
}

.woocommerce-cart table.shop_table.cart thead th {
  padding: 0 0.65rem 0.5rem;
  border: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: left;
}

.woocommerce-cart table.shop_table.cart thead th.product-remove,
.woocommerce-cart table.shop_table.cart thead th.product-thumbnail {
  width: 1%;
}

.woocommerce-cart table.shop_table.cart tbody tr.cart_item td {
  padding: 0.75rem 0.65rem;
  border-top: 1px solid rgba(216, 255, 0, 0.11);
  border-bottom: 1px solid rgba(216, 255, 0, 0.11);
  background:
    linear-gradient(90deg, rgba(216, 255, 0, 0.05), rgba(0, 0, 0, 0.3)),
    rgba(255, 255, 255, 0.016);
  vertical-align: middle;
}

.woocommerce-cart table.shop_table.cart tbody tr.cart_item td:first-child {
  border-left: 1px solid rgba(216, 255, 0, 0.11);
  border-top-left-radius: 0.7rem;
  border-bottom-left-radius: 0.7rem;
}

.woocommerce-cart table.shop_table.cart tbody tr.cart_item td:last-child {
  border-right: 1px solid rgba(216, 255, 0, 0.11);
  border-top-right-radius: 0.7rem;
  border-bottom-right-radius: 0.7rem;
}

.woocommerce-cart table.shop_table.cart td.product-remove {
  width: 2.6rem;
  text-align: center;
}

.woocommerce-cart table.shop_table.cart td.product-remove a.remove {
  display: inline-grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.58);
  font-size: 1.05rem;
  line-height: 1;
  text-decoration: none;
  transition: border-color 180ms var(--ease), color 180ms var(--ease), background 180ms var(--ease);
}

.woocommerce-cart table.shop_table.cart td.product-remove a.remove:hover {
  border-color: rgba(255, 107, 107, 0.5);
  background: rgba(255, 107, 107, 0.08);
  color: #ff6b6b;
}

.woocommerce-cart table.shop_table.cart td.product-thumbnail img {
  display: block;
  width: 4.4rem;
  height: 3.4rem;
  border-radius: 0.55rem;
  object-fit: cover;
  background: #090909;
}

.woocommerce-cart table.shop_table.cart td.product-name a {
  color: #fff;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.3;
  text-decoration: none;
}

.woocommerce-cart table.shop_table.cart td.product-name a:hover {
  color: var(--accent);
}

.woocommerce-cart table.shop_table.cart td.product-price,
.woocommerce-cart table.shop_table.cart td.product-subtotal {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
}

.woocommerce-cart table.shop_table.cart td.product-subtotal {
  color: var(--accent);
  font-weight: 900;
}

.woocommerce-cart table.shop_table.cart td.product-quantity .quantity {
  display: block;
}

.woocommerce-cart table.shop_table.cart td.product-quantity .qty {
  width: 4rem;
  min-height: 2.6rem;
  border: 1px solid var(--line);
  border-radius: 0.4rem;
  background: #151515;
  color: #fff;
  text-align: center;
  font-family: inherit;
  font-size: 0.9rem;
}

/* Actions row: coupon form + manual "Update cart" fallback button. Woo's
   own cart.js enables/disables #update_cart automatically as quantity
   inputs change; the styling here just covers both states. */
.woocommerce-cart table.shop_table.cart td.actions {
  padding: 0.9rem 0.2rem 0.2rem;
  border: 0;
  background: none;
}

.woocommerce-cart .coupon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.9rem;
}

.woocommerce-cart .coupon #coupon_code {
  min-height: 2.6rem;
  min-width: 10rem;
  border: 1px solid var(--line);
  border-radius: 0.4rem;
  background: #151515;
  color: #fff;
  padding: 0 0.75rem;
  font-family: inherit;
  font-size: 0.85rem;
}

.woocommerce-cart .coupon #coupon_code.has-error {
  border-color: rgba(255, 107, 107, 0.6);
}

.woocommerce-cart .coupon-error-notice {
  flex-basis: 100%;
  margin: 0;
  color: #ff8b8b;
  font-size: 0.8rem;
  font-weight: 600;
}

.woocommerce-cart .coupon button.button,
.woocommerce-cart button.button[name="update_cart"] {
  min-height: 2.6rem;
  padding: 0 1.3rem;
  border: 1px solid var(--line);
  border-radius: 0.4rem;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 180ms var(--ease), background 180ms var(--ease);
}

.woocommerce-cart .coupon button.button:hover,
.woocommerce-cart button.button[name="update_cart"]:not(:disabled):hover {
  border-color: var(--accent);
  background: rgba(216, 255, 0, 0.08);
}

.woocommerce-cart button.button[name="update_cart"]:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.woocommerce-cart button.button[name="update_cart"] {
  margin-top: 0.2rem;
}

/* ---- Cart totals / proceed to checkout ---- */

.woocommerce-cart .cart-collaterals {
  grid-column: 2;
}

@media (max-width: 860px) {
  .woocommerce-cart .cart-collaterals {
    grid-column: 1;
    margin-top: 1.4rem;
  }
}

.woocommerce-cart .cart_totals {
  padding: 1.3rem 1.4rem 1.5rem;
  border: 1px solid rgba(216, 255, 0, 0.14);
  border-radius: 0.9rem;
  background: #111311;
}

.woocommerce-cart .cart_totals h2 {
  margin: 0 0 0.9rem;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.woocommerce-cart .cart_totals table.shop_table {
  width: 100%;
  border-collapse: collapse;
}

.woocommerce-cart .cart_totals table.shop_table tr th,
.woocommerce-cart .cart_totals table.shop_table tr td {
  padding: 0.55rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.86rem;
  font-weight: 600;
  text-align: left;
}

.woocommerce-cart .cart_totals table.shop_table tr:first-child th,
.woocommerce-cart .cart_totals table.shop_table tr:first-child td {
  border-top: 0;
}

.woocommerce-cart .cart_totals table.shop_table td {
  text-align: right;
}

.woocommerce-cart .cart_totals table.shop_table tr.order-total th,
.woocommerce-cart .cart_totals table.shop_table tr.order-total td {
  color: #fff;
  font-size: 0.98rem;
  font-weight: 900;
}

.woocommerce-cart .cart_totals table.shop_table tr.order-total .woocommerce-Price-amount {
  color: var(--accent);
}

.woocommerce-cart .wc-proceed-to-checkout {
  margin-top: 1.1rem;
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.4rem;
  border: 0;
  border-radius: 0.5rem;
  background: var(--accent);
  color: #050505;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition: transform 0.15s ease, filter 0.2s ease;
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

/* ---- Mobile: stacked card rows for the classic cart table ----
   Woo's own cart.php template already renders data-title="Product" /
   "Price" / "Quantity" / "Subtotal" attributes on every td that needs a
   label when stacked (this is stock core markup, present specifically so
   themes can do exactly this without a template override) — cart_totals'
   table carries the same attribute on its Subtotal/Total cells. */
@media (max-width: 860px) {
  .woocommerce-cart table.shop_table.cart thead {
    display: none;
  }

  .woocommerce-cart table.shop_table.cart,
  .woocommerce-cart table.shop_table.cart tbody,
  .woocommerce-cart table.shop_table.cart tr.cart_item {
    display: block;
    width: 100%;
  }

  .woocommerce-cart table.shop_table.cart tr.cart_item {
    margin-bottom: 0.7rem;
  }

  .woocommerce-cart table.shop_table.cart tr.cart_item td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    width: auto;
    border-left: 1px solid rgba(216, 255, 0, 0.11);
    border-right: 1px solid rgba(216, 255, 0, 0.11);
    border-radius: 0;
  }

  .woocommerce-cart table.shop_table.cart tr.cart_item td:first-child {
    border-top-right-radius: 0.7rem;
    padding-top: 0.9rem;
  }

  .woocommerce-cart table.shop_table.cart tr.cart_item td:last-child {
    border-top: 0;
    border-bottom-right-radius: 0.7rem;
    padding-bottom: 0.9rem;
  }

  .woocommerce-cart table.shop_table.cart td[data-title]::before {
    content: attr(data-title);
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .woocommerce-cart table.shop_table.cart td.product-remove {
    justify-content: flex-end;
  }

  .woocommerce-cart table.shop_table.cart td.product-remove::before {
    content: "";
  }

  .woocommerce-cart table.shop_table.cart td.product-thumbnail {
    justify-content: flex-start;
  }

  .woocommerce-cart table.shop_table.cart td.product-thumbnail::before {
    content: "";
  }

  /* Product names can run long ("TEST KIT - DELETE IN PHASE 4 - Gloss"),
     so this row keeps its label+value packed together on the left instead
     of the space-between split every other row uses — pushing a long name
     to the far right edge would crowd the card border. */
  .woocommerce-cart table.shop_table.cart td.product-name {
    justify-content: flex-start;
  }

  .woocommerce-cart table.shop_table.cart td.actions {
    display: block;
    border: 0;
  }

  .woocommerce-cart .coupon {
    flex-direction: column;
    align-items: stretch;
  }

  .woocommerce-cart .coupon #coupon_code {
    width: 100%;
  }

  .woocommerce-cart button.button[name="update_cart"] {
    width: 100%;
  }

  /* cart_totals rows already carry their own visible <th> label (e.g.
     "Subtotal"/"Total") inline with the value — unlike the line-items
     table's thead-only labels, so this just lays th+td out as a
     label/value row instead of re-adding attr(data-title), which would
     duplicate the label. */
  .woocommerce-cart .cart_totals table.shop_table tr th,
  .woocommerce-cart .cart_totals table.shop_table tr td {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

/* ========================================
   CHECKOUT
   ======================================== */

.woocommerce-checkout .page-content,
.woocommerce-account .page-content {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 3rem 0 5rem;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .woocommerce-form-login-toggle {
  margin-bottom: 1rem;
}

.woocommerce-checkout .woocommerce-info,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
  padding: 1rem 1.1rem;
  border: 1px solid rgba(216, 255, 0, 0.2);
  border-left: 3px solid var(--accent);
  border-radius: 0.55rem;
  background: #111311;
  color: rgba(255, 255, 255, 0.75);
  list-style: none;
}

.woocommerce-checkout .woocommerce-info a,
.woocommerce-account .woocommerce-message a,
.woocommerce-account .woocommerce-info a {
  color: var(--accent);
  font-weight: 800;
}

.woocommerce-checkout form.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
  gap: 2rem;
  align-items: start;
}

.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
  min-width: 0;
}

.woocommerce-checkout #customer_details {
  grid-row: 1 / span 2;
}

.woocommerce-checkout #order_review_heading {
  grid-column: 2;
  margin: 0;
  padding: 1.3rem 1.4rem 0;
  border: 1px solid rgba(216, 255, 0, 0.14);
  border-bottom: 0;
  border-radius: 0.9rem 0.9rem 0 0;
  background: #111311;
  color: #fff;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.woocommerce-checkout #order_review {
  grid-column: 2;
  margin-top: -2rem;
  padding: 1rem 1.4rem 1.4rem;
  border: 1px solid rgba(216, 255, 0, 0.14);
  border-top: 0;
  border-radius: 0 0 0.9rem 0.9rem;
  background: #111311;
}

.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
  padding: 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.9rem;
  background: #0f100f;
}

.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
  margin-top: 1rem;
}

.woocommerce-checkout h3 {
  margin: 0 0 1.1rem;
  color: #fff;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.woocommerce-checkout .form-row,
.woocommerce-account .form-row {
  margin: 0 0 1rem;
}

.woocommerce-checkout .form-row label,
.woocommerce-account .form-row label {
  display: block;
  margin-bottom: 0.4rem;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea,
.woocommerce-checkout select,
.woocommerce-account input.input-text,
.woocommerce-account textarea,
.woocommerce-account select {
  width: 100%;
  min-height: 3rem;
  box-sizing: border-box;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.45rem;
  background: #090a09;
  color: #fff;
  font: inherit;
}

.woocommerce-checkout textarea,
.woocommerce-account textarea {
  min-height: 7rem;
  resize: vertical;
}

.woocommerce-checkout input:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus,
.woocommerce-account input:focus,
.woocommerce-account textarea:focus,
.woocommerce-account select:focus {
  border-color: var(--accent);
  outline: 2px solid rgba(216, 255, 0, 0.12);
}

.woocommerce-checkout table.shop_table,
.woocommerce-account table.shop_table {
  width: 100%;
  border-collapse: collapse;
}

.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td,
.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td {
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.84rem;
  text-align: left;
}

.woocommerce-checkout table.shop_table td:last-child,
.woocommerce-checkout table.shop_table th:last-child {
  text-align: right;
}

.woocommerce-checkout .order-total th,
.woocommerce-checkout .order-total td {
  color: #fff !important;
  font-size: 0.98rem !important;
  font-weight: 900;
}

.woocommerce-checkout #payment {
  margin-top: 1.2rem;
}

.woocommerce-checkout .wc_payment_methods {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.woocommerce-checkout .payment_box {
  margin: 0.7rem 0;
  padding: 0.85rem;
  border-radius: 0.45rem;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.8rem;
}

.woocommerce-checkout #place_order,
.woocommerce-account button.button,
.woocommerce-account a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.2rem;
  padding: 0.75rem 1.25rem;
  border: 0;
  border-radius: 0.45rem;
  background: var(--accent);
  color: #050505;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}

.woocommerce-checkout #place_order {
  width: 100%;
}

@media (max-width: 860px) {
  .woocommerce-checkout form.checkout {
    grid-template-columns: 1fr;
  }

  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review {
    grid-column: 1;
    grid-row: auto;
  }

  .woocommerce-checkout #order_review {
    margin-top: -2rem;
  }
}

/* ========================================
   ACCOUNT (GARAGE)
   ======================================== */

.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
  overflow: hidden;
  border: 1px solid rgba(216, 255, 0, 0.14);
  border-radius: 0.75rem;
  background: #101210;
}

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

.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: block;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}

.woocommerce-account .woocommerce-MyAccount-navigation li:last-child a {
  border-bottom: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation .is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
  background: rgba(216, 255, 0, 0.08);
  color: var(--accent);
}

.woocommerce-account .woocommerce-MyAccount-content {
  min-width: 0;
  padding: 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.9rem;
  background: #0f100f;
  color: rgba(255, 255, 255, 0.72);
}

.woocommerce-account .woocommerce-MyAccount-content a:not(.button) {
  color: var(--accent);
}

@media (max-width: 720px) {
  .woocommerce-account .woocommerce {
    grid-template-columns: 1fr;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex;
    overflow-x: auto;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation li {
    flex: 0 0 auto;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation a {
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    border-bottom: 0;
    white-space: nowrap;
  }
}

/* ========================================
   LOGIN/REGISTER
   ======================================== */

.woocommerce-account:not(.logged-in) .woocommerce {
  display: block;
  width: min(540px, 100%);
  margin: 0 auto;
}

.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
  padding: 1.5rem;
  border: 1px solid rgba(216, 255, 0, 0.15);
  border-radius: 0.9rem;
  background: #101210;
}

.woocommerce-account .woocommerce-form-login .woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  text-transform: none;
}

.woocommerce-account .woocommerce-form-login input[type="checkbox"] {
  width: auto;
  min-height: auto;
}

.woocommerce-account .lost_password {
  margin: 1rem 0 0;
}

/* ========================================
   PRE-LAUNCH / COMING SOON CATALOGUE
   ======================================== */

.footer-card-grid.footer-card-grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ss-coming-soon-section {
  padding-top: clamp(3rem, 7vw, 6rem);
  padding-bottom: clamp(3rem, 7vw, 6rem);
}

.ss-coming-soon-art {
  display: block;
  overflow: hidden;
  width: min(1200px, calc(100% - 2rem));
  margin: 0 auto;
  border: 1px solid rgba(216, 255, 0, 0.32);
  background: #050505;
}

.ss-coming-soon-art img,
.ss-coming-soon-page > img {
  display: block;
  width: 100%;
  height: auto;
}

.ss-coming-soon-page {
  width: min(1320px, calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 6rem) 0;
}

.ss-coming-soon-copy {
  width: min(760px, 100%);
  margin-bottom: 2rem;
}

.ss-coming-soon-copy h1 {
  margin: 0.3rem 0 1rem;
  color: #fff;
  font-size: clamp(2.5rem, 7vw, 6rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.ss-coming-soon-copy > p:last-child {
  width: min(640px, 100%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
  line-height: 1.6;
}

.ss-coming-soon-page > img {
  border: 1px solid rgba(216, 255, 0, 0.32);
}

@media (max-width: 760px) {
  .footer-card-grid.footer-card-grid-three {
    grid-template-columns: 1fr;
  }

  .ss-coming-soon-art,
  .ss-coming-soon-page {
    width: min(100% - 1rem, 1320px);
  }
}