/* ==========================================
   Nameframe - Design System
   Warm, editorial WooCommerce storefront
   Tokens mirror the nameframe.co brand:
   bone / ink / forest / clay / brass
   ========================================== */

/* ---- Custom Properties ---- */
:root {
    /* Brand palette */
    --bone: #F5F1E7;
    --bone-deep: #ECE5D4;
    --ink: #0F0E0C;
    --ink-2: #171513;
    --ink-soft: #5A554C;
    --forest: #16493B;
    --forest-2: #1F6450;
    --clay: #C44827;
    --clay-2: #E16236;
    --brass: #A08040;
    --brass-2: #C8A467;

    /* Semantic mappings (keep existing selector names working) */
    --color-white: #FFFFFF;
    --color-off-white: var(--bone-deep);
    --color-light: var(--bone-deep);
    --color-border: rgba(15, 14, 12, 0.12);
    --color-gray: var(--ink-soft);
    --color-gray-dark: #3A352D;
    /* Muted text on the DARK footer. --color-gray (#5A554C) is for light
       backgrounds and only hits 2.6:1 on the ink footer; this translucent
       bone clears WCAG AA (~6.9:1). */
    --color-footer-muted: rgba(245, 241, 231, 0.62);
    --color-dark: var(--ink);
    --color-black: var(--ink);
    --color-accent: var(--clay);
    --color-accent-hover: var(--clay-2);
    --color-accent-light: rgba(196, 72, 39, 0.14);
    --color-success: var(--forest);
    --color-error: #B23A1E;

    --font-body: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-serif: 'Newsreader', Georgia, serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 6rem;

    --container-max: 1200px;
    --container-wide: 1400px;
    --header-height: 72px;

    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
}

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    background-color: var(--bone);
    color: var(--ink);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

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

/* ---- Typography ---- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--ink);
    line-height: 1.04;
    letter-spacing: -0.018em;
    margin-bottom: var(--space-sm);
}

h1 { font-size: clamp(2.25rem, 5.5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.6rem); }
h4 { font-size: 1.125rem; }

em {
    font-style: italic;
    color: var(--forest-2);
}

p {
    margin-bottom: var(--space-sm);
    color: var(--color-gray-dark);
}

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

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

/* ---- Layout ---- */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.container-wide {
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.section {
    padding: var(--space-xl) 0;
}

.text-center {
    text-align: center;
}

/* ---- Header ---- */
.site-header {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 1000;
    height: var(--header-height);
    transition: box-shadow var(--transition-base);
}

.site-header.scrolled {
    box-shadow: var(--shadow-md);
}

body.menu-open {
    overflow: hidden;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.site-logo a,
.site-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    letter-spacing: -0.02em;
}

.site-logo a::after,
.site-title::after {
    content: '.';
    color: var(--brass);
}

.site-logo img {
    max-height: 50px;
    width: auto;
}

.main-nav .nav-menu {
    list-style: none;
    display: flex;
    gap: var(--space-md);
    align-items: center;
}

.main-nav .nav-menu li a {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-gray-dark);
    padding: var(--space-xs) 0;
    position: relative;
    transition: color var(--transition-base);
}

.main-nav .nav-menu li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-accent);
    transition: width var(--transition-base);
}

.main-nav .nav-menu li a:hover,
.main-nav .nav-menu li.current-menu-item a {
    color: var(--color-accent);
}

.main-nav .nav-menu li a:hover::after,
.main-nav .nav-menu li.current-menu-item a::after {
    width: 100%;
}

/* Header Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.cart-link {
    color: var(--color-gray-dark);
    display: flex;
    align-items: center;
    position: relative;
    transition: color var(--transition-fast);
}

.cart-link:hover {
    color: var(--color-accent);
}

.cart-icon {
    display: block;
}

.cart-count {
    background: var(--color-accent);
    color: var(--color-white);
    font-size: 0.65rem;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -6px;
    right: -8px;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.mobile-menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-dark);
    transition: all var(--transition-base);
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ---- Buttons ---- */
.btn,
.button,
button[type="submit"],
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.8rem 1.75rem;
    border: 1.5px solid var(--color-accent);
    border-radius: 999px;
    background: transparent;
    color: var(--color-accent);
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
    text-align: center;
    line-height: 1.4;
}

.btn:hover, .btn:focus,
.button:hover, .button:focus,
button[type="submit"]:hover, button[type="submit"]:focus,
input[type="submit"]:hover, input[type="submit"]:focus,
.woocommerce a.button:hover, .woocommerce a.button:focus,
.woocommerce button.button:hover, .woocommerce button.button:focus,
.woocommerce input.button:hover, .woocommerce input.button:focus,
.woocommerce #respond input#submit:hover {
    background: var(--color-accent);
    color: var(--color-white);
}

