/*
 * Layout guard against AdSense Auto Ads.
 *
 * Auto Ads inject into the DOM after the page renders, choosing their own
 * insertion points. On the homepage they pick the middle of <ul class="products">
 * — three units inside item 2, two inside item 3 — and because li.product lays
 * its children out in a row, an injected iframe with a large intrinsic width
 * squeezes .product-info to zero. The result is a title rendered one letter per
 * line.
 *
 * This is not a new problem for this theme. functions.php still carries the
 * author's own note:
 *
 *     // Remove the broken in-loop ad placement
 *     // Previously this was breaking the product grid by inserting ads mid-loop
 *
 * That fought the same fight against a PHP-inserted ad and won by deleting the
 * hook. Auto Ads insert from outside PHP's reach, so the same fight has to be
 * won in CSS.
 *
 * Three attempts were made to fix this structurally first — loading the AdSense
 * script from <head> as header.php does, and moving the declared slot inside
 * .entry-content as the the_content filter does. Both were genuine deviations
 * worth correcting and both are now correct, and neither changed where Auto Ads
 * put themselves. The placement is Google's decision, not the markup's.
 *
 * The declared slots are untouched: the frontpage, product-page and archive
 * units the theme renders still serve. Only units Google injects *inside a
 * product row* are suppressed, because those cannot be shown without destroying
 * the row they are in.
 *
 * Loaded after style.css so these win without !important wars.
 */

/* Injected ads inside a product row: there is no width at which these can sit
   beside the content, so they do not sit there. */
ul.products li.product ins.adsbygoogle,
ul.products li.product iframe[id^="aswift"],
ul.products li.product [id^="aswift"],
ul.products li.product .google-auto-placed {
  display: none !important;
}

/* Belt and braces. Even with the above, anything else third-party that lands in
   a row must not be able to starve the text of width. */
ul.products li.product > .product-info {
  flex: 1 1 auto;
  min-width: 0;
}


/* ===== TAB PANELS =====
 *
 * The panel headings were removed — the tab above already says "Description",
 * and repeating it cost a line of vertical space on every product page. What is
 * left is the padding the heading used to justify, so it comes off too.
 */
.single-product .woocommerce-tabs .wc-tab {
  padding-top: 8px;
}

.single-product .woocommerce-tabs .wc-tab > :first-child {
  margin-top: 0;
}

/* ===== VIDEO =====
 *
 * The embeds carry width="560" height="420" from whenever they were pasted in,
 * and the stylesheet forces img/iframe to width:100% without touching height —
 * so a full-width iframe kept a 420px height attribute and rendered as a short
 * letterbox. Ratio-boxed instead, so the height follows the width.
 */
.woo-video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius, 12px);
  overflow: hidden;
  background: #000;
}

.woo-video-wrapper iframe,
.woo-video-wrapper embed,
.woo-video-wrapper object {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

/* The stars in the summary are a link to the reviews tab; it should not look
   like body copy got underlined. */
.woocommerce-product-rating .woocommerce-review-link {
  display: inline-block;
  text-decoration: none;
}