/*
Theme Name: Frisky Crucible
Theme URI: https://friskycrucible.art
Author: The Duumvirati
Author URI: https://friskycrucible.art
Description: Dark-theme art gallery and shop for friskycrucible.art. Mobile-first, WooCommerce. Forked from the AdamStudios theme 4.1.5 on 2026-09-27.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Requires at least: 5.0
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: friskycrucible-theme
*/

/* =========================================================================
   CSS CUSTOM PROPERTIES (Design System)
   ========================================================================= */

:root {
    /* Colors */
    --as-bg:             #1a1a1a;
    --as-bg-light:       #242424;
    --as-bg-card:        #2a2a2a;
    --as-text:           #ffffff;
    --as-text-light:     #e0e0e0;
    --as-text-muted:     #999999;
    --as-accent-gold:    #d4a574;
    --as-accent-gold-hover: #e0b88a;
    --as-accent-blue:    #4a7ba7;
    --as-accent-blue-hover: #5a8db9;
    --as-border:         #333333;
    --as-badge-bg:       #555555;
    --as-badge-text:     #ffffff;
    --as-overlay:        rgba(0, 0, 0, 0.6);
    --as-collected-bg:   #3a3a3a;

    /* Typography */
    --as-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    /* Display face for titles, nav and labels. Londrina Solid is a hand-
       lettered face with the slight unevenness of painted sign letters,
       which is what Adam paints into his own work (COWBOY BAR, OKLAHOMA,
       TACOS Y MAS). Body copy stays on the system stack. Self-hosted from
       the theme's fonts folder: no request leaves the site for it. */
    --as-font-display: 'Londrina Solid', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --as-font-size-base: clamp(1rem, 0.9rem + 0.25vw, 1.25rem);
    --as-font-size-sm: clamp(0.85rem, 0.8rem + 0.2vw, 1rem);
    --as-font-size-lg: clamp(1.25rem, 1.1rem + 0.5vw, 1.75rem);
    --as-font-size-xl: clamp(1.5rem, 1.3rem + 0.75vw, 2.25rem);
    --as-font-size-xxl: clamp(2rem, 1.6rem + 1vw, 3rem);
    --as-line-height: 1.6;

    /* Spacing */
    --as-space-xs: 0.5rem;
    --as-space-sm: 0.75rem;
    --as-space-md: 1rem;
    --as-space-lg: 1.5rem;
    --as-space-xl: 2rem;
    --as-space-xxl: 3rem;

    /* Layout */
    --as-max-width: 1400px;
    --as-sidebar-width: 400px;

    /* Transitions */
    --as-transition: 0.2s ease;

    /* Borders */
    --as-radius: 4px;
    --as-radius-lg: 5px; /* softer than a hard edge, smaller than a UI card — reads as a physical print */
}

/* =========================================================================
   RESET & BASE
   ========================================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    /* Reserve the scrollbar gutter so the page width doesn't change when the
       scrollbar appears. Keeps the masonry column width constant across
       lazy-loaded batches (and avoids a layout-wide shift on first scroll). */
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--as-font-family);
    font-size: var(--as-font-size-base);
    line-height: var(--as-line-height);
    color: var(--as-text);
    background: var(--as-bg) url('site-background.jpg') center center / cover no-repeat fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* 65% dark overlay on background texture */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65);
    z-index: -1;
    pointer-events: none;
}

/* iOS does not support background-attachment: fixed — falls back to scroll, which is fine */
@supports (-webkit-touch-callout: none) {
    body {
        background-attachment: scroll;
    }
}

/* Hide WordPress admin bar and remove the 32px top offset it creates */
#wpadminbar {
    display: none !important;
}

html {
    margin-top: 0 !important;
}

body.admin-bar {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

a {
    color: var(--as-accent-gold);
    text-decoration: none;
    transition: color var(--as-transition);
}

a:hover,
a:focus {
    color: var(--as-accent-gold-hover);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

@font-face {
    font-family: 'Londrina Solid';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(fonts/londrina-400.woff2) format('woff2');
}
@font-face {
    font-family: 'Londrina Solid';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(fonts/londrina-900.woff2) format('woff2');
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--as-space-md);
    font-family: var(--as-font-display);
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.15;
    color: var(--as-text);
}

h1 { font-size: var(--as-font-size-xxl); }
h2 { font-size: var(--as-font-size-xl); }
h3 { font-size: var(--as-font-size-lg); }

p {
    margin: 0 0 var(--as-space-md);
    color: var(--as-text-light);
}

/* =========================================================================
   LAYOUT CONTAINER
   ========================================================================= */

.friskycrucible-container,
.site-content,
.woocommerce {
    width: 100%;
    max-width: var(--as-max-width);
    margin: 0 auto;
    padding: 0 var(--as-space-md);
}

/* Mobile: reclaim the side gutters so content uses the full screen width. */
@media (max-width: 768px) {
    .friskycrucible-container,
    .site-content,
    .woocommerce {
        padding-left: var(--as-space-xs);
        padding-right: var(--as-space-xs);
    }

    /* Header keeps a slightly larger gutter so logo/cart icon don't touch edges. */
    .site-header .friskycrucible-container {
        padding: 0 var(--as-space-sm) !important;
    }

    /* Single-product page: the gallery, video and summary should also breathe
       as little as possible on phones — kill the page padding entirely. */
    .single-product .friskycrucible-container {
        padding-left: 0;
        padding-right: 0;
    }

    .single-product div.product {
        padding-left: var(--as-space-xs);
        padding-right: var(--as-space-xs);
    }
}

/* =========================================================================
   PAGE TITLES (regular pages: Contact, Originals, Prints, etc.)
   ========================================================================= */

.entry-header {
    text-align: center;
    padding: var(--as-space-sm) 0 var(--as-space-sm);
}

.entry-title {
    font-size: var(--as-font-size-xxl);
    letter-spacing: 0.03em;
    margin: 0;
}

/* Page subtitle: a small uppercase line that stands in for the page title
   on the three top-level catalog pages (/gallery/, /available/, /prints/).
   Reads as a gallery wall card. Generic class so other pages can opt in. */
/* [PRINTS COMING SOON] Temporary banner shown to visitors on /prints/ while
   prints aren't sellable yet. Matches the gallery's quiet, framed treatment
   rather than shouting — it's an invitation, not an error state.
   Remove alongside the PHP gate when prints go live. */
.friskycrucible-coming-soon {
    max-width: 640px;
    margin: var(--as-space-xl) auto;
    padding: var(--as-space-xl) var(--as-space-lg);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--as-radius-lg);
    background: rgba(255, 255, 255, 0.03);
}
.friskycrucible-coming-soon-kicker {
    margin: 0 0 var(--as-space-sm);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(212, 165, 116, 0.95);
}
.friskycrucible-coming-soon-body {
    margin: 0;
    color: var(--as-text-muted, rgba(255, 255, 255, 0.72));
    font-size: 0.98rem;
    line-height: 1.7;
}
.friskycrucible-coming-soon-body a {
    color: var(--as-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Admin-only reminder that visitors are seeing something different. */
.friskycrucible-admin-note {
    max-width: 760px;
    margin: 0 auto var(--as-space-md);
    padding: 10px 14px;
    border-radius: var(--as-radius);
    border: 1px dashed rgba(212, 165, 116, 0.5);
    background: rgba(212, 165, 116, 0.08);
    color: rgba(212, 165, 116, 0.95);
    font-size: 0.8rem;
    text-align: center;
}

/* Shared intro paragraph that sits under the page subtitle on /gallery/,
   /available/, and /prints/. One class, one style, edited in one place. */
.asg-page-intro {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 2rem;
    padding: 0 var(--as-space-md);
    color: var(--as-text-muted, rgba(255, 255, 255, 0.7));
    font-size: 0.95rem;
    line-height: 1.65;
}

.asg-page-subtitle {
    text-align: center;
    margin: 1.5rem 0 1.25rem;
    color: var(--as-text-muted, rgba(255, 255, 255, 0.6));
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

/* Hide the H1 page title on the three catalog pages — the URL bar, the
   nav, and the subtitle below all already make the context obvious, and
   the doubled-up heading was visual noise. The header wrapper goes too so
   we don't leave its padding behind. */
/* Hide just the H1 page title on the three catalog pages; KEEP the header
   wrapper visible so the subtitle + intro that get injected into it on
   /gallery/ still render (the subtitle/intro live inside
   .woocommerce-products-header via the woocommerce_archive_description hook,
   so hiding the whole header used to swallow them too). */
body.post-type-archive-product .woocommerce-products-header > .woocommerce-products-header__title,
body.post-type-archive-product .woocommerce-products-header > .page-title,
body.page-id-1251 .entry-header .entry-title,
body.page-id-1252 .entry-header .entry-title {
    display: none;
}

/* On /prints/ the listing items are originals that have a sellable print —
   the visitor is shopping for prints, not for the originals, so whether
   the original is collected is irrelevant context. Suppress the COLLECTED
   tag (rendered via the ::after rule on .outofstock li.product) here. */
body.page-id-1252 .woocommerce ul.products li.product.outofstock::after {
    display: none;
}

/* Categorized gallery: in-page anchor nav at the top of /gallery/. Same
   uppercase, letter-spaced typography as the page subtitle, separated by
   dim bullets. Wraps on small screens. */
.friskycrucible-gallery-nav {
    text-align: center;
    margin: 0.5rem 0 2rem;
}
.friskycrucible-gallery-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    justify-content: center;
}
.friskycrucible-gallery-nav li {
    display: inline-flex;
    align-items: center;
}
.friskycrucible-gallery-nav li + li::before {
    content: '\2022'; /* bullet */
    margin-right: 1.25rem;
    color: var(--as-text-muted, rgba(255, 255, 255, 0.4));
    opacity: 0.6;
}
.friskycrucible-gallery-nav a {
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--as-text-muted, rgba(255, 255, 255, 0.7));
    text-decoration: none;
    transition: color 0.2s ease;
}
.friskycrucible-gallery-nav a:hover,
.friskycrucible-gallery-nav a:focus-visible {
    color: var(--as-text, #fff);
}

/* One stacked section per style. The section title reuses the
   .asg-page-subtitle treatment so the visual rhythm matches the page
   subtitle. Vertical rhythm: generous gap between sections so the eye
   reads each as its own group. */
.friskycrucible-gallery-section {
    margin: 2.5rem 0;
    scroll-margin-top: 80px; /* so anchor jumps don't hide title under sticky header */
}
.friskycrucible-gallery-section-title {
    margin: 0 0 1.25rem !important;
}

/* Homepage: kill any gap from article/entry-content above the first section */
.home .entry-header {
    display: none;
}

.home article {
    padding: 0 !important;
    margin: 0 !important;
}

/* =========================================================================
   WOOCOMMERCE PAGE TITLES (Gallery/Shop, product archives)
   ========================================================================= */

.woocommerce-products-header {
    text-align: center;
    padding: var(--as-space-xl) var(--as-space-md) 0;
}

.woocommerce-products-header__title,
.woocommerce-products-header .page-title,
.woocommerce .page-title {
    font-size: var(--as-font-size-xxl) !important;
    letter-spacing: 0.03em;
    margin: 0 0 var(--as-space-xs);
    text-align: center !important;
    font-weight: 700;
    font-style: normal;
}

/* Result count is meaningless on a lazy-loading / infinite-scroll grid. */
.woocommerce .woocommerce-result-count {
    display: none;
}

.woocommerce .woocommerce-ordering {
    margin: 0 0 var(--as-space-md);
}

.woocommerce .woocommerce-ordering select {
    background-color: var(--as-bg-card);
    color: var(--as-text);
    border: 1px solid var(--as-border);
    padding: var(--as-space-xs) var(--as-space-sm);
    font-size: var(--as-font-size-sm);
    border-radius: var(--as-radius);
}

/* =========================================================================
   HEADER & NAVIGATION
   ========================================================================= */

.site-header {
    background-color: var(--as-bg);
    border-bottom: 1px solid var(--as-border);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

/* Homepage: no border — images flush against header */
.home .site-header {
    border-bottom: none;
}

.site-header .friskycrucible-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--as-space-lg) !important;
    max-width: none;
    margin: 0;
    min-height: 56px;
    position: relative;
}

.site-branding {
    flex-shrink: 0;
}

.site-title {
    font-size: var(--as-font-size-lg);
    margin: 0;
    padding: 0;
    font-family: var(--as-font-display);
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
}

.site-title a {
    color: var(--as-text);
}

.site-title a:hover {
    color: var(--as-accent-gold);
}

/* Navigation */
.main-navigation {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: none; /* Hidden on mobile by default */
}

.main-navigation.active {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--as-bg);
    border-bottom: 1px solid var(--as-border);
    padding: var(--as-space-md);
    z-index: 999;
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--as-space-sm);
    align-items: flex-end;
}

