/**
 * woocommerce.css — Safety Direct America
 * WooCommerce storefront overrides using theme design tokens.
 * Enqueued only on WooCommerce pages. Excluded from W3 Speedster bundling.
 */

/* ============================================================
   PRODUCT GRID — Shop page
   ============================================================ */

/* Reset TwentySixteen's float-based WooCommerce layout */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after { display: none !important; }

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  float: none !important;
  clear: none !important;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { clear: none !important; }

/* Shop page container spacing */
.site-main--shop .inner-page-content {
  padding-top: 2rem !important;
}

/* Product grid — 4 columns desktop, 2 tablet, 1 mobile */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.5rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 1.5rem 0 2rem !important;
}


.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(27,58,107,0.07) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
  box-shadow: 0 6px 24px rgba(27,58,107,0.14) !important;
  transform: translateY(-2px) !important;
}

/* Product image — constrain height without affecting the title link or button.
   WooCommerce wraps both the img AND the h2 title in the same <a>, so we
   cannot apply aspect-ratio to 'a' — it would also distort the title and button.
   Instead we target the img directly and use the .woocommerce-loop-product__link
   class only for the image-area background. */
.woocommerce ul.products li.product .woocommerce-loop-product__link {
  display: block !important;
  overflow: hidden !important;
  background: #f8fafc !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__link img,
.woocommerce ul.products li.product a img {
  width: 100% !important;
  height: 200px !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 0 !important;
  transition: opacity 0.2s ease !important;
  background: #f8fafc !important;
}
.woocommerce ul.products li.product:hover a img { opacity: 0.92 !important; }

/* Product title */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-sans) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--primary) !important;
  padding: 1rem 1rem 0.25rem !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* Price */
.woocommerce ul.products li.product .price {
  font-family: var(--font-sans) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  padding: 0.25rem 1rem 0.75rem !important;
  margin: 0 !important;
}
.woocommerce ul.products li.product .price del { color: var(--muted-fg) !important; font-weight: 400 !important; }
.woocommerce ul.products li.product .price ins { text-decoration: none !important; }

/* Add to cart / Select options button */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
  margin: auto 1rem 1rem !important;
  display: block !important;
  width: calc(100% - 2rem) !important;
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  font-family: var(--font-sans) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  padding: 0.65rem 1rem !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
  text-decoration: none !important;
}
.woocommerce ul.products li.product .button:hover { background: var(--primary) !important; }

/* Sorting bar */
.woocommerce-ordering select {
  font-family: var(--font-sans) !important;
  border: 1px solid #d1d9e6 !important;
  border-radius: 6px !important;
  padding: 0.5rem 0.75rem !important;
  color: var(--fg) !important;
  background: #fff !important;
}
.woocommerce-result-count {
  font-family: var(--font-sans) !important;
  color: var(--muted-fg) !important;
  font-size: 0.9rem !important;
}

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

/* Ensure WooCommerce product layout respects .container wrapper.
   The wrapper (added in single-product.php) provides max-width + horizontal padding
   matching all other inner pages (max-width: 1200px, padding: 0 2rem). */
.site-main--product .woocommerce,
.site-main--product div.product {
  width: 100% !important;
  max-width: 100% !important;
}

/* Breadcrumb */
.site-main--product .woocommerce-breadcrumb {
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: var(--muted-fg);
}

/* Product tabs — ensure they don't overflow the container */
.site-main--product .woocommerce-tabs {
  width: 100% !important;
}
.site-main--product .woocommerce-tabs .woocommerce-Tabs-panel {
  padding: 1.5rem 0 0 !important;
}

/* Top spacing between nav and product */
.site-main--product .inner-page-content {
  padding-top: 2.5rem !important;
}

/* Product summary column — align to top of gallery image */
.woocommerce div.product .summary.entry-summary {
  margin-top: 0 !important;
  padding-top: 0 !important;
  vertical-align: top !important;
}

