/*
Theme Name: Dance Emotion
Theme URI: https://danceemotion.local
Author: Dance Emotion Ltd
Author URI: https://danceemotion.local
Description: Editorial wholesale catalog theme for Dance Emotion Ltd — Hong Kong-based dancewear supplier to studios, academies and retailers across Asia. Clean, fashion-forward, B2B enquiry-driven. Monochrome palette; soft-yellow hero accent.
Version: 2.1.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dance-emotion
Tags: woocommerce, e-commerce, editorial, minimal, custom-menu, custom-logo, featured-images, translation-ready
*/

/* ==========================================================================
   Tokens — Dance Emotion brand guidelines
   ========================================================================== */
:root {
    /* ── Primary ── */
    --color-black:        #1A1A1A;
    --color-white:        #FFFFFF;

    /* ── Secondary ── */
    --color-blush:        #F1CFD2;
    --color-powder:       #C9DCF1;

    /* ── Accent / Seasonal ── */
    --color-accent:       #FFF3C1;

    /* ── UI Greys ── */
    --color-bg:           #FFFFFF;
    --color-surface:      #F5F5F5;
    --color-border:       #E0E0E0;
    --color-text-primary: #1A1A1A;
    --color-text-muted:   #666666;

    /* ── Typography ── */
    --font-display:       'Poppins', sans-serif;
    --font-serif:         'Cormorant Garamond', serif;
    --font-body:          'Inter', sans-serif;
    --font-script:        'Dancing Script', cursive;

    /* ── Spacing ── */
    --section-padding:    80px;
    --section-padding-sm: 48px;
    --container-max:      1200px;

    /* ── Legacy aliases — mapped to brand tokens above; kept for backwards
       compatibility with existing rules in this stylesheet. ── */
    --color-text:           var(--color-text-primary);
    --color-muted:          var(--color-text-muted);
    --color-faint:          #888888;
    --color-line:           var(--color-border);
    --color-image-fallback: var(--color-surface);
    --color-hero-accent:    var(--color-accent);
    --container-pad:        40px;
    --tx:                   200ms ease;
}

/* ==========================================================================
   Reset / base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-primary);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2 {
    font-family: var(--font-display);
    color: var(--color-text-primary);
}

h3, h4, h5, p, li, a {
    font-family: var(--font-body);
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }

a {
    color: var(--color-text-primary);
    text-decoration: none;
    transition: color var(--tx), background-color var(--tx), border-color var(--tx);
}
a:hover, a:focus { color: var(--color-text-muted); }

:focus-visible { outline: 2px solid var(--color-black); outline-offset: 2px; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; color: var(--color-black); }

p { margin: 0 0 1em; }

button { font: inherit; cursor: pointer; }

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

.skip-link {
    position: absolute;
    left: -9999px;
    top: 8px;
    z-index: 9999;
    padding: 8px 14px;
    background: var(--color-black);
    color: var(--color-white);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.skip-link:focus { left: 8px; }

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 40px;
}

.site-main { min-height: 50vh; }

/* ==========================================================================
   Header — announcement / utility / logo / nav
   ========================================================================== */
.site-header {
    background: var(--color-white);
    position: relative;
    z-index: 100;
    border-bottom: 1px solid var(--color-border);
}

.announcement-bar {
    padding: 8px 16px;
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: var(--color-black);
    color: var(--color-white);
    line-height: 1;
}
.announcement-bar__inner { display: inline-flex; align-items: center; gap: 10px; }
.announcement-bar__icon { display: inline-flex; }
.announcement-bar__icon svg { width: 14px; height: 14px; }

.utility-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px var(--container-pad);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.utility-bar__social { display: flex; gap: 16px; align-items: center; }
.utility-bar__social a { display: inline-flex; color: var(--color-black); }
.utility-bar__social svg { width: 16px; height: 16px; }
.utility-bar__right { display: flex; gap: 24px; align-items: center; color: var(--color-black); }
.utility-bar__lang a { padding-inline: 4px; }
.utility-bar__lang a:hover { color: var(--color-muted); }
.utility-bar__stockist:hover { color: var(--color-muted); }

.logo-block { padding: 0; }

/* Logo block — image size preserved (330 px wide); tightened vertical padding. */
.site-logo {
    text-align: center;
    padding: 8px 0 6px;
}
.site-logo a {
    display: inline-block;
    line-height: 0;
    text-decoration: none;
}
.site-logo img {
    width: 330px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Primary nav — wp_nav_menu output (.main-nav > .nav-menu > li > a). */
.main-nav {
    border-bottom: 1px solid var(--color-border);
    padding: 0;
    position: relative;
}
.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
}
.nav-menu > li { position: relative; }
.nav-menu > li > a {
    display: block;
    padding: 11px 32px;
    font-family: var(--font-body);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    text-decoration: none;
    white-space: nowrap;
    transition: opacity var(--tx);
}
.nav-menu > li > a:hover,
.nav-menu > li > a:focus { opacity: 0.5; color: var(--color-text-primary); }

/* Active-page indication — WordPress adds these classes to the current item. */
.nav-menu > li.current-menu-item > a,
.nav-menu > li.current_page_item > a,
.nav-menu > li.current-menu-ancestor > a { font-weight: 600; }

.menu-toggle {
    display: none;
    background: none;
    border: 1px solid var(--color-line);
    padding: 8px 14px;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-black);
}

/* ==========================================================================
   Buttons — outlined-black; hover fills
   ========================================================================== */
.btn {
    display: inline-block;
    padding: 14px 32px;
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border: 1px solid var(--color-black);
    background: transparent;
    color: var(--color-black);
    text-align: center;
    line-height: 1;
    transition: background var(--tx), color var(--tx), border-color var(--tx);
    cursor: pointer;
}
.btn:hover,
.btn:focus {
    background: var(--color-black);
    color: var(--color-white);
}

/* On dark image: invert outline so the button is visible. */
.btn--on-dark {
    border-color: var(--color-white);
    color: var(--color-white);
}
.btn--on-dark:hover,
.btn--on-dark:focus {
    background: var(--color-white);
    color: var(--color-black);
}

