/* Single product.

   Woo lays the product out with floats: `.woocommerce div.product div.images`
   and `div.summary` are both `width:48%`. Those selectors are (0,3,2); a rule
   written as `.single-product div.product .woocommerce-product-gallery` is
   (0,3,1) and loses however late it loads — the two columns collapse to 48% of
   an already-halved grid track, about 185px, and the product title wraps one
   word per line. Match Woo's own selectors and let source order settle it. */

.woocommerce div.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}

.woocommerce div.product div.images,
.woocommerce div.product div.summary {
  width: auto;
  margin: 0;
  float: none;
}

.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .up-sells,
.woocommerce div.product .contener-product__shipping-wide {
  grid-column: 1 / -1;
}

.woocommerce div.product .product_title { margin: 0 0 12px; font-size: clamp(1.4rem, 2.4vw, 30px); }

.woocommerce div.product .summary p.price,
.woocommerce div.product .summary span.price {
  margin: 0 0 18px;
  color: var(--contener-brand-dark);
  font-size: 1.5rem;
  font-weight: 600;
}
.woocommerce div.product .summary .price small.woocommerce-price-suffix {
  font-size: .8rem;
  font-weight: 400;
  color: var(--contener-text-muted);
}

.woocommerce div.product .woocommerce-product-details__short-description { margin-bottom: 20px; }

/* --- Variations ---------------------------------------------------------- */

.woocommerce div.product form.cart { margin: 0; }
.woocommerce div.product form.cart .variations { margin: 0 0 18px; border: 0; }
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td { display: block; padding: 0; text-align: left; }
.woocommerce div.product form.cart .variations th.label { margin-bottom: 8px; font-weight: 600; }
.woocommerce div.product form.cart .reset_variations {
  display: inline-block;
  margin-top: 8px;
  font-size: .85rem;
  color: var(--contener-text-muted);
}

/* woo-variation-swatches renders the "Label required?" attribute as buttons. */
.woo-variation-swatches .variable-items-wrapper { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.woo-variation-swatches .variable-items-wrapper .variable-item {
  margin: 0;
  padding: .55em 1.1em;
  border: 1px solid var(--contener-border);
  border-radius: var(--contener-radius);
  background: var(--contener-card-bg);
  box-shadow: none;
  font-size: .925rem;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color .15s var(--contener-ease), background-color .15s var(--contener-ease);
}
.woo-variation-swatches .variable-items-wrapper .variable-item:hover { border-color: var(--contener-brand); }
.woo-variation-swatches .variable-items-wrapper .variable-item.selected {
  border-color: var(--contener-brand);
  background: var(--contener-brand);
  color: var(--contener-text-invert);
  box-shadow: none;
}
.woo-variation-swatches .variable-items-wrapper .variable-item.disabled { opacity: .4; }

.woocommerce div.product form.cart .single_variation_wrap { margin-top: 8px; }
.woocommerce div.product form.cart div.quantity { margin-right: 10px; }
.woocommerce div.product form.cart .button { vertical-align: top; }

/* --- Meta ---------------------------------------------------------------- */

.woocommerce div.product .product_meta {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--contener-border);
  font-size: .875rem;
  color: var(--contener-text-muted);
}
.woocommerce div.product .product_meta > span { display: block; margin-bottom: 4px; }

.contener-product__shipping {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--contener-radius);
  background: var(--contener-surface-alt);
  font-size: .9rem;
}
.contener-product__shipping p:last-child { margin-bottom: 0; }

/* --- Tabs and related ---------------------------------------------------- */

/* Woo's tabs ship lavender pills with pseudo-element corners. Flattened to a
   plain underlined tab strip in the brand colour. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 20px;
  padding: 0 0 0 0;
  border-bottom: 1px solid var(--contener-border);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; content: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: .7em 1.2em;
  border-bottom: 3px solid transparent;
  color: var(--contener-text-muted);
  font-weight: 600;
  text-decoration: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--contener-brand); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  border-bottom-color: var(--contener-brand);
  color: var(--contener-brand-dark);
}
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child {
  margin-top: 0;
  font-size: clamp(1.2rem, 2vw, 24px);
}
.woocommerce div.product .related > h2,
.woocommerce div.product .up-sells > h2 { margin: 0 0 20px; font-size: clamp(1.2rem, 2vw, 24px); }

/* Sticky gallery is DESKTOP ONLY. Left unscoped it overlaps the <h1> on a
   phone, which reads as "the product title is missing". */
@media (min-width: 861px) {
  .woocommerce div.product div.images { position: sticky; top: 24px; }
}
@media (max-width: 860px) {
  .woocommerce div.product { grid-template-columns: 1fr; }
  .woocommerce div.product div.images { position: static; top: auto; }
}