.woocommerce div.product .product_title {
  font-family: var(--font-serif) !important;
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  color: var(--primary) !important;
  font-weight: 700 !important;
  margin-top: 0 !important;
  margin-bottom: 0.5rem !important;
  line-height: 1.3 !important;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--accent) !important;
  font-family: var(--font-sans) !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
}
.woocommerce div.product .woocommerce-product-details__short-description {
  font-family: var(--font-sans) !important;
  color: var(--fg) !important;
  line-height: 1.75 !important;
  font-size: 1rem !important;
}

/* SKU / Category / Tags line — match standard paragraph styling */
.woocommerce div.product .product_meta {
  font-family: var(--font-sans) !important;
  font-size: 1rem !important;
  line-height: 1.75 !important;
  color: var(--fg) !important;
  margin-top: 1rem !important;
}
.woocommerce div.product .product_meta span,
.woocommerce div.product .product_meta a {
  font-size: 1rem !important;
}

/* Add to cart button */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  padding: 0.8rem 2rem !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover { background: var(--primary) !important; }

/* Quantity input */
.woocommerce div.product form.cart .quantity input.qty {
  border: 1px solid #d1d9e6 !important;
  border-radius: 6px !important;
  font-family: var(--font-sans) !important;
  font-size: 1rem !important;
  padding: 0.65rem 0.75rem !important;
  width: 70px !important;
}

/* Variations table — size / color / option dropdowns.
   th.label: blue background with comfortable padding.
   td.value: consistent left padding so dropdown doesn't sit flush against label.
   Vertical padding tightened to 6px to reduce overall row height. */
.woocommerce div.product form.cart table.variations {
  table-layout: fixed !important;
  width: 100% !important;
}
.woocommerce div.product form.cart table.variations th.label {
  padding: 6px 16px !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  width: 35% !important;
}
.woocommerce div.product form.cart table.variations td.value {
  padding: 6px 16px 6px 14px !important;
  vertical-align: middle !important;
  width: 65% !important;
}
.woocommerce div.product form.cart table.variations select {
  padding: 0.45rem 2.5rem 0.45rem 0.75rem !important;
  border: 1px solid #d1d9e6 !important;
  border-radius: 6px !important;
  font-family: var(--font-sans) !important;
  font-size: 0.95rem !important;
  color: var(--fg) !important;
  background-color: #fff !important;
  width: 100% !important;
  max-width: 100% !important;
  text-overflow: ellipsis !important;
  cursor: pointer !important;
  display: inline-block !important;
  vertical-align: middle !important;
}
/* "Clear" link — collapsed on page load; JS shows it via found_variation event.
   Removes the 27px of dead height the hidden-but-block link would otherwise occupy. */