.btn-primary,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
    background: var(--color-accent);
    color: var(--color-white);
}

.btn-primary:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--color-white);
}

/* ---- Hero Section (split editorial) ---- */
.hero {
    position: relative;
    overflow: hidden;
    background-color: var(--ink);
    color: var(--bone);
    padding: clamp(2.5rem, 6vw, 5.5rem) 0 clamp(3.5rem, 7vw, 6rem);
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 16% 22%, rgba(22, 73, 59, 0.36), transparent 56%),
        radial-gradient(circle at 88% 82%, rgba(196, 72, 39, 0.18), transparent 52%);
    z-index: 0;
}

/* fine film grain over the dark hero */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
    opacity: 0.6;
    pointer-events: none;
    z-index: 1;
}

.hero-grid {
    position: relative;
    z-index: 2;
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 var(--space-md);
    display: grid;
    grid-template-columns: 5fr 6fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
}

.hero-copy {
    max-width: 34rem;
}

.hero .hero-marker {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--brass-2);
    margin-bottom: var(--space-sm);
}

.hero .hero-marker::before {
    content: '';
    display: inline-block;
    width: 2rem;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
}

.hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5.5vw, 4.75rem);
    font-weight: 500;
    color: var(--bone);
    margin-bottom: var(--space-md);
    letter-spacing: -0.02em;
    line-height: 0.96;
}

.hero h1 em {
    color: var(--brass-2);
    font-style: italic;
}

.hero .tagline {
    font-family: var(--font-serif);
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    color: rgba(245, 241, 231, 0.80);
    font-weight: 400;
    line-height: 1.55;
    margin: 0 0 var(--space-md);
}

.hero-buttons {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

/* Framed macro photograph */
.hero-figure {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 3;
}

.hero-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    outline: 1px solid rgba(200, 164, 103, 0.25);
    outline-offset: -1px;
}

.hero-figure__mark {
    position: absolute;
    bottom: -0.85rem;
    left: -0.6rem;
    background: var(--ink);
    border: 1px solid rgba(200, 164, 103, 0.4);
    color: var(--brass-2);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    padding: 0.45rem 0.8rem;
}

/* On the dark hero, outline buttons read in bone */
.hero .btn,
.hero .button {
    border-color: rgba(245, 241, 231, 0.5);
    color: var(--bone);
}

.hero .btn:hover,
.hero .button:hover {
    background: var(--bone);
    color: var(--ink);
    border-color: var(--bone);
}

.hero .btn-primary {
    background: var(--clay);
    border-color: var(--clay);
    color: var(--bone);
}

.hero .btn-primary:hover {
    background: var(--clay-2);
    border-color: var(--clay-2);
    color: var(--bone);
}

@media (max-width: 860px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 2.75rem;
    }
    .hero-copy {
        max-width: none;
    }
    .hero-figure {
        aspect-ratio: 3 / 2;
    }
}

/* ---- Editorial markers (reusable) ---- */
.marker {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--brass);
    margin-bottom: var(--space-sm);
}

.marker::before {
    content: '';
    display: inline-block;
    width: 2rem;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
}

.marker--forest { color: var(--forest-2); }
.marker--brass { color: var(--brass-2); }

/* ---- Section heading ---- */
.section-head {
    max-width: 42rem;
    margin-bottom: var(--space-lg);
}

.section-head h2 {
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    line-height: 1.02;
}

.section-head h2 em {
    color: var(--clay);
    font-style: italic;
}

.section-head p {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--ink-soft);
    margin-top: var(--space-sm);
    max-width: 34rem;
}

/* ---- Craft section ---- */
.craft-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}

.craft-figure {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 3;
}

.craft-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 24px 60px rgba(15, 14, 12, 0.18);
    outline: 1px solid rgba(15, 14, 12, 0.08);
    outline-offset: -1px;
}

.craft-figure__mark {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: rgba(15, 14, 12, 0.82);
    color: var(--bone);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: 0.4rem 0.7rem;
}

.craft-copy h2 {
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    line-height: 1.02;
    margin-bottom: var(--space-sm);
}

.craft-copy h2 em {
    color: var(--clay);
    font-style: italic;
}

.craft-copy p {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

.craft-copy p em {
    color: var(--forest-2);
    font-style: italic;
}

.craft-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm) var(--space-md);
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-md);
    margin-top: var(--space-md);
}

.craft-specs dt {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-soft);
}

.craft-specs dd {
    margin: 0.25rem 0 0;
    font-family: var(--font-serif);
    font-size: 1.05rem;
}

/* ---- Gallery ---- */
.gallery {
    background: var(--bone-deep);
}

.gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}

.gallery-cell {
    margin: 0;
    overflow: hidden;
    border-radius: 2px;
    aspect-ratio: 435 / 200;
    outline: 1px solid rgba(15, 14, 12, 0.06);
    outline-offset: -1px;
}

.gallery-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms ease;
}

.gallery-cell:hover img {
    transform: scale(1.04);
}

.gallery-cell.g-banner {
    grid-column: 1 / -1;
    aspect-ratio: 970 / 320;
}

/* ---- Closing CTA band ---- */
.cta-band {
    position: relative;
    overflow: hidden;
    background: var(--ink);
    color: var(--bone);
    text-align: center;
    padding: clamp(3.5rem, 8vw, 6.5rem) 0;
}

.cta-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 50% 120%, rgba(196, 72, 39, 0.22), transparent 60%);
}

.cta-band .container {
    position: relative;
    z-index: 1;
}

.cta-band .marker {
    justify-content: center;
}

.cta-band h2 {
    font-size: clamp(2.25rem, 5vw, 4rem);
    color: var(--bone);
    line-height: 1.0;
    margin-bottom: var(--space-sm);
}

.cta-band h2 em {
    color: var(--brass-2);
    font-style: italic;
}

.cta-band p {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    color: rgba(245, 241, 231, 0.8);
    max-width: 30rem;
    margin: 0 auto var(--space-md);
}

.cta-band .btn-primary {
    background: var(--clay);
    border-color: var(--clay);
    color: var(--bone);
}

.cta-band .btn-primary:hover {
    background: var(--clay-2);
    border-color: var(--clay-2);
    color: var(--bone);
}

@media (max-width: 768px) {
    .craft-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    .craft-figure {
        order: -1;
    }
    .gallery-grid {
        grid-template-columns: 1fr;
    }
    .gallery-cell.g-banner {
        aspect-ratio: 970 / 380;
    }
}

/* ---- Live studio stats band ---- */
.stats {
    background: var(--bone-deep);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    text-align: center;
}

.stats-head {
    max-width: 46rem;
    margin: 0 auto var(--space-lg);
}

.stats .marker {
    justify-content: center;
}

.stats-head h2 {
    font-size: clamp(1.9rem, 4.2vw, 3rem);
    line-height: 1.04;
}

.stats-head h2 em {
    color: var(--clay);
    font-style: italic;
}

.stats-figures {
    display: flex;
    justify-content: center;
    gap: clamp(2.5rem, 9vw, 6.5rem);
    margin-bottom: var(--space-lg);
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-num {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(3rem, 8vw, 5rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--clay);
    font-variant-numeric: tabular-nums;
}

.stat-label {
    margin-top: var(--space-xs);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-soft);
}

/* "Recently in the studio" ticker — pinned marker + rolling names, a thin
   full-width dark strip (mirrors the old marketing site's hero ticker). */
.stats-ticker {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: stretch;
    text-align: left;
    background: var(--ink);
    border-top: 1px solid rgba(245, 241, 231, 0.10);
    border-bottom: 1px solid rgba(245, 241, 231, 0.10);
}

.stats-ticker__marker {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 1.5rem;
    border-right: 1px solid rgba(245, 241, 231, 0.10);
    background: rgba(196, 72, 39, 0.10);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--clay-2);
    white-space: nowrap;
}

.stats-live-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--clay);
    animation: nf-live-pulse 1.4s ease-in-out infinite;
}

.stats-ticker__viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 80px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 80px), transparent 100%);
}

.stats-ticker__roll {
    display: inline-flex;
    align-items: center;
    padding: 1rem 0;
    white-space: nowrap;
    animation: nf-ticker-roll 60s linear infinite;
}

.stats-ticker:hover .stats-ticker__roll {
    animation-play-state: paused;
}

/* Uniform per-name spacing keeps the two halves identical so the -50% loop
   is seamless (no leading/trailing-gap mismatch). */
.stats-ticker__roll .nm {
    margin-left: 1.6rem;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.125rem;
    color: rgba(245, 241, 231, 0.85);
}

.stats-ticker__roll .sep {
    margin-left: 1rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--brass);
}

@keyframes nf-ticker-roll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@keyframes nf-live-pulse {
    0%, 100% { opacity: 0.55; box-shadow: 0 0 0 4px rgba(196, 72, 39, 0.15); }
    50% { opacity: 1; box-shadow: 0 0 0 6px rgba(196, 72, 39, 0.25); }
}

@media (prefers-reduced-motion: reduce) {
    .stats-ticker__roll { animation: none; }
    .stats-live-dot { animation: none; }
}

@media (max-width: 560px) {
    .stats-figures { gap: 2.5rem; }
}

