/*
 * Theme Name:   Shoptimizer Child
 * Theme URI:    https://books4boys.com
 * Description:  Shoptimizer child theme for Books4Boys — squishworx-inspired redesign
 * Author:       Bill
 * Author URI:   https://books4boys.com
 * Template:     shoptimizer
 * Version:      2.0.2
 * License:      GNU General Public License v2 or later
 * License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:  shoptimizer-child
 */

/*
 * ============================================================
 * BOOKS4BOYS — SQUISHWORX-INSPIRED REDESIGN  v2.0  (2026-03-10)
 *
 * Design reference: squishworx.com (same Shoptimizer 2.9.1 base)
 *
 * KEY DESIGN DECISIONS (all mirroring squishworx.com):
 *   Primary accent .......... #dc9814  (warm gold / amber)
 *   Navigation bg ........... #222     (dark charcoal)
 *   Navigation text ......... #fff     (white)
 *   Navigation hover ........ #dc9814  (gold — Shoptimizer default)
 *   Footer text/links ....... #dd9933  (warm gold)
 *   Footer link hover ....... #81d742  (fresh green)
 *   Add-to-cart bg .......... #000000  (black)
 *   Add-to-cart hover ....... #333333  (dark grey)
 *   Add-to-cart text ........ #ffffff  (white)
 *   Body text ............... #444
 *   Headings ................ #222
 *   Star ratings ............ #ee9e13  (amber gold)
 *   Archive desc bg ......... #efeee3  (warm cream)
 *   Cart total amount ....... #85bb65  (dollar-bill green)
 *   Font family ............. Inter (locally-hosted via Kirki)
 *
 * BOOK COVER ASPECT RATIO:
 *   WooCommerce is configured with a 4:6 (2:3) portrait custom crop.
 *   Unlike squishworx (which uses ~1:1 square product photos), every
 *   Books4Boys product thumbnail is a portrait book cover. CSS MUST
 *   NOT apply any forced 1:1 or square aspect-ratio override.
 *   Rule: height:auto on all product images; no padding-bottom:100%.
 *
 * REVERT:
 *   Originals saved in: shoptimizer-child/revert/
 *     style.css.bak      — previous child-theme CSS
 *     functions.php.bak  — previous functions.php (unchanged in v2)
 *     theme_mods_backup.txt — serialised WP theme_mods snapshot
 *     custom_css_backup.txt — WP Customiser "Additional CSS" snapshot
 *
 * TABLE OF CONTENTS
 *   §1  Book cover aspect-ratio protection  (CRITICAL)
 *   §2  Typography — Inter font stack
 *   §3  Header & search bar
 *   §4  Navigation bar
 *   §5  Cart icon & mini-cart
 *   §6  Below-header promotional bar
 *   §7  Add-to-cart buttons
 *   §8  Product grid — layout & titles
 *   §9  Product image border-radius (20 px, squishworx match)
 *   §10 Product archive description area
 *   §11 Star ratings
 *   §12 Footer colour scheme
 *   §13 Author archive pages (tax-product_brand)
 *   §14 Plex-style product hover (desktop only)
 *   §15 Miscellaneous UI polish
 *   §16 Mobile overrides (≤ 768 px)
 * ============================================================
 */


/* ============================================================
   §1  BOOK COVER ASPECT-RATIO PROTECTION  (CRITICAL)
   ─────────────────────────────────────────────────────────────
   Context:
     WooCommerce → Products → Display is set to a custom 4:6
     (width:height) crop ratio — i.e., every thumbnail is exactly
     2 units wide × 3 units tall (portrait, matching real book
     covers).  The Shoptimizer parent theme does NOT apply a
     forced square aspect-ratio to product images.

   Goal:
     Guarantee that no descendant CSS rule in this file, in the
     parent theme, or in WP's Additional CSS ever collapses the
     portrait image to a square.  The rules below are insurance;
     the WooCommerce crop setting is the primary control.

   What NOT to do (never add these):
     .woocommerce-image__wrapper { padding-bottom: 100%; }
     ul.products li.product img  { aspect-ratio: 1/1; }
     ul.products li.product img  { object-fit: cover; height: Xpx; }
   ============================================================ */

/* Image container: let natural dimensions drive the height */
ul.products li.product .woocommerce-image__wrapper,
ul.products li.product .shoptimizer-plp-image-wrapper {
    position:  relative;
    width:     100%;
    /* No forced height or padding-bottom percentage here.
       The img inside will push the container to its natural height. */
}

