/*
Theme Name: Solastalgia New
Theme URI: https://solastalgiaart.sa-com
Author: Steve Bates
Author URI: https://solastalgiaart.sa-com
Description: Mobile-first dark theme for Elementor Pro + WooCommerce. Jewel-tone design tokens, reusable components, consistent module spacing.
Version: 1.8.9
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.sa-gnu.org/licenses/gpl-2.0.sa-html
Text Domain: solastalgia
*/


/*
 * TABLE OF CONTENTS
 * =================
 * 1.  Tokens          — colors, fonts, spacing, layout variables
 * 2.  Reset + Base    — normalize, body, headings, paragraphs
 * 3.  Label           — small uppercase text (overlines, breadcrumbs, titles)
 * 4.  Accent Button   — teal CTA (nav, mobile, primary, WooCommerce)
 * 5.  Ghost Button    — outline/secondary button variant
 * 6.  Brand Mark      — italic serif logo used in nav, mobile, footer
 * 7.  Muted Link      — uppercase nav links, social links
 * 8.  Section Heading  — display serif headings with em accent
 * 9.  Divider         — 1px horizontal rule
 * 10. Module          — consistent section spacing utility
 * 10c. Empty/Error States — fallback-template "nothing to show" messaging
 * 11. Page Header     — full-bleed hero with gradient overlay
 * 12. Accessibility   — skip-nav, sr-only, focus styles
 * 13. Nav             — fixed navigation bar (hamburger default)
 * 14. Mobile Drawer   — slide-out nav panel + backdrop
 * 15. Footer          — site footer (single-column mobile default)
 * 16. Animations      — header entrance + scroll-reveal transitions
 * 17. Effects         — grain overlay, back-to-top button
 * 17b. FAQ Accordion  — single-open accordion (Contact page)
 * 18. WooCommerce     — product cards, single product, breadcrumbs, tabs
 * 18b. Homepage       — hero, marquee, works grid, philosophy, collections, bio, statement
 * 18c. About page     — artist statement, process steps, studio stats, commissions CTA, Instagram strip
 * 18d. Contact page   — two-column layout, contact form, commission section, FAQ wrapper
 * 18e. Collections    — count bar, intro, listings grid/cards
 * 18f. Product detail — product layout, gallery, info panel, accordion, artist note, related works
 * 18g. WooCommerce Archive — shop page, category archives: toolbar, images, badges, pagination
 * 18h. WooCommerce Single  — native product layout, gallery, cart form, meta, related products
 * 19. Elementor       — integration overrides
 * 20. Reduced Motion  — prefers-reduced-motion accessibility
 * 21. Responsive      — tablet (660px+) and desktop (960px+) breakpoints
 */


/* ═══════════════════════════════════════════════════════════
   1. TOKENS
   ──────────────────────────────────────────────────────────
   Central design variables. Every color, font, spacing value,
   and layout measurement is defined here once and referenced
   everywhere. Change a token here and it propagates site-wide.

   Layout tokens:
     --gutter  Horizontal page padding. Starts small for mobile,
               overridden at each breakpoint via :root in @media.
     --module  Vertical spacing between major sections. Ensures
               every section has the same breathing room.
     --wrap    Max content width. Used by .sa-module, footer, headers.
     --touch   Minimum interactive element size (WCAG 2.5.5).
   ═══════════════════════════════════════════════════════════ */
:root {
  /* ── Color palette ─────────────────────────────────────── */
  --bg:           #080C1E;             /* page background — deep navy */
  --bg-deep:      #050717;             /* deepest layer — footer background */
  --surface:      #0E1230;             /* card/section background — slightly lighter */
  --surface-hi:   #181C3A;             /* elevated surface — hover states, active cards */
  --surface-drawer: #0A0E28;           /* mobile drawer panel background */
  --text:        #DDD8F0;              /* body text — warm lavender white */
  --heading:     #FFFFFF;              /* headings — pure white */
  --muted:       rgba(221, 216, 240, 0.62);  /* secondary text — 62% opacity lavender */
  --accent:      #00C4D8;              /* primary accent — vivid teal/cyan */
  --accent-dim:  rgba(0, 196, 216, 0.12);    /* accent at 12% — subtle backgrounds */
  --accent-hover:#22D8EC;              /* accent hover state — lighter teal */
  --crimson:     #D42B3E;              /* bold red — error states, painting palette */
  --cobalt:      #2845C8;              /* deep blue — painting palette */
  --lime:        #B8D000;              /* yellow-green — painting palette */
  --purple:      #7830B0;              /* violet — painting palette */
  --emerald:     #1A9A50;              /* forest green — painting palette */
  --divider:        rgba(221, 216, 240, 0.08);  /* subtle border — 8% opacity. Decorative grouping only (dividers, card/product outlines) — NOT for a control's sole visible boundary; ~1.15:1 against --bg, well under the 3:1 WCAG 1.4.11 floor for UI components */
  --divider-hover:  rgba(221, 216, 240, 0.18);  /* brightened border on card/product hover */
  --border-interactive:       rgba(221, 216, 240, 0.42);  /* ~3.25:1 on --bg — meets WCAG 1.4.11 (non-text contrast). Use for any control whose border is its primary visible boundary, e.sa-g. .sa-btn-secondary */
  --border-interactive-hover: rgba(221, 216, 240, 0.6);   /* brighter hover state for the above — stays above --border-interactive's own contrast, never dimmer */
  --glass-nav:      rgba(8, 12, 30, 0.93);      /* frosted nav background once scrolled */
  --glass-panel:    rgba(8, 12, 30, 0.97);      /* dropdown panel fill + its caret pseudo-element */

  /* ── Typography ────────────────────────────────────────── */
  --fd: 'Bodoni Moda', Georgia, serif;       /* display font — headings, titles, brand */
  --fb: 'Jost', system-ui, sans-serif;       /* body font — text, labels, buttons, nav */

  /* ── Motion ────────────────────────────────────────────── */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);   /* smooth deceleration curve — all transitions */

  /* ── Spacing scale (fluid clamp values) ────────────────── */
  --sp-xs:  clamp(0.5rem,  1vw,   0.75rem); /* 8–12px   — icon gaps, tight padding */
  --sp-sm:  clamp(0.75rem, 1.5vw, 1rem);    /* 12–16px  — label margins, small gaps */
  --sp-md:  clamp(1rem,    2vw,   1.5rem);   /* 16–24px  — card padding, form gaps */
  --sp-lg:  clamp(1.5rem,  3vw,   2.5rem);   /* 24–40px  — section inner spacing */
  --sp-xl:  clamp(2.5rem,  5vw,   4rem);     /* 40–64px  — major vertical gaps */
  --sp-2xl: clamp(4rem,    8vw,   7rem);     /* 64–112px — module-level vertical rhythm */

  /* ── Layout ────────────────────────────────────────────── */
  --gutter: var(--sp-md);   /* page edge padding — mobile default (~16px) */
  --module: var(--sp-2xl);  /* vertical gap between sections (~64–112px) */
  --wrap:   1200px;         /* maximum content width */
  --touch:  44px;           /* minimum tap target per WCAG 2.5.5 */

  /* ── Z-index scale ─────────────────────────────────────────
     Named tiers instead of arbitrary numbers (no 999/9999).
     Ordered low → high; gaps between tiers leave room to insert
     a new layer later without renumbering everything else.

     --z-raise    Local nudge above an immediate sibling within an
                  already-isolated stacking context (e.sa-g. page-header
                  content sitting above its own ::after gradient).
                  Not part of the global competition below.
     --z-fab      Floating utility controls — back-to-top button.
     --z-sticky   The persistent fixed nav bar.
     --z-backdrop Dark overlay behind the mobile drawer.
     --z-drawer   The mobile drawer panel itself. Deliberately above
                  --z-sticky: the open drawer (and its own close
                  button) must paint over the entire nav bar,
                  including the now-hidden hamburger inside it.
     --z-grain    Decorative full-viewport noise texture. Always
                  pointer-events:none, so sharing visual "top of
                  stack" intent with --z-skip-nav below is harmless.
     --z-skip-nav The accessibility skip-link — must be reachable
                  and clickable above absolutely everything.
     ────────────────────────────────────────────────────────── */
  --z-raise:    1;
  --z-fab:      90;
  --z-sticky:   100;
  --z-backdrop: 140;
  --z-drawer:   150;
  --z-grain:    900;
  --z-skip-nav: 950;
}


/* ═══════════════════════════════════════════════════════════
   2. RESET + BASE
   ──────────────────────────────────────────────────────────
   Minimal reset. Box-sizing border-box on everything.
   Images are block-level and responsive by default.
   Links inherit color (styled per-component).
   Body uses Jost (--fb) at 300 weight for a light, modern feel.
   ═══════════════════════════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
img    { display: block; max-width: 100%; height: auto; }
a      { color: inherit; text-decoration: none; }
button { background: none; border: none; cursor: pointer; font: inherit; color: inherit; }
html   { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--fb);
  font-weight: 300;
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.75;
  overflow-x: hidden;
}

p { line-height: 1.85; }

/* All headings: Bodoni Moda (--fd), white, tight leading */
h1, h2, h3, h4 {
  font-family: var(--fd);
  font-weight: 400;
  color: var(--heading);
  line-height: 1.1;
  letter-spacing: -0.01em;
}


/* ═══════════════════════════════════════════════════════════
   3. LABEL
   ──────────────────────────────────────────────────────────
   The most repeated text pattern on the site. Small, uppercase,
   wide-tracked. Used for:
     .sa-section-overline        — "Artist statement", "How it gets made", "Commissions", etc.
     .sa-footer-col-title        — "Collections", "About", "Info" column headers in footer
     .sa-nav-mobile-section-label — "Collections" label in the mobile drawer
     .sa-breadcrumb              — "Home / About" path above page titles
     .sa-nav-logo span           — "Las Cruces, New Mexico" under the logo
     .sa-btt-label               — "Top" text on the back-to-top button
     .sa-label                   — generic utility class for Elementor widgets

   Base: Jost 500, 0.18em tracking, uppercase.
   Variants differ only in font-size, color, and spacing.
   ═══════════════════════════════════════════════════════════ */
.sa-label,
.sa-section-overline,
.sa-footer-col-title,
.sa-nav-mobile-section-label,
.sa-breadcrumb,
.sa-nav-logo span,
.sa-btt-label {
  font-family: var(--fb);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
}

/* Size tiers — smallest to largest.
   Floor raised to ~11px (previously dipped to 9.2px at the smallest
   tier): numeric contrast at the old sizes passed WCAG 1.4.3 cleanly,
   but text under ~11px is a real legibility concern for low-vision
   users independent of contrast ratio. Relative hierarchy preserved. */
.sa-btt-label                 { font-size: 0.6875rem; }  /* 11px   — back-to-top label */
.sa-nav-logo span             { font-size: 0.7rem; }     /* 11.2px — logo subtitle */
.sa-label,
.sa-section-overline,
.sa-nav-mobile-section-label  { font-size: 0.72rem; }    /* 11.5px — section overlines */
.sa-footer-col-title          { font-size: 0.75rem; }    /* 12px   — footer column heads */
.sa-breadcrumb                { font-size: 0.78rem; }    /* 12.5px — breadcrumb path */

/* Color — accent (teal) by default */
.sa-label,
.sa-section-overline,
.sa-footer-col-title,
.sa-nav-mobile-section-label,
.sa-nav-logo span             { color: var(--accent); }

/* Exceptions: breadcrumb is muted, btt-label matches body text */
.sa-breadcrumb                { color: var(--muted); font-weight: 400; }
.sa-btt-label                 { color: var(--text); font-weight: 300; writing-mode: vertical-rl; }

/* Bottom margin — creates consistent gap before the heading that follows */
.sa-section-overline,
.sa-footer-col-title          { margin-bottom: var(--sp-sm); }
.sa-nav-mobile-section-label  { display: block; margin-bottom: 0.65rem; }
.sa-breadcrumb                { margin-bottom: var(--sp-sm); }


/* ═══════════════════════════════════════════════════════════
   4. ACCENT BUTTON
   ──────────────────────────────────────────────────────────
   Teal background, dark text. The primary call-to-action style.
   One shared base for every teal button on the site:
     .sa-btn / .sa-btn-primary     — general use, Elementor widgets
     .sa-nav-cta                — "Shop Originals" button in desktop nav (header.sa-php)
     .sa-nav-mobile-shop-cta    — "Shop Originals" button in mobile drawer (header.sa-php)
     .woocommerce .sa-button    — "Add to Cart" on product archive cards
     .single_add_to_cart_button — "Add to Cart" on single product page

   All share: Jost 500, uppercase, teal bg, 2px radius, 44px min-height.
   Only font-size and padding vary between contexts.
   ═══════════════════════════════════════════════════════════ */
.sa-btn,
.sa-btn-primary,
.sa-nav-cta,
.sa-nav-mobile-shop-cta,
.woocommerce .products .product .button,
.woocommerce .products .product .add_to_cart_button,
.woocommerce .single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--fb);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--accent);
  border-radius: 2px;
  white-space: nowrap;
  min-height: var(--touch);   /* 44px tap target */
  transition: background 0.2s;
}

/* Hover state — lighter teal */
.sa-btn:hover,
.sa-btn-primary:hover,
.sa-nav-cta:hover,
.sa-nav-mobile-shop-cta:hover,
.woocommerce .products .product .button:hover,
.woocommerce .products .product .add_to_cart_button:hover,
.woocommerce .single_add_to_cart_button:hover {
  background: var(--accent-hover);
}

/* Size variants — only padding and font-size differ */
.sa-btn,
.sa-btn-primary                                           { font-size: 0.75rem; padding: 0.65rem 1.25rem; }
.sa-nav-cta                                               { font-size: 0.75rem; padding: 0.5rem 1.1rem; }
.sa-nav-mobile-shop-cta                                   { font-size: 0.72rem; padding: 0.55rem 1rem; }
.woocommerce .products .product .button,
.woocommerce .products .product .add_to_cart_button    { font-size: 0.65rem; padding: 0.45rem 0.9rem; margin: 0; }
.woocommerce .single_add_to_cart_button                { font-size: 0.78rem; padding: 0.65rem 1.25rem; }


/* ═══════════════════════════════════════════════════════════
   5. GHOST BUTTON
   ──────────────────────────────────────────────────────────
   Outline variant — transparent bg, muted text. This is the one
   place on the site where a border is a control's ONLY visible
   boundary (no fill, no icon) — so unlike the decorative dividers
   elsewhere, it uses --border-interactive (~3.25:1 on --bg) rather
   than --divider (~1.15:1), to meet WCAG 1.4.11's 3:1 floor for
   user interface components.
   Used for secondary actions:
     "Browse originals" on the about page commissions section
     Any secondary CTA paired alongside a .sa-btn-primary

   Hover brightens text and border.
   ═══════════════════════════════════════════════════════════ */
.sa-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--fb);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  background: transparent;
  padding: 0.65rem 1.25rem;
  min-height: var(--touch);
  border: 1px solid var(--border-interactive);
  border-radius: 2px;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.sa-btn-secondary:hover { color: var(--heading); border-color: var(--border-interactive-hover); background: transparent; }


/* ═══════════════════════════════════════════════════════════
   6. BRAND MARK
   ──────────────────────────────────────────────────────────
   Italic Bodoni Moda used wherever the site name appears:
     .sa-nav-logo          — top-left logo in header.sa-php (desktop + mobile)
     .sa-nav-mobile-brand  — "Solastalgia Art" text in the mobile drawer header
     .sa-footer-brand      — "Solastalgia Art" text in footer.sa-php

   The nav-logo also contains a <span> for the "Las Cruces, New Mexico"
   subtitle — that span is styled by the Label component above.
   ═══════════════════════════════════════════════════════════ */
.sa-nav-logo,
.sa-nav-mobile-brand,
.sa-footer-brand {
  font-family: var(--fd);
  font-style: italic;
  font-weight: 400;
  color: var(--heading);
  line-height: 1;
}
.sa-nav-logo         { font-size: 1.05rem; letter-spacing: 0.01em; }
.sa-nav-mobile-brand { font-size: 0.95rem; }
.sa-footer-brand     { font-size: 1.1rem; margin-bottom: var(--sp-sm); }
.sa-nav-logo span    { display: block; font-style: normal; margin-top: 0.25rem; }