/* ---- Featured Products ---- */
.featured-products {
    padding: var(--space-xl) 0;
    background: var(--color-white);
}

.featured-products h2 {
    text-align: center;
    margin-bottom: var(--space-lg);
}

/* ---- Product Cards ---- */
.product-card,
.woocommerce ul.products li.product {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    overflow: hidden;
    position: relative;
}

.product-card:hover,
.woocommerce ul.products li.product:hover {
    border-color: var(--color-accent);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.product-card-image {
    overflow: hidden;
}

.woocommerce ul.products li.product a img {
    margin-bottom: 0;
    transition: transform var(--transition-slow);
}

.woocommerce ul.products li.product:hover a img {
    transform: scale(1.05);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-dark);
    padding: var(--space-sm) var(--space-sm) 0;
}

.woocommerce ul.products li.product .price {
    color: var(--color-accent) !important;
    font-weight: 600;
    font-size: 1.1rem;
    padding: var(--space-xs) var(--space-sm);
}

.woocommerce ul.products li.product .price del {
    color: var(--color-gray) !important;
    opacity: 0.6;
}

.woocommerce ul.products li.product .button {
    margin: var(--space-sm);
    width: calc(100% - 2 * var(--space-sm));
}

/* ---- WooCommerce Shop Page ---- */
.woocommerce-content {
    padding: var(--space-lg) 0;
}

.woocommerce .woocommerce-result-count {
    color: var(--color-gray);
}

.woocommerce .woocommerce-ordering select {
    color: var(--color-dark);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.5rem;
}

/* ---- Page Hero ---- */
.page-hero {
    padding: var(--space-xl) 0 var(--space-lg);
    text-align: center;
    background: var(--color-off-white);
    border-bottom: 1px solid var(--color-border);
}

.page-hero h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--color-dark);
    margin-bottom: var(--space-xs);
}

.page-hero .hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: var(--color-gray);
}

/* ---- Single Product Page ---- */
.woocommerce div.product div.images {
    background: var(--color-off-white);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
}

.woocommerce div.product p.price {
    color: var(--color-accent) !important;
    font-size: 1.75rem;
    font-weight: 700;
}

.woocommerce div.product .product_title {
    font-size: 2rem;
    color: var(--color-dark);
    font-weight: 700;
}

.woocommerce div.product .woocommerce-product-details__short-description {
    color: var(--color-gray-dark);
    font-size: 1.05rem;
    line-height: 1.7;
}

.woocommerce div.product form.cart .quantity input {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-dark);
    padding: 0.5rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
    padding: 0;
    margin-bottom: var(--space-md);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: var(--color-off-white);
    border-color: var(--color-border);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    background: var(--color-white);
    border-bottom-color: var(--color-white);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    font-weight: 500;
    color: var(--color-gray);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--color-accent);
}

.woocommerce div.product .woocommerce-tabs .panel {
    color: var(--color-gray-dark);
    font-family: var(--font-serif);
    font-size: 1.08rem;
    line-height: 1.7;
    max-width: 60rem;
}

.woocommerce div.product .woocommerce-tabs .panel > h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin-bottom: var(--space-md);
}

.woocommerce div.product .woocommerce-tabs .panel h3 {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
    font-size: 1.6rem;
}

.woocommerce div.product .woocommerce-tabs .panel p {
    margin-bottom: var(--space-md);
}

.woocommerce div.product .woocommerce-tabs .panel ul {
    list-style: none;
    padding-left: 0;
    margin: 0 0 var(--space-md);
}

.woocommerce div.product .woocommerce-tabs .panel ul li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: 0.85rem;
}

.woocommerce div.product .woocommerce-tabs .panel ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 0.6rem;
    height: 1px;
    background: var(--clay);
}

.woocommerce div.product .woocommerce-tabs .panel ul li strong {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--ink);
}

/* WooCommerce attribute table (Additional information tab) */
.woocommerce div.product .woocommerce-tabs .panel table.shop_attributes {
    margin-top: var(--space-sm);
}

.woocommerce div.product .woocommerce-tabs .panel table.shop_attributes th {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-soft);
    width: 12rem;
}

/* Product tabs on mobile: WooCommerce's default inline tabs wrap into a
   messy multi-row layout with a broken underline. Stack them as clean
   full-width blocks and drop the angled-corner / underline decorations. */