.main-navigation a {
    color: var(--as-text-light);
    font-family: var(--as-font-display);
    font-weight: 400;
    font-size: calc(var(--as-font-size-sm) * 1.15);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: var(--as-space-sm) 0;
    display: block;
    transition: color var(--as-transition);
}

.main-navigation a:hover,
.main-navigation .current-menu-item a {
    color: var(--as-accent-gold);
}

/* Mobile menu toggle */
.menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--as-border);
    color: var(--as-text);
    padding: var(--as-space-xs) var(--as-space-sm);
    cursor: pointer;
    font-size: var(--as-font-size-sm);
    border-radius: var(--as-radius);
    min-width: 48px;
    min-height: 48px;
    flex-shrink: 0;
}

.menu-toggle:hover {
    border-color: var(--as-accent-gold);
    color: var(--as-accent-gold);
}

/* Desktop navigation */
@media (min-width: 769px) {
    .menu-toggle {
        display: none;
    }

    .main-navigation {
        display: block;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .main-navigation ul {
        flex-direction: row;
        gap: var(--as-space-xl);
        align-items: center;
    }

    .main-navigation a {
        padding: 0;
        line-height: 1;
    }
}

/* =========================================================================
   HEADER CART ICON
   ========================================================================= */

.friskycrucible-header-cart {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--as-text-light);
    transition: color var(--as-transition);
    flex-shrink: 0;
}

.friskycrucible-header-cart:hover {
    color: var(--as-accent-gold);
}

.friskycrucible-cart-icon {
    width: 22px;
    height: 22px;
}

.friskycrucible-cart-count {
    position: absolute;
    top: -8px;
    right: -10px;
    background: var(--as-accent-gold);
    color: var(--as-bg);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    pointer-events: none;
}
   ========================================================================= */

.friskycrucible-header-cart {
    grid-column: 3;
    justify-self: end;
    position: relative;
    display: flex;
    align-items: center;
    color: var(--as-text-light);
    transition: color var(--as-transition);
    flex-shrink: 0;
}

.friskycrucible-header-cart:hover {
    color: var(--as-accent-gold);
}

.friskycrucible-cart-icon {
    width: 22px;
    height: 22px;
}

.friskycrucible-cart-count {
    position: absolute;
    top: -8px;
    right: -10px;
    background: var(--as-accent-gold);
    color: var(--as-bg);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    pointer-events: none;
}
    transition: color var(--as-transition);
    flex-shrink: 0;
    margin-left: var(--as-space-lg);
}

.friskycrucible-header-cart:hover {
    color: var(--as-accent-gold);
}

.friskycrucible-cart-icon {
    width: 22px;
    height: 22px;
}

.friskycrucible-cart-count {
    position: absolute;
    top: -8px;
    right: -10px;
    background: var(--as-accent-gold);
    color: var(--as-bg);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    pointer-events: none;
}

/* =========================================================================
   FOOTER
   ========================================================================= */

.site-footer {
    background-color: var(--as-bg);
    border-top: 1px solid var(--as-border);
    padding: var(--as-space-xs) 0;
    margin-top: var(--as-space-lg);
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.footer-content {
    max-width: var(--as-max-width);
    margin: 0 auto;
    padding: 0 var(--as-space-md);
    text-align: center;
}

.footer-nav {
    margin-bottom: var(--as-space-xs);
}

.footer-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--as-space-md);
}

.footer-nav a {
    color: var(--as-text-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.footer-nav a:hover {
    color: var(--as-accent-gold);
}

.site-info {
    color: var(--as-text-muted);
    font-size: 0.7rem;
}

.site-info p {
    margin: 0;
}

/* =========================================================================
   WOOCOMMERCE: SHOP / GALLERY GRID
   ========================================================================= */

/* No-JS fallback layout: a plain row-major CSS Grid. The real gallery layout
   is column-based masonry applied by JS (see .friskycrucible-masonry below):
   tiles fill left-to-right then top-to-bottom and never change column as more
   tiles lazy-load. This grid only shows if JS is disabled. */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
    list-style: none;
    margin: 0;
    padding: 10px;
}

/* Kill WooCommerce clearfix pseudo-elements */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none !important;
    content: none !important;
}

