/*
 * Resets/overrides for default WooCommerce markup we don't fully template
 * over, so it inherits Sloganista's type/colour system instead of the
 * WooCommerce starter styles. Kept separate from components.css so it's
 * obvious which rules exist only to neutralise WooCommerce defaults.
 */

.woocommerce {
  font-family: var(--font-body);
  color: var(--text-primary);
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  font-weight: 500;
  border: var(--border-w) solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--accent-primary);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-tag);
  padding: 12px 20px;
  font-size: 12px;
  transition: transform var(--dur-fast) var(--ease-snap), box-shadow var(--dur-fast) var(--ease-snap);
}
/*
 * `a.button` is a link, not a <button> — the base rule above sets `color`
 * but doesn't cover every link state, so the browser's default
 * visited/focus/active link color could win over the button's own cobalt
 * background. Pinning every state explicitly fixes that.
 *
 * This covers genuinely classic WooCommerce markup only (e.g. the PDP's
 * "Add to cart" button, woocommerce/content-single-product.php, which is
 * a real theme template override). Cart and Checkout are NOT classic —
 * confirmed by inspecting the live DOM — they render via WooCommerce
 * Blocks (wc-block-cart / wc-block-checkout), a separate React-rendered
 * markup tree these `.woocommerce a.button` etc. selectors never match.
 * See the "WooCommerce Blocks" section below for the actual Cart/Checkout
 * fix, including the real root cause of the same visited-link bug there.
 */
.woocommerce a.button:link,
.woocommerce a.button:visited,
.woocommerce a.button:hover,
.woocommerce a.button:focus,
.woocommerce a.button:active {
  color: var(--text-on-accent);
  text-decoration: none;
}
.woocommerce a.button:hover,
.woocommerce a.button:focus,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: var(--accent-primary-hover);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-tag-hover);
  transform: translate(-1px, -1px);
}
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active {
  box-shadow: var(--shadow-tag-press);
  transform: translate(2px, 2px);
}

.woocommerce span.onsale {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  background: var(--signal-sale-bg);
  color: var(--signal-sale);
  border: 1px solid var(--signal-sale);
  border-radius: var(--radius-pill);
  min-height: 0;
  min-width: 0;
  padding: 4px 10px;
  line-height: 1;
  position: static;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
  font-family: var(--font-body);
  border-top-color: var(--accent-primary);
  background: var(--surface-card);
}
.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--accent-primary);
}
.woocommerce-error::before {
  color: var(--signal-error);
}

.woocommerce .price {
  font-family: var(--font-mono);
  color: var(--text-primary);
}
.woocommerce .price del {
  color: var(--text-muted);
}
.woocommerce .price ins {
  text-decoration: none;
  color: var(--signal-sale);
}

/* Breadcrumb + result-count/ordering bar are hidden site-wide — the shop
   head + filter tags (template-parts) replace them, matching the
   approved Shop.tsx page. */
.woocommerce-breadcrumb,
.woocommerce-result-count,
.woocommerce-ordering {
  display: none;
}

/*
 * Order-received (thank-you) page: this IS genuinely classic WooCommerce
 * markup (confirmed — WooCommerce Blocks replaces Cart/Checkout, not the
 * post-purchase thank-you page), so table.shop_table here is real and
 * live. Cart/Checkout styling lives in the "WooCommerce Blocks" section
 * further down.
 */
.woocommerce table.shop_table {
  border: var(--border-w-hairline) solid var(--border-subtle);
  border-collapse: collapse;
  width: 100%;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-w-hairline) solid var(--border-subtle);
}