.woocommerce div.product form.cart .reset_variations {
  display: none !important;
  margin: 0 0 0 10px !important;
  font-size: 0.8rem !important;
  color: var(--muted-fg) !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

/* Product tabs */
.woocommerce div.product .woocommerce-tabs .tabs {
  border-bottom: 2px solid var(--secondary) !important;
  margin-bottom: 0 !important;
}
.woocommerce div.product .woocommerce-tabs .tabs li a {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  color: var(--muted-fg) !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0.65rem 1.25rem !important;
  transition: color 0.15s ease !important;
}
.woocommerce div.product .woocommerce-tabs .tabs li.active a,
.woocommerce div.product .woocommerce-tabs .tabs li a:hover {
  color: var(--primary) !important;
  background: transparent !important;
  border-bottom: 2px solid var(--accent) !important;
}
.woocommerce div.product .woocommerce-tabs .panel {
  font-family: var(--font-sans) !important;
  color: var(--fg) !important;
  line-height: 1.75 !important;
  padding: 1.5rem 0 !important;
  border: none !important;
}
.woocommerce div.product .woocommerce-tabs .panel h2 {
  font-family: var(--font-serif) !important;
  font-size: 1.25rem !important;
  color: var(--primary) !important;
  margin-bottom: 1rem !important;
}

/* Star ratings */
.woocommerce .star-rating span { color: var(--yellow) !important; }

/* ──────────────────────────────────────────────────────────────
   CART ITEMS TABLE
   WooCommerce's .shop_table_responsive class forces display:block
   + overflow-x:auto. With display:block the table rows only span
   their natural content width (~1009px) not the container (1136px),
   leaving a visible grey gap on the right. Force display:table so
   width:100% fills the container properly.
   ────────────────────────────────────────────────────────────── */
.woocommerce table.cart,
.woocommerce-cart table.cart {
  display: table !important;
  overflow-x: visible !important;
  font-family: var(--font-sans) !important;
  border-collapse: collapse !important;
  width: 100% !important;
}

/* Reduce gap between cart table and Cart totals card by 80%
   WooCommerce default: margin-bottom ~2rem (33.6px) → keep 20% = ~0.4rem */
.woocommerce-cart form.woocommerce-cart-form,
.woocommerce form.woocommerce-cart-form {
  margin-bottom: 0.4rem !important;
}

.woocommerce table.cart th {
  background: var(--primary) !important;
  color: #fff !important;
  padding: 0.75rem 1rem !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  white-space: nowrap !important;   /* prevent QUANTITY / SUBTOTAL from wrapping */
}
.woocommerce table.cart td {
  padding: 1rem !important;
  border-bottom: 1px solid #e2e8f0 !important;
  vertical-align: middle !important;
  color: var(--fg) !important;
}

/* Cart thumbnail — reduce image to ~60% of WooCommerce default */
.woocommerce table.cart td.product-thumbnail {
  width: 90px !important;
  min-width: 90px !important;
  padding: 0.75rem 0.5rem 0.75rem 1rem !important;
}
.woocommerce table.cart td.product-thumbnail img {
  width: 80px !important;
  height: 80px !important;
  object-fit: cover !important;
  border-radius: 6px !important;
  display: block !important;
}

.woocommerce table.cart .product-name a {
  color: var(--primary) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.woocommerce table.cart .product-name a:hover { color: var(--accent) !important; }

/* ── Cart collaterals: full-width stacked layout ───────────────
   WooCommerce default: cart_totals floats right (48%), cross-sells
   floats left (48%). We override both to 100% width and stack them
   vertically — cart totals first, then "You May Be Interested In".

   IMPORTANT: TwentySixteen's clearfix adds ::before + ::after
   pseudo-elements with content:" " display:table. Inside a flex
   container these become INVISIBLE flex items (order 0) that each
   consume the full gap value BEFORE cart_totals (order 1).
   Result: 2 × 40px = 80px phantom gap. Fix: suppress them and
   use margin-top on .cross-sells for section spacing instead.
   ─────────────────────────────────────────────────────────────── */
.woocommerce .cart-collaterals,
.woocommerce-cart .cart-collaterals {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  float: none !important;
  clear: both !important;
  gap: 0 !important;   /* no gap — use margin-top on cross-sells instead */
}

/* Suppress clearfix pseudo-elements so they don't become flex items */
.woocommerce .cart-collaterals::before,
.woocommerce .cart-collaterals::after,
.woocommerce-cart .cart-collaterals::before,
.woocommerce-cart .cart-collaterals::after {
  content: none !important;
  display: none !important;
}

/* Cart totals — full width, comes first */
/* Cart totals — right-aligned constrained card */
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-cart .cart_totals {
  width: 100% !important;
  float: none !important;
  order: 1 !important;
  max-width: 520px !important;
  margin-left: auto !important;     /* push to the right */
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 1.5rem !important;
  box-shadow: 0 2px 12px rgba(27,58,107,0.08) !important;
}

/* Cross-sells ("You May Be Interested In") — full width, below totals */
.woocommerce .cart-collaterals .cross-sells,
.woocommerce-cart .cross-sells {
  width: 100% !important;
  float: none !important;
  order: 2 !important;
  margin-top: 2.5rem !important;  /* section gap — replaces container gap:2.5rem */
}

/* Cross-sells heading */
.woocommerce .cross-sells > h2 {
  font-family: var(--font-serif) !important;
  font-size: 1.4rem !important;
  color: var(--primary) !important;
  margin-bottom: 1.25rem !important;
  border-bottom: 2px solid var(--secondary) !important;
  padding-bottom: 0.5rem !important;
}

/* Cross-sells product grid — 3 columns matching shop */
.woocommerce .cross-sells ul.products,
.woocommerce-cart .cross-sells ul.products {
  grid-template-columns: repeat(3, 1fr) !important;
}

/* Cart totals heading */
.woocommerce .cart-collaterals .cart_totals h2,
.woocommerce-cart .cart_totals h2 {
  font-family: var(--font-serif) !important;
  font-size: 1.2rem !important;
  color: var(--primary) !important;
  margin: 0 0 1rem !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 2px solid var(--secondary) !important;
}

/* Cart totals table — force display:table + table-layout:fixed
   so the table always fills 100% of the card regardless of content width */
.woocommerce .cart-collaterals .cart_totals table,
.woocommerce-cart .cart_totals table {
  display: table !important;
  overflow-x: visible !important;
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  margin-bottom: 1.25rem !important;
}
.woocommerce .cart-collaterals .cart_totals table th,
.woocommerce .cart-collaterals .cart_totals table td {
  font-family: var(--font-sans) !important;
  padding: 0.6rem 0.75rem !important;
  border-bottom: 1px solid #f0f4f8 !important;
  vertical-align: middle !important;
}
.woocommerce .cart-collaterals .cart_totals table th {
  background: var(--primary) !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  width: 38% !important;
  white-space: nowrap !important;
}
.woocommerce .cart-collaterals .cart_totals table td {
  color: var(--fg) !important;
  font-size: 0.95rem !important;
}
/* Total row — only the th label column is dark blue; td value stays light like other rows */
.woocommerce .cart-collaterals .cart_totals table tr:last-child th {
  border-bottom: none !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  background: var(--primary) !important;
  color: #fff !important;
}
.woocommerce .cart-collaterals .cart_totals table tr:last-child td {
  border-bottom: none !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  background: #fff !important;
  color: var(--accent) !important;
}

/* Checkout button — natural width inside the card */
.woocommerce .wc-proceed-to-checkout {
  margin-top: 0 !important;
  padding: 0 !important;
}
.woocommerce .wc-proceed-to-checkout a.checkout-button {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  padding: 0.85rem 1.5rem !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  transition: background 0.2s ease !important;
  letter-spacing: 0.02em !important;
}
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover { background: var(--primary) !important; }

/* Coupon field */
.woocommerce table.cart .coupon input[type="text"] {
  font-family: var(--font-sans) !important;
  border: 1px solid #d1d9e6 !important;
  border-radius: 6px 0 0 6px !important;
  padding: 0.65rem 0.9rem !important;
}
.woocommerce table.cart .coupon button[name="apply_coupon"] {
  border-radius: 0 6px 6px 0 !important;
  background: var(--primary) !important;
  color: #fff !important;
  border: none !important;
  padding: 0.65rem 1rem !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}
.woocommerce table.cart .coupon button:hover { background: var(--accent) !important; }

/* Update cart row — dark blue background matching the table header */
.woocommerce table.cart td.actions {
  background: var(--primary) !important;
  padding: 0.75rem 1rem !important;
}

/* Update cart button — white background with primary-color text.
   WooCommerce renders this button with disabled attribute by default
   so we must target :disabled too, otherwise the browser greys it out. */
.woocommerce table.cart [name="update_cart"],
.woocommerce table.cart [name="update_cart"]:disabled {
  background: #ffffff !important;
  color: var(--primary) !important;
  border: 2px solid rgba(255,255,255,0.6) !important;
  border-radius: 6px !important;
  padding: 0.6rem 1.25rem !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.03em !important;
  cursor: pointer !important;
  opacity: 1 !important;
  transition: all 0.2s ease !important;
  text-transform: uppercase !important;
}
.woocommerce table.cart [name="update_cart"]:not(:disabled):hover {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: #fff !important;
}

/* ============================================================
   CHECKOUT PAGE
   ============================================================ */
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
  font-family: var(--font-serif) !important;
  font-size: 1.25rem !important;
  color: var(--primary) !important;
  border-bottom: 2px solid var(--secondary) !important;
  padding-bottom: 0.5rem !important;
  margin-bottom: 1.25rem !important;
}
/* ── Checkout billing fields: 2-column flex layout ────────────────────────
   CSS flexbox + explicit order guarantees the layout regardless of DOM order.
   PHP (woocommerce_checkout_fields filter) handles classes + DOM ordering;
   CSS handles it as a reliable visual fallback.
   ─────────────────────────────────────────────────────────────────────── */
.woocommerce-billing-fields__field-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  column-gap: 4% !important;
  align-items: flex-start !important;
}
/* Clear float-based sizing that WooCommerce applies via .form-row-first/last */
.woocommerce-billing-fields__field-wrapper > p.form-row {
  float: none !important;
  clear: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  flex: 0 0 100% !important;   /* default: full width */
}
/* Half-width (side-by-side) fields */
#billing_first_name_field,
#billing_last_name_field,
#billing_city_field,
#billing_state_field,
#billing_postcode_field,
#billing_country_field,
#billing_email_field,
#billing_phone_field {
  flex: 0 0 48% !important;
}
/* Explicit visual order — ensures correct sequence regardless of DOM order */
#billing_first_name_field { order: 1 !important; }
#billing_last_name_field  { order: 2 !important; }
#billing_company_field    { order: 3 !important; }
#billing_address_1_field  { order: 4 !important; flex: 0 0 63% !important; }
/* address_2 is 33% wide (63+33+4gap=100%). align-self:flex-end aligns
   its input with address_1's input below the label. */