/* 2 columns at 480px+ */
@media (min-width: 480px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 3 columns at tablet */
@media (min-width: 769px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 4 columns at desktop */
@media (min-width: 1201px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Masonry mode (JS-driven). The list becomes a positioned canvas and each
   tile is absolutely placed at the column/offset the JS computes. Tiles keep
   their natural height (aspect preserved) and fill left-to-right then top-to-
   bottom; because each tile's column is fixed by its order, a newly loaded
   tile never shifts the tiles already placed. JS sets each tile's
   width/left/top inline (width with !important to beat the base width:100%
   rule). */
.woocommerce ul.products.friskycrucible-masonry {
    display: block !important;
    position: relative;
    gap: 0;
}
.woocommerce ul.products.friskycrucible-masonry > li.product {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; /* sit above .friskycrucible-set-frame which lives at z-index 0 */
    margin: 0 !important;
}

/* Individual product card in grid */
.woocommerce ul.products li.product {
    background-color: var(--as-bg-card);
    border-radius: var(--as-radius);
    transition: transform var(--as-transition), box-shadow var(--as-transition);
    position: relative;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Single-piece hover: classic Pinterest-style lift. The piece scales up
   slightly with a drop shadow, drawing the eye to the one tile. Excludes
   tiles that are part of a set ([data-set-group]) so set panels don't
   scale individually (which would visually separate them). */
.woocommerce ul.products li.product:not([data-set-group]):hover {
    transform: scale(1.03);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 2;
}

/* Set hover: the whole group lifts together as ONE unit (panels + frame +
   title all translateY the same amount). No per-panel scaling, so the
   panels stay in their relative positions and the set reads as a single
   thing being highlighted, not three pieces splaying apart. */
.woocommerce ul.products li.product.is-set-hover {
    transform: translateY(-3px);
    z-index: 2;
}
.friskycrucible-set-frame.is-set-hover {
    transform: translateY(-3px);
    /* Hover state keeps the embossed bevel but brightens the outer edge
       and deepens the drop shadow, so the frame reads as catching MORE
       light from the upper-left. Visually equivalent in prominence to a
       single tile's scale(1.03) + lift shadow on hover. */
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.55),
        7px 10px 26px rgba(0, 0, 0, 0.7),
        inset 2px 2px 0 rgba(255, 255, 255, 0.4),
        inset -2px -2px 0 rgba(0, 0, 0, 0.5);
}
.friskycrucible-set-frame-title.is-set-hover {
    /* Keep the existing horizontal centering, layer translateY for lift. */
    transform: translateX(-50%) translateY(-3px);
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
    display: block;
    color: var(--as-text);
}

.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: var(--as-radius-lg);
    margin: 0 !important;
    padding: 0 !important;
    display: block;
}

/* Product cards — position: relative anchors the absolute title overlay and
   the "Collected" chyron. The img itself carries the rounded corners. */
.woocommerce ul.products li.product {
    position: relative;
    border-radius: var(--as-radius-lg);
}

/* Cart and checkout thumbnails — same rounded treatment site-wide. */
.woocommerce-cart .cart_item img,
.woocommerce-checkout .cart_item img,
.woocommerce table.cart img,
.woocommerce-mini-cart img,
.friskycrucible-header-cart img,
.woocommerce-checkout-review-order-table img {
    border-radius: var(--as-radius-lg);
    overflow: hidden;
}

/* Homepage sliders: keep 4:5 crop for uniform appearance. No rounded corners
   here — slides are edge-to-edge with no gaps, so curves look out of place. */
.friskycrucible-home-section .woocommerce ul.products li.product,
.friskycrucible-home-section .woocommerce ul.products li.product a img,
.friskycrucible-home-section .woocommerce ul.products li.product img {
    border-radius: 0 !important;
}
.friskycrucible-home-section .woocommerce ul.products li.product a img,
.friskycrucible-home-section .woocommerce ul.products li.product img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

/* Title chyron — mirrors the "Collected" tag at the bottom-right but
   anchored to the top-left of the frame. Hidden by default; fades in
   when the user hovers the thumbnail. On touch devices (no hover) the
   title stays visible so it's still discoverable. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    margin: 0;
    padding: 3px 10px;
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1.3;
    color: rgba(0, 0, 0, 0.85);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    /* Keep titles on a single line. On a narrow tile a long title may
       overhang the tile edges, but the backdrop blur keeps it readable
       and a single line reads better than wrapping. */
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    /* Round only the bottom corners — the chyron is a "tab" descending
       from the top edge, so its top corners are flush with the tile edge. */
    border-bottom-left-radius: var(--as-radius-lg);
    border-bottom-right-radius: var(--as-radius-lg);
    pointer-events: none;
    /* Hidden by default; fades in on hover (single piece :hover OR set
       member's .is-set-hover class). Removed during the previous
       always-on iteration; restored here. */
    opacity: 0;
    transition: opacity 0.22s ease;
}

/* Fade in titles on hover. Single pieces: their own :hover. Set members:
   the .is-set-hover class propagated by the JS hover handler. */
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title,
.woocommerce ul.products li.product.is-set-hover .woocommerce-loop-product__title {
    opacity: 1;
}
/* TOUCH LIFE: on a phone the title follows the finger instead of sitting on
   every tile at once. A grid where every title is lit has no focus, and it
   looked nothing like the desktop behaviour it was standing in for. The
   .is-touch-live class is driven by the touch handler in script.js, which
   keeps exactly one tile alive: the one under your finger while you swipe,
   and the one nearest the middle of the screen once you stop. */
@media (hover: none) {
    .woocommerce ul.products li.product.is-touch-live .woocommerce-loop-product__title {
        opacity: 1;
    }

    /* The same lift a mouse gets, for the tile the finger is passing over.
       Set panels are left out here exactly as they are on hover: they lift
       together through .is-set-hover instead, so a set never splays apart. */
    .woocommerce ul.products li.product:not([data-set-group]).is-touch-live {
        transform: scale(1.03);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        z-index: 2;
    }
}

/* For multi-panel set members, suppress the per-panel title — the unified
   set frame shows ONE title centered over the whole group instead, which
   visually ties the panels together as one piece. */
.woocommerce ul.products li.product[data-set-group] .woocommerce-loop-product__title {
    display: none;
}

/* The set-frame's centered title: same chyron treatment as a single tile,
   but lives on the frame element so it spans the full group width and
   shows/hides based on the frame's hover state (driven by JS). */
.friskycrucible-set-frame-title {
    position: absolute;
    /* "left" is set inline by JS to the centre x of the group; the
       transform horizontally centres the label on that x. "top" is set
       inline to the row's top y. */
    transform: translateX(-50%);
    /* z-index 3 puts the label above panels (z-index 1) and the frame
       (z-index 0). Critical: this element is a SIBLING of the frame, not
       a child — the frame's z-index 0 creates a stacking context that
       would trap any child label below the panels. */
    z-index: 3;
    padding: 3px 10px;
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1.3;
    color: rgba(0, 0, 0, 0.85);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-bottom-left-radius: var(--as-radius-lg);
    border-bottom-right-radius: var(--as-radius-lg);
    pointer-events: none;
    /* Hidden at rest; the JS hover handler stamps .is-set-hover on the
       title (it carries the same data-set-group as the panels) when any
       panel of the set is hovered. */
    opacity: 0;
    transition: opacity 0.22s ease;
}
.friskycrucible-set-frame-title.is-set-hover {
    opacity: 1;
}
@media (hover: none) {
    .friskycrucible-set-frame-title { opacity: 1; }
}

/* Titles are always visible now (set on the base rule with opacity: 1).
   The old hover-to-fade-in rules and the touch-device fallback below were
   removed when we switched to always-on titles. */

.woocommerce ul.products li.product .price {
    display: none;
}

.woocommerce ul.products li.product .price del {
    color: var(--as-text-muted);
    opacity: 0.6;
}

/* Hide default Add to Cart button in loop */
.woocommerce ul.products li.product .button {
    display: none;
}

/* =========================================================================
   COLLECTED STATE (in product loop)
   Pieces already in private collections get a gold "claimed" frame and a
   small corner label. The artwork image itself is left untouched (no
   desaturation, dimming, or opacity change) so the painting always reads at
   full color. WooCommerce's automatic .outofstock class is the trigger.
   ========================================================================= */

/* Collected tiles share the same frame treatment as uncollected ones —
   same embossed border and drop shadow, indistinguishable at the edges.
   The COLLECTED status is communicated entirely by the small label in
   the bottom-right corner (rendered via the ::after rule below), not by
   a different frame color. Earlier this had a gold-on-dark inset matting
   that made collected tiles read visibly differently from uncollected
   ones; that's now removed by Eric's instruction. */
.woocommerce ul.products li.product.outofstock {
    /* No position here: the base rule sets position:relative and masonry
       overrides to absolute. Re-declaring relative here (equal specificity,
       later in the file) would beat masonry and drop collected tiles out of
       the positioned layout, breaking the columns. */
}

/* Simple gradient white-line frame on product thumbnails. The link carries a
   thin diagonal white gradient as its background and 1.5px of padding; the
   opaque image sits inside, so only that padding ring shows as a soft white
   line that catches light from the top-left and fades toward the bottom-right.
   Follows the rounded corners (unlike border-image) and needs no JS, so lazy
   and infinite-scroll tiles are framed the moment they appear. */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
    position: relative;
    display: block;
    border-radius: var(--as-radius-lg);
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.08));
    /* Embossed-painting effect: a thin outer ring + drop shadow as before,
       but the bevel is now 2px on each axis with a brighter highlight and
       a deeper shadow — reads like a small physical frame catching light
       from the upper-left, not just a digital outline. */
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.6),
        5px 7px 18px rgba(0, 0, 0, 0.6),
        inset 2px 2px 0 rgba(255, 255, 255, 0.3),
        inset -2px -2px 0 rgba(0, 0, 0, 0.45);
}

/* Set panels: suppress the per-tile embossed shadow — the .friskycrucible-
   set-frame element behind the group provides one unified frame around all
   panels instead. Without this, each panel would still be individually
   bordered and the unified-frame intent wouldn't read. */
.woocommerce ul.products li.product[data-set-group] a.woocommerce-LoopProduct-link {
    box-shadow: none;
}

/* The unified frame element JS drops behind each set group at the group's
   bounding box. Same drop-shadow recipe as the per-tile border but applied
   once around the whole set. z-index sits below the panel tiles so the
   panels paint on top; the frame's shadow extends past the panel edges. */