.btn--block { display: block; width: 100%; }

/* Legacy aliases — kept for compatibility if any template still uses these. */
.btn--solid { background: var(--color-black); color: var(--color-white); }
.btn--solid:hover { background: transparent; color: var(--color-black); }

/* ==========================================================================
   Section 1 — Hero (two panel images, overlay text)
   DWC-measured: 80vh viewport-driven height, max 800 / min 420.
   ========================================================================== */
.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    height: 80vh;
    max-height: 800px;
    min-height: 420px;
    overflow: hidden;
    position: relative;
    background: var(--color-image-fallback);
}
.hero-panel {
    position: relative;
    overflow: hidden;
    height: 100%;
    background: var(--color-image-fallback);
}
.hero-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
    padding: 0 40px;
    text-align: center;
}
.hero-overlay .hero-label {
    display: block;
    font-family: var(--font-body);
    font-size: clamp(13px, 1.2vw, 17px);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    color: rgba(255,255,255,0.92);
    margin-bottom: 12px;
}
.hero-overlay .hero-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(51px, 7.5vw, 110px);
    line-height: 0.95;
    text-transform: lowercase;
    color: var(--color-accent); /* The only accent in the entire theme. */
    margin: 0 0 18px;
    letter-spacing: -0.04em;
}
.hero-overlay .hero-sub {
    font-family: var(--font-body);
    font-size: clamp(16px, 1.3vw, 20px);
    font-weight: 400;
    letter-spacing: 0.02em;
    color: rgba(255,255,255,0.92);
    margin-bottom: 22px;
    text-transform: lowercase;
}
.hero-overlay .hero-cta {
    display: inline-block;
    border: 1px solid rgba(255,255,255,0.85);
    color: #fff;
    background: transparent;
    padding: 11px 26px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    text-decoration: none;
    pointer-events: all;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.hero-overlay .hero-cta:hover,
.hero-overlay .hero-cta:focus {
    background: #fff;
    color: #1A1A1A;
    border-color: #fff;
}

/* ==========================================================================
   Section 2 — Two-column image banners
   ========================================================================== */
.banner-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: var(--color-white);
}
.banner-pair__cell {
    position: relative;
    min-height: 500px;
    overflow: hidden;
    background: var(--color-image-fallback);
}
.banner-pair__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms ease;
}
.banner-pair__cell:hover .banner-pair__img { transform: scale(1.02); }
.banner-pair__cell::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.35) 100%);
    pointer-events: none;
}
.banner-pair__content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 24px;
    color: var(--color-white);
    z-index: 1;
}
.banner-pair__label {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-white);
    margin-bottom: 14px;
}
.banner-pair__title {
    font-family: var(--font-display);
    font-size: 36px;
    text-transform: lowercase;
    color: var(--color-white);
    margin: 0 0 18px;
    line-height: 1;
}
.banner-pair__link {
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-white);
    text-decoration: underline;
    text-underline-offset: 4px;
}
.banner-pair__link:hover { color: var(--color-white); opacity: 0.85; }

/* ==========================================================================
   Section 3 — Three-column category grid (image tiles)
   ========================================================================== */
.category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.category-grid__col {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    display: block;
    background: var(--color-image-fallback);
}
.category-grid__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease;
    z-index: 1;
}
.category-grid__col::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.0) 50%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
    z-index: 2;
}
.category-grid__col:hover .category-grid__img { transform: scale(1.04); }
.category-grid__inner {
    position: absolute;
    left: 32px;
    bottom: 32px;
    z-index: 3;
}
.category-grid__label {
    font-family: var(--font-display);
    font-size: 28px;
    text-transform: lowercase;
    color: var(--color-white);
    line-height: 1;
}

/* ==========================================================================
   Section 4 — Brand statement (image bg, dark overlay, white text)
   ========================================================================== */
.brand-statement {
    position: relative;
    overflow: hidden;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 96px 24px;
    background: var(--color-black);
    color: var(--color-white);
}
.brand-statement__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
.brand-statement__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 2;
}
.brand-statement__bg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 20vw;
    line-height: 1;
    text-transform: lowercase;
    color: var(--color-white);
    opacity: 0.08;
    pointer-events: none;
    white-space: nowrap;
    z-index: 3;
}
.brand-statement__inner {
    position: relative;
    z-index: 4;
    text-align: center;
    max-width: 720px;
}
.brand-statement__eyebrow {
    font-family: var(--font-body);
    font-size: 13px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-white);
    margin-bottom: 24px;
}
.brand-statement__title {
    font-family: var(--font-display);
    font-size: clamp(48px, 6vw, 80px);
    text-transform: lowercase;
    color: var(--color-white);
    line-height: 1;
    margin: 0 0 28px;
}
.brand-statement__body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.8;
    color: rgba(255,255,255,0.85);
    max-width: 600px;
    margin: 0 auto 36px;
}

/* ==========================================================================
   Section 5 — Three feature boxes
   ========================================================================== */
.feature-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
}
.feature-row__cell {
    padding: 48px 24px;
    text-align: center;
    border-right: 2px solid var(--color-line);
}
.feature-row__cell:last-child { border-right: none; }
.feature-row__title {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-black);
    margin-bottom: 12px;
}
.feature-row__body {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-muted);
    margin: 0;
    max-width: 280px;
    margin-inline: auto;
}

/* ==========================================================================
   Section 6 — Partner CTA (white; defined by border only)
   ========================================================================== */
.partner-cta {
    background: var(--color-white);
    padding: 80px 24px;
    text-align: center;
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
}
.partner-cta__title {
    font-family: var(--font-display);
    font-size: 28px;
    text-transform: lowercase;
    color: var(--color-black);
    margin-bottom: 18px;
    letter-spacing: 0.01em;
    line-height: 1;
}
.partner-cta__body {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-muted);
    max-width: 560px;
    margin: 0 auto 32px;
}
.partner-cta__buttons {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.partner-cta__small {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--color-muted);
    margin: 0;
}

/* ==========================================================================
   Section 7 — Newsletter strip
   ========================================================================== */
