/*
 Theme Name:   Astra Child – Anthony Fell
 Theme URI:    https://test.anthonyfell.com
 Description:  Astra child theme for Anthony Fell Antiques
 Author:       WHCLS
 Template:     astra
 Version:      1.21.0
 Text Domain:  astra-child
*/

/* ========================================
   Anthony Fell – Global Styles
   ======================================== */

body {
    background-color: #121e34 !important;
    color: #e8e8e8 !important;
}

/* ========================================
   Hero Slideshow – Full Viewport
   ======================================== */

.af-hero {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: #121e34;
    z-index: 0;
}

/* Header — fixed with transparent background */
.site-header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}

/* Spacer — creates scroll room so footer clears the fixed hero */
.af-hero-spacer {
    height: 100vh;
    width: 100%;
}

/* Ensure parent containers don't clip */
.ast-container,
.site-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
    position: relative;
    z-index: 1;
}

/* Header — always navy on every page.
   NB: `background-color: transparent !important` lives in the Customizer's
   Additional CSS, which loads AFTER this file, so an equally-specific rule
   loses to it. Descending from .site-header raises the specificity above that
   line, so the header keeps its background.

   ONLY the background is set here. `.site-header` below is the single fixed
   element. Do NOT give this bar its own `position: fixed`: Astra offsets the
   opened mobile menu panel from the bar's position in normal flow. Take the
   bar out of flow and the panel drops to the top of the document, where the
   header covers its first menu links. */
.site-header .ast-primary-header-bar,
.site-header .main-header-bar {
    background-color: #121e34 !important;
    border-bottom: none !important;
}

/* Header text styling.

   The FONT FAMILY and the DESKTOP SIZE are deliberately NOT set here. Astra
   generates both from one Customizer setting — Header Builder → Logo →
   Title Font — so the site name's face and size are admin-managed and can be
   changed without touching this file. Setting either here with !important
   would silently override the Customizer forever, which is exactly how the
   previous hard-coded Cinzel kept winning.

   Configured in the Customizer (Header Builder → Logo → Title Font):
       Font Family : Cormorant Garamond
       Font Weight : 700
       Font Size   : 30px

   Cormorant is optically small for its point size — 30px Cormorant has the
   same cap height as 26px Cinzel (the previous face). If the family is
   changed again, re-check that size; the two are a pair.

   Only presentational rules Astra has no setting for live here. */
.site-title,
.site-title a {
    color: #c9a84c !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}

.site-description {
    color: #c9a84c !important;
    font-size: 11px !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
}

/* Mobile header.
   The desktop sizes above are too large for a phone: the tagline wrapped onto
   two lines and pushed the header taller. Fluid (vw) sizes rather than stepped
   ones, so the tagline cannot need a second line at ANY width — the text scales
   with the viewport instead of colliding with a breakpoint. Verified 320-921px:
   both on one line, no horizontal scroll.
   The tagline also drops its desktop 0.2em tracking; at this size the wide
   tracking alone would consume the whole line.

   white-space:nowrap is a GUARANTEE, not a size tweak. Without it the site
   name wraps to two lines on narrow phones (it did at 18px on a 320px screen:
   "ANTHONY" / "FELL"), because 21.4vw of viewport is not enough for the name
   once the burger and the side padding are taken. nowrap means the name can
   never break, so the clamp below cannot silently regress on a small phone.
   The 16px floor is chosen so the name still FITS at 320px — nowrap alone
   would let a too-large name spill, so the floor and nowrap are a pair. */
@media (max-width: 921px) {
    .site-title,
    .site-title a {
        font-size: clamp(16px, 4.4vw, 30px) !important;
        letter-spacing: 0.10em !important;
        white-space: nowrap !important;
    }

    .site-description {
        font-size: clamp(8.5px, 2.25vw, 11px) !important;
        letter-spacing: 0.06em !important;
        white-space: nowrap !important;
    }
}

/* Header navigation */
.main-navigation .menu-item > a {
    color: #c9a84c !important;
    font-size: 13px !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
}

.main-navigation .menu-item > a:hover {
    color: #ffffff !important;
}

/* Header Builder nav — the classes Astra actually emits. Without these the
   current page's menu item is not highlighted and nothing has a hover state. */
.ast-builder-menu-1 .menu-item > .menu-link {
    color: #c9a84c !important;
}

.ast-builder-menu-1 .menu-item > .menu-link:hover {
    color: #dfc06a !important;
}

.ast-builder-menu-1 .menu-item.current-menu-item > .menu-link {
    color: #dfc06a !important;
    font-weight: 700 !important;
}

/* Header social icons.
   Astra's Header Builder emits .ast-builder-social-element. The older
   .ast-header-social-wrap .social-item a matched nothing (0 elements on every
   page), so the icons took their colour from --ast-global-color-2 alone — which
   is why they went invisible when the palette override was removed. */
.ast-builder-social-element {
    color: #c9a84c !important;
}

.ast-builder-social-element:hover {
    color: #dfc06a !important;
}

/* Footer — above the hero, transparent background */
.site-footer,
.site-footer-wrap,
.footer-sml-wrap,
.footer-widgets-area,
.ast-footer-overlay {
    background-color: transparent !important;
    position: relative;
    z-index: 5;
}

/* Individual slides — absolute within hero, filling full area */
.af-hero-slide {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    /* The two shapes travel with the slide as CSS custom properties, set on the
       element by front-page.php. The wide canvas is for landscape screens; the
       portrait rule below swaps in the tall one. Each falls back to the other,
       and to nothing, so a photograph with no variants yet cannot break. */
    background-image: var(--af-hero-wide, none);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1.12);
    transition: opacity 2s ease-in-out, transform 8s ease-out;
    will-change: opacity, transform;
}