@media (max-width: 600px) {
    .woocommerce div.product .woocommerce-tabs ul.tabs {
        padding-left: 0;
    }
    .woocommerce div.product .woocommerce-tabs ul.tabs::before {
        display: none;
    }
    .woocommerce div.product .woocommerce-tabs ul.tabs li {
        display: block;
        width: 100%;
        margin: 0 0 -1px;
        border-radius: 0;
        text-align: center;
    }
    .woocommerce div.product .woocommerce-tabs ul.tabs li::before,
    .woocommerce div.product .woocommerce-tabs ul.tabs li::after {
        display: none;
    }
    .woocommerce div.product .woocommerce-tabs ul.tabs li.active {
        border-bottom-color: var(--color-border);
    }
    .woocommerce div.product .woocommerce-tabs ul.tabs li a {
        display: block;
        padding: 0.85rem 1rem;
    }
}

/* ---- Cart & Checkout ---- */
.woocommerce table.shop_table {
    background: var(--color-white);
    border-color: var(--color-border);
    border-radius: var(--radius-md);
}

.woocommerce table.shop_table th {
    font-weight: 600;
    color: var(--color-dark);
    border-color: var(--color-border);
}

.woocommerce table.shop_table td {
    color: var(--color-gray-dark);
    border-color: var(--color-border);
}

.woocommerce-cart .cart-collaterals .cart_totals {
    background: var(--color-off-white);
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

/* ---- Cart page TLC ---- */
.woocommerce-cart table.shop_table {
    border-collapse: separate;
    overflow: hidden;
}

.woocommerce-cart table.shop_table thead th {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-soft);
    background: var(--bone-deep);
    padding: 0.9rem 1rem;
}

.woocommerce-cart table.shop_table td {
    padding: 1.5rem 1rem;
    vertical-align: top;
}

.woocommerce-cart .product-thumbnail img {
    width: 92px;
    height: auto;
    border-radius: 3px;
    outline: 1px solid rgba(15, 14, 12, 0.08);
    outline-offset: -1px;
}

.woocommerce-cart td.product-name > a {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--ink);
}

.woocommerce-cart td.product-name > a:hover {
    color: var(--clay);
}

/* The personalization — name / meaning / poem — is the heart of the item */
.woocommerce-cart td.product-name .variation {
    margin: 0.65rem 0 0;
    font-size: 0.95rem;
}

.woocommerce-cart td.product-name .variation dt,
.woocommerce-cart td.product-name .variation dd {
    float: none;
    display: block;
    width: auto;
    clear: both;
}

.woocommerce-cart td.product-name .variation dt {
    margin: 0.7rem 0 0;
    padding: 0;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--brass);
}

.woocommerce-cart td.product-name .variation dd {
    margin: 0.15rem 0 0;
    padding: 0;
    color: var(--ink-soft);
}

.woocommerce-cart td.product-name .variation dd p {
    margin: 0;
}

.woocommerce-cart td.product-name .variation dd.variation-Poem p {
    font-family: var(--font-serif);
    font-style: italic;
    line-height: 1.45;
    color: var(--ink);
}

/* Restore the blank line between the poem's two stanzas (the generic
   dd p { margin: 0 } above otherwise collapses them into one block) */
.woocommerce-cart td.product-name .variation dd.variation-Poem p + p {
    margin-top: 0.85rem;
}

.woocommerce-cart .product-remove a.remove {
    color: var(--ink-soft) !important;
    font-weight: 400;
}

.woocommerce-cart .product-remove a.remove:hover {
    background: transparent !important;
    color: var(--clay) !important;
}

.woocommerce-cart .cart_totals h2 {
    font-size: 1.6rem;
    margin-bottom: var(--space-sm);
}

/* Coupon input: pill-shaped to match the buttons, same height */
.woocommerce-cart .coupon .input-text#coupon_code {
    width: 12rem;
    max-width: 48%;
    min-width: 8rem;
    padding: 0.8rem 1.2rem;
    border: 1.5px solid var(--color-border);
    border-radius: 999px;
    line-height: 1.4;
}

/* Keep the coupon input, Apply coupon, and Update cart the same height */
.woocommerce-cart #coupon_code,
.woocommerce-cart button[name="apply_coupon"],
.woocommerce-cart button[name="update_cart"] {
    min-height: 3.2rem;
}

/* Compact, tidy quantity control, aligned onto the price line */
.woocommerce-cart .product-quantity .quantity {
    margin: 0;
}

.woocommerce-cart .product-quantity .qty {
    width: 3.6rem;
    padding: 0.45rem 0.3rem 0.45rem 0.55rem;
    text-align: center;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 0.95rem;
}

/* Drop price + subtotal to sit on the same line as the quantity box
   (the product cell title/thumbnail stay pinned to the top) */
.woocommerce-cart td.product-price,
.woocommerce-cart td.product-subtotal {
    padding-top: 1.8rem;
}

/* ==========================================
   Checkout — two-column "order ticket" layout
   (template: woocommerce/checkout/form-checkout.php)
   ========================================== */