.newsletter-strip {
    border-top: 1px solid var(--color-line);
    background: var(--color-white);
    padding: 60px 24px;
    text-align: center;
}
.newsletter-strip__text {
    font-family: var(--font-body);
    font-size: 14px;
    letter-spacing: 0.08em;
    color: var(--color-black);
    margin-bottom: 24px;
}
.newsletter-strip__form {
    display: flex;
    gap: 8px;
    max-width: 480px;
    margin-inline: auto;
}
.newsletter-strip__form input[type="email"] {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--color-black);
    font-family: var(--font-body);
    font-size: 13px;
    background: var(--color-white);
    color: var(--color-black);
}
.newsletter-strip__form input[type="email"]:focus { outline: none; }
.newsletter-strip__form button {
    padding: 12px 24px;
    background: var(--color-black);
    color: var(--color-white);
    border: 1px solid var(--color-black);
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.newsletter-strip__form button:hover {
    background: transparent;
    color: var(--color-black);
}
.newsletter-strip .wpcf7-form { display: block; }
.newsletter-strip .wpcf7-form p { margin: 0; }
.newsletter-strip .wpcf7-form-control-wrap { display: block; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-primary);
    padding-top: 60px;
}
.site-footer__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 48px;
    max-width: var(--container-max);
    margin-inline: auto;
    padding: 0 var(--container-pad) 48px;
}
.footer-col h4 {
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-black);
    margin-bottom: 20px;
    font-weight: 600;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-muted);
}
.footer-col a:hover { color: var(--color-black); }

/* Footer script-brand accent — spec class .footer-brand-name (CSS-only; markup
   currently uses .footer-script — both rules kept for forwards-compat). */
.footer-brand-name {
    font-family: var(--font-script);
    font-size: 24px;
    color: var(--color-text-primary);
}

/* Decorative footer script — neutral light gray (no warm tones). */
.footer-col--brand .footer-script {
    font-family: var(--font-script);
    color: #D5D5D5;
    line-height: 1;
    margin: 0;
}
.footer-col--brand .footer-script--lg { font-size: 48px; }
.footer-col--brand .footer-script--md { font-size: 32px; margin-top: 6px; }
.footer-col--brand .footer-address {
    margin-top: 24px;
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--color-faint);
    line-height: 2;
}

.footer-social { display: flex; gap: 14px; margin-bottom: 18px; }
.footer-social a { display: inline-flex; color: var(--color-black); }
.footer-social svg { width: 20px; height: 20px; }
.footer-lang {
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--color-muted);
}
.footer-lang a { padding-inline: 4px; }

.footer-bottom {
    border-top: 1px solid var(--color-line);
    padding: 20px var(--container-pad);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--color-faint);
    flex-wrap: wrap;
    gap: 8px;
}

/* ==========================================================================
   Standard page template
   ========================================================================== */
.page-template .page-header { text-align: center; padding: 80px 24px 40px; }
.page-template .page-title {
    font-family: var(--font-display);
    font-size: 48px;
    text-transform: lowercase;
    color: var(--color-black);
    margin: 0;
    line-height: 1;
}
.page-template .page-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 24px 80px;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-text);
}
.page-template .page-content h2 {
    font-family: var(--font-display);
    font-size: 28px;
    text-transform: lowercase;
    margin-top: 2em;
    margin-bottom: 0.5em;
}
.page-template .page-content h3 {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 18px;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

/* ==========================================================================
   WooCommerce — archive grid, product cards, single product
   ========================================================================== */
.wc-archive-header { text-align: center; padding: 80px 24px 24px; }
.wc-archive-title {
    font-family: var(--font-display);
    font-size: 48px;
    text-transform: lowercase;
    color: var(--color-black);
    margin: 0;
    line-height: 1;
}
.wc-archive-description {
    margin-top: 14px;
    font-family: var(--font-body);
    color: var(--color-muted);
    max-width: 640px;
    margin-inline: auto;
}

.wc-category-pills {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 16px 24px 40px;
}
.wc-category-pills a {
    display: inline-block;
    padding: 8px 18px;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-black);
}
.wc-category-pills a:hover,
.wc-category-pills a.is-active {
    background: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
}

.woocommerce ul.products,
ul.products.wc-products-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 24px;
    list-style: none;
    margin: 0;
    padding: 0 var(--container-pad) 80px;
    max-width: var(--container-max);
    margin-inline: auto;
}
.woocommerce ul.products li.product,
ul.products.wc-products-grid li.product {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    padding: 0 !important;
    list-style: none;
}
.product-card { display: block; }
.product-card__media {
    aspect-ratio: 1;
    background: var(--color-image-fallback);
    overflow: hidden;
    margin-bottom: 16px;
}
.product-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease;
}
.product-card:hover .product-card__media img { transform: scale(1.03); }
.product-card__category {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-faint);
    margin-bottom: 6px;
}
.product-card__title {
    font-family: var(--font-body);
    font-size: 14px;
    letter-spacing: 0.05em;
    color: var(--color-black);
    margin: 0 0 12px;
    font-weight: 500;
}
.product-card__enquire {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-black);
    text-decoration: underline;
    text-underline-offset: 4px;
}
.product-card__enquire:hover { color: var(--color-muted); }

/* Single product */
.wc-single {
    display: grid;
    grid-template-columns: 60% 40%;
    gap: 64px;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 60px var(--container-pad) 80px;
}
.wc-single__gallery .woocommerce-product-gallery {
    width: 100% !important;
    float: none !important;
    background: var(--color-image-fallback);
}
.wc-single__gallery img { width: 100%; height: auto; }