/* ═══════════════════════════════════════════════════════════
   7. MUTED LINK
   ──────────────────────────────────────────────────────────
   Small uppercase link that starts muted and brightens on hover.
   Shared base for:
     .sa-nav-links a         — desktop navigation items (header.sa-php)
     .sa-nav-dropdown li a   — items inside the Collections dropdown
     .sa-nav-mobile-social   — "@solastalgiaart" link in mobile drawer footer
     .sa-footer-social a     — "@solastalgiaart" link in site footer

   Nav links hover to --heading (white).
   Social links hover to --accent (teal).
   ═══════════════════════════════════════════════════════════ */
.sa-nav-links a,
.sa-nav-dropdown li a,
.sa-nav-mobile-social,
.sa-footer-social a {
  font-family: var(--fb);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.2s;
}

/* Hover colors */
.sa-nav-links a:hover,
.sa-nav-dropdown li a:hover     { color: var(--heading); }
.sa-nav-mobile-social:hover,
.sa-footer-social a:hover       { color: var(--accent); }

/* Size variants.
   nav-mobile-social and footer-social a get an explicit touch target
   (display:inline-flex + min-height) since each renders as a standalone
   link in its own layout row, not embedded inline within a sentence of
   text — so neither qualifies for WCAG 2.5.5's "inline" target-size
   exception the way .sa-breadcrumb a does (left untouched below; "Home /
   About" genuinely is inline text-flow content, the exception's
   intended case). */
.sa-nav-links a                 { font-size: 0.78rem; position: relative; }
.sa-nav-dropdown li a           { font-size: 0.72rem; display: flex; align-items: center; min-height: var(--touch); padding: 0.65rem 1.25rem; white-space: nowrap; }
.sa-nav-mobile-social           { font-size: 0.68rem; display: inline-flex; align-items: center; min-height: var(--touch); padding: 0.5rem 0; }
.sa-footer-social a             { font-size: 0.7rem; letter-spacing: 0.08em; display: inline-flex; align-items: center; min-height: var(--touch); padding: 0.5rem 0; }


/* ═══════════════════════════════════════════════════════════
   8. SECTION HEADING
   ──────────────────────────────────────────────────────────
   Light-weight Bodoni Moda for section and page titles.
   Wrapping a word in <em> makes it italic + accent-colored.

   Two sizes:
     .sa-section-heading — used inside page sections (process, studio, commissions)
     .sa-page-title      — the large hero title on every page

   Mobile-first: .sa-page-title starts at 2.2rem, scales up at breakpoints.
   ═══════════════════════════════════════════════════════════ */
.sa-section-heading,
.sa-section-title,
.sa-page-title {
  font-family: var(--fd);
  font-weight: 300;
  color: var(--heading);
}
/* .sa-section-title is an alias for .sa-section-heading — use either in Elementor's CSS Classes field */
.sa-section-heading,
.sa-section-title         { font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1.15; }
.sa-page-title            { font-size: clamp(2.2rem, 9vw, 3.2rem); line-height: 1.0; letter-spacing: -0.02em; }

/* <em> inside headings renders italic in accent teal */
.sa-section-heading em,
.sa-section-title em,
.sa-page-title em         { font-style: italic; color: var(--accent); }


/* ═══════════════════════════════════════════════════════════
   9. DIVIDER
   ──────────────────────────────────────────────────────────
   Thin horizontal rule in --divider color. Used in:
     .sa-nav-mobile-divider — separators between link groups in the mobile drawer
     .sa-divider            — utility class for use in Elementor or custom templates
   ═══════════════════════════════════════════════════════════ */
.sa-nav-mobile-divider,
.sa-divider {
  width: 100%; height: 1px;
  background: var(--divider);
  margin: 0.75rem 0;
  flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════
   10. MODULE
   ──────────────────────────────────────────────────────────
   Utility classes for consistent section spacing. Apply to any
   <section>, <div>, or Elementor container to get even vertical
   rhythm across the entire site.

   .sa-module         — centered with max-width (for content sections)
   .sa-module-full    — full-width with padding only (for edge-to-edge sections)
   .sa-module-surface — adds the dark surface background + top/bottom borders

   All use --module for vertical padding and --gutter for horizontal.
   Since --gutter scales at each breakpoint, padding is automatically
   responsive without extra media queries.
   ═══════════════════════════════════════════════════════════ */
.sa-module {
  padding: var(--module) var(--gutter);
  max-width: var(--wrap);
  margin: 0 auto;
}

.sa-module-full {
  padding: var(--module) var(--gutter);
}

.sa-module-surface {
  background: var(--surface);
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
}


/* ═══════════════════════════════════════════════════════════
   10a. ENTRY CONTENT
   ──────────────────────────────────────────────────────────
   Body copy wrapper for fallback templates (index.sa-php, single.sa-php).
   Not used by Elementor pages — Elementor handles its own spacing.
   ═══════════════════════════════════════════════════════════ */
.entry-content {
  margin-top: var(--sp-lg);
  color: var(--muted);
  line-height: 1.9;
}


/* ═══════════════════════════════════════════════════════════
   10b. CARD
   ──────────────────────────────────────────────────────────
   Generic content card — same visual language as a WooCommerce
   product card (section 18) so any custom grid (e.sa-g. archive.sa-php
   fallback listings) looks identical to the shop grid.

   .sa-card        — surface bg, divider border, hover brightens border
   .sa-card-title  — Bodoni Moda heading inside a card
   .sa-card-body   — muted body text inside a card
   ═══════════════════════════════════════════════════════════ */
.sa-card {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 1px;
  padding: var(--sp-md);
  transition: border-color 0.3s ease;
}
.sa-card:hover { border-color: var(--divider-hover); }

.sa-card-title {
  font-family: var(--fd);
  font-weight: 300;
  color: var(--heading);
  font-size: 1.1rem;
}

.sa-card-body {
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.sa-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-md);
  margin-top: var(--sp-xl);
}


/* ═══════════════════════════════════════════════════════════
   10c. EMPTY / ERROR STATES
   ──────────────────────────────────────────────────────────
   Small reusable patterns for "nothing to show" messaging in
   the fallback templates (archive.sa-php, 404.sa-php). These templates
   are rarely hit in normal operation — Elementor overrides them
   for real pages — so the patterns here are deliberately minimal.

   .sa-empty-state  — a single muted message line (archive.php's
                   "No posts found.")
   .sa-error-state  — centered 404-style block: wraps an overline,
                   a .sa-page-title, and a lead paragraph, styling
                   all three via descendant selectors so the
                   markup itself stays free of inline styles
   ═══════════════════════════════════════════════════════════ */
.sa-empty-state {
  color: var(--muted);
  margin-top: var(--sp-lg);
}

.sa-error-state { text-align: center; }
.sa-error-state .sa-page-title { margin-bottom: var(--sp-md); }
.sa-error-state p {
  color: var(--muted);
  font-size: 0.95rem;
  max-width: 40ch;
  margin: 0 auto var(--sp-lg);
}


/* ═══════════════════════════════════════════════════════════
   11. PAGE HEADER
   ──────────────────────────────────────────────────────────
   Full-bleed hero banner at the top of every interior page.
   Content (breadcrumb + title) is bottom-aligned.
   A ::after pseudo-element applies a gradient overlay that
   fades from opaque (bottom) to transparent (top), ensuring
   text is readable over any background image or canvas.

   Mobile-first: starts at 34vh, grows at tablet (40vh) and
   desktop (52vh) breakpoints.

   Used on: About, Contact, Collections, individual collection pages.
   ═══════════════════════════════════════════════════════════ */
.sa-page-header {
  position: relative;
  height: 46vh;
  min-height: 340px;
  max-height: 560px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Background photo or canvas — stretches to fill the header */
.sa-page-header img,
.sa-page-header-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}

/* Gradient overlay — dark at bottom for text readability */
.sa-page-header::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(8,12,30,0.97) 0%,
    rgba(8,12,30,0.45) 50%,
    rgba(8,12,30,0.08) 100%
  );
  pointer-events: none;
}

/* Content container — sits above the gradient via z-index */
.sa-page-header-content {
  position: relative;
  z-index: var(--z-raise);
  padding: var(--sp-lg) var(--gutter);
  max-width: var(--wrap);
}

/* Breadcrumb link colors */
.sa-breadcrumb a       { color: var(--accent); }
.sa-breadcrumb a:hover { color: var(--accent-hover); }
.sa-breadcrumb span    { margin: 0 0.4em; opacity: 0.4; }  /* "/" separator */


/* ═══════════════════════════════════════════════════════════
   12. ACCESSIBILITY
   ──────────────────────────────────────────────────────────
   .skip-nav  — "Skip to content" link, hidden until focused.
                Appears top-left when a keyboard user tabs into
                the page. Links to #main-content. (header.sa-php)

   .sr-only   — Screen-reader-only text. Visually hidden but
                announced by assistive technology. Used for
                "(opens in new tab)" labels on external links.

   :focus-visible — Teal outline on keyboard focus. The
                :focus:not(:focus-visible) rule suppresses the
                outline for mouse clicks (browsers that support it).
   ═══════════════════════════════════════════════════════════ */
.skip-nav {
  position: absolute; top: -100%; left: 1rem;
  background: var(--accent); color: var(--bg);
  font-family: var(--fb); font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.6rem 1.25rem; border-radius: 1px; text-decoration: none;
  z-index: var(--z-skip-nav);
}
.skip-nav:focus { top: 0.75rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
:focus:not(:focus-visible) { outline: none; }


/* ═══════════════════════════════════════════════════════════
   13. NAV
   ──────────────────────────────────────────────────────────
   Fixed navigation bar across the top of every page. (header.sa-php)

   Mobile-first approach:
     - Hamburger button is visible by default
     - Desktop links (.sa-nav-links) and CTA (.sa-nav-cta) are hidden
     - At 960px+ breakpoint, links/CTA appear and hamburger hides

   Scroll behavior (via global.sa-js):
     When user scrolls past 60px, .scrolled class is added,
     which activates the frosted-glass background + bottom border.

   Dropdown:
     The Collections item (.sa-nav-has-dropdown) shows a dropdown
     panel on hover/focus. An invisible bridge (::before pseudo)
     fills the gap between the trigger link and the dropdown so
     the mouse can travel down without losing :hover.
   ═══════════════════════════════════════════════════════════ */
.sa-nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: var(--z-sticky);
  padding: 0.75rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  transition: background 0.4s ease, backdrop-filter 0.4s ease;
}

/* Frosted glass state — activated by .scrolled class from global.sa-js */
.sa-nav.scrolled {
  background: var(--glass-nav);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--divider);
}

/* Desktop links and CTA — hidden on mobile, shown at 960px+ */
.sa-nav-links, .sa-nav-cta { display: none; }
.sa-nav-links { align-items: center; gap: var(--sp-lg); list-style: none; }

/* Hamburger — visible by default, hidden at 960px+
   No z-index here: this is a position:static flex child of .sa-nav,
   so z-index would have no effect (it only applies to positioned
   elements). It paints as part of .nav's own content, fully bound
   to --z-sticky — it never competes with --z-drawer above. */
.sa-nav-hamburger {
  display: flex; flex-direction: column; gap: 5px;
  padding: 10px;                        /* extra padding for 44px touch target */
  min-width: var(--touch); min-height: var(--touch);
  align-items: center; justify-content: center;
}

/* Three horizontal bars that make up the hamburger icon */
.sa-nav-hamburger span {
  display: block; width: 22px; height: 1.5px;
  background: var(--heading);
}

/* Hidden while the drawer is open — see section 14's note on why this
   button and .sa-nav-mobile-close must never both be visible at once.

   pointer-events:none applies immediately (it isn't a transitioned
   property below), so the hamburger can't be double-clicked the
   instant the drawer starts opening. The opacity/visibility hide
   itself is delayed by 0.3s — 75% of .nav-mobile's own 0.4s slide
   transition — so the hamburger stays visible while the drawer is
   still mid-slide and hasn't yet physically covered this corner.
   Hiding it instantly (no delay) would leave a brief gap where
   neither this button nor the drawer's own close button occupies
   that corner; delaying past the drawer's full 0.4s risks the
   opposite problem (both visible at once again). 0.3s biases early
   so the hamburger is always gone before the drawer fully arrives.

   No delay on the reverse (closing) direction: when .open is
   removed, the hamburger should reappear the instant the drawer
   starts sliding away, not wait around — there's no corresponding
   gap risk on close, since the drawer vacates the corner first. */
.sa-nav-hamburger.open {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.01s 0.3s, visibility 0.01s 0.3s;
}

/* Underline indicator — teal line under active/hovered nav links (desktop) */
.sa-nav-links a::after {
  content: ''; position: absolute; bottom: -3px; left: 0;
  width: 100%; height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.25s var(--ease);
}
.sa-nav-links a:hover::after                { transform: scaleX(1); transform-origin: left; }
.sa-nav-links a[aria-current="page"]        { color: var(--heading); }
.sa-nav-links a[aria-current="page"]::after { transform: scaleX(1); }

/* ── Dropdown (Collections) ──────────────────────────────── */
.sa-nav-has-dropdown { position: relative; }

/* Invisible hover bridge — fills gap between trigger and dropdown panel */
.sa-nav-has-dropdown > a::before {
  content: ''; position: absolute; top: 100%; left: -1rem; right: -1rem;
  height: 1.5rem; background: transparent;
}

/* Chevron arrow — rotates 180deg when dropdown is visible */
.sa-nav-chevron {
  display: inline-block; vertical-align: middle; margin-left: 0.3em;
  transition: transform 0.25s var(--ease);
}
.sa-nav-has-dropdown:hover .sa-nav-chevron,
.sa-nav-has-dropdown:focus-within .sa-nav-chevron { transform: rotate(180deg); }

/* Dropdown panel — blurred glass, positioned below the trigger */
.sa-nav-dropdown {
  position: absolute; top: calc(100% + 1rem); left: 50%;
  translate: -50% -8px; min-width: 210px;
  background: var(--glass-panel);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--divider);
  list-style: none; padding: 0.4rem 0;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease, translate 0.2s var(--ease);
}

/* Small caret arrow at top center of dropdown */
.sa-nav-dropdown::before {
  content: ''; position: absolute; top: -5px; left: 50%; translate: -50% 0;
  width: 8px; height: 8px;
  background: var(--glass-panel);
  border-top: 1px solid var(--divider); border-left: 1px solid var(--divider);
  rotate: 45deg;
}

/* Show dropdown on hover or keyboard focus */
.sa-nav-has-dropdown:hover .sa-nav-dropdown,
.sa-nav-has-dropdown:focus-within .sa-nav-dropdown {
  opacity: 1; pointer-events: auto; translate: -50% 0;
}

/* Dropdown item hover — subtle teal background tint */
.sa-nav-dropdown li a:hover { background: rgba(0,196,216,0.07); }

/* Prevent underline pseudo-element from showing on dropdown items */
.sa-nav-dropdown li a::after { display: none; }


/* ═══════════════════════════════════════════════════════════
   14. MOBILE DRAWER
   ──────────────────────────────────────────────────────────
   Slide-out navigation panel for mobile/tablet. (header.sa-php)
   Controlled by openMobileNav() / closeMobileNav() in global.sa-js.

   Structure:
     .sa-nav-backdrop  — semi-transparent overlay behind the drawer
     .sa-nav-mobile    — the drawer panel itself (slides from right)
       .sa-nav-mobile-header  — brand name + close button
       .sa-nav-mobile-links   — main link list + collection sub-links
       .sa-nav-mobile-footer  — shop CTA + Instagram link

   All interactive elements inside meet the 44px touch target.
   The drawer uses -webkit-overflow-scrolling for momentum scroll on iOS.

   Hamburger/close-button overlap: .nav-mobile-header's close button
   computes to virtually the same top-right screen position as the
   persistent .sa-nav-hamburger button (both ~44px, both anchored to the
   viewport's right edge with near-identical top offsets — 0.75rem
   for the nav vs. 1rem for the drawer header). Section 13's
   `.sa-nav-hamburger.open { visibility: hidden; }` rule resolves this by
   ceding that corner entirely to this drawer's own close button the
   instant the drawer opens, rather than letting two functionally
   identical close affordances stack on the same pixels.
   ═══════════════════════════════════════════════════════════ */

