/* Toolspot4u Child Theme — WooCommerce Integration (Paper & Ember)
   Overrides WC default styles to match the Paper & Ember design system.
   Does not touch WC core PHP. CSS-only approach. */

/* ── WC form fields (reuse Paper & Ember form tokens) ───────────────────── */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea {
  font-family:   var(--body) !important;
  font-size:     1rem !important;
  color:         var(--ink) !important;
  background:    var(--f-bg) !important;
  border:        1px solid var(--f-border) !important;
  border-radius: var(--f-radius) !important;
  height:        var(--f-h) !important;
  padding:       var(--f-py) var(--f-px) !important;
  box-shadow:    none !important;
  transition:    border-color var(--dur-std), box-shadow var(--dur-std) !important;
  width:         100% !important;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--f-border-focus) !important;
  box-shadow:   var(--f-focus-ring) !important;
  outline:      none !important;
}

.woocommerce form .form-row textarea { height: auto !important; min-height: 120px !important; }

/* WC labels */
.woocommerce form .form-row label {
  font-family:    var(--f-label-font) !important;
  font-size:      var(--f-label-size) !important;
  letter-spacing: var(--f-label-tracking) !important;
  text-transform: uppercase !important;
  color:          var(--ink-60) !important;
  margin-bottom:  8px !important;
  font-weight:    500 !important;
}

/* ── WC buttons ─────────────────────────────────────────────────────────── */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce #payment #place_order {
  background:    var(--ember) !important;
  color:         #fff !important;
  border:        0 !important;
  border-radius: var(--r-lg) !important;
  font-family:   var(--body) !important;
  font-weight:   600 !important;
  font-size:     1rem !important;
  padding:       14px 26px !important;
  height:        auto !important;
  line-height:   1.5 !important;
  box-shadow:    none !important;
  text-shadow:   none !important;
  transition:    background var(--dur-std), transform var(--dur-std) !important;
  cursor:        pointer !important;
  display:       inline-flex !important;
  align-items:   center !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .button.alt:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce #payment #place_order:hover {
  background: var(--ember-deep) !important;
  color:      #fff !important;
  transform:  translateY(-2px) !important;
}

/* Secondary / outline button (e.g. "Continue Shopping") */
.woocommerce a.button.secondary,
.woocommerce button.button.secondary {
  background:   transparent !important;
  color:        var(--ink) !important;
  border:       1.5px solid var(--ink-30) !important;
}
.woocommerce a.button.secondary:hover,
.woocommerce button.button.secondary:hover {
  background:   var(--linen) !important;
  border-color: var(--ink) !important;
  color:        var(--ink) !important;
  transform:    none !important;
}

/* ── WC notices ─────────────────────────────────────────────────────────── */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: var(--r-lg) !important;
  border-left:   4px solid var(--ember) !important;
  background:    var(--linen) !important;
  color:         var(--ink) !important;
  padding:       16px 20px !important;
  margin-bottom: 20px !important;
  font-size:     0.95rem !important;
  box-shadow:    none !important;
}
.woocommerce-error {
  border-left-color: var(--state-error) !important;
  background:        rgba(220,38,38,.06) !important;
}
.woocommerce-info { border-left-color: var(--state-info) !important; }

/* ── WC cart table ──────────────────────────────────────────────────────── */

.woocommerce table.shop_table {
  border:        1px solid var(--ink-12) !important;
  border-radius: var(--r-xl) !important;
  overflow:      hidden !important;
}
.woocommerce table.shop_table thead { background: var(--linen) !important; }
.woocommerce table.shop_table thead th {
  font-family:    var(--mono) !important;
  font-size:      0.72rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color:          var(--ink-60) !important;
  padding:        14px 20px !important;
  border-bottom:  1px solid var(--ink-12) !important;
}
.woocommerce table.shop_table tbody td {
  padding:       16px 20px !important;
  border-bottom: 1px solid var(--ink-12) !important;
  color:         var(--ink) !important;
  font-size:     0.95rem !important;
}
.woocommerce table.shop_table tfoot .order-total .amount {
  font-family:    var(--disp) !important;
  font-weight:    700 !important;
  font-size:      1.6rem !important;
  letter-spacing: -0.02em !important;
  color:          var(--ink) !important;
}