.wc-single__info { padding-top: 12px; }
.wc-single__category {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-faint);
    margin-bottom: 12px;
}
.wc-single__title {
    font-family: var(--font-display);
    font-size: 36px;
    text-transform: lowercase;
    line-height: 1;
    color: var(--color-black);
    margin: 0 0 20px;
}
.wc-single__short {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-muted);
    margin-bottom: 28px;
}
.wc-single__table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 32px;
    font-family: var(--font-body);
    font-size: 13px;
}
.wc-single__table th,
.wc-single__table td {
    padding: 12px 0;
    border-bottom: 1px solid var(--color-line);
    text-align: left;
    color: var(--color-black);
}
.wc-single__table th {
    width: 35%;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 11px;
    color: var(--color-faint);
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 1024px) {
    .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
    .wc-single { grid-template-columns: 1fr; gap: 32px; padding: 40px var(--container-pad); }
    .woocommerce ul.products,
    ul.products.wc-products-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 798px) {
    .site-logo img { width: 220px; }
    .menu-toggle { display: inline-block; position: absolute; top: -52px; right: var(--container-pad); }
    .main-nav { position: relative; }
    .nav-menu { display: none; flex-direction: column; gap: 0; padding: 8px 0; }
    .main-nav.is-open .nav-menu { display: flex; }
    .nav-menu > li > a { padding: 12px var(--container-pad); display: block; }
    .utility-bar { flex-direction: column; gap: 8px; }
    .hero {
        grid-template-columns: 1fr;
        height: 75vh;
        max-height: 600px;
    }
    .hero-panel:last-of-type { display: none; }
    .hero-overlay .hero-title { font-size: clamp(46px, 12.5vw, 83px); }
    .banner-pair { grid-template-columns: 1fr; }
    .banner-pair__cell { min-height: 380px; }
    .category-grid { grid-template-columns: 1fr; }
    .feature-row { grid-template-columns: 1fr; }
    .feature-row__cell { border-right: none; border-bottom: 2px solid var(--color-line); }
    .feature-row__cell:last-child { border-bottom: none; }
    .footer-bottom { justify-content: center; text-align: center; }
}
@media (max-width: 600px) {
    .site-footer__grid { grid-template-columns: 1fr; }
    .woocommerce ul.products,
    ul.products.wc-products-grid { grid-template-columns: 1fr; }
    .newsletter-strip__form { flex-direction: column; }
}

/* ==========================================================================
   Homepage sections 2–6 (built on top of the hero in front-page.php).
   Pure black on white, no accent colours below the hero.
   ========================================================================== */

/* Shared label used in multiple sections. */
.section-label {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 12px;
}

/* Shared outline button used across sections 2, 4, 5, 6. */
.btn-outline {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-black);
    border: 1px solid var(--color-black);
    padding: 14px 36px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.btn-outline:hover { background: var(--color-black); color: var(--color-white); }
.btn-outline--light { color: var(--color-white); border-color: rgba(255,255,255,0.6); }
.btn-outline--light:hover { background: var(--color-white); color: var(--color-black); }

/* --- Section 2 — Current Collection (image tiles with caption below) --- */
.section-collection { padding: 24px 0 80px; background: var(--color-white); }

/* Collection section heading (currently no .section-header in front-page.php
   markup; rule sits ready for when a heading is re-introduced). */
.section-header h2 {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(28px, 3vw, 40px);
    letter-spacing: 0.02em;
    color: var(--color-text-primary);
    margin: 0;
}
/* Push tiles almost to the viewport edges — DWC-matched. */
.section-collection .container { padding: 0 12px; max-width: 100%; }

.collection-tile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 6px; /* DWC-matched: tight horizontal, slightly more vertical for caption */
}

.collection-tile {
    display: block;
    text-decoration: none;
    color: inherit;
}
.collection-tile__image {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    background: var(--color-surface);
}
.collection-tile__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.5s ease;
}

/* Subtle hover wash — hidden by default. */
.collection-tile__overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.18);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

/* Caption sits BELOW the image in clean white space. */
.collection-tile__label {
    text-align: center;
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.collection-tile__cat {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #999;
}
.collection-tile__name {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 400;
    color: var(--color-text-primary);
    letter-spacing: 0.01em;
}

/* Hover state */
.collection-tile:hover .collection-tile__image img { transform: scale(1.04); }
.collection-tile:hover .collection-tile__overlay { opacity: 1; }

.section-footer-link {
    margin-top: 56px;
    text-align: center;
}

/* --- Section 3 — Why Stock Dance Emotion --- */
.section-trade-props {
    padding: 80px 0;
    background: var(--color-powder);
    border-top: none;
    border-bottom: none;
}
.trade-props-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    text-align: center;
}
.trade-prop h3 {
    font-family: var(--font-display);
    font-size: 16px;
    color: var(--color-black);
    margin: 0 0 12px;
}
.trade-prop p {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.7;
    color: #5a3e36;
    max-width: 260px;
    margin: 0 auto;
}

/* --- Section 4 — Brand Story Pull Quote --- */
.section-brand-story {
    position: relative;
    background-image: url('/wp-content/uploads/hero-images/section-4-image.png');
    background-size: cover;
    background-position: center top;
    min-height: 560px;
    margin-top: 80px;
    margin-bottom: 80px;
    display: flex;
    align-items: center;
}
.brand-story-inner { width: 100%; position: relative; }
.brand-story-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.62);
}
.brand-story-content {
    position: relative;
    z-index: 2;
    max-width: 640px;
    padding: 80px 0;
    color: #fff;
}
.brand-story-label {
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    margin-bottom: 20px;
}
.brand-story-content h2 {
    font-family: var(--font-display);
    font-size: clamp(26px, 3.5vw, 44px);
    color: #fff;
    line-height: 1.25;
    margin: 0 0 24px;
}
.brand-story-body {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.8;
    color: rgba(255,255,255,0.75);
    margin-bottom: 36px;
}


/* --- Section 6 — Become a Stockist CTA --- */
.section-stockist-cta {
    padding: 100px 0;
    background: var(--color-blush);
    text-align: center;
    border-top: none;
}
.section-stockist-cta .section-label {
    color: var(--color-black);
    margin-bottom: 16px;
}
.section-stockist-cta h2 {
    font-family: var(--font-display);
    font-size: clamp(26px, 3vw, 40px);
    color: var(--color-black);
    margin: 0 0 16px;
}
.section-stockist-cta .stockist-sub {
    font-family: var(--font-body);
    font-size: 15px;
    color: #2a3d4a;
    max-width: 480px;
    margin: 0 auto 36px;
    line-height: 1.7;
}
/* Button on powder-blue background — solid black border, fills on hover. */
.section-stockist-cta .btn-outline {
    color: var(--color-black);
    border-color: var(--color-black);
}
.section-stockist-cta .btn-outline:hover {
    background: var(--color-black);
    color: var(--color-white);
}