/* Dark overlay — covers the page when drawer is open */
.sa-nav-backdrop {
  position: fixed; inset: 0; background: rgba(4,6,20,0.55);
  z-index: var(--z-backdrop); opacity: 0; pointer-events: none;
  transition: opacity 0.35s ease; cursor: pointer;
}
.sa-nav-backdrop.open { opacity: 1; pointer-events: auto; }

/* Drawer panel — slides in from right edge */
.sa-nav-mobile {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 82%; max-width: 380px;
  background: var(--surface-drawer); border-left: 1px solid var(--divider);
  z-index: var(--z-drawer); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.4s var(--ease);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.sa-nav-mobile.open { transform: translateX(0); }

/* Header row inside drawer — brand + close button */
.sa-nav-mobile-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem var(--gutter); border-bottom: 1px solid var(--divider); flex-shrink: 0;
}

/* Close button (X icon) — 44px touch target */
.sa-nav-mobile-close {
  width: var(--touch); height: var(--touch);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); border-radius: 2px; transition: color 0.2s, background 0.2s;
}
.sa-nav-mobile-close:hover { color: var(--heading); background: var(--accent-dim); }

/* Link list container */
.sa-nav-mobile-links { flex: 1; padding: var(--sp-lg) var(--gutter); display: flex; flex-direction: column; }

/* Primary links — large display serif (Shop, About, Contact) */
.sa-nav-mobile-link {
  font-family: var(--fd); font-size: clamp(1.55rem, 5.5vw, 2.1rem); font-weight: 300;
  color: var(--heading); padding: 0.55rem 0; display: block;
  transition: color 0.2s; line-height: 1.15;
  min-height: var(--touch);
}
.sa-nav-mobile-link:hover { color: var(--accent); }

/* Collection sub-links — smaller, indented, left border */
.sa-nav-mobile-sub {
  display: block; font-family: var(--fd);
  font-size: clamp(1rem, 3.8vw, 1.35rem); font-weight: 300;
  color: var(--muted); padding: 0.45rem 0 0.45rem 1rem;
  border-left: 1px solid var(--divider);
  transition: color 0.2s, border-color 0.2s; line-height: 1.3;
  min-height: var(--touch);
}
.sa-nav-mobile-sub + .sa-nav-mobile-sub { margin-top: 0.1rem; }
.sa-nav-mobile-sub:hover { color: var(--heading); border-color: var(--accent); }

/* Footer row inside drawer — shop button + Instagram link */
.sa-nav-mobile-footer {
  padding: var(--sp-md) var(--gutter); border-top: 1px solid var(--divider);
  flex-shrink: 0; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem;
}


/* ═══════════════════════════════════════════════════════════
   15. FOOTER
   ──────────────────────────────────────────────────────────
   Site-wide footer. (footer.sa-php)

   Mobile-first: single column grid.
   At 660px+: 2-column grid (brand spans full width).
   At 960px+: 4-column grid (brand | collections | about | info).

   Uses --module for vertical padding and --gutter for horizontal,
   so spacing matches every other section on the page.

   Footer links have extra vertical padding to meet 44px touch targets.
   ═══════════════════════════════════════════════════════════ */
.sa-footer {
  background: var(--bg-deep); border-top: 1px solid var(--divider);
  padding: var(--module) var(--gutter);
}

/* Grid container — mobile: 1 col, grows via breakpoints */
.sa-footer-inner {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: 1fr;
  gap: var(--sp-xl);
}

/* Brand description text */
.sa-footer-bio  { font-size: 0.8rem; color: var(--muted); max-width: 30ch; line-height: 1.7; }

/* Link columns */
.sa-footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.sa-footer-links a {
  font-size: 0.8rem; color: var(--muted); transition: color 0.2s;
  padding: 0.25rem 0;            /* vertical padding for touch target */
  min-height: var(--touch);
  display: flex; align-items: center;
}
.sa-footer-links a:hover { color: var(--text); }

/* Bottom bar — copyright + social link */
.sa-footer-bottom {
  max-width: var(--wrap); margin: var(--sp-xl) auto 0;
  padding-top: var(--sp-sm); border-top: 1px solid var(--divider);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 0.5rem;
}
.sa-footer-bottom p { font-size: 0.7rem; color: var(--muted); }
.sa-footer-social   { display: flex; gap: var(--sp-sm); }


/* ═══════════════════════════════════════════════════════════
   16. ANIMATIONS
   ──────────────────────────────────────────────────────────
   Two animation systems:

   A) Header entrance (CSS animation):
      .sa-breadcrumb, .sa-page-title, .sa-page-subtitle slide up + fade in
      on page load with staggered delays. Used inside .sa-page-header.

   B) Scroll reveal (CSS transition + JS IntersectionObserver):
      Any element with class="reveal" starts hidden (opacity:0,
      translateY:20px) and transitions in when it enters the viewport.
      The .js-animate class on <body> activates the hidden state;
      the .in class triggers the visible state.

      Delay modifiers for staggering groups:
        .reveal-delay-1 — 0.1s delay (2nd element in a group)
        .reveal-delay-2 — 0.2s delay (3rd element)
        .reveal-delay-3 — 0.3s delay (4th element)

      Usage in Elementor: add "reveal" to a widget's CSS Classes field.
      For staggered groups: "reveal", "reveal reveal-delay-1", etc.
   ═══════════════════════════════════════════════════════════ */

/* A) Header entrance — triggered on page load */
@keyframes headerIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sa-breadcrumb    { animation: headerIn 0.6s var(--ease) 0.1s both; }
.sa-page-title    { animation: headerIn 0.9s var(--ease) 0.22s both; }
.sa-page-subtitle { animation: headerIn 0.8s var(--ease) 0.38s both; }

/* B) Scroll reveal — activated by global.sa-js IntersectionObserver */
.reveal { transition: opacity 0.75s ease, transform 0.75s ease; }
.js-animate .reveal    { opacity: 0; transform: translateY(20px); }  /* hidden state */
.js-animate .reveal.in { opacity: 1; transform: translateY(0); }     /* visible state */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }


/* ═══════════════════════════════════════════════════════════
   17. EFFECTS
   ──────────────────────────────────────────────────────────
   A) Grain overlay:
      A fixed, full-viewport SVG noise texture at 2.5% opacity.
      Adds subtle film-grain texture over the entire site.
      pointer-events:none ensures it doesn't block interaction.
      --z-grain sits just below --z-skip-nav in the z-index scale
      (section 1) — both are "top of stack" by intent, and grain's
      pointer-events:none means it can never actually intercept a
      click even where the two values are close together.

   B) Back-to-top button:
      Fixed in bottom-right corner. Hidden by default (opacity:0).
      global.sa-js adds .visible class when scrollY > 420px.
      Contains a .sa-btt-line (animated vertical line) and
      .sa-btt-label ("Top" text in vertical writing mode).
      The line uses a keyframe animation (btt-rise) that makes
      it grow up and fade in a breathing loop.
   ═══════════════════════════════════════════════════════════ */

/* A) Grain overlay — fixed noise texture across entire viewport */
body::before {
  content: ''; position: fixed; inset: 0; z-index: var(--z-grain);
  pointer-events: none; opacity: 0.025;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.sa-w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat;
  background-size: 180px 180px;
}

/* B) Back-to-top — target: <button id="back-to-top"> in footer.sa-php */
.sa-back-to-top {
  position: fixed; bottom: 1.75rem; right: 1.5rem;
  width: var(--touch); min-height: var(--touch); padding: 0.5rem 0;
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; gap: 0.35rem;
  background: transparent; border: none; cursor: pointer;
  z-index: var(--z-fab); opacity: 0; pointer-events: none;
  transform: translateY(8px); transition: opacity 0.4s ease, transform 0.4s ease;
}
.sa-back-to-top.visible { opacity: 0.42; pointer-events: auto; transform: translateY(0); }
.sa-back-to-top:hover   { opacity: 1; }

/* Animated vertical line inside the back-to-top button */
.sa-btt-line {
  width: 1px; height: 40px; background: var(--text);
  transform-origin: bottom; transform: scaleY(0); opacity: 0;
}
.sa-back-to-top.visible .sa-btt-line { animation: btt-rise 2s ease-in-out infinite; }

/* Breathing animation — line grows up, holds, then shrinks down */
@keyframes btt-rise {
  0%, 100% { transform: scaleY(0); opacity: 0; }
  15%      { transform: scaleY(1); opacity: 1; }
  75%      { transform: scaleY(1); opacity: 1; }
  95%      { transform: scaleY(0); opacity: 0; }
}


/* C) Custom cursor — dot + lagging ring (pointer devices only) */
body.sa-js-cursor,
body.sa-js-cursor a,
body.sa-js-cursor button { cursor: none; }

#cursor-dot,
#cursor-ring {
  position: fixed;
  pointer-events: none;
  z-index: var(--z-grain);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s;
}
#cursor-dot {
  width: 5px; height: 5px;
  background: var(--accent);
}
#cursor-ring {
  width: 28px; height: 28px;
  border: 1px solid rgba(0, 196, 216, 0.45);
  transition: width 0.2s, height 0.2s, border-color 0.2s, opacity 0.2s;
}
#cursor-ring.hovered {
  width: 44px; height: 44px;
  border-color: var(--accent);
}


/* ═══════════════════════════════════════════════════════════
   17b. FAQ ACCORDION
   ──────────────────────────────────────────────────────────
   Single-open accordion used on the Contact page. Behavior lives
   in js/global.sa-js (section 6: toggles aria-expanded on click, full
   stop) — this is the matching CSS that does the actual collapse/
   expand animation, keyed entirely off that attribute via a sibling
   combinator. No JS height measurement involved.

   Structure (drop into Elementor as raw HTML, or build as a
   reusable section):
     .sa-faq-section       — outer wrapper, full module spacing
     .sa-faq-heading-row   — overline + heading above the list
     .sa-faq-list          — column of items, top border starts the list
     .sa-faq-item          — one question/answer pair, bottom-bordered
       .sa-faq-trigger      — the clickable question row (button)
         .sa-faq-icon         — circular +, rotates to × when open
       .sa-faq-body         — collapsible wrapper; animates via the
                           `.sa-faq-trigger[aria-expanded="true"] + .faq-body`
                           sibling selector below
         .sa-faq-body-inner   — the actual padded answer text

   Default (collapsed) state is CSS-owned: grid-template-rows: 0fr
   plus overflow:hidden ensures a panel is genuinely hidden the
   instant the page paints, matching the aria-expanded="false"
   default in the markup — not dependent on JS having run yet.
   ═══════════════════════════════════════════════════════════ */
.sa-faq-section {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--module) var(--gutter);
}

.sa-faq-heading-row {
  margin-bottom: var(--sp-xl);
}

.sa-faq-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--divider);
}

.sa-faq-item {
  border-bottom: 1px solid var(--divider);
}

/* Question row — full-width button, label + icon spaced apart */
.sa-faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.1rem 0;
  font-family: var(--fd);
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  font-weight: 300;
  color: var(--heading);
  text-align: left;
  cursor: pointer;
  background: none;
  border: none;
  min-height: var(--touch);
  transition: color 0.2s;
}
.sa-faq-trigger:hover { color: var(--accent); }

/* Circular icon — rotates from + to × on open, border brightens to accent.
   The "+"/"×" mark itself is drawn here via ::before/::after (two
   perpendicular bars) — there is no separate SVG child for content
   authors to remember to add. Rotating .sa-faq-icon 45° on open rotates
   the embedded bars along with it, turning the + into an ×. Uses
   --border-interactive rather than --divider for both the circle's
   border and the mark itself: this glyph is supplementary (the
   trigger's own visible question text plus aria-expanded already
   convey the control and its state), but since a mark is being drawn
   at all it should actually be visible rather than reintroduce the
   ~1.15:1 contrast issue --divider has against this dark background. */
.sa-faq-icon {
  position: relative;
  flex-shrink: 0;
  width: 18px; height: 18px;
  border: 1px solid var(--border-interactive);
  border-radius: 50%;
  transition: border-color 0.2s, transform 0.3s var(--ease);
}
.sa-faq-icon::before,
.sa-faq-icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 1px;
  background: var(--border-interactive);
  transform: translate(-50%, -50%);
  transition: background-color 0.2s;
}
.sa-faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }

.sa-faq-trigger:hover .sa-faq-icon { border-color: var(--accent); }
.sa-faq-trigger:hover .sa-faq-icon::before,
.sa-faq-trigger:hover .sa-faq-icon::after { background: var(--accent); }
.sa-faq-trigger[aria-expanded="true"] .sa-faq-icon { transform: rotate(45deg); border-color: var(--accent); }
.sa-faq-trigger[aria-expanded="true"] .sa-faq-icon::before,
.sa-faq-trigger[aria-expanded="true"] .sa-faq-icon::after { background: var(--accent); }

/* Answer panel — collapsed by default via grid-template-rows: 0fr.
   No JS height measurement needed: the sibling combinator below
   reacts directly to the trigger's aria-expanded state, so the
   browser animates the 0fr→1fr track size natively. This avoids
   animating max-height/height directly (a layout-thrash property);
   grid-template-rows produces the same collapse/expand effect
   without forcing a reflow of surrounding layout on every frame. */
.sa-faq-body {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.4s var(--ease);
}
.sa-faq-trigger[aria-expanded="true"] + .sa-faq-body {
  grid-template-rows: 1fr;
}

.sa-faq-body-inner {
  overflow: hidden;
  min-height: 0;
  padding: 0 0 1.25rem;
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.9;
}


/* ═══════════════════════════════════════════════════════════
   18. WOOCOMMERCE
   ──────────────────────────────────────────────────────────
   Styles that map WooCommerce's default markup to our design
   system. The Accent Button component (section 4) handles all
   add-to-cart buttons. This section covers everything else:

   Product grid:
     Uses CSS Grid with auto-fill + minmax(260px, 1fr) so products
     reflow naturally without breakpoints. Single column on small
     phones, 2–3 columns on wider screens.

   Product cards (.products .sa-product):
     Dark surface background, subtle border, hover brightens border.

   Product titles:
     Bodoni Moda 300 — same as section headings. Archive cards get
     a smaller size; single product pages get a larger size.

   Prices:
     Jost 400 in accent teal. Archive cards: 0.85rem. Single: 1.1rem.
     Strikethrough (<del>) uses --muted color.

   WooCommerce breadcrumbs:
     Matches our .sa-breadcrumb label component styling.

   Product tabs (Description, Additional Info, Reviews):
     Horizontal scrolling on mobile. Active tab in accent color.
   ═══════════════════════════════════════════════════════════ */

/* Product grid — responsive without breakpoints */
.woocommerce .products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-md);
}

/* Product card container */
.woocommerce ul.products li.product,
.woocommerce .products .product {
  width: 100% !important; /* WooCommerce's .columns-N rules (specificity 0,4,2) override grid layout; !important wins */
  background: var(--surface); border: 1px solid var(--divider);
  border-radius: 1px; overflow: hidden; transition: border-color 0.3s ease;
}
.woocommerce .products .product:hover { border-color: var(--divider-hover); }

/* Product titles — shared base for archive cards and single product */
.woocommerce .products .product .woocommerce-loop-product__title,
.woocommerce .product .summary .product_title {
  font-family: var(--fd); font-weight: 300; color: var(--heading);
}
.woocommerce .products .product .woocommerce-loop-product__title {
  font-size: clamp(0.95rem, 1.5vw, 1.15rem); font-style: italic; padding: 0.75rem 1rem 0.25rem;
}
.woocommerce .product .summary .product_title {
  font-size: clamp(1.6rem, 3vw, 2.5rem); margin-bottom: var(--sp-sm);
}

/* Prices — shared base for archive and single */
.woocommerce .products .product .price,
.woocommerce .product .summary .price {
  font-family: var(--fb); font-weight: 400; color: var(--accent); letter-spacing: 0.04em;
}
.woocommerce .products .product .price { font-size: 0.85rem; padding: 0 1rem 0.75rem; }
.woocommerce .product .summary .price  { font-size: 1.1rem; }
.woocommerce .price del                { color: var(--muted); }

/* Short description on single product page */
.woocommerce .product .summary .woocommerce-product-details__short-description {
  color: var(--muted); font-size: 0.9rem; line-height: 1.9;
}