/* ── WC product rating stars ────────────────────────────────────────────── */

.woocommerce .star-rating span,
.woocommerce .star-rating::before { color: var(--ember) !important; }

/* ── WC price ────────────────────────────────────────────────────────────── */

.woocommerce .price { font-family: var(--disp); font-weight: 700; color: var(--ink); }
.woocommerce .price ins { text-decoration: none; color: var(--ember); }
.woocommerce .price del { color: var(--ink-30); font-weight: 400; }

/* ── Select2 dropdowns (used in WC checkout) ────────────────────────────── */

.select2-container--default .select2-selection--single {
  height:        var(--f-h) !important;
  border:        1px solid var(--f-border) !important;
  border-radius: var(--f-radius) !important;
  background:    var(--f-bg) !important;
  transition:    border-color var(--dur-std), box-shadow var(--dur-std) !important;
}
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--f-border-focus) !important;
  box-shadow:   var(--f-focus-ring) !important;
  outline:      none !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: var(--f-h) !important;
  padding-left: var(--f-px) !important;
  color:       var(--ink) !important;
  font-family: var(--body) !important;
  font-size:   1rem !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: var(--f-h) !important;
  right:  14px !important;
}
.select2-dropdown {
  border:        1px solid var(--ink-12) !important;
  border-radius: var(--r-lg) !important;
  box-shadow:    var(--shadow-md) !important;
  background:    #fff !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--ember) !important;
  color:      #fff !important;
}

/* ── WC product grid — filter parity fix ───────────────────────────────────
 * WooCommerce filter JS hides products via element.style.display = 'none'.
 * If any theme or plugin adds a display !important rule, it overrides the
 * inline style. This rule wins back: hidden means hidden.
 * ─────────────────────────────────────────────────────────────────────────── */

.woocommerce ul.products li.product[style*="display: none"],
.woocommerce ul.products li.product[style*="display:none"],
.woocommerce-page ul.products li.product[style*="display: none"],
.woocommerce-page ul.products li.product[style*="display:none"] {
  display: none !important;
}

/* ── WC checkout card ────────────────────────────────────────────────────── */

.woocommerce-checkout #order_review,
.woocommerce-checkout #customer_details {
  background:    var(--linen) !important;
  border-radius: var(--r-xl) !important;
  padding:       32px !important;
  border:        1px solid var(--ink-12) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   SINGLE PRODUCT PAGE
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Product layout wrapper ──────────────────────────────────────────────── */

.woocommerce div.product {
  display:   grid !important;
  grid-template-columns: 55% 1fr !important;
  gap:       var(--sp-12) !important;
  align-items: start !important;
}

/* Images + summary are the two top-level grid children */
.woocommerce div.product .woocommerce-product-gallery { grid-column: 1; }
.woocommerce div.product .summary                     { grid-column: 2; }

/* Tabs + related/upsells span full width */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related.products,
.woocommerce div.product .up-sells.upsells.products {
  grid-column: 1 / -1 !important;
}

@media (max-width: 768px) {
  .woocommerce div.product {
    grid-template-columns: 1fr !important;
    gap:                   var(--sp-8) !important;
  }
  .woocommerce div.product .woocommerce-product-gallery,
  .woocommerce div.product .summary { grid-column: 1 !important; }
}

/* ── Product gallery ─────────────────────────────────────────────────────── */

.woocommerce-product-gallery__wrapper img {
  border-radius: var(--r-xl) !important;
  display:       block !important;
}

.flex-control-thumbs li img {
  border-radius: var(--r-sm) !important;
  border:        2px solid transparent !important;
  transition:    border-color var(--dur-std) !important;
  cursor:        pointer !important;
}
.flex-control-thumbs li img.flex-active,
.flex-control-thumbs li img:hover { border-color: var(--ember) !important; }

