/*
 * TA Builder — single-product template skin (C1b).
 *
 * Styles the resolver's .ta-product markup (templates/product-default.html and
 * any stored template that reuses these classes). Purely token-driven: every
 * color comes from the brand :root --brand-* vars the composer emits into the
 * head bundle, with neutral fallbacks so it's tasteful even before a design is
 * deployed. Deliberately namespaced to .ta-product so it never collides with the
 * theme's C1a `.woocommerce div.product` rules.
 *
 * Woo's OWN functional markup (gallery, add-to-cart form, tabs, related) is
 * embedded inside these slots; button/price/rating colors are already handled by
 * the theme's woocommerce.css skin, so here we own LAYOUT and typography only.
 *
 * The .ta-product wrapper ALSO carries Woo's `product` class (added via
 * wc_product_class() in the render template), so Woo's and the theme's
 * `.woocommerce div.product …` rules apply too. These rules are written to be
 * self-sufficient (the gallery de-float uses !important) so the template still
 * lays out correctly even if the theme's C1a single-product block is ever removed.
 *
 * IMPORTANT: the wrapper is a plain BLOCK — the TEMPLATE owns its own layout (the
 * default template's .ta-product__top grid, or a generated template's Tailwind
 * grid). We neutralize the grid/float the theme (C1a) and WooCommerce impose on
 * `.woocommerce div.product`, so an AI-generated layout of any shape lays out as
 * authored instead of being forced into a fixed 2-column grid.
 */

/* Breathing room below the site header (the theme container adds ~48px; this
   tops it up so the product doesn't jam under a fixed header). Applies to the
   default AND any generated template, since both render inside .ta-product. A
   generated template can add more on top via its own Tailwind padding. */
.ta-product { --ta-radius: 10px; position: relative; padding-top: 32px; }

/* Neutralize the wrapper grid/float. Higher specificity than `.woocommerce
   div.product` (C1a) so `display:block` wins; the template controls layout. */
.woocommerce div.product.ta-product { display: block; }