/* WooCommerce breadcrumbs — matches our Label component */
.woocommerce-breadcrumb {
  font-family: var(--fb); font-size: 0.78rem;  /* matches .breadcrumb's raised floor */
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}
.woocommerce-breadcrumb a       { color: var(--accent); }
.woocommerce-breadcrumb a:hover { color: var(--accent-hover); }

/* Archive sorting controls */
.woocommerce .woocommerce-ordering select,
.woocommerce .woocommerce-result-count {
  font-family: var(--fb); color: var(--muted); font-size: 0.78rem;
}

/* Product tabs — horizontal scrollable on mobile */
.woocommerce-tabs .tabs {
  list-style: none; display: flex; gap: var(--sp-md);
  border-bottom: 1px solid var(--divider); margin-bottom: var(--sp-md);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.woocommerce-tabs .tabs li a {
  font-family: var(--fb); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); padding-bottom: 0.75rem; transition: color 0.2s;
  white-space: nowrap;
}
.woocommerce-tabs .tabs li.active a { color: var(--accent); }
.woocommerce-tabs .panel { color: var(--muted); font-size: 0.9rem; line-height: 1.9; }


/* ═══════════════════════════════════════════════════════════
   18g. WOOCOMMERCE — SHOP & ARCHIVE PAGES
   ──────────────────────────────────────────────────────────
   Covers /shop/ (all products) and /collections/{slug}/
   (single category archive). These pages share the same
   WooCommerce template output so one ruleset handles both.

   These supplement — not replace — WooCommerce's own base
   CSS. WC's stylesheet provides star-rating fonts, Flexslider,
   and form resets. We override the visual design on top.
   ═══════════════════════════════════════════════════════════ */

/* Page wrapper — constrains and pads the WC output */
.woocommerce-page .woocommerce,
.woocommerce-page .woocommerce-notices-wrapper {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
}

/* Archive page header (category title + optional description) */
.woocommerce-products-header {
  padding: var(--sp-xl) 0 var(--sp-md);
  border-bottom: 1px solid var(--divider); margin-bottom: var(--sp-xl);
}
.woocommerce-products-header__title {
  font-family: var(--fd); font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 300; color: var(--heading); line-height: 1.1;
}
.term-description {
  color: var(--muted); font-size: 0.9rem; line-height: 1.9;
  margin-top: var(--sp-sm); max-width: 62ch;
}

/* Toolbar — result count left, sort dropdown right */
.woocommerce-result-count,
.woocommerce-ordering {
  font-family: var(--fb); font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--muted); line-height: 1;
}
.woocommerce .woocommerce-result-count { margin: 0; }
.woocommerce .woocommerce-ordering { margin: 0; }
.woocommerce .woocommerce-ordering select {
  background: var(--surface); border: 1px solid var(--divider);
  color: var(--text); font-family: var(--fb); font-size: 0.72rem;
  letter-spacing: 0.06em; padding: 0.4rem 0.8rem;
  border-radius: 2px; cursor: pointer; appearance: none; -webkit-appearance: none;
}

/* Products grid — 4:5 portrait ratio to show painting proportions */
.woocommerce .products .product img {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
}

/* Sale badge — turquoise, white text, our font */
.woocommerce span.onsale,
.sa-sale-badge {
  background: var(--accent); color: #fff;
  font-family: var(--fb); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  border-radius: 1px; padding: 0.2rem 0.6rem; min-height: 0;
  line-height: 1.4; top: var(--sp-sm); left: auto; right: var(--sp-sm);
}

/* Price info trigger — turquoise "i" circle with hover tooltip */
.sa-price-info {
  display: inline-flex; align-items: center; gap: 0.4rem;
  position: relative;
}
.sa-price-info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-family: var(--fd); font-style: italic; font-size: 0.6rem; font-weight: 400;
  line-height: 1; cursor: default; flex-shrink: 0;
  border: none; padding: 0;
}
.sa-price-tooltip {
  position: absolute;
  bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  background: #fff; color: #080C1E;
  padding: 0.45rem 0.7rem;
  border-radius: 2px; white-space: nowrap;
  font-family: var(--fb); font-size: 0.775rem; font-weight: 400;
  line-height: 1.5;
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s;
  z-index: 10;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
.sa-price-tooltip::after {
  content: '';
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #fff;
}
.sa-price-info:hover .sa-price-tooltip,
.sa-price-info-btn:focus + .sa-price-tooltip,
.sa-price-info.open .sa-price-tooltip { opacity: 1; pointer-events: auto; }
.sa-price-original { display: block; color: #444; text-decoration: line-through; }
.sa-price-saving   { display: block; color: var(--accent); font-weight: 500; font-size: 0.7rem; margin-top: 0.1rem; }

/* Hide WooCommerce del (strikethrough) — we show it in the tooltip instead */
.sa-work-price del,
.sa-shop-card-price del,
.sa-coll-card-price del { display: none; }
.sa-work-price ins,
.sa-shop-card-price ins { text-decoration: none; }

/* Product card info area — price row + button row */
.woocommerce .products .product .woocommerce-loop-product__link { display: flex; flex-direction: column; }
.woocommerce ul.products li.product .price { display: block; padding: 0 1rem 0.5rem; }
.woocommerce .products li.product .sa-card-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.6rem 1rem 0.85rem;
  border-top: 1px solid var(--divider); margin-top: auto;
}
.woocommerce .products li.product .sa-card-footer .price { padding: 0; border: none; margin: 0; }
.woocommerce .products li.product .sa-card-actions { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
.woocommerce .products li.product .sa-btn-view {
  display: inline-flex; align-items: center; font-family: var(--fb); font-size: 0.65rem; font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  padding: 0.45rem 0.75rem; border: 1px solid var(--divider); border-radius: 2px; white-space: nowrap;
  transition: color 0.2s, border-color 0.2s; min-height: 0;
}
.woocommerce .products li.product .sa-btn-view:hover { color: var(--heading); border-color: rgba(221,216,240,0.25); }

/* Availability badge — sits on the image */
.woocommerce .products .product .sa-avail-badge {
  position: absolute; top: 0.75rem; right: 0.75rem;
  font-family: var(--fb); font-size: 0.58rem; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; padding: 0.22rem 0.55rem; border-radius: 1px; pointer-events: none; z-index: 1;
}
.sa-avail-badge.available { color: var(--accent); background: rgba(8,12,30,0.75); border: 1px solid rgba(0,196,216,0.3); backdrop-filter: blur(4px); }
.sa-avail-badge.sold-out  { color: rgba(221,216,240,0.55); background: rgba(8,12,30,0.75); border: 1px solid var(--divider); backdrop-filter: blur(4px); }

/* Star ratings — works alongside WC's icon font */
.star-rating {
  font-size: 0.8rem; color: var(--muted); overflow: hidden;
}
.star-rating span { color: var(--accent); }

/* Related collections strip */
.sa-collection-related       { max-width: var(--wrap); margin: 0 auto; padding: var(--sp-2xl) var(--gutter); }
.sa-collection-related-label { font-family: var(--fb); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-lg); }
.sa-related-grid             { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--divider); }
.sa-related-card             { display: flex; align-items: center; gap: var(--sp-lg); padding: var(--sp-lg); background: var(--surface); text-decoration: none; transition: background 0.2s; }
.sa-related-card:hover       { background: var(--surface-hi); }
.sa-related-thumb            { width: 100px; flex-shrink: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 1px; background: var(--surface-hi); }
.sa-related-thumb img        { width: 100%; height: 100%; object-fit: cover; }
.sa-related-info             { flex: 1; min-width: 0; }
.sa-related-card-label       { font-family: var(--fb); font-size: 0.62rem; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.35rem; }
.sa-related-card-title       { font-family: var(--fd); font-size: clamp(1rem, 2vw, 1.35rem); font-weight: 300; color: var(--heading); line-height: 1.2; margin-bottom: 0.4rem; }
.sa-related-card-cta         { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--fb); font-size: 0.65rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); transition: color 0.2s; }
.sa-related-card:hover .sa-related-card-cta { color: var(--accent); }
@media (max-width: 660px) {
  .sa-related-grid { grid-template-columns: 1fr; }
}

/* WooCommerce notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: var(--surface); color: var(--text);
  border-top: none; border-radius: 2px;
  border: 1px solid var(--divider);
  border-left: 3px solid var(--accent);
  font-family: var(--fb); font-size: 0.875rem; line-height: 1.6;
  padding: var(--sp-md) var(--sp-lg);
  margin-bottom: var(--sp-lg);
  list-style: none;
}
.woocommerce-error { border-left-color: var(--crimson); }
.woocommerce-message a.button,
.woocommerce-info a.button {
  font-size: 0.72rem; padding: 0.45rem 0.9rem;
  margin-right: var(--sp-sm);
}

/* Pagination */
.woocommerce-pagination {
  margin: var(--sp-2xl) 0 var(--sp-xl); text-align: center;
}
.woocommerce-pagination ul.sa-page-numbers {
  display: inline-flex; align-items: center; gap: 2px;
  list-style: none; padding: 0; margin: 0;
}
.woocommerce-pagination .sa-page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; min-height: var(--touch);
  font-family: var(--fb); font-size: 0.78rem; font-weight: 400;
  letter-spacing: 0.06em; color: var(--muted);
  background: var(--surface); border: 1px solid var(--divider);
  border-radius: 1px; text-decoration: none; transition: border-color 0.2s, color 0.2s;
}
.woocommerce-pagination .sa-page-numbers:hover { color: var(--heading); border-color: rgba(221,216,240,0.2); }
.woocommerce-pagination .sa-page-numbers.sa-current {
  background: var(--accent); border-color: var(--accent);
  color: var(--bg); pointer-events: none;
}
.woocommerce-pagination .sa-page-numbers.sa-dots { background: none; border-color: transparent; }


/* ═══════════════════════════════════════════════════════════
   18h. WOOCOMMERCE — SINGLE PRODUCT PAGE (NATIVE FALLBACK)
   ──────────────────────────────────────────────────────────
   Used by WooCommerce's own single-product.sa-php until an
   Elementor Theme Builder template overrides it. Once you
   build an Elementor single-product template, these rules
   may be superseded — they won't conflict because Elementor
   replaces the entire .woocommerce div.product structure.
   ═══════════════════════════════════════════════════════════ */

/* Single product — two-column on desktop (gallery left, summary right) */
.woocommerce div.product {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-xl);
  padding: var(--sp-xl) 0;
}

/* Product gallery */
.woocommerce-product-gallery {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 1px;
  overflow: hidden;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
}
.woocommerce-product-gallery__trigger {
  position: absolute; top: var(--sp-sm); right: var(--sp-sm); z-index: 2;
  background: rgba(8,12,30,0.55); border: 1px solid var(--divider);
  border-radius: 1px; padding: 0.3rem 0.55rem;
  color: var(--muted); font-size: 0.65rem; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none;
}
/* Flexslider thumbnail strip (WC's default gallery slider) */
.flex-control-nav { margin: 0; padding: 0; list-style: none; }
.flex-control-thumbs {
  display: flex; gap: 0.5rem; margin-top: 0.5rem; overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.flex-control-thumbs li { flex: 0 0 auto; }
.flex-control-thumbs li img {
  display: block; width: 72px; height: 72px; object-fit: cover;
  border: 1px solid var(--divider); border-radius: 1px; cursor: pointer;
  opacity: 0.65; transition: opacity 0.2s, border-color 0.2s;
}
.flex-control-thumbs li img.sa-flex-active,
.flex-control-thumbs li img:hover { opacity: 1; border-color: rgba(221,216,240,0.3); }

/* Summary column */
.woocommerce div.product .summary {
  display: flex; flex-direction: column; gap: var(--sp-md);
}

/* Product rating line */
.woocommerce-product-rating {
  display: flex; align-items: center; gap: var(--sp-sm);
  font-size: 0.78rem; color: var(--muted);
}
.woocommerce-review-link { color: var(--muted); text-decoration: underline; }
.woocommerce-review-link:hover { color: var(--accent); }

/* Add-to-cart form */
form.sa-cart {
  display: flex; align-items: center; gap: var(--sp-sm); flex-wrap: wrap;
  padding: var(--sp-md) 0; border-top: 1px solid var(--divider);
}
.quantity { display: flex; align-items: center; gap: 0.35rem; }
.quantity input[type="number"] {
  background: var(--surface); border: 1px solid var(--divider);
  color: var(--text); font-family: var(--fb); font-size: 0.9rem;
  width: 4.5rem; height: var(--touch); text-align: center;
  border-radius: 2px; padding: 0 0.5rem;
  -moz-appearance: textfield; appearance: textfield;
}
.quantity input[type="number"]::-webkit-outer-spin-button,
.quantity input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.quantity input[type="number"]:focus { border-color: var(--accent); outline: none; }
.single_add_to_cart_button { flex: 1; }

/* Product meta — SKU, categories, tags */
.sa-product_meta {
  font-family: var(--fb); font-size: 0.78rem; color: var(--muted);
  border-top: 1px solid var(--divider); padding-top: var(--sp-md);
  display: flex; flex-direction: column; gap: 0.4rem;
}
.sa-product_meta .sa-sku_wrapper,
.sa-product_meta .sa-posted_in,
.sa-product_meta .sa-tagged_as { letter-spacing: 0.04em; }
.sa-product_meta a { color: var(--accent); transition: color 0.2s; }
.sa-product_meta a:hover { color: #22D8EC; }

/* Related & upsell product sections */
.related.products,
.upsells.products {
  border-top: 1px solid var(--divider);
  padding: var(--sp-2xl) 0;
  margin-top: var(--sp-xl);
}
.sa-related.products > h2,
.upsells.products > h2 {
  font-family: var(--fd); font-style: italic;
  font-size: clamp(1.3rem, 2.5vw, 1.9rem);
  font-weight: 300; color: var(--heading); margin-bottom: var(--sp-xl);
}

/* Single product responsive */
@media (min-width: 768px) {
  .woocommerce div.product {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2xl);
    align-items: start;
  }
  .woocommerce-product-gallery { position: sticky; top: 113px; }
}


/* ═══════════════════════════════════════════════════════════
   19. ELEMENTOR INTEGRATION
   ──────────────────────────────────────────────────────────
   Minimal overrides so Elementor widgets inherit our dark theme.
   Elementor sections default to transparent (no white flash).
   Widget containers inherit --text color.

   Most Elementor styling should be done in the Elementor editor
   using our CSS variables (e.sa-g., color: var(--accent)).
   ═══════════════════════════════════════════════════════════ */
.elementor-section          { background: transparent; }
.elementor-widget-container { color: var(--text); }


/* ═══════════════════════════════════════════════════════════
   18b. HOMEPAGE SECTIONS
   ──────────────────────────────────────────────────────────
   Styles specific to the homepage (front-page template).
   Each sub-section maps to one Elementor block on the page.

   a) Hero           — full-viewport opening section
   b) Marquee        — scrolling text strip
   c) Works grid     — featured paintings
   d) Philosophy     — blockquote + body text on surface bg
   e) Collections    — 2-column + full-width card grid
   f) Artist bio     — portrait image + stats
   g) Statement      — crimson CTA strip

   Use CSS Classes field in Elementor to apply these, or paste
   the HTML snippets provided in the build guide.
   ═══════════════════════════════════════════════════════════ */

/* a) Hero -------------------------------------------------- */
.sa-hero {
  position: relative;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}

/* Bottom gradient overlay — keeps text readable over any photo */
.sa-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 65%;
  background: linear-gradient(to top,
    rgba(8,12,30,0.96) 0%,
    rgba(8,12,30,0.7)  40%,
    rgba(8,12,30,0.0)  100%
  );
  pointer-events: none;
}

.sa-hero-content {
  position: relative;
  z-index: var(--z-raise);
  padding: var(--sp-lg) var(--gutter) var(--sp-xl);
  max-width: 1100px;
  margin-top: auto;
}

.sa-hero-tagline {
  font-family: var(--fb);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-md);
  animation: heroIn 0.7s var(--ease) 0.15s both;
}

.sa-hero-h1 {
  font-family: var(--fd);
  font-weight: 300;
  font-size: clamp(2.75rem, 8vw, 8rem);
  color: var(--heading);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-lg);
  animation: heroIn 0.9s var(--ease) 0.28s both;
}
.sa-hero-h1 em { font-style: italic; color: var(--accent); }

