/*
Theme Name: Wools by Jools
Theme URI: https://woolsbyjools.co.uk
Author: Coleman Technical
Author URI: https://colemantechnical.co.uk
Description: Standalone classic theme for the Wools by Jools needle-felt shop. Ports the approved FastAPI/Jinja gallery design (warm cream, Cormorant display over Lato body, brand teal) into WordPress + WooCommerce.
Version: 1.0.5
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
WC requires at least: 8.0
WC tested up to: 11.1
Text Domain: wools-by-jools
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ============================================================
   Wools by Jools — Stylesheet
   Ported verbatim from legacy-fastapi/app/static/css/style.css
   (the approved, never-deployed reskin). Warm cream, soft botanical,
   Cormorant display over Lato body. Brand teal from the original identity.

   Section map:
     1. Brand tokens (:root)
     2. Reset & base
     3. Shared display / ornament primitives
     4. Header & nav
     5. Sections (generic band backgrounds)
     6. Hero
     7. Buttons
     8. Category cards (homepage)
     9. About strip
    10. Feature bands
    11. Why choose (reasons grid)
    12. Instagram strip
    13. CTA banner
    14. Gallery grid + price badges
    15. Pricing guide (About page)
    16. Content pages (About / Commissions layout helpers)
    17. How it works (steps)
    18. Callout box
    19. Contact form
    20. Instagram link
    21. Trust row
    22. Footer
    23. Cookie banner
    24. Lightbox
    25. Privacy page
    26. WordPress core + accessibility helpers
    27. Scroll reveal (.wbj-reveal)
    28. Nav: SHOP prominence + cart link
    29. Image placeholders (customizer images not yet set)
    30. SHARED PRIMITIVES for other theme areas (shop / WooCommerce templates)
    31. Responsive
   ============================================================ */

/* --- 1. Brand tokens ---
   Lifted verbatim from app/config.py's SITE dict and base.html's inline
   :root block. WordPress has no template context here, so these are
   literal values, not Jinja placeholders. Do not invent new values —
   SPEC.md §2 is the source of truth. */
:root {
    --brand:       #2BBCB3;   /* bright teal — accents, rules, hovers */
    --brand-dark:  #1E8A83;   /* hover states */
    --brand-deep:  #3E8A85;   /* display headings, primary buttons */

    --cream:      #FBF7F0;   /* page ground */
    --cream-alt:  #F5EFE4;   /* alternating band */
    --warm:       #EFE7D9;   /* about strip */
    --ink:        #3D3532;
    --ink-soft:   #6E6560;
    --muted:      #8A817A;
    --line:       #E5DBCB;
    --line-soft:  #EFE7DA;

    /* Rounded corners, site-wide (decision D13). -sm for buttons, inputs and
       small badges; the full radius for cards, panels and images. */
    --radius-sm:  10px;
    --radius:     16px;

    /* The page's outer bound. Copy already sits in a 1140px .container; this is what the
       full-bleed picture bands stop at, so a photo cannot out-weigh the copy on a wide
       monitor. Raise it or drop the max-width lines to put them back to full screen. */
    --page-max:   1500px;

    --font:         "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --font-script:  "Dancing Script", "Segoe Script", cursive;
}

/* --- 2. Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font);
    font-weight: 400;
    background: var(--cream);
    color: var(--ink);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: var(--brand-deep);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover { color: var(--brand); }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.2;
    color: var(--ink);
    letter-spacing: 0.01em;
}

h1 { font-size: clamp(2rem, 4vw, 2.9rem); margin-bottom: 1rem; }
h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 0.7rem; }
h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }

p { margin-bottom: 1rem; }

.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- 3. Shared display / ornament primitives --- */
.display {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--ink);
}

.display em {
    font-style: italic;
    color: var(--brand-deep);
}

.eyebrow {
    font-family: var(--font);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
}

.script-accent {
    font-family: var(--font-script);
    font-size: 1.35rem;
    color: var(--brand-deep);
    line-height: 1.4;
    margin-bottom: 6px;
}

.script-accent--large { font-size: 1.7rem; margin: 18px 0 22px; }

/* Short rule with a heart in the middle, used under section titles. */
.ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 14px 0 0;
}

.ornament::before,
.ornament::after {
    content: '';
    width: 34px;
    height: 1px;
    background: var(--line);
}

.ornament span {
    color: var(--brand);
    font-size: 0.8rem;
    line-height: 1;
}

/* Under an eyebrow label the heart stands alone, no flanking rules. */
.ornament--small { justify-content: center; margin: 6px 0 16px; }
.ornament--small::before,
.ornament--small::after { display: none; }
.ornament--small span { font-size: 1.3rem; }

/* Section title in letterspaced caps, flanked by a leaf sprig. */
.flourish-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 18px;
    margin: 0;
}

.flourish-title::before,
.flourish-title::after {
    content: '';
    width: 42px;
    height: 16px;
    flex: none;
    opacity: 0.75;
    background: no-repeat center / contain
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 16' fill='none' stroke='%233E8A85' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M2 8h22'/%3E%3Cpath d='M24 8c0-3.2 2.2-5.4 5.4-5.4C29.4 5.8 27.2 8 24 8z'/%3E%3Cpath d='M24 8c0 3.2 2.2 5.4 5.4 5.4C29.4 10.2 27.2 8 24 8z'/%3E%3C/svg%3E");
}

.flourish-title::before { transform: scaleX(-1); }

.section-head {
    text-align: center;
    margin-bottom: 44px;
}

