/*
 * TA Canvas — WooCommerce brand skin.
 *
 * Reskins WooCommerce's OWN markup with the brand tokens the plugin emits into
 * the head bundle (:root --brand-*). We never replace Woo templates, so cart,
 * checkout, and every payment gateway keep working exactly as Woo ships them —
 * this only restyles. Every var has a neutral fallback, so the skin is safe
 * even before a design is deployed (vars absent -> tasteful neutral). Covers
 * both classic (.woocommerce ...) and block (.wc-block-*) cart/checkout.
 */

:root { --ta-radius: 10px; }

/* The shared overlay nav needs its own row above Woo content. */
body.woocommerce nav[data-section-type="nav"][data-variant="transparent-overlay"],
body.woocommerce-page nav[data-section-type="nav"][data-variant="transparent-overlay"] {
  position: relative;
}

/* --- Layout: full-width, centered container (this theme has no sidebar) --- */
.ta-woo { max-width: 1200px; margin: 0 auto; padding: 48px 24px; }
.ta-woo-main { width: 100%; }
.woocommerce .woocommerce-breadcrumb { margin-bottom: 20px; opacity: 0.7; font-size: 14px; }
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { margin-bottom: 20px; }
.woocommerce .page-title,
.woocommerce h1.entry-title { margin-bottom: 24px; }