.sa-hero-sub {
  max-width: 38ch;
  font-size: clamp(0.9rem, 1.5vw, 1.05rem);
  color: var(--muted);
  margin-bottom: var(--sp-xl);
  line-height: 1.85;
  animation: heroIn 0.7s var(--ease) 0.46s both;
}
.sa-hero-sub strong { color: var(--text); font-weight: 400; }

.sa-hero-ctas {
  display: flex;
  gap: var(--sp-sm);
  flex-wrap: wrap;
  animation: heroIn 0.7s var(--ease) 0.60s both;
}

/* Animated scroll indicator — bottom-right of hero, desktop only */
.sa-scroll-hint {
  position: absolute;
  bottom: 2rem; right: var(--gutter);
  z-index: var(--z-raise);
  display: none; /* hidden on mobile, shown at 660px+ below */
  flex-direction: column; align-items: center; gap: 0.4rem;
  opacity: 0.4;
  animation: heroIn 0.7s ease 1.1s both;
}
.sa-scroll-hint-line {
  width: 1px; height: 48px; background: var(--text);
  transform-origin: top;
  animation: drop 2s ease-in-out infinite;
}
.sa-scroll-hint-label {
  font-family: var(--fb); font-size: 0.6rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  writing-mode: vertical-rl; color: var(--text);
}

@keyframes heroIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes drop {
  0%, 100% { transform: scaleY(0); opacity: 0; }
  20%       { transform: scaleY(1); opacity: 1; }
  80%       { transform: scaleY(1); opacity: 1; }
}

/* b) Marquee ----------------------------------------------- */
.sa-marquee {
  background: var(--surface);
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  padding: 0.7rem 0;
  overflow: hidden;
  white-space: nowrap;
}
.sa-marquee-inner {
  display: inline-block;
  animation: marquee 28s linear infinite;
}
.sa-marquee-inner span {
  display: inline-block;
  font-family: var(--fb);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 2.5rem;
}
.sa-marquee-inner span em { color: var(--accent); font-style: normal; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* c) Works grid -------------------------------------------- */
.sa-works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--divider);
}

.sa-work-card {
  background: var(--surface);
  display: flex; flex-direction: column;
  overflow: hidden;
  text-decoration: none; color: inherit;
}

.sa-work-img-wrap {
  position: relative; overflow: hidden;
  background: var(--surface-hi);
  aspect-ratio: 4 / 5;
}
.sa-work-img-wrap img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.55s var(--ease);
}
.sa-work-card:hover .sa-work-img-wrap img { transform: scale(1.04); }

.sa-work-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.4s ease;
}
.sa-work-card:hover .sa-work-overlay {
  background: rgba(8,12,30,0.55);
  opacity: 1;
}
.sa-work-overlay-btn {
  font-family: var(--fb); font-size: 0.7rem;
  font-weight: 500; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--heading);
  border: 1px solid rgba(255,255,255,0.5);
  padding: 0.6rem 1.25rem; border-radius: 2px;
}

.sa-work-info {
  padding: var(--sp-sm) var(--sp-md);
  display: flex; align-items: baseline;
  justify-content: space-between;
  border-top: 1px solid var(--divider);
}
.sa-work-title {
  font-family: var(--fd); font-size: 1rem;
  font-weight: 400; font-style: italic;
  color: var(--heading); line-height: 1.3;
}
.sa-work-price {
  font-family: var(--fb); font-size: 0.78rem;
  color: var(--accent); white-space: nowrap;
  margin-left: var(--sp-sm);
}
.sa-work-medium {
  font-family: var(--fb); font-size: 0.68rem;
  font-weight: 300; color: var(--muted);
  letter-spacing: 0.04em;
  padding: 0 var(--sp-md) var(--sp-sm);
}
.sa-work-canvas {
  display: block; width: 100%; height: 100%;
  transition: transform 0.55s var(--ease);
}
.sa-work-card:hover .sa-work-canvas { transform: scale(1.04); }

/* d) Philosophy -------------------------------------------- */
.sa-philosophy {
  background: var(--surface);
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  padding: var(--module) var(--gutter);
}
.sa-philosophy-inner {
  max-width: var(--wrap); margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;           /* mobile: stacked */
  gap: var(--sp-xl);
  align-items: center;
}
.sa-philosophy-quote {
  font-family: var(--fd);
  font-size: clamp(1.5rem, 3.5vw, 2.75rem);
  font-weight: 300; font-style: italic;
  color: var(--heading); line-height: 1.25;
  position: relative;
}
/* Large decorative opening quote mark */
.sa-philosophy-quote::before {
  content: '\201C';
  position: absolute; top: -0.4em; left: -0.2em;
  font-family: var(--fd);
  font-size: clamp(5rem, 12vw, 10rem);
  font-weight: 300; line-height: 1;
  color: var(--accent); opacity: 0.12;
  pointer-events: none; user-select: none;
}
.sa-philosophy-quote em { font-style: normal; color: var(--accent); }

.sa-philosophy-line { width: 2rem; height: 2px; background: var(--accent); margin-bottom: var(--sp-md); }
.sa-philosophy-text { color: var(--muted); font-size: 0.95rem; line-height: 1.9; }
.sa-philosophy-text p + p { margin-top: 1rem; }

/* e) Collections grid -------------------------------------- */
.sa-collections-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--divider);
}
.sa-col-card {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--surface-hi);
  display: block; color: inherit;
  text-decoration: none;
}
.sa-col-card img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.sa-col-card:hover img { transform: scale(1.03); }
.sa-col-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(8,12,30,0.88) 0%,
    rgba(8,12,30,0.3)  50%,
    rgba(8,12,30,0.0)  100%
  );
  display: flex; flex-direction: column;
  justify-content: flex-end;
  padding: var(--sp-lg);
}
.sa-col-overlay-row { display: flex; align-items: flex-end; }
.sa-col-title {
  font-family: var(--fd);
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  font-weight: 300; color: var(--heading);
  margin-bottom: 0.35rem;
}
.sa-col-arrow {
  margin-left: auto; flex-shrink: 0;
  width: 2rem; height: 2rem;
  border: 1px solid rgba(221,216,240,0.25);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text);
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.sa-col-card:hover .sa-col-arrow { border-color: var(--accent); background: var(--accent); color: var(--bg); }
/* Third card spans full width as a wide banner */
.sa-col-card-wide { grid-column: 1 / -1; aspect-ratio: 21 / 7; }

/* f) Artist bio -------------------------------------------- */
.sa-bio {
  max-width: var(--wrap); margin: 0 auto;
  padding: var(--module) var(--gutter);
  display: grid;
  grid-template-columns: 1fr;           /* mobile: stacked */
  gap: var(--sp-2xl);
  align-items: center;
}
.sa-bio-portrait-wrap { position: relative; }
.sa-bio-portrait {
  width: 100%; aspect-ratio: 3 / 4;
  background: var(--surface-hi); overflow: hidden;
}
.sa-bio-portrait img { width: 100%; height: 100%; object-fit: cover; }
.sa-bio-portrait-caption {
  position: absolute; bottom: -1rem; right: 0;
  background: var(--accent-dim);
  border: 1px solid rgba(0,196,216,0.25);
  padding: 0.6rem 1rem;
}
.sa-bio-portrait-caption p {
  font-family: var(--fd); font-size: 0.75rem;
  font-style: italic; color: var(--accent); line-height: 1.5;
}
.sa-bio-text h2 { font-size: clamp(2rem, 4vw, 3.25rem); margin-bottom: var(--sp-lg); }
.sa-bio-text h2 em { font-style: italic; color: var(--accent); }
.sa-bio-text p { color: var(--muted); margin-bottom: 1rem; font-size: 0.95rem; }
.sa-bio-text p strong { color: var(--text); font-weight: 400; }
.sa-bio-stats {
  display: flex; gap: var(--sp-xl); flex-wrap: wrap;
  margin-top: var(--sp-xl); padding-top: var(--sp-xl);
  border-top: 1px solid var(--divider);
}
.sa-bio-stat-num {
  font-family: var(--fd);
  font-size: clamp(2rem, 3vw, 2.5rem);
  font-weight: 300; color: var(--heading);
  line-height: 1; display: block;
  font-variant-numeric: tabular-nums;
}
.sa-bio-stat-label {
  font-family: var(--fb); font-size: 0.68rem;
  font-weight: 400; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
  margin-top: 0.25rem; display: block;
}

/* g) Statement strip --------------------------------------- */
.sa-statement {
  background: var(--crimson);
  padding: var(--sp-xl) var(--gutter);
}
.sa-statement-inner {
  max-width: var(--wrap); margin: 0 auto;
  display: flex; align-items: center;
  justify-content: space-between;
  gap: var(--sp-xl); flex-wrap: wrap;
}
.sa-statement p {
  font-family: var(--fd);
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  font-weight: 300; font-style: italic;
  color: rgba(255,255,255,0.95);
  max-width: 52ch; line-height: 1.5;
}
.sa-btn-ghost { /* alias for .sa-btn-secondary, used in home.sa-html mockup */
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--fb); font-size: 0.75rem; font-weight: 400;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text); background: transparent; padding: 0.65rem 1.25rem;
  min-height: var(--touch);
  border: 1px solid var(--border-interactive);
  border-radius: 2px;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.sa-btn-ghost:hover { color: var(--heading); border-color: var(--border-interactive-hover); background: transparent; }

.sa-btn-dark {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(8,12,30,0.85); color: var(--heading);
  font-family: var(--fb); font-size: 0.75rem;
  font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.85rem 1.75rem; border-radius: 2px;
  white-space: nowrap; min-height: var(--touch);
  transition: background 0.2s;
}
.sa-btn-dark:hover { background: rgba(8,12,30,1); }

/* Homepage responsive — desktop two-column layouts */
@media (min-width: 660px) {
  .sa-philosophy-inner { grid-template-columns: 1fr 1fr; }
  .sa-bio              { grid-template-columns: 1fr 1fr; }
  .sa-bio-portrait-caption { right: -1rem; }
  .sa-col-card-wide    { aspect-ratio: 21 / 7; }
}
@media (max-width: 480px) {
  .sa-hero-ctas { flex-direction: column; }
  .sa-works-grid { grid-template-columns: 1fr; background: none; }
  .sa-statement-inner { flex-direction: column; }
}

/* Homepage reduced-motion overrides */
@media (prefers-reduced-motion: reduce) {
  .sa-hero-tagline, .sa-hero-h1, .sa-hero-sub, .sa-hero-ctas, .sa-scroll-hint {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .sa-marquee-inner        { animation: none !important; }
  .sa-scroll-hint          { display: none; }
  .sa-col-card img,
  .sa-work-img-wrap img    { transition: none !important; }
}


/* ═══════════════════════════════════════════════════════════
   18c. ABOUT PAGE
   ──────────────────────────────────────────────────────────
   Use class .sa-artist-statement for the statement section so it
   doesn't conflict with the homepage's .sa-statement strip.
   Use .sa-process-section, .sa-studio-section, .sa-commissions-section.
   ═══════════════════════════════════════════════════════════ */

/* Artist statement — quote left, body text right */
.sa-artist-statement {
  max-width: var(--wrap); margin: 0 auto;
  padding: var(--sp-2xl) var(--gutter);
  display: grid; grid-template-columns: 1fr; gap: var(--sp-xl);
  align-items: start;
}
.sa-artist-statement-quote {
  font-family: var(--fd); font-size: clamp(1.6rem, 3.2vw, 2.8rem);
  font-weight: 300; color: var(--heading); line-height: 1.18;
  letter-spacing: -0.01em;
}
.sa-artist-statement-quote em { font-style: italic; color: var(--accent); }
.sa-artist-statement-body { padding-top: 0.5rem; }
.sa-artist-statement-line { width: 2rem; height: 2px; background: var(--accent); margin-bottom: var(--sp-lg); }
.sa-artist-statement-body p { color: var(--muted); font-size: 0.95rem; line-height: 1.95; }
.sa-artist-statement-body p + p { margin-top: 1.1rem; }

/* Process steps — three cards */
.sa-process-section {
  background: var(--surface);
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
}
.sa-process-inner { max-width: var(--wrap); margin: 0 auto; padding: var(--sp-2xl) var(--gutter); }
.sa-process-heading-row { margin-bottom: var(--sp-xl); }
.sa-process-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-xl); }
.sa-process-card { display: flex; flex-direction: column; gap: var(--sp-md); }
.sa-process-img-wrap {
  aspect-ratio: 5 / 3; overflow: hidden;
  background: var(--surface-hi); border: 1px solid var(--divider); border-radius: 1px;
}
.sa-process-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.sa-process-number {
  font-family: var(--fd); font-size: 0.72rem;
  font-weight: 300; font-style: italic; color: var(--accent); opacity: 0.7;
}
.sa-process-title {
  font-family: var(--fd); font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 300; color: var(--heading); line-height: 1.2; margin-top: -0.25rem;
}
.sa-process-title em { font-style: italic; color: var(--accent); }
.sa-process-desc { font-size: 0.85rem; color: var(--muted); line-height: 1.85; font-weight: 300; }

/* Studio / biography section */
.sa-studio-section {
  max-width: var(--wrap); margin: 0 auto;
  padding: var(--sp-2xl) var(--gutter);
  display: grid; grid-template-columns: 1fr; gap: var(--sp-xl); align-items: center;
}
.sa-studio-img-wrap {
  aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--surface-hi); border: 1px solid var(--divider); border-radius: 1px;
}
.sa-studio-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.sa-studio-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--divider); margin: var(--sp-lg) 0;
}
.sa-stat-cell { background: var(--bg); padding: var(--sp-md); }
.sa-stat-number {
  font-family: var(--fd); font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-weight: 300; color: var(--heading); line-height: 1; margin-bottom: 0.3rem;
}
.sa-stat-label {
  font-family: var(--fb); font-size: 0.65rem; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.sa-studio-body { font-size: 0.9rem; color: var(--muted); line-height: 1.9; }
.sa-studio-body p + p { margin-top: 0.9rem; }

/* Commissions CTA section */
.sa-commissions-section {
  background: var(--surface); border-top: 1px solid var(--divider);
}
.sa-commissions-inner {
  max-width: var(--wrap); margin: 0 auto; padding: var(--sp-2xl) var(--gutter);
  display: grid; grid-template-columns: 1fr; gap: var(--sp-xl); align-items: center;
}
.sa-commissions-heading {
  font-family: var(--fd); font-size: clamp(1.6rem, 3.2vw, 2.8rem);
  font-weight: 300; color: var(--heading); line-height: 1.15; margin-top: var(--sp-sm);
}
.sa-commissions-heading em { font-style: italic; color: var(--accent); }
.sa-commissions-body { font-size: 0.9rem; color: var(--muted); line-height: 1.9; }
.sa-commissions-body p + p { margin-top: 0.9rem; }
.sa-commissions-cta-row { display: flex; gap: var(--sp-sm); margin-top: var(--sp-lg); flex-wrap: wrap; }

/* Instagram strip */
.sa-insta-strip { max-width: var(--wrap); margin: 0 auto; padding: var(--sp-2xl) var(--gutter); }
.sa-insta-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-md); margin-bottom: var(--sp-lg);
}
.sa-insta-header .sa-section-overline { margin-bottom: 0; }
.sa-insta-handle {
  font-family: var(--fb); font-size: 0.72rem; font-weight: 400;
  letter-spacing: 0.1em; color: var(--accent); transition: color 0.2s;
}
.sa-insta-handle:hover { color: #22D8EC; }
.sa-insta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.sa-insta-tile { aspect-ratio: 1; overflow: hidden; background: var(--surface-hi); border: 1px solid var(--divider); }
.sa-insta-tile img { width: 100%; height: 100%; object-fit: cover; }

/* About responsive */
@media (min-width: 660px) {
  .sa-artist-statement { grid-template-columns: 1fr 1fr; }
  .sa-process-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-lg); }
  .sa-studio-section { grid-template-columns: 1fr 1fr; }
  .sa-commissions-inner { grid-template-columns: 1fr 1fr; }
  .sa-insta-grid { grid-template-columns: repeat(6, 1fr); }
}