/* ── Product title & meta ────────────────────────────────────────────────── */

.woocommerce div.product h1.product_title,
.woocommerce-page div.product h1.product_title {
  font-family:    var(--disp) !important;
  font-size:      clamp(1.6rem, 3vw, 2.4rem) !important;
  font-weight:    700 !important;
  letter-spacing: -0.02em !important;
  color:          var(--ink) !important;
  line-height:    1.15 !important;
  margin-bottom:  var(--sp-3) !important;
}

.woocommerce div.product .woocommerce-product-rating {
  display:     flex !important;
  align-items: center !important;
  gap:         8px !important;
  margin-bottom: var(--sp-4) !important;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family:    var(--disp) !important;
  font-size:      2rem !important;
  font-weight:    700 !important;
  letter-spacing: -0.02em !important;
  color:          var(--ink) !important;
  margin-bottom:  var(--sp-5) !important;
  display:        block !important;
}
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
  color:           var(--ember) !important;
  text-decoration: none !important;
}
.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
  color:       var(--ink-30) !important;
  font-weight: 400 !important;
  font-size:   1.4rem !important;
  margin-right: 8px !important;
}

/* Short description */
.woocommerce div.product .woocommerce-product-details__short-description {
  font-size:     1rem !important;
  color:         var(--ink-60) !important;
  line-height:   1.7 !important;
  margin-bottom: var(--sp-6) !important;
}

/* ── Quantity stepper ────────────────────────────────────────────────────── */

.woocommerce .quantity input.qty {
  font-family:   var(--body) !important;
  font-size:     1rem !important;
  font-weight:   600 !important;
  color:         var(--ink) !important;
  background:    var(--f-bg) !important;
  border:        1.5px solid var(--f-border) !important;
  border-radius: var(--f-radius) !important;
  height:        var(--f-h) !important;
  width:         80px !important;
  padding:       0 var(--f-px) !important;
  text-align:    center !important;
  box-shadow:    none !important;
  transition:    border-color var(--dur-std) !important;
}
.woocommerce .quantity input.qty:focus {
  border-color: var(--ember) !important;
  box-shadow:   var(--f-focus-ring) !important;
  outline:      none !important;
}

/* Add-to-cart row: qty + button side by side */
.woocommerce form.cart {
  display:     flex !important;
  align-items: center !important;
  gap:         var(--sp-3) !important;
  flex-wrap:   wrap !important;
}

/* ── Product meta (SKU, categories, tags) ────────────────────────────────── */

.woocommerce div.product .product_meta {
  margin-top:  var(--sp-5) !important;
  padding-top: var(--sp-5) !important;
  border-top:  1px solid var(--ink-12) !important;
  font-family: var(--mono) !important;
  font-size:   0.72rem !important;
  letter-spacing: 0.05em !important;
  color:       var(--ink-60) !important;
}
.woocommerce div.product .product_meta a {
  color:       var(--ember-deep) !important;
  text-decoration: none !important;
}
.woocommerce div.product .product_meta a:hover { color: var(--ink) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   PRODUCT TABS  (.woocommerce-tabs)
   ══════════════════════════════════════════════════════════════════════════

   TODO — implement this section yourself!

   WooCommerce outputs:
     <div class="woocommerce-tabs">
       <ul class="tabs">
         <li class="active"><a href="#tab-description">Description</a></li>
         <li><a href="#tab-reviews">Reviews (3)</a></li>
       </ul>
       <div class="panel" id="tab-description"> ... </div>
     </div>

   Selectors to target:
     .woocommerce-tabs .tabs          — the tab bar <ul>
     .woocommerce-tabs .tabs li       — each tab item
     .woocommerce-tabs .tabs li.active — selected tab
     .woocommerce-tabs .tabs li a     — the clickable link
     .woocommerce-tabs .panel         — the content panel below

   Design decision: pick ONE of these three styles and implement it:

   A) Underline tabs (matches auth .tabrow — most consistent)
      Active tab: border-bottom 2px solid var(--ember), no background
      Panel: no border/background, just top padding

   B) Pill tabs (more modern / distinct from auth tabs)
      Tab bar: flex row with gap; each tab gets border-radius var(--r-pill)
      Active: background var(--ember), color #fff
      Panel: background var(--linen), border-radius var(--r-xl), padding 32px

   C) Card border style (editorial feel)
      Tab bar: border-bottom 1px solid var(--ink-12)
      Active tab: background #fff, border 1px solid var(--ink-12),
                  border-bottom-color #fff, margin-bottom -1px, rounded top corners
      Panel: background #fff, border 1px solid var(--ink-12), border-top: none,
             border-radius 0 0 var(--r-xl) var(--r-xl), padding 32px

   Constraints:
   - Tab bar should have margin-top: var(--sp-16) to separate from product gallery
   - Panel typography: font-family var(--body), font-size 1rem, color var(--ink),
     line-height 1.7
   - Use !important on all rules (WC specificity battle)
   - 8–12 lines is plenty
   ─────────────────────────────────────────────────────────────────────────── */