/* --- Mobile breakpoints for sections 2–6 --- */
@media (max-width: 900px) {
    .collection-tile-grid { grid-template-columns: repeat(2, 1fr); gap: 16px 6px; }
}
@media (max-width: 768px) {
    .section-collection { padding: 20px 0 48px; }
    .trade-props-grid { grid-template-columns: 1fr; gap: 40px; }
    .section-trade-props { padding: 48px 20px; }
    .brand-story-content { padding: 48px 20px; max-width: none; }
    .section-stockist-cta { padding: 60px 20px; }
}
@media (max-width: 540px) {
    .collection-tile-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ==========================================================================
   Products catalogue page (page-products.php)
   ========================================================================== */

/* ── Page header ── */
.products-page-header {
    padding: 60px 0 32px;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
}
.products-page-header .section-label { margin-bottom: 8px; }
.products-page-header h1 {
    font-family: var(--font-serif);
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    font-style: italic;
    margin: 0;
    color: var(--color-black);
    text-decoration: none;
    border-bottom: none;
}

/* ── Toolbar ── */
.products-toolbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    padding: 0;
}
.products-toolbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 56px;
}
.products-filters {
    display: flex;
    align-items: center;
    gap: 0;
}
.filter-btn {
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    text-decoration: none;
    padding: 18px 20px;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
}
.filter-btn:hover { color: var(--color-black); }
.filter-btn.filter-active {
    color: var(--color-black);
    border-bottom-color: var(--color-black);
    font-weight: 500;
}
.products-toolbar-right {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}
.products-count {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--color-text-muted);
    letter-spacing: 0.05em;
}
.view-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
}
.view-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 4px;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}
.view-btn.active,
.view-btn:hover { color: var(--color-black); }

/* ── Product grid (grid view) ── */
.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    padding: 2px 0 80px;
}

/* ── Product card ── */
.product-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.product-card__image {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    background: var(--color-surface);
}
.product-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: opacity 0.4s ease;
}
.product-card__img--primary   { opacity: 1; z-index: 1; }
.product-card__img--secondary { opacity: 0; z-index: 2; }
.product-card:hover .product-card__img--primary   { opacity: 0; }
.product-card:hover .product-card__img--secondary { opacity: 1; }
.product-card__info { padding: 14px 4px 24px; }
.product-card__cat {
    display: block;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 6px;
}
.product-card__name {
    font-family: var(--font-serif);
    font-size: 15px;
    font-weight: 400;
    color: var(--color-black);
    margin: 0 0 10px;
    line-height: 1.4;
}
.product-card__cta {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-black);
    border-bottom: 1px solid var(--color-black);
    padding-bottom: 1px;
}

/* ── List view ── */
.products-grid--list {
    grid-template-columns: 1fr;
    gap: 0;
}
.products-grid--list .product-card__link {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 32px;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    padding: 24px 0;
}
.products-grid--list .product-card__image {
    aspect-ratio: 3/4;
    width: 200px;
    flex-shrink: 0;
}
.products-grid--list .product-card__info { padding: 0; }
.products-grid--list .product-card__name {
    font-size: 20px;
    margin-bottom: 16px;
}

/* ── Mobile ── */
@media (max-width: 768px) {
    .products-grid { grid-template-columns: repeat(2, 1fr); }
    .products-toolbar-inner { overflow-x: auto; }
    .filter-btn { padding: 16px 12px; font-size: 11px; }
    .products-grid--list .product-card__link {
        grid-template-columns: 120px 1fr;
        gap: 16px;
    }
    .products-grid--list .product-card__image { width: 120px; }
}

/* ==========================================================================
   Catalogue viewer page (page-catalogue.php) — DearFlip embed
   ========================================================================== */
.catalogue-viewer-header {
    padding: 60px 0 40px;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    text-align: center;
}
.catalogue-viewer-header h1 {
    font-family: var(--font-serif);
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.02em;
    margin: 8px 0 16px;
    color: var(--color-black);
}
.catalogue-subtitle {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-text-muted);
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.7;
}
.catalogue-flipbook-wrap {
    background: var(--color-surface);
    padding: 48px 0;
    min-height: 600px;
}
.catalogue-flipbook-wrap .df-container {
    max-width: 1100px;
    margin: 0 auto;
}
.catalogue-footer-cta {
    padding: 40px 0;
    text-align: center;
    border-top: 1px solid var(--color-border);
    background: var(--color-white);
}
.catalogue-footer-cta p {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-text-muted);
}
.catalogue-footer-cta a {
    color: var(--color-black);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ==========================================================================
   Products landing page (page-products.php) — catalogue card grid
   ========================================================================== */
.page-products-landing { min-height: 60vh; }

.catalogue-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    padding: 60px 0 100px;
}
.catalogue-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.catalogue-card__cover {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    background: var(--color-surface);
}
.catalogue-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.4s ease;
}
.catalogue-card:hover .catalogue-card__cover img { transform: scale(1.03); }

.catalogue-card__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}
.catalogue-card:hover .catalogue-card__overlay { background: rgba(0,0,0,0.35); }

.catalogue-card__view {
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-white);
    border: 1px solid var(--color-white);
    padding: 12px 28px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.catalogue-card:hover .catalogue-card__view {
    opacity: 1;
    transform: translateY(0);
}

.catalogue-card__info { padding: 16px 0 0; }
.catalogue-card__title {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 400;
    font-style: italic;
    color: var(--color-black);
    margin: 0 0 6px;
}
.catalogue-card__meta {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--color-text-muted);
    margin: 0 0 4px;
    letter-spacing: 0.04em;
}
.catalogue-card__season {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

@media (max-width: 768px) {
    .catalogue-card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        padding: 40px 0 60px;
    }
}

/* ==========================================================================
   About Us page (page-about.php)
   ========================================================================== */

/* 1. Header — surface bg, Cormorant italic h1 matching products-page-header */
.about-page-header {
    padding: 60px 0 32px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}