.friskycrucible-set-frame {
    position: absolute;
    border-radius: var(--as-radius-lg);
    /* Same emboss recipe as a single tile, so a triptych reads as one
       physical frame around three canvases rather than just an outlined
       rectangle. The 2px bevel + drop shadow visually matches singles. */
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.6),
        5px 7px 18px rgba(0, 0, 0, 0.6),
        inset 2px 2px 0 rgba(255, 255, 255, 0.3),
        inset -2px -2px 0 rgba(0, 0, 0, 0.45);
    pointer-events: none;
    z-index: 0;
    transition: transform var(--as-transition), box-shadow var(--as-transition);
}

/* Homepage sliders stay clean: tiled, edge-to-edge, no frame and square
   corners (the rounded link radius is what gave the front-page tiles their
   clipped corners). The slider tiles also skip the embossed shadow — the
   continuous edge-to-edge band reads better flat. */
.friskycrucible-home-section .woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
}

/* Animated Vimeo thumbnail overlay. Sits over the static image inside the
   thumbnail link; JS injects a cover-scaled Vimeo background iframe on hover
   (desktop) or in-view (mobile) and fades it in. The static image stays as
   the base (and as the masonry sizing anchor), so layout never shifts. */
.friskycrucible-thumb-video {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.7s ease;
    pointer-events: none;
    z-index: 1;
}
.friskycrucible-thumb-video.is-playing {
    opacity: 1;
}
/* Crossfade the still thumbnail out as the video fades in. Same 0.35s
   curve as the video, so the two cross at 50% — the painting reads as
   smoothly turning into its process video instead of the video popping
   over a still. Uses :has() so no JS changes are needed; the existing
   video handler that toggles .is-playing on .friskycrucible-thumb-video
   drives the image's opacity too. Browsers without :has() support (older
   Firefox) just see the previous behaviour, which is graceful. */
.woocommerce ul.products li.product a img {
    /* Crossfade duration matches .friskycrucible-thumb-video above so the
       still image fades out at the same rate the video fades in. */
    transition: opacity 0.7s ease;
}
.woocommerce ul.products li.product a:has(.friskycrucible-thumb-video.is-playing) img {
    opacity: 0;
}
.friskycrucible-thumb-video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 0;
    pointer-events: none;
    /* width/height set inline by JS to cover the tile at the video's aspect */
}

/* "Collected" chyron — small lower-third flush with the bottom-right
   corner of the frame. Inverted from the rest of the dark-on-light
   system: translucent white background, near-black text. Reads as a
   quiet broadcast tag without competing for attention. */
.woocommerce ul.products li.product.outofstock::after {
    content: 'Collected';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    padding: 3px 10px;
    font-size: 0.62rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.65);
    /* COLLECTED is a "tab" rising from the bottom edge of the tile (mirrors
       the title's top-edge tab). Round only the TOP corners; bottom corners
       are flush with the tile edge. */
    border-top-left-radius: var(--as-radius-lg);
    border-top-right-radius: var(--as-radius-lg);
    pointer-events: none;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* For set members, suppress the per-panel COLLECTED indicator — the set
   frame's own collected label (stamped by JS as a sibling element below)
   shows ONE label centered under the whole group instead. */
.woocommerce ul.products li.product[data-set-group].outofstock::after {
    display: none;
}

/* Set-frame's centered COLLECTED label (sibling of the frame, like
   .friskycrucible-set-frame-title — same stacking reason: frame's z-index 0
   would trap any child label below the panels at z-index 1). */
.friskycrucible-set-frame-collected {
    position: absolute;
    /* "left" set inline by JS to group's center x; "top" set inline to
       the row's bottom y. translate(-50%, -100%) anchors the bottom-center
       of the label at that point. */
    transform: translate(-50%, -100%);
    z-index: 3;
    padding: 3px 10px;
    font-size: 0.62rem;
    font-weight: 500;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.88);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-top-left-radius: var(--as-radius-lg);
    border-top-right-radius: var(--as-radius-lg);
    pointer-events: none;
}

/* Same /prints/ suppression that hides per-tile COLLECTED also hides the
   set-frame COLLECTED label — visitors browsing for prints don't need
   the collected status of the original. */
body.page-id-1252 .friskycrucible-set-frame-collected {
    display: none;
}

/* Legacy badge class — kept hidden so any stale markup doesn't show text. */
.friskycrucible-collected-badge {
    display: none !important;
}

/* =========================================================================
   SINGLE PRODUCT PAGE: layout, featured-image zoom, gallery grid.
   These rules were previously inline <style> blocks inside the WC template
   overrides (single-product.php, single-product/product-image.php). Moved
   here so the templates stay declarative-only and all styling lives in the
   stylesheet (per the theme covenant). Behavior is unchanged.
   ========================================================================= */

