/* ============================================================
   HEIRLOOM GOLD — heirloom.css
   Master stylesheet. Merged from heirloom.css + nav.css.

   Palette: Chalk & Carbon
     --carbon  : #0f0f0f
     --ink     : #1a1a1a
     --mid     : #666666
     --muted   : #999999
     --red     : #b02a20
     --chalk   : #f5f5f0
     --surface : #ffffff
     --warm    : #ede8e0
     --rule    : #e4e4de

   Type:
     --ff-display   : Cinzel (architectural serif)
     --ff-editorial : Cormorant Garamond (italic editorial)
     --ff-ui        : Tenor Sans (clean sans)

   Google Fonts:
   <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500
     &family=Tenor+Sans
     &family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400
     &display=swap" rel="stylesheet">
   ============================================================ */


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

/* ── TOKENS ──────────────────────────────────────────────── */
:root {
    /* Chalk & Carbon palette */
    --carbon        : #0f0f0f;
    --ink           : #1a1a1a;
    --mid           : #666666;
    --muted         : #999999;
    --red           : #b02a20;
    --chalk         : #f5f5f0;
    --surface       : #ffffff;
    --warm          : #ede8e0;
    --rule          : #e4e4de;

    /* Legacy product-page tokens (piece.php) */
    --blue          : #1a2f5e;
    --blue-mid      : #2c4a8a;
    --blue-light    : #e8edf5;
    --gold          : #b5924c;
    --gold-light    : #e8d9bc;
    --ivory         : #faf9f7;
    --text          : #1c1c1c;
    --text-mid      : #4a4a4a;
    --text-muted    : #7a7a7a;
    --border        : #ddd8d0;
    --border-light  : #edeae5;
    --font-display  : 'Cormorant Garamond', Georgia, serif;
    --font-body     : 'DM Sans', system-ui, sans-serif;

    /* Type families */
    --ff-display    : 'Cinzel', 'Trajan Pro', Georgia, serif;
    --ff-editorial  : 'Cormorant Garamond', Georgia, serif;
    --ff-ui         : 'Tenor Sans', system-ui, sans-serif;

    /* Layout */
    --max-w         : 1200px;
    --pad-x         : clamp(20px, 5vw, 56px);
    --nav-h         : 50px;
    --header-h      : 88px;
    --radius        : 2px;

    /* Motion */
    --trans         : 180ms ease;
    --transition    : 0.22s ease;

    /* Elevation */
    --shadow-sm     : 0 1px 4px rgba(26,47,94,.08);
    --shadow-md     : 0 4px 20px rgba(26,47,94,.12);
    --shadow-lg     : 0 12px 48px rgba(26,47,94,.16);
}


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