/* --- Page-top woodland band (D25) ---
   A soft woodland picture behind the top of every inner page, fading into the
   page ground, so a page no longer opens on a plain heading on cream. It sits
   BEHIND the content rather than being a block of its own, so nothing moves
   down the page and no template or page content had to change: the breadcrumb,
   title and jump row simply sit over it. Not on the homepage, which has its
   hero, and not on product, basket, checkout or account pages, which should
   start with the thing the customer came for.
   The picture is atmosphere only, no figures, so it never competes with
   Julie's real pieces. Its bottom edge is #FAF6EF against the #FBF7F0 ground,
   so the mask fades it out rather than relying on the colours matching. */
body:not(.home):not(.single-product):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .site-main {
    position: relative;
    isolation: isolate;
}

body:not(.home):not(.single-product):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .site-main::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 380px;
    z-index: -1;
    pointer-events: none;
    /* The cream wash softens the felt picture, which is busier and darker than
       the page copy can sit on comfortably at full strength. */
    background:
        linear-gradient(rgba(251, 247, 240, 0.35), rgba(251, 247, 240, 0.35)),
        url("assets/images/page-top-felt.webp") center top / cover no-repeat;
    -webkit-mask-image: linear-gradient(#000 60%, transparent);
    mask-image: linear-gradient(#000 60%, transparent);
}

/* The leaves hang right where the title sits, so the first heading, and the
   intro paragraph straight under it on About, Commissions, Contact and Pet
   Portraits, get a soft cream glow to lift them off. No box, and nothing
   visible on plain cream. */
body:not(.home):not(.single-product):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .site-main h1,
body:not(.home):not(.single-product):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .site-main > section:first-child h1 + p,
body:not(.home):not(.single-product):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .wbj-shop-intro p {
    text-shadow: 0 0 14px rgba(251, 247, 240, 0.95), 0 0 28px rgba(251, 247, 240, 0.8);
}

@media (max-width: 768px) {
    body:not(.home):not(.single-product):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .site-main::before {
        height: 260px;
        background-image:
            linear-gradient(rgba(251, 247, 240, 0.35), rgba(251, 247, 240, 0.35)),
            url("assets/images/page-top-felt-1000.webp");
    }
}

/* --- 4. Header & nav --- */
.site-header {
    background: rgba(251, 247, 240, 0.94);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--line-soft);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 12px;
}

.logo-img {
    height: 76px;
    width: auto;
    object-fit: contain;
}

.logo-text {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.6rem;
    color: var(--brand-deep);
    letter-spacing: 0.02em;
    /* One line, always. Allowed to wrap, the name went to "Wools / by / Jools"
       and took the sticky header to 151px on a phone, which put every /shop/
       anchor heading underneath it (D23). */
    white-space: nowrap;
}

.logo-tagline {
    font-size: 0.68rem;
    color: var(--muted);
    font-weight: 400;
    letter-spacing: 0.04em;
    max-width: 170px;
    line-height: 1.5;
}

.main-nav .nav-list {
    display: flex;
    list-style: none;
    align-items: center;
    gap: 4px;
}

.nav-link {
    display: block;
    padding: 10px 14px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
    text-decoration: none;
    position: relative;
    transition: color 0.2s;
    white-space: nowrap;
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 4px;
    height: 1px;
    background: var(--brand);
    transform: scaleX(0);
    transition: transform 0.25s;
}

.nav-link:hover { color: var(--brand-deep); }
.nav-link:hover::after,
.nav-list .current-menu-item .nav-link::after,
.nav-list .current_page_item .nav-link::after { transform: scaleX(1); }
.nav-list .current-menu-item .nav-link,
.nav-list .current_page_item .nav-link { color: var(--brand-deep); }

.mobile-toggle {
    display: none;
    background: none;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 1.4rem;
    padding: 4px 12px;
    cursor: pointer;
    color: var(--brand-deep);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* --- 5. Sections --- */
.section { padding: 84px 0; }

.section--cream { background: var(--cream-alt); }
.section--alt   { background: #fff; }

.section--brand {
    background: var(--brand-deep);
    color: #fff;
}

.section--brand h2,
.section--brand h3,
.section--brand p { color: #fff; }

.section--brand a { color: #fff; text-decoration: underline; }

/* Inner-page headers keep the centred title + ornament rhythm. */
.section-header {
    text-align: center;
    margin-bottom: 44px;
}

.section-header h1,
.section-header h2 { margin-bottom: 0; }

.section-header h2::after,
.section-header h1::after {
    content: '';
    display: block;
    width: 46px;
    height: 1px;
    background: var(--brand);
    margin: 16px auto 0;
}

.section-header p {
    color: var(--ink-soft);
    font-size: 1.02rem;
    max-width: 620px;
    margin: 16px auto 0;
}

/* --- 6. Hero --- */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(470px, 66vh, 640px);
    overflow: hidden;
    background: var(--cream);
}

.hero-media {
    position: absolute;
    inset: -3%;
    /* Wide plate: the photo (theme default assets/images/hero-fairy-woodland.webp,
       swappable in the Customizer) sits full-height, anchored right so the
       fairy stays in frame as the screen narrows. */
    background: var(--cream) no-repeat center right / cover;
}

.hero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    /* The wash: a subject-free corner of the same photo, stretched and washed
       to cream on the left so the headline has somewhere quiet to sit. This
       is pure CSS gradient over the hero photo, not a second image — keep it. */
    background: linear-gradient(100deg,
        rgba(251,247,240,0.72) 0%,
        rgba(251,247,240,0.58) 34%,
        rgba(251,247,240,0.28) 54%,
        rgba(251,247,240,0.06) 74%,
        rgba(251,247,240,0) 100%);
}

.hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
}

.hero-text {
    max-width: 460px;
    text-align: center;
}

.hero-wordmark {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2.6rem, 6.4vw, 4.4rem);
    line-height: 0.98;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--brand-deep);
    margin: 4px 0 0;
}