/* Default template layout: gallery | summary two columns, details full-width below. */
.ta-product__top {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.ta-product__media,
.ta-product__summary { min-width: 0; }
.ta-product__media { position: relative; }
.ta-product__details { margin-top: 8px; }

/* Sale badge pinned to the gallery corner (theme woocommerce.css colors it). */
.ta-product__media .onsale {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  margin: 0;
}

/* --- Gallery: neutralize Woo's default float/width, round the images. ---
   !important beats Woo's own `.woocommerce div.product div.images { float:left;
   width:48% }` (higher selector specificity than ours). */
.ta-product .woocommerce-product-gallery {
  width: auto !important;
  float: none !important;
  margin: 0;
}
.ta-product .woocommerce-product-gallery__image img,
.ta-product .woocommerce-product-gallery img {
  border-radius: var(--ta-radius);
}

/* --- Summary column --- */
.ta-product__title {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
  margin: 0 0 16px;
}
.ta-product__price {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 20px;
  color: var(--brand-primary, #111827);
}

/* Explicit layout colors override the theme's colors inside opaque Woo slots.
   Nested authored inline colors still take precedence over inheritance. */
.woocommerce .ta-product [data-ta-product-color] * {
  color: inherit !important;
}

/* Native Woo cards in a three-at-a-time, swipeable related-products carousel. */
/* Cards per view come from the layout (--ta-related-desktop, 1 to 6); tablets
   show at most two and phones one. */
.ta-product-related-carousel { --ta-related-columns: var(--ta-related-desktop, 3); --ta-related-gap: 24px; min-width: 0; }
.woocommerce .ta-product-related-carousel ul.products {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: var(--ta-related-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 0 12px;
  margin: 0;
}
.woocommerce .ta-product-related-carousel ul.products::before,
.woocommerce .ta-product-related-carousel ul.products::after { display: none; }
.woocommerce .ta-product-related-carousel ul.products li.product {
  flex: 0 0 calc((100% - (var(--ta-related-columns) - 1) * var(--ta-related-gap)) / var(--ta-related-columns));
  width: auto !important;
  min-width: 0;
  max-width: none;
  float: none !important;
  margin: 0 !important;
  scroll-snap-align: start;
}
.ta-product-related-controls { display: flex; gap: 12px; justify-content: flex-end; margin-top: 12px; }
.ta-product-related-controls[hidden] { display: none !important; }
.ta-product-related-controls button { cursor: pointer; padding: 10px 16px; }
.ta-product-related-controls button:disabled { opacity: 0.45; cursor: default; }
.ta-product-related-empty { margin: 24px 0; }
@media (max-width: 1024px) { .ta-product-related-carousel { --ta-related-columns: min(2, var(--ta-related-desktop, 3)); } }
@media (max-width: 640px) { .ta-product-related-carousel { --ta-related-columns: 1; } }
.ta-product__excerpt {
  margin: 0 0 24px;
  line-height: 1.6;
  opacity: 0.85;
}
.ta-product__cart { margin: 0 0 24px; }
.ta-product__cart form.cart { margin: 0; }
.ta-product__cart .quantity input.qty {
  border-radius: var(--ta-radius);
  padding: 0.6em;
}
.ta-product__cart form.cart .button {
  padding: 0.9em 2em;
  font-size: 16px;
}
.ta-product__meta {
  margin-top: 24px;
  font-size: 14px;
  opacity: 0.7;
}

/* --- Details: tabs + related, full width with breathing room. --- */
.ta-product__details .woocommerce-tabs { margin-top: 64px; }
.ta-product__details .related > h2,
.ta-product__details .upsells > h2 {
  font-size: var(--ta-related-title-size, 24px);
  margin-bottom: 24px;
}
.woocommerce div.product.ta-product .ta-product__related .related > h2 {
  font-size: var(--ta-related-title-size, 24px);
  color: var(--ta-related-title-color, inherit);
}

/* WordPress content arrives as semantic p/ul/ol elements, but the site's
   utility reset removes their default spacing and list markers. Restore those
   affordances only inside the rendered product description. */
.woocommerce div.product.ta-product .ta-product__description p { margin: 0 0 1em; }
.woocommerce div.product.ta-product .ta-product__description ul,
.woocommerce div.product.ta-product .ta-product__description ol {
  margin: 0 0 1.25em;
  padding-left: 1.5em;
}
.woocommerce div.product.ta-product .ta-product__description ul { list-style: disc outside; }
.woocommerce div.product.ta-product .ta-product__description ol { list-style: decimal outside; }
.woocommerce div.product.ta-product .ta-product__description li { display: list-item; margin: 0.2em 0; }
.woocommerce div.product.ta-product .ta-product__description h2,
.woocommerce div.product.ta-product .ta-product__description h3,
.woocommerce div.product.ta-product .ta-product__description h4 {
  margin: 1.3em 0 0.5em;
}
.woocommerce div.product.ta-product .ta-product__description h2 { font-size: 1.75em; line-height: 1.25; font-weight: 700; }
.woocommerce div.product.ta-product .ta-product__description h3 { font-size: 1.5em; line-height: 1.3; font-weight: 700; }
.woocommerce div.product.ta-product .ta-product__description h4 { font-size: 1.25em; line-height: 1.35; font-weight: 700; }
.woocommerce div.product.ta-product .ta-product__description > :first-child { margin-top: 0; }
.woocommerce div.product.ta-product .ta-product__description > :last-child { margin-bottom: 0; }
.ta-product__details .woocommerce-tabs ul.tabs li.active {
  border-bottom-color: var(--brand-primary, #111827);
}

/* --- Mobile: single column. --- */
@media (max-width: 768px) {
  .ta-product__top {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* Breadcrumbs placed inside a layout: the wrapper sets the size, so an editor's
   font-size on it reaches WooCommerce's own trail. */
.ta-product__breadcrumbs { font-size: 14px; }
.woocommerce .ta-product__breadcrumbs .woocommerce-breadcrumb { font-size: inherit; margin: 0 0 20px; }

/* Video popup for data-ta-product-video buttons (TAB_Product_Fields::popup,
   opened by product-runtime.js). A modal <dialog>: the browser centres it,
   dims the page behind it and returns focus to the button on close. The frame
   keeps the video's own shape and always fits the screen. */
.ta-product-video {
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.ta-product-video::backdrop { background: rgba(0, 0, 0, 0.82); }
.ta-product-video__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.ta-product-video__frame {
  position: relative;
  aspect-ratio: var(--ta-video-ratio, 1.7778);
  width: min(960px, calc(100vw - 48px), calc((100vh - 120px) * var(--ta-video-ratio, 1.7778)));
  overflow: hidden;
  border-radius: var(--ta-radius, 10px);
  background: #000;
}
.ta-product-video__frame iframe,
.ta-product-video__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Scoped twice so theme rules for plain buttons don't restyle it. */
.ta-product-video .ta-product-video__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  cursor: pointer;
}
.ta-product-video .ta-product-video__close:hover { background: rgba(255, 255, 255, 0.3); }
.ta-product-video .ta-product-video__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* The page behind an open video stays put. */
html:has(.ta-product-video[open]) { overflow: hidden; }