/* Product images: width fills the card; height follows the image */
ul.products li.product .woocommerce-image__wrapper img,
ul.products li.product .shoptimizer-plp-image-wrapper img,
ul.products li.product img.attachment-woocommerce_thumbnail,
ul.products li.product img.wp-post-image {
    width:      100%         !important;
    height:     auto         !important; /* <-- preserves portrait ratio   */
    max-width:  100%         !important;
    object-fit: unset        !important; /* cancel any cover/contain crop  */
    display:    block;
}


/* ============================================================
   §2  TYPOGRAPHY — Inter font stack
   ─────────────────────────────────────────────────────────────
   squishworx uses Inter (self-hosted via Kirki) as its sole
   typeface.  Books4Boys has the same Inter woff2 files
   downloaded locally in /wp-content/fonts/inter/.
   Kirki outputs the @font-face rules and font-family assignments
   as inline <style> in <head>.  These rules reinforce the stack
   and set the squishworx-matching size/weight/colour hierarchy.
   ============================================================ */

/* Base body font */
body {
    font-family: 'Inter', system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size:   16px;
    color:       #444;
    line-height: 1.618; /* golden ratio — squishworx body line-height */
}

/* All interactive text elements share the same stack */
button, input, select, textarea {
    font-family: 'Inter', system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Heading hierarchy — squishworx exact sizes & weights */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-weight: 600;
    color:       #222;
}

/* squishworx H1: 46 px (fluid), letter-spacing -1.3 px */
h1 {
    font-size:      clamp(26px, 4vw, 46px);
    letter-spacing: -1.3px;
    line-height:    1.2;
}

/* squishworx H2: 30 px, letter-spacing -0.5 px */
h2 {
    font-size:      clamp(22px, 3vw, 30px);
    letter-spacing: -0.5px;
    line-height:    1.25;
}

h3 { font-size: 24px; letter-spacing: 0; line-height: 1.45; }
h4 { font-size: 18px; letter-spacing: 0; line-height: 1.4;  }
h5 { font-size: 18px; letter-spacing: 0; line-height: 1.4;  }

/* Product listing title — squishworx: 15 px, weight 600 */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2.woocommerce-loop-product__title,
ul.products li.product .product-title {
    font-family:    'Inter', system-ui, sans-serif !important;
    font-size:      15px   !important;
    font-weight:    600    !important;
    line-height:    1.3;
    color:          #222;
    letter-spacing: 0;
    margin-top:     0.5rem;
}

/* Product price in grid */
ul.products li.product .price {
    font-size:   15px;
    font-weight: 600;
    color:       #222;
}


/* ============================================================
   §3  HEADER & SEARCH BAR
   ─────────────────────────────────────────────────────────────
   squishworx header: white background, logo left, search center,
   cart right.  Header padding: 10 px top + bottom (from theme_mods
   shoptimizer_header_top_padding / shoptimizer_header_bottom_padding).
   Both books4boys and squishworx use header-5 full-width layout
   (already set in books4boys theme_mods — no change needed there).
   ============================================================ */

/* Header background always white */
.site-header,
#masthead {
    background-color: #fff;
}

/* Site-branding padding matches squishworx's 10 px top/bottom header padding */
.site-branding {
    padding: 10px 0;
}

/* ── Search bar ────────────────────────────────────────────── */
/* squishworx: outline-style search, 30 px border-radius, #e2e2e2 border */
.woocommerce-product-search input[type="search"],
.header-search input[type="search"],
.search-form input.search-field,
input.search-field {
    border-radius: 30px  !important;
    border:        2px solid #e2e2e2 !important;
    background:    #fff  !important;
    font-family:   'Inter', system-ui, sans-serif;
    font-size:     15px;
    color:         #222;
    padding:       10px 20px;
    transition:    border-color 0.2s ease;
}

/* Gold border on focus — squishworx accent */
.woocommerce-product-search input[type="search"]:focus,
input.search-field:focus {
    border-color: #dc9814 !important;
    outline:      none;
    box-shadow:   0 0 0 3px rgba(220, 152, 20, 0.15);
}