.hero-wordmark span { display: block; }

.hero-wordmark em {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: 0.34em;
    font-style: italic;
    text-transform: lowercase;
    letter-spacing: 0.02em;
    color: var(--brand-deep);
    margin: 2px 0;
}

.hero-wordmark em::before,
.hero-wordmark em::after {
    content: '';
    width: 42px;
    height: 1px;
    background: currentColor;
    opacity: 0.4;
}

.hero-tagline {
    color: var(--ink-soft);
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    margin: 18px 0 26px;
}

.hero-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* --- 7. Buttons --- */
.btn {
    display: inline-block;
    padding: 15px 30px;
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s;
    cursor: pointer;
    border: 1px solid transparent;
    line-height: 1.4;
}

.btn--sm { padding: 12px 24px; font-size: 0.7rem; }

.btn--primary {
    background: var(--brand-deep);
    color: #fff;
}

.btn--primary:hover {
    background: var(--ink);
    color: #fff;
    transform: translateY(-1px);
}

.btn--outline {
    background: transparent;
    color: var(--brand-deep);
    border-color: var(--brand-deep);
}

.btn--outline:hover {
    background: var(--brand-deep);
    color: #fff;
    transform: translateY(-1px);
}

.btn--white {
    background: #fff;
    color: var(--brand-deep);
}

.btn--white:hover { background: var(--cream-alt); color: var(--brand-deep); }

.btn--pill {
    background: transparent;
    color: var(--brand-deep);
    border-color: var(--brand-deep);
    border-radius: 999px;
    letter-spacing: 0.18em;
}

.btn--pill:hover { background: var(--brand-deep); color: #fff; }

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
}

/* --- 8. Category cards (homepage, driven live by product_cat) --- */
.cat-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    max-width: 880px;
    margin: 0 auto;
}

.cat-card {
    display: block;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.cat-card:hover {
    transform: translateY(-4px);
    border-color: var(--brand);
    box-shadow: 0 14px 30px rgba(61,53,50,0.09);
    color: inherit;
}

.cat-card-img {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--cream-alt);
}

.cat-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.cat-card:hover .cat-card-img img { transform: scale(1.04); }

.cat-card-body {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 10px;
    text-align: center;
}

.cat-card-label {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--ink);
    line-height: 1.35;
}

.cat-icon {
    width: 19px;
    height: 19px;
    flex: none;
    fill: none;
    stroke: var(--brand);
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- 8b. Showcase strip (full width, homepage) --- */
.showcase-strip {
    max-width: var(--page-max);
    margin: 0 auto;
    background: var(--cream);
}

.showcase-strip img {
    display: block;
    width: 100%;
    height: auto;
}

/* --- 9. About strip --- */
.about-strip {
    background: var(--warm);
    padding: 74px 0;
    position: relative;
    overflow: hidden;
}

/* Faint botanical watermark on the right, same sprig as the section titles. */
.about-strip::after {
    content: '';
    position: absolute;
    right: -30px;
    top: 50%;
    transform: translateY(-50%);
    width: 260px;
    height: 260px;
    opacity: 0.13;
    background: no-repeat center / contain
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%233E8A85' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M50 96C50 60 56 30 78 8'/%3E%3Cpath d='M60 66c8-10 20-12 30-8-6 10-18 14-30 8z'/%3E%3Cpath d='M56 46c-10-8-12-20-8-30 10 6 14 18 8 30z'/%3E%3Cpath d='M66 30c8-8 20-9 29-4-7 9-19 12-29 4z'/%3E%3Cpath d='M52 72c-10-6-22-4-30 4 9 7 21 7 30-4z'/%3E%3C/svg%3E");
    pointer-events: none;
}

.about-inner {
    display: flex;
    align-items: center;
    gap: 56px;
    position: relative;
    z-index: 1;
}

.about-photo { flex: 0 0 300px; }

.about-photo img {
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 50%;
    border: 6px solid rgba(255,255,255,0.75);
    box-shadow: 0 10px 30px rgba(61,53,50,0.12);
}

.about-text { flex: 1; }

.about-text h2 {
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    margin-bottom: 18px;
}

.about-text p { color: var(--ink-soft); max-width: 560px; }

/* --- 10. Feature bands (Meet the Fairies / Commissions) --- */
.feature-band {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    background: var(--cream);
}

.feature-band--reverse .feature-band-media { order: 2; }

.feature-band-media { overflow: hidden; min-height: 380px; background: var(--cream-alt); }

.feature-band-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feature-band-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 72px clamp(28px, 5vw, 76px);
}

.feature-band-text h2 {
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    margin-bottom: 14px;
}

.feature-band-text p {
    color: var(--ink-soft);
    max-width: 460px;
    margin-bottom: 26px;
}

.feature-band-text .btn { align-self: flex-start; }

/* --- 10b. Photo bands (full width, copy over the photo) --- */
.photo-band {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(300px, 27vw, 398px);
    max-width: var(--page-max);
    margin: 0 auto;
    overflow: hidden;
    background: var(--cream);
}

