/*
 * WooCommerce structural base -- loads before woocommerce-reskin.css (which owns 100%
 * of the visual/color layer already: this file provides layout mechanics only, nothing
 * here should set color/background/radius, that's reskin's job). Previously this came
 * for free from Storefront's own assets/css/woocommerce/woocommerce.css, auto-enqueued
 * by the parent theme's Storefront_WooCommerce class regardless of this child theme's
 * own functions.php. Curated (not a full copy) from Storefront 4.6.2's compiled
 * woocommerce.css -- .woocommerce-tabs intentionally NOT ported (single-product.php
 * skips WC's native product tabs/reviews tab entirely, see
 * docs/superpowers/specs/2026-07-24-single-product-page-redesign-design.md). See
 * docs/superpowers/specs/2026-08-04-remove-storefront-dependency-design.md.
 */

/* Checkout form (form-checkout.php) + MyAccount edit-address/edit-account forms (no
   myc override exists for either MyAccount template) both render through this grid. */
.form-row label { display: block; }
.form-row input,
.form-row textarea,
.form-row select { width: 100%; }
.form-row input[type="checkbox"],
.form-row input[type="radio"] { width: auto; }
.form-row .button { width: auto; }
.form-row.woocommerce-validated input.input-text { box-shadow: inset 2px 0 0 var(--myc-success, #7A8B69); }
.form-row.woocommerce-invalid input.input-text { box-shadow: inset 2px 0 0 var(--myc-error, #C25B4E); }
.form-row.woocommerce-invalid input.input-checkbox { outline: 2px solid var(--myc-error, #C25B4E); outline-offset: 1px; }
.form-row-last { margin-right: 0 !important; }
.form-row-wide { clear: both; width: 100%; }

/* Billing/shipping side-by-side split -- MyAccount addresses page only (checkout's own
   two-column layout is fully custom in checkout.css and doesn't use .col2-set at all). */
.col2-set { display: flex; flex-wrap: wrap; gap: 4%; }
.col2-set .form-row-first,
.col2-set .form-row-last,
.col2-set.addresses .col-1,
.col2-set.addresses .col-2 { flex: 1 1 44%; }

/* Native quantity input -- cart-quantity-stepper.js enhances this element, doesn't
   replace it. */
.quantity .qty { width: 3.5em; text-align: center; }
table.cart .quantity .qty { padding: .6em; }

/* WC core marks any table.shop_table_responsive for a stacked-rows mobile layout
   (data-title::before pseudo-labels) -- cart.css's own totals table explicitly resets
   out of this (".myc-cart-totals-table" isn't that class), confirming the behavior is
   real and applies elsewhere (MyAccount order history/view, no myc override there). */
@media (max-width: 767px) {
  table.shop_table_responsive thead { display: none; }
  table.shop_table_responsive tr td {
    display: block;
    text-align: right;
    clear: both;
  }
  table.shop_table_responsive tr td[data-title]::before {
    content: attr(data-title) ": ";
    font-weight: 600;
    float: left;
  }
}

/* Sale-price strikethrough -- wherever $product->get_price_html() renders (PDP, cart,
   related/upsell cards, checkout review). */
.price del { opacity: .6; font-weight: 400; }
.price del + ins { margin-left: .3em; text-decoration: none; }

/* Without this, WC core's <ul class="woocommerce-error"> shows a default bullet in
   addition to woocommerce-reskin.css's own "⚠" ::before icon. Everything else about
   notice styling (color/border/radius/padding) is already fully owned by
   woocommerce-reskin.css -- this is the one structural line it doesn't set. */
.woocommerce-error { list-style: none; margin-left: 0; }