#billing_address_2_field  { order: 5 !important; flex: 0 0 33% !important; align-self: flex-end !important; }
/* Keep address_2 hidden label invisible (WooCommerce marks it label_class:hidden
   but our broad label rule would override that). */
#billing_address_2_field label.hidden { display: none !important; }
#billing_city_field       { order: 6 !important; }
#billing_state_field      { order: 7 !important; }
#billing_postcode_field   { order: 8 !important; }
#billing_country_field    { order: 9 !important; }
#billing_email_field      { order: 10 !important; }
#billing_phone_field      { order: 11 !important; }

/* Compact form field rows — reduce the default ~1.25rem gap between fields */
.woocommerce-checkout .form-row,
.woocommerce form .form-row {
  margin-bottom: 0.5rem !important;
  padding: 0 !important;
}
.woocommerce-checkout label,
.woocommerce form .form-row label {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  color: var(--fg) !important;
  margin-bottom: 0.2rem !important;
  display: block !important;
}
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="number"],
.woocommerce-checkout textarea,
.woocommerce-checkout select {
  font-family: var(--font-sans) !important;
  border: 1px solid #d1d9e6 !important;
  border-radius: 6px !important;
  padding: 0.5rem 0.75rem !important;  /* was 0.65rem 0.9rem */
  font-size: 0.9rem !important;
  color: var(--fg) !important;
  width: 100% !important;
  transition: border-color 0.15s ease !important;
}
.woocommerce-checkout input:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0,96,191,0.1) !important;
}
/* Place order button — compact size */
#place_order {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;       /* was 1.1rem */
  padding: 0.75rem 1.5rem !important; /* was 1rem 2rem */
  width: 100% !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}