.woocommerce-tabs .tabs {
  list-style:    none !important;
  padding:       0 !important;
  margin:        var(--sp-16) 0 0 !important;
  display:       flex !important;
  gap:           0 !important;
  border-bottom: 1px solid var(--ink-12) !important;
}
.woocommerce-tabs .tabs li {
  margin:  0 !important;
  padding: 0 !important;
}
.woocommerce-tabs .tabs li a {
  display:        block !important;
  padding:        12px 20px !important;
  font-family:    var(--body) !important;
  font-size:      0.95rem !important;
  font-weight:    500 !important;
  color:          var(--ink-60) !important;
  text-decoration: none !important;
  border-bottom:  2px solid transparent !important;
  margin-bottom:  -1px !important;
  transition:     color var(--dur-std), border-color var(--dur-std) !important;
}
.woocommerce-tabs .tabs li a:hover { color: var(--ink) !important; }
.woocommerce-tabs .tabs li.active a {
  color:        var(--ink) !important;
  font-weight:  600 !important;
  border-color: var(--ember) !important;
}
.woocommerce-tabs .panel {
  padding:     var(--sp-8) 0 !important;
  font-family: var(--body) !important;
  font-size:   1rem !important;
  color:       var(--ink) !important;
  line-height: 1.7 !important;
}
.woocommerce-tabs .panel h2 {
  font-family:    var(--disp) !important;
  font-size:      1.25rem !important;
  font-weight:    700 !important;
  letter-spacing: -0.01em !important;
  color:          var(--ink) !important;
  margin-bottom:  var(--sp-4) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   CART — TOTALS + COUPON
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Cart totals card (right column) ─────────────────────────────────────── */

.woocommerce-cart .cart_totals {
  background:    var(--linen) !important;
  border:        1px solid var(--ink-12) !important;
  border-radius: var(--r-xl) !important;
  padding:       28px !important;
}
.woocommerce-cart .cart_totals h2 {
  font-family:    var(--disp) !important;
  font-size:      1.25rem !important;
  font-weight:    700 !important;
  letter-spacing: -0.01em !important;
  color:          var(--ink) !important;
  margin-bottom:  var(--sp-5) !important;
}

/* ── Coupon code row ─────────────────────────────────────────────────────── */

.woocommerce-cart .coupon {
  display:   flex !important;
  gap:       var(--sp-2) !important;
  flex-wrap: wrap !important;
}
.woocommerce-cart .coupon input#coupon_code {
  flex:          1 1 160px !important;
  min-width:     0 !important;
  font-family:   var(--body) !important;
  font-size:     1rem !important;
  color:         var(--ink) !important;
  background:    var(--f-bg) !important;
  border:        1.5px solid var(--f-border) !important;
  border-radius: var(--f-radius) !important;
  height:        var(--f-h) !important;
  padding:       var(--f-py) var(--f-px) !important;
  box-shadow:    none !important;
  transition:    border-color var(--dur-std) !important;
}
.woocommerce-cart .coupon input#coupon_code:focus {
  border-color: var(--ember) !important;
  box-shadow:   var(--f-focus-ring) !important;
  outline:      none !important;
}

