/* ============================================================
   S&B Tools — WooCommerce brand styling
   Reuses the design tokens from /sb-assets/styles.css (:root).
   Black/orange, Rajdhani display + Montserrat body.
   ============================================================ */

/* ---- Buttons: match the site's .btn (orange, Rajdhani italic caps) ---- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
.woocommerce-page a.button,
.woocommerce-page button.button,
.wc-block-components-button {
  background: var(--color-tool-orange) !important;
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-style: italic !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  border-radius: var(--radius-btn) !important;
  border: none !important;
  padding: .8em 1.7em !important;
  transition: background .2s, transform .1s, box-shadow .2s !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button.alt:hover,
.wc-block-components-button:hover {
  background: var(--color-accent-orange) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}

/* ---- Prices ---- */
.woocommerce .price,
.woocommerce span.amount,
.woocommerce ul.products li.product .price {
  color: var(--color-charcoal);
  font-family: var(--font-display);
  font-weight: 700;
}
.woocommerce del { color: var(--color-muted); font-weight: 500; }
.woocommerce ins { text-decoration: none; }

/* ---- Sale flash ---- */
.woocommerce span.onsale {
  background: var(--color-charcoal);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  border-radius: var(--radius-btn);
  min-height: 0; min-width: 0;
  padding: .3em .7em; line-height: 1.4;
}

/* ---- Product grid: brand cards ---- */
.woocommerce ul.products li.product {
  background: #fff;
  border: var(--border-light);
  border-radius: var(--radius-card);
  padding: 14px;
  transition: box-shadow .2s, transform .15s, border-color .2s;
}
.woocommerce ul.products li.product:hover {
  border-color: var(--color-tool-orange);
  box-shadow: var(--shadow-product);
  transform: translateY(-3px);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-charcoal);
}

/* ---- CRITICAL grid fix (learned on ADAS): WooCommerce's ul.products
   ::before/::after clearfix pseudo-elements become phantom grid cells,
   causing a blank first cell + a dropped last product. Kill them. ---- */
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; display: none !important; }
.woocommerce ul.products,
.woocommerce-page ul.products { display: grid; grid-gap: 18px; gap: 18px; }
.woocommerce ul.products li.product { min-width: 0; float: none; margin: 0 !important; width: auto !important; }

/* ---- Section headings ---- */
.woocommerce .products h2,
.woocommerce h1.entry-title,
.woocommerce h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
}

/* ---- Notices / messages ---- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top-color: var(--color-tool-orange);
  border-radius: var(--radius-card);
}
.woocommerce-message { border-top-color: var(--color-success); }

/* ---- Form fields (cart / checkout / account) ---- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce .select2-container .select2-selection,
.woocommerce-page form .form-row input.input-text,
.wc-block-components-text-input input {
  border: var(--border-light);
  border-radius: var(--radius-btn);
  padding: .7em .9em;
  font-family: var(--font-body);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--color-tool-orange);
  outline: none;
  box-shadow: 0 0 0 3px rgba(249,115,22,.15);
}

/* ---- Cart / checkout tables ---- */
.woocommerce table.shop_table {
  border-radius: var(--radius-card);
  border-color: var(--color-line-light);
}
.woocommerce table.shop_table th { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; }
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review_heading { font-family: var(--font-display); }

/* ---- Tabs / related (full width, not squished beside grid) ---- */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells { grid-column: 1 / -1; clear: both; }

/* ---- Shop archive layout (S&B) ---- */
.shop-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:36px;align-items:start}
.shop-main{min-width:0}
.shop-filter h4{font-family:var(--font-display);font-weight:700;font-style:italic;text-transform:uppercase;margin:0 0 .9rem;padding-bottom:.5rem;border-bottom:2px solid var(--color-tool-orange)}
.shop-filter-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.shop-filter-list label{display:flex;gap:.5rem;align-items:center;font-size:.92rem;cursor:pointer;color:var(--color-dark-gray)}
.shop-filter-list small{color:var(--color-muted)}
.shop-toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.3rem;flex-wrap:wrap}
.shop-toolbar .woocommerce-result-count{margin:0;color:var(--color-muted);font-size:.9rem}
.shop-products ul.products{grid-template-columns:repeat(3,minmax(0,1fr))}
.btn-clear{margin-top:1rem;display:inline-block}
@media(max-width:900px){.shop-layout{grid-template-columns:1fr}.shop-products ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}}