/* ==========================================================================
   v2 fixes CSS
   Last layer in the cascade. Fixes Storefront-parent constraints that fight
   the v2 layout and adds tweaks the prototype assumed but didn't explicitly
   declare.
   ========================================================================== */

/* --- 1. Bypass Storefront's .col-full max-width on home + WC pages.
   The parent theme caps content at ~1064px which crushes the v2 hero,
   trust strip, and footer. v2 expects 1400px max via .container. */
body.home #content,
body.home .col-full,
body.page-template-front-page #content,
body.page-template-front-page .col-full,
body.woocommerce-page #content,
body.woocommerce-page .col-full {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* --- 2. Tighten the header. Storefront leaks vertical padding into .hdr. */
.hdr {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
.hdr .search { max-height: 44px; }
.hdr .search input { font-size: 14px; }

/* --- 3. Hero photo aspect ratio: was 4/5 (portrait, 571px tall). Wider
   container brings the column up to ~600px wide, which makes 4/5 still
   feel too tall. Move to 5/4 landscape so the hero stays balanced. */
.hero-v2 .photo {
  aspect-ratio: 5 / 4 !important;
  max-height: 520px;
}

/* --- 4. Hero h1 size: clamp() defaulted to 60px, which wraps to 4 lines
   even at 1400px container width. Bring max down. */
.hero-v2 h1 {
  font-size: clamp(36px, 4.2vw, 52px) !important;
  line-height: 1.05 !important;
  margin: 12px 0 18px !important;
}

/* --- 5. Catalog cards: ensure the media tile shows a product image.
   front-page.php now emits an <img> inside .media; this rule sizes it. */
.cat-card .media img {
  display: block;
  width: 70%;
  height: auto;
  max-height: 80%;
  object-fit: contain;
  margin: 0 auto;
  align-self: center;
  justify-self: center;
}
.cat-card .media {
  place-items: center;
  min-height: 280px;
}

/* --- 5b. Starter Pack two-column variant: the homepage Retail Starter Pack
   panel uses a 2-column grid (image left, info right). Without these rules
   the media's aspect-ratio stretches the body to match (~660px), and
   `justify-content: center` puts the title in the middle of a half-empty
   panel. We size the media to a sensible max, keep both columns top-aligned,
   and let the body flow from the top. */
.cat-card--starter { align-items: start; }
.cat-card--starter .media {
  aspect-ratio: auto;
  min-height: 320px;
  max-height: 460px;
}
.cat-card--starter .media img {
  max-height: 100%;
  width: auto;
  max-width: 100%;
}
.cat-card--starter .body {
  justify-content: flex-start;
  border-top: none;
}

/* --- 5c. WC block product grids ("New in store" on /cart/, etc.): defensive
   constraints so a single product's mis-sized thumbnail can't blow out the
   row. The 4th cart product on prod was rendering a 609x609 file at a URL
   suffixed -324x324 because thumbnail sizes weren't regenerated; this caps
   it to the row's intended cell size. Proper fix: `wp media regenerate
   --image_size=woocommerce_thumbnail` on Kinsta. */
.wc-block-grid__products .wc-block-grid__product { max-width: 100%; }
.wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-image img,
.wc-block-grid__products .wc-block-grid__product img.attachment-woocommerce_thumbnail {
  width: 100%;
  height: auto;
  max-width: 324px;
  max-height: 324px;
  object-fit: cover;
  aspect-ratio: 1 / 1;
  display: block;
  margin: 0 auto;
}

/* --- 6. Surface tints for the three mix lines. v2-pages.css declared these
   via class names like .media.aroid; restate so they apply on the home grid. */
.cat-card .media.aroid     { background: var(--vp-sage); }
.cat-card .media.succulent { background: var(--vp-pink); }
.cat-card .media.orchid    { background: var(--vp-peach); }
.cat-card .media.cream     { background: var(--vp-cream); }

/* --- 7. Trust strip: when the container is wide, balance the four columns
   evenly. Default v2-pages already does this, but force in case a parent
   rule fights it. */
.trust {
  grid-template-columns: repeat(4, 1fr) !important;
  align-items: center;
}

/* --- 8. CTA-band centering with proper max-width inside the wider container. */
.cta-band > * {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* --- 9. Footer: explicit grid template since .col-full bypass nukes a few
   parent constraints we relied on. */
.ft .inner {
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr !important;
}

/* --- 10. Storefront's admin bar offset for sticky header. Push the sticky
   header below the WP admin bar when logged-in admin is browsing. */
body.admin-bar .hdr {
  top: 32px;
}
@media (max-width: 782px) {
  body.admin-bar .hdr { top: 46px; }
}

/* --- 11. WooCommerce pages (shop, cart, checkout, my-account) get the wider
   container too, but keep their internal margin so cards don't smash the
   viewport edge. */
body.woocommerce-page .col-full {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* --- 12. Responsive: collapse trust + footer on narrow viewports. */
@media (max-width: 880px) {
  .trust { grid-template-columns: repeat(2, 1fr) !important; }
  .ft .inner { grid-template-columns: 1fr !important; gap: 24px; }
  .hero-v2 .photo { aspect-ratio: 16 / 10 !important; }
}
@media (max-width: 600px) {
  .trust { grid-template-columns: 1fr !important; }
}