/*
 * Single product — reproduces the approved "split ledger" comp
 * (.impeccable/mocks/comp-2-split-hero.jpg): summary on cream at left,
 * gallery on bottle-green at right, framed with a thin gold rule.
 */

.rn-product-hero {
  /*
   * Top padding was --rn-space-xl (80px), stacked on top of the
   * breadcrumb's own margin-bottom AND the gallery panel's internal
   * 48px padding-top — three paddings compounding into a large blank
   * cream gap above the green gallery panel. Reduced to --rn-space-md
   * (28px), which still gives the hero visible breathing room below
   * the breadcrumb without the empty-looking gap.
   */
  padding-block: var(--rn-space-md) var(--rn-space-lg);
}

.rn-product-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* stretch: with no fixed background/padding box on the gallery
     column anymore, it needs to size to whatever height the summary
     column ends up needing, so the photo fills that full height
     instead of collapsing to its own intrinsic size. */
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--rn-gold-400);
  box-shadow: 0 20px 40px rgba(22, 36, 27, 0.18);
}

.rn-product-hero__gallery {
  /*
   * WooCommerce's woocommerce-layout.css hardcodes
   * "div.product div.images { float: left; width: 48%; }" and
   * ".summary { float: right; width: 48%; }" as its float-based
   * two-column fallback layout. Those rules still apply inside our
   * CSS grid columns (grid ignores float, not width), shrinking each
   * column to roughly half of what the grid track already gives it.
   * Reset explicitly rather than relying on load order.
   */
  width: 100% !important;
  float: none !important;
  /*
   * No green background/padding box around the photo anymore. The
   * bottle-green panel with a small centered image inside it left a
   * huge amount of unused dark space around a small product photo —
   * exactly the "empty vertical space" problem. The photo now fills
   * this column edge-to-edge; the ledger tag sits on top of it as a
   * small stamped mark instead of floating in green padding.
   */
  position: relative;
  background: var(--rn-cream-deep);
  display: flex;
  min-height: 420px;
}

.rn-product-hero__gallery .woocommerce-product-gallery {
  /*
   * `width: 100%` alone is only a hint on a flex item: with the
   * default `flex-shrink: 1` and `flex-basis: auto`, the browser still
   * starts from the item's own content width (this <div> has no
   * intrinsic width of its own, so it fell back near the tag sibling's
   * width) before applying percentages, leaving the real WooCommerce
   * gallery squeezed into a ~240px column while the photo inside it
   * still had to fill that column's full height — the stretched,
   * narrow product photo the screenshots showed. flex: 1 1 auto plus
   * min-width: 0 forces it to actually claim the row's leftover space.
   */
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

.rn-product-hero__gallery .woocommerce-product-gallery__wrapper {
  height: 100%;
}

.rn-product-hero__gallery .woocommerce-product-gallery__image {
  border: 0;
  background: none;
  height: 100%;
}

.rn-product-hero__gallery .woocommerce-product-gallery__image a,
.rn-product-hero__gallery .woocommerce-product-gallery__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rn-product-hero__gallery .flex-control-thumbs {
  position: absolute;
  left: var(--rn-space-md);
  bottom: var(--rn-space-md);
  z-index: 2;
  margin: 0;
  gap: 0.5rem;
}

.rn-product-hero__gallery .flex-control-thumbs li {
  border: 0;
  width: 46px;
  height: 46px;
  overflow: hidden;
}

.rn-product-hero__gallery .flex-control-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 2px solid var(--rn-cream);
  opacity: 0.85;
  transition: opacity var(--rn-dur-fast) var(--rn-ease);
}

.rn-product-hero__gallery .flex-control-thumbs img.flex-active,
.rn-product-hero__gallery .flex-control-thumbs img:hover {
  opacity: 1;
  border-color: var(--rn-gold-400);
}

.rn-product-hero__summary {
  /* See .rn-product-hero__gallery comment: same float/width reset,
     this time against WooCommerce's ".summary { float:right; width:48% }". */
  width: 100% !important;
  float: none !important;
  clear: none;
  background: var(--rn-cream);
  padding: var(--rn-space-lg) var(--rn-space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--rn-space-xs);
}

.rn-product-hero__gallery-tag {
  /*
   * `position: absolute` alone still participates in a flex parent's
   * layout unless it's also taken out of flow relative to that flex
   * context. Without inset:0 tying it to the gallery box specifically,
   * it was sizing itself to its own content (53px) and — because
   * .rn-product-hero__gallery is `display:flex` with the default
   * row direction — sitting as a flex sibling NEXT TO the real
   * WooCommerce gallery, squeezing it into a ~240px-wide column while
   * the photo stretched to fill that column's full height. inset:0
   * plus width/height:0 removes it from the flex flow entirely, so it
   * only ever affects its own absolutely-positioned children (the
   * ledger tag), never the gallery's width.
   */
  position: absolute;
  inset: var(--rn-space-md) auto auto var(--rn-space-md);
  width: 0;
  height: 0;
  z-index: 2;
}