.about-page-header .section-label { margin-bottom: 8px; }
.about-page-header h1 {
    font-family: var(--font-serif);
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    font-style: italic;
    margin: 0;
    color: var(--color-black);
    text-decoration: none;
    border-bottom: none;
}

/* 2. Brand story — two-column split */
.about-brand-story {
    padding: 80px 0;
    background: var(--color-white);
}
.about-brand-story__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.about-brand-story__image {
    aspect-ratio: 4/5;
    overflow: hidden;
    background: var(--color-surface);
}
.about-brand-story__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}
.about-brand-story h2 {
    font-family: var(--font-serif);
    font-size: clamp(24px, 2.8vw, 36px);
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.01em;
    color: var(--color-black);
    margin: 0 0 24px;
    line-height: 1.25;
}
.about-brand-story__body p {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.8;
    color: var(--color-text-primary);
    margin: 0 0 16px;
}
.about-brand-story__body p:last-child { margin-bottom: 0; }

/* 3. What We Do — full-width white */
.about-what-we-do {
    padding: 80px 0;
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
}
.about-what-we-do__inner { max-width: 760px; }
.about-what-we-do h2 {
    font-family: var(--font-serif);
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.02em;
    color: var(--color-black);
    margin: 0 0 24px;
}
.about-what-we-do p {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.8;
    color: var(--color-text-primary);
    margin: 0 0 16px;
}
.about-what-we-do p:last-child { margin-bottom: 0; }

/* 4. Who We Work With — three card strip on powder blue */
.about-who-we-work {
    padding: 80px 0;
    background: var(--color-powder);
}
.about-who-we-work__header {
    text-align: center;
    margin-bottom: 48px;
}
.about-who-we-work h2 {
    font-family: var(--font-serif);
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 400;
    font-style: italic;
    color: var(--color-black);
    margin: 0;
}
.about-who-we-work__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.about-card {
    background: var(--color-white);
    padding: 36px 28px;
    text-align: left;
}
.about-card h3 {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-black);
    margin: 0 0 14px;
}
.about-card p {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-text-muted);
    margin: 0;
}

/* 5. CTA — blush bg, centred */
.about-cta {
    background: var(--color-blush);
    padding: 80px 24px;
    text-align: center;
}
.about-cta h2 {
    font-family: var(--font-serif);
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 400;
    font-style: italic;
    color: var(--color-black);
    margin: 0 0 20px;
}
.about-cta p {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text-primary);
    max-width: 560px;
    margin: 0 auto 32px;
}

/* Mobile */
@media (max-width: 768px) {
    .about-brand-story { padding: 48px 0; }
    .about-brand-story__grid { grid-template-columns: 1fr; gap: 32px; }
    .about-what-we-do { padding: 48px 0; }
    .about-who-we-work { padding: 48px 0; }
    .about-who-we-work__cards { grid-template-columns: 1fr; gap: 20px; }
    .about-cta { padding: 60px 24px; }
}

/* ==========================================================================
   Wholesale Programme page (page-wholesale.php)
   ========================================================================== */

/* 1. Header — same Cormorant italic on surface bg */
.wholesale-page-header {
    padding: 60px 0 32px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}
.wholesale-page-header .section-label { margin-bottom: 8px; }
.wholesale-page-header h1 {
    font-family: var(--font-serif);
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    font-style: italic;
    margin: 0;
    color: var(--color-black);
}

/* 2. Programme Intro — narrow, centred, white bg */
.wholesale-intro {
    padding: 80px 0;
    background: var(--color-white);
}
.wholesale-intro__inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}
.wholesale-intro h2 {
    font-family: var(--font-serif);
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.02em;
    color: var(--color-black);
    line-height: 1.25;
    margin: 0 0 28px;
}
.wholesale-intro p {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.8;
    color: var(--color-text-primary);
    margin: 0 0 16px;
}
.wholesale-intro p:last-child { margin: 0; }

/* 3. Benefits Strip — three cards on powder blue */
.wholesale-benefits {
    padding: 80px 0;
    background: var(--color-powder);
}
.wholesale-benefits__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.benefit-card {
    background: var(--color-white);
    padding: 36px 28px;
}
.benefit-card h3 {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-black);
    margin: 0 0 14px;
}
.benefit-card p {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-text-muted);
    margin: 0;
}

/* 4. How It Works — three numbered steps, big blush numerals */
.wholesale-howitworks {
    padding: 80px 0;
    background: var(--color-white);
}
.wholesale-howitworks__header {
    text-align: center;
    margin-bottom: 56px;
}
.wholesale-howitworks h2 {
    font-family: var(--font-serif);
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 400;
    font-style: italic;
    color: var(--color-black);
    margin: 0;
}
.wholesale-howitworks__steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}
.howitworks-step {
    position: relative;
    padding-top: 16px;
}
.howitworks-number {
    font-family: var(--font-serif);
    font-size: 64px;
    line-height: 1;
    color: var(--color-blush);
    margin-bottom: 8px;
    font-style: italic;
    font-weight: 400;
}
.howitworks-content h3 {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-black);
    margin: 0 0 12px;
}
.howitworks-content p {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-text-muted);
    margin: 0;
}

/* 5. Enquiry Form — white card on surface bg */
.wholesale-enquiry {
    padding: 80px 0 100px;
    background: var(--color-surface);
}
.wholesale-enquiry__header {
    text-align: center;
    margin-bottom: 40px;
}
.wholesale-enquiry h2 {
    font-family: var(--font-serif);
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 400;
    font-style: italic;
    color: var(--color-black);
    margin: 0 0 12px;
}
.wholesale-enquiry__sub {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-text-muted);
    margin: 0;
}
.wholesale-enquiry__card {
    background: var(--color-white);
    max-width: 640px;
    margin: 0 auto;
    padding: 48px 48px 56px;
}