.photo-band-media {
    position: absolute;
    inset: 0;
    /* Photo runs the full width of the site, anchored right so all three fairies stay
       in frame as the screen narrows. Default assets/images/band-fairies-hanging.webp,
       swappable in the Customizer like every other homepage photo. */
    background: var(--cream) no-repeat center right / cover;
}

.photo-band-media::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Cream wash on the left so the copy has somewhere quiet to sit, the same trick as
       the hero. The photo's own left side is near-empty bokeh already, so this only has
       to lift it, not hide it. */
    background: linear-gradient(95deg,
        rgba(251,247,240,0.90) 0%,
        rgba(251,247,240,0.78) 28%,
        rgba(251,247,240,0.40) 48%,
        rgba(251,247,240,0.06) 68%,
        rgba(251,247,240,0) 100%);
}

.photo-band--tall { min-height: clamp(360px, 45vw, 680px); }

/* Mirrored band: photo anchored left, wash and copy on the right, so consecutive bands
   alternate instead of both piling their weight on the same side. */
.photo-band--reverse .photo-band-media { background-position: center left; }

.photo-band--reverse .photo-band-media::after {
    background: linear-gradient(265deg,
        rgba(251,247,240,0.90) 0%,
        rgba(251,247,240,0.78) 28%,
        rgba(251,247,240,0.40) 48%,
        rgba(251,247,240,0.06) 68%,
        rgba(251,247,240,0) 100%);
}

.photo-band--reverse .photo-band-text { margin-left: auto; }

.photo-band-inner {
    position: relative;
    z-index: 1;
    width: 100%;
}

.photo-band-text {
    max-width: 430px;
    text-align: center;
}

.photo-band-text h2 {
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    margin-bottom: 14px;
}

.photo-band-text p {
    color: var(--ink-soft);
    margin-bottom: 26px;
}

/* --- 11. Why choose --- */
.reasons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.reason {
    text-align: center;
    padding: 8px 26px;
    border-left: 1px solid var(--line);
}

.reason:first-child { border-left: none; }

.reason-icon {
    width: 34px;
    height: 34px;
    margin: 0 auto 16px;
    fill: none;
    stroke: var(--brand);
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.reason h3 {
    font-size: 1.05rem;
    letter-spacing: 0.03em;
    margin-bottom: 8px;
}

.reason p {
    font-size: 0.86rem;
    color: var(--ink-soft);
    line-height: 1.7;
    margin-bottom: 0;
}

/* --- 12. Instagram strip --- */
.social-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.social-grid a {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius-sm);
    position: relative;
    background: var(--cream-alt);
}

.social-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s, filter 0.3s;
}

.social-grid a:hover img { transform: scale(1.06); filter: brightness(1.05); }

.social-cta { text-align: center; margin-top: 30px; }

/* --- 13. CTA Banner (gallery + inner pages) --- */
.cta-banner {
    text-align: center;
    padding: 60px 28px;
    border-radius: var(--radius);
    background: var(--brand-deep);
    color: #fff;
    max-width: 860px;
    margin: 0 auto;
}

.cta-banner h2 { color: #fff; margin-bottom: 14px; }

.cta-banner p {
    font-size: 1rem;
    opacity: 0.92;
    margin-bottom: 26px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

/* --- 14. Gallery (still used by ported content pages, e.g. Commissions paintings) --- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px 22px;
    align-items: start;
}

/* Two across, for wide photos like Julie's stall on the About page. Drops to one
   column on a phone through the .gallery-grid rule in the 480px block, which
   comes later in the file. */
.gallery-grid--two { grid-template-columns: repeat(2, 1fr); }

.gallery-item {
    display: block;
    width: 100%;
    cursor: pointer;
    position: relative;
    transition: transform 0.3s, box-shadow 0.3s;
}

.gallery-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(61,53,50,0.14);
}

.gallery-item img {
    width: 100%;
    display: block;
    border-radius: var(--radius);
    background: var(--cream-alt);
    min-height: 180px;
}

.gallery-price {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(61, 53, 50, 0.85);
    color: #fff;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    backdrop-filter: blur(4px);
    line-height: 1.5;
}

.gallery-category-price {
    display: inline-block;
    font-family: var(--font);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand-deep);
    margin-left: 12px;
    vertical-align: middle;
}

/* --- 15. Pricing Guide (About page) --- */
.pricing-guide {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 24px;
}

.pricing-group {
    background: #fff;
    border-radius: var(--radius);
    padding: 26px;
    border: 1px solid var(--line-soft);
}

.pricing-group h3 {
    color: var(--brand-deep);
    font-size: 1.15rem;
    margin-bottom: 14px;
}

.pricing-group ul { list-style: none; margin: 0; padding: 0; }

.pricing-group li {
    display: flex;
    justify-content: space-between;
    padding: 7px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 0.92rem;
}

.pricing-group li:last-child { border-bottom: none; }

.pricing-group .price {
    font-weight: 700;
    color: var(--brand-deep);
    white-space: nowrap;
    margin-left: 12px;
}

.pricing-note {
    margin-top: 16px;
    padding: 22px 26px;
    background: #fff;
    border-radius: var(--radius);
    border-left: 2px solid var(--brand);
    font-size: 0.92rem;
    color: var(--ink-soft);
}

/* --- 16. About / Content Pages --- */
.content-with-image {
    display: flex;
    align-items: flex-start;
    gap: 52px;
}