/* ============================================================
   §4  NAVIGATION BAR
   ─────────────────────────────────────────────────────────────
   squishworx: #222 background, white text, #dc9814 on hover.
   These are Shoptimizer defaults — no theme_mods override needed —
   but we re-state them here so they cannot be accidentally lost.
   The primary navigation is HIDDEN in books4boys (via functions.php
   which removes the shoptimizer_primary_navigation hook from
   shoptimizer_header).  The nav bar still renders for the cart
   widget and any additional elements hooked there.
   ============================================================ */

/* The col-full-nav div wraps the primary navigation + cart.
   Background #222 gives the squishworx dark navigation bar look.
   min-height ensures the bar is always visible even if the menu is empty. */
.col-full-nav,
.nav-wrapper,
.shoptimizer-navigation {
    background-color: #222;
    min-height: 44px;  /* ensures dark bar always renders visibly */
}

/* Main navigation inherits the dark background from col-full-nav */
.main-navigation {
    background-color: transparent; /* inherits #222 from col-full-nav */
}

/* Nav links: white, Inter 600, 15 px — squishworx values */
.main-navigation ul li a,
.site-navigation ul li a {
    font-family:    'Inter', system-ui, sans-serif;
    font-size:      15px;
    font-weight:    600;
    letter-spacing: -0.1px;
    color:          #fff;
    text-transform: none;
}

/* Hover: squishworx gold accent */
.main-navigation ul li a:hover,
.main-navigation ul li:hover > a,
.site-navigation ul li a:hover {
    color: #dc9814;
}

/* Dropdown submenus */
.main-navigation ul ul {
    background: #fff;
}

.main-navigation ul ul li a {
    font-size:   14px;
    font-weight: 400;
    color:       #323232;
}

.main-navigation ul ul li a:hover {
    color: #dc9814;
}

/* Navigation is now SHOWN to match squishworx's dark nav bar.
   v2.0 redesign: The WP Additional CSS nav-hide rule has been removed.
   The col-full-nav div renders with #222 background + Books4Boys Nav menu. */
/* .main-navigation { display: none !important; } -- REMOVED in v2.0 redesign */


/* ============================================================
   §5  CART ICON & MINI-CART
   ─────────────────────────────────────────────────────────────
   squishworx: cart uses the 'bag' icon (theme_mods cart_icon=bag),
   coloured #dc9814 (gold) with a count badge.
   Cart total price displayed in dollar-bill green #85bb65.
   ============================================================ */

/* Cart icon link colour — gold accent matching squishworx */
.site-header-cart a,
.header-cart-link,
.shoptimizer-header-cart a,
.shoptimizer-cart-icon,
.nav-cart a,
.woocommerce-mini-cart__total .amount {
    color: #dc9814;
}

.site-header-cart a:hover,
.header-cart-link:hover {
    color: #b87a10; /* slightly darker gold on hover */
}

/* Cart total in header/mini-cart — dollar-bill green */
.site-header-cart .woocommerce-Price-amount.amount,
.shoptimizer-mini-cart-wrap .woocommerce-Price-amount.amount {
    color: #85bb65 !important;
}

/* Round the cart button pill — squishworx style */
.site-header-cart a.cart-contents,
.header-cart a,
.at-header-cart a {
    border-radius: 999px !important;
}


/* ============================================================
   §6  BELOW-HEADER PROMOTIONAL BAR
   ─────────────────────────────────────────────────────────────
   squishworx uses a below-header widget area with #dc9814 gold
   background and white text (theme_mods: shoptimizer_below_header_
   padding=2).  This bar is used for free-shipping notices, promos
   and announcements.
   ============================================================ */

.below-header-widget-region,
.below-header,
.site-below-header,
.shoptimizer-below-header {
    background-color: #dc9814;
    color:            #fff;
    font-family:      'Inter', system-ui, sans-serif;
    font-size:        14px;
    font-weight:      600;
    padding:          8px 0;
    text-align:       center;
}

.below-header-widget-region a,
.below-header a,
.shoptimizer-below-header a {
    color:           #fff;
    text-decoration: none;
}

.below-header-widget-region a:hover,
.below-header a:hover,
.shoptimizer-below-header a:hover {
    text-decoration: underline;
}