/* The shortcode page wraps the form in .entry-content (max 800px); the
   checkout wants the full content width to breathe across two columns. */
.woocommerce-checkout .entry-content,
.woocommerce-checkout .content-area article {
    max-width: none;
}

.nf-checkout__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}

/* Stack billing + shipping full width down the left column (WooCommerce
   floats .col-1/.col-2 side by side by default — too cramped in a column). */
.nf-checkout #customer_details.col2-set {
    display: block;
}

.nf-checkout #customer_details .col-1,
.nf-checkout #customer_details .col-2 {
    width: 100%;
    float: none;
}

.nf-checkout #customer_details .col-2:not(:empty) {
    margin-top: var(--space-md);
}

/* Section headings — Billing details / Ship to… / Your order */
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3,
.nf-checkout #order_review_heading {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.5rem;
    letter-spacing: -0.018em;
    color: var(--ink);
    margin: 0 0 var(--space-md);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--color-border);
}

/* Editorial field labels — mono micro-caps, matching the brand markers */
.nf-checkout .form-row label,
.nf-checkout .woocommerce-additional-fields label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-soft);
    margin-bottom: 0.45rem;
}

/* Checkbox rows (create account, ship elsewhere) read as plain sentence text */
.nf-checkout .form-row.woocommerce-validated label.checkbox,
.nf-checkout label.woocommerce-form__label-for-checkbox,
.nf-checkout .form-row label.checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink-soft);
}

.nf-checkout .form-row .required {
    color: var(--clay);
    border: none;
    text-decoration: none;
}

.nf-checkout .form-row { margin-bottom: var(--space-sm); }

.nf-checkout .form-row .input-text,
.nf-checkout .form-row select,
.nf-checkout .select2-container .select2-selection--single {
    min-height: 3.1rem;
}

/* ---- The sticky order ticket ---- */
.nf-checkout__aside {
    position: sticky;
    top: calc(var(--header-height) + var(--space-sm));
}

.nf-checkout__ticket {
    position: relative;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

/* brass/clay hairline crowning the ticket */
.nf-checkout__ticket::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--clay), var(--brass-2));
}

/* Strip WooCommerce's table chrome — the ticket itself is the frame */
.nf-checkout #order_review table.shop_table {
    background: transparent;
    border: none;
    border-radius: 0;
    margin: 0;
    width: 100%;
}

.nf-checkout #order_review table.shop_table thead th {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-soft);
    background: transparent;
    padding: 0 0 var(--space-xs);
    border-bottom: 1px solid var(--color-border);
}

.nf-checkout #order_review .cart_item td {
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

.nf-checkout #order_review td.product-name {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.2;
}

.nf-checkout #order_review td.product-name .product-quantity {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--ink-soft);
}

.nf-checkout #order_review td.product-total {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
    color: var(--ink);
}

/* The personalization — For / Meaning / Poem — carried from the cart.
   Mirrors the cart treatment: brass mono labels, the poem in italic serif. */
.nf-checkout #order_review .cart_item .variation {
    margin: 0.7rem 0 0;
}

.nf-checkout #order_review .variation dt,
.nf-checkout #order_review .variation dd {
    float: none;
    display: block;
    width: auto;
    clear: both;
    margin: 0;
    padding: 0;
}

.nf-checkout #order_review .variation dt {
    margin-top: 0.6rem;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--brass);
}

.nf-checkout #order_review .variation dd {
    margin-top: 0.15rem;
    font-size: 0.9rem;
    color: var(--ink-soft);
}

.nf-checkout #order_review .variation dd p { margin: 0; }

.nf-checkout #order_review .variation dd.variation-Poem p {
    font-family: var(--font-serif);
    font-style: italic;
    line-height: 1.45;
    color: var(--ink);
}

.nf-checkout #order_review .variation dd.variation-Poem p + p {
    margin-top: 0.75rem;
}

/* Totals */
.nf-checkout #order_review tfoot th,
.nf-checkout #order_review tfoot td {
    border: none;
    padding: 0.4rem 0;
    background: transparent;
}

.nf-checkout #order_review tfoot th {
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--ink-soft);
    text-align: left;
}

.nf-checkout #order_review tfoot td {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
    color: var(--ink);
}

.nf-checkout #order_review tfoot .order-total th,
.nf-checkout #order_review tfoot .order-total td {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-sm);
    margin-top: var(--space-xs);
}

.nf-checkout #order_review tfoot .order-total th {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--ink);
}

.nf-checkout #order_review tfoot .order-total td {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--ink);
}

/* Payment box */
.nf-checkout #payment {
    background: transparent;
    border-radius: 0;
    margin-top: var(--space-md);
}