.content-with-image--reverse { flex-direction: row-reverse; }

.content-text { flex: 1; }

.content-image { flex: 0 0 360px; }

.content-image img {
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(61,53,50,0.1);
}

/* --- 17. How It Works (Commissions) --- */
.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 32px;
}

.step {
    text-align: center;
    padding: 34px 26px;
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid var(--line-soft);
    transition: border-color 0.3s;
}

.step:hover { border-color: var(--brand); }

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: var(--brand-deep);
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    border-radius: 50%;
    margin-bottom: 16px;
}

.step h3 { color: var(--brand-deep); margin-bottom: 8px; }

.step p { font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 0; }

/* --- 18. Callout Box --- */
.callout {
    background: #fff;
    border: 1px solid var(--line);
    border-left: 2px solid var(--brand);
    border-radius: var(--radius);
    padding: 32px;
    margin: 32px 0;
}

.callout h3 { color: var(--brand-deep); }

/* --- 19. Contact Form --- */
.contact-form { max-width: 560px; }

.form-group { margin-bottom: 20px; }

.form-group label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 8px;
    color: var(--ink-soft);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 1rem;
    color: var(--ink);
    background: #fff;
    transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--brand);
}

.form-group textarea { min-height: 150px; resize: vertical; }

.form-status { display: none; margin-bottom: 16px; padding: 12px 16px; border-radius: var(--radius-sm); font-size: 0.9rem; }
.form-status.success { display: block; background: rgba(43,188,179,0.12); color: var(--brand-dark); border: 1px solid var(--brand); }
.form-status.error { display: block; background: rgba(200,80,60,0.08); color: #a5432c; border: 1px solid #d99b8a; }

.contact-info {
    margin-top: 40px;
    padding: 28px;
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid var(--line-soft);
}

.contact-info p { margin-bottom: 8px; }
.contact-info a { font-weight: 700; }

/* --- 20. Instagram link --- */
.instagram-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-deep);
    transition: color 0.2s;
}

.instagram-link:hover { color: var(--brand); }

.instagram-link svg { width: 18px; height: 18px; }

/* --- 21. Trust row --- */
.trust-row {
    background: var(--cream);
    border-top: 1px solid var(--line-soft);
    padding: 34px 0;
}

.trust-items {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 52px;
}

.trust-items li {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 0.82rem;
    color: var(--ink-soft);
    letter-spacing: 0.03em;
}

.trust-items svg {
    width: 21px;
    height: 21px;
    flex: none;
    fill: none;
    stroke: var(--brand);
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- 22. Footer --- */
.site-footer {
    background: var(--cream-alt);
    color: var(--ink-soft);
    border-top: 1px solid var(--line-soft);
    padding: 56px 0 0;
}

.footer-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px 44px;
    display: grid;
    grid-template-columns: 1.3fr 1fr 1.2fr;
    gap: 44px;
}

.footer-col h3 {
    color: var(--ink);
    font-size: 0.78rem;
    font-family: var(--font);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.footer-col p { font-size: 0.86rem; line-height: 1.75; }

.footer-col ul { list-style: none; }

.footer-col ul li { margin-bottom: 9px; }

.footer-col a {
    color: var(--ink-soft);
    font-size: 0.86rem;
    transition: color 0.2s;
}

.footer-col a:hover { color: var(--brand-deep); }

.footer-instagram {
    display: inline-block;
    margin-top: 14px;
    color: var(--brand-deep) !important;
    font-weight: 700;
    font-size: 0.76rem !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.footer-email { margin-top: 12px; }

.footer-email a { font-weight: 700; color: var(--brand-deep); }

.footer-bottom {
    background: var(--brand-deep);
    padding: 16px 24px;
    text-align: center;
}

.footer-bottom p {
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    margin: 0;
    color: rgba(255,255,255,0.85);
}

/* --- 23. Cookie Banner --- */
.cookie-banner {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--ink);
    color: #fff;
    z-index: 1000;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.15);
}

.cookie-banner-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cookie-banner p { font-size: 0.82rem; margin: 0; }

.cookie-banner a { color: var(--brand); }

.cookie-dismiss {
    background: var(--brand);
    color: #fff;
    border: none;
    padding: 9px 26px;
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
}

/* --- 24. Lightbox --- */
.lightbox-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(45,39,37,0.96);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.lightbox-overlay.active { display: flex; }