/* ============================================================
   §7  ADD-TO-CART BUTTONS
   ─────────────────────────────────────────────────────────────
   squishworx theme_mods:
     shoptimizer_woocommerce_button_bg:       #000000 (black)
     shoptimizer_woocommerce_button_hover_bg: #333333 (dark grey)
     shoptimizer_woocommerce_button_text:     #ffffff (white)
   Border-radius: 30 px (squishworx: pill-shaped buttons)
   Font: Inter 600 15 px, no text-transform, no letter-spacing.

   Note: These rules are ALSO present in books4boys' WP Additional CSS
   (stored in the DB).  Stating them here in the child theme CSS keeps
   a single source of truth and ensures they load even if the DB entry
   is cleared.  The DB !important rules will be equivalent.
   ============================================================ */

/* All WooCommerce and generic submit buttons */
.button,
input[type="submit"],
button[type="submit"],
.wc-block-components-button,
ul.products li.product .button,
ul.products li.product .added_to_cart,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .button.product_type_simple,
.product .cart .single_add_to_cart_button,
.woocommerce #respond input#submit,
.woocommerce #respond input#submit.alt,
.widget_shopping_cart a.button.checkout,
.wp-element-button.wc-block-cart__submit-button,
.wp-element-button.wc-block-components-button.wc-block-components-checkout-place-order-button {
    background-color: #000000      !important;
    color:            #ffffff      !important;
    border-radius:    30px         !important;
    border:           none         !important;
    font-family:      'Inter', system-ui, sans-serif !important;
    font-size:        15px         !important;
    font-weight:      600          !important;
    letter-spacing:   0            !important;
    text-transform:   none         !important;
    padding:          0.82em 1.42em !important;
    transition:       background-color 0.2s ease, transform 0.1s ease !important;
    cursor:           pointer;
}

/* ── ADD TO CART BUTTONS: ALWAYS VISIBLE + CENTERED  (squishworx static style) ──
   The Shoptimizer parent theme defaults to opacity:0 for product-grid
   buttons and only reveals them on hover.  squishworx forces
   opacity:1 via the 'static-cta-buttons' body class (theme_mods:
   shoptimizer_layout_woocommerce_cta_display = 'static').
   We reinforce this with a direct override here so buttons are
   ALWAYS visible regardless of the body class, matching the prominent
   black "Add to cart" pills visible in squishworx's product grid.

   v2.0.2: button centered between the price text and the card's bottom edge.

   CENTERING FORMULA (desktop only):
     • Button height:         40 px  (Shoptimizer default)
     • Price margin-bottom:   12 px  (Shoptimizer: 0.75 rem)
     • Desired equal gap:     14 px  above and below the button pill
     • Required padding-bottom on the card = button_height + (2 × gap) − price_margin
                                           = 40 + 28 − 12 = 56 px
     • bottom offset on the button = gap = 14 px
   This positions the button so there are exactly 14 px of breathing room
   between the price text and the top of the button pill, and 14 px
   between the bottom of the button pill and the card's bottom edge. */
ul.products li.product .button,
ul.products li.product .added_to_cart,
ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .button {
    opacity:    1    !important;
    visibility: visible !important;
    bottom:     14px !important; /* centers button in card — see formula above */
}

/* Expand the desktop card's bottom padding-zone from 40 px to 56 px so
   there is room for the 40 px button + 14 px gap below + 2 px above before
   the price margin begins.  Mobile uses position:relative + margin-top:auto
   so padding-bottom is irrelevant there and no mobile override is needed. */
@media (min-width: 993px) {
    ul.products li.product:not(.product-category) {
        padding-bottom: 56px !important; /* was 40 px in parent theme — see centering formula */
    }
}

/* Hover: dark grey, slight lift */
.button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
ul.products li.product .button:hover,
ul.products li.product .added_to_cart:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover,
.product .cart .single_add_to_cart_button:hover,
.widget_shopping_cart a.button.checkout:hover {
    background-color: #333333 !important;
    color:            #ffffff !important;
    transform:        translateY(-1px);
}

/* Loading / disabled state */
.button.loading,
.add_to_cart_button.loading {
    opacity:        0.6;
    pointer-events: none;
}


/* ============================================================
   §8  PRODUCT GRID — LAYOUT & TITLES
   ─────────────────────────────────────────────────────────────
   squishworx hides WooCommerce sort-order and result-count UI
   (theme_mods: display_sorting='' and display_count='').
   These are also in books4boys' WP Additional CSS; restated here
   for completeness.
   Product grid background is light grey #f8f8f8 (squishworx default).
   ============================================================ */

/* Hide sort / count UI — squishworx style */
.woocommerce-ordering    { display: none !important; }
.woocommerce-result-count { display: none !important; }