/* CF7 form styling — scoped to the wholesale enquiry card */
.wholesale-enquiry__card .wpcf7-form p {
    margin: 0 0 18px;
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.wholesale-enquiry__card .wpcf7-form label {
    display: block;
}
.wholesale-enquiry__card .wpcf7-form input[type="text"],
.wholesale-enquiry__card .wpcf7-form input[type="email"],
.wholesale-enquiry__card .wpcf7-form input[type="tel"],
.wholesale-enquiry__card .wpcf7-form select,
.wholesale-enquiry__card .wpcf7-form textarea {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    background: var(--color-white);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--color-text-primary);
    border-radius: 0;
    box-sizing: border-box;
}
.wholesale-enquiry__card .wpcf7-form textarea { min-height: 120px; resize: vertical; }
.wholesale-enquiry__card .wpcf7-form input:focus,
.wholesale-enquiry__card .wpcf7-form select:focus,
.wholesale-enquiry__card .wpcf7-form textarea:focus {
    outline: none;
    border-color: var(--color-black);
}
.wholesale-enquiry__card .wpcf7-form input[type="submit"] {
    display: inline-block;
    width: auto;
    margin-top: 8px;
    padding: 14px 32px;
    background: var(--color-black);
    color: var(--color-white);
    border: 1px solid var(--color-black);
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
    border-radius: 0;
    transition: background 0.2s, color 0.2s;
}
.wholesale-enquiry__card .wpcf7-form input[type="submit"]:hover {
    background: var(--color-white);
    color: var(--color-black);
}

/* CF7 status messages */
.wholesale-enquiry__card .wpcf7-response-output {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-text-primary);
    border-width: 1px;
    padding: 12px 14px;
    margin: 20px 0 0;
    text-transform: none;
    letter-spacing: 0;
}
.wholesale-enquiry__card .wpcf7-not-valid-tip {
    font-size: 11px;
    color: #c53030;
    text-transform: none;
    letter-spacing: 0;
}

@media (max-width: 768px) {
    .wholesale-intro { padding: 48px 0; }
    .wholesale-benefits { padding: 48px 0; }
    .wholesale-benefits__cards { grid-template-columns: 1fr; gap: 20px; }
    .wholesale-howitworks { padding: 48px 0; }
    .wholesale-howitworks__steps { grid-template-columns: 1fr; gap: 32px; }
    .wholesale-enquiry { padding: 48px 0 60px; }
    .wholesale-enquiry__card { padding: 32px 24px 36px; }
}

/* ==========================================================================
   Contact Us page (page-contact.php)
   ========================================================================== */

.contact-page-header {
    padding: 60px 0 32px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}
.contact-page-header .section-label { margin-bottom: 8px; }
.contact-page-header h1 {
    font-family: var(--font-serif);
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    font-style: italic;
    margin: 0;
    color: var(--color-black);
}

.contact-body {
    padding: 80px 0;
    background: var(--color-white);
}
.contact-grid {
    display: grid;
    grid-template-columns: 40fr 60fr;
    gap: 64px;
    align-items: start;
}

/* Left — info */
.contact-info h2 {
    font-family: var(--font-serif);
    font-size: clamp(24px, 2.8vw, 36px);
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.01em;
    color: var(--color-black);
    margin: 0 0 20px;
    line-height: 1.25;
}
.contact-info__lead {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.8;
    color: var(--color-text-primary);
    margin: 0 0 36px;
}
.contact-details {
    margin: 0 0 32px;
    padding: 0;
}
.contact-detail {
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border);
}
.contact-detail:first-child { border-top: 1px solid var(--color-border); }
.contact-detail dt {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0 0 6px;
}
.contact-detail dd {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1.5;
}
.contact-detail dd a {
    color: var(--color-text-primary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}
.contact-detail dd a:hover { border-bottom-color: var(--color-black); color: var(--color-text-primary); }

/* WhatsApp link — icon + number, green hover. */
.contact-wa-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--color-black);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 1rem;
    transition: color 0.2s ease;
    border-bottom: none;
}
.contact-wa-link:hover,
.contact-wa-link:focus {
    color: #25D366;
    border-bottom: none;
}
.contact-wa-icon {
    width: 22px;
    height: 22px;
    fill: #25D366;
    flex-shrink: 0;
}

.contact-info__note {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.7;
    color: var(--color-text-muted);
    margin: 0;
}
.contact-info__note a {
    color: var(--color-black);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Right — form card */
.contact-form__card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    padding: 40px 40px 48px;
}
.contact-form__card h2 {
    font-family: var(--font-serif);
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 400;
    font-style: italic;
    color: var(--color-black);
    margin: 0 0 24px;
}

/* CF7 form styling — same pattern as wholesale, scoped here */
.contact-form__card .wpcf7-form p {
    margin: 0 0 18px;
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.contact-form__card .wpcf7-form label {
    display: block;
}
.contact-form__card .wpcf7-form input[type="text"],
.contact-form__card .wpcf7-form input[type="email"],
.contact-form__card .wpcf7-form input[type="tel"],
.contact-form__card .wpcf7-form select,
.contact-form__card .wpcf7-form textarea {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    background: var(--color-white);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--color-text-primary);
    border-radius: 0;
    box-sizing: border-box;
}
.contact-form__card .wpcf7-form textarea { min-height: 140px; resize: vertical; }
.contact-form__card .wpcf7-form input:focus,
.contact-form__card .wpcf7-form select:focus,
.contact-form__card .wpcf7-form textarea:focus {
    outline: none;
    border-color: var(--color-black);
}
.contact-form__card .wpcf7-form input[type="submit"] {
    display: inline-block;
    width: auto;
    margin-top: 8px;
    padding: 14px 32px;
    background: var(--color-black);
    color: var(--color-white);
    border: 1px solid var(--color-black);
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
    border-radius: 0;
    transition: background 0.2s, color 0.2s;
}
.contact-form__card .wpcf7-form input[type="submit"]:hover {
    background: var(--color-white);
    color: var(--color-black);
}
.contact-form__card .wpcf7-response-output {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-text-primary);
    border-width: 1px;
    padding: 12px 14px;
    margin: 20px 0 0;
    text-transform: none;
    letter-spacing: 0;
}
.contact-form__card .wpcf7-not-valid-tip {
    font-size: 11px;
    color: #c53030;
    text-transform: none;
    letter-spacing: 0;
}