/* Aliases for about.sa-html mockup class names → theme names */
.sa-statement-overline { font-family: var(--fb); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp-md); }
.sa-statement-quote    { font-family: var(--fd); font-size: clamp(1.6rem, 3.2vw, 2.8rem); font-weight: 300; color: var(--heading); line-height: 1.18; letter-spacing: -0.01em; }
.sa-statement-quote em { font-style: italic; color: var(--accent); }
.sa-statement-body     { padding-top: 0.5rem; }
.sa-statement-body p   { color: var(--muted); font-size: 0.95rem; line-height: 1.95; }
.sa-statement-body p + p { margin-top: 1.1rem; }
.sa-statement-line     { width: 2rem; height: 2px; background: var(--accent); margin-bottom: var(--sp-lg); }

/* Section overline + heading (shared about/collection pattern) */
.sa-section-overline { font-family: var(--fb); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp-sm); }
.sa-section-heading  { font-family: var(--fd); font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 300; color: var(--heading); line-height: 1.15; }
.sa-section-heading em { font-style: italic; color: var(--accent); }

/* Process / studio image placeholders (replaced by real photos in WP) */
.sa-process-canvas-wrap,
.sa-studio-canvas-wrap {
  position: relative;
  overflow: hidden;
  background: var(--surface-hi);
}
.sa-process-canvas-wrap { aspect-ratio: 4 / 3; }
.sa-studio-canvas-wrap  { aspect-ratio: 16 / 7; }
.sa-process-canvas,
.sa-studio-canvas { display: block; width: 100%; height: 100%; }
.sa-studio-content { }


/* ═══════════════════════════════════════════════════════════
   18d. CONTACT PAGE
   ──────────────────────────────────────────────────────────
   Two-column contact layout, form fields, commission section.
   FAQ accordion classes are already in section 17b; add only
   the page-level wrappers (.sa-faq-section, .sa-commission-section).
   ═══════════════════════════════════════════════════════════ */

/* Constrain contact widgets to match .sa-faq-section width */
.sa-contact-info,
.sa-contact-form-heading,
.wpcf7 {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 64px;
  padding-right: 64px;
  box-sizing: border-box;
}

/* Contact info overline */
.sa-contact-info-overline { font-family: var(--fb); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp-md); }

/* Two-column layout — info left, form right */
.sa-contact-layout {
  max-width: var(--wrap); margin: 0 auto;
  padding: var(--sp-2xl) var(--gutter);
  display: grid; grid-template-columns: 1fr; gap: var(--sp-xl); align-items: start;
}

/* Left: contact details */
.sa-contact-info-heading {
  font-family: var(--fd); font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 300; color: var(--heading); line-height: 1.15; margin-bottom: var(--sp-lg);
}
.sa-contact-details { display: flex; flex-direction: column; gap: var(--sp-md); margin-bottom: var(--sp-lg); }
.sa-contact-detail-label {
  font-family: var(--fb); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.25rem;
}
.sa-contact-detail-value { font-size: 0.9rem; color: var(--text); line-height: 1.5; }
.sa-contact-detail-value a { color: var(--text); transition: color 0.2s; }
.sa-contact-detail-value a:hover { color: var(--accent); }
.sa-contact-divider { width: 2rem; height: 1px; background: var(--divider); margin: var(--sp-md) 0; }
.sa-contact-note { font-size: 0.875rem; color: var(--muted); line-height: 1.9; }
.sa-contact-note p + p { margin-top: 0.9rem; }

/* Right: form */
.sa-contact-form-wrap {}
.sa-contact-form-heading {
  font-family: var(--fd); font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 300; color: var(--heading); margin-bottom: var(--sp-lg);
}
#contact-form { display: flex; flex-direction: column; gap: 1.25rem; }
.sa-form-row { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.sa-field { display: flex; flex-direction: column; gap: 0.4rem; }
.sa-field label {
  font-family: var(--fb); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.sa-field input,
.sa-field select,
.sa-field textarea {
  background: var(--surface); border: 1px solid var(--divider);
  color: var(--text); font-family: var(--fb); font-size: 0.9rem; font-weight: 300;
  padding: 0.75rem 1rem; border-radius: 2px; width: 100%;
  transition: border-color 0.2s; appearance: none; -webkit-appearance: none;
}
.sa-field input:focus,
.sa-field select:focus,
.sa-field textarea:focus { border-color: var(--accent); outline: none; }
.sa-field input.error,
.sa-field select.error,
.sa-field textarea.error { border-color: var(--crimson); }
.sa-field-select-wrap { position: relative; }
.sa-field-select-wrap::after {
  content: ''; position: absolute; right: 1rem; top: 50%;
  transform: translateY(-50%); width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--muted); pointer-events: none;
}
.sa-field-select-wrap select { padding-right: 2.5rem; cursor: pointer; }
.sa-field-select-wrap select option { background: var(--surface); color: var(--text); }
.sa-field textarea { resize: vertical; min-height: 8rem; line-height: 1.7; }
.sa-field-error { font-family: var(--fb); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--crimson); display: none; }
.sa-field-error.visible { display: block; }

.sa-btn-submit {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--fb); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--bg); background: var(--accent);
  padding: 0.85rem 15px; min-height: var(--touch);
  border-radius: 2px; border: none; cursor: pointer; width: auto; align-self: flex-start; transition: background 0.2s;
}
.sa-btn-submit:hover { background: #22D8EC; }
.sa-btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }

.sa-form-success {
  display: none; background: var(--surface);
  border: 1px solid rgba(0,196,216,0.2); border-radius: 2px; padding: var(--sp-lg);
}
.sa-form-success.visible { display: block; }
.sa-form-success-icon {
  width: 36px; height: 36px; border: 1px solid var(--accent);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-sm);
}
.sa-form-success-heading { font-family: var(--fd); font-size: 1.3rem; font-weight: 300; color: var(--heading); margin-bottom: 0.5rem; }
.sa-form-success-body { font-size: 0.875rem; color: var(--muted); line-height: 1.8; }

/* Commission section on contact page */
.sa-commission-section {
  background: var(--surface); border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
}
.sa-commission-inner {
  max-width: var(--wrap); margin: 0 auto; padding: var(--sp-2xl) var(--gutter);
  display: grid; grid-template-columns: 1fr; gap: var(--sp-xl); align-items: start;
}
.sa-commission-img-wrap {
  aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--surface-hi); border: 1px solid var(--divider); border-radius: 1px;
}
.sa-commission-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.sa-commission-body { font-size: 0.9rem; color: var(--muted); line-height: 1.9; margin-top: var(--sp-md); }
.sa-commission-body p + p { margin-top: 0.9rem; }
.sa-commission-cta { margin-top: var(--sp-lg); }

/* FAQ section wrapper */
.sa-faq-section { max-width: var(--wrap); margin: 0 auto; padding: var(--sp-2xl) var(--gutter); }
.sa-faq-heading-row { margin-bottom: var(--sp-xl); }

/* CF7 integration — make CF7 output match sa-field styles */
.wpcf7-form { display: flex; flex-direction: column; gap: 1.25rem; }
.wpcf7-form-control-wrap { display: block; }
.wpcf7-form-control-wrap input,
.wpcf7-form-control-wrap select,
.wpcf7-form-control-wrap textarea { width: 100%; }
.wpcf7-not-valid-tip {
  display: block; font-family: var(--fb); font-size: 0.7rem;
  letter-spacing: 0.06em; color: var(--crimson); margin-top: 0.3rem;
}
.wpcf7 input.wpcf7-not-valid,
.wpcf7 select.wpcf7-not-valid,
.wpcf7 textarea.wpcf7-not-valid { border-color: var(--crimson); }
.wpcf7-response-output {
  border: 1px solid var(--divider); border-radius: 2px;
  padding: 0.75rem 1rem; font-family: var(--fb); font-size: 0.85rem; margin-top: 0.5rem;
}
.wpcf7-mail-sent-ok { border-color: rgba(0,196,216,0.4) !important; color: var(--accent); }
.wpcf7-validation-errors,
.wpcf7-acceptance-missing,
.wpcf7-mail-sent-ng { border-color: var(--crimson) !important; color: var(--crimson); }
.wpcf7 .wpcf7-spinner { display: none; }

/* Contact responsive */
@media (min-width: 660px) {
  .sa-form-row { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .sa-contact-layout { grid-template-columns: 1fr 1.6fr; gap: 4rem; }
  .sa-commission-inner { grid-template-columns: 1fr 1.5fr; gap: 4rem; }
  .sa-commission-img-wrap { position: sticky; top: 6rem; }

  /* Contact page: prevent Elementor "full width" from overriding inner
     container widths on the 2-column info/form layout */
  .e-con:has(.sa-contact-info),
  .e-con:has(.sa-contact-form-heading) {
    flex-grow: 0 !important;
    width: var(--e-con-width) !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   18e. COLLECTIONS LANDING PAGE
   ──────────────────────────────────────────────────────────
   The /collections/ page shows all three collection cards.
   Uses .sa-listings-grid / .sa-listing-card prefix to distinguish
   from homepage's .sa-collections-grid / .sa-col-card overlay style.
   ═══════════════════════════════════════════════════════════ */

/* Count bar */
.sa-count-bar { background: var(--surface); border-bottom: 1px solid var(--divider); }
.sa-count-bar-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 1rem var(--gutter);
  display: flex; align-items: center; gap: var(--sp-xl); flex-wrap: wrap;
}
.sa-count-bar-item { display: flex; align-items: baseline; gap: 0.5rem; }
.sa-count-bar-num { font-family: var(--fd); font-size: 1.5rem; font-weight: 300; color: var(--heading); line-height: 1; }
.sa-count-bar-label {
  font-family: var(--fb); font-size: 0.68rem; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.sa-count-bar-divider { width: 1px; height: 1.5rem; background: var(--divider); }

/* Intro */
.sa-col-intro {
  max-width: var(--wrap); margin: 0 auto;
  padding: var(--sp-2xl) var(--gutter) var(--sp-xl);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-xl); flex-wrap: wrap;
}
.sa-col-intro-heading { font-family: var(--fd); font-size: clamp(1.8rem, 3.5vw, 3rem); font-weight: 300; color: var(--heading); }
.sa-col-intro-heading em { font-style: italic; color: var(--accent); }
.sa-col-intro-body { max-width: 42ch; color: var(--muted); font-size: 0.95rem; line-height: 1.85; }

/* Listings grid */
.sa-listings-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--divider); }
.sa-listing-card { position: relative; overflow: hidden; background: var(--surface-hi); display: block; color: inherit; text-decoration: none; }
.sa-listing-card-wide { grid-column: 1; }
.sa-listing-card-top { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.sa-listing-card-wide .sa-listing-card-top { aspect-ratio: 21 / 7; }
.sa-listing-canvas {
  display: block; width: 100%; height: 100%;
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.sa-listing-card:hover .sa-listing-canvas { transform: scale(1.04); }
.sa-listing-canvas-label {
  position: absolute; top: var(--sp-md); left: var(--sp-md);
  font-family: var(--fb); font-size: 0.6rem; font-weight: 400;
  letter-spacing: 0.2em; text-transform: uppercase; color: rgba(221,216,240,0.5);
  background: rgba(8,12,30,0.45); backdrop-filter: blur(6px);
  padding: 0.3rem 0.6rem; border-radius: 1px; z-index: 1; pointer-events: none;
}
.sa-listing-card-body {
  background: var(--surface); border-top: 1px solid var(--divider);
  padding: var(--sp-md) var(--sp-lg);
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-md);
}
.sa-listing-card-info { flex: 1; }
.sa-listing-title { font-family: var(--fd); font-size: clamp(1.15rem, 2vw, 1.6rem); font-weight: 300; color: var(--heading); margin-bottom: 0.4rem; }
.sa-listing-desc { font-size: 0.82rem; color: var(--muted); line-height: 1.7; max-width: 52ch; }
.sa-listing-meta { display: flex; align-items: center; gap: var(--sp-md); margin-top: var(--sp-sm); }
.sa-listing-count {
  font-family: var(--fb); font-size: 0.68rem; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--divider); padding: 0.2rem 0.6rem; border-radius: 1px;
}
.sa-listing-media-tag { font-family: var(--fb); font-size: 0.68rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.sa-listing-cta-wrap { flex-shrink: 0; }
.sa-listing-cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--fb); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--bg); background: var(--accent);
  padding: 0.65rem 1.25rem; border-radius: 2px; white-space: nowrap;
  min-height: var(--touch); transition: background 0.2s, transform 0.15s;
}
.sa-listing-cta:hover { background: #22D8EC; transform: translateY(-1px); }

/* Collections landing responsive */
@media (min-width: 560px) {
  .sa-listings-grid { grid-template-columns: 1fr 1fr; }
  .sa-listing-card-wide { grid-column: 1 / -1; }
  .sa-listing-card-wide .sa-listing-card-top { aspect-ratio: 21 / 7; }
}
@media (max-width: 660px) {
  .sa-listing-card-body { flex-direction: column; align-items: flex-start; }
  .sa-listing-card-wide .sa-listing-card-top { aspect-ratio: 3 / 2; }
  .sa-col-intro { flex-direction: column; align-items: flex-start; gap: var(--sp-md); }
}
@media (prefers-reduced-motion: reduce) {
  .sa-listing-canvas { transition: none !important; }
}

/* ── Collections landing: card-body layout variant ──────── */
/* .sa-col-card--info: card with top canvas + info body below (no overlay) */
.sa-col-card--info           { overflow: visible; aspect-ratio: unset; display: flex; flex-direction: column; }
.sa-col-card--info.sa-col-card-wide { aspect-ratio: unset; }
.sa-col-card-top    { position: relative; overflow: hidden; background: var(--surface-hi); aspect-ratio: 4 / 3; flex-shrink: 0; }
.sa-col-card-body   { background: var(--surface); border-top: 1px solid var(--divider); padding: var(--sp-md) var(--sp-lg); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-md); }
.sa-col-card-info   { flex: 1; }
.sa-col-desc        { font-size: 0.82rem; color: var(--muted); line-height: 1.7; max-width: 52ch; }
.sa-col-meta        { display: flex; align-items: center; gap: var(--sp-md); margin-top: var(--sp-sm); }
.sa-col-count       { font-family: var(--fb); font-size: 0.68rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--divider); padding: 0.2rem 0.6rem; border-radius: 1px; }
.sa-col-media-tag   { font-family: var(--fb); font-size: 0.68rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.sa-col-cta-wrap    { flex-shrink: 0; }
.sa-col-cta         { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--fb); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bg); background: var(--accent); padding: 0.65rem 1.25rem; border-radius: 2px; white-space: nowrap; transition: background 0.2s, transform 0.15s; }
.sa-col-cta:hover   { background: var(--accent-hover); transform: translateY(-1px); }
.sa-col-canvas-label { position: absolute; top: var(--sp-md); left: var(--sp-md); font-family: var(--fb); font-size: 0.6rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(221, 216, 240, 0.5); background: rgba(8, 12, 30, 0.45); backdrop-filter: blur(6px); padding: 0.2rem 0.55rem; border-radius: 1px; }

/* ── Collection archive pages: works bar + sort ─────────── */
.sa-works-bar       { background: var(--surface); border-bottom: 1px solid var(--divider); }
.sa-works-bar-inner { max-width: var(--wrap); margin: 0 auto; padding: 0.85rem var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-lg); flex-wrap: wrap; }
.sa-works-count     { font-family: var(--fb); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.sa-works-count strong { font-weight: 500; color: var(--heading); }
.sa-works-sort      { display: flex; align-items: center; gap: 0.5rem; }
.sa-sort-label      { font-family: var(--fb); font-size: 0.68rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.sa-sort-btn        { font-family: var(--fb); font-size: 0.68rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 0.3rem 0.65rem; border-radius: 2px; border: 1px solid transparent; transition: color 0.2s, border-color 0.2s, background 0.2s; white-space: nowrap; min-height: var(--touch); }
.sa-sort-btn:hover  { color: var(--heading); border-color: var(--divider); }
.sa-sort-btn.active { color: var(--accent); border-color: rgba(0, 196, 216, 0.25); background: var(--accent-dim); }

/* ── Collection note (about this collection footer) ─────── */
.sa-collection-note       { background: var(--surface); border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); }
.sa-collection-note-inner { max-width: var(--wrap); margin: 0 auto; padding: var(--sp-2xl) var(--gutter); display: grid; grid-template-columns: 1fr; gap: var(--sp-xl); align-items: center; }
.sa-note-overline   { font-family: var(--fb); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp-sm); }
.sa-note-heading    { font-family: var(--fd); font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 300; color: var(--heading); line-height: 1.15; }
.sa-note-heading em { font-style: italic; color: var(--accent); }
.sa-note-body       { color: var(--muted); font-size: 0.92rem; line-height: 1.9; }
.sa-note-body p + p { margin-top: 1rem; }
.sa-note-line       { width: 2rem; height: 2px; background: var(--accent); margin-bottom: var(--sp-lg); }