.nf-checkout #payment ul.payment_methods {
    border: none;
    padding: 0;
    margin: 0;
}

.nf-checkout #payment ul.payment_methods li {
    margin-bottom: 0.5rem;
}

.nf-checkout #payment div.payment_box {
    background: var(--bone-deep);
    color: var(--color-gray-dark);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
}

.nf-checkout #payment div.payment_box::before {
    border-bottom-color: var(--bone-deep) !important;
}

.nf-checkout #payment .place-order { padding: 0; }

.nf-checkout #place_order {
    width: 100%;
    margin-top: var(--space-sm);
    padding: 1rem 1.75rem;
    font-size: 1rem;
}

.nf-checkout #payment .woocommerce-privacy-policy-text p,
.nf-checkout .woocommerce-terms-and-conditions-wrapper {
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

/* Reassurance footnote under the place-order button */
.nf-checkout__assurance {
    margin: var(--space-sm) 0 0;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-soft);
    text-align: center;
}

/* Login + coupon toggles that WooCommerce prints above the form */
.woocommerce-checkout form.login,
.woocommerce-checkout form.checkout_coupon {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

/* Collapse to a single column on smaller screens; release the sticky aside */
@media (max-width: 900px) {
    .nf-checkout__grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    .nf-checkout__aside {
        position: static;
    }
}

/* ---- Forms ---- */
.woocommerce form .form-row label,
label {
    color: var(--color-gray-dark);
    font-weight: 500;
    font-size: 0.95rem;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="date"],
textarea,
select {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-dark);
    padding: 0.75rem;
    font-family: var(--font-body);
    font-size: 1rem;
    width: 100%;
    transition: border-color var(--transition-fast);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--color-accent);
    outline: none;
    box-shadow: 0 0 0 3px var(--color-accent-light);
}

/* ---- WooCommerce Notices ---- */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
    background: var(--color-off-white);
    border-top-color: var(--color-accent);
    color: var(--color-dark);
    border-radius: var(--radius-sm);
}

.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before {
    color: var(--color-accent);
}

.woocommerce .woocommerce-error {
    background: #FEF2F2;
    border-top-color: var(--color-error);
    color: var(--color-dark);
    border-radius: var(--radius-sm);
}

/* ---- Breadcrumbs ---- */
.woocommerce .woocommerce-breadcrumb {
    color: var(--color-gray);
    font-size: 0.85rem;
    margin-bottom: var(--space-md);
}

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

/* ---- Pagination ---- */
.woocommerce nav.woocommerce-pagination ul {
    border-color: var(--color-border);
}

.woocommerce nav.woocommerce-pagination ul li {
    border-color: var(--color-border);
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    background: var(--color-white);
    color: var(--color-dark);
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--color-accent);
    color: var(--color-white);
}

/* ---- Sale Badge ---- */
.woocommerce span.onsale {
    background: var(--color-accent);
    color: var(--color-white);
    font-weight: 600;
    border-radius: var(--radius-sm);
}

/* ---- Star Rating ---- */
.woocommerce .star-rating span::before {
    color: var(--color-accent);
}

/* ---- Footer ---- */
.site-footer {
    background: var(--color-dark);
    color: var(--color-white);
    padding: var(--space-lg) 0 var(--space-md);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

/* Two-column fallback when there are no social links */
.footer-grid--compact {
    grid-template-columns: 2fr 1fr;
}

.site-footer h3 {
    color: var(--color-white);
    font-size: 1.5rem;
    margin-bottom: var(--space-xs);
}

.site-footer .tagline {
    color: var(--color-footer-muted);
    font-size: 1rem;
}

.footer-nav h4,
.footer-connect h4 {
    color: var(--color-white);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-sm);
}

.footer-menu {
    list-style: none;
    padding: 0;
}

.footer-menu li {
    margin-bottom: var(--space-xs);
}

.footer-menu li a {
    color: var(--color-footer-muted);
    font-size: 0.95rem;
    transition: color var(--transition-fast);
}

.footer-menu li a:hover {
    color: var(--color-white);
}

/* Vertical list to mirror the Navigate column (the brand is text-forward —
   no icons elsewhere, so a typographic list reads more cohesively). */
.social-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-top: 0;
}

.social-links a {
    color: var(--color-footer-muted);
    font-size: 0.95rem;
    transition: color var(--transition-fast);
}

.social-links a:hover {
    color: var(--color-white);
}

/* Offsite-link indicator (↗) on links that leave the site: the social
   profiles and the Yellow Lab Creations credit. Persistent in every state —
   no hover or opacity gating — so it's a reliable affordance for keyboard
   and touch users, not just on mouse hover. It inherits the link's
   currentColor, so it stays exactly as legible as the link text and
   brightens with it on hover. The glyph is decorative; the new-tab meaning
   is conveyed to assistive tech by .screen-reader-text in the markup. */