/* --- Primary actions: add to cart, place order, proceed to checkout, update --- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order,
.wc-block-components-button {
  /* Match the brand's primary CTA. Accent is the brand's "pop"/CTA color (the
     pink ORDER NOW button + sale badges); fall back to primary if no accent. */
  background-color: var(--brand-accent, var(--brand-primary, #111827));
  color: var(--brand-on-accent, #ffffff);
  border: 0;
  border-radius: var(--ta-radius);
  padding: 0.7em 1.5em;
  font-weight: 600;
  transition: filter 0.2s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce #place_order:hover,
.wc-block-components-button:hover {
  filter: brightness(0.92);
}

/* --- Links & the active My-Account nav item ---
   Scoped to the Woo CONTENT container (.ta-woo), NOT `.woocommerce` — on Woo
   pages WordPress puts `woocommerce` on <body>, so a bare `.woocommerce a` rule
   would recolor the shared header/footer links too (which broke the footer). */
.ta-woo a:not(.button),
.woocommerce-MyAccount-navigation li.is-active a {
  color: var(--brand-primary, #111827);
}

/* --- Sale badge + sale price accent --- */
.woocommerce span.onsale,
.wc-block-components-product-sale-badge {
  background-color: var(--brand-accent, var(--brand-primary, #111827));
  color: var(--brand-on-accent, #ffffff);
  border-radius: 999px;
}
.woocommerce .price ins,
.woocommerce ins {
  color: var(--brand-accent, inherit);
  text-decoration: none;
  font-weight: 600;
}

/* --- Star ratings --- */
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before,
.woocommerce p.stars a:hover::before {
  color: var(--brand-accent, #f59e0b);
}

/* --- Form fields: brand focus --- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce table.cart td.actions .coupon .input-text {
  border-radius: var(--ta-radius);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  outline: 2px solid var(--brand-primary, #111827);
  outline-offset: 1px;
  border-color: var(--brand-primary, #111827);
}

/* --- Notices --- */
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--brand-primary, #111827);
}
.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--brand-primary, #111827);
}

/* --- Tables + product tabs --- */
.woocommerce table.shop_table {
  border-radius: var(--ta-radius);
  overflow: hidden;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-bottom-color: var(--brand-primary, #111827);
}

/* ============================================================
   Shop / archive product grid — robust CSS Grid.
   Woo's default grid uses floats + .columns-N width math, which
   collides under this theme's reset (overlapping cards/buttons).
   Replace it with an explicit responsive grid of clean cards.
   Layout ONLY — add-to-cart behavior is untouched.
   ============================================================ */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 34px 28px;
  margin: 8px 0 48px !important;
  padding: 0 !important;
  list-style: none !important;
}
/* Woo emits clearfix pseudo-elements for its float grid — they become phantom
   grid cells here. Kill them. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  display: none !important;
  content: none !important;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
}
.woocommerce ul.products li.product img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--ta-radius);
  margin: 0 0 14px !important;
  display: block;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 15px !important;
  font-weight: 700;
  line-height: 1.25;
  padding: 0 !important;
  margin: 0 0 6px !important;
}
.woocommerce ul.products li.product .price {
  margin: 0 0 14px !important;
  font-size: 15px;
  font-weight: 600;
}
/* Loop buttons are card-sized, pushed to the card bottom for a tidy baseline —
   the big brand CTA styling is for single-product / cart, not these. */
.woocommerce ul.products li.product .button {
  margin-top: auto !important;
  align-self: flex-start;
  padding: 0.72em 1.6em !important;
  font-size: 14px !important;
}
/* Sale badge pinned to the image corner instead of floating free. */
.woocommerce ul.products li.product .onsale {
  position: absolute !important;
  top: 12px;
  left: 12px;
  right: auto;
  margin: 0 !important;
  min-height: 0;
  min-width: 0;
  padding: 4px 12px;
  line-height: 1.6;
}

/* ============================================================
   Shop filter bar — product search + category links above the grid.
   Real filtering to replace the removed default-widget sidebar; keeps
   the grid full-width.
   ============================================================ */
.ta-shop-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin: 0 0 32px;
}
.ta-shop-search form {
  display: flex;
  gap: 8px;
}
.ta-shop-search input[type="search"] {
  border: 1px solid rgba(127, 127, 127, 0.3);
  border-radius: var(--ta-radius);
  padding: 0.55em 0.9em;
  min-width: 220px;
  font-size: 14px;
}
.ta-shop-search button {
  border: 0;
  background: var(--brand-accent, var(--brand-primary, #111827));
  color: var(--brand-on-accent, #ffffff);
  border-radius: var(--ta-radius);
  padding: 0.55em 1.1em;
  font-weight: 600;
  cursor: pointer;
}
.ta-shop-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ta-shop-cats a {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid rgba(127, 127, 127, 0.28);
  border-radius: 999px;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ta-shop-cats li.is-active a,
.ta-shop-cats a:hover {
  background: var(--brand-primary, #111827);
  color: var(--brand-on-primary, #ffffff);
  border-color: var(--brand-primary, #111827);
}

/* ============================================================
   Single product (C1a) — bespoke two-column layout.
   Explicit grid: gallery | summary, with tabs / related / upsells
   full-width below. Woo's OWN gallery + add-to-cart markup is left
   intact, so gallery zoom, variation selectors, and cart AJAX all
   keep working — this is layout + styling only.
   ============================================================ */
.woocommerce div.product {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product .summary {
  margin: 0;
  width: auto !important;
  float: none !important;
}
/* Tabs, related, upsells, and the single-product sale flash span full width. */
.woocommerce div.product > .woocommerce-tabs,
.woocommerce div.product > .upsells,
.woocommerce div.product > .related {
  grid-column: 1 / -1;
}
.woocommerce div.product > span.onsale {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  margin: 0;
}
.woocommerce div.product .woocommerce-product-gallery__image img {
  border-radius: var(--ta-radius);
}

/* Summary column */
.woocommerce div.product .product_title {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
  margin: 0 0 16px;
}
.woocommerce div.product .summary .price {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 20px;
}
.woocommerce div.product .woocommerce-product-details__short-description {
  margin: 0 0 24px;
  line-height: 1.6;
  opacity: 0.85;
}
.woocommerce div.product form.cart {
  margin: 0 0 24px;
}
.woocommerce div.product form.cart .button {
  padding: 0.9em 2em;
  font-size: 16px;
}
.woocommerce div.product form.cart .quantity input.qty {
  border-radius: var(--ta-radius);
  padding: 0.6em;
}
.woocommerce div.product .product_meta {
  margin-top: 24px;
  font-size: 14px;
  opacity: 0.7;
}

/* Tabs + related spacing. */
.woocommerce div.product .woocommerce-tabs {
  margin-top: 64px;
}
.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2 {
  font-size: 24px;
  margin-bottom: 24px;
}

/* Mobile: single column. */
@media (max-width: 768px) {
  .woocommerce div.product {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .woocommerce div.product .summary {
    position: static;
  }
}