/* Supplemental styling for WooCommerce components theme.json doesn't reach.
   Deliberately targets WooCommerce's own stable CSS classes rather than
   copying/overriding its PHP templates, so this survives WooCommerce
   version updates. */

.woocommerce ul.products li.product img,
.wc-block-components-product-image img {
    border-radius: 12px;
}

.onsale,
.wc-block-components-product-sale-badge,
.wc-block-grid__product-onsale {
    background: #C1440E !important;
    color: #fff !important;
    border-radius: 999px !important;
    border: none !important;
}

.wc-block-cart__empty-cart__title {
    font-family: 'Fraunces', Georgia, serif;
}

/* theme.json's heading/button styles are tuned for real page content
   (hero titles, editorial CTAs) - applied unscoped, they make WooCommerce's
   own small, functional UI (product titles, tab headings, add-to-cart
   buttons, the sale badge) look oversized, especially on mobile where
   there's no room to breathe. Scoped back down here to WooCommerce's own
   stable classes rather than touching global heading sizes. */

.woocommerce div.product .product_title,
.wc-block-components-product-title {
    font-size: clamp(1.35rem, 5vw, 1.75rem);
}

.woocommerce-tabs #tab-additional_information h2,
.woocommerce-tabs #tab-reviews h2,
.woocommerce-Reviews-title {
    font-size: clamp(1.1rem, 4vw, 1.3rem);
}

.onsale,
.wc-block-components-product-sale-badge {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0.3rem 0.75rem !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}

.woocommerce div.product form.cart .button,
.woocommerce ul.products li.product .button,
.woocommerce #content div.product .button,
.wc-block-components-product-button .wp-block-button__link {
    padding: 0.6rem 1.5rem;
    font-size: 14px;
}

@media (max-width: 600px) {
    .woocommerce ul.products li.product .button {
        width: auto;
        display: inline-block;
    }
}

/* The default twentytwentyfive footer template part renders the site
   title as a full H2 - correct scale for a real page heading, oversized
   for what's really just a small credit line at the bottom of every page.
   Scoped to the footer specifically so H2s used in real content elsewhere
   keep their normal size. */
footer .wp-block-site-title {
    font-size: 1.1rem !important;
}

/* The shop grid's card size (image + title + price + button, as one
   consistent unit) is controlled by the Product Collection block's own
   "columns" setting in the archive-product template
   (themes/defreakinglicious/templates/archive-product.html - a child-theme
   override of WooCommerce's bundled one, bumped from 3 to 5 columns),
   NOT by CSS here. An earlier attempt shrunk just the <img> directly via
   CSS, which decoupled it from the flex column width every sibling
   element (sale badge, title, price, button) still used, and each fix
   broke a different sibling's alignment. Letting the block's own layout
   system size everything together avoids that entirely.

   Single-product gallery image below is unrelated (classic template, not
   this block), still deliberately capped since that page has no
   multi-column grid to derive a size from. First capped at 220px but only
   inside a max-width:600px media query - meaning desktop was left
   completely unconstrained (measured at 510x510px on a 1440px-wide
   screen). Capped at every screen size now, not just mobile, with the
   mobile size a bit smaller than desktop's since there's less room either
   way. */

.woocommerce-product-gallery,
.woocommerce div.product div.images {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 600px) {
    .woocommerce-product-gallery,
    .woocommerce div.product div.images {
        max-width: 220px;
    }
}

/* Shop grid: the Product Collection block's <ul> is CSS Grid, which
   already stretches every card to match the tallest one in its row - but
   each <li> card itself is plain block flow, not a flex column, so its
   content (image/title/price/button) just stacks and stops; the button
   lands wherever the title happens to end rather than filling the
   stretched card. Longer titles (e.g. "Organic 100% Wholemeal Rye Bread
   with Sunflower Seeds" wrapping to 3 lines vs "Classic White" on 1) push
   their own button down further than shorter-titled neighbours, so
   buttons end up at different heights across a row. Making the card a
   flex column and pushing the button to the bottom with margin-top: auto
   fixes that regardless of how much text is above it. */
.wc-block-product-template li.wc-block-product {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.wc-block-product-template li.wc-block-product .wp-block-woocommerce-product-button {
    margin-top: auto;
    padding-top: 0.75rem;
}