/* Remove SKU / category / tag meta from product cards */
.product_meta .tagged_as { display: none !important; }

/* Product grid area: light grey background matching squishworx */
.woocommerce-page .content-area,
.archive .content-area,
.tax-product_cat .content-area,
.post-type-archive-product .content-area {
    background-color: #f8f8f8;
}

/* Remove top padding that appears when breadcrumbs are disabled */
.woocommerce.archive .site-content,
.shop .site-content {
    padding-top: 0 !important;
}


/* ============================================================
   §9  PRODUCT IMAGE BORDER-RADIUS
   ─────────────────────────────────────────────────────────────
   squishworx uses 20 px border-radius on product images and cards.
   Previous books4boys child theme used 12 px; updated to 20 px here.

   Clipping approach (same as parent product-card.css):
     The correct clipping ancestor is a.woocommerce-LoopProduct-link
     which wraps ONLY the image — title/price/button are siblings
     outside this link, so overflow:hidden here is safe.
     The .woocommerce-image__wrapper does NOT have overflow:hidden
     in the parent theme (verified in product-card.css ll. 37-40).
   ============================================================ */

/* Primary clip anchor — rounded image at 20 px */
ul.products li.product a.woocommerce-LoopProduct-link {
    display:       block   !important;
    border-radius: 20px    !important;
    overflow:      hidden  !important;
}

/* Belt-and-suspenders: round wrapper divs and img directly */
.woocommerce-image__wrapper,
.shoptimizer-plp-image-wrapper {
    border-radius: 20px !important;
}

.woocommerce ul.products li.product img,
.etheme-product-grid-image img {
    border-radius: 20px !important;
}

/* Match li.product so the hover box-shadow silhouette aligns
   with the rounded cover corners. */
ul.products li.product {
    border-radius: 20px !important;
}


/* ============================================================
   §10  PRODUCT ARCHIVE DESCRIPTION AREA
   ─────────────────────────────────────────────────────────────
   squishworx uses a warm cream background (#efeee3) for the
   archive/category description header area — the same color is
   used in books4boys for the tan border-frame on author images.
   Typography: 17 px, color #222, letter-spacing -0.1 px.
   ============================================================ */

.woocommerce-products-header {
    background-color: #efeee3;
}

.archive-description,
.woocommerce-products-header .term-description {
    font-size:      17px;
    color:          #222;
    letter-spacing: -0.1px;
    line-height:    1.5;
}

/* Page/archive title */
.woocommerce-products-header__title,
.archive-title,
.page-title {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600;
    color:       #222;
}


/* ============================================================
   §11  STAR RATINGS
   ─────────────────────────────────────────────────────────────
   squishworx: #ee9e13 (amber gold) for filled stars.
   ============================================================ */

.star-rating span,
.woocommerce-product-rating .star-rating span {
    color: #ee9e13 !important;
}


/* ============================================================
   §12  FOOTER COLOUR SCHEME
   ─────────────────────────────────────────────────────────────
   squishworx theme_mods:
     shoptimizer_footer_color:             #dd9933  (text)
     shoptimizer_footer_links_color:       #dd9933  (links)
     shoptimizer_footer_links_hover_color: #81d742  (hover — green)
   Shoptimizer defaults (books4boys without override):
     text: #ccc   links: #999   hover: #fff

   The Kirki customizer would normally inject these as inline <style>
   using the selectors below.  Since books4boys theme_mods doesn't
   include these keys yet (they will be added via DB update in step §DB),
   we set them explicitly here in the child theme CSS as a direct
   override.  The DB update (task §3) will additionally store them in
   Kirki so they survive any theme_mods rebuild.
   ============================================================ */

/* Footer text colour — warm gold */
footer.site-footer,
footer.copyright {
    color: #dd9933;
}

/* Widget headings in footer: white for contrast on dark background */
footer.site-footer .widget-title {
    color:          #ffffff;
    font-size:      13px;
    font-weight:    600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height:    1.5;
}

/* Footer links — warm gold (matches text) */
footer.site-footer a:not(.button),
footer.copyright a {
    color:           #dd9933;
    text-decoration: none;
    transition:      color 0.2s ease;
}

/* Footer link hover — fresh green (squishworx #81d742) */
footer.site-footer a:not(.button):hover,
footer.copyright a:hover {
    color: #81d742;
}

/* The ::after pseudo-element on nav li links is used for underlines;
   Kirki also sets border-color here on hover. */