body {
    font-family:             var(--ff-ui);
    font-size:               15px;
    line-height:             1.65;
    color:                   var(--ink);
    background:              var(--chalk);
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.hg-no-scroll { overflow: hidden; }

a      { color: inherit; text-decoration: none; }
img    { display: block; max-width: 100%; }
button { font-family: var(--ff-ui); }
ul, ol { list-style: none; }


/* ══════════════════════════════════════════════════════════
   CHROME — announcement, header, nav, breadcrumb, footer
   ══════════════════════════════════════════════════════════ */

/* ── Announcement bar ────────────────────────────────────── */
.hg-announce {
    background:      var(--carbon);
    color:           #888;
    font-family:     var(--ff-ui);
    font-size:       11px;
    letter-spacing:  .18em;
    text-transform:  uppercase;
    text-align:      center;
    padding:         10px var(--pad-x);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-wrap:       wrap;
}
.hg-announce strong { color: #d0d0d0; font-weight: 400; }
.hg-announce-sep   { margin: 0 14px; color: #333; font-size: 10px; }


/* ── Header ──────────────────────────────────────────────── */
.hg-header {
    background:    var(--surface);
    border-bottom: 1px solid var(--rule);
    position:      sticky;
    top:           0;
    z-index:       200;
}
.hg-header-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          var(--header-h);
    max-width:       var(--max-w);
    margin:          0 auto;
    padding:         0 var(--pad-x);
    gap:             24px;
}


/* ── Logo ────────────────────────────────────────────────── */
.hg-logo {
    display:         flex;
    flex-direction:  column;
    flex-shrink:     0;
    text-decoration: none;
}
.hg-logo-mark {
    font-family:    var(--ff-display);
    font-size:      clamp(18px, 2.2vw, 26px);
    font-weight:    400;
    color:          var(--carbon);
    letter-spacing: .14em;
    line-height:    1;
    white-space:    nowrap;
}
.hg-logo-rule {
    display:    block;
    width:      100%;
    height:     1px;
    background: var(--red);
    margin:     4px 0 3px;
}
.hg-logo-sub {
    font-family:    var(--ff-ui);
    font-size:      8.5px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color:          var(--muted);
    white-space:    nowrap;
}


/* ── Search ──────────────────────────────────────────────── */
.hg-search      { flex: 1; max-width: 320px; position: relative; }
.hg-search form { position: relative; display: flex; align-items: center; }
.hg-search-input {
    width:              100%;
    background:         transparent;
    border:             none;
    border-bottom:      1px solid #ccc;
    color:              var(--carbon);
    font-family:        var(--ff-ui);
    font-size:          13px;
    letter-spacing:     .06em;
    padding:            8px 30px 8px 0;
    outline:            none;
    transition:         border-color var(--trans);
    -webkit-appearance: none;
}
.hg-search-input:focus       { border-bottom-color: var(--carbon); }
.hg-search-input::placeholder{ color: #bbb; letter-spacing: .1em; }
.hg-search-btn {
    position:    absolute;
    right:       0;
    top:         50%;
    transform:   translateY(-50%);
    background:  none;
    border:      none;
    cursor:      pointer;
    color:       #bbb;
    padding:     4px;
    display:     flex;
    align-items: center;
    transition:  color var(--trans);
}
.hg-search-btn:hover { color: var(--carbon); }


/* ── Header icons ────────────────────────────────────────── */
.hg-header-icons { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.hg-icon-btn {
    background:  none;
    border:      none;
    cursor:      pointer;
    color:       #aaa;
    padding:     0;
    display:     flex;
    align-items: center;
    transition:  color var(--trans);
    position:    relative;
}
.hg-icon-btn:hover         { color: var(--carbon); }
.hg-icon-btn:focus-visible {
    outline:        2px solid var(--red);
    outline-offset: 3px;
    border-radius:  1px;
}
.hg-cart-badge {
    position:        absolute;
    top:             -5px;
    right:           -6px;
    width:           15px;
    height:          15px;
    border-radius:   50%;
    background:      var(--red);
    color:           #fff;
    font-family:     var(--ff-ui);
    font-size:       8px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    pointer-events:  none;
}
.hg-menu-btn {
    display:    none;
    background: none;
    border:     none;
    cursor:     pointer;
    color:      #999;
    padding:    4px;
    transition: color var(--trans);
}
.hg-menu-btn:hover { color: var(--carbon); }


/* ── Desktop nav ─────────────────────────────────────────── */
.hg-nav {
    background:    var(--surface);
    border-bottom: 3px solid var(--carbon);
    position:      sticky;
    top:           var(--header-h);
    z-index:       190;
    /* sticky establishes containing block for absolute children — */
    /* the wide dropdown anchors here so it can centre on the page */
}
.hg-nav-inner {
    display:         flex;
    align-items:     center;
    justify-content: center;
    max-width:       var(--max-w);
    margin:          0 auto;
    padding:         0 var(--pad-x);
}
.hg-nav-item { position: relative; }

/* Shop item drops out of the relative-positioning context so that  */
/* its mega dropdown can be positioned against .hg-nav (full width) */
.hg-nav-item.hg-has-dropdown { position: static; }

.hg-nav-btn {
    display:         flex;
    align-items:     center;
    gap:             6px;
    font-family:     var(--ff-ui);
    font-size:       12px;
    letter-spacing:  .14em;
    text-transform:  uppercase;
    color:           var(--ink);
    padding:         18px 22px;
    background:      none;
    border:          none;
    border-bottom:   3px solid transparent;
    margin-bottom:   -3px;
    cursor:          pointer;
    white-space:     nowrap;
    transition:      color var(--trans), border-color var(--trans);
    text-decoration: none;
}
.hg-nav-btn:hover                   { color: var(--carbon); }
.hg-nav-item.hg-nav-on .hg-nav-btn { color: var(--carbon); border-bottom-color: var(--red); }
.hg-nav-arr {
    opacity:    .55;
    transition: opacity var(--trans), transform var(--trans);
}
.hg-nav-item[aria-expanded="true"] .hg-nav-arr { opacity: .85; transform: rotate(180deg); }


/* ── Mega dropdown (horizontal layout) ───────────────────── */
.hg-dropdown {
    position:       absolute;
    top:            calc(100% + 3px);
    left:           50%;
    transform:      translateX(-50%) translateY(-6px);
    width:          min(1180px, calc(100vw - 32px));
    background:     var(--surface);
    border:         1px solid var(--rule);
    border-top:     2px solid var(--red);
    box-shadow:     0 12px 36px rgba(0,0,0,.10);
    opacity:        0;
    pointer-events: none;
    transition:     opacity var(--trans), transform var(--trans);
    z-index:        300;
}
.hg-dropdown--open {
    opacity:        1;
    pointer-events: auto;
    transform:      translateX(-50%) translateY(0);
}

/* Inner: one horizontal row of columns (5 categories + price + era) */
.hg-mega-inner {
    display:         flex;
    align-items:     stretch;
    padding:         32px 28px;
    gap:             4px;
}

/* Category columns: each parent (Rings, Bracelets…) gets its own column */
.hg-mega-col {
    flex:            1 1 0;
    min-width:       0;
    padding:         0 14px;
    display:         flex;
    flex-direction:  column;
}
.hg-mega-col--narrow { flex: 0 0 138px; }

.hg-mega-divider {
    width:           1px;
    background:      var(--rule);
    flex-shrink:     0;
    margin:          4px 6px;
}

/* Section heading (used by Price, Era, Latest) */
.hg-mega-heading {
    font-family:     var(--ff-ui);
    font-size:       10px;
    letter-spacing:  .22em;
    text-transform:  uppercase;
    color:           var(--muted);
    margin-bottom:   12px;
    padding-bottom:  9px;
    border-bottom:   1px solid var(--rule);
}

/* Parent link (category title) — sits at top of its column */
.hg-mega-parent {
    display:         block;
    font-family:     var(--ff-ui);
    font-size:       13px;
    letter-spacing:  .08em;
    color:           var(--carbon);
    margin-bottom:   12px;
    padding-bottom:  9px;
    border-bottom:   1px solid var(--rule);
    text-decoration: none;
    transition:      color var(--trans);
}
.hg-mega-parent:hover { color: var(--red); }

/* Child links (subcategories within a column) */
.hg-mega-child {
    display:         block;
    font-family:     var(--ff-ui);
    font-size:       13px;
    color:           var(--mid);
    padding:         5px 0 5px 10px;
    letter-spacing:  .03em;
    line-height:     1.5;
    border-left:     1px solid transparent;
    text-decoration: none;
    transition:      color var(--trans), border-color var(--trans);
}
.hg-mega-child:hover { color: var(--carbon); border-left-color: var(--red); }

/* Price/Era list links */
.hg-mega-link {
    display:         block;
    font-family:     var(--ff-ui);
    font-size:       13px;
    color:           var(--mid);
    padding:         6px 0;
    letter-spacing:  .03em;
    line-height:     1.4;
    text-decoration: none;
    transition:      color var(--trans);
}
.hg-mega-link:hover { color: var(--carbon); }


/* Breadcrumb (legacy — piece.php) */
.breadcrumb {
    padding:       14px 0;
    border-bottom: 1px solid var(--border-light);
    background:    var(--surface);
}
.breadcrumb__inner {
    max-width:      1200px;
    margin:         0 auto;
    padding:        0 24px;
    display:        flex;
    align-items:    center;
    gap:            8px;
    flex-wrap:      wrap;
    font-size:      12px;
    color:          var(--text-muted);
    letter-spacing: .02em;
    text-transform: uppercase;
}
.breadcrumb__inner a         { color: var(--text-muted); transition: color var(--transition); }
.breadcrumb__inner a:hover   { color: var(--blue); }
.breadcrumb__sep             { color: var(--border); font-size: 10px; }
.breadcrumb__current         { color: var(--text-mid); }


/* ── Footer ──────────────────────────────────────────────── */
.hg-footer      { background: var(--carbon); }
.hg-footer-rule { height: 3px; background: var(--red); }
.hg-footer-body {
    max-width: var(--max-w);
    margin:    0 auto;
    display:   grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap:       clamp(24px, 4vw, 56px);
    padding:   clamp(36px,5vw,56px) var(--pad-x) clamp(28px,4vw,48px);
}
.hg-footer-brand           { display: flex; flex-direction: column; }
.hg-footer-logo            { text-decoration: none; display: block; }
.hg-footer-logo-mark {
    font-family:    var(--ff-display);
    font-size:      clamp(16px, 1.8vw, 20px);
    color:          var(--chalk);
    letter-spacing: .14em;
    line-height:    1;
}
.hg-footer-logo-rule {
    display:    block;
    width:      100%;
    height:     1px;
    background: var(--red);
    margin:     5px 0 4px;
}
.hg-footer-logo-sub {
    font-family:    var(--ff-ui);
    font-size:      8px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color:          #3a3a3a;
}
.hg-footer-strapline {
    font-family: var(--ff-editorial);
    font-size:   14px;
    font-style:  italic;
    font-weight: 300;
    color:       #555;
    line-height: 1.7;
    margin-top:  14px;
    max-width:   220px;
}
.hg-footer-socials { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.hg-social-link {
    font-family:     var(--ff-ui);
    font-size:       9px;
    letter-spacing:  .16em;
    text-transform:  uppercase;
    color:           #444;
    border:          1px solid #1e1e1e;
    padding:         5px 10px;
    text-decoration: none;
    transition:      color var(--trans), border-color var(--trans);
}
.hg-social-link:hover { color: #ccc; border-color: #555; }
.hg-whatsapp-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    margin-top:      16px;
    font-family:     var(--ff-ui);
    font-size:       10px;
    letter-spacing:  .14em;
    text-transform:  uppercase;
    color:           var(--chalk);
    background:      #1a3a1a;
    border:          1px solid #2a4a2a;
    padding:         9px 16px;
    text-decoration: none;
    transition:      background var(--trans);
    width:           fit-content;
}
.hg-whatsapp-btn:hover { background: #243a24; }

.hg-footer-col h2.hg-footer-heading {
    font-family:    var(--ff-ui);
    font-size:      9px;
    font-weight:    400;
    letter-spacing: .26em;
    text-transform: uppercase;
    color:          #3a3a3a;
    margin-bottom:  14px;
    padding-bottom: 10px;
    border-bottom:  1px solid #1a1a1a;
}
.hg-footer-link {
    display:        block;
    font-family:    var(--ff-ui);
    font-size:      12px;
    color:          #4a4a4a;
    margin-bottom:  9px;
    text-decoration:none;
    letter-spacing: .03em;
    transition:     color var(--trans);
}
.hg-footer-link:hover { color: #ccc; }
.hg-footer-bottom {
    border-top:      1px solid #181818;
    max-width:       var(--max-w);
    margin:          0 auto;
    padding:         18px var(--pad-x);
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    flex-wrap:       wrap;
    gap:             8px;
}
.hg-footer-bottom span { font-family: var(--ff-ui); font-size: 10px; letter-spacing: .1em; color: #333; }


/* ── Mobile nav drawer ───────────────────────────────────── */
.hg-mobile-nav {
    position:   fixed;
    top: 0; right: 0; bottom: 0;
    width:      min(340px, 90vw);
    background: var(--surface);
    border-left:1px solid var(--rule);
    z-index:    400;
    overflow-y: auto;
    transform:  translateX(100%);
    transition: transform 280ms ease;
}
.hg-mobile-nav--open  { transform: translateX(0); }
.hg-mobile-nav-inner  { padding: 24px 24px 48px; }
.hg-mobile-close {
    display:       flex;
    align-items:   center;
    background:    none;
    border:        none;
    cursor:        pointer;
    color:         #aaa;
    margin-bottom: 24px;
    padding:       0;
    transition:    color var(--trans);
}
.hg-mobile-close:hover { color: var(--carbon); }

.hg-mob-top-link {
    display:        block;
    font-family:    var(--ff-ui);
    font-size:      12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color:          var(--mid);
    padding:        14px 0;
    border-bottom:  1px solid var(--rule);
    transition:     color var(--trans);
}
.hg-mob-top-link:hover { color: var(--carbon); }

.hg-mob-section { border-bottom: 1px solid var(--rule); }
.hg-mob-toggle {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    width:           100%;
    font-family:     var(--ff-ui);
    font-size:       12px;
    letter-spacing:  .16em;
    text-transform:  uppercase;
    color:           var(--mid);
    padding:         14px 0;
    background:      none;
    border:          none;
    cursor:          pointer;
    transition:      color var(--trans);
}
.hg-mob-toggle:hover,
.hg-mob-toggle--open       { color: var(--carbon); }
.hg-mob-arr                { transition: transform 250ms ease; }
.hg-mob-toggle--open .hg-mob-arr { transform: rotate(180deg); }
.hg-mob-panel              { padding-bottom: 12px; }
.hg-mob-group              { margin-bottom: 16px; }
.hg-mob-group-label {
    font-family:    var(--ff-ui);
    font-size:      9px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color:          var(--muted);
    margin-bottom:  8px;
    padding-left:   12px;
}
.hg-mob-link {
    display:        block;
    font-family:    var(--ff-ui);
    font-size:      13px;
    color:          var(--mid);
    padding:        6px 0 6px 12px;
    border-left:    1px solid transparent;
    letter-spacing: .03em;
    transition:     color var(--trans), border-color var(--trans);
}
.hg-mob-link:hover      { color: var(--carbon); border-left-color: var(--red); }
.hg-mob-overlay         { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 399; }


/* ══════════════════════════════════════════════════════════
   PAGE STRUCTURE
   ══════════════════════════════════════════════════════════ */

.hg-page { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x); }

/* Split page header */
.hg-page-hd { padding: clamp(40px, 5vw, 72px) 0 0; }
.hg-page-hd-top {
    display:               grid;
    grid-template-columns: 1fr 1px 1fr;
    gap:                   0 clamp(24px, 4vw, 56px);
    align-items:           start;
    padding-bottom:        32px;
}
.hg-page-hd-divider { background: var(--rule); width: 1px; align-self: stretch; }
.hg-eyebrow {
    font-family:    var(--ff-ui);
    font-size:      9px;
    letter-spacing: .32em;
    text-transform: uppercase;
    color:          var(--red);
    margin-bottom:  14px;
}
.hg-h1 {
    font-family:    var(--ff-display);
    font-size:      clamp(26px, 3.5vw, 40px);
    font-weight:    400;
    color:          var(--carbon);
    line-height:    1.2;
    letter-spacing: .04em;
}
.hg-h1-rule { width: 40px; height: 2px; background: var(--red); margin: 18px 0 20px; }

.hg-meta-strip  { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.hg-meta-item   { display: flex; flex-direction: column; gap: 3px; }
.hg-meta-label  { font-family: var(--ff-ui); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: #bbb; }
.hg-meta-val    { font-family: var(--ff-display); font-size: clamp(13px, 1.4vw, 16px); color: var(--carbon); letter-spacing: .06em; }
.hg-meta-div    { width: 1px; height: 28px; background: var(--rule); flex-shrink: 0; }

.hg-page-hd-right { padding-top: 2px; }
.hg-intro-lead {
    font-family:    var(--ff-editorial);
    font-size:      clamp(16px, 1.6vw, 19px);
    font-weight:    300;
    font-style:     italic;
    color:          #333;
    line-height:    1.75;
    letter-spacing: .01em;
}

.hg-page-hd-intro {
    padding:       clamp(20px, 3vw, 32px) 0 clamp(32px, 4vw, 52px);
    border-top:    1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    margin-bottom: clamp(24px, 3vw, 44px);
    column-count:  2;
    column-gap:    clamp(24px, 4vw, 56px);
    column-rule:   1px solid var(--rule);
}
.hg-intro-body          { font-family: var(--ff-ui); font-size: 13px; color: #777; line-height: 1.85; letter-spacing: .03em; }
.hg-intro-body p + p    { margin-top: 12px; }

.hg-intro-single { max-width: 660px; margin: 0 auto clamp(32px,4vw,52px); text-align: center; }
.hg-intro-single .hg-intro-lead { display: block; margin-bottom: 14px; }
.hg-intro-single .hg-intro-body { color: #666; }


/* ── Toolbar ─────────────────────────────────────────────── */
.hg-toolbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             12px;
    margin-bottom:   clamp(18px, 2.5vw, 32px);
}
.hg-count          { font-family: var(--ff-ui); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #aaa; }
.hg-count strong   { color: var(--carbon); font-weight: 400; }
.hg-sort-tabs      { display: flex; }
.hg-sort-tab {
    font-family:    var(--ff-ui);
    font-size:      10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color:          #999;
    padding:        8px 16px;
    cursor:         pointer;
    border:         1px solid var(--rule);
    border-right:   none;
    background:     var(--surface);
    transition:     all var(--trans);
    white-space:    nowrap;
    text-decoration:none;
}
.hg-sort-tab:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.hg-sort-tab:last-child  { border-right: 1px solid var(--rule); border-radius: 0 var(--radius) var(--radius) 0; }
.hg-sort-tab:hover       { background: var(--warm); color: var(--carbon); }
.hg-sort-tab.hg-sort-on  { background: var(--carbon); border-color: var(--carbon); color: var(--chalk); }


/* ── Product grid ────────────────────────────────────────── */
.hg-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap:                   1px;
    background:            var(--rule);
    margin-bottom:         clamp(48px, 6vw, 96px);
}


/* ── Product card ────────────────────────────────────────── */
.hg-card {
    background:      var(--surface);
    display:         flex;
    flex-direction:  column;
    cursor:          pointer;
    transition:      background var(--trans);
    text-decoration: none;
    color:           inherit;
}
.hg-card:hover         { background: #fafafa; }
.hg-card:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }

.hg-card-img {
    aspect-ratio: 4/3;
    background:   #1a1a1a;
    position:     relative;
    overflow:     hidden;
}
.hg-card-img img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform 450ms ease;
    filter:     grayscale(6%) contrast(1.03);
}
.hg-card:hover .hg-card-img img { transform: scale(1.04); }

.hg-card-era {
    position:        absolute;
    bottom: 0; left: 0; right: 0;
    background:      rgba(15,15,15,.72);
    padding:         7px 14px;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
}
.hg-card-era-name { font-family: var(--ff-ui); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: #ccc; }
.hg-card-era-date { font-family: var(--ff-editorial); font-size: 12px; font-style: italic; color: #888; }

.hg-card-body {
    padding:        18px 20px 22px;
    flex:           1;
    display:        flex;
    flex-direction: column;
}
.hg-card-title {
    font-family:    var(--ff-editorial);
    font-size:      clamp(16px, 1.5vw, 19px);
    font-weight:    400;
    color:          var(--carbon);
    line-height:    1.3;
    margin-bottom:  6px;
    letter-spacing: .01em;
}
.hg-card-spec  { font-family: var(--ff-ui); font-size: 11px; letter-spacing: .08em; color: #aaa; flex: 1; padding-bottom: 14px; }
.hg-card-foot  { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--rule); padding-top: 14px; margin-top: 4px; }
.hg-card-price { font-family: var(--ff-display); font-size: clamp(17px, 1.6vw, 21px); color: var(--carbon); letter-spacing: .06em; }
.hg-card-view {
    font-family:     var(--ff-ui);
    font-size:       10px;
    letter-spacing:  .16em;
    text-transform:  uppercase;
    color:           var(--red);
    border-bottom:   1px solid rgba(176,42,32,.3);
    padding-bottom:  1px;
    transition:      color var(--trans), border-color var(--trans);
}
.hg-card-view:hover { color: var(--carbon); border-color: var(--carbon); }

.hg-empty { grid-column: 1 / -1; text-align: center; padding: 64px 24px; color: #aaa; }
.hg-empty h2 { font-family: var(--ff-display); font-size: 22px; font-weight: 400; color: var(--carbon); margin-bottom: 10px; letter-spacing: .04em; }


/* ── Filter sidebar ──────────────────────────────────────── */
.hg-layout {
    display:     flex;
    gap:         clamp(20px, 3vw, 40px);
    align-items: flex-start;
    padding:     0 0 clamp(48px,6vw,96px);
}
.hg-sidebar {
    flex:       0 0 230px;
    width:      230px;
    background: var(--surface);
    border:     1px solid var(--rule);
    padding:    20px 18px 22px;
    position:   sticky;
    top:        calc(var(--header-h) + var(--nav-h) + 12px);
}
.hg-main { flex: 1 1 0; min-width: 0; }

.hg-sidebar-hd {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   16px;
    padding-bottom:  12px;
    border-bottom:   1px solid var(--rule);
}
.hg-sidebar-title { font-family: var(--ff-display); font-size: 14px; font-weight: 400; color: var(--carbon); letter-spacing: .08em; }
.hg-sidebar-clear {
    background:      none;
    border:          none;
    font-family:     var(--ff-ui);
    font-size:       11px;
    color:           var(--red);
    cursor:          pointer;
    text-decoration: underline;
    padding:         0;
    transition:      color var(--trans);
}
.hg-sidebar-clear:hover { color: var(--carbon); }

.hg-filter-group               { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.hg-filter-group:last-of-type  { border-bottom: none; }
.hg-filter-label { font-family: var(--ff-ui); font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.hg-filter-list  { display: flex; flex-direction: column; gap: 6px; }

.hg-filter-check {
    display:     flex;
    align-items: center;
    gap:         8px;
    cursor:      pointer;
    font-size:   13px;
    color:       var(--ink);
    user-select: none;
}
.hg-filter-check input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.hg-filter-box {
    flex-shrink: 0;
    width:       15px;
    height:      15px;
    border:      1px solid #ccc;
    background:  var(--chalk);
    position:    relative;
    transition:  border-color var(--trans), background var(--trans);
}
.hg-filter-check input:checked + .hg-filter-box { background: var(--carbon); border-color: var(--carbon); }
.hg-filter-check input:checked + .hg-filter-box::after {
    content:     '';
    position:    absolute;
    left: 4px; top: 1px;
    width: 5px; height: 9px;
    border:      1.5px solid #fff;
    border-top:  none;
    border-left: none;
    transform:   rotate(45deg);
}
.hg-filter-check:hover .hg-filter-box                { border-color: var(--carbon); }
.hg-filter-check input:focus-visible + .hg-filter-box{ outline: 2px solid var(--red); outline-offset: 2px; }
.hg-filter-check-label { flex: 1; line-height: 1.3; }
.hg-filter-count       { font-size: 11px; color: #bbb; min-width: 24px; text-align: right; }

.hg-price-track  { position: relative; height: 3px; background: var(--rule); margin: 20px 0 8px; }
.hg-price-fill   { position: absolute; height: 100%; background: var(--carbon); pointer-events: none; }
.hg-price-input  { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; height: 100%; opacity: 0; cursor: pointer; margin: 0; -webkit-appearance: none; appearance: none; z-index: 2; }
.hg-price-labels { display: flex; justify-content: space-between; font-family: var(--ff-ui); font-size: 12px; color: var(--ink); margin-top: 16px; }

.hg-sidebar-close {
    display:        none;
    width:          100%;
    margin-top:     18px;
    padding:        10px;
    background:     var(--carbon);
    color:          var(--chalk);
    border:         none;
    font-family:    var(--ff-ui);
    font-size:      12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor:         pointer;
}

.hg-active-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.hg-active-chip {
    display:     inline-flex;
    align-items: center;
    gap:         5px;
    padding:     4px 10px;
    background:  var(--warm);
    border:      1px solid #d8d4cc;
    font-family: var(--ff-ui);
    font-size:   11px;
    color:       var(--carbon);
    white-space: nowrap;
}
.hg-chip-remove { background: none; border: none; color: var(--mid); cursor: pointer; font-size: 14px; line-height: 1; padding: 0; transition: color var(--trans); }
.hg-chip-remove:hover { color: var(--red); }

.hg-filter-toggle {
    display:        none;
    align-items:    center;
    gap:            6px;
    padding:        8px 14px;
    background:     var(--surface);
    border:         1px solid var(--rule);
    font-family:    var(--ff-ui);
    font-size:      11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color:          var(--carbon);
    cursor:         pointer;
    transition:     border-color var(--trans);
}
.hg-filter-toggle:hover { border-color: var(--carbon); }
.hg-filter-badge { background: var(--red); color: #fff; font-size: 9px; padding: 2px 5px; border-radius: 1px; }
.hg-mob-overlay-filter { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 198; }


/* ── Price hub + switcher ────────────────────────────────── */
.price-hub {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap:                   1px;
    background:            var(--rule);
    list-style:            none;
    margin-bottom:         clamp(40px, 5vw, 80px);
}
.price-hub-card {
    background:      var(--surface);
    display:         flex;
    flex-direction:  column;
    gap:             6px;
    padding:         28px 24px 24px;
    text-decoration: none;
    color:           inherit;
    transition:      background var(--trans);
}
.price-hub-card:hover                    { background: var(--warm); }
.price-hub-card__label {
    font-family:    var(--ff-display);
    font-size:      clamp(18px, 2vw, 24px);
    font-weight:    400;
    color:          var(--carbon);
    line-height:    1;
}
.price-hub-card__sub   { font-family: var(--ff-ui); font-size: 12px; color: var(--mid); flex: 1; padding-top: 4px; letter-spacing: .04em; }
.price-hub-card__arrow { font-size: 16px; color: var(--muted); transition: transform var(--trans), color var(--trans); }
.price-hub-card:hover .price-hub-card__arrow { transform: translateX(5px); color: var(--red); }

.price-switcher {
    display:        flex;
    flex-wrap:      wrap;
    gap:            6px;
    margin-bottom:  20px;
    padding-bottom: 20px;
    border-bottom:  1px solid var(--rule);
}
.price-pill {
    font-family:     var(--ff-ui);
    font-size:       11px;
    letter-spacing:  .1em;
    text-transform:  uppercase;
    color:           var(--mid);
    border:          1px solid var(--rule);
    padding:         6px 14px;
    text-decoration: none;
    transition:      all var(--trans);
    white-space:     nowrap;
}
.price-pill:hover  { border-color: var(--carbon); color: var(--carbon); }
.price-pill--on    { background: var(--carbon); border-color: var(--carbon); color: var(--chalk); }

.cat-eyebrow   { font-family: var(--ff-ui); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin-bottom: 8px; }
.cat-meta-strip{ display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin: 16px 0 20px; }
.cat-meta-item { display: flex; flex-direction: column; gap: 2px; }
.cat-meta-label{ font-family: var(--ff-ui); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cat-meta-val  { font-family: var(--ff-display); font-size: 15px; color: var(--carbon); letter-spacing: .04em; }
.cat-meta-div  { width: 1px; height: 24px; background: var(--rule); flex-shrink: 0; }


/* ══════════════════════════════════════════════════════════
   PRODUCT / PIECE PAGE (piece.php)
   ══════════════════════════════════════════════════════════ */

.product-page {
    max-width: 1200px;
    margin:    0 auto;
    padding:   48px 24px 80px;
}
.product-layout {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   64px;
    align-items:           start;
    animation:             fadeUp .5s ease both;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Carousel */
.carousel { position: sticky; top: 24px; }
.carousel__stage {
    position:     relative;
    background:   var(--surface);
    border:       1px solid var(--border-light);
    border-radius:var(--radius);
    overflow:     hidden;
    aspect-ratio: 1 / 1;
    box-shadow:   var(--shadow-md);
}
.carousel__track {
    display:    flex;
    height:     100%;
    transition: transform 0.4s cubic-bezier(.4,0,.2,1);
}
.carousel__slide {
    flex:            0 0 100%;
    height:          100%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      var(--surface);
    cursor:          zoom-in;
}
.carousel__slide img { width: 100%; height: 100%; object-fit: contain; padding: 20px; transition: transform 0.35s ease; }
.carousel__slide img:hover { transform: scale(1.03); }

.carousel__btn {
    position:    absolute;
    top:         50%;
    transform:   translateY(-50%);
    width:       40px;
    height:      40px;
    background:  rgba(255,255,255,.92);
    border:      1px solid var(--border);
    border-radius:50%;
    cursor:      pointer;
    display:     flex;
    align-items: center;
    justify-content:center;
    font-size:   16px;
    color:       var(--blue);
    transition:  background var(--transition), box-shadow var(--transition);
    z-index:     2;
    box-shadow:  var(--shadow-sm);
}
.carousel__btn:hover       { background: var(--surface); box-shadow: var(--shadow-md); }
.carousel__btn--prev       { left: 12px; }
.carousel__btn--next       { right: 12px; }
.carousel__btn[disabled]   { opacity: .3; pointer-events: none; }

.carousel__thumbs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.carousel__thumb {
    width:        68px;
    height:       68px;
    border:       2px solid var(--border-light);
    border-radius:var(--radius);
    overflow:     hidden;
    cursor:       pointer;
    background:   var(--surface);
    transition:   border-color var(--transition);
    flex-shrink:  0;
}
.carousel__thumb img              { width: 100%; height: 100%; object-fit: cover; padding: 4px; }
.carousel__thumb.is-active,
.carousel__thumb:hover            { border-color: var(--blue); }

.carousel__dots { display: none; justify-content: center; gap: 6px; margin-top: 14px; }
.carousel__dot {
    width:        7px;
    height:       7px;
    border-radius:50%;
    background:   var(--border);
    border:       none;
    cursor:       pointer;
    transition:   background var(--transition), transform var(--transition);
    padding:      0;
}
.carousel__dot.is-active { background: var(--blue); transform: scale(1.3); }

/* Product info */
.product-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.badge {
    font-family:    var(--font-body);
    font-size:      10px;
    font-weight:    500;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding:        4px 10px;
    border-radius:  2px;
}
.badge--blue   { background: var(--blue-light); color: var(--blue); }
.badge--gold   { background: var(--gold-light); color: #7a5a20; }
.badge--border { background: transparent; border: 1px solid var(--border); color: var(--text-muted); }

.product-title {
    font-family:    var(--font-display);
    font-size:      clamp(1.7rem, 3.5vw, 2.4rem);
    font-weight:    400;
    line-height:    1.2;
    color:          var(--blue);
    margin-bottom:  6px;
    letter-spacing: -.01em;
}
.product-meta-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.product-sku {
    font-size:      11px;
    color:          var(--text-muted);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin:         0 0 20px;
}
.divider { width: 48px; height: 2px; background: var(--gold); margin: 20px 0; }

.product-price {
    font-family:    var(--font-display);
    font-size:      clamp(2.35rem, 5vw, 3.4rem);
    font-weight:    500;
    line-height:    1;
    color:          var(--blue);
    letter-spacing: -.03em;
    margin:         4px 0 8px;
    text-align:     right;
}
.product-price__vat { font-size: 11px; color: var(--text-muted); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 26px; }

.product-cta         { margin-bottom: 32px; }
.product-cta--split  { display: grid; grid-template-columns: 1.45fr 1fr; gap: 12px; align-items: stretch; margin-bottom: 32px; }

.btn-enquire {
    display:         inline-block;
    width:           100%;
    padding:         16px 28px;
    background:      var(--blue);
    color:           var(--surface);
    font-family:     var(--font-body);
    font-size:       13px;
    font-weight:     500;
    letter-spacing:  .08em;
    text-transform:  uppercase;
    text-align:      center;
    border:          2px solid var(--blue);
    border-radius:   var(--radius);
    cursor:          pointer;
    transition:      background var(--transition), color var(--transition);
}
.btn-enquire:hover { background: transparent; color: var(--blue); }
.btn-enquire--primary {
    width:          100%;
    min-height:     56px;
    display:        inline-flex;
    align-items:    center;
    justify-content:center;
    font-size:      13px;
    font-weight:    600;
    letter-spacing: .09em;
    box-shadow:     0 10px 24px rgba(26,47,94,.16);
}

.btn-wishlist {
    display:         inline-block;
    width:           100%;
    margin-top:      10px;
    padding:         14px 28px;
    background:      transparent;
    color:           var(--text-mid);
    font-family:     var(--font-body);
    font-size:       13px;
    letter-spacing:  .06em;
    text-transform:  uppercase;
    text-align:      center;
    border:          1px solid var(--border);
    border-radius:   var(--radius);
    cursor:          pointer;
    transition:      border-color var(--transition), color var(--transition);
}
.btn-wishlist:hover { border-color: var(--blue); color: var(--blue); }
.btn-wishlist--deposit {
    width:           100%;
    min-height:      56px;
    margin-top:      0;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    background:      var(--surface);
    color:           var(--blue);
    border:          1px solid var(--border);
    font-size:       12px;
    font-weight:     500;
    letter-spacing:  .08em;
}
.btn-wishlist--deposit:hover { border-color: var(--blue); background: var(--blue-light); }

.product-description { font-size: 15px; line-height: 1.75; color: var(--text-mid); margin-bottom: 28px; }

.trust-strip {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   12px;
    padding:               18px 0;
    border-top:            1px solid var(--border-light);
    border-bottom:         1px solid var(--border-light);
    margin-bottom:         32px;
}
.trust-item  { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; }
.trust-icon  { font-size: 18px; line-height: 1; }
.trust-label { font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mid); }

.specs-section { margin-bottom: 32px; }
.specs-title   { font-family: var(--font-display); font-size: 1rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; }
.specs-table   { width: 100%; border-collapse: collapse; font-size: 14px; }
.specs-table tr              { border-bottom: 1px solid var(--border-light); }
.specs-table tr:last-child   { border-bottom: none; }
.specs-table td              { padding: 9px 0; vertical-align: top; }
.specs-table td:first-child  { color: var(--text-muted); width: 48%; font-size: 12px; letter-spacing: .03em; text-transform: uppercase; padding-right: 12px; }
.specs-table td:last-child   { color: var(--text); font-weight: 500; }

.subcat-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.subcat-tag  { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; padding: 5px 12px; border: 1px solid var(--border); border-radius: 2px; color: var(--text-muted); transition: border-color var(--transition), color var(--transition); }
.subcat-tag:hover { border-color: var(--blue-mid); color: var(--blue); }

/* Lightbox */
.lightbox          { display: none; position: fixed; inset: 0; background: rgba(10,16,32,.92); z-index: 9999; align-items: center; justify-content: center; padding: 20px; }
.lightbox.is-open  { display: flex; }
.lightbox__img     { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.lightbox__close   { position: fixed; top: 20px; right: 24px; background: none; border: none; color: rgba(255,255,255,.7); font-size: 28px; cursor: pointer; line-height: 1; transition: color var(--transition); }
.lightbox__close:hover { color: #fff; }


/* ══════════════════════════════════════════════════════════
   UTILITY
   ══════════════════════════════════════════════════════════ */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}
.link-btn {
    background:      none;
    border:          none;
    font-family:     var(--ff-ui);
    font-size:       inherit;
    color:           var(--red);
    cursor:          pointer;
    text-decoration: underline;
    padding:         0;
}
.section-rule { border: none; border-top: 1px solid var(--border-light); margin: 48px 0; }


/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */

/* Large desktop */
@media (min-width: 1100px) {
    .hg-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Tablet */
@media (max-width: 899px) {
    :root          { --header-h: 68px; }
    .hg-nav        { display: none; }
    .hg-menu-btn   { display: flex; }
    .hg-logo-mark  { font-size: 20px; }
    .hg-header-inner { flex-wrap: wrap; height: auto; padding: 14px var(--pad-x); gap: 12px; }
    .hg-search     { order: 3; max-width: 100%; flex-basis: 100%; margin: 0; }

    .hg-page-hd-top     { grid-template-columns: 1fr; gap: 20px 0; }
    .hg-page-hd-divider { display: none; }
    .hg-page-hd-intro   { column-count: 1; }

    .hg-layout     { display: block; }
    .hg-filter-toggle { display: inline-flex; }
    .hg-sidebar {
        position:   fixed;
        bottom: 0; left: 0; right: 0;
        width:      100%;
        max-height: 80vh;
        overflow-y: auto;
        z-index:    300;
        border-radius:0;
        border-top: 1px solid var(--rule);
        transform:  translateY(100%);
        transition: transform 260ms ease;
    }
    .hg-sidebar.is-open { transform: translateY(0); }
    .hg-sidebar-close   { display: block; }

    .hg-footer-body    { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
    .hg-footer-brand   { grid-column: 1 / -1; }
    .hg-footer-strapline { max-width: 100%; }

    .product-layout { grid-template-columns: 1fr; gap: 40px; }
    .product-page   { padding: 32px 16px 60px; }
    .product-cta--split { grid-template-columns: 1fr; }
}

/* Mobile */
@media (max-width: 640px) {
    .hg-announce   { font-size: 10px; flex-direction: column; gap: 4px; }
    .hg-announce-sep { display: none; }
    .hg-grid       { grid-template-columns: repeat(2, 1fr); }
    .hg-card-body  { padding: 12px 14px 16px; }
    .hg-card-title { font-size: 15px; }
    .hg-card-price { font-size: 16px; }
    .hg-card-img   { aspect-ratio: 1/1; }
    .hg-h1         { font-size: clamp(22px, 7vw, 32px); }
    .hg-intro-lead { font-size: 15px; }
    .hg-footer-body { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
    .hg-footer-bottom { flex-direction: column; align-items: flex-start; gap: 4px; }
    .hg-sort-tab   { padding: 7px 10px; font-size: 9px; }
    .price-hub     { grid-template-columns: repeat(2, 1fr); }
    .price-pill    { font-size: 10px; padding: 5px 10px; }
    .carousel__thumbs { display: none; }
    .carousel__dots   { display: flex; }
}

/* Very small */
@media (max-width: 380px) {
    .hg-grid { grid-template-columns: 1fr; }
}

/* Print */
@media print {
    .carousel__btn, .carousel__thumbs, .btn-enquire,
    .btn-wishlist, .lightbox, .trust-strip { display: none !important; }
    .product-layout { grid-template-columns: 1fr 1fr; }
}


/* ══════════════════════════════════════════════════════════
   CATEGORY / COLLECTION PAGES  (cat- and card- classes)
   Used by category.php, shop-by-price.php
   Tokens: --c-bg, --c-surface, --c-blue, --c-gold, etc.
   ══════════════════════════════════════════════════════════ */

/* Category-page tokens — scoped to avoid conflicts */
:root {
    --c-bg:       #faf8f4;
    --c-surface:  #ffffff;
    --c-blue:     #1a2f5e;
    --c-blue-mid: #2a4a8e;
    --c-gold:     #b5924c;
    --c-gold-lt:  #d4af72;
    --c-text:     #2c2c2c;
    --c-muted:    #6b6b6b;
    --c-border:   #e8e2d9;
    --c-rule:     #d4c9b8;
    --ff-display: 'Cormorant Garamond', Georgia, serif;
    --ff-body:    'DM Sans', system-ui, sans-serif;
    --gap:        clamp(14px, 2.5vw, 28px);
    --sidebar-w:  240px;
    --shadow:     0 2px 12px rgba(26,47,94,.08);
    --shadow-h:   0 6px 24px rgba(26,47,94,.15);
}

ul[role="list"] { list-style: none; }

.cat-page { max-width: 1300px; margin: 0 auto; padding: 0 var(--gap); }

/* Breadcrumb */
.breadcrumb {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 4px 6px; padding: 18px 0 0;
    font-size: 13px; color: var(--c-muted); list-style: none;
}
.breadcrumb a           { color: var(--c-blue); text-decoration: none; }
.breadcrumb a:hover     { text-decoration: underline; }
.breadcrumb__sep        { color: var(--c-rule); }

/* Hero */
.cat-hero { padding: 32px 0 24px; border-bottom: 1px solid var(--c-rule); max-width: 760px; }
.cat-hero__h1 {
    font-family: var(--ff-display); font-size: clamp(26px, 4vw, 44px);
    font-weight: 400; color: var(--c-blue); line-height: 1.15; margin-bottom: 16px;
}
.cat-hero__intro             { font-size: 15px; color: var(--c-text); max-width: 640px; }
.cat-hero__intro p           { margin-bottom: 10px; }
.cat-hero__intro p:last-child{ margin-bottom: 0; }
.cat-hero__intro h2 {
    font-family: var(--ff-display); font-size: clamp(17px, 2.2vw, 22px);
    font-weight: 400; color: var(--c-blue); margin: 20px 0 6px;
}
.cat-eyebrow {
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--c-gold); margin-bottom: 8px; font-family: var(--ff-body);
}

/* Layout */
.cat-layout { display: flex; gap: var(--gap); align-items: flex-start; padding: 20px 0 0; }
.cat-main   { flex: 1 1 0; min-width: 0; }

/* Sidebar */
.cat-sidebar {
    flex: 0 0 var(--sidebar-w); width: var(--sidebar-w);
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: 6px; padding: 20px 18px 18px;
    position: sticky; top: 24px;
}
.sidebar__header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--c-rule);
}
.sidebar__title  { font-family: var(--ff-display); font-size: 18px; font-weight: 400; color: var(--c-blue); }
.sidebar__clear  { background: none; border: none; color: var(--c-gold); font-family: var(--ff-body); font-size: 12px; cursor: pointer; padding: 0; text-decoration: underline; }
.sidebar__clear:hover { color: var(--c-blue); }

/* Filter groups */
.filter-group                { padding: 14px 0; border-bottom: 1px solid var(--c-border); }
.filter-group:last-of-type   { border-bottom: none; }
.filter-group__label {
    font-family: var(--ff-body); font-size: 11px; font-weight: 500;
    letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 10px;
}
.filter-list { display: flex; flex-direction: column; gap: 6px; }
.filter-check {
    display: flex; align-items: center; gap: 8px;
    cursor: pointer; font-size: 14px; color: var(--c-text); user-select: none;
}
.filter-check input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.filter-check__box {
    flex-shrink: 0; width: 16px; height: 16px;
    border: 1.5px solid var(--c-border); border-radius: 3px;
    background: var(--c-bg); transition: border-color .22s ease, background .22s ease; position: relative;
}
.filter-check input:checked + .filter-check__box { background: var(--c-blue); border-color: var(--c-blue); }
.filter-check input:checked + .filter-check__box::after {
    content: ''; position: absolute; left: 4px; top: 1px;
    width: 5px; height: 9px; border: 1.5px solid #fff;
    border-top: none; border-left: none; transform: rotate(45deg);
}
.filter-check:hover .filter-check__box                { border-color: var(--c-gold); }
.filter-check input:focus-visible + .filter-check__box { outline: 2px solid var(--c-gold); outline-offset: 2px; }
.filter-check__label { flex: 1; line-height: 1.3; }
.filter-check__count { font-size: 11px; color: var(--c-muted); min-width: 24px; text-align: right; }

/* Price range slider */
.price-range { margin-top: 4px; }
.price-range__track {
    position: relative; height: 4px; background: var(--c-border);
    border-radius: 2px; margin: 20px 0 8px;
}
.price-range__fill { position: absolute; height: 100%; background: var(--c-gold); border-radius: 2px; pointer-events: none; }
.price-range__input {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 100%; height: 100%; opacity: 0; cursor: pointer;
    margin: 0; padding: 0; z-index: 2;
    -webkit-appearance: none; appearance: none;
}
.price-range__track::before,
.price-range__track::after {
    content: ''; position: absolute; top: 50%; transform: translate(-50%, -50%);
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--c-surface); border: 2px solid var(--c-gold);
    box-shadow: var(--shadow); pointer-events: none; z-index: 3;
    left: var(--thumb-lo, 0%);
}
.price-range__track::after   { left: var(--thumb-hi, 100%); }
.price-range__labels { display: flex; justify-content: space-between; font-size: 13px; color: var(--c-text); margin-top: 14px; }

/* Sidebar close (mobile) */
.sidebar__close-btn {
    display: none; width: 100%; margin-top: 18px; padding: 10px;
    background: var(--c-blue); color: #fff; border: none; border-radius: 6px;
    font-family: var(--ff-body); font-size: 14px; font-weight: 500; cursor: pointer; text-align: center;
}

/* Main / toolbar */
.cat-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px; padding-bottom: 14px;
    font-size: 14px; color: var(--c-muted);
}
.cat-toolbar__left       { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cat-toolbar__count strong{ color: var(--c-text); }

.filter-toggle-btn {
    display: none; align-items: center; gap: 6px; padding: 7px 14px;
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 6px;
    font-family: var(--ff-body); font-size: 13px; color: var(--c-blue);
    cursor: pointer; font-weight: 500; transition: border-color .22s ease;
}
.filter-toggle-btn:hover { border-color: var(--c-gold); }
.filter-toggle-btn__badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 4px;
    background: var(--c-gold); color: #fff; border-radius: 9px; font-size: 11px; font-weight: 600; line-height: 1;
}

.cat-sort        { display: flex; align-items: center; gap: 8px; }
.cat-sort label  { color: var(--c-muted); font-size: 13px; }
.cat-sort select {
    border: 1px solid var(--c-border); border-radius: 6px;
    padding: 6px 28px 6px 10px; font-family: var(--ff-body); font-size: 13px;
    color: var(--c-text);
    background: var(--c-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%231a2f5e'/%3E%3C/svg%3E") no-repeat right 10px center;
    appearance: none; cursor: pointer;
}
.cat-sort select:focus { outline: none; border-color: var(--c-gold); box-shadow: 0 0 0 2px rgba(181,146,76,.2); }

/* Active chips */
.active-filters      { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.active-filters__list{ display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.active-chip {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px;
    background: #eef1f8; border: 1px solid #c8d0e0; border-radius: 20px;
    font-size: 12px; color: var(--c-blue); white-space: nowrap;
}
.active-chip__remove { background: none; border: none; color: var(--c-blue); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 0 0 2px; opacity: .7; }
.active-chip__remove:hover { opacity: 1; }

/* Product grid */
.cat-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--gap); padding-bottom: 48px;
}

/* Product card */
.card {
    background: var(--c-surface); border-radius: 6px; box-shadow: var(--shadow);
    overflow: hidden; display: flex; flex-direction: column;
    text-decoration: none; color: inherit;
    transition: box-shadow .22s ease, transform .22s ease;
}
.card:hover         { box-shadow: var(--shadow-h); transform: translateY(-3px); }
.card:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; }

.card__img-wrap { position: relative; aspect-ratio: 1/1; overflow: hidden; background: #f0ece6; }
.card__img      { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms ease; }
.card:hover .card__img { transform: scale(1.04); }
.card__img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--c-rule); font-size: 40px; }
.card__badge {
    position: absolute; top: 10px; left: 10px;
    background: var(--c-gold); color: #fff;
    font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 3px;
}
.card__body  { padding: 12px 14px 16px; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.card__era   { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-gold); font-weight: 500; }
.card__title { font-family: var(--ff-display); font-size: 16px; font-weight: 400; line-height: 1.3; color: var(--c-blue); }
.card__meta  { font-size: 12px; color: var(--c-muted); }
.card__price { font-family: var(--ff-display); font-size: 19px; color: var(--c-text); margin-top: auto; padding-top: 8px; }

/* Empty states */
.cat-empty           { grid-column: 1/-1; text-align: center; padding: 60px 20px; color: var(--c-muted); }
.cat-empty__icon     { font-size: 40px; margin-bottom: 12px; }
.cat-empty h2        { font-family: var(--ff-display); font-size: 22px; font-weight: 400; color: var(--c-blue); margin-bottom: 8px; }

/* Mobile overlay */
.sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 199; }

/* Meta strip (price pages) */
.cat-meta-strip { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin: 16px 0 20px; }
.cat-meta-item  { display: flex; flex-direction: column; gap: 2px; }
.cat-meta-label { font-family: var(--ff-body); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-muted); }
.cat-meta-val   { font-family: var(--ff-display); font-size: 15px; color: var(--c-blue); letter-spacing: .04em; }
.cat-meta-div   { width: 1px; height: 24px; background: var(--c-border); flex-shrink: 0; }

/* ── Responsive ── */
@media (max-width: 899px) {
    .cat-layout         { display: block; }
    .filter-toggle-btn  { display: inline-flex; }
    .cat-sidebar {
        position: fixed; bottom: 0; left: 0; right: 0; width: 100%;
        max-height: 80vh; overflow-y: auto; border-radius: 6px 6px 0 0;
        border: none; border-top: 1px solid var(--c-border);
        z-index: 200; transform: translateY(100%); transition: transform 260ms ease;
    }
    .cat-sidebar.is-open    { transform: translateY(0); }
    .sidebar__close-btn     { display: block; }
    .price-range__track::before,
    .price-range__track::after { display: none; }
    .price-range__input     { opacity: 1; height: 4px; background: transparent; }
    .price-range__input::-webkit-slider-thumb {
        -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
        background: var(--c-surface); border: 2px solid var(--c-gold); cursor: pointer;
    }
    .price-range__input::-moz-range-thumb {
        width: 18px; height: 18px; border-radius: 50%;
        background: var(--c-surface); border: 2px solid var(--c-gold); cursor: pointer;
    }
}
@media (max-width: 640px) {
    .cat-grid   { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .card__body { padding: 9px 10px 12px; }
    .card__title{ font-size: 14px; }
    .card__price{ font-size: 16px; }
    .cat-hero   { padding: 20px 0 18px; }
}
@media (max-width: 360px) {
    .cat-grid   { grid-template-columns: 1fr; }
}
@media (min-width: 1100px) {
    :root       { --sidebar-w: 260px; }
    .cat-grid   { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}


/* Below the desktop breakpoint where viewport is tighter, ease padding */
@media (max-width: 1099px) {
    .hg-mega-inner { padding: 26px 18px; gap: 0; }
    .hg-mega-col   { padding: 0 10px; }
    .hg-mega-divider { margin: 4px 4px; }
}

/* Waitlist modal — hidden by default, shown via .open class */
.notify-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(28, 30, 36, 0.55);
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    backdrop-filter: blur(2px);
}
.notify-modal.open { display: flex; }

.notify-modal .notify-box {
    background: #fff;
    border-radius: 8px;
    padding: 32px 30px 26px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
    box-sizing: border-box;
}
.notify-modal .notify-box h3 {
    font-family: Georgia, 'Cormorant Garamond', serif;
    color: #1a2f5e;
    font-size: 22px;
    font-weight: 400;
    margin: 0 0 12px;
    line-height: 1.3;
}
.notify-modal .notify-box p {
    font-size: 14px;
    color: #44474f;
    line-height: 1.6;
    margin: 0 0 18px;
}
.notify-modal .notify-input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #d8dae0;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    margin-bottom: 14px;
    box-sizing: border-box;
}
.notify-modal .notify-input:focus {
    outline: none;
    border-color: #1a2f5e;
    box-shadow: 0 0 0 3px rgba(26, 47, 94, 0.12);
}
.notify-modal .btn-primary {
    display: block;
    width: 100%;
    padding: 12px 20px;
    background: #1a2f5e;
    color: #fff;
    border: 0;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    margin-bottom: 8px;
}
.notify-modal .btn-primary:hover { background: #2c4a8a; }
.notify-modal .notify-close {
    display: block;
    width: 100%;
    padding: 8px;
    background: transparent;
    color: #7a7d88;
    border: 0;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline;
}
.notify-modal .notify-close:hover { color: #1a2f5e; }
.product-cta.cta-confirmed {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #f5eedf;
    border: 1px solid #e8d9bc;
    border-radius: 8px;
    padding: 28px 24px;
    margin-top: 4px;
    animation: cta-confirm-in 0.35s ease-out;
}
@keyframes cta-confirm-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cta-confirm-tick {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #b5924c;
    color: #fff;
    font-size: 26px;
    line-height: 48px;
    text-align: center;
    margin-bottom: 14px;
    box-shadow: 0 2px 6px rgba(181, 146, 76, 0.3);
}
.cta-confirm-headline {
    font-family: Georgia, 'Cormorant Garamond', serif;
    color: #7a5a20;
    font-size: 22px;
    font-weight: 400;
    margin: 0 0 8px;
    line-height: 1.3;
}
.cta-confirm-sub {
    font-size: 14px;
    color: #7a5a20;
    line-height: 1.6;
    margin: 0 0 20px;
    max-width: 380px;
}
.cta-confirm-actions {
    display: flex;
    gap: 10px;
    width: 100%;
    max-width: 380px;
}
.cta-confirm-primary,
.cta-confirm-secondary {
    flex: 1;
    padding: 12px 18px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    border: 0;
    line-height: 1.4;
}
.cta-confirm-primary {
    background: #1a2f5e;
    color: #fff;
}
.cta-confirm-primary:hover {
    background: #2c4a8a;
    color: #fff;
    text-decoration: none;
}
.cta-confirm-secondary {
    background: #fff;
    color: #7a5a20;
    border: 1px solid #e8d9bc;
}
.cta-confirm-secondary:hover {
    border-color: #b5924c;
    color: #b5924c;
}
@media (max-width: 480px) {
    .cta-confirm-actions { flex-direction: column; }
}