#place_order:hover { background: var(--primary) !important; }

/* Payment section layout
   ─────────────────────────────────────────────────────────────────────
   Goal:
     ┌─────────────────────────────────────────────────────────────────┐
     │  ● Credit Card  [VISA] [MC] [AMEX] [DISC]                      │
     │  ──────────────────────────────────────────────────────────     │
     │  Pay securely using your credit card.                           │
     │  Card Number [___________________________________]              │
     │  Expiration [___________]    CSC [___________]                  │
     ├─────────────────────────────────────────────────────────────────┤
     │  ○ PayPal                                     [PayPal logo]     │
     └─────────────────────────────────────────────────────────────────┘
   Each li uses block layout: radio+label header, payment_box below.
   ─────────────────────────────────────────────────────────────────── */
.woocommerce-checkout #payment {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
.woocommerce-checkout #payment ul.payment_methods {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Each payment method — block layout so label+logos are above the form */
.woocommerce-checkout #payment ul.payment_methods li {
  display: block !important;
  padding: 0.75rem 1rem !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
.woocommerce-checkout #payment ul.payment_methods li:last-child {
  border-bottom: none !important;
}

/* Radio + method name + logos — keep all inline on one row */
.woocommerce-checkout #payment ul.payment_methods li > input[type="radio"] {
  vertical-align: middle !important;
  margin-right: 0.4rem !important;
  flex-shrink: 0 !important;
}
.woocommerce-checkout #payment ul.payment_methods li > label {
  display: inline !important;
  vertical-align: middle !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  color: var(--fg) !important;
  cursor: pointer !important;
}
.woocommerce-checkout #payment ul.payment_methods li > label img {
  vertical-align: middle !important;
  max-height: 24px !important;
  margin-left: 0.3rem !important;
}