.lightbox-overlay img {
    max-width: 90vw;
    max-height: 80vh;
    border-radius: var(--radius);
    box-shadow: 0 16px 48px rgba(0,0,0,0.45);
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    position: absolute;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 2.5rem;
    padding: 12px;
    z-index: 2001;
    transition: color 0.2s;
    line-height: 1;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover { color: var(--brand); }

.lightbox-close { top: 16px; right: 24px; font-size: 3rem; }

.lightbox-prev {
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 3.5rem;
}

.lightbox-next {
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 3.5rem;
}

.lightbox-caption {
    color: #d5cec8;
    font-size: 0.92rem;
    margin-top: 18px;
    text-align: center;
    max-width: 80vw;
}

/* --- 25. Privacy Page --- */
.privacy-content h2 {
    font-size: 1.4rem;
    margin-top: 34px;
    margin-bottom: 12px;
}

.privacy-content ul { margin-left: 24px; margin-bottom: 16px; }

.privacy-content li { margin-bottom: 4px; }

/* --- 26. WordPress core + accessibility helpers ---
   Standard WP convention: visually hidden but available to assistive tech.
   Used by searchform.php's label and anywhere else core markup expects it. */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.alignleft { float: left; margin: 0 24px 16px 0; }
.alignright { float: right; margin: 0 0 16px 24px; }
.aligncenter { display: block; margin: 0 auto 16px; }

/* --- 27. Scroll reveal (progressive enhancement, see inc/reveal.php) ---
   Same pattern as Custom Canine's .cc-reveal/.cc-in. Content is visible by
   default (.no-js and no-IO-support paths never hide anything) and only
   animates in once functions.php confirms JS + IntersectionObserver work. */
.js .wbj-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.js .wbj-reveal.wbj-in {
    opacity: 1;
    transform: none;
}

/* --- 28. Nav: SHOP prominence + cart link ---
   Julie's brief calls for SHOP to stand out from the rest of the nav. The
   class is applied in inc/nav-helpers.php to whichever menu item is titled
   "Shop" (case-insensitive), so it works with the fallback menu and with
   whatever Dave sets up in Appearance > Menus. */
.nav-link.wbj-nav-shop {
    background: var(--brand-deep);
    color: #fff;
    border-radius: 999px;
    padding: 10px 20px;
}

.nav-link.wbj-nav-shop:hover { background: var(--ink); color: #fff; }
.nav-link.wbj-nav-shop::after { display: none; }

.wbj-cart-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--brand-deep);
    flex: none;
    transition: border-color 0.2s, color 0.2s;
}

.wbj-cart-link:hover { border-color: var(--brand); color: var(--brand); }

.wbj-cart-link svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wbj-cart-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

.wbj-cart-count[data-count="0"] { display: none; }

/* --- 29. Image placeholders ---
   Homepage photography ships as theme defaults in assets/images/ and can be
   swapped through the Customizer image controls (inc/customizer.php). This
   placeholder only shows if a default file is ever missing. */
.wbj-img-placeholder {
    width: 100%;
    height: 100%;
    min-height: 180px;
    background: var(--cream-alt);
    border: 1px dashed transparent; /* structural only, no dashed border shown */
    position: relative;
}

.wbj-img-placeholder::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 34px;
    height: 34px;
    background: no-repeat center / contain
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A817A' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M20 4c0 8-4.5 13-9.5 13A5.5 5.5 0 0 1 5 11.5C5 6.8 12 4 20 4z'/%3E%3Cpath d='M4 21c1.8-4.5 4.6-7.7 8-9.5'/%3E%3C/svg%3E");
    opacity: 0.5;
}

/* ============================================================
   30. SHARED PRIMITIVES — for reuse across the rest of the theme
   ============================================================
   These give the WooCommerce templates (owned separately, in
   woocommerce/) a documented set of building blocks that already carry the
   brand tokens, hairline borders and rounded corners, without needing to depend
   on homepage-specific class names like .cat-card or .feature-band. Each is
   additive: it does not change how the existing ported classes behave.
   Rule: hairline borders (1px, var(--line) / var(--line-soft)) and rounded
   corners from --radius-sm / --radius. Decision D13 (2026-09-10) replaced the
   earlier 2-3px rule. NEVER dashed borders.
   ------------------------------------------------------------ */

/* .wbj-container — alias of .container: 1140px max width, 24px side padding.
   Use on any full-width band that needs the same content measure as the
   rest of the site (archive headers, checkout, etc). */
.wbj-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

/* .wbj-section / .wbj-section--cream / .wbj-section--alt / .wbj-section--brand
   — alias of .section and its background modifiers. Use for any new
   full-width band (e.g. the shop archive header, cart/checkout wrappers). */