/* Two-column page grid: title row + (gallery | summary). */
.friskycrucible-single-product {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

.friskycrucible-single-product .product_title {
    grid-column: 2;
    grid-row: 1;
    margin: 0 0 0.5rem 0;
    font-size: 2rem;
    line-height: 1.2;
}

.friskycrucible-product-layout {
    grid-column: 1 / 3;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    align-items: start;
    margin-bottom: 3rem;
}

.friskycrucible-product-gallery-column { grid-column: 1; }

.friskycrucible-product-summary-column {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 5rem;
}

.friskycrucible-product-summary {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.friskycrucible-status-available,
.friskycrucible-status-unavailable {
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}
.friskycrucible-status-available   { color: #6ba352; }
.friskycrucible-status-unavailable { color: #ccc; }

@media (max-width: 1024px) {
    .friskycrucible-product-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .friskycrucible-product-gallery-column,
    .friskycrucible-product-summary-column {
        grid-column: 1;
    }
    .friskycrucible-product-header h1 {
        font-size: 1.75rem;
    }
}

/* ---------- Featured image with Amazon-style inner zoom ---------- */

.woocommerce-product-gallery {
    margin-bottom: 0.75rem;
}

/* The painting fits the window: never taller than most of the screen, so
   the whole piece is seen at once and a screenshot of it is small. The zoom
   is where the detail is. The frame hugs the image, so the zoom pane and the
   Collected frame line up with it at any shape. */
.friskycrucible-featured-zoom {
    position: relative;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 0.75rem;
    overflow: hidden;
    cursor: zoom-in;
    border-radius: var(--as-radius-lg);
}

.friskycrucible-featured-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(78vh, 760px);
    border-radius: var(--as-radius-lg);
    /* Analog easing: long settle, like a real lens dropping into place.
       transform-origin is intentionally NOT transitioned: it must track the
       finger 1:1 during the magnify drag. */
    transform-origin: 50% 50%;
    transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

/* The zoom pane sits over the image and shows a magnified region (desktop hover). */
.friskycrucible-zoom-pane {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: 250%;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}
.friskycrucible-featured-zoom.is-zooming .friskycrucible-zoom-pane {
    opacity: 1;
}
.friskycrucible-featured-zoom.is-magnifying {
    box-shadow: 0 0 0 2px rgba(212, 165, 116, 0.45);
}

/* Touch-primary devices: hide the hover pane and allow vertical pan so a
   swipe-scroll still scrolls the page; the JS briefly waits to read intent
   before claiming the gesture for zoom. */
@media (pointer: coarse) {
    .friskycrucible-featured-zoom {
        cursor: default;
        touch-action: pan-y;
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }
    /* Once committed to a zoom, lock touch-action so the magnifier drag
       doesn't fight scroll/zoom. */
    .friskycrucible-featured-zoom.is-magnifying {
        touch-action: none;
    }
    .friskycrucible-zoom-pane {
        display: none;
    }
}

/* ---------- Context / detail photo grid ---------- */

.friskycrucible-product-gallery-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-start;
    margin-top: 0.75rem;
}

.friskycrucible-gallery-item {
    flex: 0 1 auto;
    max-width: 100%;
}

.friskycrucible-gallery-image {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--as-radius-lg);
}

@media (max-width: 768px) {
    .friskycrucible-featured-zoom {
        margin-bottom: 0.75rem;
    }
    .friskycrucible-product-gallery-grid {
        gap: 0.5rem;
        margin-top: 0.75rem;
    }
}

/* =========================================================================
   COLLECTED TREATMENT — single product page featured image.
   When the product itself is collected, mirror the same three-layer
   treatment used on thumbnails (frame + desaturation + label) on the
   big featured image. Visual continuity across the whole site.
   ========================================================================= */

.single-product .product.outofstock .friskycrucible-featured-zoom {
    box-shadow:
        inset 0 0 0 2px rgba(212, 165, 116, 0.7),
        inset 0 0 0 6px rgba(0, 0, 0, 0.55);
}

/* No desaturation on the single-product main image — visitors landed
   here specifically to see the artwork, so the painting should always
   read at full color regardless of collected state. The gold frame and
   bottom-right "Collected" chyron are the visual cues. */

/* "Collected" label, bottom-right of the featured image — same gold
   right-aligned title treatment as the thumbnails. */
/* Single-product main image stays clean — no frame CA here (the real
   radial channel-split needs two free pseudo-elements and the magnifier
   already uses overflow:hidden + ::after). Revisit with a wrapper if we
   want true CA on the hero image too. */
.single-product .friskycrucible-featured-zoom {
    position: relative;
}

/* Collected variant: inset gold frame on the featured-zoom itself */
.single-product .product.outofstock .friskycrucible-featured-zoom {
    box-shadow:
        inset 0 0 0 2px rgba(212, 165, 116, 0.7),
        inset 0 0 0 6px rgba(0, 0, 0, 0.55);
}

.single-product .product.outofstock .friskycrucible-featured-zoom::after {
    content: 'Collected';
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 3;
    padding: 5px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    background: rgba(255, 255, 255, 0.65);
    /* Inner top-left curve mirrors the frame's bottom-right corner radius. */
    border-top-left-radius: var(--as-radius-lg);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    pointer-events: none;
}

/* =========================================================================
   GALLERY FILTER DROPDOWN
   ========================================================================= */

.friskycrucible-gallery-filter {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: var(--as-space-md) 0;
    max-width: var(--as-max-width);
    margin: 0 auto;
}

.friskycrucible-gallery-filter select {
    background-color: var(--as-bg-card);
    color: var(--as-text);
    border: 1px solid var(--as-border);
    padding: var(--as-space-sm) var(--as-space-md);
    font-size: var(--as-font-size-sm);
    font-family: var(--as-font-family);
    border-radius: var(--as-radius);
    cursor: pointer;
    min-height: 48px;
    min-width: 200px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.friskycrucible-gallery-filter select:hover,
.friskycrucible-gallery-filter select:focus {
    border-color: var(--as-accent-gold);
    outline: none;
}

/* =========================================================================
   WOOCOMMERCE: SINGLE PRODUCT PAGE
   
   Layout (desktop): two columns via CSS grid
     Left:  title, status, image
     Right: price, purchase options, additional info (tabs)
   Layout (mobile): single column, same order
   ========================================================================= */

.single-product .product {
    padding: var(--as-space-md) 0;
}

/* Title + status share one centered row (wrapper rendered by
   friskycrucible_render_title_with_status). Always full-width at the top
   of the product, regardless of breakpoint or video presence. */
.friskycrucible-product-header {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--as-space-sm);
    flex-wrap: wrap;
    text-align: center;
    margin: 0 0 var(--as-space-sm) 0;
}
.friskycrucible-product-header .product_title {
    margin: 0;
    line-height: 1.15;
}
.friskycrucible-product-header .friskycrucible-status-available,
.friskycrucible-product-header .friskycrucible-status-collected {
    margin: 0;
    line-height: 1;
}

/* Mobile: stacked layout (default) */
.single-product .woocommerce-product-gallery {
    width: 100%;
    margin-bottom: var(--as-space-xl);
}

.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
    width: 100%;
    height: auto;
    border-radius: var(--as-radius-lg);
}

.single-product .entry-summary {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Flex ordering within summary column: description first, then purchase options */
.single-product .entry-summary .woocommerce-tabs { order: 1; margin-top: 0; clear: none; width: 100%; }
.single-product .entry-summary .price { order: 2; }
.single-product .entry-summary form.cart { order: 3; }
.single-product .entry-summary .friskycrucible-purchase-row { order: 4; }
/* The print picker shares the purchase slot, so it follows the original's
   Inquire / Contact button in page order instead of jumping above it. */
.single-product .entry-summary .friskycrucible-print-picker { order: 4; }
.single-product .entry-summary .friskycrucible-payment-icons { order: 5; }
.single-product .entry-summary .friskycrucible-bnpl-messaging { order: 6; }
.single-product .entry-summary .woocommerce-product-details__short-description { order: 7; }

/* Override WooCommerce layout.css float-based product layout.
   WooCommerce sets float:left/right + width:48% on .images and .summary.
   We use grid instead, so these must be neutralized. !important needed
   because woocommerce-layout.css loads after the theme stylesheet. */
.woocommerce.single-product div.product div.images,
.woocommerce.single-product div.product div.summary {
    float: none !important;
    width: 100% !important;
}
.woocommerce.single-product div.product .woocommerce-tabs {
    clear: none !important;
}

/* Desktop: two-column grid — video on the LEFT, title/status/gallery on the
   RIGHT. Summary (payment, description, etc.) spans full width below.
   Columns are equal (1fr 1fr): now that portrait videos are cropped to 3:4
   instead of running full 9:16 height, an even split balances better than
   the old 3fr/2fr, which existed to give the tall uncropped clip room. */
@media (min-width: 769px) {
    .single-product div.product {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 var(--as-space-lg);
        align-items: start;
    }

    /* Header (title + status) sits on its own full-width row at the top. */
    .single-product .product > .friskycrucible-product-header {
        grid-column: 1 / -1;
        grid-row: 1;
        margin-bottom: var(--as-space-md);
    }

    /* Left column row 2: video. */
    .single-product .product > .friskycrucible-video-section {
        grid-column: 1;
        grid-row: 2;
        align-self: start;
        margin: 0;
        padding: 0;
    }

    /* Video fills the column. */
    .single-product .product > .friskycrucible-video-section .friskycrucible-video-container.friskycrucible-video-portrait,
    .single-product .product > .friskycrucible-video-section .friskycrucible-video-container.friskycrucible-video-landscape {
        max-width: 100%;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    /* Right column row 2: gallery (featured image + context photos). */
    .single-product .woocommerce-product-gallery {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        position: relative;
        margin-bottom: 0;
    }

    /* NO VIDEO: featured image takes center stage. Single column, centered,
       capped width so a wide painting doesn't dominate the entire viewport.
       (Header is already centered globally — no override needed here.) */
    .single-product .product.friskycrucible-no-video {
        grid-template-columns: 1fr;
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
    }
    .single-product .product.friskycrucible-no-video > .woocommerce-product-gallery {
        grid-column: 1;
        grid-row: 2;
    }
    .single-product .product.friskycrucible-no-video > .entry-summary {
        grid-row: 3;
    }

    /* Summary section sits below the gallery/video row. Two widths inside:
       — description / dimensions get a comfortable reading width (~680px)
       — purchase buttons + payment + BNPL stay compact (~480px) and centered,
         mirroring the mobile feel. */
    .single-product .entry-summary {
        grid-column: 1 / -1;
        grid-row: 3;
        width: 100%;
        max-width: 680px;
        margin-top: var(--as-space-md);
        margin-left: auto;
        margin-right: auto;
    }
    .single-product .entry-summary .friskycrucible-purchase-row,
    .single-product .entry-summary .friskycrucible-payment-icons,
    .single-product .entry-summary .friskycrucible-bnpl-messaging {
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Related products: full width below summary */
    .single-product .product > .related.products {
        grid-column: 1 / -1;
        grid-row: 4;
    }
}

/* Mobile: stacked layout. Title and availability go above the video so
   visitors immediately see what they're looking at; video sits prominently
   right below, then gallery, then summary. */
@media (max-width: 768px) {
    .single-product div.product {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding-top: var(--as-space-sm);
    }

    .single-product .product > .friskycrucible-product-header { order: 1; }
    .single-product .product > .friskycrucible-video-section { order: 2; }
    .single-product .woocommerce-product-gallery { order: 3; }
    .single-product .entry-summary { order: 4; }
    .single-product .product > .related.products { order: 5; }

    /* Tight vertical rhythm */
    .single-product .product > .friskycrucible-product-header {
        margin: 0 0 var(--as-space-sm) 0;
    }
    .friskycrucible-product-header .product_title {
        font-size: 1.5rem;
        line-height: 1.15;
    }
    .single-product .product > .friskycrucible-video-section {
        margin: 0 0 var(--as-space-sm) 0;
    }
    .single-product .woocommerce-product-gallery {
        margin: 0 0 var(--as-space-sm) 0;
    }
    .single-product .entry-summary {
        margin-top: var(--as-space-md);
    }

    /* On mobile vertical video is king — full available width, same edge-to-edge
       footprint as the featured image and gallery photos. */
    .single-product .product > .friskycrucible-video-section,
    .single-product .product > .friskycrucible-video-section .friskycrucible-video-container.friskycrucible-video-portrait,
    .single-product .product > .friskycrucible-video-section .friskycrucible-video-container.friskycrucible-video-landscape {
        max-width: 100%;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
}

/* Product title */
.single-product .product_title {
    font-size: var(--as-font-size-xl);
    margin-bottom: var(--as-space-md);
    color: var(--as-text);
}

/* Product price — hidden on single product pages */
.single-product .entry-summary .price,
.single-product .entry-summary > .price,
.single-product .entry-summary p.price,
.single-product .summary .price {
    display: none !important;
}



/* Express checkout / payment buttons — hidden on product pages */
.single-product #wc-stripe-payment-request-wrapper,
.single-product .wc-block-components-express-payment,
.single-product .woocommerce-checkout-payment,
.single-product .woopay-express-button,
.single-product [id*="express-payment"],
.single-product [class*="express-checkout"],
.single-product [class*="wc-block-components-express"],
.single-product .wc_ppcp_express_checkout,
.single-product [class*="ppcp-button"],
.single-product [class*="paypal-button"],
.single-product [class*="venmo-button"],
.single-product .wc-stripe-payment-request-button-separator,
.single-product .gpay-button-container,
.single-product .apple-pay-button-container,
.single-product .wc-block-components-product-sale-badge,
.single-product [id*="ppcp"],
.single-product [id*="paypal"],
.single-product iframe[title*="PayPal"],
.single-product iframe[title*="Venmo"] {
    display: none !important;
}

/* Payment method icons strip */
.friskycrucible-payment-icons {
    display: block;
    width: 100%;
    margin: var(--as-space-sm) 0 0;
}

.friskycrucible-payment-link {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-decoration: none;
    opacity: 0.75;
    transition: opacity var(--as-transition);
}

.friskycrucible-payment-link:hover {
    opacity: 1;
}

.friskycrucible-payment-icon {
    display: inline-block;
    flex: 1;
    height: 36px;
}

.friskycrucible-payment-icon svg {
    width: 100%;
    height: 100%;
    border-radius: 4px;
}

/* BNPL installment messaging — subtle line below payment icons */
.friskycrucible-bnpl-messaging {
    display: block;
    width: 100%;
    margin: var(--as-space-xs) 0 0;
    text-align: center;
}

.friskycrucible-bnpl-link {
    color: var(--as-text-light);
    font-size: 0.75rem;
    text-decoration: none;
    opacity: 0.6;
    transition: opacity var(--as-transition);
    letter-spacing: 0.02em;
}

.friskycrucible-bnpl-link:hover {
    opacity: 0.9;
    color: var(--as-text);
    text-decoration: none;
}

.friskycrucible-bnpl-link strong {
    font-weight: 600;
    color: var(--as-text);
}

/* Make the WooCommerce cart form full width */
.single-product .entry-summary form.cart {
    display: block;
    width: 100%;
    margin: 0 0 var(--as-space-sm);
}

/* Hide the quantity input */
.single-product .entry-summary form.cart .quantity {
    display: none;
}

/* Purchase row (cross-link button) — full width to match */
.friskycrucible-purchase-row {
    display: block;
    width: 100%;
    margin: 0 0 var(--as-space-sm);
}

/* Dual-price block for multi-panel pieces sold per-panel OR as a set.
   Sits ABOVE the Inquire button, two stacked rows: per-panel price and
   set price (with optional savings callout). Small, refined, not loud. */
.friskycrucible-set-pricing {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 var(--as-space-md);
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--as-radius);
}
.friskycrucible-set-pricing-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.95rem;
    color: var(--as-text);
}
.friskycrucible-set-pricing-label {
    color: var(--as-text-muted, rgba(255, 255, 255, 0.7));
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    font-weight: 500;
}
.friskycrucible-set-pricing-value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.friskycrucible-set-pricing-savings {
    margin-left: 8px;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(212, 165, 116, 0.95);
}

/* Product description */
.single-product .woocommerce-product-details__short-description {
    color: var(--as-text-light);
    margin-bottom: var(--as-space-lg);
    line-height: 1.8;
}

/* =========================================================================
   ADD TO CART BUTTON STYLING
   ========================================================================= */

/* Base button style */
.single-product .single_add_to_cart_button {
    display: block;
    width: 100%;
    padding: var(--as-space-md) var(--as-space-lg);
    font-size: var(--as-font-size-base);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none;
    border-radius: var(--as-radius);
    cursor: pointer;
    transition: all var(--as-transition);
    text-align: center;
    min-height: 48px;
}

/* ORIGINAL: Neutral dark button (matches print button) */
.friskycrucible-original .single_add_to_cart_button {
    background-color: #333;
    color: var(--as-text);
    border: 1px solid #555;
}

.friskycrucible-original .single_add_to_cart_button:hover {
    background-color: #444;
    border-color: #777;
    transform: translateY(-2px);
}

/* COLLECTED: Hide entire add-to-cart form */
.friskycrucible-collected .cart,
.friskycrucible-collected form.cart,
.friskycrucible-collected .single_add_to_cart_button,
.friskycrucible-collected .quantity {
    display: none !important;
}

/* Collected price display */
.friskycrucible-collected-price {
    font-size: var(--as-font-size-lg);
    color: var(--as-text-muted);
    margin-bottom: var(--as-space-sm);
}

.friskycrucible-collected-price strong {
    color: var(--as-accent-gold);
}

/* PRINT: Matching neutral dark button */
.friskycrucible-print .single_add_to_cart_button {
    background-color: #333;
    color: var(--as-text);
    border: 1px solid #555;
}

.friskycrucible-print .single_add_to_cart_button:hover {
    background-color: #444;
    border-color: #777;
    transform: translateY(-2px);
}

/* Quantity input styling */
.single-product .quantity .qty {
    background-color: var(--as-bg-card);
    color: var(--as-text);
    border: 1px solid var(--as-border);
    padding: var(--as-space-sm);
    width: 60px;
    text-align: center;
    border-radius: var(--as-radius);
    font-size: var(--as-font-size-base);
    min-height: 48px;
}

/* =========================================================================
   CROSS-LINK BUTTONS
   ========================================================================= */

.friskycrucible-cross-link {
    margin-top: var(--as-space-lg);
}

.friskycrucible-cross-link-btn {
    display: block;
    width: 100%;
    padding: var(--as-space-md) var(--as-space-lg);
    font-size: var(--as-font-size-base);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--as-radius);
    transition: all var(--as-transition);
    text-align: center;
    min-height: 48px;
    line-height: normal;
    text-decoration: none;
    box-sizing: border-box;
}

.friskycrucible-btn-print {
    background-color: #333;
    color: var(--as-text);
    border: 1px solid #555;
}

.friskycrucible-btn-print:hover {
    background-color: #444;
    border-color: #777;
    color: var(--as-text);
    transform: translateY(-2px);
}

/* ORIGINAL button is the primary CTA — accent gold to match the rest of
   the site's call-to-action treatment. */
.friskycrucible-btn-original {
    background-color: var(--as-accent-gold);
    color: #000;
    border: none;
}

.friskycrucible-btn-original:hover {
    background-color: var(--as-accent-gold-hover);
    color: #000;
    transform: translateY(-2px);
}

/* Disabled state — used when a print product isn't ready for sale yet.
   Same footprint as the live button so the layout doesn't shift, but
   visually muted and non-interactive. */
.friskycrucible-cross-link-btn.friskycrucible-btn-disabled {
    background-color: #1f1f1f;
    color: var(--as-text-muted);
    border: 1px dashed #444;
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.75;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.friskycrucible-cross-link-btn.friskycrucible-btn-disabled:hover {
    transform: none;
    background-color: #1f1f1f;
}

/* =========================================================================
   PRODUCT PAGE: Collected and Available status labels
   ========================================================================= */

/* "Collected" status label — shown above price on original product pages */
.friskycrucible-status-collected {
    color: var(--as-accent-gold);
    font-weight: 700;
    font-size: var(--as-font-size-lg);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 var(--as-space-xs);
}

/* "Available" status label — shown above price */
.friskycrucible-status-available {
    color: #4caf50;
    font-weight: 700;
    font-size: var(--as-font-size-lg);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 var(--as-space-xs);
}

/* Hide WooCommerce default stock/availability text — we show our own */
.single-product .stock {
    display: none !important;
}

/* WooCommerce meta (categories, tags) on product pages — hide for cleaner look */
.single-product .product_meta {
    display: none;
}

/* =========================================================================
   PROCESS VIDEO EMBED
   ========================================================================= */

.friskycrucible-video-section {
    width: 100%;
    margin: var(--as-space-xs) 0;
    clear: both;
}

.friskycrucible-video-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--as-radius-lg);
    background: #000;
}

/* Vimeo / YouTube — landscape (16:9 default, overridden by inline aspect-ratio if known) */
.friskycrucible-video-container.friskycrucible-video-landscape {
    aspect-ratio: 16 / 9;
}

/* Vimeo / YouTube — portrait/vertical video (9:16 default, overridden by inline aspect-ratio if known) */
.friskycrucible-video-container.friskycrucible-video-portrait {
    aspect-ratio: 9 / 16;
    max-width: 360px;
    margin-left: 0;
    margin-right: auto;
}

.friskycrucible-video-container.friskycrucible-video-landscape iframe,
.friskycrucible-video-container.friskycrucible-video-portrait iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Cropped portrait video: Adam's exports bake letterbox bars into the
   picture, so we grow the iframe past its box and let overflow:hidden clip
   the padded strips. --as-video-scale is emitted per video by PHP as
   (display ratio / native ratio), so the trim is exact. Centring keeps the
   crop even top and bottom. */
.friskycrucible-video-container.friskycrucible-video-cropped {
    max-width: none;
}
.friskycrucible-video-container.friskycrucible-video-cropped iframe {
    top: 50%;
    height: calc(100% * var(--as-video-scale, 1));
    transform: translateY(-50%);
}

/* Instagram — fluid height, let the embed breathe */
.friskycrucible-video-container.friskycrucible-video-instagram {
    background: transparent;
}

.friskycrucible-video-container.friskycrucible-video-instagram iframe {
    width: 100%;
    min-height: 80vw;
    max-height: 85vh;
    border: none;
}

/* Native self-hosted video — clean, no chrome */
.friskycrucible-video-container.friskycrucible-video-native {
    background: transparent;
}

.friskycrucible-video-container.friskycrucible-video-native video {
    width: 100%;
    display: block;
    border-radius: var(--as-radius-lg);
}

/* Facebook — responsive with min height */
.friskycrucible-video-container.friskycrucible-video-facebook {
    background: #000;
}

.friskycrucible-video-container.friskycrucible-video-facebook iframe {
    width: 100%;
    min-height: 300px;
    border: none;
}

/* Tablet */
@media (min-width: 769px) {
    .friskycrucible-video-container.friskycrucible-video-instagram iframe {
        min-height: 620px;
        max-height: none;
    }

    .friskycrucible-video-container.friskycrucible-video-facebook iframe {
        min-height: 360px;
    }
}

/* Mobile — full width, scale to screen */
@media (max-width: 768px) {
    .friskycrucible-video-section {
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
}

/* =========================================================================
   RELATED PRODUCTS
   ========================================================================= */

.single-product .related.products {
    margin-top: var(--as-space-xxl);
    padding-top: var(--as-space-xxl);
    border-top: 1px solid var(--as-border);
    clear: both;
    width: 100%;
}

.single-product .related.products > h2 {
    font-size: var(--as-font-size-lg);
    margin-bottom: var(--as-space-lg);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.single-product .related.products ul.products {
    display: grid !important;
    column-count: auto !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

@media (min-width: 769px) {
    .single-product .related.products ul.products {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Related product cards — override masonry inline-block */
.single-product .related.products ul.products li.product {
    display: block !important;
    break-inside: auto !important;
    margin: 0 !important;
    width: auto !important;
}

/* Related product images — 4:5 crop for uniform grid */
.single-product .related.products ul.products li.product a img,
.single-product .related.products ul.products li.product img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    object-fit: cover !important;
    display: block !important;
}

/* =========================================================================
   WOOCOMMERCE: CART & CHECKOUT
   ========================================================================= */

.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
    color: var(--as-text);
}

.woocommerce table.shop_table {
    background-color: var(--as-bg-card);
    border-color: var(--as-border);
    border-radius: var(--as-radius-lg);
    overflow: hidden;
}

.woocommerce table.shop_table th {
    background-color: var(--as-bg-light);
    color: var(--as-text);
    border-color: var(--as-border);
}

.woocommerce table.shop_table td {
    color: var(--as-text-light);
    border-color: var(--as-border);
}

.woocommerce .button,
.woocommerce input[type="submit"] {
    background-color: var(--as-accent-gold);
    color: #000000;
    border: none;
    padding: var(--as-space-sm) var(--as-space-lg);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--as-radius);
    cursor: pointer;
    transition: all var(--as-transition);
    min-height: 48px;
}

.woocommerce .button:hover,
.woocommerce input[type="submit"]:hover {
    background-color: var(--as-accent-gold-hover);
    transform: translateY(-2px);
}

/* Form inputs */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    background-color: var(--as-bg-card);
    color: var(--as-text);
    border: 1px solid var(--as-border);
    padding: var(--as-space-sm) var(--as-space-md);
    border-radius: var(--as-radius);
    font-family: var(--as-font-family);
    font-size: var(--as-font-size-base);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    border-color: var(--as-accent-gold);
    outline: none;
}

.woocommerce form .form-row label {
    color: var(--as-text-light);
}

/* =========================================================================
   NOTICES & MESSAGES
   ========================================================================= */

.woocommerce-message,
.woocommerce-info {
    background-color: var(--as-bg-card);
    border-top-color: var(--as-accent-gold);
    color: var(--as-text-light);
}

.woocommerce-error {
    background-color: var(--as-bg-card);
    border-top-color: #c0392b;
    color: var(--as-text-light);
}

/* =========================================================================
   BREADCRUMBS
   ========================================================================= */

.woocommerce-breadcrumb {
    color: var(--as-text-muted);
    font-size: var(--as-font-size-sm);
    margin-bottom: var(--as-space-lg);
    padding: var(--as-space-md) 0;
}

.woocommerce-breadcrumb a {
    color: var(--as-text-muted);
}

.woocommerce-breadcrumb a:hover {
    color: var(--as-accent-gold);
}

/* =========================================================================
   PRODUCT TABS (WooCommerce default)
   ========================================================================= */

.woocommerce-tabs {
    margin-top: var(--as-space-lg);
}

.woocommerce-tabs .tabs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--as-border);
}