@media (max-width: 768px) {
    .contact-body { padding: 48px 0; }
    .contact-grid { grid-template-columns: 1fr; gap: 40px; }
    .contact-form__card { padding: 28px 24px 32px; }
}

/* ==========================================================================
   Customize page (page-customize.php)
   ========================================================================== */

/* 1. Page Header */
.customize-page-header {
    padding: 60px 0 32px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}
.customize-page-header .section-label { margin-bottom: 8px; }
.customize-page-header h1 {
    font-family: var(--font-serif);
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    font-style: italic;
    margin: 0;
    color: var(--color-black);
}

/* 2. Split Hero Banner — 55/45 image / dark panel */
.customize-hero {
    display: grid;
    grid-template-columns: 55fr 45fr;
    min-height: 520px;
}
.customize-hero__image {
    position: relative;
    overflow: hidden;
    background: var(--color-surface);
}
.customize-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}
.customize-hero__panel {
    background: var(--color-black);
    color: var(--color-white);
    padding: 60px;
    display: flex;
    align-items: center;
}
.customize-hero__inner { max-width: 480px; }
.customize-hero__label {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    margin: 0 0 18px;
}
.customize-hero__panel h2 {
    font-family: var(--font-serif);
    font-size: clamp(32px, 3.5vw, 48px);
    font-weight: 400;
    font-style: italic;
    line-height: 1.2;
    color: var(--color-white);
    margin: 0 0 24px;
    letter-spacing: 0.01em;
}
.customize-hero__body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-white);
    margin: 0;
}

/* 3. Two Offering Cards */
.customize-offerings {
    padding: 80px 0;
    background: var(--color-white);
}
.customize-offerings__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}
.offering-card { padding: 48px; }
.offering-card--surface { background: var(--color-surface); }
.offering-card--powder  { background: var(--color-powder);  }
.offering-card__label {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0 0 14px;
}
.offering-card h3 {
    font-family: var(--font-serif);
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 400;
    font-style: italic;
    color: var(--color-black);
    margin: 0 0 18px;
    line-height: 1.2;
}
.offering-card p {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text-primary);
    margin: 0;
}

/* 4. How It Works — three numbered steps, big blush numerals */
.customize-howitworks {
    padding: 80px 0;
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
}
.customize-howitworks__header {
    text-align: center;
    margin-bottom: 56px;
}
.customize-howitworks h2 {
    font-family: var(--font-serif);
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 400;
    font-style: italic;
    color: var(--color-black);
    margin: 0;
}
.customize-howitworks__steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}
.customize-step {
    position: relative;
    padding-top: 16px;
}
.customize-step__number {
    font-family: var(--font-serif);
    font-size: 72px;
    line-height: 1;
    color: var(--color-blush);
    font-style: italic;
    font-weight: 400;
    margin-bottom: 12px;
}
.customize-step h3 {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-black);
    margin: 0 0 12px;
}
.customize-step p {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-text-muted);
    margin: 0;
}

/* 5. CTA — blush, centred */
.customize-cta {
    background: var(--color-blush);
    padding: 80px 24px;
    text-align: center;
}
.customize-cta h2 {
    font-family: var(--font-serif);
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 400;
    font-style: italic;
    color: var(--color-black);
    margin: 0 0 18px;
}
.customize-cta p {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text-primary);
    max-width: 520px;
    margin: 0 auto 32px;
}
.customize-cta__btn {
    display: inline-block;
    padding: 14px 32px;
    background: var(--color-black);
    color: var(--color-white);
    border: 1px solid var(--color-black);
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.customize-cta__btn:hover,
.customize-cta__btn:focus {
    background: var(--color-white);
    color: var(--color-black);
}

@media (max-width: 768px) {
    .customize-hero { grid-template-columns: 1fr; }
    .customize-hero__image { aspect-ratio: 4/5; }
    .customize-hero__panel { padding: 48px 24px; }
    .customize-offerings { padding: 48px 0; }
    .customize-offerings__grid { grid-template-columns: 1fr; gap: 20px; }
    .offering-card { padding: 32px 24px; }
    .customize-howitworks { padding: 48px 0; }
    .customize-howitworks__steps { grid-template-columns: 1fr; gap: 32px; }
    .customize-cta { padding: 60px 24px; }
}

/* ==========================================================================
   FAQ page (page-faq.php) — native <details>/<summary> accordion
   ========================================================================== */

.faq-page-header {
    padding: 60px 0 32px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}
.faq-page-header .section-label { margin-bottom: 8px; }
.faq-page-header h1 {
    font-family: var(--font-serif);
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    font-style: italic;
    margin: 0;
    color: var(--color-black);
}

.faq-body {
    padding: 64px 0 96px;
    background: var(--color-white);
}
.faq-list {
    max-width: 800px;
    margin: 0 auto;
    border-top: 1px solid var(--color-border);
}

/* Each Q&A row */
.faq-item {
    border-bottom: 1px solid var(--color-border);
    padding: 20px 0;
}
/* Hide the default disclosure marker; we draw our own. */
.faq-item summary { list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }

.faq-q {
    position: relative;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-primary);
    padding-right: 36px;
    line-height: 1.5;
    transition: color 0.2s ease;
    user-select: none;
}
.faq-q:hover,
.faq-q:focus-visible { color: var(--color-black); outline: none; }

/* Plus / minus indicator */
.faq-q::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-body);
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
    color: var(--color-text-muted);
    transition: transform 0.2s ease, color 0.2s ease;
}
.faq-item[open] .faq-q::after {
    content: '−';
    color: var(--color-black);
}

.faq-a {
    padding-top: 14px;
}
.faq-a p {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--color-text-muted);
    margin: 0;
    max-width: 720px;
}

/* Footer CTA below the accordion */
.faq-footer-cta {
    text-align: center;
    padding-top: 40px;
    font-family: var(--font-body);
    font-size: 14px;
    font-style: italic;
    color: var(--color-text-muted);
}
.faq-footer-cta a {
    color: var(--color-black);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-style: normal;
}

@media (max-width: 768px) {
    .faq-body { padding: 40px 0 64px; }
    .faq-q { font-size: 15px; padding-right: 30px; }
    .faq-a p { font-size: 14px; }
}