/*
 * BLAK Fitness storefront styles.
 *
 * Loaded only on WooCommerce pages (shop, product, cart, checkout, account),
 * built on the theme's CSS variables from style.css. Every selector is
 * namespaced under a WooCommerce body class or wrapper so nothing here can
 * reach the coaching pages.
 */

/* Form fields: white in the light palette, the dark surface in the dark one. */
body.woocommerce-page {
  --shop-field-bg: #FFFFFF;
  --shop-field-border: color-mix(in srgb, var(--text) 55%, var(--shop-field-bg));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.woocommerce-page { --shop-field-bg: var(--surface-2); }
}
:root[data-theme="dark"] body.woocommerce-page { --shop-field-bg: var(--surface-2); }

/* Footer on short store pages: the page is a column at least one window tall,
   and main and its section grow to fill it, so the footer sits at the window
   bottom with no band of body color above it. Longer pages grow as normal. */
body.woocommerce-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
body.admin-bar.woocommerce-page {
  min-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
  min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 32px));
}
body.woocommerce-page #main-content {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
body.woocommerce-page #main-content > section {
  flex: 1 0 auto;
}

/* Notices (classic and block). Accent left border replaces WooCommerce's
   blue top border. */
body.woocommerce-page .woocommerce-info,
body.woocommerce-page .woocommerce-message,
body.woocommerce-page .woocommerce-error,
body.woocommerce-page .wc-block-components-notice-banner {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 3px;
}
body.woocommerce-page .woocommerce-info,
body.woocommerce-page .woocommerce-message,
body.woocommerce-page .woocommerce-error {
  border-top: 1px solid var(--border);
}
body.woocommerce-page .woocommerce-info::before,
body.woocommerce-page .woocommerce-message::before,
body.woocommerce-page .woocommerce-error::before {
  color: var(--accent);
}
body.woocommerce-page .woocommerce-info a,
body.woocommerce-page .woocommerce-message a,
body.woocommerce-page .woocommerce-error a {
  color: var(--accent);
}
body.woocommerce-page .woocommerce-info a.button,
body.woocommerce-page .woocommerce-message a.button,
body.woocommerce-page .woocommerce-error a.button {
  color: var(--cta-text);
}
body.woocommerce-page .wc-block-components-notice-banner > svg {
  background-color: var(--accent);
  fill: var(--accent-ink);
}
body.woocommerce-page .wc-block-components-notice-banner .wc-block-components-notice-banner__content {
  color: var(--text);
}

/* Store buttons, matching the theme's .btn. */
body.woocommerce-page a.button,
body.woocommerce-page button.button,
body.woocommerce-page input.button,
body.woocommerce-page a.button.alt,
body.woocommerce-page button.button.alt,
body.woocommerce-page input.button.alt,
body.woocommerce-page .wc-block-components-button:not(.is-link),
body.woocommerce-page .wp-block-woocommerce-cart .wp-element-button,
body.woocommerce-page .wp-block-woocommerce-checkout .wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.3;
  background: var(--cta-bg);
  color: var(--cta-text);
  padding: 0.9rem 1.8rem;
  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  border-radius: 3px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
body.woocommerce-page a.button:hover,
body.woocommerce-page button.button:hover,
body.woocommerce-page input.button:hover,
body.woocommerce-page a.button.alt:hover,
body.woocommerce-page button.button.alt:hover,
body.woocommerce-page input.button.alt:hover,
body.woocommerce-page .wc-block-components-button:not(.is-link):hover,
body.woocommerce-page .wp-block-woocommerce-cart .wp-element-button:hover,
body.woocommerce-page .wp-block-woocommerce-checkout .wp-element-button:hover {
  background: var(--cta-bg-hover);
  color: var(--cta-text);
  border-color: var(--gold);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}
body.woocommerce-page a.button:focus-visible,
body.woocommerce-page button.button:focus-visible,
body.woocommerce-page input.button:focus-visible,
body.woocommerce-page .wc-block-components-button:not(.is-link):focus-visible,
body.woocommerce-page .wp-block-woocommerce-cart .wp-element-button:focus-visible,
body.woocommerce-page .wp-block-woocommerce-checkout .wp-element-button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* My Account navigation: ruled list of mono labels, two columns on wide screens. */
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  border-top: 1px solid var(--border);
}
body.woocommerce-account .woocommerce-MyAccount-navigation li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--border);
}
body.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.25rem;
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  color: var(--accent);
}
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  color: var(--accent);
  font-weight: 700;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}
@media (max-width: 768px) {
  body.woocommerce-account .woocommerce-MyAccount-navigation,
  body.woocommerce-account .woocommerce-MyAccount-content {
    float: none;
    width: 100%;
  }
}

/* Cart and checkout blocks, empty states. */
body.woocommerce-page .wp-block-woocommerce-cart,
body.woocommerce-page .wp-block-woocommerce-checkout,
body.woocommerce-page .wp-block-woocommerce-empty-cart-block {
  font-family: var(--font-body);
  color: var(--text);
}
body.woocommerce-page .wp-block-woocommerce-cart :is(h1, h2, h3, h4),
body.woocommerce-page .wp-block-woocommerce-checkout :is(h1, h2, h3, h4),
body.woocommerce-page .wp-block-woocommerce-empty-cart-block :is(h1, h2, h3, h4),
body.woocommerce-page .wc-block-cart__empty-cart__title {
  font-family: var(--font-display);
  font-stretch: condensed;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text);
}

/* Account and checkout form fields. */
body.woocommerce-page .woocommerce form .form-row input.input-text,
body.woocommerce-page .woocommerce form .form-row textarea,
body.woocommerce-page .woocommerce form .form-row select,
body.woocommerce-page .woocommerce form input.input-text,
body.woocommerce-page .woocommerce form select,
body.woocommerce-page .woocommerce form textarea {
  background: var(--shop-field-bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  min-height: 44px;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--shop-field-border);
  border-radius: 3px;
}
body.woocommerce-page .woocommerce form .form-row input.input-text:focus-visible,
body.woocommerce-page .woocommerce form .form-row textarea:focus-visible,
body.woocommerce-page .woocommerce form .form-row select:focus-visible,
body.woocommerce-page .woocommerce form input.input-text:focus-visible,
body.woocommerce-page .woocommerce form select:focus-visible,
body.woocommerce-page .woocommerce form textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--focus);
}