.woocommerce-tabs .tabs li {
    margin: 0;
}

.woocommerce-tabs .tabs li a {
    display: block;
    padding: var(--as-space-sm) var(--as-space-lg);
    color: var(--as-text-muted);
    font-size: var(--as-font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid transparent;
    transition: all var(--as-transition);
}

.woocommerce-tabs .tabs li.active a {
    color: var(--as-accent-gold);
    border-bottom-color: var(--as-accent-gold);
}

.woocommerce-tabs .panel {
    padding: var(--as-space-xl) 0;
    color: var(--as-text-light);
}

/* Hide redundant h2 inside tab panels — the tab heading already says it */
.woocommerce-tabs .panel > h2:first-child {
    display: none;
}

/* Product details section (replaces tabs) */
.friskycrucible-product-details-section {
    margin-bottom: var(--as-space-lg);
}

.friskycrucible-description {
    color: var(--as-text-light);
    margin-bottom: var(--as-space-md);
}

.friskycrucible-description p:last-child {
    margin-bottom: 0;
}

.friskycrucible-medium {
    color: var(--as-text-muted);
    font-size: var(--as-font-size-sm);
    margin: 0;
}

/* =========================================================================
   PAGINATION
   ========================================================================= */

.woocommerce-pagination {
    padding: var(--as-space-xl) 0;
    text-align: center;
}

.woocommerce-pagination ul.page-numbers {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: var(--as-space-xs);
}

.woocommerce-pagination .page-numbers li a,
.woocommerce-pagination .page-numbers li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    padding: var(--as-space-xs) var(--as-space-sm);
    background-color: var(--as-bg-card);
    color: var(--as-text-light);
    border: 1px solid var(--as-border);
    border-radius: var(--as-radius);
    transition: all var(--as-transition);
}