/* Active slide: fade in + slow zoom from 1.12 → 1.20 over the full hold time */
.af-hero-slide.af-active {
    opacity: 1;
    transform: scale(1.20);
    transition: opacity 2s ease-in-out, transform 8s ease-out;
}

/* Outgoing slide: stay zoomed while fading out — no snap */
.af-hero-slide.af-outgoing {
    opacity: 0;
    transform: scale(1.20);
    transition: opacity 2s ease-in-out;
}

/* Portrait screens get the tall canvas.
   The wide canvas is 1.78 and a phone is about 0.46, so `cover` would magnify it
   until the height fitted and throw away most of the width — measured at 39% of a
   square photograph and 26% of a 3:2. The tall canvas is 19.5:9, the shape of the
   tallest phone viewport in use, so cover has almost nothing left to crop: the
   photograph occupies 80% of the canvas width and its own edges continue above and
   below it, filling the screen with the picture instead of the hero colour.
   Measured on 390x844, 360x640 and 768x1024: 100% of the photograph, 0% bare hero
   colour, at every moment of the Ken Burns zoom.
   17/20 = 0.85, which keeps tablet portrait (0.75) on this rule and hands a
   landscape phone (1.78) to the wide one. */
@media (max-aspect-ratio: 17/20) {
    .af-hero-slide {
        background-image: var(--af-hero-tall, var(--af-hero-wide, none));
    }
}

/* Legibility scrim behind the hero copy.
   Gold (#c9a84c) is a mid-tone, so on a bright photograph it measures ~1:1
   contrast and the copy disappears. An even wash cannot fix that: tested flat
   and top-to-bottom gradients both stall at ~3.2:1. A radial can, by holding
   more darkness where the text sits.

   WHY THE OLD SETTING LOOKED TOO DARK. The ellipse is much larger than the
   frame (170% x 150%), so the visible frame only ever reaches about 43% of the
   ellipse radius. The old stops (0.78 / 0.60 / 0.42 at 0 / 55 / 100%) put the
   lightest stop beyond the visible edge, so it never appeared: the wash ran
   64%-78% over every pixel in view, and the frame was never lighter than 63%
   wash anywhere. That flatness is what read as "too dark" - not the centre
   value. (An earlier note here claimed the edge was "about 30% less wash". That
   was wrong: it read the stop values instead of the visible range.)

   The fix keeps the geometry and lightens the stops, so the darkness stays
   where the copy sits while the whole photograph comes up. Measured from the
   rendered pixels at full scale, worst of the four slides:

       stops                       wash on the copy / lightest in the frame
       0.78 / 0.60 / 0.42                    78% / 63%   (what it was)
       0.50 / 0.32 / 0.16                    50% / 35%   (now)

       frame mean luminance      0.059 -> 0.133   (2.25x brighter)
       gold name, against its own shadow halo   5.74:1 -> 3.66:1
       white strapline, same method            10.45:1 -> 5.65:1

   IMPORTANT: the gold name now leans on the text-shadow set on
   .af-hero-subtitle and .af-hero-title below. Against the bare photograph the
   ink only reaches 2.09:1; the halo is what lifts it to 3.66:1, which clears
   the 3:1 needed at 88px. Do not remove those shadows without re-measuring. A
   heavier shadow measured 4.78:1 if more headroom is ever wanted.

   The contrast figures come from rendered pixels (glyph ink measured against
   the pixels immediately around the strokes), verified against the browser's
   own painting to 1/255. Plain contrast maths cannot see a text-shadow and
   reports a misleading 1.25:1 for this setting. */