footer.site-footer li a::after {
    border-color: #81d742;
}

/* SVG / icon accents in footer use warm gold */
footer.site-footer .svg-icon,
footer.site-footer svg {
    fill: #dd9933;
}

/* Footer padding — matches squishworx 4 rem top/bottom */
footer.site-footer .footer-widgets,
footer.site-footer .col-full {
    padding-top:    4rem;
    padding-bottom: 4rem;
}


/* ============================================================
   §13  AUTHOR ARCHIVE PAGES  (tax-product_brand)
   ─────────────────────────────────────────────────────────────
   Unchanged from v1.0 — centres author name, bio + image header,
   books grid, and the below-books biographical block.
   Full-width layout override (the Shoptimizer theme applies a
   left-woocommerce-sidebar body class that floats .content-area
   right with a gap; override to fill the full column).
   ============================================================ */

/* 0. Force full-width layout */
.tax-product_brand .content-area {
    width: 100% !important;
    float: none !important;
}

/* 1. Author name */
.tax-product_brand .woocommerce-products-header__title {
    text-align: center;
}

/* 2. Bio + image header block */
.tax-product_brand .woocommerce-products-header {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
}

.tax-product_brand .woocommerce-products-header .term-description {
    text-align: center;
    max-width:  720px;
    margin:     0 auto 1.5rem;
}

/* Remove full-width tan slab on author pages (use global §10 rule) */
.tax-product_brand .woocommerce-products-header {
    background-color: transparent;
}

/* Author photo: centered, max 280 px, 10 px tan frame matching §10 cream */
.tax-product_brand .woocommerce-products-header .cg-cat-image {
    display:   block;
    margin:    0 auto 1.5rem;
    max-width: 280px;
    height:    auto;
    border:    10px solid #efeee3;
}

/* 3. Books grid — justify-content:center so odd-count rows don't left-align */
.tax-product_brand ul.products {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
}

/* 4. Below-books biographical data block */
.tax-product_brand .below-woocommerce-category {
    text-align: center;
    max-width:  720px;
    margin:     2rem auto;
}


/* ============================================================
   §14  PLEX-STYLE PRODUCT HOVER  (DESKTOP ONLY, ≥ 769 px)
   ─────────────────────────────────────────────────────────────
   Design goals (unchanged from v1.0):
     • Tight, uniform grid at rest — 15 px per-side gutters.
     • On hover: card scales to 1.08 × (~15 px extra per side),
       filling the gutter gap without overlapping neighbours.
     • Three-layer drop-shadow floats the card above the surface.
     • Non-hovered siblings dim to 72 % opacity (Plex "row dim").
     • GPU-composited (will-change:transform) for 60 fps smooth.
     • All effects DISABLED on mobile (touch = no hover).

   Updated in v2.0:
     • border-radius on li.product changed 12 px → 20 px (§9).
   ============================================================ */

/* ── Allow scaled cards to escape their cells ──────────────── */
/* Any ancestor with overflow:hidden clips the growing card;
   set overflow:visible on key wrappers so shadow/footprint show. */
ul.products {
    overflow: visible !important;
}

div[class*="columns-"] {
    overflow: visible !important;
}

.woocommerce,
.woocommerce-page,
.content-area,
.site-content {
    overflow: visible !important;
}

/* ── Base state ─────────────────────────────────────────────── */
ul.products li.product {
    position:    relative;
    z-index:     1;

    /* Promote to GPU composited layer — smooth transform animation */
    will-change: transform;

    /* Outgoing transition: z-index delay = card fully shrunk before
       it drops below neighbours in the stacking context. */
    transition:
        transform  0.28s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        opacity    0.24s ease,
        z-index    0s   0.28s;

    overflow: visible !important;
}

/* ── Dim siblings while browsing the grid ──────────────────── */
ul.products:hover li.product:not(:hover) {
    opacity: 0.72;
}

/* ── Hover state ────────────────────────────────────────────── */
ul.products li.product:hover {
    transform:  scale(1.08) !important;
    z-index:    60          !important;
    opacity:    1           !important;

    /* Three-layer shadow: tight ambient → mid spread → soft halo */
    box-shadow:
        0  1px   3px rgba(0, 0, 0, 0.10),
        0  6px  18px rgba(0, 0, 0, 0.16),
        0 24px  56px rgba(0, 0, 0, 0.24) !important;

    /* Incoming transition: z-index instant (0s) so card is already
       on top before the scale animation begins — prevents slide-under
       artefact on the first few animation frames. */
    transition:
        transform  0.28s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        opacity    0.24s ease,
        z-index    0s   0s;
}