.woocommerce-pagination .page-numbers li a:hover {
    background-color: var(--as-accent-gold);
    color: #000000;
    border-color: var(--as-accent-gold);
}

.woocommerce-pagination .page-numbers li span.current {
    background-color: var(--as-accent-gold);
    color: #000000;
    border-color: var(--as-accent-gold);
}

/* =========================================================================
   SALE BADGE (WooCommerce default — hide it, we use our own badge)
   ========================================================================= */

.woocommerce span.onsale {
    display: none;
    grid-column: 1;
}

/* =========================================================================
   STAR RATING (WooCommerce)
   ========================================================================= */

.woocommerce .star-rating {
    color: var(--as-accent-gold);
}

/* =========================================================================
   ZOOM LENS STYLING (for plugin desktop zoom)
   ========================================================================= */

.friskycrucible-zoom-lens {
    cursor: zoom-in;
}

/* Product image hover cursor */
.single-product .woocommerce-product-gallery__image img {
    cursor: zoom-in;
}

/* Disable WooCommerce's lightbox trigger icon */
.woocommerce-product-gallery__trigger {
    display: none !important;
}

/* Disable WooCommerce's photoswipe lightbox overlay */
.pswp {
    display: none !important;
}

/* Prevent default WooCommerce zoom trigger indicator */
.woocommerce-product-gallery .woocommerce-product-gallery__trigger {
    display: none;
}

/* =========================================================================
   ACCESSIBILITY
   ========================================================================= */

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

:focus-visible {
    outline: 2px solid var(--as-accent-gold);
    outline-offset: 2px;
}

/* =========================================================================
   UTILITY CLASSES
   ========================================================================= */

.text-center { text-align: center; }
.text-muted { color: var(--as-text-muted); }
.mt-lg { margin-top: var(--as-space-lg); }
.mb-lg { margin-bottom: var(--as-space-lg); }

/* =========================================================================
   HOMEPAGE SECTIONS
   ========================================================================= */

.friskycrucible-home-section {
    padding: 0;
    border-bottom: none;
    /* Full-bleed: break out of any parent container */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    /* Allow hover-scaled tiles to expand beyond the slider band edges
       instead of getting clipped at the section boundary. body has
       overflow-x:hidden which prevents any horizontal page scrollbar from
       the slight overflow. */
    overflow: visible;
}

.friskycrucible-home-section:last-child {
    border-bottom: none;
}

.friskycrucible-home-section h2 {
    text-align: center;
    font-size: var(--as-font-size-xl);
    margin-bottom: var(--as-space-md);
    margin-top: 0;
    letter-spacing: 0.03em;
}

.friskycrucible-home-section .section-subtitle {
    text-align: center;
    color: var(--as-text-muted);
    font-size: var(--as-font-size-base);
    max-width: 700px;
    margin: calc(-1 * var(--as-space-md)) auto var(--as-space-xl);
}

/* About section — full-bleed container, centered content */
.friskycrucible-about {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--as-space-xxl) var(--as-space-lg);
}

.friskycrucible-about h2 {
    text-align: left;
    font-size: var(--as-font-size-lg);
    margin-bottom: var(--as-space-lg);
}

.friskycrucible-about p {
    color: var(--as-text-light);
    line-height: 1.8;
    margin-bottom: var(--as-space-md);
}

/* Homepage bio section — three columns by default: COLLECTED | bio | AVAILABLE
   Above 1200px, two flanking painting thumbnails appear so the bio doesn't
   sit in empty space on widescreen viewports. */
.friskycrucible-homepage-bio {
    display: flex;
    align-items: stretch;
    justify-content: center;
    max-width: 1000px;
    margin: 0 auto;
    padding: var(--as-space-xl) var(--as-space-md);
    gap: var(--as-space-lg);
}