.af-hero-scrim {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(
        ellipse 170% 150% at 50% 48%,
        rgba(18, 30, 52, 0.50) 0%,
        rgba(18, 30, 52, 0.32) 55%,
        rgba(18, 30, 52, 0.16) 100%
    );
}

/* Content area — sits within the fixed hero */
.af-hero-content {
    position: absolute;
    top: 88px; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 3;
    text-align: center;
    padding: 20px;
}

/* Indicator dots */
.af-hero-indicators {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 4;
}

/* Hero lockup — deliberately mirrors the header's hierarchy (see the
   .site-title note above): the business NAME is the large line and the
   descriptor is the small line beneath it, exactly as NAME / tagline read in
   the header bar.

   Both lines previously carried the SAME rule, clamp(22px, 3.5vw, 42px). That
   is why the hero read as one flat size: above ~1200px both pin to the shared
   42px ceiling, and below it they shrink in lockstep, so on desktop they could
   never differ no matter what the admin put in them. The two sizes are now
   separate and fluid, so each scales with the viewport and the hierarchy holds
   at every width without needing a breakpoint.

   Ratios are taken from the header pair (30px name : 11px tagline) and scaled
   up for a full-viewport stage. */
.af-hero-subtitle {
    /* Cormorant Garamond — the SAME face the header site name uses. The former
       'Cinzel' was never loaded: the site requests no Cinzel from Google Fonts,
       so it silently fell back to the browser's default serif. Proved by
       measuring its rendered width against a nonsense family name — identical
       (793.61px vs 793.61px). That silent fallback was the entire reason the
       hero looked like a different font to the header. */
    font-family: 'Cormorant Garamond', serif;
    /* 88px, not 84: Cormorant is optically small for its point size, so at the
       same px the name would lose ~3% of its ink height and ~6% of its width
       against the approved fallback serif. 88px restores the ink height
       (60px vs 58px) and 98.5% of the width (775.81px vs 787.59px). */
    font-size: clamp(30px, 6.2vw, 88px);
    font-weight: 700;
    color: #c9a84c;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 18px;
    line-height: 1.1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.92), 0 2px 14px rgba(0, 0, 0, 0.75);
}

.af-hero-title {
    /* The header's small tagline declares no family at all — it inherits the
       body sans. Mirroring the header lockup exactly therefore means naming the
       body stack here, NOT inheriting: this element is an <h1>, and Astra
       points headings at Cormorant Garamond (measured), so inheriting would
       give the descriptor the same face as the name and flatten the lockup. */
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    /* Floor of 13px, not 12: measured headroom at 360px is only 6%, and the
       line already wraps at 340px, so 13px costs nothing there while keeping
       the descriptor legible rather than whisper-thin on a phone. */
    font-size: clamp(13px, 1.45vw, 21px);
    font-weight: 400;
    /* White, and it needs the extra .af-hero class to get there: the global
       `h1..h6 { color: gold !important }` further down this file outranks a
       bare .af-hero-title, since both are !important and specificity decides.
       Two class selectors beat one element selector. */
    color: #ffffff;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    margin: 0 0 44px;
    line-height: 1.5;
    max-width: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.92), 0 2px 14px rgba(0, 0, 0, 0.75);
}

.af-hero .af-hero-title {
    color: #ffffff !important;
}

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

.af-hero-btn {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 14px 32px;
    border: 2px solid #c9a84c;
    transition: all 0.3s ease;
    cursor: pointer;
}

.af-hero-btn-primary {
    background-color: #c9a84c !important;
    color: #121e34 !important;
    text-shadow: none !important;
    font-weight: 500;
}

.af-hero-btn-primary:hover {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: #121e34 !important;
}

.af-hero-btn-secondary {
    background-color: transparent !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

.af-hero-btn-secondary:hover {
    background-color: #ffffff !important;
    color: #121e34 !important;
}

.af-hero-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(201, 168, 76, 0.6);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
}