.nf-offsite::after {
    content: ' \2197';
    font-size: 0.85em;
    margin-left: 0.12em;
}

/* Visually hidden, available to screen readers (matches WordPress core). */
.screen-reader-text {
    border: 0;
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
}

.footer-bottom {
    border-top: 1px solid var(--color-gray-dark);
    padding-top: var(--space-md);
    text-align: center;
}

.footer-bottom p {
    font-size: 0.85rem;
    color: var(--color-footer-muted);
    margin-bottom: var(--space-xs);
}

.footer-bottom a {
    color: var(--color-footer-muted);
    transition: color var(--transition-fast);
}

.footer-bottom a:hover {
    color: var(--color-white);
}

.footer-legal {
    margin-bottom: var(--space-sm);
    font-size: 0.85rem;
    line-height: 1.9;
}

.footer-legal a {
    color: var(--color-footer-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-legal a:hover {
    color: var(--color-white);
    text-decoration: underline;
}

.footer-legal .sep {
    color: var(--color-footer-muted);
    opacity: 0.5;
    margin: 0 0.5rem;
}

/* ---- 404 Page ---- */
.error-404 {
    text-align: center;
    padding: var(--space-xl) 0;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.error-404 h1 {
    font-size: clamp(4rem, 15vw, 10rem);
    color: var(--color-accent);
    line-height: 1;
}

/* ---- Content Area ---- */
.content-area {
    min-height: 50vh;
}

.content-area article {
    max-width: 800px;
    margin: 0 auto;
}

.entry-content {
    font-size: 1.05rem;
    line-height: 1.8;
}

.entry-content p {
    margin-bottom: var(--space-md);
}

/* ---- Brand content pages (About / Contact) ---- */
.entry-content .nf-lead {
    font-family: var(--font-serif);
    font-size: clamp(1.25rem, 2.5vw, 1.65rem);
    line-height: 1.5;
    color: var(--ink);
    margin-bottom: var(--space-md);
}

.entry-content .nf-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm) var(--space-md);
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-md);
    margin: var(--space-md) 0 var(--space-lg);
}

.entry-content .nf-specs dt {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-soft);
}

.entry-content .nf-specs dd {
    margin: 0.3rem 0 0;
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: var(--ink);
}

.entry-content .nf-steps {
    list-style: none;
    counter-reset: nf-step;
    padding: 0;
    margin: var(--space-md) 0 var(--space-lg);
}

.entry-content .nf-steps li {
    counter-increment: nf-step;
    position: relative;
    padding-left: 2.75rem;
    margin-bottom: var(--space-md);
}

.entry-content .nf-steps li::before {
    content: counter(nf-step, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0.15rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--clay);
}

.entry-content .nf-cta-row {
    margin-top: var(--space-lg);
}

@media (max-width: 600px) {
    .entry-content .nf-specs {
        grid-template-columns: 1fr;
    }
}

/* ---- Mobile Nav ---- */
.main-nav--mobile {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-white);
    z-index: 9999;
    padding: var(--space-lg) var(--space-md);
    overflow-y: auto;
}

.main-nav--mobile.active {
    display: block;
}

.main-nav--mobile .nav-menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding: 0;
}

.main-nav--mobile .nav-menu li a {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-dark);
    padding: var(--space-xs) 0;
    transition: color var(--transition-base);
}

.main-nav--mobile .nav-menu li a:hover,
.main-nav--mobile .nav-menu li.current-menu-item a {
    color: var(--color-accent);
}

/* ---- Contact Form 7 ---- */
.wpcf7 .wpcf7-form-control-wrap {
    display: block;
    margin-bottom: var(--space-sm);
}

/* ---- WordPress Admin Bar Adjustment ---- */
.admin-bar .site-header {
    top: 32px;
}

@media (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

/* ---- Responsive ---- */
@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .site-main {
        padding-left: var(--space-sm);
        padding-right: var(--space-sm);
    }

    .container {
        padding-left: var(--space-sm);
        padding-right: var(--space-sm);
    }

    .main-nav--desktop {
        display: none !important;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .hero {
        min-height: 60vh;
    }

    .hero h1 {
        font-size: clamp(2rem, 10vw, 3rem);
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .woocommerce ul.products[class*="columns-"] li.product {
        width: 48%;
    }
}

@media (max-width: 480px) {
    .woocommerce ul.products[class*="columns-"] li.product {
        width: 100%;
    }

    .hero h1 {
        font-size: 2rem;
    }
}