/* ── Shop filter bar ────────────────────────────────────── */
.sa-filter-bar      { position: sticky; top: 64px; z-index: 50; background: rgba(8,12,30,0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--divider); padding: 0.875rem var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.sa-filter-tabs     { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.sa-filter-tab      { font-family: var(--fb); font-size: 0.775rem; font-weight: 400; letter-spacing: 0.05em; padding: 0.45rem 1rem; border: 1px solid var(--divider); border-radius: 1px; color: var(--muted); transition: color 0.2s, border-color 0.2s, background 0.2s; min-height: 36px; }
.sa-filter-tab[aria-pressed="true"] { color: var(--heading); border-color: rgba(221,216,240,0.3); background: rgba(221,216,240,0.05); }
.sa-filter-tab:hover { color: var(--text); border-color: rgba(221,216,240,0.2); }
.sa-filter-bar-right   { display: flex; align-items: center; gap: 1.25rem; }
.sa-works-count-label  { font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
.sa-works-count-label strong { color: var(--text); }
.sa-sort-group         { display: flex; align-items: center; gap: 0.25rem; }
.sa-works-section      { max-width: var(--wrap); margin: 0 auto; padding: var(--sp-lg) var(--gutter) var(--sp-2xl); }
@media (max-width: 600px) {
  .sa-filter-bar { flex-direction: column; align-items: flex-start; }
  .sa-filter-bar-right { width: 100%; justify-content: space-between; }
  .sa-col-card-body { flex-direction: column; align-items: flex-start; }
  .sa-collection-note-inner { grid-template-columns: 1fr; }
}
@media (min-width: 960px) {
  .sa-collection-note-inner { grid-template-columns: 1fr 1fr; }
}


/* ═══════════════════════════════════════════════════════════
   18f. PRODUCT DETAIL PAGE
   ──────────────────────────────────────────────────────────
   Two-column sticky layout: gallery left, info panel right.
   WooCommerce single product pages built with Elementor Theme
   Builder can use these classes directly.
   ═══════════════════════════════════════════════════════════ */

/* Image zoom overlay — triggered by click on main product image */
.sa-zoom-hint         { position: absolute; bottom: 0.75rem; right: 0.75rem; font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); background: rgba(8,12,30,0.7); backdrop-filter: blur(8px); border: 1px solid var(--divider); border-radius: 1px; padding: 0.2rem 0.55rem; pointer-events: none; opacity: 0; transition: opacity 0.3s; }
.sa-main-img-wrap:hover .sa-zoom-hint { opacity: 1; }
.sa-zoom-overlay      { display: none; position: fixed; inset: 0; z-index: 500; background: rgba(4,6,14,0.96); backdrop-filter: blur(8px); align-items: center; justify-content: center; cursor: zoom-out; }
.sa-zoom-overlay.open { display: flex; }
.sa-zoom-overlay img,
.sa-zoom-overlay canvas { max-width: 90vw; max-height: 90vh; width: auto; height: auto; border: 1px solid var(--divider); }
.sa-zoom-close        { position: absolute; top: 1.5rem; right: 1.5rem; background: none; border: none; color: var(--muted); font-size: 1.5rem; cursor: pointer; line-height: 1; min-width: var(--touch); min-height: var(--touch); display: flex; align-items: center; justify-content: center; transition: color 0.2s; }
.sa-zoom-close:hover  { color: var(--heading); }

/* Breadcrumb bar (product page variant — below fixed nav) */
.sa-breadcrumb-bar {
  margin-top: 64px; padding: 1rem var(--gutter);
  border-bottom: 1px solid var(--divider);
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.775rem; letter-spacing: 0.04em; color: var(--muted);
}
.sa-breadcrumb-bar a { color: var(--muted); text-decoration: none; transition: color 0.2s; }
.sa-breadcrumb-bar a:hover { color: var(--heading); }
.sa-breadcrumb-sep { opacity: 0.4; }
.sa-breadcrumb-bar .sa-current { color: var(--text); }

/* Product layout: single-column mobile, two-column desktop */
/* Product detail breadcrumb */
.sa-product-breadcrumb {
  padding: 1rem var(--gutter);
  border-bottom: 1px solid var(--divider);
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  font-size: 0.775rem; letter-spacing: 0.04em; color: var(--muted);
}
.sa-product-breadcrumb a { color: var(--muted); text-decoration: none; transition: color 0.2s; }
.sa-product-breadcrumb a:hover { color: var(--heading); }
.sa-product-breadcrumb span { opacity: 0.5; }
.sa-product-breadcrumb span:last-child { opacity: 1; color: var(--text); }

/* Main photo */
.sa-main-photo { display: block; width: 100%; height: 100%; object-fit: contain; }
.sa-no-image { width: 100%; height: 100%; background: var(--surface); }

/* Sold availability state */
.sa-avail-dot.sold { background: var(--muted); box-shadow: none; }
.sa-avail-label.sold { color: var(--muted); }

/* WooCommerce single add-to-cart overrides */
.sa-cart-actions .quantity { display: none; }
.sa-cart-actions .single_add_to_cart_button {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 0.875rem 1.5rem; border-radius: 1px; border: none;
  background: var(--accent); color: #080C1E;
  font-family: var(--fb); font-size: 0.875rem; font-weight: 500;
  letter-spacing: 0.07em; text-transform: uppercase;
  cursor: pointer; min-height: var(--touch);
  transition: opacity 0.2s; text-decoration: none;
}
.sa-cart-actions .single_add_to_cart_button:hover { opacity: 0.9; }
.sa-cart-actions .woocommerce-variation-add-to-cart { display: contents; }

.sa-product-wrap { display: grid; grid-template-columns: 1fr; align-items: start; }

/* Gallery (left on desktop) */
.sa-product-gallery { padding: var(--gutter); display: flex; flex-direction: column; gap: 1rem; }
.sa-main-img-wrap {
  position: relative; background: var(--surface);
  border: 1px solid var(--divider); border-radius: 2px; overflow: hidden;
  aspect-ratio: 4 / 5;
  width: 100%; max-width: 640px;
  cursor: zoom-in;
}
.sa-main-img-wrap img {
  display: block; width: 100%; height: 100%;
  object-fit: contain;
}
.sa-zoom-hint {
  position: absolute; bottom: 0.75rem; right: 0.75rem;
  font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); background: rgba(8,12,30,0.7); backdrop-filter: blur(8px);
  border: 1px solid var(--divider); border-radius: 1px; padding: 0.2rem 0.55rem;
  pointer-events: none; opacity: 0; transition: opacity 0.3s;
}
.sa-main-img-wrap:hover .sa-zoom-hint { opacity: 1; }

/*
 * Thumb strip — 5 across fluid, 4:5 portrait ratio, aligned to 640px image cap.
 * Mobile (<600px): 5 across still, but narrower gaps.
 */
.sa-thumb-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  width: 100%; max-width: 640px;
}
.sa-thumb-item {
  aspect-ratio: 4 / 5;
  background: var(--surface);
  border: 1px solid var(--divider); border-radius: 1px; overflow: hidden;
  cursor: pointer; transition: border-color 0.2s;
}
.sa-thumb-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sa-thumb-item.active { border-color: rgba(221,216,240,0.3); }
.sa-thumb-item:hover { border-color: rgba(221,216,240,0.2); }

/* Mobile: tighter gaps */
@media (max-width: 599px) {
  .sa-thumb-strip { gap: 5px; }
}

/* Info panel (right on desktop) */
.sa-product-info {
  padding: var(--gutter); border-top: 1px solid var(--divider);
  display: flex; flex-direction: column; gap: 1.5rem;
}
.sa-collection-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: #B8D890; border: 1px solid rgba(184,208,0,0.3);
  background: rgba(184,208,0,0.08); border-radius: 1px;
  padding: 0.2rem 0.55rem; width: fit-content; text-decoration: none;
  transition: border-color 0.2s;
}
.sa-collection-chip:hover { border-color: rgba(184,208,0,0.5); }
.sa-work-title-italic {
  font-family: var(--fd); font-style: italic;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  color: var(--heading); line-height: 1.1; letter-spacing: -0.01em;
}
.sa-work-specs {
  display: flex; flex-direction: column; gap: 0.35rem;
  padding: 1rem 0; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider);
}
.sa-spec-row { display: flex; justify-content: space-between; font-size: 0.825rem; }
.sa-spec-label { color: var(--muted); }
.sa-spec-val { color: var(--text); text-align: right; }
.sa-availability-row { display: flex; align-items: center; gap: 0.5rem; }
.sa-avail-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--emerald); box-shadow: 0 0 6px rgba(26,154,80,0.6); flex-shrink: 0;
}
.sa-avail-label { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--emerald); }
.sa-work-price { font-family: var(--fd); font-size: 2rem; color: var(--heading); font-weight: 400; line-height: 1; }
.sa-price-note { font-size: 0.75rem; color: var(--muted); margin-top: 0.3rem; }

/* Add to cart + inquire */
.sa-cart-actions { display: flex; flex-direction: column; gap: 0.65rem; }
.sa-btn-cart {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.875rem 1.5rem; border-radius: 1px; border: none;
  background: var(--accent); color: #080C1E;
  font-family: var(--fb); font-size: 0.875rem; font-weight: 500;
  letter-spacing: 0.07em; text-transform: uppercase;
  cursor: pointer; transition: opacity 0.2s, background 0.25s;
  width: 100%; min-height: var(--touch);
}
.sa-btn-cart:hover { opacity: 0.9; }
.sa-btn-cart.sa-added { background: var(--emerald); color: #fff; pointer-events: none; }
.sa-btn-inquire {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.8rem 1.5rem; border-radius: 1px;
  border: 1px solid rgba(221,216,240,0.18); background: none;
  color: var(--text); font-family: var(--fb); font-size: 0.8125rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer; width: 100%; text-decoration: none; min-height: var(--touch);
  transition: border-color 0.2s, color 0.2s;
}
.sa-btn-inquire:hover { border-color: rgba(221,216,240,0.35); color: var(--heading); }

/* Details accordion */
.sa-accordion { border-top: 1px solid var(--divider); }
.sa-accordion-item { border-bottom: 1px solid var(--divider); }
.sa-accordion-trigger {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 0; width: 100%; background: none; border: none;
  color: var(--text); font-family: var(--fb); font-size: 0.825rem;
  letter-spacing: 0.05em; text-transform: uppercase;
  cursor: pointer; min-height: var(--touch); transition: color 0.2s;
}
.sa-accordion-trigger:hover { color: var(--heading); }
.sa-accordion-icon { font-size: 1.2rem; line-height: 1; color: var(--muted); transition: transform 0.3s; }
.sa-accordion-item.open .sa-accordion-icon { transform: rotate(45deg); }
.sa-accordion-body { overflow: hidden; max-height: 0; transition: max-height 0.35s ease; }
.sa-accordion-body-inner { padding: 0 0 1.25rem; font-size: 0.85rem; color: var(--muted); line-height: 1.7; }
.sa-accordion-body-inner p + p { margin-top: 0.6rem; }

/* Share row */
.sa-share-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.sa-share-label { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.sa-share-btn {
  background: none; border: 1px solid var(--divider); border-radius: 1px;
  color: var(--muted); font-family: var(--fb); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 0.3rem 0.65rem; cursor: pointer;
  min-height: 36px; display: inline-flex; align-items: center; text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
}
.sa-share-btn:hover { color: var(--text); border-color: rgba(221,216,240,0.25); }
.sa-share-btn.copied { color: var(--emerald); border-color: rgba(26,154,80,0.4); }

/* Artist note section */
.sa-artist-note-section {
  border-top: 1px solid var(--divider);
  padding: var(--sp-2xl) var(--gutter);
  display: grid; grid-template-columns: 1fr; gap: var(--sp-2xl); align-items: start;
}
.sa-note-eyebrow { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; }
.sa-note-heading { font-family: var(--fd); font-style: italic; font-size: clamp(1.4rem, 3vw, 2.2rem); color: var(--heading); line-height: 1.2; margin-bottom: 1.5rem; }
.sa-note-body { font-size: 0.9375rem; color: var(--muted); line-height: 1.8; }
.sa-note-body p + p { margin-top: 1rem; }
.sa-note-img-wrap { aspect-ratio: 4/3; background: var(--surface); border: 1px solid var(--divider); border-radius: 2px; overflow: hidden; }
.sa-note-img-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sa-process-notes {
  display: grid; grid-template-columns: 1fr; gap: 1rem;
  margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--divider);
}
.sa-process-note-item { display: flex; flex-direction: column; gap: 0.4rem; }
.sa-process-note-label { font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.sa-process-note-val { font-size: 0.875rem; color: var(--text); }

/* Related works */
.sa-related-section { border-top: 1px solid var(--divider); padding: var(--sp-2xl) var(--gutter); }
.sa-related-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 2rem; }
.sa-related-title { font-family: var(--fd); font-style: italic; font-size: 1.5rem; color: var(--heading); }
.sa-related-link { font-size: 0.775rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); text-decoration: none; }
.sa-related-link:hover { text-decoration: underline; }
.sa-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem; }
.sa-work-card-detail {
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--divider); border-radius: 2px;
  text-decoration: none; color: inherit; overflow: hidden;
  transition: border-color 0.25s, transform 0.25s;
}
.sa-work-card-detail:hover { border-color: rgba(221,216,240,0.2); transform: translateY(-3px); }
.sa-card-img-wrap { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.sa-card-img-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sa-card-body-detail { padding: 0.875rem 1rem 1rem; }
.sa-card-title-italic { font-family: var(--fd); font-style: italic; font-size: 0.975rem; color: var(--heading); margin-bottom: 0.25rem; }
.sa-card-meta { font-size: 0.75rem; color: var(--muted); }
.sa-card-price { margin-top: 0.6rem; font-size: 0.875rem; color: var(--heading); }

/* Product detail responsive */
@media (min-width: 960px) {
  .sa-product-wrap { grid-template-columns: 1fr 420px; }
  .sa-product-gallery {
    position: sticky; top: 113px;
    padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3.5rem);
  }
  .sa-product-info {
    position: sticky; top: 113px;
    padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3.5rem);
    border-left: 1px solid var(--divider); border-top: none;
    overflow-y: auto; max-height: calc(100vh - 113px);
  }
  .sa-artist-note-section { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); }
  .sa-process-notes { grid-template-columns: repeat(3, 1fr); }
}


/* ═══════════════════════════════════════════════════════════
   20. REDUCED MOTION
   ──────────────────────────────────────────────────────────
   Respects the user's OS-level "reduce motion" preference.
   Disables all animations and transitions site-wide:
     - Header entrance animations → instant display
     - Scroll reveal transitions → elements always visible
     - Back-to-top breathing animation → static line
     - All other transitions → instant
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .js-animate .reveal, .js-animate .reveal.in {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .sa-breadcrumb, .sa-page-title, .sa-page-subtitle {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .sa-back-to-top { transition: none !important; }
  .sa-btt-line { animation: none !important; transform: scaleY(1); opacity: 1; }
  .sa-faq-body, .sa-faq-icon { transition: none !important; }
  /* Removes the 0.3s hide-delay above entirely — the wildcard's
     transition-duration:0.01ms only zeroes duration, not delay, so
     without this the hamburger would still wait 0.3s before
     disappearing even with reduced motion on. */
  .sa-nav-hamburger.open { transition: none !important; }
}


