/**
 * Site-wide styling — loaded on every page.
 *
 * These three concerns are not specific to the cart or the checkout: the
 * review badges sit in the FOOTER of every page, reviews are switched off
 * everywhere, and the product card appears on the shop, category archives and
 * in related-product rows. Keeping them in checkout.css meant they only
 * applied where that file happened to load, which is why the badge row was
 * still four columns on the contact page.
 */

/* ==========================================================================
   1. THE WHOLE PRODUCT CARD IS CLICKABLE
   --------------------------------------------------------------------------
   The card markup has no link on the image or the title — the only product
   link is the "View Details" button. Rather than adding a second link (which
   would mean two links to the same place for anyone using a screen reader),
   that button's hit area is stretched over the whole card. It stays a real
   link, so keyboard and middle-click still behave.

   The category tag is lifted above the overlay so it stays separately
   clickable, which is the one other link on the card.
   ========================================================================== */

article.card.product {
  position: relative;
}

/* The theme gives this button position:relative, which made the overlay below
   size itself to the BUTTON rather than the card — so only the button stayed
   clickable and nothing changed. Static here lets `inset: 0` resolve against
   article.card.product. Checked first that the theme uses neither ::before nor
   ::after on this button, so nothing visual is lost. */
article.card.product .wcrp-rental-products-select-dates-button {
  position: static;
}

article.card.product .wcrp-rental-products-select-dates-button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

article.card.product .tags,
article.card.product .tags a {
  position: relative;
  z-index: 2;
}

article.card.product .card_media img {
  transition: transform var(--animation-duration, 0.3s) ease;
}

article.card.product:hover .card_media img {
  transform: scale(1.03);
}

article.card.product:hover .card_title {
  color: var(--color-pink-3, #e5187c);
}

/* ==========================================================================
   3. REVIEWS HIDDEN SITE-WIDE
   --------------------------------------------------------------------------
   Reviews are switched off in WooCommerce, which removes its own markup. The
   theme prints its own star row from $average / $rating_count in
   content-single-product.php, so that is hidden here rather than by patching
   a template that a theme update would overwrite.
   ========================================================================== */

.product-info_descr-rating,
.woocommerce-product-rating,
.wc-block-components-product-rating,
.star-rating,
.woocommerce-review-link,
#reviews,
#tab-reviews,
li.reviews_tab {
  display: none !important;
}

/* The Google / Facebook / BBB trust tiles print their own .star-rating from
   hard-coded aggregate scores — those are not WooCommerce product reviews and
   must stay. Without this they fell out of the tiles and left a bare "4.9"
   where the design shows five stars. display: flex is the theme's own value
   for .star-rating. */
.reviews .star-rating {
  display: flex !important;
}

/* The divider that sat between the rating and the SKU would otherwise be left
   stranded at the start of the line. */
.product-info_descr-rating + .product-info_descr-divider {
  display: none !important;
}

/* ==========================================================================
   REVIEW TILES — MATCH THE DESIGN, MINUS YELP
   --------------------------------------------------------------------------
   The design ships four tiles (Google / Yelp / Facebook / BBB) in
   theme style.css:

     .reviews      { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem }
     .reviews_item { display: flex; align-items: center; gap: 1rem }

   i.e. each tile is a ROW — logo on the left, name/stars/count on the right.
   Yelp was dropped from the markup, so the three survivors sat in a
   four-column grid and left an empty column at the end.

   The only thing that needs to change is the column count. Everything else
   (tile padding, icon size, type, the row layout inside each tile) is the
   design's and is left alone — an earlier attempt here set
   flex-direction: column on .reviews_item, which is what stacked the logo
   above left-aligned text and made the tiles look wrong.

   The width cap keeps each tile the size it is in the design (~218px at the
   920px container) instead of letting three 1fr columns stretch them to
   ~296px; justify-content centres the shortened row. The breakpoints mirror
   the design's own (two up at 1023px, one up at 479px) and have to be
   restated because this file loads after the theme's.

   NOT .footer_badges — that is the footer's "Insured & Certified / We make
   it easy / Secure payment / Discount prices" row, a separate four-tile
   element. Targeting that one by mistake squeezed it into three columns.
   ========================================================================== */

.reviews {
  grid-template-columns: repeat(3, minmax(0, 22rem));
  justify-content: center;
}

@media (max-width: 1023px) {
  .reviews {
    grid-template-columns: repeat(2, minmax(0, 22rem));
  }
}

@media (max-width: 479px) {
  .reviews {
    grid-template-columns: minmax(0, 22rem);
  }
}

/* ==========================================================================
   Long-form content typography
   --------------------------------------------------------------------------
   Two more places running mixed sizes:

     Description tab   paragraphs 17.43px, bullet lists 14px
     FAQ answers       below the 16px floor

   The 17.43px is the same accidental computed value that turned up on the
   dimensions row — not a size anyone picked. Everything a customer reads in
   these blocks goes to 16px, which also stops a bulleted list looking like a
   footnote to the paragraph directly above it.
   ========================================================================== */

.product-descr_content,
.product-descr_content p,
.product-descr_content li,
.product-descr_content ul,
.product-descr_content ol,
.product-descr_content span,
.product-descr_content strong {
  font-size: 1.6rem !important;
  line-height: 1.65;
}

/* Headings inside the description keep their hierarchy. */
.product-descr_content h2,
.product-descr_content h3,
.product-descr_content h4 {
  font-size: 1.9rem !important;
  line-height: 1.4;
}

/* The tab buttons themselves — Description / Specifications / Safety & Setup. */
.product-descr .product-descr_nav a,
.product-descr [class*="nav"] a {
  font-size: 1.6rem;
}

/* FAQ accordions, both the theme's own and the ones the FAQ plugin renders. */
.acco_content-inner,
.acco_content-inner p,
.acco_content-inner li,
.lsf-faqs .acco_content-inner,
.lsf-faqs .acco_content-inner p {
  font-size: 1.6rem !important;
  line-height: 1.65;
}

/* ==========================================================================
   Body copy in content boxes
   --------------------------------------------------------------------------
   These paragraphs compute to 17.43px — the same fractional value that turned
   up on the product dimensions row (15.43px) and in the description tab. It
   comes from a fluid calculation rather than a chosen size, which is why the
   page reads as slightly unsettled: nothing is obviously wrong, but no two
   blocks quite agree.

   Scoped to content boxes rather than applied to every paragraph: the theme's
   explicit `fs-18` utility is a deliberate choice and is left alone.
   ========================================================================== */

.content-box > p,
.content-box p:not([class]) {
  font-size: 1.6rem !important;
  line-height: 1.6;
}