@media (min-width: 1200px) {
    .friskycrucible-homepage-bio {
        max-width: 1400px;
    }
}

.friskycrucible-bio-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--as-space-sm);
    flex-shrink: 0;
    width: 64px;
}

.friskycrucible-bio-label-left {
    justify-content: flex-start;
    padding-top: var(--as-space-xs);
}

.friskycrucible-bio-label-right {
    justify-content: flex-end;
    padding-bottom: var(--as-space-xs);
}

.friskycrucible-bio-label-left .friskycrucible-bio-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-orientation: mixed;
    font-family: var(--as-font-display);
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--as-text-light);
    opacity: 0.85;
}

.friskycrucible-bio-label-right .friskycrucible-bio-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: var(--as-font-display);
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--as-text-light);
    opacity: 0.85;
}

.friskycrucible-bio-arrow {
    font-size: 1.75rem;
    color: var(--as-text-light);
    opacity: 0.6;
}

.friskycrucible-bio-content {
    flex: 1;
    max-width: 700px;
}

.friskycrucible-bio-content p {
    color: var(--as-text-light);
    line-height: 1.8;
    margin: 0;
    font-size: 1.1rem;
}

/* Mobile: keep labels, slightly smaller */
@media (max-width: 768px) {
    .friskycrucible-homepage-bio {
        padding: var(--as-space-lg) var(--as-space-xs);
        gap: var(--as-space-sm);
    }

    .friskycrucible-bio-label {
        width: 36px;
    }

    .friskycrucible-bio-label-left .friskycrucible-bio-text,
    .friskycrucible-bio-label-right .friskycrucible-bio-text {
        font-size: 1.1rem;
        letter-spacing: 0.16em;
    }

    .friskycrucible-bio-arrow {
        font-size: 1.2rem;
    }

    .friskycrucible-bio-content p {
        font-size: 1rem;
    }
}

/* =========================================================================
   SOCIAL LINKS (homepage row under the bio)
   Centered, prominent enough to read at a glance without dominating the bio.
   Subtle hover lift; uses currentColor so the icons inherit the text light
   color and stay coherent with the rest of the dark theme.
   ========================================================================= */
.friskycrucible-social-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    /* Zero top margin: the bio block's own bottom padding already provides
       the gap above the icons, and adding more on top of that made the
       gap below the paragraph visibly larger than the gap above it. */
    margin: 0 0 var(--as-space-xl);
    color: var(--as-text-light, #fff);
}
.friskycrucible-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: inherit;
    opacity: 0.7;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.friskycrucible-social-link:hover,
.friskycrucible-social-link:focus-visible {
    opacity: 1;
    transform: translateY(-2px);
    outline: none;
}
.friskycrucible-social-link svg {
    width: 32px;
    height: 32px;
    fill: currentColor;
    display: block;
}

/* Product grid inside homepage sections — full bleed, edge-to-edge */
.friskycrucible-home-section .woocommerce {
    max-width: 100%;
    padding: 0;
}

.friskycrucible-home-section .woocommerce ul.products {
    padding: 0;
    gap: 0;
}

/* Homepage product grids: IMAGES ONLY — hide titles, prices, buttons */
.friskycrucible-home-section .woocommerce ul.products li.product .woocommerce-loop-product__title,
.friskycrucible-home-section .woocommerce ul.products li.product .price,
.friskycrucible-home-section .woocommerce ul.products li.product .button,
.friskycrucible-home-section .woocommerce ul.products li.product .star-rating,
.friskycrucible-home-section .woocommerce ul.products li.product .friskycrucible-collected-badge {
    display: none !important;
}

/* Front page: no extra padding on first section */
.home .entry-content > .friskycrucible-home-section:first-child {
    padding-top: 0;
    margin-top: 0;
}

/* Homepage entry content — remove ALL padding for full-bleed sections */
.home .entry-content {
    padding: 0;
    max-width: 100%;
    margin-top: 0;
}

.home .friskycrucible-container {
    max-width: 100%;
    padding: 0;
}

.home .site-main {
    padding: 0;
    margin: 0;
}

.home .site-content {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100%;
}

.home .site-footer {
    margin-top: 0;
}

/* HOMEPAGE GAP FIX: Kill every possible source of space between header and content */
.home #content,
.home #primary,
.home .site-main,
.home article,
.home .entry-content,
.home .entry-content > *:first-child,
.home .friskycrucible-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Kill empty paragraphs WordPress inserts via wpautop */
.home .entry-content > p:empty,
.home .entry-content > p br {
    display: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}

/* Collapse any paragraph that's just whitespace */
.home .entry-content > p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
}

/* But don't collapse paragraphs with actual visible text content */
.home .entry-content > p:not(:empty) {
    line-height: var(--as-line-height);
    font-size: var(--as-font-size);
}

/* The home sections themselves */
.home .friskycrucible-home-section:first-child {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Ensure the header has no bottom spacing on home */
.home .site-header {
    border-bottom: none;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    position: sticky;
    z-index: 1000;
}

/* Kill WordPress Gutenberg block wrapper margins */
.home .wp-block-group,
.home .wp-block-html,
.home .wp-block-shortcode,
.home .entry-content > div:first-child,
.home .entry-content > .friskycrucible-home-section,
.home .entry-content > p:first-child {
    margin-top: 0 !important;
    margin-block-start: 0 !important;
    padding-top: 0 !important;
}

/* Flex layout to eliminate computed gaps */
.home #page {
    display: flex;
    flex-direction: column;
}

.home #page > .site-header {
    flex-shrink: 0;
}

.home #page > #content {
    flex-grow: 1;
}

/* Kill ALL margin and padding on the homepage page wrapper */
.home article,
.home .entry-content,
.home .woocommerce,
.home .friskycrucible-home-section .woocommerce {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Homepage product grid: ONE ROW only by default, with responsive column count.
   Mobile = 2 images, tablet = 4, widescreen = 6.
   grid-template-rows: 1fr + overflow:hidden keeps extras off-screen. */
.friskycrucible-home-section .woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: 1fr !important;
    gap: 0 !important;
    column-count: auto !important;
    width: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Tall variant: same columns, but TWO rows of images. */
.friskycrucible-home-section-tall .woocommerce ul.products {
    grid-template-rows: 1fr 1fr !important;
}

@media (min-width: 768px) {
    .friskycrucible-home-section .woocommerce ul.products {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

@media (min-width: 1200px) {
    .friskycrucible-home-section .woocommerce ul.products {
        grid-template-columns: repeat(6, 1fr) !important;
    }
}

/* Homepage images: forced 4:5 crop for uniform slider slots */
.friskycrucible-home-section .woocommerce ul.products li.product a img,
.friskycrucible-home-section .woocommerce ul.products li.product img,
.friskycrucible-home-section ul.products li.product a img,
.friskycrucible-home-section ul.products li.product img {
    aspect-ratio: 4 / 5 !important;
    object-fit: cover !important;
    height: auto !important;
}

/* Override masonry styles for homepage — force grid behavior */
.friskycrucible-home-section .woocommerce ul.products li.product,
.friskycrucible-home-section ul.products li.product {
    display: block !important;
    break-inside: auto !important;
    margin: 0 !important;
    width: auto !important;
}

.friskycrucible-home-section .woocommerce ul.products::before,
.friskycrucible-home-section .woocommerce ul.products::after {
    display: none !important;
    content: none !important;
}

/* On mobile, still 2 columns for the homepage banner */
@media (max-width: 479px) {
    .friskycrucible-home-section .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Product cards in homepage: no padding, no margin, pure image */
.friskycrucible-home-section .woocommerce ul.products li.product,
.friskycrucible-home-section ul.products li.product {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    border: none !important;
    list-style: none !important;
    background-color: transparent !important;
    border-radius: 0 !important;
}

/* WooCommerce adds default margin-bottom and padding to product lists */
.friskycrucible-home-section ul.products,
.friskycrucible-home-section .woocommerce ul.products {
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    width: 100% !important;
}

/* =========================================================================
   HOMEPAGE CROSSFADE SLIDESHOW
   ========================================================================= */

/* Slideshow grid — same as normal product grid but for rebuilt slots */
.friskycrucible-slideshow-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    grid-template-rows: 1fr !important;
    gap: 0 !important;
    column-count: auto !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.friskycrucible-slideshow-grid::before,
.friskycrucible-slideshow-grid::after {
    display: none !important;
    content: none !important;
}

@media (max-width: 479px) {
    .friskycrucible-slideshow-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Each slot holds stacked images */
.friskycrucible-slideshow-slot {
    position: relative;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    border: none !important;
    list-style: none !important;
}

.friskycrucible-slideshow-container {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
}

/* All slideshow images are stacked via absolute positioning */
.friskycrucible-slideshow-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover;
    border-radius: 0;
    margin: 0 !important;
    padding: 0;
    display: block;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

.friskycrucible-slideshow-img.active {
    opacity: 1;
}



/* =========================================================================
   INFINITE SCROLL: Loading indicator
   ========================================================================= */

.friskycrucible-infinite-loader {
    text-align: center;
    padding: var(--as-space-lg) 0;
    color: var(--as-text-muted);
    font-size: var(--as-font-size-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}