.rn-product-hero__gallery-tag .rn-ledger-tag {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
}

.rn-product-hero__summary .product_title {
  margin-top: 0;
}

.rn-product-hero__summary .price {
  font-family: var(--rn-font-display);
  font-size: 1.6rem;
  color: var(--rn-bordeaux-700);
  margin-block: var(--rn-space-xs);
}

.rn-product-hero__summary .woocommerce-product-details__short-description {
  font-size: 1rem;
  color: var(--rn-ink-soft);
  max-width: 46ch;
}

.rn-product-hero__summary form.cart {
  margin-top: var(--rn-space-sm);
  display: flex;
  align-items: center;
  gap: var(--rn-space-md);
  flex-wrap: wrap;
}

.rn-product-hero__summary .quantity input {
  width: 4.2rem;
  text-align: center;
}

/*
 * Specificity note: Storefront injects an INLINE stylesheet (via
 * wp_add_inline_style, always placed after every enqueued file
 * including this one) containing "button.alt, ..., .button.alt {
 * background-color: #333 }". WooCommerce's add-to-cart button carries
 * both .button and .alt, so it matches. That selector's specificity
 * is 2 classes — identical to ".rn-product-hero__summary
 * .single_add_to_cart_button" (also 2 classes) — so with equal
 * specificity, source order decided the winner, and the inline style
 * (later in the DOM) won regardless of what this file said. Chaining
 * the class twice (".single_add_to_cart_button.single_add_to_cart_button")
 * doesn't change what it matches but bumps specificity to 3 classes,
 * reliably beating Storefront's rule without needing !important.
 */
.rn-product-hero__summary
  .single_add_to_cart_button.single_add_to_cart_button {
  background: var(--rn-bordeaux-700);
  color: var(--rn-on-bordeaux);
  border: 1px solid var(--rn-bordeaux-900);
  border-radius: 3px;
  padding: 0.85rem 2rem;
  font-family: var(--rn-font-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.78rem;
  box-shadow: 0 2px 5px rgba(22, 12, 8, 0.2);
  transition: background 0.2s ease, transform 0.15s ease;
}

.rn-product-hero__summary
  .single_add_to_cart_button.single_add_to_cart_button:hover,
.rn-product-hero__summary
  .single_add_to_cart_button.single_add_to_cart_button:focus-visible {
  background: var(--rn-bordeaux-600);
  transform: translateY(-1px);
}

.rn-product-hero__summary .product_meta {
  margin-top: var(--rn-space-md);
  font-family: var(--rn-font-label);
  font-size: 0.78rem;
  color: var(--rn-ink-soft);
  border-top: 1px solid var(--rn-paper-line);
  padding-top: var(--rn-space-sm);
}

.rn-product-hero__summary .product_meta a {
  color: var(--rn-bordeaux-600);
}

/*
 * Trust row under add-to-cart (inserted via the
 * woocommerce_single_product_summary hook). Stacked here rather than
 * in a row, so the separator has to become a horizontal hairline —
 * keeping the vertical one would render as a coloured left border on
 * each item, which is exactly the stock-callout look this design
 * avoids elsewhere.
 */
.rn-product-hero__summary .rn-badges {
  grid-template-columns: 1fr;
  padding-block: 0;
  margin-top: var(--rn-space-md);
  border-top: 1px solid var(--rn-paper-line);
}

.rn-product-hero__summary .rn-badge {
  padding: 0.7rem 0;
}

.rn-product-hero__summary .rn-badge + .rn-badge {
  border-left: 0;
  border-top: 1px solid var(--rn-paper-line);
}

/* ---------- Related / cross-sell (WooCommerce's own templates) ---------- */

.related.products,
.upsells.products {
  background: var(--rn-cream-deep);
  padding-block: var(--rn-space-xl);
  margin-top: var(--rn-space-lg);
}

.related.products > h2,
.upsells.products > h2 {
  max-width: var(--rn-container);
  margin-inline: auto;
  padding-inline: var(--rn-space-md);
}

.related.products ul.products,
.upsells.products ul.products {
  max-width: var(--rn-container);
  margin-inline: auto;
  padding-inline: var(--rn-space-md);
}

@media (max-width: 900px) {
  .rn-product-hero__grid {
    grid-template-columns: 1fr;
    align-items: initial;
  }
  .rn-product-hero__gallery {
    /* Single-column layout: the gallery no longer stretches to match
       the summary's height, so give it its own sized box instead of
       the two-column min-height. */
    min-height: 78vw;
    max-height: 480px;
  }
  .rn-product-hero__summary {
    padding: var(--rn-space-lg) var(--rn-space-md);
  }
}