/* ── Neutralise parent-theme img scale on hover ─────────────── */
/* Shoptimizer applies transform:scale(0.98) to the product image
   on hover — that fights our card-level scale and causes a
   double-transform stutter; cancel it here. */
ul.products li.product:hover img,
ul.products li.product:not(.product-category):hover img {
    transform: none !important;
    opacity:   1    !important;
}

/* ── Prevent hover shadow overlapping adjacent rows ─────────── */
@media (min-width: 993px) {
    ul.products li.product:not(.product-category)::before {
        margin-top: 0;
        height:     100%;
    }
}


/* ============================================================
   §15  MISCELLANEOUS UI POLISH
   ─────────────────────────────────────────────────────────────
   Small details that match squishworx's overall polish level.
   ============================================================ */

/* Global link colour — squishworx uses #1e68c4 blue */
a {
    color:                    #1e68c4;
    text-decoration-thickness: 0.75px;
    text-underline-offset:     0.12em;
    transition:                color 0.2s ease;
}

a:hover {
    color: #111;
}

/* Functional/navigational links should inherit context, not show blue */
.main-navigation a,
.site-header a,
.site-header-cart a,
footer.site-footer a,
.button,
ul.products li.product .button,
ul.products li.product .woocommerce-loop-product__title a {
    color: inherit;
}

/* Product title link: inherit card colour, no underline at rest */
ul.products li.product .woocommerce-loop-product__title a {
    text-decoration: none;
}

ul.products li.product .woocommerce-loop-product__title a:hover {
    color: #dc9814; /* gold hover on product name — squishworx accent */
}

/* Subtle inset border on .img-wrap containers — squishworx custom CSS */
.img-wrap {
    border: #a6a6a6 inset 4px;
}

/* Progress/stock bar colour — squishworx green */
.stock-bar,
.woocommerce-product-attributes-item--availability {
    color: #3bb54a;
}

/* Sale badge */
.onsale {
    background-color: #3bb54a;
    color:            #fff;
    border-radius:    50%;
}

/* Product category tags (small-caps, squishworx micro-label style) */
ul.products li.product .product-category-tag,
.product-category-tag {
    font-size:      11px;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color:          #666;
}

/* Widget title style — squishworx: 13 px, 600 weight, uppercase */
.widget-title,
.widgettitle {
    font-family:    'Inter', system-ui, sans-serif;
    font-size:      13px;
    font-weight:    600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height:    1.5;
    color:          #222;
}

/* Blockquote — squishworx: 20 px, 600 weight */
blockquote {
    font-size:   20px;
    font-weight: 600;
    line-height: 1.45;
    color:       #222;
}

blockquote::before {
    color:       #ccc;
    font-family: Georgia, serif;
    font-size:   50px;
}

/* Definition list secondary text */
dl dd {
    font-size: 0.9em;
    color:     #545454;
}


/* ============================================================
   §16  MOBILE OVERRIDES  (≤ 768 px)
   ─────────────────────────────────────────────────────────────
   • Disable all Plex hover effects (touch has no hover state).
   • Scale typography down slightly for narrow screens.
   • Prevent iOS auto-zoom on input focus (font-size ≥ 16 px).
   ============================================================ */

@media (max-width: 768px) {

    /* ── Disable all Plex effects ─────────────────────────── */
    ul.products li.product,
    ul.products li.product:hover,
    ul.products:hover li.product:not(:hover) {
        transform:   none !important;
        box-shadow:  none !important;
        opacity:     1    !important;
        z-index:     1    !important;
        transition:  none !important;
        will-change: auto !important;
    }

    /* ── Mobile typography scale-down ───────────────────── */
    body { font-size: 15px; }

    h1 {
        font-size:      clamp(22px, 6vw, 28px);
        letter-spacing: -0.5px;
    }
    h2 { font-size: clamp(18px, 5vw, 24px); }

    /* Mobile product title */
    ul.products li.product .woocommerce-loop-product__title {
        font-size: 14px !important;
    }

    /* ── Prevent iOS input zoom (font-size must be ≥ 16 px) ── */
    input[type="text"],
    input[type="email"],
    input[type="search"],
    input[type="number"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px !important;
    }
}