/*
 * WooCommerce Blocks — the ACTUAL Cart/Checkout implementation on this
 * site. Confirmed by inspecting the live DOM (shopsloganista.com/cart/
 * and /checkout/): both pages render the WooCommerce Cart/Checkout
 * blocks (wc-block-cart / wc-block-checkout, React-rendered), not the
 * classic shortcode markup the rest of this file's older Cart/Checkout
 * rules assumed. Those classic selectors (table.cart, #customer_details,
 * form.checkout, #payment, etc.) never matched anything here and have
 * been removed. Only the Order-received/thank-you page (below) is
 * genuinely classic markup.
 *
 * Root cause of the "Proceed to Checkout"/button-turns-blue bug: WordPress
 * core's Global Styles sets the default button color via
 *   :root :where(.wp-element-button, .wp-block-button__link) { color: #fff; ... }
 * `:where()` always contributes ZERO specificity, by design. The browser's
 * own default `a:visited` color rule has real specificity and so silently
 * wins once the Proceed-to-Checkout link (a real <a href> to /checkout/)
 * has been visited — which is essentially always, since the shopper just
 * came from there. This has nothing to do with this theme's own CSS load
 * order or specificity; it's a WordPress/Gutenberg behaviour that applies
 * to any theme. Fixed below by giving the real brand color real
 * specificity against every link state.
 */

/* ---- Cart (wc-block-cart) ---- */