.wbj-section { padding: 84px 0; }
.wbj-section--cream { background: var(--cream-alt); }
.wbj-section--alt   { background: #fff; }
.wbj-section--brand { background: var(--brand-deep); color: #fff; }
.wbj-section--brand h2,
.wbj-section--brand h3,
.wbj-section--brand p { color: #fff; }

/* .wbj-eyebrow — alias of .eyebrow: small letterspaced uppercase label used
   above a heading (e.g. "New in" above a shop section title). */
.wbj-eyebrow {
    font-family: var(--font);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
}

/* .wbj-btn / .wbj-btn-primary / .wbj-btn-ghost — same button as .btn /
   .btn--primary / .btn--outline, under names that don't imply "homepage
   hero button". Use these on product pages, cart, checkout, Add to Cart. */
.wbj-btn,
.btn {
    display: inline-block;
    padding: 15px 30px;
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s;
    cursor: pointer;
    border: 1px solid transparent;
    line-height: 1.4;
}

.wbj-btn-primary,
.btn--primary {
    background: var(--brand-deep);
    color: #fff;
}

.wbj-btn-primary:hover,
.btn--primary:hover {
    background: var(--ink);
    color: #fff;
    transform: translateY(-1px);
}

.wbj-btn-ghost,
.btn--outline {
    background: transparent;
    color: var(--brand-deep);
    border-color: var(--brand-deep);
}

.wbj-btn-ghost:hover,
.btn--outline:hover {
    background: var(--brand-deep);
    color: #fff;
    transform: translateY(-1px);
}

/* .wbj-card — generic content card: white surface, hairline border, rounded
   corners, the same hover lift as the homepage category cards. Good for
   product cards, order summaries, account panels. */
.wbj-card {
    display: block;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.wbj-card:hover {
    transform: translateY(-4px);
    border-color: var(--brand);
    box-shadow: 0 14px 30px rgba(61,53,50,0.09);
    color: inherit;
}

.wbj-card-body { padding: 15px 16px; }

/* .wbj-grid — generic responsive grid. Set --wbj-grid-cols to change column
   count (defaults to 3); the shop's product archive is the expected user,
   e.g. `.wbj-grid { --wbj-grid-cols: 4; }` for a 4-up desktop grid. */
.wbj-grid {
    display: grid;
    grid-template-columns: repeat(var(--wbj-grid-cols, 3), 1fr);
    gap: 22px;
}

@media (max-width: 1000px) {
    .wbj-grid { --wbj-grid-cols: 2; }
}

@media (max-width: 480px) {
    .wbj-grid { --wbj-grid-cols: 1; }
}

/* --- Shop archive header ---
   The generic .section padding left a tall empty band above the Shop title, the
   breadcrumb printed outside the container (fixed in woocommerce/archive-product.php)
   and the count and sort dropdown sat on separate rows. WooCommerce styles the
   breadcrumb and the dropdown two classes deep, hence the extra specificity. */
.wbj-shop-archive { padding-top: 34px; }

.wbj-shop-archive .section-header { margin-bottom: 34px; }

/* A frosted cream pill since the felt picture went behind the page top (D25): as plain
   grey text it disappeared into the leaves. Same shape as the jump-row pills. */
body .wbj-shop-archive .woocommerce-breadcrumb {
    display: inline-block;
    font-size: 0.82rem;
    color: var(--ink);
    margin: 0 0 18px;
    padding: 6px 15px;
    background: rgba(251, 247, 240, 0.86);
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

body .wbj-shop-archive .woocommerce-breadcrumb a {
    color: var(--brand-deep);
    text-decoration: none;
    border-bottom: none;
}

body .wbj-shop-archive .woocommerce-breadcrumb a:hover { color: var(--ink); }

/* --- My account (WooCommerce's classic login and account pages) ---
   shop.css is only loaded on shop, product, cart and checkout, so these pages
   were running WooCommerce's grey button and square fields, with its "Login"
   heading repeated under the page's own "My account" title. */
.woocommerce-account .woocommerce > h2 { display: none; }

.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register,
.woocommerce-account .woocommerce form.lost_reset_password {
    max-width: 480px;
    margin: 8px 0 0;
    padding: 28px 30px;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
}

.woocommerce-account .woocommerce form .form-row label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.woocommerce-account .woocommerce form .form-row .input-text,
.woocommerce-account .woocommerce form .form-row select {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    background: #fff;
}

.woocommerce-account .woocommerce form .form-row .input-text:focus {
    outline: none;
    border-color: var(--brand);
}

.woocommerce-account .woocommerce button.button,
.woocommerce-account .woocommerce a.button {
    background: var(--brand-deep);
    color: #fff;
    border-radius: var(--radius-sm);
    padding: 13px 26px;
    font-family: var(--font);
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.woocommerce-account .woocommerce button.button:hover,
.woocommerce-account .woocommerce a.button:hover {
    background: var(--ink);
    color: #fff;
}

/* --- 31. Responsive --- */
@media (max-width: 1000px) {
    .cat-cards { grid-template-columns: repeat(3, 1fr); }

    .reasons { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
    .reason:nth-child(odd) { border-left: none; }

    .footer-inner { grid-template-columns: 1fr 1fr; }
}

/* The menu goes behind the toggle at 1100px, not 768px (D23). Measured with
   the name held on one line: the six nav links, the basket, the name and the
   tagline fit down to about 1060px, and below that the tagline is squeezed to
   three lines. Kept apart from the 768px block below because that one is about
   page content, and this breakpoint is set by the header alone. */
@media (max-width: 1100px) {
    .mobile-toggle { display: block; flex-shrink: 0; }

    .header-inner { flex-wrap: wrap; }

    .logo { flex: 1; min-width: 0; }

    .main-nav {
        display: none;
        width: 100%;
        order: 10;
    }

    .main-nav.open { display: block; }

    .nav-list { flex-direction: column; align-items: stretch; gap: 0; }

    .nav-link {
        padding: 14px 4px;
        border-bottom: 1px solid var(--line-soft);
    }

    .nav-link::after { display: none; }

    .nav-link.wbj-nav-shop {
        border-radius: var(--radius);
        margin: 8px 0;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .logo-img { height: 66px; width: auto; }

    .logo-tagline { font-size: 0.6rem; max-width: 140px; }

    /* Hero on a phone: the cream wash needed to make the copy readable over the photo was
       hiding the fairy almost entirely (reported by Dave, screen widths 360-430). Below
       768px the photo becomes its own full-strength block, cropped tall enough to keep
       the fairy whole, with the copy underneath on plain cream instead of over a wash. */
    .hero {
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
        padding: 0;
    }

    .hero-media {
        position: static;
        inset: auto;
        width: 100%;
        aspect-ratio: 4 / 5;
        background-position: 75% center;
    }

    .hero-media::after {
        display: none;
    }

    .hero-inner {
        padding-top: 36px;
        padding-bottom: 44px;
    }

    .hero-text { max-width: none; }

    .cat-cards { grid-template-columns: repeat(2, 1fr); gap: 16px; }

    .about-inner {
        flex-direction: column;
        text-align: center;
        gap: 32px;
    }

    .about-photo { flex: none; }

    .about-photo img { width: 230px; height: 230px; }

    .about-text p { max-width: none; }

    .about-text .btn { margin-top: 4px; }

    .about-strip::after { display: none; }

    .feature-band { grid-template-columns: 1fr; }

    .feature-band--reverse .feature-band-media { order: 0; }

    .feature-band-media { min-height: 260px; max-height: 340px; }

    .feature-band-text { padding: 46px 24px 54px; text-align: center; }

    .feature-band-text p { max-width: none; }

    .feature-band-text .btn { align-self: center; }

    /* Fairies and Commissions bands: same fix as the hero above (Dave: "you can't really
       see them at all"). The wash was covering nearly the whole photo once the copy's
       block filled most of the band height, leaving barely a sliver of image visible.
       Stack the photo above the copy instead, full strength, sized so nothing is cropped
       out of frame. The two bands use different crops because the fairies photo is a wide
       strip (all three side by side, D19) and the Commissions photo is a squarer group
       shot anchored left (D20/D21) rather than right. */
    .photo-band {
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
        padding: 0;
    }

    .photo-band-media {
        position: static;
        inset: auto;
        width: 100%;
        aspect-ratio: 2.5 / 1;
        /* The fairies sit in the right of a very wide photo. Anchored right so all three
           are whole at 360 to 430px, at 68% the third was cut in half. */
        background-position: 100% center;
    }

    .photo-band-media::after {
        display: none;
    }

    .photo-band-inner {
        padding-top: 36px;
        padding-bottom: 44px;
    }

    .photo-band-text { max-width: none; }

    /* Commissions: taller family photo needs a taller crop to keep both people and all
       four dogs whole, and it's anchored left rather than right. */
    .photo-band--tall .photo-band-media { aspect-ratio: 3 / 2; }

    .photo-band--reverse .photo-band-media { background-position: 20% center; }

    .photo-band--reverse .photo-band-text { margin-left: 0; }


    .social-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }

    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }

    .pricing-guide { grid-template-columns: 1fr; }

    .content-with-image,
    .content-with-image--reverse { flex-direction: column; }

    .content-image { flex: none; width: 100%; max-width: 400px; }

    .steps { grid-template-columns: 1fr; gap: 20px; }

    .trust-items { flex-direction: column; align-items: flex-start; gap: 14px; }

    .footer-inner { grid-template-columns: 1fr; gap: 32px; }

    .section, .wbj-section { padding: 56px 0; }

    .flourish-title { gap: 12px; letter-spacing: 0.14em; }
    .flourish-title::before,
    .flourish-title::after { width: 28px; }

    .cookie-banner-inner { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
    .cat-cards { grid-template-columns: repeat(2, 1fr); }

    .gallery-grid { grid-template-columns: 1fr; }

    .reasons { grid-template-columns: 1fr; }
    .reason { border-left: none; }

    .hero-wordmark { font-size: 2.5rem; }

    .hero-buttons .btn { width: 100%; }

    .logo-img { height: 60px; width: auto; }

    /* No room for it beside a one-line name, the basket and the menu button:
       it was squeezed to 60px wide and five lines, which alone made the header
       99px. The same line is in the footer (D23). */
    .logo-tagline { display: none; }

    .flourish-title::before,
    .flourish-title::after { display: none; }

    .lightbox-prev { left: 4px; }
    .lightbox-next { right: 4px; }
}

/* --- 32. Commissions page cards (D30) ---
   The three kinds of commission under the intro on /commissions/, each an
   in-page link to its section. Same card as the homepage categories, with a
   price line under the name. Left-aligned under the intro text rather than
   centred. Three across down to phone width, then each card becomes a row with
   a small photo, because the homepage's two-column phone grid would leave the
   third card on its own. This block sits after the responsive section so its
   grid wins over the .cat-cards phone rules at the same specificity. */
.cat-cards--three {
    grid-template-columns: repeat(3, 1fr);
    max-width: 720px;
    margin: 36px 0 0;
}

.cat-cards--three .cat-card-body {
    flex-direction: column;
    gap: 2px;
}

.cat-card-price {
    font-size: 0.82rem;
    color: var(--ink-soft);
}

@media (max-width: 600px) {
    .cat-cards--three {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .cat-cards--three .cat-card {
        display: flex;
        align-items: center;
    }

    .cat-cards--three .cat-card-img {
        flex: 0 0 88px;
        width: 88px;
    }

    .cat-cards--three .cat-card-body {
        align-items: flex-start;
        text-align: left;
        padding: 10px 18px;
    }
}

/* Once .content-with-image stacks, its align-items: flex-start shrinks the
   text column to fit its content, which left the enquiry form's fields at half
   the width of a phone. Stretch that one column back to full width. */
@media (max-width: 768px) {
    #wbj-enquiry .content-text { align-self: stretch; }
}

/* The "Asking about" box above the form, lined up with the form's width now a
   photo sits beside it. */
#wbj-enquiry .wbj-piece-context { max-width: 560px; }

/* The cards' anchors, and the shop's #wbj-enquiry deep link, land the section
   top at the top of the window, where the sticky header covers it. On a phone
   the section padding is shorter than the header and the heading was tucked
   under it, so keep the sections clear of the header (59 to 62px, see
   shop.css). Scoped to .section because /shop/ uses the same slugs as ids on
   its own sections, which have their own scroll margin. */
.section#pet-portraits,
.section#people-and-characters,
.section#watercolour-paintings,
.section#wbj-enquiry { scroll-margin-top: 64px; }