.af-hero-dot.af-active,
.af-hero-dot:hover {
    background: #c9a84c;
    border-color: #c9a84c;
}

/* Hero responsive */
@media (max-width: 768px) {
    .af-hero-content {
        top: 80px;
    }

    /* Sizes stay fluid here on purpose. The old fixed mobile sizes (14px
       subtitle / 20px title) INVERTED the hierarchy once the desktop pair was
       corrected — the descriptor would have been the larger line on a phone.
       Only spacing needs a breakpoint; the clamp() pair already scales. */
    .af-hero-subtitle {
        margin-bottom: 12px;
    }

    .af-hero-title {
        margin-bottom: 30px;
    }

    .af-hero-btn {
        font-size: 12px;
        padding: 12px 24px;
    }
}

@media (max-width: 480px) {
    .af-hero-content {
        top: 60px;
    }

    /* Same reasoning as the 768px block: no fixed font-size, so the name stays
       the dominant line. The tracking is tightened because at this width the
       descriptor's wide letter-spacing both pushes it onto a second line and
       makes the | separators indistinguishable from ordinary word gaps. At
       0.10em it fits on ONE line down to 320px (259px of text in a 280px box). */
    .af-hero-title {
        letter-spacing: 0.10em;
    }

    .af-hero-buttons {
        flex-direction: column;
        align-items: center;
    }
}

/* ========================================
   Category Archive – 4-Column Collection Grid
   ======================================== */

.af-category-page {
    max-width: 1150px;
    margin: 0 auto;
    padding: 80px 20px 60px;
}

.af-category-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    font-weight: 700;
    color: #c9a84c;
    text-align: center;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 40px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(201, 168, 76, 0.3);
}

.af-collection-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 35px;
}

.af-collection-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.af-collection-item:hover {
    transform: translateY(-4px);
}

.af-item-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    margin: 11px 0 0 0;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-align: center;
}

/* Shorten long titles so images stay aligned */
.af-item-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.af-item-image-wrap {
    width: 100%;
    background-color: #d3d3e0;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    margin-bottom: 14px;
}

.af-item-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.af-item-placeholder {
    background-color: #c0c0d0;
}

.af-item-excerpt {
    font-size: 13px;
    font-weight: 300;
    color: #e8e8e8;
    line-height: 1.5;
    margin: 0;
    opacity: 0.85;
}

.af-more {
    color: #c9a84c;
    font-weight: 400;
    white-space: nowrap;
}

.af-collection-item:hover .af-item-title {
    color: #c9a84c;
}

.af-collection-item:hover .af-item-image-wrap {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Pagination */
.af-category-page .nav-links {
    text-align: center;
    margin-top: 50px;
}

.af-category-page .nav-links a,
.af-category-page .nav-links span {
    font-size: 14px;
    color: #c9a84c;
    text-decoration: none;
    padding: 8px 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.af-category-page .nav-links .current {
    background: rgba(201, 168, 76, 0.2);
    border-radius: 3px;
}

.af-no-items {
    text-align: center;
    color: #c9a84c;
    font-size: 16px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 60px 0;
}

/* ========================================
   Responsive – Category Grid
   ======================================== */

@media (max-width: 960px) {
    .af-collection-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 25px;
    }
}

@media (max-width: 768px) {
    .af-collection-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px 20px;
    }

    .af-category-title {
        font-size: 22px;
    }

    .af-item-title {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .af-collection-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 15px;
    }

    .af-item-image-wrap {
        padding: 5px;
    }

    .af-item-title {
        font-size: 13px;
    }

    .af-item-excerpt {
        font-size: 12px;
    }
}

/* ========================================
   Single Item Page – Two-Column Layout
   ======================================== */

.af-item-page {
    max-width: 1150px;
    margin: 0 auto;
    padding: 80px 20px 60px;
}

.af-item-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

/* Left column – text */
.af-item-text {
    padding-top: 10px;
}

.af-item-text .af-item-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    font-weight: 700;
    color: #c9a84c;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 30px;
    line-height: 1.2;
}

.af-item-description {
    font-size: 16px;
    font-weight: 300;
    color: #ffffff;
    line-height: 1.7;
    margin-bottom: 30px;
}

.af-item-description p {
    margin: 0 0 18px;
}

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