/* ── Remove item button (×) in cart ─────────────────────────────────────── */

.woocommerce td.product-remove a.remove {
  color:           var(--ink-30) !important;
  font-size:       1.4rem !important;
  line-height:     1 !important;
  transition:      color var(--dur-std) !important;
  text-decoration: none !important;
}
.woocommerce td.product-remove a.remove:hover { color: var(--state-error) !important; }

/* ── Cart product thumbnail ──────────────────────────────────────────────── */

.woocommerce td.product-thumbnail img {
  border-radius: var(--r-sm) !important;
  width:         72px !important;
  height:        72px !important;
  object-fit:    cover !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   CHECKOUT — PAYMENT METHODS
   ══════════════════════════════════════════════════════════════════════════ */

.woocommerce-checkout #payment {
  background:    var(--linen) !important;
  border-radius: var(--r-xl) !important;
  padding:       28px !important;
  border:        1px solid var(--ink-12) !important;
}

.woocommerce-checkout #payment ul.payment_methods {
  list-style:    none !important;
  padding:       0 !important;
  margin:        0 0 var(--sp-5) !important;
  display:       flex !important;
  flex-direction: column !important;
  gap:           var(--sp-2) !important;
}

.woocommerce-checkout #payment ul.payment_methods li {
  padding:       14px 16px !important;
  background:    #fff !important;
  border:        1.5px solid var(--ink-12) !important;
  border-radius: var(--r-md) !important;
  transition:    border-color var(--dur-std) !important;
  cursor:        pointer !important;
}
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) {
  border-color:  var(--ember) !important;
  background:    rgba(255,92,0,.04) !important;
}

.woocommerce-checkout #payment ul.payment_methods li label {
  font-family:    var(--body) !important;
  font-size:      0.95rem !important;
  font-weight:    500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color:          var(--ink) !important;
  cursor:         pointer !important;
  display:        flex !important;
  align-items:    center !important;
  gap:            10px !important;
}

.woocommerce-checkout #payment .payment_box {
  background:    var(--linen-deep) !important;
  border-radius: var(--r-sm) !important;
  padding:       14px 16px !important;
  margin-top:    10px !important;
  font-size:     0.9rem !important;
  color:         var(--ink-60) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   RELATED + UPSELL PRODUCT GRID
   ══════════════════════════════════════════════════════════════════════════ */

.woocommerce .related.products h2,
.woocommerce .up-sells.upsells.products h2 {
  font-family:    var(--disp) !important;
  font-size:      1.5rem !important;
  font-weight:    700 !important;
  letter-spacing: -0.02em !important;
  color:          var(--ink) !important;
  margin-bottom:  var(--sp-6) !important;
  padding-top:    var(--sp-16) !important;
  border-top:     1px solid var(--ink-12) !important;
}

/* ── WC breadcrumb ───────────────────────────────────────────────────────── */

.woocommerce .woocommerce-breadcrumb {
  font-family:    var(--mono) !important;
  font-size:      0.72rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color:          var(--ink-60) !important;
  margin-bottom:  var(--sp-6) !important;
}
.woocommerce .woocommerce-breadcrumb a {
  color:           var(--ink-60) !important;
  text-decoration: none !important;
  transition:      color var(--dur-std) !important;
}
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--ember) !important; }

/* ── Empty cart state ────────────────────────────────────────────────────── */

.woocommerce-cart .cart-empty {
  font-family:    var(--disp) !important;
  font-size:      1.25rem !important;
  color:          var(--ink-60) !important;
  text-align:     center !important;
  padding:        var(--sp-16) 0 !important;
}
.woocommerce-cart .return-to-shop {
  text-align: center !important;
  margin-top: var(--sp-5) !important;
}