/*
 * woocommerce.css — Premium WooCommerce Layer
 * USBType-C child theme — loaded AFTER premium.css (depends on it)
 * Scope: Single product, shop/category archives, cart, checkout.
 * All colour/spacing values use design-token vars from design-tokens.css.
 * No emoji; SVG-only icons; ≥44px touch targets; aspect-ratio on images.
 */

/* =====================================================================
   CUSTOM PROPERTIES — WooCommerce-specific tokens
   (extend the global design-tokens.css layer)
   ===================================================================== */

:root {
  --woo-card-radius:   var(--radius-lg, 12px);
  --woo-card-bg:       #ffffff;
  --woo-card-border:   var(--border, #E5E5E5);
  --woo-card-shadow:   var(--shadow-md, 0 4px 12px rgba(0,0,0,0.06));
  --woo-card-shadow-hover: 0 12px 32px rgba(0,0,0,0.12);
  --woo-input-height:  48px;
  --woo-input-radius:  var(--radius-md, 8px);
  --woo-input-border:  var(--border-strong, #D4D4D4);
  --woo-input-focus:   var(--accent-2, #0048FF);
  --woo-tab-active:    var(--accent-2, #0048FF);
  --woo-badge-bg:      var(--badge-sale, #E3163B);
  --woo-badge-new:     var(--accent-2, #0048FF);
}

/* =====================================================================
   1. SHOP / CATEGORY ARCHIVE
   /store/, /product-category/*/
   ===================================================================== */

/* ---- Archive title band ---- */
body.post-type-archive-product .entry-header,
body.tax-product_cat .entry-header,
.woocommerce-archive .entry-header,
.woocommerce .page-title-wrap {
  background-color: #0A0A0A;
  color: #ffffff;
  padding: 48px 0;
  margin-bottom: var(--space-xl, 40px);
  text-align: center;
}

body.post-type-archive-product .entry-header .entry-title,
body.tax-product_cat .entry-header .entry-title,
.woocommerce-archive .entry-header h1,
.woocommerce .page-title-wrap .entry-title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff !important;
  margin-bottom: var(--space-xs, 4px);
}

body.post-type-archive-product .entry-header .woocommerce-result-count,
body.tax-product_cat .entry-header .woocommerce-result-count {
  color: rgba(255,255,255,0.65);
  font-size: 0.875rem;
  font-weight: 400;
}

/* Breadcrumb in title band */
.woocommerce-breadcrumb,
.ct-breadcrumbs {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: var(--space-lg, 24px);
}

.woocommerce-breadcrumb a,
.ct-breadcrumbs a {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
}

.woocommerce-breadcrumb a:hover,
.ct-breadcrumbs a:hover {
  color: #ffffff;
}

/* Archive title band selector for actual WC archive headers — high specificity override */
[data-prefix="woo_categories"] .hero-section,
[data-prefix="woo_categories"] .hero-section[data-type],
body[data-prefix="woo_categories"] .hero-section,
body.post-type-archive-product .hero-section,
body.tax-product_cat .hero-section {
  background-color: #0A0A0A !important;
  background-image: none !important;
  padding: 48px 0 !important;
  text-align: center;
  border-bottom: none;
  color: #ffffff;
  --container-padding: 48px 0 !important;
}

[data-prefix="woo_categories"] .hero-section .page-title,
body.post-type-archive-product .hero-section .page-title,
body.tax-product_cat .hero-section .page-title,
[data-prefix="woo_categories"] .entry-header .page-title {
  font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  color: #ffffff !important;
  margin-bottom: var(--space-xs, 4px);
}

[data-prefix="woo_categories"] .entry-header,
body.post-type-archive-product .entry-header {
  color: #ffffff;
}

/* ---- Toolbar: result count + sort ---- */
.woocommerce-result-count {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #737373);
  margin: 0;
}

.woocommerce-ordering {
  margin: 0;
}

.woocommerce-ordering select,
.orderby {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--woo-card-bg);
  border: 1px solid var(--woo-input-border);
  border-radius: var(--woo-input-radius);
  padding: 0.5rem 2.5rem 0.5rem 0.875rem;
  font-family: var(--font-primary, 'DM Sans', sans-serif);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text, #0A0A0A);
  cursor: pointer;
  min-height: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
  background-size: 1rem;
  transition: border-color var(--transition-fast, 150ms ease),
              box-shadow var(--transition-fast, 150ms ease);
}

.woocommerce-ordering select:hover,
.orderby:hover {
  border-color: var(--accent-2, #0048FF);
}

.woocommerce-ordering select:focus-visible,
.orderby:focus-visible {
  outline: 2px solid var(--accent-2, #0048FF);
  outline-offset: 2px;
  border-color: var(--accent-2, #0048FF);
}

.woo-listing-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md, 16px);
  margin-bottom: var(--space-lg, 24px);
  padding-bottom: var(--space-md, 16px);
  border-bottom: 1px solid var(--border, #E5E5E5);
  flex-wrap: wrap;
}

/* ---- Product grid ---- */
/* These selectors set display:grid + gap but had NO grid-template-columns,
   so the shop/category archive collapsed to a single implicit column on
   desktop (giant stacked category tiles). Define responsive columns:
   2 (mobile) → 3 (tablet) → 4 (desktop). Related-products keeps its own
   more-specific column rules. */
.woocommerce ul.products,
[data-products] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg, 24px);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .woocommerce ul.products,
  [data-products] {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .woocommerce ul.products,
  [data-products] {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---- Product card ---- */
.woocommerce ul.products li.product,
[data-products] .product {
  position: relative;
  background-color: var(--woo-card-bg);
  border: 1px solid var(--woo-card-border);
  border-radius: var(--woo-card-radius);
  box-shadow: var(--woo-card-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform var(--transition-base, 200ms ease),
    box-shadow var(--transition-base, 200ms ease);
  will-change: transform;
}

.woocommerce ul.products li.product:hover,
[data-products] .product:hover {
  transform: translateY(-4px);
  box-shadow: var(--woo-card-shadow-hover);
}

/* ---- Card image container ---- */
.woocommerce ul.products li.product .ct-media-container,
[data-products] .product .ct-media-container {
  display: block;
  overflow: hidden;
  background-color: var(--surface, #F8F8F8);
  aspect-ratio: 1 / 1;
  border-radius: var(--woo-card-radius) var(--woo-card-radius) 0 0;
}

.woocommerce ul.products li.product figure,
[data-products] .product figure {
  margin: 0;
  overflow: hidden;
}

.woocommerce ul.products li.product figure img,
[data-products] .product figure img,
.woocommerce ul.products li.product .ct-media-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  aspect-ratio: 1 / 1;
  transition: transform var(--transition-slow, 300ms ease);
}

.woocommerce ul.products li.product:hover figure img,
[data-products] .product:hover figure img,
.woocommerce ul.products li.product:hover .ct-media-container img {
  transform: scale(1.04);
}

/* ---- Card body / text area ---- */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-category__title,
[data-products] .woocommerce-loop-product__title,
[data-products] .woocommerce-loop-category__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--accent, #0A0A0A);
  line-height: 1.35;
  /* 2-line clamp */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-decoration: none;
  padding: var(--space-md, 16px) var(--space-md, 16px) 0;
  margin: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title a,
[data-products] .woocommerce-loop-product__title a {
  color: inherit;
  text-decoration: none;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title a:hover,
[data-products] .woocommerce-loop-product__title a:hover {
  color: var(--accent-2, #0048FF);
}

/* ---- Card price ---- */
.woocommerce ul.products li.product .price,
[data-products] .product .price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent, #0A0A0A);
  padding: var(--space-xs, 4px) var(--space-md, 16px) 0;
  display: block;
}

.woocommerce ul.products li.product .price del,
[data-products] .product .price del {
  font-weight: 400;
  color: var(--muted, #737373);
  font-size: 0.875rem;
}

.woocommerce ul.products li.product .price ins,
[data-products] .product .price ins {
  text-decoration: none;
  color: var(--badge-sale, #E3163B);
  font-weight: 700;
}

/* ---- Card meta (categories) ---- */
.woocommerce ul.products li.product .entry-meta,
[data-products] .product .entry-meta {
  padding: 0 var(--space-md, 16px);
  font-size: 0.75rem;
  color: var(--muted, #737373);
}

.woocommerce ul.products li.product .entry-meta a,
[data-products] .product .entry-meta a {
  color: var(--muted, #737373);
  text-decoration: none;
}

.woocommerce ul.products li.product .entry-meta a:hover,
[data-products] .product .entry-meta a:hover {
  color: var(--accent-2, #0048FF);
}

/* ---- Card actions area ---- */
.woocommerce ul.products li.product .ct-woo-card-actions,
[data-products] .ct-woo-card-actions {
  padding: var(--space-md, 16px);
  margin-top: auto;
}

/* On-sale badge */
.woocommerce ul.products li.product .onsale,
[data-products] .product .onsale,
.woocommerce span.onsale {
  position: absolute;
  top: var(--space-sm, 8px);
  left: var(--space-sm, 8px);
  background-color: var(--woo-badge-bg, #E3163B);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-full, 9999px);
  z-index: 2;
  line-height: 1.4;
  margin: 0;
  min-width: unset;
  min-height: unset;
}

/* =====================================================================
   2. SINGLE PRODUCT PAGE
   /product/<slug>/
   ===================================================================== */

/* ---- Product layout wrapper ---- */
.single-product .product-entry-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl, 64px);
  align-items: start;
  padding-top: var(--space-xl, 40px);
}

/* ---- Gallery column ---- */
.single-product .woocommerce-product-gallery {
  position: sticky;
  top: 100px;
}

/* ---- Main gallery image ---- */
.woocommerce-product-gallery .ct-product-gallery-container {
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  background-color: var(--surface, #F8F8F8);
}

/* P2-3: standardise main image — 1:1 square, object-fit:contain (no gray gap) */
.woocommerce-product-gallery .flexy-item:first-child img,
.woocommerce-product-gallery figure img.wp-post-image,
.woocommerce-product-gallery .woocommerce-product-gallery__image img,
.woocommerce-product-gallery .wp-post-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
  border-radius: var(--radius-lg, 12px);
  background-color: var(--surface, #F8F8F8);
  /* Hover magnify cursor — CSS-only, no JS */
  cursor: zoom-in;
}

/* P2-3: Thumbnail rail — 72×72, active ring 2px #0048FF */
.woocommerce-product-gallery .flexy-item:not(:first-child) img,
.woocommerce-product-gallery .ct-product-gallery-thumbnails img,
.woocommerce-product-gallery .woocommerce-product-gallery__image:not(:first-child) img {
  width: 72px;
  height: 72px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: var(--radius-md, 8px);
  border: 2px solid var(--border, #E5E5E5);
  cursor: pointer;
  background-color: var(--surface, #F8F8F8);
  transition:
    border-color var(--transition-fast, 150ms ease),
    box-shadow var(--transition-fast, 150ms ease);
}

.woocommerce-product-gallery .flexy-item:not(:first-child):hover img,
.woocommerce-product-gallery .ct-product-gallery-thumbnails .flex-active img,
.woocommerce-product-gallery .woocommerce-product-gallery__image:not(:first-child):hover img,
.woocommerce-product-gallery .woocommerce-product-gallery__image.flex-active img {
  border-color: var(--accent-2, #0048FF);
  box-shadow: 0 0 0 1px var(--accent-2, #0048FF);
}

/* ---- Product title ---- */
.single-product .entry-summary .entry-title,
.single-product h1.product_title {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--accent, #0A0A0A);
  margin: 0 0 var(--space-md, 16px);
}

/* ---- Price — large + brand-weighted ---- */
.single-product .entry-summary .price,
.single-product .summary .price {
  font-size: 1.875rem;
  font-weight: 800;
  color: var(--accent, #0A0A0A);
  line-height: 1.1;
  display: flex;
  align-items: baseline;
  gap: var(--space-sm, 8px);
  flex-wrap: wrap;
}

.single-product .entry-summary .price del,
.single-product .summary .price del {
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--muted, #737373);
}

.single-product .entry-summary .price ins,
.single-product .summary .price ins {
  text-decoration: none;
  color: var(--badge-sale, #E3163B);
}

/* ---- Short description — P2-4: clean bullets ---- */
.single-product .woocommerce-product-details__short-description {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-secondary, #404040);
}

.single-product .woocommerce-product-details__short-description ul {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
}

.single-product .woocommerce-product-details__short-description li {
  position: relative;
  padding-left: 1.375rem;
  margin-bottom: 0.375rem;
}

/* Blue check-mark bullet */
.single-product .woocommerce-product-details__short-description li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 10px;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%230048FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* ---- Variation selects (Color, Size) ---- */
.single-product .variations select,
.single-product .variation-selector select,
.woocommerce-variation-add-to-cart select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: var(--woo-input-height, 48px);
  padding: 0 2.75rem 0 1rem;
  border: 1.5px solid var(--woo-input-border, #D4D4D4);
  border-radius: var(--woo-input-radius, 8px);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
  font-family: var(--font-primary, 'DM Sans', sans-serif);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text, #0A0A0A);
  cursor: pointer;
  transition:
    border-color var(--transition-fast, 150ms ease),
    box-shadow var(--transition-fast, 150ms ease);
}

.single-product .variations select:hover,
.woocommerce-variation-add-to-cart select:hover {
  border-color: var(--accent-2, #0048FF);
}

.single-product .variations select:focus-visible,
.woocommerce-variation-add-to-cart select:focus-visible {
  outline: 2px solid var(--accent-2, #0048FF);
  outline-offset: 2px;
  border-color: var(--accent-2, #0048FF);
  box-shadow: 0 0 0 4px rgba(0, 72, 255, 0.1);
}

/* ---- Variation label ---- */
.single-product .variations label,
.single-product table.variations td label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary, #404040);
  margin-bottom: var(--space-xs, 4px);
  display: block;
}

.single-product table.variations,
.single-product .variations {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-md, 16px);
}

.single-product table.variations td,
.single-product table.variations th {
  padding: var(--space-xs, 4px) 0;
  vertical-align: middle;
  border: none;
}

.single-product table.variations td.label {
  padding-right: var(--space-sm, 8px);
  white-space: nowrap;
  width: 1%;
}

/* ---- Reset variation link ---- */
.single-product .reset_variations {
  font-size: 0.8125rem;
  color: var(--muted, #737373);
  text-decoration: underline;
  cursor: pointer;
  display: inline-block;
  margin-top: var(--space-xs, 4px);
}

.single-product .reset_variations:hover {
  color: var(--accent-2, #0048FF);
}

/* ---- Quantity stepper ---- */
.woocommerce .quantity,
.single-product .quantity {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--woo-input-border, #D4D4D4);
  border-radius: var(--woo-input-radius, 8px);
  overflow: hidden;
  background-color: #fff;
  height: var(--woo-input-height, 48px);
}

.woocommerce .quantity input[type="number"],
.single-product .quantity input[type="number"],
.woocommerce input.qty {
  width: 56px;
  height: 100%;
  border: none;
  border-left: 1px solid var(--border, #E5E5E5);
  border-right: 1px solid var(--border, #E5E5E5);
  text-align: center;
  font-family: var(--font-primary, 'DM Sans', sans-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text, #0A0A0A);
  background: transparent;
  padding: 0;
  -moz-appearance: textfield;
  appearance: textfield;
  outline: none;
}

.woocommerce .quantity input[type="number"]::-webkit-inner-spin-button,
.woocommerce .quantity input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

/* Quantity +/- buttons (Blocksy injects data-type="type-2") */
.quantity[data-type] .quantity-btn,
.quantity .quantity-plus,
.quantity .quantity-minus,
.quantity button {
  width: 44px;
  height: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-secondary, #404040);
  cursor: pointer;
  font-size: 1.25rem;
  font-weight: 400;
  transition: background-color var(--transition-fast, 150ms ease),
              color var(--transition-fast, 150ms ease);
  padding: 0;
  line-height: 1;
}

.quantity[data-type] .quantity-btn:hover,
.quantity .quantity-plus:hover,
.quantity .quantity-minus:hover,
.quantity button:hover {
  background-color: var(--surface, #F8F8F8);
  color: var(--accent-2, #0048FF);
}

/* ---- Add to cart button — full-width on desktop, 100% on mobile ---- */
.single-product .single_add_to_cart_button,
.single-product form.cart .single_add_to_cart_button {
  flex: 1;
  min-height: var(--woo-input-height, 48px);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  background-color: var(--accent-2, #0048FF) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-md, 8px) !important;
  cursor: pointer;
  transition:
    background-color var(--transition-fast, 150ms ease),
    transform var(--transition-fast, 150ms ease),
    box-shadow var(--transition-fast, 150ms ease);
}

.single-product .single_add_to_cart_button:hover,
.single-product form.cart .single_add_to_cart_button:hover {
  background-color: #0039CC !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 72, 255, 0.3) !important;
}

.single-product .single_add_to_cart_button:active {
  background-color: #002FA6 !important;
  transform: translateY(0);
  box-shadow: none !important;
}

/* Cart row: quantity + button side by side */
.single-product form.cart {
  display: flex;
  align-items: center;
  gap: var(--space-md, 16px);
  flex-wrap: wrap;
}

/* ---- P1-2: Price rule separator under buy zone ---- */
.single-product .woocommerce-variation-price,
.single-product .entry-summary > .price {
  padding-bottom: var(--space-md, 16px);
  margin-bottom: var(--space-md, 16px);
  border-bottom: 1px solid #E5E5E5;
}

/* ---- P1-2: Enhanced Add-to-cart (product page) ---- */
.single-product .single_add_to_cart_button,
.single-product form.cart .single_add_to_cart_button {
  min-height: 52px !important;
  padding: 14px 32px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
}

/* ---- P1-2: Trust row under add-to-cart ---- */
.single-product form.cart {
  flex-wrap: wrap;
}

.product-trust-row {
  display: flex;
  align-items: center;
  gap: var(--space-lg, 24px);
  flex-wrap: wrap;
  margin-top: var(--space-md, 16px);
  padding-top: var(--space-md, 16px);
  width: 100%;
  font-size: 0.75rem;
  color: var(--muted, #737373);
  line-height: 1.4;
}

.product-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.product-trust-item svg {
  flex-shrink: 0;
  color: var(--accent-2, #0048FF);
}

/* ---- P1-2: Product title clamp ---- */
.single-product .entry-summary .entry-title,
.single-product h1.product_title {
  font-size: clamp(22px, 2vw, 30px) !important;
  font-weight: 600 !important;
}

/* ---- P1-2: Price clamp ---- */
.single-product .entry-summary .price,
.single-product .summary .price {
  font-size: clamp(26px, 2.5vw, 36px) !important;
  font-weight: 700 !important;
}

/* ---- Product meta (SKU, categories) — P2-4 ---- */
.single-product .product_meta {
  padding-top: var(--space-md, 16px);
  border-top: 1px solid var(--border, #E5E5E5);
  font-size: 0.8125rem;
  color: var(--muted, #737373);
  line-height: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

.single-product .product_meta .sku_wrapper,
.single-product .product_meta .posted_in,
.single-product .product_meta .tagged_as {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}

/* P2-4: SKU as subtle product-code badge */
.single-product .product_meta .sku {
  font-family: var(--font-mono, 'SF Mono', 'Monaco', monospace);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary, #404040);
  background: var(--surface, #F8F8F8);
  border: 1px solid var(--border, #E5E5E5);
  border-radius: var(--radius-sm, 4px);
  padding: 1px 6px;
  letter-spacing: 0.04em;
}

.single-product .product_meta .sku_wrapper .sku_label,
.single-product .product_meta .posted_in .posted_in_label {
  font-weight: 600;
  color: var(--muted, #737373);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* P2-4: Category links as clickable outline pills */
.single-product .product_meta a {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border: 1px solid var(--accent-2, #0048FF);
  border-radius: var(--radius-full, 9999px);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-2, #0048FF);
  text-decoration: none;
  background: transparent;
  transition:
    background-color var(--transition-fast, 150ms ease),
    color var(--transition-fast, 150ms ease);
}

.single-product .product_meta a:hover {
  background-color: var(--accent-2, #0048FF);
  color: #fff;
  text-decoration: none;
}

/* ---- Tabs — Description / Additional Info / Reviews ---- */
.woocommerce-tabs {
  margin-top: var(--space-2xl, 64px);
  padding-top: var(--space-lg, 24px);
  border-top: 1px solid var(--border, #E5E5E5);
}

.woocommerce-tabs .tabs {
  display: flex;
  gap: 0;
  list-style: none;
  margin: 0 0 0;
  padding: 0;
  border-bottom: 2px solid var(--border, #E5E5E5);
}

.woocommerce-tabs .tabs li {
  margin: 0;
}

.woocommerce-tabs .tabs li a {
  display: block;
  padding: var(--space-md, 16px) var(--space-lg, 24px);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #737373);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition:
    color var(--transition-fast, 150ms ease),
    border-color var(--transition-fast, 150ms ease);
  white-space: nowrap;
}

.woocommerce-tabs .tabs li a:hover {
  color: var(--accent-2, #0048FF);
  border-bottom-color: var(--accent-2, #0048FF);
}

.woocommerce-tabs .tabs li.active a {
  color: var(--accent-2, #0048FF);
  border-bottom-color: var(--accent-2, #0048FF);
}

/* Tab content panels */
.woocommerce-tabs .woocommerce-Tabs-panel {
  padding: var(--space-xl, 40px) 0 var(--space-lg, 24px);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-secondary, #404040);
}

.woocommerce-tabs .woocommerce-Tabs-panel h2 {
  display: none;
}

/* Attributes table in Additional Info tab */
.woocommerce-product-attributes {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.woocommerce-product-attributes-item {
  border-bottom: 1px solid var(--border, #E5E5E5);
}

.woocommerce-product-attributes-item__label {
  font-weight: 600;
  color: var(--text-secondary, #404040);
  padding: var(--space-sm, 8px) var(--space-md, 16px) var(--space-sm, 8px) 0;
  width: 40%;
  vertical-align: top;
}

.woocommerce-product-attributes-item__value {
  color: var(--text, #0A0A0A);
  padding: var(--space-sm, 8px) 0;
}

/* ---- Related products section ---- */
.single-product .related.products,
.single-product .up-sells.products {
  margin-top: var(--space-3xl, 96px);
  padding-top: var(--space-2xl, 64px);
  border-top: 1px solid var(--border, #E5E5E5);
}

.single-product .related.products > h2,
.single-product .up-sells.products > h2,
.single-product .ct-module-title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--accent, #0A0A0A);
  margin-bottom: var(--space-xl, 40px);
}

/* Related products inherits archive card styles */
.single-product .related.products ul.products {
  grid-template-columns: repeat(4, 1fr);
}

/* ---- Breadcrumbs ---- */
.woocommerce-breadcrumb,
.ct-breadcrumbs {
  font-size: 0.8125rem;
  color: var(--muted, #737373);
  margin-bottom: var(--space-lg, 24px);
}

.woocommerce-breadcrumb a,
.ct-breadcrumbs a {
  color: var(--muted, #737373);
  text-decoration: none;
}

.woocommerce-breadcrumb a:hover,
.ct-breadcrumbs a:hover {
  color: var(--accent-2, #0048FF);
}

/* =====================================================================
   3. CART PAGE
   /cart/
   ===================================================================== */

/* ---- Block cart layout ---- */
.wp-block-woocommerce-cart {
  padding: var(--space-xl, 40px) 0;
}

.wc-block-cart.is-loading {
  opacity: 0;
}

/* ---- Cart grid: items left, totals right ---- */
.wp-block-woocommerce-filled-cart-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl, 40px);
  align-items: start;
}

@media (min-width: 1024px) {
  .wp-block-woocommerce-filled-cart-block {
    grid-template-columns: 1fr 380px;
  }
  /* WooCommerce sizes these grid items to content by default, leaving them
     squished in the left of their tracks. Force them to fill their columns. */
  .woocommerce-cart .wc-block-cart__main,
  .woocommerce-cart .wc-block-cart__sidebar {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  /* The line-items table defaults to width:auto (shrinks to content) — fill main. */
  .woocommerce-cart .wc-block-cart__main > .wc-block-cart-items,
  .woocommerce-cart .wc-block-cart-items {
    width: 100%;
  }
}

/* ---- Cart line items ---- */
/* WooCommerce renders this as a <table>; the body rows are forced to grid,
   which shrink-wraps them inside table-layout (rows ended up 390px in a 684px
   table, so the TOTAL header never lined up with the price). Take the whole
   table out of table formatting and give the header row + body rows ONE shared
   grid template so every column aligns. */
.wc-block-cart-items {
  display: block;
  width: 100%;
  border: 1px solid var(--border, #E5E5E5);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  background: #fff;
}

.wc-block-cart-items thead,
.wc-block-cart-items tbody {
  display: block;
  width: 100%;
}

.wc-block-cart-items__header,
.wc-block-cart-items__row {
  display: grid;
  grid-template-columns: 88px 1fr 90px;
  gap: var(--space-md, 16px);
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-md, 16px) var(--space-lg, 24px);
  border-bottom: 1px solid var(--border, #E5E5E5);
}

.wc-block-cart-items__header {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #737373);
  background: var(--surface, #F8F8F8);
}

.wc-block-cart-items__header-total {
  text-align: right;
}

.wc-block-cart-items__row:last-child {
  border-bottom: none;
}

/* Cart item image */
.wc-block-cart-item__image img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: var(--radius-md, 8px);
  background-color: var(--surface, #F8F8F8);
  border: 1px solid var(--border, #E5E5E5);
}

/* Cart item name */
.wc-block-cart-item__product a {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--accent, #0A0A0A);
  text-decoration: none;
}

.wc-block-cart-item__product a:hover {
  color: var(--accent-2, #0048FF);
}

/* Cart item variation details */
.wc-block-cart-item__product .wc-block-cart-item__product-details-list {
  font-size: 0.8125rem;
  color: var(--muted, #737373);
  list-style: none;
  padding: 0;
  margin: var(--space-xs, 4px) 0 0;
}

/* Cart item price */
.wc-block-cart-item__total {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent, #0A0A0A);
  text-align: right;
  justify-content: flex-end;
}

/* Cart quantity */
.wc-block-cart-item__quantity .wc-block-components-quantity-selector {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--woo-input-border, #D4D4D4);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  height: 40px;
  background: #fff;
}

.wc-block-cart-item__quantity .wc-block-components-quantity-selector__button {
  min-width: 36px;
  height: 100%;
  border: none;
  background: transparent;
  font-size: 1.125rem;
  color: var(--text-secondary, #404040);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-fast, 150ms ease),
              color var(--transition-fast, 150ms ease);
}

.wc-block-cart-item__quantity .wc-block-components-quantity-selector__button:hover {
  background-color: var(--surface, #F8F8F8);
  color: var(--accent-2, #0048FF);
}

/* Remove item button */
.wc-block-cart-item__remove-link {
  font-size: 0.8125rem;
  color: var(--muted, #737373);
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs, 4px);
  min-height: 44px;
  padding: var(--space-xs, 4px) 0;
  transition: color var(--transition-fast, 150ms ease);
}

.wc-block-cart-item__remove-link:hover {
  color: var(--badge-sale, #E3163B);
}

/* ---- Cart totals card — elevated ---- */
.wp-block-woocommerce-cart-totals-block,
.wc-block-cart__totals-title,
.wp-block-woocommerce-cart-order-summary-block {
  background-color: #fff;
  border: 1px solid var(--border, #E5E5E5);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-xl, 40px) var(--space-lg, 24px);
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.08));
  position: sticky;
  top: 100px;
}

.wp-block-woocommerce-cart-order-summary-heading-block h2 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--accent, #0A0A0A);
  margin-bottom: var(--space-md, 16px);
}

/* Totals rows */
.wc-block-components-totals-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-sm, 8px) 0;
  font-size: 0.9375rem;
  color: var(--text-secondary, #404040);
  border-bottom: 1px solid var(--border, #E5E5E5);
}

.wc-block-components-totals-item:last-child {
  border-bottom: none;
}

.wc-block-components-totals-item__label {
  font-weight: 500;
}

.wc-block-components-totals-item--total .wc-block-components-totals-item__label,
.wc-block-components-totals-item--total .wc-block-components-totals-item__value {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--accent, #0A0A0A);
}

/* Proceed to checkout ---- */
.wp-block-woocommerce-proceed-to-checkout-block {
  margin-top: var(--space-md, 16px);
}

.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button,
.wc-block-cart__submit-button {
  display: block;
  width: 100%;
  min-height: 52px;
  background-color: var(--accent-2, #0048FF) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-md, 8px) !important;
  font-family: var(--font-primary, 'DM Sans', sans-serif);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  padding: 0 var(--space-lg, 24px);
  transition:
    background-color var(--transition-fast, 150ms ease),
    transform var(--transition-fast, 150ms ease),
    box-shadow var(--transition-fast, 150ms ease);
}

.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button:hover,
.wc-block-cart__submit-button:hover {
  background-color: #0039CC !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 72, 255, 0.3) !important;
}

/* Trust cues / payment methods */
.wp-block-woocommerce-cart-accepted-payment-methods-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm, 8px);
  padding-top: var(--space-md, 16px);
  border-top: 1px solid var(--border, #E5E5E5);
  margin-top: var(--space-md, 16px);
  opacity: 0.7;
}

/* ---- Empty cart state ---- */
.wp-block-woocommerce-empty-cart-block {
  text-align: center;
  padding: var(--space-3xl, 96px) var(--space-xl, 40px);
}

.wp-block-heading.with-empty-cart-icon {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--text-secondary, #404040);
  margin-top: var(--space-lg, 24px);
}

/* Classic cart table (fallback for non-block) */
.woocommerce-cart-form table.cart {
  width: 100%;
  border-collapse: collapse;
}

.woocommerce-cart-form table.cart td,
.woocommerce-cart-form table.cart th {
  padding: var(--space-md, 16px);
  border-bottom: 1px solid var(--border, #E5E5E5);
  vertical-align: middle;
}

.cart_totals {
  background: #fff;
  border: 1px solid var(--border, #E5E5E5);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-xl, 40px) var(--space-lg, 24px);
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.08));
}

.cart_totals h2 {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: var(--space-lg, 24px);
}

.wc-proceed-to-checkout .checkout-button {
  display: block;
  width: 100%;
  min-height: 52px;
  margin-top: var(--space-md, 16px);
  font-size: 1rem;
  font-weight: 700;
}

/* =====================================================================
   4. CHECKOUT PAGE
   /checkout/
   ===================================================================== */

/* ---- Block checkout layout ---- */
.wp-block-woocommerce-checkout {
  padding: var(--space-xl, 40px) 0;
}

/* Two-column: form left, order review right */
.wp-block-woocommerce-checkout-fields-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl, 40px);
  align-items: start;
}

@media (min-width: 1024px) {
  .wc-block-checkout__main {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-2xl, 64px);
    align-items: start;
  }
}

/* ---- Checkout form inputs ---- */
.wc-block-components-text-input input,
.wc-block-components-textarea textarea,
.wc-block-components-select select,
.wc-block-components-country-input input,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout input[type="number"],
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.woocommerce-account input[type="tel"] {
  width: 100%;
  min-height: var(--woo-input-height, 48px);
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--woo-input-border, #D4D4D4);
  border-radius: var(--woo-input-radius, 8px);
  background-color: #fff;
  font-family: var(--font-primary, 'DM Sans', sans-serif);
  font-size: 0.9375rem;
  color: var(--text, #0A0A0A);
  transition:
    border-color var(--transition-fast, 150ms ease),
    box-shadow var(--transition-fast, 150ms ease);
}

.wc-block-components-text-input input:hover,
.woocommerce-checkout input:hover,
.woocommerce-checkout select:hover,
.woocommerce-checkout textarea:hover,
.woocommerce-account input[type="text"]:hover,
.woocommerce-account input[type="email"]:hover,
.woocommerce-account input[type="password"]:hover {
  border-color: var(--accent-2, #0048FF);
}

.wc-block-components-text-input input:focus,
.wc-block-components-text-input input:focus-visible,
.woocommerce-checkout input:focus,
.woocommerce-checkout input:focus-visible,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-account input[type="text"]:focus,
.woocommerce-account input[type="email"]:focus,
.woocommerce-account input[type="password"]:focus,
.woocommerce-account input[type="text"]:focus-visible,
.woocommerce-account input[type="email"]:focus-visible,
.woocommerce-account input[type="password"]:focus-visible {
  outline: 2px solid var(--accent-2, #0048FF);
  outline-offset: 0;
  border-color: var(--accent-2, #0048FF);
  box-shadow: 0 0 0 4px rgba(0, 72, 255, 0.1);
}

/* ---- Checkout labels ---- */
.wc-block-components-text-input label,
.wc-block-components-select label,
.woocommerce-checkout label,
.woocommerce-checkout .form-row label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-secondary, #404040);
  margin-bottom: var(--space-xs, 4px);
}

/* ---- Checkout fieldset groups ---- */
.wc-block-checkout__contact-fields,
.wc-block-checkout__shipping-fields,
.wc-block-checkout__billing-fields,
.wc-block-checkout__payment {
  background: #fff;
  border: 1px solid var(--border, #E5E5E5);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-xl, 40px) var(--space-xl, 40px);
  margin-bottom: var(--space-md, 16px);
}

.wc-block-checkout__contact-fields h2,
.wc-block-checkout__shipping-fields h2,
.wc-block-checkout__billing-fields h2,
.wc-block-checkout__payment h2,
.wc-block-components-checkout-step__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent, #0A0A0A);
  margin-bottom: var(--space-lg, 24px);
  padding-bottom: var(--space-sm, 8px);
  border-bottom: 1px solid var(--border, #E5E5E5);
}

/* ---- Order review card — sticky right column ---- */
.wp-block-woocommerce-checkout-order-summary-block {
  background: #fff;
  border: 1px solid var(--border, #E5E5E5);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-xl, 40px) var(--space-lg, 24px);
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.08));
  position: sticky;
  top: 100px;
}

.wp-block-woocommerce-checkout-order-summary-block h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent, #0A0A0A);
  margin-bottom: var(--space-md, 16px);
  padding-bottom: var(--space-sm, 8px);
  border-bottom: 1px solid var(--border, #E5E5E5);
}

/* ---- Order summary line items ---- */
.wc-block-components-order-summary__content {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-md, 16px);
}

.wc-block-components-order-summary-item {
  display: flex;
  gap: var(--space-sm, 8px);
  align-items: center;
  padding: var(--space-sm, 8px) 0;
  border-bottom: 1px solid var(--border, #E5E5E5);
  font-size: 0.875rem;
}

.wc-block-components-order-summary-item:last-child {
  border-bottom: none;
}

.wc-block-components-order-summary-item__image img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: var(--radius-sm, 4px);
  background: var(--surface, #F8F8F8);
  border: 1px solid var(--border, #E5E5E5);
}

.wc-block-components-order-summary-item__description {
  flex: 1;
}

.wc-block-components-order-summary-item__amount {
  font-weight: 700;
  color: var(--accent, #0A0A0A);
}

/* Checkout totals */
.wc-block-components-totals-wrapper {
  border-top: 1px solid var(--border, #E5E5E5);
  padding-top: var(--space-md, 16px);
}

/* ---- Place order button ---- */
.wc-block-components-checkout-place-order-button,
.woocommerce-checkout #place_order {
  display: block;
  width: 100%;
  min-height: 56px;
  background-color: var(--accent-2, #0048FF) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-md, 8px) !important;
  font-family: var(--font-primary, 'DM Sans', sans-serif);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-align: center;
  margin-top: var(--space-md, 16px);
  transition:
    background-color var(--transition-fast, 150ms ease),
    transform var(--transition-fast, 150ms ease),
    box-shadow var(--transition-fast, 150ms ease);
}

.wc-block-components-checkout-place-order-button:hover,
.woocommerce-checkout #place_order:hover {
  background-color: #0039CC !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 72, 255, 0.3) !important;
}

/* ---- Classic checkout form (non-block) ---- */
.woocommerce-checkout .woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table td,
.woocommerce-checkout .woocommerce-checkout-review-order-table th {
  padding: var(--space-sm, 8px) 0;
  border-bottom: 1px solid var(--border, #E5E5E5);
  vertical-align: middle;
}

/* ---- Coupon / promo input ---- */
.wc-block-components-totals-coupon__form,
.coupon {
  display: flex;
  gap: var(--space-sm, 8px);
  flex-wrap: wrap;
  margin-bottom: var(--space-md, 16px);
}

.wc-block-components-totals-coupon__input input,
.coupon input {
  flex: 1;
  min-width: 180px;
  min-height: 44px;
  padding: 0.625rem 0.875rem;
  border: 1.5px solid var(--woo-input-border, #D4D4D4);
  border-radius: var(--woo-input-radius, 8px);
  font-family: var(--font-primary, 'DM Sans', sans-serif);
  font-size: 0.875rem;
  background: #fff;
}

.wc-block-components-totals-coupon__button,
.coupon .button {
  min-height: 44px;
  padding: 0 var(--space-lg, 24px);
  background-color: var(--accent, #0A0A0A) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--woo-input-radius, 8px) !important;
  font-family: var(--font-primary, 'DM Sans', sans-serif);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition-fast, 150ms ease);
}

.wc-block-components-totals-coupon__button:hover,
.coupon .button:hover {
  background-color: #262626 !important;
}

/* ---- WooCommerce notices ---- */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.wc-block-components-notice-banner {
  border-radius: var(--radius-md, 8px);
  padding: var(--space-md, 16px) var(--space-lg, 24px);
  margin-bottom: var(--space-md, 16px);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.woocommerce-message {
  border-left: 4px solid var(--success, #16A34A);
  background-color: #F0FDF4;
  color: #14532d;
}

.woocommerce-info {
  border-left: 4px solid var(--accent-2, #0048FF);
  background-color: #EFF6FF;
  color: #1d4ed8;
}

.woocommerce-error {
  border-left: 4px solid var(--error, #E3163B);
  background-color: #FEF2F2;
  color: #991b1b;
}

/* =====================================================================
   4b. CLASSIC CART — two-column desktop layout (P0-3)
   The /cart/ page uses WC block cart, but these rules harden the classic
   fallback selectors that Blocksy also wraps around the cart form.
   ===================================================================== */

/* Blocksy wraps classic cart in .ct-woocommerce-cart-form */
.ct-woocommerce-cart-form,
.woocommerce-cart-form {
  width: 100%;
}

/* Two-column: cart table left, totals right */
@media (min-width: 1024px) {
  .woocommerce-cart .woocommerce {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-2xl, 64px);
    align-items: start;
  }

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

  .woocommerce-cart .woocommerce .cart_totals,
  .woocommerce-cart .woocommerce .ct-woocommerce-cart-form ~ div {
    grid-column: 2;
    position: sticky;
    top: 100px;
  }

  .woocommerce-cart .woocommerce .cross-sells {
    grid-column: 1 / -1;
  }
}

/* Classic cart table row styling */
.woocommerce-cart-form table.cart thead th {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #737373);
  padding: var(--space-sm, 8px) var(--space-md, 16px);
  border-bottom: 2px solid var(--border, #E5E5E5);
}

.woocommerce-cart-form table.cart td.product-thumbnail img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  background: var(--surface, #F8F8F8);
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--border, #E5E5E5);
}

.woocommerce-cart-form table.cart td.product-name a {
  font-weight: 600;
  color: var(--accent, #0A0A0A);
  text-decoration: none;
}

.woocommerce-cart-form table.cart td.product-name a:hover {
  color: var(--accent-2, #0048FF);
}

.woocommerce-cart-form table.cart td.product-price,
.woocommerce-cart-form table.cart td.product-subtotal {
  font-weight: 700;
  color: var(--accent, #0A0A0A);
}

/* Update cart button */
.woocommerce-cart-form [name="update_cart"] {
  background-color: var(--accent, #0A0A0A) !important;
  color: #fff !important;
  border: none !important;
  min-height: 44px;
  padding: 0 var(--space-lg, 24px);
  border-radius: var(--radius-md, 8px) !important;
  font-weight: 600;
}

/* Cart totals sticky card (classic) */
.cart_totals {
  position: sticky;
  top: 100px;
}

/* Proceed to checkout button (classic) */
.wc-proceed-to-checkout .checkout-button {
  background-color: var(--accent-2, #0048FF) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-md, 8px) !important;
  font-family: var(--font-primary, 'DM Sans', sans-serif);
  font-size: 1rem;
  font-weight: 700;
}

.wc-proceed-to-checkout .checkout-button:hover {
  background-color: #0039CC !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 72, 255, 0.3) !important;
}

/* =====================================================================
   4c. CART EMPTY STATE — classic template override (P0-4)
   Used by woocommerce/cart/cart-empty.php (classic cart renderer).
   ===================================================================== */

.cart-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-3xl, 96px) var(--space-xl, 40px);
}

.cart-empty-icon {
  margin-bottom: var(--space-xl, 40px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-empty-icon svg {
  width: 80px;
  height: 80px;
  color: #0048FF;
}

.cart-empty-heading {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent, #0A0A0A);
  margin: 0 0 var(--space-md, 16px);
}

.cart-empty-subhead {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--muted, #737373);
  margin: 0 0 var(--space-xl, 40px);
  max-width: 360px;
}

.cart-empty-cta.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 var(--space-2xl, 64px);
  background-color: #0048FF !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-md, 8px) !important;
  font-family: var(--font-primary, 'DM Sans', sans-serif);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--transition-fast, 150ms ease),
    transform var(--transition-fast, 150ms ease),
    box-shadow var(--transition-fast, 150ms ease);
}

.cart-empty-cta.button:hover {
  background-color: #0039CC !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 72, 255, 0.3) !important;
}

/* Classic return-to-shop link override (WC default) */
.return-to-shop .button {
  background-color: #0048FF !important;
  color: #fff !important;
  border: none !important;
  min-height: 52px;
}

/* =====================================================================
   4c. CART EMPTY STATE — WC Block (P0-4)
   The block empty-cart shows inside wp-block-woocommerce-empty-cart-block.
   Style it with brand visual identity.
   ===================================================================== */

/* Prevent hidden filled-cart from leaving void */
.wp-block-woocommerce-filled-cart-block[hidden],
.wp-block-woocommerce-empty-cart-block[hidden] {
  display: none !important;
}

.wp-block-woocommerce-empty-cart-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl, 64px) var(--space-xl, 40px) var(--space-2xl, 64px);
  text-align: center;
}

/* Hide the default block heading and dots separator */
.wp-block-woocommerce-empty-cart-block .wp-block-heading.with-empty-cart-icon {
  display: none !important;
}

.wp-block-woocommerce-empty-cart-block .wp-block-separator {
  display: none !important;
}

/* "New in store" heading inside empty cart */
.wp-block-woocommerce-empty-cart-block > .wp-block-heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent, #0A0A0A);
  margin-bottom: var(--space-xl, 40px);
}

/* ---- Block empty cart: styled title + brand icon + browse CTA ---- */
/* Inject brand icon via ::before on empty cart container */
.wp-block-woocommerce-empty-cart-block::before {
  content: '';
  display: block;
  width: 80px;
  height: 80px;
  margin: 0 auto var(--space-xl, 40px);
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' fill='none' xmlns='http://www.w3.org/2000/svg' stroke='%230048FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 28H60L56 62H24L20 28Z'/%3E%3Cpath d='M30 28C30 20 34 14 40 14C46 14 50 20 50 28'/%3E%3Cline x1='30' y1='44' x2='50' y2='44'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Style the "Your cart is currently empty!" text (WC block renders it) */
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
  display: block !important;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent, #0A0A0A);
  margin-bottom: var(--space-md, 16px);
}

/* Browse products CTA — inject via CSS only when empty (no JS) */
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title + * {
  margin-top: var(--space-xl, 40px);
}

/* "New in store" products block inside empty cart — give it a label */
.wp-block-woocommerce-empty-cart-block .wc-block-grid {
  margin-top: var(--space-xl, 40px);
}

/* Style the return-to-shop anchor that WC block may render */
.wp-block-woocommerce-empty-cart-block .return-to-shop,
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__return-to-shop {
  margin-top: var(--space-xl, 40px);
}

.wp-block-woocommerce-empty-cart-block .return-to-shop a,
.wp-block-woocommerce-empty-cart-block .return-to-shop .button,
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__return-to-shop a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 var(--space-2xl, 64px);
  background-color: #0048FF !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-md, 8px) !important;
  font-family: var(--font-primary, 'DM Sans', sans-serif);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--transition-fast, 150ms ease),
    transform var(--transition-fast, 150ms ease),
    box-shadow var(--transition-fast, 150ms ease);
}

.wp-block-woocommerce-empty-cart-block .return-to-shop a:hover,
.wp-block-woocommerce-empty-cart-block .return-to-shop .button:hover {
  background-color: #0039CC !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 72, 255, 0.3) !important;
}

/* =====================================================================
   4d. IMAGE STOPGAP (P0-5)
   Normalize non-white marketplace image backgrounds.
   aspect-ratio + object-fit for consistent card framing.
   Does NOT mask watermarks — that requires new photography.
   ===================================================================== */

/* Product card images — consistent 1:1 framing on #F8F8F8 */
.woocommerce ul.products li.product figure,
[data-products] .product figure,
.woocommerce ul.products li.product .ct-media-container,
[data-products] .product .ct-media-container,
.featured-products .product-image-wrap,
.wc-block-grid__product-image {
  background-color: #F8F8F8;
}

.woocommerce ul.products li.product figure img,
[data-products] .product figure img,
.woocommerce ul.products li.product .ct-media-container img,
.featured-products .product-image-wrap img,
.wc-block-grid__product-image img {
  background-color: #F8F8F8;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/* Section/feature image containers */
.ct-media-container,
.section-image,
.feature-image,
.device-image-wrap {
  background-color: #F8F8F8;
}

/* =====================================================================
   P1-5 PAGINATION — Bordered brand buttons
   ===================================================================== */

.woocommerce-pagination {
  display: flex;
  justify-content: center;
  margin-top: var(--space-2xl, 64px);
}

.woocommerce-pagination ul.page-numbers {
  display: flex;
  gap: var(--space-xs, 4px);
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
  justify-content: center;
}

.woocommerce-pagination ul.page-numbers li {
  margin: 0;
}

.woocommerce-pagination ul.page-numbers li .page-numbers,
.woocommerce-pagination ul.page-numbers li a.page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border, #E5E5E5);
  border-radius: var(--radius-md, 8px);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text, #0A0A0A);
  text-decoration: none;
  background: #ffffff;
  transition: border-color var(--transition-fast, 150ms ease),
              background-color var(--transition-fast, 150ms ease),
              color var(--transition-fast, 150ms ease);
}

.woocommerce-pagination ul.page-numbers li a.page-numbers:hover {
  border-color: var(--accent-2, #0048FF);
  color: var(--accent-2, #0048FF);
}

.woocommerce-pagination ul.page-numbers li .page-numbers.current {
  background-color: var(--accent-2, #0048FF);
  border-color: var(--accent-2, #0048FF);
  color: #ffffff;
}

.woocommerce-pagination ul.page-numbers li .page-numbers.dots {
  border: none;
  background: transparent;
  cursor: default;
}

/* =====================================================================
   P1-4 CARD SYSTEM REFINEMENTS
   Recessed bg + float shadow + single-category pill + image 1:1
   ===================================================================== */

/* Recessed archive/shop page background */
body.post-type-archive-product,
body.tax-product_cat,
body.woocommerce-page.woocommerce-shop {
  background-color: #F2F4F7;
}

/* Card float: refined shadow (overrides --woo-card-shadow token) */
.woocommerce ul.products li.product,
[data-products] .product {
  box-shadow: 0 2px 8px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04);
  border: none;
}

.woocommerce ul.products li.product:hover,
[data-products] .product:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.08);
}

/* Single-category pill (show only first child link) */
.woocommerce ul.products li.product .entry-meta,
[data-products] .product .entry-meta {
  font-size: 0;  /* hide the comma separators */
}

.woocommerce ul.products li.product .entry-meta a:first-child,
[data-products] .product .entry-meta a:first-child {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-2, #0048FF);
  background: rgba(0, 72, 255, 0.08);
  border-radius: var(--radius-full, 9999px);
  padding: 2px 8px;
  text-decoration: none;
  margin-top: var(--space-xs, 4px);
}

.woocommerce ul.products li.product .entry-meta a:not(:first-child),
[data-products] .product .entry-meta a:not(:first-child) {
  display: none;
}

/* Card CTA buttons */
.woocommerce ul.products li.product .ct-woo-card-actions .button,
[data-products] .ct-woo-card-actions .button,
.woocommerce ul.products li.product .add_to_cart_button,
[data-products] .add_to_cart_button {
  min-height: 44px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =====================================================================
   5. RESPONSIVE
   ===================================================================== */

/* ---- 375px (mobile portrait) ---- */
@media (max-width: 479px) {
  .single-product .product-entry-wrapper {
    grid-template-columns: 1fr;
    gap: var(--space-lg, 24px);
    padding-top: var(--space-md, 16px);
  }

  .single-product .woocommerce-product-gallery {
    position: static;
  }

  .single-product .single_add_to_cart_button,
  .single-product form.cart .single_add_to_cart_button {
    width: 100%;
    min-height: 52px;
    font-size: 1.0625rem;
  }

  .single-product form.cart {
    flex-direction: column;
    align-items: stretch;
  }

  .woocommerce-tabs .tabs li a {
    padding: var(--space-sm, 8px) var(--space-md, 16px);
    font-size: 0.75rem;
  }

  .woocommerce-tabs .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .woocommerce-tabs .tabs::-webkit-scrollbar {
    display: none;
  }

  .single-product .related.products ul.products {
    grid-template-columns: repeat(2, 1fr);
  }

  .wc-block-checkout__contact-fields,
  .wc-block-checkout__shipping-fields,
  .wc-block-checkout__billing-fields,
  .wc-block-checkout__payment {
    padding: var(--space-md, 16px);
  }

  .wp-block-woocommerce-cart-totals-block,
  .wp-block-woocommerce-checkout-order-summary-block {
    position: static;
  }
}

/* ---- 768px (tablet) ---- */
@media (min-width: 480px) and (max-width: 767px) {
  .single-product .product-entry-wrapper {
    grid-template-columns: 1fr;
    gap: var(--space-xl, 40px);
  }

  .single-product .woocommerce-product-gallery {
    position: static;
  }

  .single-product .single_add_to_cart_button {
    min-height: 52px;
  }

  .single-product .related.products ul.products {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- 768–1023px ---- */
@media (min-width: 768px) and (max-width: 1023px) {
  .single-product .product-entry-wrapper {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl, 40px);
  }

  .wp-block-woocommerce-cart-totals-block,
  .wp-block-woocommerce-checkout-order-summary-block {
    position: static;
  }
}

/* ---- 1024px+ desktop ---- */
@media (min-width: 1024px) {
  .single-product .product-entry-wrapper {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl, 64px);
  }
}

/* ---- 1440px wide ---- */
@media (min-width: 1440px) {
  .single-product .product-entry-wrapper {
    gap: 80px;
  }

  .single-product .related.products ul.products {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* =====================================================================
   P2-7. CART TRUST STRIP — appended below cart totals block
   ===================================================================== */

.cart-trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-top: var(--space-md, 16px);
  padding-top: var(--space-md, 16px);
  border-top: 1px solid var(--border, #E5E5E5);
}

.cart-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted, #737373);
  white-space: nowrap;
}

.cart-trust-item svg {
  flex-shrink: 0;
  color: var(--accent-2, #0048FF);
}

/* =====================================================================
   6. REDUCED MOTION — WooCommerce-specific overrides
   (global block already in premium.css; this catches card transitions)
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  .woocommerce ul.products li.product,
  [data-products] .product,
  .woocommerce ul.products li.product figure img,
  [data-products] .product figure img {
    transition: none !important;
    transform: none !important;
  }
}

/* ── Cart page width fix ──────────────────────────────────────────────
   .entry-content is the narrow 655px Blocksy content column. Full-bleed
   ONLY the cart wrapper to the viewport, then center the cart's own grid
   (.wc-block-components-sidebar-layout) at ~1200px so items + the 380px
   totals sidebar are balanced. Do NOT touch the grid's column sizing. */
.woocommerce-cart .wp-block-woocommerce-cart {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
}
.woocommerce-cart .wc-block-components-sidebar-layout {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
  box-sizing: border-box;
}
/* keep the "Cart" page title aligned with the centered cart */
.woocommerce-cart .entry-header,
.woocommerce-cart .page-title { max-width: 1200px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }

/* ── Checkout page width fix ──────────────────────────────────────────
   Same trap as the cart: the checkout block is stuck in Blocksy's 655px
   .entry-content. The block uses JS-applied responsive classes
   (is-mobile/is-medium/is-large) keyed off its OWN measured width — at
   655px it picks is-medium and stacks form + order-summary into one column.
   Full-bleed the wrapper and center the layout at 1200px; once the layout
   measures wide, WooCommerce's ResizeObserver flips it to is-large and lays
   out its two columns itself (no manual column forcing needed). */
.woocommerce-checkout .wp-block-woocommerce-checkout {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
}
.woocommerce-checkout .wc-block-checkout .wc-block-components-sidebar-layout {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
  box-sizing: border-box;
}
/* keep the "Checkout" page title aligned with the centered form */
.woocommerce-checkout .entry-header,
.woocommerce-checkout .page-title { max-width: 1200px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }

/* =====================================================================
   7. SHOP LANDING PAGE (/shop/, page id 255)
   The page's CSS was authored as an inline <style> inside post content;
   wpautop injected </p><p> after the first rule, killing every rule after
   it (categories collapsed to a stacked single column, cards unstyled).
   Moved here (enqueued CSS is immune to wpautop) and scoped under
   .page-shop. Also full-bleed the section out of Blocksy's 655px column.
   ===================================================================== */
/* Higher specificity + !important: Blocksy's `.is-layout-constrained > :where()`
   rule pins direct children of .entry-content to --theme-block-width (~655px)
   with `margin: auto !important`. We outrank it to full-bleed. .entry-content
   is left-aligned at the viewport's left edge (x:0), so a plain width:100vw +
   margin:0 fills the viewport; the inner .container then centers itself. */
.entry-content > .page-shop {
  padding: var(--space-2xl, 64px) 0;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.page-shop > .container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
  box-sizing: border-box;
}

.page-shop .shop-header {
  text-align: center;
  margin-bottom: var(--space-2xl, 64px);
}
.page-shop .shop-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  padding: var(--space-sm, 8px) var(--space-md, 16px);
  background: var(--accent-light, rgba(0, 72, 255, 0.08));
  color: var(--accent, #0A0A0A);
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-full, 999px);
  margin-bottom: var(--space-md, 16px);
}
.page-shop .shop-header h1 { margin-bottom: var(--space-md, 16px); }
.page-shop .shop-header .lead { max-width: 700px; margin: 0 auto; }

/* Category cards */
.page-shop .categories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg, 24px);
  margin-bottom: var(--space-3xl, 96px);
}
.page-shop .cat {
  position: relative;
  display: block;
  background: var(--surface, #F8F8F8);
  border: 1px solid var(--border, #E5E5E5);
  border-radius: var(--radius-xl, 16px);
  overflow: hidden;
  transition: all var(--transition-base, 200ms ease);
}
.page-shop .cat:hover {
  border-color: var(--accent, #0A0A0A);
  box-shadow: var(--shadow-xl, 0 20px 40px rgba(0, 0, 0, 0.12));
}
.page-shop .cat-image-wrap { position: relative; overflow: hidden; }
.page-shop .cat-image-wrap img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--transition-slow, 400ms ease);
}
.page-shop .cat:hover .cat-image-wrap img { transform: scale(1.1); }
.page-shop .cat-content {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  padding: var(--space-md, 16px) var(--space-lg, 24px);
  background: var(--surface, #F8F8F8);
}
.page-shop .cat-name { font-weight: 700; font-size: 1rem; color: var(--text, #0A0A0A); }
.page-shop .cat-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--accent, #0A0A0A);
  color: #fff;
  border-radius: var(--radius-full, 999px);
  transition: transform var(--transition-fast, 150ms ease);
  flex-shrink: 0;
  margin-left: auto;
}
.page-shop .cat:hover .cat-arrow { transform: translateX(4px); }

/* Featured section */
.page-shop .featured-section { margin-top: var(--space-2xl, 64px); }
.page-shop .section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-xl, 40px);
}
.page-shop .section-header h2 { margin: 0; }
.page-shop .view-all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  color: var(--accent, #0A0A0A);
  font-weight: 600;
  font-size: 14px;
}
.page-shop .view-all:hover { gap: var(--space-md, 16px); }

@media (max-width: 1024px) {
  .page-shop .categories-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .page-shop .categories-grid { grid-template-columns: 1fr; }
  .page-shop .section-header { flex-direction: column; gap: var(--space-md, 16px); text-align: center; }
}

/* ── §8 Product spec tables (SEO pass) ─────────────────────────────────────
   "Technical Specifications" tables appended to product long descriptions. */
.woocommerce-Tabs-panel .product-specs,
.product .product-specs {
  width: 100%;
  max-width: 720px;
  border-collapse: collapse;
  margin: 1rem 0 2rem;
  font-size: 0.9375rem;
}
.product-specs th,
.product-specs td {
  text-align: left;
  padding: 10px 14px;
  border: 1px solid var(--border, #e5e5e5);
  vertical-align: top;
}
.product-specs th {
  width: 38%;
  font-weight: 600;
  background: var(--surface, #fafafa);
}