/* Payment form — full-width block BELOW the label row */
.woocommerce-checkout #payment .payment_box {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 0.75rem !important;
  padding: 0.75rem !important;
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
}

/* Place order area */
.woocommerce-checkout #payment .place-order {
  padding: 1rem !important;
}

/* Order review table — fix display:block grey gap (same root cause as cart table).
   WooCommerce's shop_table_responsive class sets display:block which causes
   internal rows to only span content width, leaving empty space on the right. */
.woocommerce-checkout-review-order table.shop_table {
  display: table !important;
  overflow-x: visible !important;
  font-family: var(--font-sans) !important;
  width: 100% !important;
  border-collapse: collapse !important;
}
/* Only the THEAD header row (PRODUCT / SUBTOTAL columns) gets dark blue */
.woocommerce table.shop_table thead th {
  background: var(--primary) !important;
  color: #fff !important;
  padding: 0.65rem 1rem !important;
  white-space: nowrap !important;
}
/* tfoot rows (Subtotal, Shipping, Tax) — plain white, no blue */
.woocommerce table.shop_table tfoot tr th,
.woocommerce table.shop_table tfoot tr td {
  background: #fff !important;
  color: var(--fg) !important;
  font-weight: 600 !important;
  padding: 0.65rem 1rem !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
/* Total row — subtle highlight to distinguish from other tfoot rows */
.woocommerce table.shop_table tfoot tr.order-total th,
.woocommerce table.shop_table tfoot tr.order-total td {
  background: #eef2f7 !important;
  color: var(--primary) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  border-bottom: none !important;
}

/* ============================================================
   MY ACCOUNT PAGE
   ============================================================ */
.woocommerce-account .woocommerce-MyAccount-navigation {
  background: var(--primary) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: block !important;
  padding: 0.75rem 1.25rem !important;
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.85) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
  background: var(--accent) !important;
  color: #fff !important;
}
.woocommerce-account .woocommerce-MyAccount-content {
  font-family: var(--font-sans) !important;
  color: var(--fg) !important;
  line-height: 1.75 !important;
}
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
  font-family: var(--font-serif) !important;
  color: var(--primary) !important;
}
/* Account tables */
.woocommerce-account .woocommerce-orders-table th,
.woocommerce-account .woocommerce-table th {
  background: var(--primary) !important;
  color: #fff !important;
  font-family: var(--font-sans) !important;
  padding: 0.65rem 1rem !important;
}
.woocommerce-account .woocommerce-orders-table td,
.woocommerce-account .woocommerce-table td {
  font-family: var(--font-sans) !important;
  padding: 0.65rem 1rem !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
.woocommerce-account .woocommerce-orders-table .button {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 0.4rem 0.9rem !important;
  font-family: var(--font-sans) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
/* Account form fields */
.woocommerce-account .woocommerce-EditAccountForm input,
.woocommerce-account .woocommerce-address-fields input,
.woocommerce-account .woocommerce-address-fields select,
.woocommerce-account .woocommerce-EditAccountForm select {
  font-family: var(--font-sans) !important;
  border: 1px solid #d1d9e6 !important;
  border-radius: 6px !important;
  padding: 0.6rem 0.9rem !important;
  width: 100% !important;
}

/* Login form on My Account */
.woocommerce-account .woocommerce-form-login input {
  font-family: var(--font-sans) !important;
  border: 1px solid #d1d9e6 !important;
  border-radius: 6px !important;
  padding: 0.65rem 0.9rem !important;
  width: 100% !important;
}
.woocommerce-account .woocommerce-form-login .woocommerce-form__input-checkbox { width: auto !important; }
.woocommerce-account .woocommerce-form-login .button,
.woocommerce-account .woocommerce-form-register .button {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  padding: 0.75rem 2rem !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}
.woocommerce-account .woocommerce-form-login .button:hover { background: var(--primary) !important; }

/* ============================================================
   ORDER CONFIRMATION / THANK YOU
   ============================================================ */
.woocommerce-order .woocommerce-order-details,
.woocommerce-order .woocommerce-customer-details {
  font-family: var(--font-sans) !important;
}
.woocommerce-order h2 {
  font-family: var(--font-serif) !important;
  color: var(--primary) !important;
  font-size: 1.25rem !important;
}
.woocommerce-notice--success,
.woocommerce-order .woocommerce-notice {
  background: #f0fdf4 !important;
  border-left: 4px solid #22c55e !important;
  color: #166534 !important;
  border-radius: 8px !important;
  padding: 1rem 1.25rem !important;
  font-family: var(--font-sans) !important;
  margin-bottom: 1.5rem !important;
}

/* ============================================================
   GLOBAL WC NOTICES
   ============================================================ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  font-family: var(--font-sans) !important;
  border-radius: 8px !important;
  padding: 0.875rem 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  margin-bottom: 1.5rem !important;
  position: relative !important;
}
.woocommerce-message { background: #f0fdf4 !important; border-left: 4px solid #22c55e !important; color: #166534 !important; }
.woocommerce-info { background: var(--secondary) !important; border-left: 4px solid var(--accent) !important; color: var(--primary) !important; }
.woocommerce-error { background: #fef2f2 !important; border-left: 4px solid #ef4444 !important; color: #991b1b !important; }

/* Reset WooCommerce's absolutely-positioned ::before icon so it
   becomes a regular flex item and doesn't overlap the message text. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  position: static !important;
  top: auto !important;
  left: auto !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

/* ============================================================
   PAGINATION (shop/archive)
   ============================================================ */
.woocommerce nav.woocommerce-pagination ul {
  display: flex !important;
  gap: 0.35rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 2rem 0 !important;
  justify-content: center !important;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 6px !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  border: 1px solid #d1d9e6 !important;
  color: var(--fg) !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}
.woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--secondary) !important; border-color: var(--accent) !important; color: var(--accent) !important; }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }

/* ============================================================
   BREADCRUMB (WooCommerce's own)
   ============================================================ */
.woocommerce .woocommerce-breadcrumb {
  font-family: var(--font-sans) !important;
  font-size: 0.85rem !important;
  color: var(--muted-fg) !important;
  margin-bottom: 1.5rem !important;
}
.woocommerce .woocommerce-breadcrumb a { color: var(--accent) !important; text-decoration: none !important; }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--primary) !important; }

/* ============================================================
   RESPONSIVE — Tablet & Mobile breakpoints for 4-column grid
   ============================================================ */
@media (max-width: 900px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
  }
}
@media (max-width: 600px) {
  .woocommerce .products,
  .woocommerce-page .products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__link img,
  .woocommerce ul.products li.product a img { height: 140px !important; }
  .woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: 1.5rem !important; }
}
@media (max-width: 400px) {
  .woocommerce .products,
  .woocommerce-page .products { grid-template-columns: 1fr !important; }
}

/* ============================================================
   WOOCOMMERCE MOBILE HEADER FIXES (added 2026-06-15)
   ============================================================ */

/* Ensure hamburger is always visible at mobile on WooCommerce pages.
   WooCommerce's own CSS bundle can interfere with display values. */
@media screen and (max-width: 767px) {
  .woocommerce #hamburger-btn,
  .woocommerce-page #hamburger-btn,
  .woocommerce-shop #hamburger-btn,
  .woocommerce-cart #hamburger-btn,
  .woocommerce-checkout #hamburger-btn,
  .woocommerce-account #hamburger-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  /* Ensure logo-row inner stays flex and doesn't collapse */
  .woocommerce .logo-row__inner,
  .woocommerce-page .logo-row__inner {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
  }
}