.wc-block-cart-item__image img {
  width: 84px;
  height: 105px;
  object-fit: cover;
  border: var(--border-w-hairline) solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.wc-block-cart-item__wrap {
  gap: var(--space-2);
}
/*
 * The product title renders as <a class="wc-block-components-product-name">
 * with no color of its own, so it was inheriting this theme's generic
 * `a { color: var(--accent-primary) }` (base.css) — correct brand color,
 * wrong place: a plain product link shouldn't read as prominently as a
 * primary action link. Matches how product links are already styled
 * elsewhere (PDP related products, order-details table).
 */
a.wc-block-components-product-name,
a.wc-block-components-product-name:visited {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 500;
}
a.wc-block-components-product-name:hover,
a.wc-block-components-product-name:focus {
  color: var(--accent-primary);
  text-decoration: underline;
}

/*
 * The "Proceed to Checkout" button — see the root-cause note above. Every
 * link state is pinned with a real selector (class + pseudo-class, real
 * specificity) so none of them can lose to the browser's :visited default.
 * Also covers .wc-block-components-checkout-place-order-button on the off
 * chance a future WC version renders it as a link instead of <button> —
 * harmless either way since the selector just won't match a <button>.
 */
.wc-block-cart__submit-button:link,
.wc-block-cart__submit-button:visited,
.wc-block-cart__submit-button:hover,
.wc-block-cart__submit-button:focus,
.wc-block-cart__submit-button:active {
  background-color: var(--accent-primary);
  color: var(--text-on-accent);
  text-decoration: none;
}
.wc-block-cart__submit-button:hover,
.wc-block-cart__submit-button:focus {
  background-color: var(--accent-primary-hover);
}
/* Preserve a visible keyboard focus indicator — WC Blocks' own :focus
   style (an inset box-shadow ring) still applies underneath; this just
   also guarantees the brand focus ring theme-wide is present. */
.wc-block-cart__submit-button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---- Checkout (wc-block-checkout) ---- */

.wc-block-components-checkout-step {
  padding-block: var(--space-5);
  border-top: var(--border-w-hairline) solid var(--border-subtle);
}
.wc-block-components-checkout-step:first-child {
  border-top: none;
  padding-top: 0;
}
.wc-block-components-checkout-step__title {
  margin-bottom: var(--space-3);
}

/*
 * Place Order — a <button>, not a link (no :visited state to worry about),
 * restyled to match the rest of the site's primary-action buttons
 * (.woocommerce a.button, .slg-btn--primary) instead of WordPress's
 * default dark-grey Global Styles button color.
 */
.wc-block-components-checkout-place-order-button {
  background-color: var(--accent-primary);
  color: var(--text-on-accent);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  border: var(--border-w) solid var(--border-default);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-tag);
  transition: transform var(--dur-fast) var(--ease-snap), box-shadow var(--dur-fast) var(--ease-snap);
}
.wc-block-components-checkout-place-order-button:hover {
  background-color: var(--accent-primary-hover);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-tag-hover);
  transform: translate(-1px, -1px);
}
.wc-block-components-checkout-place-order-button:active {
  box-shadow: var(--shadow-tag-press);
  transform: translate(2px, 2px);
}
.wc-block-components-checkout-place-order-button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---- Order received / thank-you page ---- */
.woocommerce-order {
  padding-block: var(--space-6) var(--space-9);
}
.woocommerce-order .woocommerce-notice,
.woocommerce-order > p.woocommerce-thankyou-order-received {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--text-headline-2);
  color: var(--text-primary);
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 var(--space-6);
}
.woocommerce-order ul.woocommerce-order-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-5);
  list-style: none;
  margin: 0 0 var(--space-7);
  padding: var(--space-5);
  background: var(--surface-card);
  border: var(--border-w-hairline) solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.woocommerce-order ul.woocommerce-order-overview li {
  margin: 0;
  /* WooCommerce prints the label as plain text before <strong> (e.g.
     "Order number: <strong>367</strong>") — styling the <li> itself as
     the muted label and overriding <strong> below gives a label/value
     pair without needing a template override. */
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  font-size: var(--text-label-sm);
  color: var(--text-muted);
}
.woocommerce-order ul.woocommerce-order-overview li strong {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--text-body-lg);
  font-weight: 700;
  color: var(--text-primary);
}
.woocommerce-order h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--text-headline-3);
  margin: 0 0 var(--space-4);
}
.woocommerce-order table.order_details {
  margin-bottom: var(--space-7);
}
.woocommerce-order table.order_details tfoot th,
.woocommerce-order table.order_details tfoot td {
  font-family: var(--font-mono);
}
.woocommerce-order table.order_details tfoot tr:last-child th,
.woocommerce-order table.order_details tfoot tr:last-child td {
  font-weight: 700;
  font-size: var(--text-body-lg);
  border-top: var(--border-w) solid var(--border-default);
  border-bottom: none;
}
.woocommerce-order table.order_details td.product-name a {
  color: var(--text-primary);
  text-decoration: none;
}
.woocommerce-order table.order_details td.product-name a:hover {
  color: var(--accent-primary);
  text-decoration: underline;
}
.woocommerce-order .woocommerce-customer-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
.woocommerce-order .woocommerce-customer-details .woocommerce-column {
  background: var(--surface-card);
  border: var(--border-w-hairline) solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.woocommerce-order .woocommerce-customer-details address {
  font-family: var(--font-body);
  font-style: normal;
  line-height: var(--lh-body);
}
.woocommerce-order .woocommerce-customer-details a {
  color: var(--accent-primary);
}
@media (max-width: 767px) {
  .woocommerce-order .woocommerce-customer-details {
    grid-template-columns: 1fr;
  }
}

/* Mini-cart widget rendered inside the header cart drawer */
.widget_shopping_cart ul.woocommerce-mini-cart {
  list-style: none;
  margin: 0;
  padding: 0;
}
.widget_shopping_cart ul.woocommerce-mini-cart li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-bottom: var(--border-w-hairline) solid var(--border-subtle);
  position: relative;
}
.widget_shopping_cart ul.woocommerce-mini-cart li img {
  width: 64px;
  height: 80px;
  object-fit: cover;
  flex-shrink: 0;
}
.widget_shopping_cart ul.woocommerce-mini-cart li a.remove {
  position: absolute;
  top: var(--space-3);
  right: 0;
  color: var(--text-muted);
  text-decoration: none;
}
.widget_shopping_cart .total {
  font-family: var(--font-mono);
  font-weight: 700;
  padding-block: var(--space-4);
}
.widget_shopping_cart .woocommerce-mini-cart__buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.widget_shopping_cart .woocommerce-mini-cart__empty-message {
  font-family: var(--font-body);
  color: var(--text-muted);
}