/* Specs */
.af-item-specs {
    border-top: 1px solid rgba(201, 168, 76, 0.3);
    padding-top: 20px;
    margin-top: 10px;
}

.af-spec {
    font-size: 15px;
    font-weight: 300;
    color: #e8e8e8;
    margin: 0 0 8px;
    line-height: 1.5;
}

.af-spec-price {
    color: #c9a84c !important;
    font-weight: 400;
}

.af-spec-condition {
    font-style: italic;
    opacity: 0.8;
}

/* Right column – main image (sticky for long content) */
.af-item-image {
    background-color: #d3d3e0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
    position: sticky;
    top: 100px;
    align-self: start;
}

.af-item-main-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Detail gallery – 3+ columns */
.af-item-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.af-gallery-thumb {
    background-color: #d3d3e0;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.af-gallery-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ========================================
   Fullscreen Photo Viewer (item pages)
   ======================================== */

/* Clickable photo wrappers. Both are <a> elements, so they need the gold
   underline and the browser's link colour suppressing, plus a pointer so the
   photograph reads as interactive. */
.af-item-photo-link,
.af-gallery-thumb a.af-lightbox {
    display: block;
    text-decoration: none !important;
    border: none !important;
    cursor: zoom-in;
    line-height: 0;
}

.af-item-photo-link {
    width: 100%;
}

.af-gallery-thumb a.af-lightbox {
    width: 100%;
    height: 100%;
}

/* A per-item rule would beat Astra's global `a { color: … !important }`, and
   the child theme has no control over that inline stylesheet — match it. */
.af-item-page .af-item-photo-link,
.af-item-page .af-item-photo-link:hover,
.af-item-page .af-gallery-thumb a.af-lightbox,
.af-item-page .af-gallery-thumb a.af-lightbox:hover {
    color: inherit !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Subtle cue on hover — the client can see the photo is clickable */
.af-item-photo-link:hover .af-item-main-img {
    opacity: 0.92;
    transition: opacity 0.25s ease;
}

.af-gallery-thumb a.af-lightbox:hover .af-gallery-img {
    opacity: 0.88;
    transition: opacity 0.25s ease;
}

.af-item-photo-link:focus-visible .af-item-main-img,
.af-gallery-thumb a.af-lightbox:focus-visible .af-gallery-img {
    outline: 2px solid #c9a84c;
    outline-offset: 3px;
}

/* Root scroll lock while the viewer is open (html, not body — body scroll
   locking is unreliable on iOS Safari). */
html.af-lb-lock,
html.af-lb-lock body {
    overflow: hidden !important;
}

.af-lb {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 12, 22, 0.94);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s ease;
    -webkit-tap-highlight-color: transparent;
    padding: 30px;
    box-sizing: border-box;
}

.af-lb.af-lb-open {
    opacity: 1;
    visibility: visible;
}

.af-lb-stage {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.af-lb-img {
    max-width: 100%;
    max-height: calc(100vh - 110px);
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    opacity: 0;
    transition: opacity 0.28s ease;
    box-shadow: 0 10px 60px rgba(0, 0, 0, 0.6);
}

.af-lb.af-lb-loaded .af-lb-img {
    opacity: 1;
}

.af-lb-caption {
    margin: 16px 0 0;
    padding: 0;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
    max-width: 900px;
}

/* Controls */
.af-lb-close,
.af-lb-prev,
.af-lb-next {
    position: absolute;
    z-index: 2;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    transition: background 0.2s ease, border-color 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.af-lb-close:hover,
.af-lb-prev:hover,
.af-lb-next:hover {
    background: rgba(201, 168, 76, 0.85);
    border-color: #c9a84c;
}

.af-lb-close:focus-visible,
.af-lb-prev:focus-visible,
.af-lb-next:focus-visible {
    outline: 2px solid #c9a84c;
    outline-offset: 3px;
}

.af-lb-close {
    top: 18px;
    right: 20px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-size: 28px;
}

.af-lb-prev,
.af-lb-next {
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 72px;
    font-size: 34px;
}

.af-lb-prev { left: 20px; }
.af-lb-next { right: 20px; }

/* ---- Zoom controls -------------------------------------------------------
   Top-left, mirroring the close button top-right, so they can never collide
   with the prev/next arrows at mid-height or the caption below. */
.af-lb-tools {
    position: absolute;
    z-index: 3;
    top: 18px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    padding: 4px;
}

.af-lb-tools button {
    background: transparent;
    border: 0;
    color: #ffffff !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    line-height: 1;
    font-size: 18px;
    border-radius: 999px;
    transition: background 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.af-lb-tools button:hover:not(:disabled) {
    background: rgba(201, 168, 76, 0.85);
}

.af-lb-tools button:focus-visible {
    outline: 2px solid #c9a84c;
    outline-offset: 3px;
}

/* The level readout doubles as the reset button. */
.af-lb-tools .af-lb-level {
    min-width: 56px;
    font-size: 12px;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
}

/* At fit there is nothing left to zoom out to, so the control reads as inert
   rather than appearing broken when pressing it does nothing. */
.af-lb-tools button:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Gestures are handled in JS, so the browser must not scroll or pinch-zoom the
   page behind the overlay. touches-action:none also suppresses the native
   double-tap zoom, which we implement ourselves. */
.af-lb {
    touch-action: none;
    overscroll-behavior: contain;
    -webkit-user-select: none;
    user-select: none;
}

/* Fitted photo hints that it can be enlarged; zoomed photo is draggable. */
.af-lb-img { cursor: zoom-in; }
.af-lb.af-lb-zoomed .af-lb-img { cursor: grab; }
.af-lb.af-lb-grabbing .af-lb-img { cursor: grabbing; }

@media (max-width: 768px) {
    .af-lb { padding: 12px; }

    .af-lb-img { max-height: calc(100vh - 130px); }

    .af-lb-close {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        font-size: 24px;
    }

    .af-lb-prev,
    .af-lb-next {
        width: 40px;
        height: 56px;
        font-size: 26px;
    }

    .af-lb-prev { left: 6px; }
    .af-lb-next { right: 6px; }

    /* Keep the zoom pill clear of the close button at this width, and give the
       buttons a finger-sized target. */
    .af-lb-tools {
        top: 10px;
        left: 10px;
        gap: 2px;
    }

    .af-lb-tools button {
        min-width: 40px;
        height: 40px;
        padding: 0 6px;
        font-size: 20px;
    }

    .af-lb-tools .af-lb-level {
        min-width: 52px;
        font-size: 11px;
    }

    .af-lb-caption {
        font-size: 11px;
        margin-top: 10px;
    }
}

/* Back link */
.af-item-back {
    margin-top: 50px;
    text-align: center;
}

.af-back-link {
    font-size: 14px;
    font-weight: 400;
    color: #c9a84c !important;
    text-decoration: none;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.af-back-link:hover {
    color: #ffffff !important;
}

/* Single item responsive */
@media (max-width: 768px) {
    .af-item-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .af-item-text .af-item-title {
        font-size: 22px;
    }

    .af-item-gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .af-item-text .af-item-title {
        font-size: 18px;
    }

    .af-item-description {
        font-size: 14px;
    }

    .af-item-gallery {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/* ========================================
   About Page – Two-Column with Portrait
   ======================================== */

.af-about-page {
    max-width: 1150px;
    margin: 0 auto;
    padding: 80px 20px 60px;
}

.af-about-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

/* Left column – text */
.af-about-text {
    padding-top: 10px;
}

.af-about-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    font-weight: 700;
    color: #c9a84c;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 30px;
    line-height: 1.2;
}

.af-about-body {
    font-size: 16px;
    font-weight: 300;
    color: #ffffff;
    line-height: 1.7;
}

.af-about-body p {
    margin: 0 0 18px;
}

.af-about-body p:first-child {
    font-weight: 500;
    color: #ffffff;
}

/* Right column – portrait.
   `top` has two jobs: clear the 80px fixed header when the column sticks,
   and align the photo's top edge with the heading.

   The text column starts 10px into the container (`.af-about-text`
   padding-top, which keeps the heading clear of the fixed header), so the
   heading's top edge sits at 80 + 10 = 90px. The photo must start there too.
   At the previous 100px it aligned with neither: 10px below the heading and
   54px above the first paragraph, which read as an unresolved stagger.
   90px = the header clearance plus that same 10px. */
.af-about-portrait {
    position: sticky;
    top: 90px;
    align-self: start;
}

.af-about-img {
    width: 100%;
    height: auto;
    display: block;
    border: 3px solid rgba(255, 255, 255, 0.3);
}

/* About responsive */
@media (max-width: 768px) {
    .af-about-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .af-about-title {
        font-size: 22px;
    }

    .af-about-portrait {
        position: static;
    }
}

@media (max-width: 480px) {
    .af-about-title {
        font-size: 18px;
    }

    .af-about-body {
        font-size: 14px;
    }
}

/* ========================================
   Contact Page – Form + Map Layout
   ======================================== */

.af-contact-page {
    max-width: 1150px;
    margin: 0 auto;
    padding: 80px 20px 60px;
}

.af-contact-container {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 60px;
    align-items: start;
}

/* Left column */
.af-contact-text {
    padding-top: 10px;
}

.af-contact-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    font-weight: 700;
    color: #c9a84c;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 20px;
    line-height: 1.2;
}

.af-contact-intro {
    font-size: 16px;
    font-weight: 300;
    color: #ffffff;
    line-height: 1.7;
    margin-bottom: 30px;
}

.af-contact-intro p {
    margin: 0 0 18px;
}

/* Contact form — handled by WPForms plugin */
.af-contact-intro {
    margin-bottom: 0;
}

.af-contact-intro .wpforms-container {
    margin-top: 20px;

    /* WPForms paints fields from its own CSS variables, so we override the
       variables first (the documented theming path) before the concrete
       properties below. */
    --wpforms-label-color: #ffffff;
    --wpforms-label-sublabel-color: rgba(255, 255, 255, 0.8);
    --wpforms-field-background-color: #efddd3;
    --wpforms-field-text-color: #333333;
    --wpforms-field-menu-color: #efddd3;
    --wpforms-field-border-radius: 15px;
    --wpforms-field-border-size: 0px;
    --wpforms-field-border-style: none;
    --wpforms-field-size-input-height: 48px;
    --wpforms-field-size-padding-h: 20px;
    --wpforms-field-size-input-spacing: 16px;
    --wpforms-field-size-font-size: 15px;
}

/* Fields: cream, borderless, softly rounded. */
.af-contact-intro .wpforms-field input:not([type="submit"]),
.af-contact-intro .wpforms-field textarea,
.af-contact-intro .wpforms-field select {
    width: 100% !important;
    /* WPForms caps .wpforms-field-medium at 60%, which left the fields short
       of the column width and stranded the right-aligned button. */
    max-width: 100% !important;
    font-size: 15px !important;
    font-weight: 300 !important;
    color: #333333 !important;
    background-color: #efddd3 !important;
    border: none !important;
    border-radius: 15px !important;
    padding: 14px 20px !important;
    outline: none !important;
    transition: box-shadow 0.3s ease;
}

.af-contact-intro .wpforms-field textarea {
    min-height: 130px !important;
    resize: vertical;
}

.af-contact-intro .wpforms-field input::placeholder,
.af-contact-intro .wpforms-field textarea::placeholder {
    /* Darker than the original rgba(51,51,51,0.65): inside these fields the
       placeholder is the only visible text, so it has to carry the field rather
       than recede. Weight 400 is a modest step up from the field's 300 — heavy
       enough to read, light enough to still look like a prompt. */
    color: #1e1e1e !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

.af-contact-intro .wpforms-field input:focus,
.af-contact-intro .wpforms-field textarea:focus {
    box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.55) !important;
}

/* The design shows placeholder text only. Keep the labels in the DOM so
   screen readers still announce them, but move them off-screen. */
.af-contact-intro .wpforms-field-label,
.af-contact-intro .wpforms-field-sublabel {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Send button: gold, right-aligned under the form. */
.af-contact-intro .wpforms-submit-container {
    text-align: right;
    padding-top: 10px;
}

.af-contact-intro .wpforms-submit {
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 0.12em !important;
    text-transform: none !important;
    color: #2a2110 !important;
    background-color: #c9a84c !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 34px !important;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.af-contact-intro .wpforms-submit:hover {
    background-color: #dfc06a !important;
}

/* Right column: photo above a borderless map, both full column width. */
.af-contact-sidebar {
    align-self: start;
}

.af-contact-portrait {
    margin-bottom: 0;
}

.af-contact-img {
    width: 100%;
    height: auto;
    display: block;
    border: 4px solid rgba(255, 255, 255, 0.85);
}

.af-contact-map {
    border-radius: 0;
    overflow: hidden;
    height: 380px;
    margin-top: 24px;
}

/* ---- Contact details (above the map) --------------------------------------
   Sits between the portrait and the map. A thin rule above separates it from
   the photo without adding a heavy box. */
.af-contact-details {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(201, 168, 76, 0.35);
    text-align: left;
}

.af-contact-address {
    margin: 0;
    font-style: normal;          /* <address> defaults to italic */
    font-size: 15px;
    font-weight: 300;
    line-height: 1.65;
    color: #ffffff;
    letter-spacing: 0.02em;
}

.af-contact-lines {
    margin: 12px 0 0;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.6;
    color: #ffffff;
}

.af-contact-link {
    color: #c9a84c !important;
    text-decoration: none;
    border-bottom: 1px solid rgba(201, 168, 76, 0.4);
    transition: color 0.25s ease, border-color 0.25s ease;
    /* Long email addresses must wrap rather than widen the column */
    word-break: break-word;
}

.af-contact-link:hover,
.af-contact-link:focus-visible {
    color: #ffffff !important;
    border-bottom-color: rgba(255, 255, 255, 0.6);
}

.af-contact-sep {
    color: rgba(255, 255, 255, 0.45);
    margin: 0 6px;
}

.af-contact-map iframe {
    display: block;
}

/* Contact responsive */
@media (max-width: 768px) {
    .af-contact-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .af-contact-title {
        font-size: 22px;
    }

    .af-contact-sidebar {
        position: static;
    }

    .af-form-row-half {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .af-contact-title {
        font-size: 18px;
    }

    .af-contact-intro {
        font-size: 14px;
    }
}

/* ========================================
   Restored global overrides
   These lived in the Customizer's Additional CSS. Moving them into the theme
   means the site does not depend on a database-stored blob that is easy to lose
   from the admin UI, and there is one place to look.
   NOT restored: `.ast-separate-container .ast-article-inner` — measured 0
   matching elements on the live site (0x .ast-separate-container, 0x
   .ast-article-inner, 0x .ast-article-single), so that rule painted nothing.
   ======================================== */

/* Astra's own generated palette. Setting these on :root is what controls the
   colours of anything Astra styles itself — the social icons take their colour
   from --ast-global-color-2, which is why they went near-invisible against the
   navy header (1.07:1) when this block was removed. */
:root {
    --ast-global-color-0: #c9a84c;
    --ast-global-color-1: #b8963f;
    --ast-global-color-2: #c9a84c;
    --ast-global-color-3: #e8e8e8;
    --ast-global-color-4: #121e34;
    --ast-global-color-5: #121e34;
    --ast-global-color-6: #1a2844;
    --ast-global-color-7: #c9a84c;
    --ast-global-color-8: #c9a84c;
}

h1, h2, h3, h4, h5, h6 {
    color: #c9a84c !important;
}

/* ========================================
   Numerals
   ======================================== */

/* Cormorant Garamond defaults to OLD-STYLE figures: the digits have different
   ink heights and several hang below the baseline. Measured at 100px, each
   digit's ink box is  0=41/1  1=39/1  3=42/28  5=44/28  7=42/29  8=59/1
   9=41/28  (ascent/descent, px) — so 3, 5, 7 and 9 drop below the baseline and
   8 stands half as tall again. That is what made "17th", "H 98 cm" and
   "£ 18,500" read as misaligned. Lining figures put every digit at one height
   on the baseline. Confirmed to take effect on the real font file: "18,500"
   renders 238.31px with the default figures and 256.00px with lining-nums, and
   "1234567890" goes from 430.81px to 460.20px. */
.af-hero-subtitle,
.af-category-title,
.af-item-title,
.af-about-title,
.af-contact-title {
    font-variant-numeric: lining-nums;
    font-feature-settings: "lnum" 1;
}

/* The ordinal suffix in a heading ("th" in "17th") as a superscript.
   single.php wraps it in <sup>; this only styles it. The heading is
   upper-cased by CSS, so it reads as 17TH with the TH raised and set smaller. */
.af-item-title sup {
    font-size: 0.58em;
    line-height: 0;
    vertical-align: super;
    position: relative;
    top: -0.06em;
    letter-spacing: 0;
}

a {
    color: #c9a84c !important;
}

a:hover {
    color: #dfc06a !important;
}

/* Footer copyright. The footer band is transparent and sits over the fixed
   hero, so its default grey (#4A4A4A) measured 8.86:1 against a white guess
   but 2.29:1 against the actual navy — the gold is the only safe colour. */
.ast-footer-copyright {
    color: #c9a84c !important;
}