/* ═══════════════════════════════════════════════════════════
   21. RESPONSIVE — mobile first, scaling UP
   ──────────────────────────────────────────────────────────
   Base styles above are the mobile layout. These two breakpoints
   progressively enhance for larger screens.

   The --gutter token is overridden at each breakpoint, which
   automatically adjusts all padding that references it: nav,
   page header, modules, footer, mobile drawer.

   Tablet (660px+):
     - Wider gutter (--sp-lg, ~24px)
     - Taller page header (40vh)
     - Larger page title
     - Footer becomes 2-column grid

   Desktop (960px+):
     - Widest gutter (--sp-xl, ~40px)
     - Desktop nav links + CTA appear; hamburger hides
     - Tallest page header (52vh)
     - Largest page title
     - Footer becomes 4-column grid
   ═══════════════════════════════════════════════════════════ */

/* ── Tablet (660px+) ─────────────────────────────────────── */
@media (min-width: 660px) {
  :root {
    --gutter: var(--sp-lg);   /* ~24px — wider page padding */
  }

  .sa-page-header { height: 38vh; min-height: 260px; }
  .sa-page-header-content { padding: var(--sp-xl) var(--gutter); }
  .sa-page-title { font-size: clamp(2.8rem, 6.5vw, 4.5rem); }

  /* Show scroll hint on tablet and above */
  .sa-scroll-hint { display: flex; }

  /* Footer: 2 columns, brand spans full width */
  .sa-footer-inner { grid-template-columns: 1fr 1fr; }
  .sa-footer-inner > :first-child { grid-column: 1 / -1; }
}

/* ── Desktop (960px+) ────────────────────────────────────── */
@media (min-width: 960px) {
  :root {
    --gutter: var(--sp-xl);   /* ~40px — widest page padding */
  }

  /* Show desktop nav, hide hamburger */
  .sa-nav { padding: 1.25rem var(--gutter); }
  .sa-nav-links, .sa-nav-cta { display: flex; }
  .sa-nav-hamburger { display: none; }

  .sa-page-header { height: 46vh; min-height: 340px; max-height: 560px; }
  .sa-page-title { font-size: clamp(3rem, 6.5vw, 5.5rem); }

  /* Footer: full 4-column layout */
  .sa-footer-inner { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .sa-footer-inner > :first-child { grid-column: auto; }
}


/* ============================================================
   COLLECTION SUB-PAGE (Abstract Watercolor, Inks on Yupo, etc.)
   ============================================================
   Four sections, each an Elementor HTML widget:
     1. .sa-coll-header        — canvas hero + breadcrumb + title
     2. .sa-coll-works         — sort bar + WC product grid
     3. .sa-coll-note          — "About this collection" prose
     4. .sa-coll-related       — 4-card related collections strip
   ============================================================ */

/* ── 1. Page header ────────────────────────────────────────── */
.sa-coll-header {
  position: relative;
  height: 40vh; min-height: 260px; max-height: 560px;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.sa-coll-header canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.sa-coll-header::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(8,12,30,0.96) 0%,
    rgba(8,12,30,0.40) 50%,
    rgba(8,12,30,0.06) 100%);
  pointer-events: none;
}
.sa-coll-header-content {
  position: relative; z-index: 1;
  padding: 2rem 1.5rem;
}
.sa-coll-breadcrumb {
  font-family: var(--fb); font-size: 0.75rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 0.75rem;
}
.sa-coll-breadcrumb a { color: var(--muted); text-decoration: none; }
.sa-coll-breadcrumb a:hover { color: var(--heading); }
.sa-coll-breadcrumb span { margin: 0 0.4em; }
.sa-coll-h1 {
  font-family: var(--fd); font-size: clamp(2.2rem, 9vw, 3.5rem);
  font-weight: 300; color: var(--heading);
  line-height: 1.0; letter-spacing: -0.02em; margin: 0 0 0.75rem;
}
.sa-coll-h1 em { font-style: italic; color: var(--accent); }
.sa-coll-subtitle {
  font-family: var(--fb); font-size: clamp(0.85rem, 2.5vw, 1rem);
  color: var(--muted); margin: 0; max-width: 560px; line-height: 1.5;
}

/* ── 2. Works section ──────────────────────────────────────── */
.sa-coll-works {
  background: var(--bg);
  padding: 2.5rem 1.5rem 4rem;
}
.sa-coll-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
  margin: 0 auto 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--divider);
  max-width: var(--wrap);
}
.sa-coll-count {
  font-family: var(--fb); font-size: 0.8rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); margin: 0;
}
.sa-coll-sort { display: flex; gap: 0.5rem; }
.sa-coll-sort-btn {
  font-family: var(--fb); font-size: 0.75rem;
  background: none; border: 1px solid var(--divider);
  color: var(--muted); padding: 0 0.9rem;
  border-radius: 2px; cursor: pointer; min-height: 44px;
  transition: border-color 0.2s, color 0.2s;
}
.sa-coll-sort-btn:hover,
.sa-coll-sort-btn.active { border-color: var(--accent); color: var(--heading); }

.sa-coll-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 2rem; max-width: var(--wrap); margin: 0 auto;
}
.sa-coll-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--divider);
}
.sa-coll-card-img {
  position: relative; aspect-ratio: 4 / 5;
  overflow: hidden; background: var(--surface-hi);
}
.sa-coll-card-img img {
  width: 100%; height: 100%; object-fit: cover;
  display: block; transition: transform 0.4s ease;
}
.sa-coll-card:hover .sa-coll-card-img img { transform: scale(1.03); }
.sa-coll-card-badge {
  position: absolute; top: 0.75rem; left: 0.75rem;
  font-family: var(--fb); font-size: 0.65rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.25rem 0.6rem; border-radius: 1px;
}
.sa-coll-card-badge.available {
  background: rgba(8,12,30,0.75); color: var(--accent);
  border: 1px solid var(--accent);
}
.sa-coll-card-badge.sold {
  background: rgba(8,12,30,0.75); color: var(--muted);
  border: 1px solid var(--divider);
}
.sa-coll-card-body { padding: 1.1rem; display: flex; flex-direction: column; flex: 1; }
.sa-coll-card-title {
  font-family: var(--fd); font-style: italic; font-weight: 300;
  font-size: clamp(1rem, 2.5vw, 1.2rem); color: var(--heading);
  margin: 0 0 0.4rem; line-height: 1.2;
}
.sa-coll-card-meta { font-family: var(--fb); font-size: 0.75rem; color: var(--muted); margin: 0 0 1rem; }
.sa-coll-card-footer {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; flex-wrap: wrap;
}
.sa-coll-card-price { font-family: var(--fb); font-size: 1rem; color: var(--text); font-weight: 500; }
.sa-coll-card-actions { display: flex; gap: 0.5rem; }
.sa-coll-btn {
  font-family: var(--fb); font-size: 0.7rem;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  padding: 0 0.9rem; min-height: 44px;
  display: inline-flex; align-items: center;
  border-radius: 2px; cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.sa-coll-btn--view { background: transparent; border: 1px solid var(--divider); color: var(--muted); }
.sa-coll-btn--view:hover { border-color: var(--heading); color: var(--heading); }
.sa-coll-btn--cart { background: var(--accent); border: 1px solid var(--accent); color: var(--bg); }
.sa-coll-btn--cart:hover { background: var(--crimson); border-color: var(--crimson); }
.sa-coll-state {
  text-align: center; padding: 3rem 0;
  font-family: var(--fb); font-size: 0.85rem;
  color: var(--muted); grid-column: 1 / -1;
}

/* ── 3. Collection note ────────────────────────────────────── */
.sa-coll-note {
  background: var(--surface);
  border-top: 1px solid var(--divider);
  padding: 3rem 1.5rem;
}
.sa-coll-note-inner { max-width: var(--wrap); margin: 0 auto; }
.sa-coll-note-label {
  font-family: var(--fb); font-size: 0.7rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 1rem;
}
.sa-coll-note-heading {
  font-family: var(--fd); font-weight: 300;
  font-size: clamp(1.4rem, 4vw, 2rem);
  color: var(--heading); line-height: 1.1; margin: 0 0 1.5rem;
}
.sa-coll-note-heading em { font-style: italic; color: var(--accent); }
.sa-coll-note-body p {
  font-family: var(--fb); font-size: 0.95rem;
  color: var(--text); line-height: 1.75; margin: 0 0 1rem;
}
.sa-coll-note-body p:last-child { margin-bottom: 0; }

/* ── 4. Related collections ────────────────────────────────── */
.sa-coll-related {
  background: var(--bg);
  border-top: 1px solid var(--divider);
  padding: 3rem 1.5rem 4rem;
}
.sa-coll-related-inner { max-width: var(--wrap); margin: 0 auto; }
.sa-coll-related-label {
  font-family: var(--fb); font-size: 0.7rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 1.5rem;
}
.sa-coll-related-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
}
.sa-coll-rel-card {
  display: block; text-decoration: none;
  position: relative; overflow: hidden;
  aspect-ratio: 3 / 4; background: var(--surface);
}
.sa-coll-rel-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sa-coll-rel-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(8,12,30,0.88) 0%,
    rgba(8,12,30,0.15) 60%,
    transparent 100%);
  display: flex; align-items: flex-end; padding: 1rem;
  transition: background 0.3s;
}
.sa-coll-rel-card:hover .sa-coll-rel-overlay {
  background: linear-gradient(to top,
    rgba(8,12,30,0.92) 0%,
    rgba(8,12,30,0.30) 60%,
    rgba(8,12,30,0.05) 100%);
}
.sa-coll-rel-name {
  font-family: var(--fd); font-style: italic; font-weight: 300;
  font-size: clamp(0.85rem, 2.5vw, 1.1rem);
  color: var(--heading); line-height: 1.2;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (min-width: 600px) {
  .sa-coll-grid           { grid-template-columns: repeat(2, 1fr); }
  .sa-coll-related-grid   { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
  .sa-coll-related        { padding: 3.5rem 2.5rem 5rem; }
}
@media (min-width: 768px) {
  .sa-coll-header         { height: 50vh; min-height: 340px; }
  .sa-coll-header-content { padding: clamp(2.5rem, 5vw, 4rem) clamp(2.5rem, 5vw, 4rem); }
  .sa-coll-h1             { font-size: clamp(2.8rem, 6vw, 5rem); }
  .sa-coll-note-inner     { display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; align-items: start; }
  .sa-coll-note           { padding: 4rem 2.5rem; }
  .sa-coll-note-heading   { margin-bottom: 0; }
}
@media (min-width: 900px) {
  .sa-coll-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
  .sa-coll-works { padding: 3rem 2.5rem 5rem; }
}

/* ═══════════════════════════════════════════════════════════
   SHOP ARCHIVE — /shop/
   sa-shop-header, sa-shop-bar, sa-shop-section, sa-shop-card
   ═══════════════════════════════════════════════════════════ */

.sa-shop-header {
  position: relative;
  height: 40vh; min-height: 260px; max-height: 480px;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.sa-shop-header canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.sa-shop-header::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(8,12,30,0.96) 0%,
    rgba(8,12,30,0.40) 55%,
    rgba(8,12,30,0.06) 100%);
  pointer-events: none;
}
.sa-shop-header-content {
  position: relative; z-index: 1;
  padding: 2rem var(--gutter);
}
.sa-shop-breadcrumb {
  font-family: var(--fb); font-size: 0.75rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 0.75rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.sa-shop-breadcrumb a { color: var(--muted); text-decoration: none; }
.sa-shop-breadcrumb a:hover { color: var(--heading); }
.sa-shop-breadcrumb span { opacity: 0.4; }
.sa-shop-h1 {
  font-family: var(--fd); font-size: clamp(2.2rem, 5vw, 4rem);
  color: var(--heading); line-height: 1.05; letter-spacing: -0.02em;
  margin: 0 0 0.6rem;
}
.sa-shop-h1 em { font-style: italic; }
.sa-shop-subtitle { font-size: 0.9rem; color: var(--muted); margin: 0; }

/* Sticky filter + sort bar */
.sa-shop-bar {
  position: sticky; top: 64px; z-index: 50;
  background: rgba(8,12,30,0.94); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--divider);
  padding: 0.75rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.sa-shop-filter-tabs {
  display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap;
}
.sa-shop-filter-tab {
  font-family: var(--fb); font-size: 0.775rem;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted); background: none;
  border: 1px solid transparent; border-radius: 1px;
  padding: 0.3rem 0.75rem; cursor: pointer; min-height: 36px;
  transition: color 0.2s, border-color 0.2s;
}
.sa-shop-filter-tab:hover { color: var(--heading); }
.sa-shop-filter-tab.active {
  color: var(--heading); border-color: rgba(221,216,240,0.2);
  background: rgba(221,216,240,0.04);
}
.sa-shop-bar-right {
  display: flex; align-items: center; gap: 1.25rem; flex-shrink: 0;
}
.sa-shop-count {
  font-size: 0.775rem; color: var(--muted); white-space: nowrap;
}
.sa-shop-sort { display: flex; align-items: center; gap: 0.35rem; }
.sa-shop-sort-label {
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}
.sa-shop-sort-btn {
  font-family: var(--fb); font-size: 0.72rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); background: none;
  border: 1px solid transparent; border-radius: 1px;
  padding: 0.25rem 0.6rem; cursor: pointer; min-height: 32px;
  transition: color 0.2s, border-color 0.2s;
}
.sa-shop-sort-btn:hover { color: var(--heading); }
.sa-shop-sort-btn.active {
  color: var(--heading); border-color: rgba(221,216,240,0.2);
}

/* Works section + grid */
.sa-shop-section { padding: var(--gutter); }
.sa-shop-state { color: var(--muted); font-size: 0.9rem; padding: 3rem 0; }
.sa-shop-empty { color: var(--muted); font-size: 0.9rem; padding: 3rem 0; }
.sa-shop-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--divider);
  border: 1px solid var(--divider);
}

/* Shop card */
.sa-shop-card {
  display: flex; flex-direction: column;
  background: var(--bg); text-decoration: none; color: inherit;
  transition: background 0.2s;
}
.sa-shop-card:hover { background: var(--surface); }
.sa-shop-card-img {
  position: relative; aspect-ratio: 4/3; overflow: hidden;
  background: var(--surface);
}
.sa-shop-card-img img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s ease;
}
.sa-shop-card:hover .sa-shop-card-img img { transform: scale(1.03); }
.sa-shop-card-badge {
  position: absolute; top: 0.75rem; right: 0.75rem;
  font-family: var(--fb); font-size: 0.6rem; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 0.2rem 0.5rem; border-radius: 1px;
}
.sa-shop-card-badge.available {
  background: rgba(26,154,80,0.18); color: var(--emerald);
  border: 1px solid rgba(26,154,80,0.3);
}
.sa-shop-card-badge.sold {
  background: rgba(221,216,240,0.06); color: var(--muted);
  border: 1px solid var(--divider);
}
.sa-shop-card-body {
  padding: 1rem 1.25rem 1.25rem;
  display: flex; flex-direction: column; gap: 0.35rem;
  border-top: 1px solid var(--divider);
}
.sa-shop-card-cat {
  font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent);
}
.sa-shop-card-title {
  font-family: var(--fd); font-style: italic;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--heading); line-height: 1.2;
}
.sa-shop-card-meta { font-size: 0.775rem; color: var(--muted); }
.sa-shop-card-footer {
  margin-top: 0.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
}
.sa-shop-card-price {
  font-family: var(--fd); font-size: 1.1rem; color: var(--heading);
}
.sa-shop-card-price.sold { font-family: var(--fb); font-size: 0.8rem; color: var(--muted); }
.sa-shop-card-view {
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--divider);
  padding-bottom: 1px; transition: color 0.2s, border-color 0.2s;
}
.sa-shop-card:hover .sa-shop-card-view { color: var(--heading); border-color: var(--heading); }

/* Responsive */
@media (min-width: 600px) {
  .sa-shop-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
  .sa-shop-grid { grid-template-columns: repeat(4, 1fr); }
  .sa-shop-header { height: 50vh; min-height: 340px; }
  .sa-shop-header-content { padding: clamp(2.5rem,5vw,4rem) clamp(2.5rem,5vw,4rem); }
  .sa-shop-h1 { font-size: clamp(2.8rem, 5vw, 4.5rem); }
}
@media (max-width: 600px) {
  .sa-shop-bar { flex-direction: column; align-items: flex-start; }
  .sa-shop-bar-right { width: 100%; justify-content: space-between; }
}

/* Elementor contact form — error state */
.elementor-message.elementor-message-danger {
  border-color: var(--accent);
  color: var(--text);
  background: rgba(0, 207, 193, 0.08);
}