/* =========================================================================
   SAGE & STONE — PRODUCTION STYLESHEET v9
   Consolidated, single-source replacement for boutique.css.

   Reproduces the CURRENT APPROVED rendering of the landing page and all
   other public pages exactly. Supersedes and replaces:
     - ZIP 8.2  "brand header + hero lock"        (dead code — removed)
     - ZIP 8.2.1 "exact approved visual lock"      (kept — this is the
                                                     currently approved
                                                     header/hero, carried
                                                     forward unchanged)
     - ZIP 8.3 → 8.4.x experimental landing patches (superseded)
     - "CANONICAL LANDING DESIGN" patch block       (superseded)
     - "BEIGE COLOR PASS" patch block               (superseded)
     - manual card-darken / footer-green color passes (superseded)

   Every landing-page rule below is written once, with the final approved
   value, and no !important — landing-page classes are exclusive to
   landing.html (verified against every other template), so there is no
   competing rule left to out-rank.
   ========================================================================= */

:root {

    /* ---------- SHARED SITE TOKENS ----------
       Used by the header/nav/hero/buttons/cards on every page EXCEPT the
       locked landing header (below) and the landing sections (further
       below). Values unchanged from the prior stylesheet. */
    --night: #0c3035;
    --night2: #0a252b;
    --teal: #14515a;
    --teal2: #1b6870;
    --sage: #8fa681;
    --sage2: #c8d2bb;
    --sage3: #e5eadf;
    --cream: #f7f0dc;
    --cream2: #fffaf0;
    --gold: #c8a654;
    --gold2: #e1c875;
    --ink: #263230;
    --muted: #65706a;
    --stone: #d8d3c8;
    --lav: #8e81a3;
    --line: rgba(200, 166, 84, .38);
    --shadow: 0 24px 70px rgba(11, 39, 42, .12);

    /* ---------- LOCKED LANDING HEADER / HERO ----------
       The approved header banner + hero image treatment. Intentionally a
       separate palette from both the shared tokens above and the landing
       brand tokens below — do not merge. */
    --landing-header-bg: #082d3a;
    --landing-header-gold: #D29B3D;
    --landing-header-nav-bg: #F7F0E3;
    --landing-header-ink: #182027;
    --landing-header-ink-hover: #0E3A2F;
    --landing-hotspot-focus: #F0C14A;

    /* ---------- FINAL APPROVED LANDING BRAND TOKENS ---------- */

    /* forest greens — Ask Sage section + Vault cards */
    --landing-green-deep: #3C4E2C;
    --landing-green: #495E35;
    --landing-green-soft: #4C6337;
    --landing-green-rgb: 73, 94, 53;

    /* footer — deepest forest green */
    --landing-footer-green: #263B27;

    /* gateway cards (EMBODY / DISCOVER / REFLECT) — muted sage */
    --landing-sage-card: #A8BB8C;
    --landing-sage-card-2: #9FB181;
    --landing-sage-card-start: #B0C295;

    /* beige system */
    --landing-outer-sage: #E2EAD9;
    --landing-beige: #D4C6AA;
    --landing-beige-light: #D8C7B1;
    --landing-beige-dark: #A88968;
    --landing-muted-light: #DDD2BE;

    /* text */
    --landing-dark-text: #17382A;

    /* restrained antique-gold accent — gateway cards only */
    --landing-antique-gold: #6B4E24;
    --landing-antique-gold-rgb: 107, 78, 36;

    /* typography */
    --landing-font-serif: "Cormorant Garamond", Georgia, serif;

    /* radii / shadows */
    --landing-radius: 22px;
    --landing-radius-pill: 999px;
    --landing-shadow-gateway: 0 18px 36px rgba(58, 74, 42, .16);
    --landing-shadow-vault: 0 18px 38px rgba(24, 37, 29, .14);
}

/* =========================================================================
   RESET / BASE
   ========================================================================= */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }

/* =========================================================================
   SHARED HEADER / NAV
   Used by every page except the landing page (which uses the locked
   approved header further below).
   ========================================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    min-height: 106px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px clamp(24px, 5vw, 82px);
    color: #f8efd7;
    background: linear-gradient(90deg, var(--night2), var(--night), #103b42);
    border-bottom: 2px solid var(--gold);
    box-shadow: 0 7px 30px #061b1e35;
}
.identity { display: flex; align-items: center; gap: 15px; }
.identity img { width: 78px; height: 78px; }
.brand { font-family: Georgia, serif; font-size: clamp(29px, 3vw, 43px); color: #f2e5bd; line-height: 1; }
.tagline { margin-top: 7px; font-family: Georgia, serif; font-size: 10px; letter-spacing: .17em; color: var(--gold2); }

.nav { display: flex; align-items: center; gap: 5px; }
.nav > a, .dropbtn {
    padding: 10px 12px;
    color: #f6edda;
    font-family: Georgia, serif;
    font-size: 16px;
    background: none;
    border: 0;
    cursor: pointer;
}
.nav > a:hover, .dropbtn:hover, .nav a.active { color: var(--gold2); }
.dropdown { position: relative; }
.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    min-width: 210px;
    padding: 8px;
    background: #12383d;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 18px 50px #0004;
}
.dropdown:hover .dropdown-content { display: block; }
.dropdown-content a { display: block; padding: 10px 12px; color: #efe5ce; }
.dropdown-content a:hover { background: #1b4b50; }

/* =========================================================================
   SHARED PAGE HERO / BUTTON / CONTAINER
   Used by jewelry, crystals, tarot, sage, about, readings, crystal-vault,
   tarot-vault.
   ========================================================================= */

.page-hero {
    position: relative;
    overflow: hidden;
    padding: 76px clamp(35px, 9vw, 145px);
    background: linear-gradient(135deg, var(--cream2), #edf0de 58%, #dfece7);
    border-bottom: 1px solid var(--line);
}
.page-hero:after {
    content: "";
    position: absolute;
    inset: 0;
    background: url('/static/boutique/art/botanical-frame.svg') center/cover no-repeat;
    opacity: .44;
    pointer-events: none;
}
.page-hero > * { position: relative; z-index: 2; }
.kicker { font-family: Georgia, serif; font-size: 12px; letter-spacing: .22em; color: var(--teal); font-weight: 700; }
.page-hero h1 {
    max-width: 900px;
    margin: 12px 0 20px;
    font-family: Georgia, serif;
    font-weight: 400;
    font-size: clamp(52px, 7vw, 88px);
    line-height: 1.01;
    color: var(--night);
}
.page-hero p { max-width: 720px; font-size: 18px; color: #4d5d58; }
.gold-rule { width: 180px; border-top: 1px solid var(--gold); margin: 25px 0; }

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 23px;
    border-radius: 999px;
    border: 1px solid var(--gold);
    background: var(--night);
    color: #fff0ce;
    font-weight: 700;
    cursor: pointer;
}
.button.alt { background: var(--sage); color: var(--night2); }
.button:hover { background: var(--teal2); }

.container { max-width: 1260px; margin: auto; padding: 74px 32px; }
.section-title { font-family: Georgia, serif; font-size: clamp(38px, 4vw, 58px); font-weight: 400; color: var(--night); margin: 0 0 15px; }
.section-intro { max-width: 720px; color: var(--muted); font-size: 17px; margin-bottom: 38px; }

/* =========================================================================
   SHARED EDITORIAL / CATALOG / VAULT-CARD / TOOLBAR / SAGE CHAT / FORM
   Used across jewelry, crystals, tarot, crystal-vault, tarot-vault, sage,
   about, readings.
   ========================================================================= */

.editorial-split { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.editorial-image {
    min-height: 470px;
    border: 1px solid var(--gold);
    border-radius: 22px;
    background: linear-gradient(145deg, var(--night), var(--teal));
    position: relative;
    overflow: hidden;
}
.editorial-image:before {
    content: "☾";
    position: absolute;
    left: 50%;
    top: 34%;
    transform: translate(-50%, -50%);
    font-family: Georgia, serif;
    font-size: 190px;
    color: var(--gold2);
}
.editorial-image:after {
    content: "✦  SAGE & STONE  ✦";
    position: absolute;
    bottom: 42px;
    left: 0;
    right: 0;
    text-align: center;
    color: #f3e6be;
    font-family: Georgia, serif;
    letter-spacing: .2em;
}

.catalog-grid, .vault-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.product, .vault-card {
    padding: 29px;
    border: 1px solid #c7c7ba;
    border-radius: 13px;
    background: linear-gradient(145deg, #fffdf8, #efeee7);
    box-shadow: 0 12px 32px rgba(34, 48, 44, .07);
}
.product .category, .vault-card .meta { font-size: 10px; letter-spacing: .19em; color: var(--teal); font-weight: 800; }
.product h3, .vault-card h3 { font-family: Georgia, serif; color: var(--night); font-size: 27px; margin: 12px 0; }
.price { font-family: Georgia, serif; font-size: 28px; color: var(--teal); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
.chip { font-size: 11px; padding: 5px 9px; border-radius: 999px; background: var(--sage3); color: #435146; }
.vault-card p { color: #565f5a; }
.vault-card .prompt { padding-top: 12px; border-top: 1px solid #d7d0bd; color: #445851; font-style: italic; }

.vault-toolbar { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 30px; }
.vault-toolbar input, .vault-toolbar select {
    width: auto;
    min-width: 240px;
    padding: 12px 14px;
    border: 1px solid #bfc5b7;
    border-radius: 9px;
    background: #f5f4ee;
    color: var(--ink);
}

.sage-shell { display: grid; grid-template-columns: .65fr 1.35fr; gap: 55px; }
.sage-panel {
    padding: 33px;
    border-radius: 16px;
    border: 1px solid #b9c1b4;
    background: linear-gradient(145deg, #f2f1eb, #dddeda);
    box-shadow: var(--shadow);
}
.chatlog { min-height: 370px; max-height: 520px; overflow: auto; }
.bubble { max-width: 84%; padding: 15px 18px; border-radius: 18px; margin: 10px 0; }
.bubble.sage { background: var(--sage2); color: var(--night2); }
.bubble.user { background: var(--night); color: white; margin-left: auto; }
.sage-panel textarea { width: 100%; min-height: 120px; padding: 15px; border: 1px solid #b6b7b1; border-radius: 9px; background: #eeeeca; }

.form-card { max-width: 850px; padding: 30px; border: 1px solid #bfc2b6; background: #f1f0e9; border-radius: 14px; }
.form-card input, .form-card textarea, .form-card select {
    width: 100%;
    padding: 13px;
    margin: 7px 0;
    border: 1px solid #b9bdb1;
    border-radius: 8px;
    background: #f8f7f1;
}

/* =========================================================================
   LOCKED LANDING HEADER + HERO — APPROVED, DO NOT REDESIGN
   Reproduces "ZIP 8.2.1 exact approved visual lock" pixel-for-pixel.
   The .approved-header/.approved-brand-banner/.brand-mark-symbol header
   block (NOT the .approved-home-hero-* hero rules further below, which
   stay landing-only) is being reused verbatim, page-by-page, as each
   legacy page migrates onto the v9 system — Jewelry is the first (see
   JEWELRY PAGE section at the end of this file). The hero rules below
   remain exclusive to landing.html.
   ========================================================================= */

.site-header.approved-header {
    position: relative;
    display: block;
    min-height: 0;
    padding: 0;
    background: var(--landing-header-bg);
    border: 0;
    box-shadow: none;
}
.approved-brand-banner {
    position: relative;
    width: 100%;
    aspect-ratio: 1536 / 236;
    min-height: 150px;
    background: var(--landing-header-bg) url("/static/boutique/art/sage-stone-header-approved.jpg?v=3") center center / cover no-repeat;
    border-bottom: 2px solid var(--landing-header-gold);
}
.brand-mark-symbol {
    position: absolute;
    left: 42.48%;
    top: 5.08%;
    width: 9.58%;
    height: auto;
    pointer-events: none;
}
.approved-header .brand-nav {
    position: relative;
    z-index: 5;
    width: 100%;
    min-height: 70px;
    padding: 0 clamp(30px, 10vw, 170px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(22px, 3.4vw, 46px);
    background: var(--landing-header-nav-bg);
    border-top: 1px solid var(--landing-header-gold);
    border-bottom: 2px solid var(--landing-header-gold);
}
.approved-header .brand-nav > a, .approved-header .brand-nav .dropbtn {
    color: var(--landing-header-ink);
    font-family: var(--landing-font-serif);
    font-size: clamp(18px, 1.8vw, 27px);
    font-weight: 700;
    letter-spacing: .005em;
    padding: 16px 12px;
}
.approved-header .brand-nav > a:hover, .approved-header .brand-nav .dropbtn:hover { color: var(--landing-header-ink-hover); }
.approved-header .brand-nav .dropbtn { display: inline-flex; align-items: baseline; }
.approved-header .dropdown-content {
    top: 100%;
    min-width: 250px;
    background: var(--landing-header-nav-bg);
    border: 1px solid var(--landing-header-gold);
}
.approved-header .dropdown-content a { color: var(--landing-header-ink); font-weight: 650; }

/* Locked-nav "coming soon" states (Astrology / Astrology Charts) — inert,
   never a link to a fake page or a 404, and deliberately NOT just a
   washed-out opacity (that read as an accidental/broken row). The label
   stays fully legible; a small "Soon" badge is what signals "disabled",
   so the state reads as intentional at a glance. New selectors only;
   does not modify the .brand-nav > a / .dropbtn / .dropdown-content a
   rules above. Swap the <span> in sage_app/web/chrome.py for a real
   <a href> once each destination exists — no CSS change needed then. */
.soon-badge {
    display: inline-block;
    margin-left: 7px;
    padding: 1px 7px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    vertical-align: middle;
    opacity: .8;
}
.approved-header .brand-nav > .nav-soon {
    display: inline-flex;
    align-items: center;
    color: var(--landing-header-ink);
    font-family: var(--landing-font-serif);
    font-size: clamp(18px, 1.8vw, 27px);
    font-weight: 700;
    letter-spacing: .005em;
    padding: 16px 12px;
    opacity: .82;
    cursor: not-allowed;
}
.approved-header .dropdown-content .dropdown-soon {
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding: 10px 12px;
    color: #efe5ce;
    opacity: .88;
    cursor: not-allowed;
}

/* .approved-home-hero-art and .hero-copy are stacked in the same CSS Grid cell
   (rather than .hero-copy being absolutely positioned inside a box sized only by
   the art's aspect-ratio, or pulled up from flow with a negative margin — both of
   which either clip the paragraph or, at wide viewports where the paragraph wraps
   to fewer lines, can shrink the row below the art's own height and let the next
   section overlap the art). Grid track sizing takes the max of every stacked
   item's needed height, so the row is always at least as tall as the art AND, if
   the paragraph needs more room than that at a given width, the row grows to fit
   it — never clipping, never shrinking below the art, at any width. */
.approved-home-hero { position: relative; width: 100%; background: var(--landing-header-bg); display: grid; }
.approved-home-hero-art {
    position: relative;
    z-index: 1;
    grid-area: 1 / 1;
    align-self: start;
    width: 100%;
    aspect-ratio: 1536 / 716;
    background: var(--landing-header-bg) url("/static/boutique/art/sage-stone-hero-approved.jpg?v=2") center top / cover no-repeat;
}
/* nested inside .approved-home-hero-art (not a grid-row sibling) so its top/left
   percentages always resolve against the image's own aspect-ratio-locked box —
   at widths where the paragraph needs more room than the image and the grid row
   grows taller than the image to fit it, a sibling position would drift downward
   with the taller row and land on top of the paragraph text instead of the image. */
.hero-mark-symbol {
    position: absolute;
    left: 23.42%;
    top: 48.95%;
    width: 4.6%;
    height: auto;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.hero-copy {
    position: relative;
    z-index: 2;
    grid-area: 1 / 1;
    align-self: start;
    margin: 25.73% 0 0 8.2%;
    padding: 0 0 clamp(24px, 5vw, 56px);
    width: min(30vw, 430px);
    color: #CCCFC8;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(15px, 1.25vw, 18px);
    line-height: 1.7;
    text-align: left;
}

/* =========================================================================
   LANDING — SECTION 1: JEWELRY / CRYSTALS / TAROT (gateway cards)
   Light sage-ivory outer section + muted-sage cards.
   ========================================================================= */

.landing-gateways {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    padding: 38px clamp(28px, 4vw, 58px);
    background: linear-gradient(180deg, #E6EEDF 0%, var(--landing-outer-sage) 100%);
    border-top: 1px solid var(--landing-beige-dark);
    border-bottom: 1px solid var(--landing-beige-dark);
}

.landing-gateways .gateway-card {
    display: flex;
    flex-direction: column;
    min-height: 390px;
    padding: 38px 38px 34px;
    border: 1.5px solid rgba(var(--landing-antique-gold-rgb), .55);
    border-radius: var(--landing-radius);
    background: linear-gradient(145deg, var(--landing-sage-card-start) 0%, var(--landing-sage-card) 55%, var(--landing-sage-card-2) 100%);
    box-shadow: var(--landing-shadow-gateway);
    color: var(--landing-green);
    text-align: left;
    overflow: hidden;
}

.landing-gateways .num {
    color: var(--landing-antique-gold);
    font-family: var(--landing-font-serif);
    font-size: 16.5px;
    font-weight: 800;
    letter-spacing: .22em;
    text-align: left;
}

.landing-gateways h3 {
    margin: 20px 0;
    color: var(--landing-green);
    font-family: var(--landing-font-serif);
    font-size: clamp(40px, 4vw, 58px);
    line-height: 1;
    font-weight: 700;
    text-align: left;
}

.landing-gateways p {
    margin: 0;
    color: var(--landing-dark-text);
    font-size: 17px;
    line-height: 1.62;
    font-weight: 400;
    text-align: left;
}

.landing-gateways .gateway-link {
    align-self: flex-end;
    width: auto;
    margin: auto 0 0 auto;
    padding: 12px 24px;
    border: 1.5px solid rgba(var(--landing-antique-gold-rgb), .6);
    border-radius: var(--landing-radius-pill);
    background: transparent;
    box-shadow: none;
    color: var(--landing-green);
    font-family: var(--landing-font-serif);
    font-size: 20px;
    line-height: 1;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
}
.landing-gateways .gateway-link:hover {
    background: rgba(var(--landing-green-rgb), .08);
    border-color: var(--landing-green);
}

/* =========================================================================
   LANDING — SECTION 2: ASK SAGE
   Full-width dark forest-green section.
   ========================================================================= */

.ask-sage-feature {
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--landing-beige-dark);
    border-bottom: 1px solid var(--landing-beige-dark);
    background: linear-gradient(135deg, var(--landing-green-deep) 0%, var(--landing-green) 57%, var(--landing-green-soft) 100%);
    color: var(--landing-muted-light);
}

.ask-sage-inner {
    position: relative;
    z-index: 2;
    max-width: 1380px;
    margin: 0 auto;
    padding: 76px clamp(38px, 7vw, 96px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 50px;
}
.ask-sage-copy { max-width: 800px; text-align: left; }
.ask-sage-kicker { color: var(--landing-beige-dark); font-size: 14px; letter-spacing: .20em; font-weight: 800; text-align: left; }
.ask-sage-copy h2 {
    margin: 16px 0 20px;
    color: var(--landing-beige-light);
    font-family: var(--landing-font-serif);
    font-size: clamp(52px, 6vw, 82px);
    line-height: .98;
    font-weight: 600;
    text-align: left;
}

.ask-sage-rule { display: flex; width: min(340px, 72%); align-items: center; gap: 11px; margin: 23px 0 21px; }
.ask-sage-rule span { display: block; flex: 1; height: 1px; background: var(--landing-beige-dark); border: 0; }
.rule-mark-symbol { width: 42px; height: auto; flex-shrink: 0; }

.ask-sage-signature {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0 0 18px;
    color: var(--landing-beige-light);
    font-family: var(--landing-font-serif);
    font-size: clamp(24px, 2.4vw, 33px);
    line-height: 1.22;
    font-weight: 600;
    text-align: left;
}

.ask-sage-description {
    max-width: 720px;
    margin: 0;
    color: var(--landing-muted-light);
    font-size: 17px;
    line-height: 1.65;
    font-weight: 400;
    text-align: left;
}

.ask-sage-cta-wrap { display: flex; align-items: flex-end; justify-content: flex-end; align-self: end; }
.ask-sage-primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 180px;
    padding: 13px 26px;
    margin: 0;
    border: 1.5px solid var(--landing-beige-dark);
    border-radius: var(--landing-radius-pill);
    background: transparent;
    box-shadow: none;
    color: var(--landing-beige-light);
    font-family: var(--landing-font-serif);
    font-size: 21px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.ask-sage-primary-button:hover {
    background: rgba(212, 198, 170, .10);
    border-color: var(--landing-beige-light);
}

/* =========================================================================
   LANDING — SECTION 3: THE VAULTS
   Warm beige outer section + dark forest-green cards, side by side.
   ========================================================================= */

.vaults-feature {
    box-sizing: border-box;
    border-top: 1px solid var(--landing-beige-dark);
    border-bottom: 1px solid var(--landing-beige-dark);
    padding: 72px clamp(28px, 5vw, 72px) 82px;
    background: linear-gradient(180deg, #D8CAB0 0%, var(--landing-beige) 100%);
    color: var(--landing-dark-text);
}

.vaults-heading { max-width: 820px; margin: 0 auto 42px; text-align: center; }
.vaults-kicker { color: var(--landing-beige-dark); font-size: 14px; letter-spacing: .20em; font-weight: 800; }
.vaults-heading h2 {
    margin: 10px 0 7px;
    color: var(--landing-green-deep);
    font-family: var(--landing-font-serif);
    font-size: clamp(50px, 5vw, 72px);
    line-height: 1;
    font-weight: 700;
}
.vaults-heading p {
    margin: 0;
    color: #544C42;
    font-family: var(--landing-font-serif);
    font-size: 24px;
    font-weight: 600;
}

.vaults-grid {
    max-width: 1380px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    align-items: stretch;
}

.vault-panel {
    position: relative;
    min-height: 440px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border: 1.5px solid var(--landing-beige-dark);
    border-radius: var(--landing-radius);
    background: linear-gradient(145deg, var(--landing-green-deep) 0%, var(--landing-green) 61%, var(--landing-green-soft) 100%);
    box-shadow: var(--landing-shadow-vault);
    color: var(--landing-muted-light);
    text-decoration: none;
}

.vault-panel-content {
    flex: 1 1 auto;
    padding: 42px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.vault-icon {
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1.5px solid var(--landing-beige-dark);
    border-radius: 50%;
    background: rgba(212, 198, 170, .09);
    color: var(--landing-beige-light);
}
.vault-icon::before {
    display: block;
    color: var(--landing-beige-light);
    font-family: var(--landing-font-serif);
    font-size: 32px;
    line-height: 1;
}
.vault-icon-crystal::before { content: "◆"; }
.vault-icon-tarot::before { content: "☾"; }

.vault-copy { width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.vault-label {
    margin: 0;
    color: var(--landing-beige-light);
    font-family: var(--landing-font-serif);
    font-size: clamp(34px, 3.3vw, 48px);
    line-height: 1;
    font-weight: 700;
    text-align: left;
}

.vault-mini-rule { display: flex; align-items: center; width: min(320px, 100%); gap: 10px; margin: 20px 0 18px; }
.vault-mini-rule span { display: block; flex: 1; height: 1px; background: var(--landing-beige-dark); }
.vault-mini-rule b { color: var(--landing-beige-dark); font-size: 10px; font-weight: 400; }

.vault-subtitle {
    margin: 0 0 12px;
    color: var(--landing-beige-light);
    font-family: var(--landing-font-serif);
    font-size: 25px;
    line-height: 1.12;
    font-weight: 700;
    text-align: left;
}
.vault-copy p {
    margin: 0 0 28px;
    color: var(--landing-muted-light);
    font-size: 16px;
    line-height: 1.60;
    font-weight: 400;
    text-align: left;
}

.vault-enter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    width: auto;
    margin: auto 0 0 auto;
    padding: 12px 22px;
    border: 1.5px solid var(--landing-beige-dark);
    border-radius: var(--landing-radius-pill);
    background: transparent;
    box-shadow: none;
    color: var(--landing-beige-light);
    font-family: var(--landing-font-serif);
    font-size: 19px;
    line-height: 1;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}
.vault-panel:hover .vault-enter {
    background: rgba(212, 198, 170, .10);
    border-color: var(--landing-beige-light);
}

/* =========================================================================
   FOOTER — shared component, final approved deep-forest-green treatment.
   ========================================================================= */

.footer {
    padding: 55px clamp(30px, 7vw, 110px);
    background: var(--landing-footer-green);
    border-top: 1px solid var(--landing-beige-dark);
    color: #CBBBA5;
}
.footer strong { font-family: Georgia, serif; font-size: 25px; color: var(--landing-beige-light); }
.footer b { color: var(--landing-beige-light); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; }
.footer a { color: #CBBBA5; }
.fine, .footer .fine { font-size: 11px; color: #AFA896; margin-top: 30px; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width: 980px) {
    /* shared */
    .nav { gap: 0; }
    .nav > a, .dropbtn { font-size: 14px; padding: 8px; }
    .editorial-split, .sage-shell { grid-template-columns: 1fr; }
    .catalog-grid, .vault-grid { grid-template-columns: 1fr 1fr; }
    .tagline { display: none; }

    /* locked landing header/hero */
    .approved-header .brand-nav { justify-content: flex-start; overflow-x: auto; white-space: nowrap; padding: 0 22px; gap: 12px; }
    .approved-brand-banner { min-height: 126px; background-size: cover; }
    .approved-home-hero-art { background-position: center top; }

    /* landing sections */
    .landing-gateways { grid-template-columns: 1fr; }
    .ask-sage-inner { grid-template-columns: 1fr; padding: 42px clamp(28px, 5vw, 60px); }
    .ask-sage-cta-wrap { justify-content: flex-end; }
    .ask-sage-copy h2 { font-size: clamp(34px, 6vw, 51px); }
    .vaults-grid { grid-template-columns: 1fr 1fr; }
    .vault-enter { padding: 14px 26px; }
    .vault-panel-content { padding: 34px; gap: 18px; }
}

@media (max-width: 700px) {
    /* shared */
    .site-header { position: relative; flex-direction: column; align-items: flex-start; }
    .nav { width: 100%; overflow: auto; }
    .identity img { width: 62px; height: 62px; }
    .page-hero { padding: 55px 28px; }
    .container { padding: 55px 22px; }
    .catalog-grid, .vault-grid, .footer-grid { grid-template-columns: 1fr; }
    .vault-toolbar input, .vault-toolbar select { width: 100%; min-width: 0; }

    /* locked landing header/hero */
    .approved-brand-banner { min-height: 110px; }
    .approved-header .brand-nav { min-height: 58px; }
    .approved-header .brand-nav > a, .approved-header .brand-nav .dropbtn { font-size: 17px; padding: 13px 10px; }
    .approved-header .brand-nav > .nav-soon { font-size: 17px; padding: 13px 10px; }
    .approved-home-hero-art { aspect-ratio: auto; min-height: 620px; background-size: auto 100%; background-position: center top; }
    /* at this crop the hero art recenters on the tree and the text panel (including the
       baked-in headline) scrolls out of the visible crop; drop the small ornamental
       symbol here, and let the paragraph flow below the art instead of floating over it,
       so it stays readable rather than overlapping the tree */
    .hero-mark-symbol { display: none; }
    .hero-copy {
        grid-area: 2 / 1;
        align-self: start;
        margin: 0;
        width: auto;
        padding: 24px 24px 4px;
        background: var(--landing-header-bg);
        font-size: 15px;
    }

    /* landing sections */
    .landing-gateways { padding: 24px 18px; }
    .landing-gateways .gateway-card { min-height: 340px; padding: 30px 25px; }
    .ask-sage-inner { padding: 56px 24px; }
    .vaults-feature { padding: 58px 20px 64px; }
    .vaults-grid { grid-template-columns: 1fr; }
    .vault-panel { min-height: auto; }
    .vault-panel-content { min-height: auto; padding: 32px 26px; }
    .gateway-link, .ask-sage-primary-button, .vault-enter { margin-left: auto; }
}

/* =========================================================================
   JEWELRY PAGE — v9 migration (first legacy page moved onto the v9 system;
   page-by-page, not a global rollout). All selectors below are prefixed
   `.jewelry-` and are new/unique to this page — nothing here edits or
   overrides any landing/vault/gateway rule above. The page reuses the
   locked `.approved-header` header block verbatim (see above) and the
   shared `.footer` rules (see FOOTER section above) unchanged.
   ========================================================================= */

.jewelry-hero {
    background: linear-gradient(135deg, var(--cream2), #f1efe0 55%, var(--sage3));
    border-bottom: 1px solid var(--line);
    padding: 56px clamp(28px, 6vw, 96px) 48px;
}
.jewelry-hero-inner { max-width: 780px; margin: 0 auto; text-align: center; }
.jewelry-hero-kicker {
    font-family: var(--landing-font-serif);
    font-size: 13px;
    letter-spacing: .22em;
    font-weight: 700;
    color: var(--teal);
}
.jewelry-hero-title {
    margin: 14px 0 0;
    font-family: var(--landing-font-serif);
    font-weight: 600;
    font-size: clamp(38px, 5vw, 60px);
    line-height: 1.05;
    color: var(--night);
}
.jewelry-hero-rule {
    width: 120px;
    height: 1px;
    margin: 22px auto;
    background: var(--gold);
    border: 0;
}
.jewelry-hero-copy {
    max-width: 620px;
    margin: 0 auto;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.65;
}

.jewelry-collection {
    padding: 54px clamp(28px, 5vw, 72px) 90px;
    background: var(--cream);
}
.jewelry-collection-inner { max-width: 1320px; margin: 0 auto; }

.jewelry-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 14px 22px;
    margin: 0 0 38px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line);
}
.jewelry-toolbar-label {
    font-family: var(--landing-font-serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--teal);
    white-space: nowrap;
}
.jewelry-filter-row { display: flex; flex-wrap: wrap; gap: 10px; }
.jewelry-filter {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    font-family: var(--landing-font-serif);
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.jewelry-filter:hover { border-color: var(--gold); }
.jewelry-filter.active {
    background: var(--night);
    border-color: var(--night);
    color: #fbf3dd;
}

.jewelry-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px;
}
.jewelry-empty {
    grid-column: 1 / -1;
    padding: 60px 20px;
    text-align: center;
    color: var(--muted);
    font-size: 16px;
}

.jewelry-card {
    display: flex;
    flex-direction: column;
    background: var(--cream2);
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.jewelry-card-image { position: relative; width: 100%; aspect-ratio: 1 / 1; background: var(--sage3); }
.jewelry-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jewelry-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(155deg, #EDEADA 0%, var(--sage3) 55%, #DCE6D6 100%);
}
.jewelry-placeholder-mark {
    width: 30%;
    max-width: 76px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--gold);
    border-radius: 50%;
    color: var(--teal);
    background: rgba(255, 255, 255, .35);
}
.jewelry-placeholder-mark::before {
    content: "\25C8";
    font-family: var(--landing-font-serif);
    font-size: 30px;
    line-height: 1;
}

.jewelry-card-body { display: flex; flex-direction: column; flex: 1; padding: 24px 26px 26px; }
.jewelry-card-eyebrow {
    font-family: var(--landing-font-serif);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .2em;
    color: var(--teal);
}
.jewelry-card-name {
    margin: 10px 0 4px;
    font-family: var(--landing-font-serif);
    font-size: 25px;
    font-weight: 700;
    color: var(--night);
    line-height: 1.15;
}
.jewelry-card-price { font-family: var(--landing-font-serif); font-size: 19px; color: var(--teal); }
.jewelry-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.jewelry-chip {
    font-size: 11px;
    letter-spacing: .03em;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--sage3);
    color: #435146;
}
.jewelry-card-view {
    align-self: flex-start;
    margin-top: 20px;
    padding: 10px 4px 0;
    border: 0;
    border-top: 1px solid var(--line);
    width: 100%;
    text-align: left;
    background: transparent;
    color: var(--night);
    font-family: var(--landing-font-serif);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.jewelry-card-view:hover { color: var(--teal2); }

/* modal — "closer look" at a piece; real, working, purely client-side */
.jewelry-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    padding: 24px;
    align-items: center;
    justify-content: center;
    background: rgba(12, 28, 27, .55);
}
.jewelry-modal-backdrop.open { display: flex; }
.jewelry-modal {
    position: relative;
    width: min(680px, 100%);
    max-height: 88vh;
    overflow: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    background: var(--cream2);
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(6, 20, 19, .35);
}
.jewelry-modal-image { position: relative; aspect-ratio: 1 / 1; background: var(--sage3); }
.jewelry-modal-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jewelry-modal-body { padding: 32px 30px; display: flex; flex-direction: column; }
.jewelry-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--cream2);
    color: var(--night);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.jewelry-modal-close:hover { border-color: var(--gold); }

@media (max-width: 980px) {
    .jewelry-hero { padding: 46px 26px 40px; }
    .jewelry-collection { padding: 42px 22px 70px; }
    .jewelry-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; gap: 28px; }
    .jewelry-toolbar { margin-bottom: 30px; }
}

@media (max-width: 700px) {
    .jewelry-hero { padding: 40px 20px 34px; }
    .jewelry-hero-title { font-size: clamp(32px, 8vw, 44px); }
    .jewelry-collection { padding: 34px 16px 56px; }
    .jewelry-toolbar-label { width: 100%; }
    .jewelry-modal { grid-template-columns: 1fr; max-height: 92vh; }
    .jewelry-modal-image { aspect-ratio: 4 / 3; }
}

/* =========================================================================
   CRYSTALS PAGE — v9 migration (second legacy page moved onto the v9
   system, after Jewelry). All selectors below are prefixed `.crystal-`
   and are new/unique to this page — nothing here edits or overrides any
   landing/vault/gateway/jewelry rule above. Reuses the locked
   `.approved-header` header block and shared `.footer` rules unchanged.

   The shop grid below is intentionally built to render an honest, non-
   placeholder-feeling transition: the canonical catalog
   (sage_app/core/catalog.py) currently has zero products in category
   "crystals" (only 3 jewelry bracelets exist today), so no fake
   inventory is fabricated here — .crystal-toolbar/.crystal-grid/
   .crystal-card stay exactly as built (same architecture as the Jewelry
   grid) so real "Featured Stones" inventory can be dropped in later
   with zero markup change; only what renders *inside* the grid while
   it's empty was designed to read as an editorial pause, not an
   "unfinished" notice.

   "Explore by Intention" (.crystal-intent-*) is a separate, honestly-
   labeled discovery bridge into the existing Crystal Vault, built from
   6 curated pairings verified against the real
   /static/boutique/data/crystals.json keyword data (already live on
   /crystal-vault) — not styled as shoppable product cards (no price, no
   purchase CTA), so it never implies these are for sale.
   ========================================================================= */

.crystal-hero {
    background: linear-gradient(135deg, var(--cream2), #f1efe0 55%, var(--sage3));
    border-bottom: 1px solid var(--line);
    padding: 56px clamp(28px, 6vw, 96px) 48px;
}
.crystal-hero-inner { max-width: 780px; margin: 0 auto; text-align: center; }
.crystal-hero-kicker {
    font-family: var(--landing-font-serif);
    font-size: 13px;
    letter-spacing: .22em;
    font-weight: 700;
    color: var(--teal);
}
.crystal-hero-title {
    margin: 14px 0 0;
    font-family: var(--landing-font-serif);
    font-weight: 600;
    font-size: clamp(38px, 5vw, 60px);
    line-height: 1.05;
    color: var(--night);
}
.crystal-hero-rule { width: 120px; height: 1px; margin: 22px auto; background: var(--gold); border: 0; }
.crystal-hero-copy { max-width: 620px; margin: 0 auto; color: var(--muted); font-size: 17px; line-height: 1.65; }
.crystal-hero-cta { margin: 28px 0 0; }
.crystal-hero-cta .button { padding: 12px 26px; }

.crystal-collection { padding: 54px clamp(28px, 5vw, 72px) 20px; background: var(--cream); }
.crystal-collection-inner { max-width: 1320px; margin: 0 auto; }
.crystal-collection-head { max-width: 640px; margin: 0 auto 24px; text-align: center; }
.crystal-collection-kicker { font-family: var(--landing-font-serif); font-size: 13px; font-weight: 700; letter-spacing: .18em; color: var(--teal); }
.crystal-collection-title { margin: 12px 0 0; font-family: var(--landing-font-serif); font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; color: var(--night); line-height: 1.3; }
.crystal-collection-rule { display: flex; width: min(220px, 60%); align-items: center; gap: 10px; margin: 20px auto 0; }
.crystal-collection-rule span { display: block; flex: 1; height: 1px; background: var(--line); }
.crystal-collection-mark { width: 22px; height: auto; flex-shrink: 0; }

.crystal-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 14px 22px;
    margin: 0 0 38px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line);
}
.crystal-toolbar-label {
    font-family: var(--landing-font-serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--teal);
    white-space: nowrap;
}
.crystal-filter-row { display: flex; flex-wrap: wrap; gap: 10px; }
.crystal-filter {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    font-family: var(--landing-font-serif);
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.crystal-filter:hover { border-color: var(--gold); }
.crystal-filter.active { background: var(--night); border-color: var(--night); color: #fbf3dd; }

.crystal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; }

/* Rendered inside .crystal-grid only while there is no real sellable
   inventory — a quiet editorial transition into "Explore by Intention"
   below, not a bordered "coming soon" box. Swapped automatically for
   real .crystal-card items the moment crystal products exist. */
.crystal-collection-transition {
    grid-column: 1 / -1;
    max-width: 560px;
    margin: 4px auto 4px;
    padding: 12px 0 0;
    text-align: center;
}
.crystal-collection-transition p { margin: 0 0 16px; color: var(--muted); font-size: 16px; line-height: 1.6; }
.crystal-collection-transition-link {
    font-family: var(--landing-font-serif);
    font-size: 15px;
    font-weight: 700;
    color: var(--night);
}
.crystal-collection-transition-link:hover { color: var(--teal2); }

.crystal-card {
    display: flex;
    flex-direction: column;
    background: var(--cream2);
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow);
}
.crystal-card-image { position: relative; width: 100%; aspect-ratio: 1 / 1; background: var(--sage3); }
.crystal-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crystal-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(155deg, #EDEADA 0%, var(--sage3) 55%, #DCE6D6 100%);
}
.crystal-placeholder-mark {
    width: 30%;
    max-width: 76px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--gold);
    border-radius: 50%;
    color: var(--teal);
    background: rgba(255, 255, 255, .35);
}
.crystal-placeholder-mark::before { content: "\25C8"; font-family: var(--landing-font-serif); font-size: 30px; line-height: 1; }

.crystal-card-body { display: flex; flex-direction: column; flex: 1; padding: 24px 26px 26px; }
.crystal-card-eyebrow { font-family: var(--landing-font-serif); font-size: 11.5px; font-weight: 800; letter-spacing: .2em; color: var(--teal); }
.crystal-card-name { margin: 10px 0 4px; font-family: var(--landing-font-serif); font-size: 25px; font-weight: 700; color: var(--night); line-height: 1.15; }
.crystal-card-price { font-family: var(--landing-font-serif); font-size: 19px; color: var(--teal); }
.crystal-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.crystal-chip { font-size: 11px; letter-spacing: .03em; padding: 5px 11px; border-radius: 999px; background: var(--sage3); color: #435146; }
.crystal-card-view {
    align-self: flex-start;
    margin-top: 20px;
    padding: 10px 4px 0;
    border: 0;
    border-top: 1px solid var(--line);
    width: 100%;
    text-align: left;
    background: transparent;
    color: var(--night);
    font-family: var(--landing-font-serif);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.crystal-card-view:hover { color: var(--teal2); }

/* modal — "closer look" at a stone; real, working, purely client-side */
.crystal-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    padding: 24px;
    align-items: center;
    justify-content: center;
    background: rgba(12, 28, 27, .55);
}
.crystal-modal-backdrop.open { display: flex; }
.crystal-modal {
    position: relative;
    width: min(680px, 100%);
    max-height: 88vh;
    overflow: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    background: var(--cream2);
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(6, 20, 19, .35);
}
.crystal-modal-image { position: relative; aspect-ratio: 1 / 1; background: var(--sage3); }
.crystal-modal-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crystal-modal-body { padding: 32px 30px; display: flex; flex-direction: column; }
.crystal-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--cream2);
    color: var(--night);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.crystal-modal-close:hover { border-color: var(--gold); }

/* "Explore by Intention" — 6 curated intention→crystal pairings, a
   discovery bridge into the Crystal Vault (not the Vault itself).
   Intention leads (large serif word); crystal name is secondary; the
   Vault carries the full 24-entry reference collection, meanings,
   symbolism, search, and reflection prompts — deliberately not
   duplicated here. No price, no purchase CTA, so it never reads as a
   shoppable product. Alternating tone (nth-child) reads as an editorial
   rhythm across the 3x2 grid, rather than 6 identical repeated tiles. */
.crystal-intent {
    padding: 30px clamp(28px, 5vw, 72px) 58px;
    background: var(--cream);
}
.crystal-intent-inner { max-width: 1180px; margin: 0 auto; }
.crystal-intent-head { max-width: 700px; margin: 0 0 34px; }
.crystal-intent-kicker { font-family: var(--landing-font-serif); font-size: 13px; font-weight: 700; letter-spacing: .18em; color: var(--teal); }
.crystal-intent-title { margin: 10px 0 8px; font-family: var(--landing-font-serif); font-size: clamp(28px, 3vw, 38px); font-weight: 700; color: var(--night); }
.crystal-intent-copy { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.6; }

.crystal-intent-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.crystal-intent-card { padding: 34px 30px; background: var(--cream2); }
.crystal-intent-card:nth-child(even) { background: var(--sage3); }
.crystal-intent-word { margin: 0; font-family: var(--landing-font-serif); font-size: clamp(28px, 2.6vw, 36px); font-weight: 700; color: var(--night); line-height: 1; }
.crystal-intent-crystal { margin: 8px 0 12px; font-family: var(--landing-font-serif); font-size: 13.5px; font-weight: 700; letter-spacing: .06em; color: var(--landing-antique-gold, var(--teal)); }
.crystal-intent-desc { margin: 0 0 16px; color: #435146; font-size: 14.5px; line-height: 1.55; }
.crystal-intent-link { font-family: var(--landing-font-serif); font-size: 14px; font-weight: 700; color: var(--night); }
.crystal-intent-link:hover { color: var(--teal2); }

.crystal-intent-more { margin: 34px 0 0; text-align: center; }
.crystal-intent-more .button { padding: 12px 26px; }

@media (max-width: 980px) {
    .crystal-hero { padding: 46px 26px 40px; }
    .crystal-collection { padding: 42px 22px 70px; }
    .crystal-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; gap: 28px; }
    .crystal-toolbar { margin-bottom: 30px; }
    .crystal-intent { padding: 20px 22px 70px; }
    /* 2 columns is safe here (unlike the old 9-card version) — exactly 6
       curated cards divide evenly into 3 rows of 2, no orphan */
    .crystal-intent-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
    .crystal-hero { padding: 40px 20px 34px; }
    .crystal-hero-title { font-size: clamp(32px, 8vw, 44px); }
    .crystal-collection { padding: 34px 16px 40px; }
    .crystal-toolbar-label { width: 100%; }
    .crystal-modal { grid-template-columns: 1fr; max-height: 92vh; }
    .crystal-modal-image { aspect-ratio: 4 / 3; }
    .crystal-intent { padding: 10px 16px 56px; }
    .crystal-intent-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   TAROT PAGE — v9 migration (third legacy page moved onto the v9 system,
   after Jewelry and Crystals). All selectors below are prefixed `.tarot-`
   and are new/unique to this page — nothing here edits or overrides any
   landing/vault/gateway/jewelry/crystal rule above. Reuses the locked
   `.approved-header` header block and shared `.footer`/`.button` rules
   unchanged.

   Five distinct, deliberately NOT-merged offerings on this page:
     1. .tarot-readings — the real, LIVE Tarot Reading catalog. This is
        NOT sage_app/core/catalog.py's SERVICES list (category:
        "reading", Mini/Full Tarot Reading) — that list is legacy and
        currently unreachable from any live page (the /readings route
        it was meant to feed, sage_app/web/templates/readings.html, is
        shadowed by sage_app/reading_commerce/router.py's own /readings
        route, registered earlier in main.py). The actually-live, real,
        Square-backed reading catalog is reading_commerce's own
        GET /api/v1/reading-products (Clarity / Deep Dive / Path Ahead
        Tarot Reading) — that is what this section renders, read-only,
        with an "Explore All Tarot Readings" CTA into the real,
        untouched /readings storefront for actual purchasing.
     2. .tarot-collection — real merchandise (decks, accessories, etc.),
        filtered from the canonical catalog by category "tarot". Zero
        products exist there today, so it renders the same honest,
        polished editorial-transition pattern proven on Crystals (never
        fabricated inventory) — ready to receive real products with no
        markup change.
     3. .tarot-guide — the existing real "Tarot Guide" digital product
        (id: prod-tarot-guide, category: "digital", $15, unchanged),
        looked up by id specifically (not by category, so the unrelated
        Crystal Guide is never pulled in by accident). Its CTA is an
        honest "request" form wired to the real, already-working
        POST /api/v1/deliveries endpoint — that endpoint only records a
        PENDING delivery request (no payment processor behind it), so
        the copy/CTA are worded as a request, not a false "buy now".
     4. .tarot-bridge — a doorway into the existing, unaltered Tarot
        Vault (78-card reference/search) — not a duplicate of it.
     5. The hero's "Explore Tarot Readings" CTA links to the same real
        /readings storefront as this page's readings section — not
        rebuilt here, not a second implementation of it.
   ========================================================================= */

.tarot-hero {
    background: linear-gradient(135deg, var(--cream2), #f1efe0 55%, var(--sage3));
    border-bottom: 1px solid var(--line);
    padding: 56px clamp(28px, 6vw, 96px) 48px;
}
.tarot-hero-inner { max-width: 780px; margin: 0 auto; text-align: center; }
.tarot-hero-kicker { font-family: var(--landing-font-serif); font-size: 13px; letter-spacing: .22em; font-weight: 700; color: var(--teal); }
.tarot-hero-title { margin: 14px 0 0; font-family: var(--landing-font-serif); font-weight: 600; font-size: clamp(38px, 5vw, 60px); line-height: 1.05; color: var(--night); }
.tarot-hero-rule { width: 120px; height: 1px; margin: 22px auto; background: var(--gold); border: 0; }
.tarot-hero-copy { max-width: 620px; margin: 0 auto; color: var(--muted); font-size: 17px; line-height: 1.65; }
.tarot-hero-cta { margin: 28px 0 0; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.tarot-hero-cta .button { padding: 12px 26px; }

/* --- 1. Tarot Readings — the real, live, Square-backed reading catalog --- */
.tarot-readings { padding: 54px clamp(28px, 5vw, 72px) 20px; background: var(--cream); }
.tarot-readings-inner { max-width: 1320px; margin: 0 auto; }
.tarot-readings-head { max-width: 640px; margin: 0 auto 40px; text-align: center; }
.tarot-readings-kicker { font-family: var(--landing-font-serif); font-size: 13px; font-weight: 700; letter-spacing: .18em; color: var(--teal); }
.tarot-readings-title { margin: 12px 0 0; font-family: var(--landing-font-serif); font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; color: var(--night); line-height: 1.3; }
.tarot-readings-copy { margin: 14px 0 0; color: var(--muted); font-size: 16px; line-height: 1.6; }

.tarot-readings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; }
.tarot-readings-transition { grid-column: 1 / -1; max-width: 560px; margin: 4px auto 4px; padding: 12px 0 0; text-align: center; }
.tarot-readings-transition p { margin: 0 0 16px; color: var(--muted); font-size: 16px; line-height: 1.6; }

.tarot-reading-card { display: flex; flex-direction: column; padding: 30px 28px; background: var(--cream2); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.tarot-reading-eyebrow { font-family: var(--landing-font-serif); font-size: 11.5px; font-weight: 800; letter-spacing: .2em; color: var(--teal); }
.tarot-reading-name { margin: 10px 0 4px; font-family: var(--landing-font-serif); font-size: 24px; font-weight: 700; color: var(--night); line-height: 1.15; }
.tarot-reading-price { font-family: var(--landing-font-serif); font-size: 19px; color: var(--teal); margin: 0 0 12px; }
.tarot-reading-desc { margin: 0; color: #435146; font-size: 14.5px; line-height: 1.55; flex: 1; }
.tarot-reading-view { align-self: flex-start; margin-top: 18px; padding: 10px 4px 0; border: 0; border-top: 1px solid var(--line); width: 100%; text-align: left; background: transparent; color: var(--night); font-family: var(--landing-font-serif); font-size: 15px; font-weight: 700; cursor: pointer; }
.tarot-reading-view:hover { color: var(--teal2); }

.tarot-readings-more { margin: 34px 0 0; text-align: center; }
.tarot-readings-more .button { padding: 12px 26px; }

/* modal — a closer look at one reading; real, working, purely client-side */
.tarot-reading-modal-backdrop { display: none; position: fixed; inset: 0; z-index: 100; padding: 24px; align-items: center; justify-content: center; background: rgba(12, 28, 27, .55); }
.tarot-reading-modal-backdrop.open { display: flex; }
.tarot-reading-modal { position: relative; width: min(560px, 100%); max-height: 88vh; overflow: auto; padding: 36px 32px; background: var(--cream2); border-radius: 20px; box-shadow: 0 30px 80px rgba(6, 20, 19, .35); }
.tarot-reading-modal-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--line); background: var(--cream2); color: var(--night); font-size: 18px; line-height: 1; cursor: pointer; }
.tarot-reading-modal-close:hover { border-color: var(--gold); }
.tarot-reading-modal-deliverables { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: #435146; font-size: 14px; line-height: 1.55; font-style: italic; }

/* --- 2. merchandise collection (mirrors the Crystals collection pattern) --- */
.tarot-collection { padding: 20px clamp(28px, 5vw, 72px) 20px; background: var(--cream); }
.tarot-collection-inner { max-width: 1320px; margin: 0 auto; }
.tarot-collection-head { max-width: 640px; margin: 0 auto 24px; text-align: center; }
.tarot-collection-kicker { font-family: var(--landing-font-serif); font-size: 13px; font-weight: 700; letter-spacing: .18em; color: var(--teal); }
.tarot-collection-title { margin: 12px 0 0; font-family: var(--landing-font-serif); font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; color: var(--night); line-height: 1.3; }
.tarot-collection-rule { display: flex; width: min(220px, 60%); align-items: center; gap: 10px; margin: 20px auto 0; }
.tarot-collection-rule span { display: block; flex: 1; height: 1px; background: var(--line); }
.tarot-collection-mark { width: 22px; height: auto; flex-shrink: 0; }

.tarot-toolbar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 22px; margin: 0 0 38px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.tarot-toolbar-label { font-family: var(--landing-font-serif); font-size: 13px; font-weight: 700; letter-spacing: .18em; color: var(--teal); white-space: nowrap; }
.tarot-filter-row { display: flex; flex-wrap: wrap; gap: 10px; }
.tarot-filter { display: inline-flex; align-items: center; padding: 8px 18px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font-family: var(--landing-font-serif); font-size: 14.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.tarot-filter:hover { border-color: var(--gold); }
.tarot-filter.active { background: var(--night); border-color: var(--night); color: #fbf3dd; }

.tarot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; }

/* rendered inside .tarot-grid only while zero real merchandise exists —
   same quiet editorial-transition treatment proven on Crystals, not a
   bordered "unfinished" box; swapped automatically for real .tarot-card
   items the moment tarot merchandise exists */
.tarot-collection-transition { grid-column: 1 / -1; max-width: 560px; margin: 4px auto 4px; padding: 12px 0 0; text-align: center; }
.tarot-collection-transition p { margin: 0 0 16px; color: var(--muted); font-size: 16px; line-height: 1.6; }
.tarot-collection-transition-link { font-family: var(--landing-font-serif); font-size: 15px; font-weight: 700; color: var(--night); }
.tarot-collection-transition-link:hover { color: var(--teal2); }

.tarot-card { display: flex; flex-direction: column; background: var(--cream2); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.tarot-card-image { position: relative; width: 100%; aspect-ratio: 1 / 1; background: var(--sage3); }
.tarot-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tarot-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(155deg, #EDEADA 0%, var(--sage3) 55%, #DCE6D6 100%); }
.tarot-placeholder-mark { width: 30%; max-width: 70px; aspect-ratio: 3 / 4; position: relative; border: 1.5px solid var(--gold); border-radius: 10px; background: rgba(255, 255, 255, .35); }
.tarot-placeholder-mark::before { content: "\2726"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--landing-font-serif); font-size: 22px; color: var(--teal); }
.tarot-card-body { display: flex; flex-direction: column; flex: 1; padding: 24px 26px 26px; }
.tarot-card-eyebrow { font-family: var(--landing-font-serif); font-size: 11.5px; font-weight: 800; letter-spacing: .2em; color: var(--teal); }
.tarot-card-name { margin: 10px 0 4px; font-family: var(--landing-font-serif); font-size: 25px; font-weight: 700; color: var(--night); line-height: 1.15; }
.tarot-card-price { font-family: var(--landing-font-serif); font-size: 19px; color: var(--teal); }
.tarot-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.tarot-chip { font-size: 11px; letter-spacing: .03em; padding: 5px 11px; border-radius: 999px; background: var(--sage3); color: #435146; }
.tarot-card-view { align-self: flex-start; margin-top: 20px; padding: 10px 4px 0; border: 0; border-top: 1px solid var(--line); width: 100%; text-align: left; background: transparent; color: var(--night); font-family: var(--landing-font-serif); font-size: 15px; font-weight: 700; cursor: pointer; }
.tarot-card-view:hover { color: var(--teal2); }

/* modal — "closer look" at a deck; real, working, purely client-side */
.tarot-modal-backdrop { display: none; position: fixed; inset: 0; z-index: 100; padding: 24px; align-items: center; justify-content: center; background: rgba(12, 28, 27, .55); }
.tarot-modal-backdrop.open { display: flex; }
.tarot-modal { position: relative; width: min(680px, 100%); max-height: 88vh; overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--cream2); border-radius: 20px; box-shadow: 0 30px 80px rgba(6, 20, 19, .35); }
.tarot-modal-image { position: relative; aspect-ratio: 1 / 1; background: var(--sage3); }
.tarot-modal-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tarot-modal-body { padding: 32px 30px; display: flex; flex-direction: column; }
.tarot-modal-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--line); background: var(--cream2); color: var(--night); font-size: 18px; line-height: 1; cursor: pointer; }
.tarot-modal-close:hover { border-color: var(--gold); }

/* --- 3. Tarot Guide — one real digital product, its own distinct feature --- */
.tarot-guide { padding: 20px clamp(28px, 5vw, 72px) 58px; background: var(--cream); }
.tarot-guide-inner {
    max-width: 980px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 34px;
    align-items: center;
    padding: 40px clamp(28px, 4vw, 52px);
    background: var(--cream2);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow);
}
.tarot-guide-mark { width: 84px; height: 84px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--gold); border-radius: 50%; color: var(--teal); background: var(--sage3); }
.tarot-guide-mark::before { content: "\2726"; font-family: var(--landing-font-serif); font-size: 34px; }
.tarot-guide-eyebrow { font-family: var(--landing-font-serif); font-size: 11.5px; font-weight: 800; letter-spacing: .2em; color: var(--teal); }
.tarot-guide-name { margin: 8px 0 6px; font-family: var(--landing-font-serif); font-size: clamp(24px, 2.4vw, 30px); font-weight: 700; color: var(--night); }
.tarot-guide-price { font-family: var(--landing-font-serif); font-size: 18px; color: var(--teal); margin: 0 0 10px; }
.tarot-guide-desc { margin: 0 0 14px; color: #435146; font-size: 15px; line-height: 1.55; max-width: 520px; }
.tarot-guide-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.tarot-guide-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tarot-guide-form input[type="email"] { flex: 1; min-width: 220px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #f8f7f1; color: var(--ink); }
.tarot-guide-form button { padding: 12px 22px; }
.tarot-guide-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.tarot-guide-result { margin: 10px 0 0; font-size: 14px; color: var(--teal); font-weight: 600; }

/* --- 4. Tarot Vault bridge — one contained editorial feature panel, not
   two floating halves. The text and card-back art share a single
   bordered/shadowed container (same panel language as .tarot-guide-inner
   directly above it) so they read as one component; the art sits on its
   own soft sage "stage" inside that container for real depth, rather
   than floating alone against the page background. --- */
.tarot-bridge { padding: 20px clamp(28px, 5vw, 72px) 46px; background: var(--cream); }
.tarot-bridge-inner {
    max-width: 1040px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    align-items: stretch;
    background: var(--cream2);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow);
    overflow: hidden;
}
.tarot-bridge-copy-wrap { padding: 46px clamp(32px, 4vw, 52px); display: flex; flex-direction: column; justify-content: center; }
.tarot-bridge-kicker { font-family: var(--landing-font-serif); font-size: 11.5px; font-weight: 800; letter-spacing: .2em; color: var(--teal); margin: 0 0 10px; }
.tarot-bridge-title { margin: 0 0 14px; font-family: var(--landing-font-serif); font-size: clamp(28px, 3vw, 38px); font-weight: 700; color: var(--night); line-height: 1.15; }
.tarot-bridge-copy { margin: 0 0 22px; color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 440px; }
/* full-bleed approved Tree-of-Life artwork — fills the entire right side
   of the panel edge-to-edge (replaces the earlier small floating
   card-back placeholder). Clipped to the panel's own rounded corners via
   .tarot-bridge-inner's overflow:hidden, so no radius needed here. */
.tarot-bridge-stage {
    position: relative;
    min-height: 320px;
    border-left: 1px solid var(--line);
    background: var(--night2);
}
.tarot-bridge-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

@media (max-width: 980px) {
    .tarot-hero { padding: 46px 26px 40px; }
    .tarot-readings { padding: 42px 22px 20px; }
    /* single column, not 2 — exactly 3 real reading products over 2
       columns strands a lone card in the last row (the same
       accidental-orphan pattern fixed on the landing gateway cards);
       deliberately stack instead, same as Jewelry's 3-card grid */
    .tarot-readings-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; gap: 28px; }
    .tarot-collection { padding: 20px 22px 20px; }
    .tarot-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; gap: 28px; }
    .tarot-toolbar { margin-bottom: 30px; }
    .tarot-guide { padding: 16px 22px 50px; }
    .tarot-guide-inner { grid-template-columns: 1fr; text-align: center; }
    .tarot-guide-mark { margin: 0 auto; }
    .tarot-guide-desc { margin-left: auto; margin-right: auto; }
    .tarot-guide-form { justify-content: center; }
    .tarot-bridge { padding: 16px 22px 36px; }
    .tarot-bridge-inner { grid-template-columns: 1fr; text-align: center; }
    .tarot-bridge-copy-wrap { padding: 38px 30px; align-items: center; }
    .tarot-bridge-copy { margin-left: auto; margin-right: auto; }
    .tarot-bridge-stage { order: -1; min-height: 260px; border-left: 0; border-bottom: 1px solid var(--line); }
}

@media (max-width: 700px) {
    .tarot-hero { padding: 40px 20px 34px; }
    .tarot-hero-title { font-size: clamp(32px, 8vw, 44px); }
    .tarot-hero-cta { flex-direction: column; align-items: stretch; }
    .tarot-hero-cta .button { width: 100%; }
    .tarot-readings { padding: 34px 16px 16px; }
    .tarot-collection { padding: 20px 16px 16px; }
    .tarot-toolbar-label { width: 100%; }
    .tarot-guide { padding: 10px 16px 44px; }
    .tarot-modal { grid-template-columns: 1fr; max-height: 92vh; }
    .tarot-modal-image { aspect-ratio: 4 / 3; }
    .tarot-guide-form { flex-direction: column; align-items: stretch; }
    .tarot-bridge { padding: 10px 16px 32px; }
    .tarot-bridge-copy-wrap { padding: 30px 22px; }
    .tarot-bridge-stage { min-height: 200px; }
}

/* Astrology Charts has no real destination yet (no catalog data, no
   route) — rather than link it to the wrong place or invent a page,
   the footer shows it as a quiet, non-interactive label until the
   catalog/navigation migration gives it a real home. New, unique
   class; does not touch the shared .footer/.footer a rules used by
   every other page. */
.footer-soon { display: inline-flex; align-items: center; opacity: .85; cursor: not-allowed; }
.footer-soon .soon-badge { color: #CBBBA5; }

/* =========================================================================
   ZIP 13 — CRYSTAL VAULT V9
   Migrates /crystal-vault onto the approved Sage & Stone v9 boutique system.
   Scoped to .crystal-vault-page so approved Landing/Jewelry/Crystals/Tarot
   page bodies remain unchanged.
   ========================================================================= */

.crystal-vault-page {
    background: #f3eee3;
    color: var(--night);
}

.crystal-vault-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(70px, 8vw, 116px) clamp(28px, 8.5vw, 138px) clamp(76px, 8.5vw, 124px);
    background:
      radial-gradient(circle at 82% 22%, rgba(188, 171, 116, .18), transparent 28%),
      linear-gradient(135deg, #f2eadb 0%, #e6e8d4 58%, #d7e2d8 100%);
    border-bottom: 1px solid rgba(107, 111, 83, .30);
}

.crystal-vault-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url('/static/boutique/art/botanical-frame.svg') center/cover no-repeat;
    opacity: .28;
    pointer-events: none;
}

.crystal-vault-hero-inner {
    position: relative;
    z-index: 1;
    width: min(910px, 100%);
}

.crystal-vault-kicker,
.crystal-vault-browser-kicker {
    color: #31564f;
    font-family: Georgia, serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .22em;
}

.crystal-vault-hero h1 {
    max-width: 880px;
    margin: 14px 0 22px;
    color: #163a3c;
    font-family: Georgia, serif;
    font-size: clamp(48px, 6.4vw, 84px);
    font-weight: 400;
    line-height: 1.02;
}

.crystal-vault-rule {
    display: flex;
    align-items: center;
    width: min(390px, 88vw);
    gap: 12px;
    margin: 25px 0 25px;
}

.crystal-vault-rule span {
    flex: 1;
    height: 1px;
    background: #9d8150;
}

.crystal-vault-rule img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    opacity: .9;
}

.crystal-vault-hero p {
    max-width: 760px;
    margin: 0;
    color: #455b55;
    font-size: 18px;
    line-height: 1.75;
}

.crystal-vault-hero .crystal-vault-disclaimer {
    max-width: 690px;
    margin-top: 15px;
    color: #65736c;
    font-size: 14px;
    line-height: 1.65;
}

.crystal-vault-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.crystal-vault-main {
    background: #f3eee3;
}

.crystal-vault-browser {
    width: min(1320px, calc(100% - 64px));
    margin: 0 auto;
    padding: clamp(66px, 7vw, 104px) 0 clamp(78px, 8vw, 122px);
}

.crystal-vault-browser-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 36px;
    align-items: end;
    margin-bottom: 34px;
}

.crystal-vault-browser-head h2 {
    max-width: 760px;
    margin: 9px 0 12px;
    color: #173b3d;
    font-family: Georgia, serif;
    font-size: clamp(38px, 4.4vw, 62px);
    font-weight: 400;
    line-height: 1.08;
}

.crystal-vault-browser-head p {
    max-width: 730px;
    margin: 0;
    color: #57645e;
    font-size: 16px;
    line-height: 1.7;
}

.crystal-vault-count {
    min-width: 150px;
    padding: 11px 16px;
    border: 1px solid rgba(102, 99, 70, .28);
    border-radius: 999px;
    background: rgba(255, 252, 244, .58);
    color: #38584f;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .05em;
    text-align: center;
}

.crystal-vault-page .crystal-vault-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
    gap: 14px;
    margin: 0 0 34px;
    padding: 20px;
    border: 1px solid rgba(67, 91, 80, .22);
    border-radius: 18px;
    background: #dce5d7;
    box-shadow: 0 12px 34px rgba(37, 53, 43, .07);
}

.crystal-vault-page .crystal-vault-toolbar label {
    display: grid;
    gap: 8px;
    color: #31554d;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.crystal-vault-page .crystal-vault-toolbar input,
.crystal-vault-page .crystal-vault-toolbar select {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid rgba(47, 76, 67, .30);
    border-radius: 10px;
    outline: none;
    background: #f8f3e9;
    color: #173b3d;
    font-family: inherit;
    font-size: 15px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}

.crystal-vault-page .crystal-vault-toolbar input:focus,
.crystal-vault-page .crystal-vault-toolbar select:focus {
    border-color: #8b7549;
    box-shadow: 0 0 0 3px rgba(139, 117, 73, .12);
}

.crystal-vault-page .crystal-vault-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.crystal-vault-page .vault-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100%;
    padding: 29px 28px 27px;
    overflow: hidden;
    border: 1px solid rgba(73, 82, 62, .25);
    border-radius: 17px;
    background: linear-gradient(150deg, #fbf6ec 0%, #f0ecdf 100%);
    box-shadow: 0 13px 34px rgba(32, 47, 40, .08);
}

.crystal-vault-page .vault-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(#37635a, #9d8150);
    opacity: .88;
}

.crystal-vault-page .vault-card .meta {
    color: #3b6359;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .15em;
    line-height: 1.45;
}

.crystal-vault-page .vault-card h3 {
    margin: 12px 0 12px;
    color: #173b3d;
    font-family: Georgia, serif;
    font-size: clamp(25px, 2.3vw, 31px);
    font-weight: 400;
    line-height: 1.08;
}

.crystal-vault-page .vault-card .chips {
    margin: 2px 0 17px;
}

.crystal-vault-page .vault-card .chip {
    padding: 6px 9px;
    border: 1px solid rgba(59, 91, 78, .18);
    background: #dfe8d9;
    color: #36564e;
    font-size: 10px;
    font-weight: 700;
}

.crystal-vault-page .vault-card p {
    margin: 0 0 14px;
    color: #53605a;
    font-size: 14px;
    line-height: 1.65;
}

.crystal-vault-page .vault-card p b {
    color: #294f48;
}

.crystal-vault-page .vault-card .prompt {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(112, 101, 71, .25);
    color: #3f5b52;
    font-family: Georgia, serif;
    font-size: 14px;
    font-style: italic;
    line-height: 1.62;
}

.crystal-vault-empty {
    grid-column: 1 / -1;
    padding: 46px 28px;
    border: 1px solid rgba(67, 91, 80, .22);
    border-radius: 16px;
    background: #e2e8d9;
    color: #31554d;
    text-align: center;
}

@media (max-width: 1024px) {
    .crystal-vault-page .crystal-vault-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .crystal-vault-hero {
        padding: 62px 28px 70px;
    }

    .crystal-vault-hero h1 {
        font-size: clamp(43px, 9vw, 66px);
    }

    .crystal-vault-browser {
        width: min(100% - 40px, 1320px);
        padding-top: 62px;
    }

    .crystal-vault-browser-head {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .crystal-vault-count {
        justify-self: start;
    }

    .crystal-vault-page .crystal-vault-toolbar {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .crystal-vault-hero {
        padding: 54px 20px 60px;
    }

    .crystal-vault-hero p {
        font-size: 16px;
    }

    .crystal-vault-hero-actions {
        display: grid;
    }

    .crystal-vault-hero-actions .button {
        width: 100%;
    }

    .crystal-vault-browser {
        width: calc(100% - 32px);
        padding: 54px 0 70px;
    }

    .crystal-vault-page .crystal-vault-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .crystal-vault-page .vault-card {
        padding: 25px 23px 24px;
    }
}

/* ZIP 14 — taxonomy + Vaults navigation + Stone Vault contrast */
.crystal-vault-hero .crystal-vault-kicker,
.crystal-vault-hero h1,
.crystal-vault-hero p { color: #f3ead8; }
.crystal-vault-hero .crystal-vault-disclaimer { color: rgba(243,234,216,.76); }
.crystal-vault-hero .button.alt { background:#e8dfca; color:#173b38; border-color:#c7a95c; }
@media (max-width: 900px){
  .brand-nav { gap: clamp(12px,2vw,28px); }
  .brand-nav .dropdown-content { min-width: 220px; }
}

/* ZIP 15 — Shared Vault Explorer */
.vault-explorer-page{background:#f3ecdd;color:#173b38}
.vault-explorer-hero{background:linear-gradient(120deg,#092c32 0%,#103d40 64%,#1c4a43 100%);color:#f3ead8;border-bottom:2px solid #c7a95c;padding:76px 7vw 82px;position:relative;overflow:hidden}
.vault-explorer-hero:after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-80px;top:-120px;background:rgba(199,169,92,.18);border:1px solid rgba(243,234,216,.18)}
.vault-explorer-hero-inner{max-width:980px;position:relative;z-index:1}.vault-explorer-kicker{font-size:12px;letter-spacing:.2em;font-weight:800;color:#2b6760;text-transform:uppercase}
.vault-explorer-hero .vault-explorer-kicker{color:#d8c17e}.vault-explorer-hero h1{font-family:Georgia,serif;font-size:clamp(44px,6vw,78px);line-height:1.02;margin:16px 0 24px;color:#f4ead5;max-width:900px}.vault-explorer-hero p{font-size:20px;line-height:1.65;max-width:850px;color:rgba(244,234,213,.88)}.vault-explorer-note{font-size:15px!important;color:rgba(244,234,213,.7)!important}.vault-explorer-main{max-width:1280px;margin:auto;padding:72px 5vw 90px}.vault-explorer-intro{text-align:center;max-width:760px;margin:0 auto 38px}.vault-explorer-intro h2,.vault-results-head h2{font-family:Georgia,serif;font-size:clamp(38px,5vw,58px);margin:10px 0;color:#113f3c}.vault-explorer-intro p{font-size:18px;line-height:1.6;color:#59625d}
.vault-path-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:44px}.vault-path-card{appearance:none;text-align:left;border:1px solid #d2c5a8;border-radius:18px;background:#fbf7ed;padding:25px;min-height:188px;display:flex;flex-direction:column;gap:9px;cursor:pointer;color:#162b2e;box-shadow:0 9px 24px rgba(29,48,43,.07);transition:.18s ease}.vault-path-card:hover,.vault-path-card.active{transform:translateY(-2px);border-color:#b9933d;box-shadow:0 13px 30px rgba(29,48,43,.12)}.vault-path-card.active{background:#e4eadf}.vault-path-eyebrow{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#53746c;font-weight:800}.vault-path-card strong{font-family:Georgia,serif;font-size:25px;color:#173e3c}.vault-path-card>span:last-of-type{font-size:14px;line-height:1.45;color:#68726c}.vault-path-card b{margin-top:auto;font-size:13px;color:#84651f}
.vault-discovery-panel{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:end;background:#dfe8dd;border:1px solid #becbb9;border-radius:18px;padding:22px 24px;margin-bottom:18px}.vault-search-field{display:flex;flex-direction:column;gap:8px}.vault-search-field span,.vault-subfilter-label{font-size:10px;letter-spacing:.17em;text-transform:uppercase;font-weight:800;color:#355d55}.vault-search-field input{width:100%;border:1px solid #cfc5ad;background:#fffaf0;border-radius:12px;padding:15px 16px;font-size:16px;color:#173b38}.vault-clear-button{border:1px solid #a98231;background:#f6eddc;border-radius:999px;padding:14px 18px;font-weight:800;color:#173b38;cursor:pointer}.vault-subfilters{margin:0 0 30px}.vault-chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.vault-filter-chip{border:1px solid #c6cdbb;background:#edf1e6;border-radius:999px;padding:9px 13px;font-size:12px;font-weight:700;color:#315a52;cursor:pointer}.vault-filter-chip.active{background:#174941;color:#fff;border-color:#174941}.vault-results-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin:44px 0 24px}.vault-results-head h2{font-size:42px;margin-bottom:0}.vault-result-count{background:#fbf7ed;border:1px solid #d6cdb8;border-radius:999px;padding:10px 16px;font-size:13px;font-weight:800;color:#3f6159}
.vault-compact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.vault-compact-card{background:#faf6ec;border:1px solid #d7cfbd;border-radius:18px;overflow:hidden;display:grid;grid-template-columns:108px 1fr;min-height:190px;box-shadow:0 8px 20px rgba(27,45,40,.06)}.vault-card-media{background:linear-gradient(145deg,#123e42,#244f46);display:flex;align-items:center;justify-content:center;color:#d8bd73;font-size:28px;min-height:100%}.vault-compact-body{padding:20px}.vault-compact-meta{font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:#447068}.vault-compact-body h3{font-family:Georgia,serif;font-size:25px;line-height:1.05;color:#173e3c;margin:9px 0 12px}.vault-compact-chips{display:flex;flex-wrap:wrap;gap:6px}.vault-compact-chips span{background:#e1e9dd;border:1px solid #cbd5c6;border-radius:999px;padding:6px 9px;font-size:10px;font-weight:800;color:#3d6259}.vault-entry-button{border:0;background:none;padding:0;margin-top:18px;color:#89691f;font-size:12px;font-weight:900;cursor:pointer}.vault-empty{grid-column:1/-1;background:#fbf7ed;border:1px dashed #c9b98f;border-radius:16px;padding:38px;text-align:center;color:#58635d}
.vault-dialog[hidden]{display:none}.vault-dialog{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:24px}.vault-dialog-backdrop{position:absolute;inset:0;background:rgba(4,22,24,.72);backdrop-filter:blur(3px)}.vault-dialog-panel{position:relative;z-index:1;width:min(900px,96vw);max-height:88vh;overflow:auto;background:#f9f4e8;border:2px solid #c3a050;border-radius:22px;padding:34px;display:grid;grid-template-columns:260px 1fr;gap:32px;box-shadow:0 30px 90px rgba(0,0,0,.35)}.vault-dialog-close{position:absolute;right:14px;top:10px;border:0;background:transparent;font-size:34px;color:#173b38;cursor:pointer}.vault-detail-media{min-height:360px;border-radius:14px}.vault-detail-copy h2{font-family:Georgia,serif;font-size:44px;color:#143f3c;margin:9px 0 15px}.vault-detail-copy>p{font-size:17px;line-height:1.65;color:#56625c}.vault-detail-callout{border-top:1px solid #d3c7ad;margin-top:22px;padding-top:18px}.vault-detail-callout b{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#35645a}.vault-detail-callout p{font-family:Georgia,serif;font-style:italic;font-size:20px;line-height:1.5;color:#35564e}.vault-image-coming{margin-top:26px;font-size:12px;color:#7b776a;background:#eee7d7;border-radius:10px;padding:12px}.vault-dialog-open{overflow:hidden}
.dropdown-soon,.footer-soon{opacity:1!important;color:#8b7b5b!important}.dropdown-soon .soon-badge,.footer-soon .soon-badge{opacity:1!important;color:#5f654f!important;border-color:#a79b7c!important;background:#efe6d2!important}
@media(max-width:1000px){.vault-path-grid{grid-template-columns:repeat(2,1fr)}.vault-compact-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.vault-explorer-hero{padding:54px 24px 60px}.vault-explorer-main{padding:52px 20px 70px}.vault-path-grid{grid-template-columns:1fr}.vault-path-card{min-height:150px}.vault-discovery-panel{grid-template-columns:1fr}.vault-clear-button{width:100%}.vault-results-head{align-items:flex-start;flex-direction:column}.vault-compact-grid{grid-template-columns:1fr}.vault-dialog-panel{grid-template-columns:1fr;padding:26px}.vault-detail-media{min-height:210px}.vault-detail-copy h2{font-size:36px}}


/* ZIP 16 — VAULT EDITORIAL + DISPLAY */
.vault-explorer-hero{padding:clamp(64px,7vw,96px) clamp(28px,7vw,104px) clamp(66px,7.5vw,102px);background:radial-gradient(circle at 82% 24%,rgba(198,169,91,.17),transparent 27%),radial-gradient(circle at 68% 76%,rgba(96,132,112,.16),transparent 34%),linear-gradient(125deg,#082b31 0%,#0c3b3c 52%,#19483f 100%)}
.vault-explorer-hero:before{content:"";position:absolute;inset:22px 2.5%;border:1px solid rgba(216,193,126,.22);border-radius:28px;pointer-events:none}
.vault-explorer-hero:after{width:min(38vw,520px);height:min(38vw,520px);right:-7vw;top:-14vw;background:transparent;border:1px solid rgba(216,193,126,.24);box-shadow:0 0 0 54px rgba(216,193,126,.035),0 0 0 108px rgba(216,193,126,.025)}
.vault-explorer-hero-inner{max-width:1180px;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr);gap:clamp(34px,6vw,88px);align-items:center}
.vault-hero-copy{min-width:0}.vault-explorer-hero h1{max-width:790px;font-size:clamp(46px,5.7vw,76px);line-height:1.01;margin:14px 0 21px;letter-spacing:-.018em}.vault-explorer-hero p{max-width:760px;font-size:clamp(17px,1.6vw,20px);line-height:1.65;margin:0}
.vault-hero-aside{align-self:stretch;display:flex;align-items:center}.vault-hero-index{width:100%;padding:28px;border:1px solid rgba(220,198,135,.38);border-radius:22px;background:rgba(8,34,35,.34);box-shadow:inset 0 1px rgba(255,255,255,.06),0 18px 50px rgba(0,0,0,.12);backdrop-filter:blur(4px)}
.vault-hero-index-label{display:block;margin-bottom:17px;color:#d8c17e;font-size:10px;letter-spacing:.19em;text-transform:uppercase;font-weight:800}.vault-hero-stat{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:13px;padding:14px 0;border-top:1px solid rgba(244,234,213,.15)}.vault-hero-stat:first-of-type{border-top:0}.vault-hero-stat strong{font:400 clamp(27px,3vw,38px)/1 Georgia,serif;color:#f4ead5}.vault-hero-stat span{color:rgba(244,234,213,.72);font-size:13px;line-height:1.3}.vault-hero-assurance{margin:17px 0 0!important;padding-top:16px;border-top:1px solid rgba(244,234,213,.15);font-size:13px!important;line-height:1.5!important;color:rgba(244,234,213,.72)!important}.vault-explorer-note{margin-top:14px!important;max-width:720px!important}.vault-explorer-hero .button{margin-top:29px;min-width:190px;text-align:center}
.vault-explorer-main{padding-top:clamp(58px,6vw,82px)}.vault-explorer-intro{max-width:850px;margin-bottom:34px}.vault-explorer-intro h2{font-size:clamp(40px,4.6vw,60px);letter-spacing:-.015em}.vault-explorer-intro p{max-width:680px;margin:0 auto;font-size:17px}
.vault-path-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin:0 auto 46px}.vault-path-card{min-height:202px;padding:27px 25px 24px;position:relative;overflow:hidden}.vault-path-card:after{content:"";position:absolute;width:72px;height:72px;border-radius:50%;right:-31px;top:-30px;border:1px solid rgba(185,147,61,.23)}.vault-path-card strong{font-size:clamp(24px,2.1vw,29px);line-height:1.08}.vault-path-card>span:last-of-type{font-size:14px;line-height:1.52}
.vault-discovery-panel{margin-top:8px;padding:24px 26px;box-shadow:0 12px 32px rgba(29,48,43,.06)}.vault-results-head{margin-top:48px}.vault-compact-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}.vault-compact-card{grid-template-columns:104px minmax(0,1fr);min-width:0}.vault-compact-body{min-width:0}.vault-compact-body h3{overflow-wrap:anywhere}.vault-compact-chips span{max-width:100%;overflow-wrap:anywhere}
@media(max-width:1050px){.vault-explorer-hero-inner{grid-template-columns:1fr}.vault-hero-aside{max-width:760px}.vault-hero-index{display:grid;grid-template-columns:repeat(3,1fr);column-gap:22px;align-items:start}.vault-hero-index-label,.vault-hero-assurance{grid-column:1/-1}.vault-hero-stat{display:block}.vault-hero-stat span{display:block;margin-top:6px}}
@media(max-width:760px){.vault-explorer-hero:before{inset:14px;border-radius:20px}.vault-explorer-hero{padding:58px 25px 62px}.vault-explorer-hero h1{font-size:clamp(42px,11vw,62px)}.vault-explorer-hero p{font-size:17px}.vault-hero-index{grid-template-columns:1fr;padding:22px}.vault-hero-index-label,.vault-hero-assurance{grid-column:auto}.vault-hero-stat{display:grid}.vault-path-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.vault-path-card{min-height:165px}.vault-compact-grid{grid-template-columns:1fr}.vault-compact-card{grid-template-columns:94px minmax(0,1fr)}}
@media(max-width:480px){.vault-explorer-hero{padding-left:20px;padding-right:20px}.vault-explorer-hero:before{display:none}.vault-hero-stat strong{font-size:28px}.vault-explorer-main{padding-left:16px;padding-right:16px}.vault-path-grid{grid-template-columns:1fr}.vault-compact-card{grid-template-columns:82px minmax(0,1fr)}.vault-compact-body{padding:18px 16px}.vault-compact-body h3{font-size:23px}}

/* ZIP 16.1 — VAULT VISUAL UNIFICATION: HOME-PAGE DESIGN SYSTEM */
.vault-explorer-page{background:#efe6d2;color:#173b38}
.vault-explorer-hero{min-height:clamp(560px,66vw,760px);padding:clamp(68px,8vw,112px) clamp(28px,7vw,104px);background-color:#062831;background-repeat:no-repeat;background-size:cover;background-position:center;border-bottom:3px solid #b99149;isolation:isolate}
.tarot-explorer-page .vault-explorer-hero{background-image:linear-gradient(90deg,rgba(3,28,36,.98) 0%,rgba(3,28,36,.93) 34%,rgba(3,28,36,.48) 58%,rgba(3,28,36,.08) 100%),url('/static/boutique/vaults/tarot-vault-hero.webp?v=161')}
.stone-explorer-page .vault-explorer-hero{background-image:linear-gradient(90deg,rgba(3,28,36,.98) 0%,rgba(3,28,36,.93) 34%,rgba(3,28,36,.48) 58%,rgba(3,28,36,.08) 100%),url('/static/boutique/vaults/stone-vault-hero.webp?v=161')}
.vault-explorer-hero:before{inset:28px 3%;border-color:rgba(222,198,142,.28);border-radius:26px}.vault-explorer-hero:after{display:none}
.vault-explorer-hero-inner{max-width:1240px;grid-template-columns:minmax(0,1.05fr) minmax(260px,.55fr);gap:clamp(38px,7vw,110px)}
.vault-explorer-hero h1{font-size:clamp(54px,7vw,92px);max-width:650px;color:#f2e5cf;text-shadow:0 3px 24px rgba(0,0,0,.25)}
.vault-hero-lede{font-family:Georgia,serif;font-size:clamp(24px,2.4vw,34px)!important;line-height:1.28!important;color:#e8d8bd!important;max-width:650px!important;margin:0 0 18px!important}
.vault-hero-support{font-size:clamp(16px,1.4vw,19px)!important;line-height:1.65!important;max-width:650px!important;color:rgba(242,229,207,.86)!important}
.vault-explorer-hero .button{background:transparent;border:1px solid #b99149;color:#f2e5cf;border-radius:999px;padding:14px 24px}.vault-explorer-hero .button:hover{background:#f2e5cf;color:#173b38}
.vault-hero-index{background:rgba(29,65,49,.82);border-color:rgba(214,187,128,.44);box-shadow:0 18px 45px rgba(0,0,0,.16)}
.vault-hero-index-label{color:#d8b97b}.vault-hero-stat strong{color:#f1e4cf}.vault-hero-stat span,.vault-hero-assurance{color:rgba(241,228,207,.76)!important}
.vault-explorer-main{max-width:1280px;background:#efe6d2}.vault-explorer-intro h2,.vault-results-head h2{color:#31552e}.vault-explorer-kicker{color:#8b6d43}.vault-explorer-intro p{color:#5e6257}
.vault-path-grid{gap:20px}.vault-path-card{background:#f5eddd;border-color:#c9b992;border-radius:22px;box-shadow:0 12px 28px rgba(45,57,38,.07)}.vault-path-card:nth-child(3n+1){background:#dfe7d5}.vault-path-card:hover,.vault-path-card.active{border-color:#9d8150;background:#cbd9bb}.vault-path-card strong{color:#31552e}.vault-path-eyebrow{color:#7d6a4b}.vault-path-card>span:last-of-type{color:#5f665a}.vault-path-card b{color:#795f36}
.vault-discovery-panel{background:#d9e1d1;border-color:#b8c2ad;box-shadow:none}.vault-search-field span{color:#52694f}.vault-search-field input{background:#f8f0df;border-color:#c9b992}.vault-clear-button{background:#efe6d2;border-color:#9d8150;color:#31552e}
.vault-result-count{background:#f5eddd;border-color:#c9b992;color:#52694f}
.vault-compact-grid{gap:18px}.vault-compact-card{background:#f5eddd;border-color:#d1c3a5;border-radius:20px;box-shadow:0 8px 20px rgba(45,57,38,.055)}.vault-card-media{background:linear-gradient(145deg,#365c37,#244a3c);color:#d7bd7a;position:relative}.vault-card-media:after{content:"";position:absolute;inset:12px;border:1px solid rgba(235,218,184,.22);border-radius:12px}.vault-compact-body h3{color:#31552e}.vault-compact-meta{color:#6b765e}.vault-compact-chips span{background:#dfe7d5;border-color:#c5d0bb;color:#4d6650}.vault-entry-button{color:#7c6034}
.vault-dialog-panel{background:#f5eddd;border-color:#9d8150}.vault-detail-copy h2{color:#31552e}.vault-detail-media{background:linear-gradient(145deg,#365c37,#244a3c)}
@media(max-width:1050px){.vault-explorer-hero{min-height:auto;background-position:62% center}.vault-explorer-hero-inner{grid-template-columns:1fr}.vault-hero-aside{max-width:760px}.tarot-explorer-page .vault-explorer-hero,.stone-explorer-page .vault-explorer-hero{background-image:linear-gradient(90deg,rgba(3,28,36,.97) 0%,rgba(3,28,36,.82) 55%,rgba(3,28,36,.28) 100%),var(--vault-mobile-image)}}
@media(max-width:760px){.tarot-explorer-page .vault-explorer-hero{--vault-mobile-image:url('/static/boutique/vaults/tarot-vault-hero.webp?v=161')}.stone-explorer-page .vault-explorer-hero{--vault-mobile-image:url('/static/boutique/vaults/stone-vault-hero.webp?v=161')}.vault-explorer-hero{background-position:64% center}.vault-explorer-hero:before{inset:14px}.vault-hero-copy{padding-right:4vw}.vault-hero-lede{font-size:25px!important}}
@media(max-width:520px){.vault-explorer-hero{background-position:70% center}.vault-explorer-hero h1{font-size:50px}.vault-hero-support{font-size:16px!important}.vault-card-media:after{inset:8px}}

/* ========================================================================== */
/* ZIP 16.2 — HOME-MATCHED VAULT VISUAL SYSTEM                               */
/* Locks the Vaults to the established Sage & Stone homepage palette and      */
/* guarantees hero artwork at desktop, iPad/tablet, and mobile breakpoints.   */
/* ========================================================================== */

:root{
  --ss-midnight:#07343d;
  --ss-midnight-deep:#062b34;
  --ss-forest:#42612f;
  --ss-forest-deep:#294a31;
  --ss-sage:#b8c99e;
  --ss-sage-soft:#dfe8d5;
  --ss-cream:#f3ead8;
  --ss-beige:#ded0b4;
  --ss-gold:#c49a45;
  --ss-brown:#745b3c;
}

/* Hero: same edge-to-edge illustrated editorial language as the homepage. */
.vault-explorer-page .vault-explorer-hero{
  position:relative;
  isolation:isolate;
  min-height:650px;
  padding:72px clamp(42px,7vw,98px) 70px;
  border:0;
  border-bottom:4px solid var(--ss-gold);
  border-radius:0;
  background-color:var(--ss-midnight);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
  overflow:hidden;
}
.vault-explorer-page .vault-explorer-hero:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border:0;
  border-radius:0;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(5,43,52,.98) 0%,
    rgba(5,43,52,.94) 33%,
    rgba(5,43,52,.70) 48%,
    rgba(5,43,52,.18) 68%,
    rgba(5,43,52,.02) 100%);
}
.tarot-explorer-page .vault-explorer-hero{
  background-image:url('/static/boutique/vaults/tarot-vault-hero.webp?v=164');
}
.stone-explorer-page .vault-explorer-hero{
  background-image:url('/static/boutique/vaults/stone-vault-hero.webp?v=164');
}
.vault-explorer-page .vault-explorer-hero-inner{
  width:min(1240px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(310px,.72fr);
  gap:clamp(34px,5vw,76px);
  align-items:end;
}
.vault-explorer-page .vault-hero-copy{align-self:center;max-width:720px}
.vault-explorer-page .vault-explorer-kicker{color:#d8b97b}
.vault-explorer-page .vault-explorer-hero h1{
  color:var(--ss-cream);
  font-size:clamp(58px,7vw,102px);
  line-height:.94;
  max-width:720px;
  margin:15px 0 22px;
  letter-spacing:-.035em;
}
.vault-explorer-page .vault-hero-lede{
  color:#eadbc2!important;
  font-size:clamp(24px,2.35vw,35px)!important;
  line-height:1.25!important;
  max-width:670px!important;
}
.vault-explorer-page .vault-hero-support{
  color:rgba(243,234,216,.90)!important;
  max-width:660px!important;
}
.vault-explorer-page .vault-explorer-note{color:rgba(243,234,216,.72)!important}
.vault-explorer-page .vault-explorer-hero .button{
  background:transparent;
  color:var(--ss-cream);
  border:1.5px solid var(--ss-gold);
  border-radius:999px;
  box-shadow:none;
}
.vault-explorer-page .vault-explorer-hero .button:hover{background:var(--ss-cream);color:var(--ss-forest-deep)}

/* At-a-glance becomes a homepage-style forest card rather than a dashboard. */
.vault-explorer-page .vault-hero-aside{align-self:end}
.vault-explorer-page .vault-hero-index{
  padding:30px 30px 28px;
  border:1px solid rgba(216,185,123,.55);
  border-radius:28px;
  background:rgba(66,97,47,.93);
  backdrop-filter:none;
  box-shadow:0 20px 55px rgba(2,25,29,.22);
}
.vault-explorer-page .vault-hero-index-label{color:#d8b97b}
.vault-explorer-page .vault-hero-stat{border-top-color:rgba(243,234,216,.22)}
.vault-explorer-page .vault-hero-stat strong{color:var(--ss-cream)}
.vault-explorer-page .vault-hero-stat span,
.vault-explorer-page .vault-hero-assurance{color:rgba(243,234,216,.80)!important}
.vault-explorer-page .vault-hero-assurance{border-top-color:rgba(243,234,216,.22)}

/* Main library: same cream/sage/forest rhythm used on Home. */
.vault-explorer-page .vault-explorer-main{
  background:var(--ss-cream);
  color:var(--ss-forest-deep);
}
.vault-explorer-page .vault-explorer-intro{padding-top:70px}
.vault-explorer-page .vault-explorer-intro .vault-explorer-kicker,
.vault-explorer-page .vault-results-head .vault-explorer-kicker{color:#8a6c46}
.vault-explorer-page .vault-explorer-intro h2,
.vault-explorer-page .vault-results-head h2{color:var(--ss-forest)}
.vault-explorer-page .vault-explorer-intro p{color:#5f6257}

/* Gateway cards intentionally echo the three homepage gateway cards. */
.vault-explorer-page .vault-path-card{
  border:1px solid rgba(116,91,60,.32);
  border-radius:24px;
  background:#f8f1e4;
  box-shadow:0 12px 26px rgba(86,73,48,.08);
}
.vault-explorer-page .vault-path-card:nth-child(3n+1),
.vault-explorer-page .vault-path-card.is-active{
  background:var(--ss-sage);
  border-color:rgba(116,91,60,.52);
}
.vault-explorer-page .vault-path-card:nth-child(4n){background:#e4ecda}
.vault-explorer-page .vault-path-card h3{color:var(--ss-forest)}
.vault-explorer-page .vault-path-card p{color:#606256}
.vault-explorer-page .vault-path-card .vault-path-label{color:#786347}
.vault-explorer-page .vault-path-card .vault-path-action{color:#7f6331}

/* Search reads as an integrated sage editorial panel, not a software form. */
.vault-explorer-page .vault-discovery-panel{
  background:#dce7d5;
  border:1px solid rgba(66,97,47,.20);
  border-radius:24px;
  box-shadow:none;
}
.vault-explorer-page .vault-search-field span{color:var(--ss-forest)}
.vault-explorer-page .vault-search-field input{
  background:#faf4e8;
  border-color:rgba(116,91,60,.34);
  color:var(--ss-forest-deep);
}
.vault-explorer-page .vault-clear-button{
  background:#f5ecda;
  color:var(--ss-forest-deep);
  border-color:#b8924b;
}

/* Browse cards: softer framed media blocks, matching Home's rounded cards. */
.vault-explorer-page .vault-compact-card{
  overflow:hidden;
  border:1px solid rgba(116,91,60,.25);
  border-radius:24px;
  background:#f8f1e4;
  box-shadow:0 10px 24px rgba(72,63,45,.07);
}
.vault-explorer-page .vault-card-media{
  margin:14px 0 14px 14px;
  border-radius:18px;
  background:linear-gradient(145deg,#355f3d,#244d3c);
}
.vault-explorer-page .vault-card-media:after{border-color:rgba(243,234,216,.18)}
.vault-explorer-page .vault-compact-body h3{color:var(--ss-forest)}
.vault-explorer-page .vault-card-meta{color:#5f765d}
.vault-explorer-page .vault-keyword{background:#dfe8d5;color:#49614c;border-color:rgba(66,97,47,.12)}
.vault-explorer-page .vault-card-open{color:#816633}
.vault-explorer-page .vault-result-count{background:#f8f1e4;color:#49614c;border-color:rgba(116,91,60,.22)}

/* iPad/tablet: explicit URLs prevent the 16.1 undefined CSS-variable bug. */
@media(max-width:1050px){
  .vault-explorer-page .vault-explorer-hero{
    min-height:620px;
    padding:60px 54px 58px;
    background-position:62% center;
  }
  .tarot-explorer-page .vault-explorer-hero{
    background-image:url('/static/boutique/vaults/tarot-vault-hero.webp?v=164');
  }
  .stone-explorer-page .vault-explorer-hero{
    background-image:url('/static/boutique/vaults/stone-vault-hero.webp?v=164');
  }
  .vault-explorer-page .vault-explorer-hero:before{
    background:linear-gradient(90deg,rgba(5,43,52,.98) 0%,rgba(5,43,52,.91) 44%,rgba(5,43,52,.50) 67%,rgba(5,43,52,.10) 100%);
  }
  .vault-explorer-page .vault-explorer-hero-inner{grid-template-columns:1fr;gap:38px}
  .vault-explorer-page .vault-hero-copy{max-width:690px}
  .vault-explorer-page .vault-hero-aside{max-width:760px}
  .vault-explorer-page .vault-hero-index{display:grid;grid-template-columns:repeat(3,1fr);gap:0 22px}
  .vault-explorer-page .vault-hero-index-label,
  .vault-explorer-page .vault-hero-assurance{grid-column:1/-1}
}
@media(max-width:760px){
  .vault-explorer-page .vault-explorer-hero{
    padding:52px 26px 48px;
    min-height:660px;
    background-position:68% center;
  }
  .tarot-explorer-page .vault-explorer-hero{background-image:url('/static/boutique/vaults/tarot-vault-hero.webp?v=164')}
  .stone-explorer-page .vault-explorer-hero{background-image:url('/static/boutique/vaults/stone-vault-hero.webp?v=164')}
  .vault-explorer-page .vault-explorer-hero:before{
    background:linear-gradient(180deg,rgba(5,43,52,.92) 0%,rgba(5,43,52,.82) 55%,rgba(5,43,52,.42) 100%);
  }
  .vault-explorer-page .vault-explorer-hero h1{font-size:clamp(52px,14vw,72px)}
  .vault-explorer-page .vault-hero-index{grid-template-columns:1fr;padding:24px}
  .vault-explorer-page .vault-hero-index-label,
  .vault-explorer-page .vault-hero-assurance{grid-column:auto}
  .vault-explorer-page .vault-card-media{margin:10px 0 10px 10px}
}

/* ========================================================================== */
/* ZIP 16.3 — VAULT LAYOUT + HOME FLOW                                         */
/* ========================================================================== */
.vault-explorer-page .vault-explorer-hero{min-height:610px;padding:64px clamp(46px,6vw,88px) 62px;border-bottom:3px solid var(--ss-gold)}
.vault-explorer-page .vault-explorer-hero-inner{width:min(1280px,100%);margin:0 auto;display:block}
.vault-explorer-page .vault-hero-copy{width:min(610px,46vw);max-width:610px;margin:0}
.vault-explorer-page .vault-explorer-hero h1{max-width:600px;margin:14px 0 22px;font-size:clamp(58px,6.2vw,94px);line-height:.96}
.vault-explorer-page .vault-hero-lede{max-width:590px!important;font-size:clamp(22px,2vw,30px)!important;line-height:1.28!important}
.vault-explorer-page .vault-hero-support,.vault-explorer-page .vault-explorer-note{max-width:590px!important}
.vault-explorer-page .vault-hero-copy>.button{display:flex;width:max-content;margin:30px 0 0 auto}
.vault-explorer-page .vault-explorer-hero:before{background:linear-gradient(90deg,rgba(5,43,52,.99) 0%,rgba(5,43,52,.97) 34%,rgba(5,43,52,.88) 47%,rgba(5,43,52,.38) 58%,rgba(5,43,52,.05) 74%,rgba(5,43,52,0) 100%)}
.vault-at-glance-band{background:var(--ss-cream);padding:34px clamp(46px,6vw,88px) 28px}
.vault-at-glance-inner{width:min(1280px,100%);margin:0 auto}
.vault-explorer-page .vault-at-glance-band .vault-hero-aside{width:min(610px,46vw);max-width:610px;margin:0}
.vault-explorer-page .vault-at-glance-band .vault-hero-index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 22px;padding:25px 28px 23px;border:1px solid rgba(116,91,60,.27);border-radius:22px;background:#f7efdf;color:var(--ss-forest-deep);box-shadow:0 10px 24px rgba(72,63,45,.06)}
.vault-explorer-page .vault-at-glance-band .vault-hero-index-label{grid-column:1/-1;color:#8a6c46}
.vault-explorer-page .vault-at-glance-band .vault-hero-stat{border-top-color:rgba(116,91,60,.18)}
.vault-explorer-page .vault-at-glance-band .vault-hero-stat strong{color:var(--ss-forest)}
.vault-explorer-page .vault-at-glance-band .vault-hero-stat span,.vault-explorer-page .vault-at-glance-band .vault-hero-assurance{color:#5d6458!important}
.vault-explorer-page .vault-at-glance-band .vault-hero-assurance{grid-column:1/-1;border-top-color:rgba(116,91,60,.18)}
.vault-explorer-page .vault-explorer-main{max-width:none;margin:0;padding:22px max(5vw,32px) 92px;background:var(--ss-cream)}
.vault-explorer-page .vault-explorer-main>*{width:min(1280px,100%);margin-left:auto;margin-right:auto}
.vault-explorer-page .vault-discovery-panel{margin-top:12px;margin-bottom:52px;padding:20px 22px;border:1px solid rgba(66,97,47,.22);border-radius:22px;background:#dfe8d5}
.vault-explorer-page .vault-explorer-intro{padding-top:0;margin-bottom:34px}
.vault-explorer-page .vault-path-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-bottom:66px}
.vault-explorer-page .vault-path-card,.vault-explorer-page .vault-path-card:nth-child(3n+1),.vault-explorer-page .vault-path-card:nth-child(4n),.vault-explorer-page .vault-path-card.is-active{min-height:220px;padding:28px 30px;border:1px solid rgba(107,78,36,.38);border-radius:26px;background:var(--landing-sage-card);color:var(--landing-dark-text);box-shadow:var(--landing-shadow-gateway)}
.vault-explorer-page .vault-path-card:hover{transform:translateY(-3px);background:var(--landing-sage-card-start);border-color:rgba(107,78,36,.58)}
.vault-explorer-page .vault-path-card.is-active{background:var(--landing-sage-card-start);box-shadow:0 16px 34px rgba(58,74,42,.19)}
.vault-explorer-page .vault-path-card strong,.vault-explorer-page .vault-path-card h3{color:#29452a}
.vault-explorer-page .vault-path-card>span:last-of-type,.vault-explorer-page .vault-path-card p{color:#405344}
.vault-explorer-page .vault-path-eyebrow,.vault-explorer-page .vault-path-card .vault-path-label{color:#755a37}
.vault-explorer-page .vault-path-card b,.vault-explorer-page .vault-path-card .vault-path-action{color:#6b4e24}
.vault-explorer-page .vault-results-head{margin-top:0;padding-top:52px;border-top:1px solid rgba(107,78,36,.20)}
.vault-explorer-page .vault-compact-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.vault-explorer-page .vault-compact-card{grid-template-columns:104px minmax(0,1fr);min-height:190px;border:1px solid rgba(66,97,47,.20);border-radius:24px;background:#e5eadf;box-shadow:0 12px 26px rgba(58,74,42,.09)}
.vault-explorer-page .vault-card-media{width:82px;min-width:82px;height:calc(100% - 28px);min-height:154px;margin:14px 0 14px 14px;border-radius:18px;background:linear-gradient(145deg,var(--landing-green),var(--landing-footer-green))}
.vault-explorer-page .vault-compact-body{padding:24px 22px 22px 16px}
.vault-explorer-page .vault-keyword{background:#f3ead8;color:#49614c;border-color:rgba(66,97,47,.14)}
.vault-explorer-page .vault-result-count{background:#e5eadf;border-color:rgba(66,97,47,.18)}
@media(max-width:1180px){.vault-explorer-page .vault-hero-copy,.vault-explorer-page .vault-at-glance-band .vault-hero-aside{width:min(570px,49vw);max-width:570px}.vault-explorer-page .vault-explorer-hero h1{font-size:clamp(56px,6.5vw,84px)}.vault-explorer-page .vault-explorer-hero:before{background:linear-gradient(90deg,rgba(5,43,52,.99) 0%,rgba(5,43,52,.96) 39%,rgba(5,43,52,.78) 51%,rgba(5,43,52,.20) 66%,rgba(5,43,52,0) 100%)}}
@media(max-width:1050px){.vault-explorer-page .vault-explorer-hero{min-height:590px;padding:56px 48px 54px;background-position:67% center}.tarot-explorer-page .vault-explorer-hero{background-image:url('/static/boutique/vaults/tarot-vault-hero.webp?v=164')}.stone-explorer-page .vault-explorer-hero{background-image:url('/static/boutique/vaults/stone-vault-hero.webp?v=164')}.vault-explorer-page .vault-hero-copy{width:min(555px,54vw);max-width:555px}.vault-explorer-page .vault-explorer-hero:before{background:linear-gradient(90deg,rgba(5,43,52,.99) 0%,rgba(5,43,52,.97) 43%,rgba(5,43,52,.80) 55%,rgba(5,43,52,.17) 72%,rgba(5,43,52,0) 100%)}.vault-at-glance-band{padding:30px 48px 26px}.vault-explorer-page .vault-at-glance-band .vault-hero-aside{width:min(555px,54vw);max-width:555px}.vault-explorer-page .vault-path-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.vault-explorer-page .vault-compact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.vault-explorer-page .vault-explorer-hero{min-height:680px;padding:50px 24px 46px;background-position:72% center}.tarot-explorer-page .vault-explorer-hero{background-image:url('/static/boutique/vaults/tarot-vault-hero.webp?v=164')}.stone-explorer-page .vault-explorer-hero{background-image:url('/static/boutique/vaults/stone-vault-hero.webp?v=164')}.vault-explorer-page .vault-explorer-hero:before{background:linear-gradient(180deg,rgba(5,43,52,.98) 0%,rgba(5,43,52,.92) 52%,rgba(5,43,52,.50) 76%,rgba(5,43,52,.12) 100%)}.vault-explorer-page .vault-hero-copy{width:100%;max-width:620px}.vault-explorer-page .vault-hero-copy>.button{margin-left:0}.vault-at-glance-band{padding:26px 20px 22px}.vault-explorer-page .vault-at-glance-band .vault-hero-aside{width:100%;max-width:none}.vault-explorer-page .vault-at-glance-band .vault-hero-index{grid-template-columns:1fr;padding:23px}.vault-explorer-page .vault-at-glance-band .vault-hero-index-label,.vault-explorer-page .vault-at-glance-band .vault-hero-assurance{grid-column:auto}.vault-explorer-page .vault-explorer-main{padding:20px 20px 72px}.vault-explorer-page .vault-discovery-panel{grid-template-columns:1fr;margin-bottom:42px}.vault-explorer-page .vault-path-grid{grid-template-columns:1fr;gap:16px}.vault-explorer-page .vault-path-card,.vault-explorer-page .vault-path-card:nth-child(3n+1),.vault-explorer-page .vault-path-card:nth-child(4n){min-height:175px}.vault-explorer-page .vault-compact-grid{grid-template-columns:1fr}}

/* ========================================================================== */
/* ZIP 16.4 — VAULT FINAL LAYOUT POLISH                                       */
/* ========================================================================== */
/* Shorter illustrated hero: preserve artwork without a long visual tail. */
.vault-explorer-page .vault-explorer-hero{min-height:500px;padding-top:54px;padding-bottom:44px}
.vault-explorer-page .vault-hero-copy>.button{margin-top:24px}
/* Stronger editorial bands against the cream page. */
.vault-at-glance-band{padding-top:26px;padding-bottom:24px}
.vault-explorer-page .vault-at-glance-band .vault-hero-index{background:#3f6638;border-color:#8d7a4b;color:#f5ecd9;box-shadow:0 12px 26px rgba(47,69,39,.13)}
.vault-explorer-page .vault-at-glance-band .vault-hero-index-label{color:#d8bc76}
.vault-explorer-page .vault-at-glance-band .vault-hero-stat{border-top-color:rgba(245,236,217,.20)}
.vault-explorer-page .vault-at-glance-band .vault-hero-stat strong{color:#fff5df}
.vault-explorer-page .vault-at-glance-band .vault-hero-stat span,.vault-explorer-page .vault-at-glance-band .vault-hero-assurance{color:#e7e2d2!important}
.vault-explorer-page .vault-at-glance-band .vault-hero-assurance{border-top-color:rgba(245,236,217,.20)}
.vault-explorer-page .vault-discovery-panel{background:#b9cba5;border-color:#8ea277;padding:22px 24px;margin-bottom:46px}
.vault-explorer-page .vault-search-field span{color:#29452a}
.vault-explorer-page .vault-search-field input{background:#fbf4e7;border-color:#a99065}
.vault-explorer-page .vault-clear-button{background:#31552e;color:#fff5df;border-color:#31552e}
/* Category gateways: less empty space and a true contrasting action. */
.vault-explorer-page .vault-path-card,.vault-explorer-page .vault-path-card:nth-child(3n+1),.vault-explorer-page .vault-path-card:nth-child(4n),.vault-explorer-page .vault-path-card.is-active{min-height:178px;padding:24px 26px 22px}
.vault-explorer-page .vault-path-card b,.vault-explorer-page .vault-path-card .vault-path-action{align-self:flex-end;margin-top:auto;background:#31552e;color:#fff5df!important;border:1px solid #31552e;border-radius:999px;padding:9px 14px;line-height:1;font-size:12px;letter-spacing:.01em}
.vault-explorer-page .vault-path-card:hover b,.vault-explorer-page .vault-path-card.active b{background:#6f542d;border-color:#6f542d}
/* Result cards: compact editorial proportions; text owns the card. */
.vault-explorer-page .vault-compact-grid{gap:18px}
.vault-explorer-page .vault-compact-card{grid-template-columns:72px minmax(0,1fr);min-height:150px;border-radius:21px;background:#dfe8d5}
.vault-explorer-page .vault-card-media{width:54px;min-width:54px;height:calc(100% - 24px);min-height:122px;margin:12px 0 12px 12px;border-radius:15px}
.vault-explorer-page .vault-compact-body{display:flex;flex-direction:column;min-width:0;padding:18px 18px 16px 14px}
.vault-explorer-page .vault-compact-body h3{font-size:clamp(21px,1.75vw,26px);line-height:1.08;margin:7px 0 9px;overflow-wrap:normal!important;word-break:normal!important;hyphens:none}
.vault-explorer-page .vault-compact-chips{gap:5px}
.vault-explorer-page .vault-compact-chips span{padding:5px 8px;font-size:9px;white-space:normal;overflow-wrap:normal!important;word-break:normal!important}
.vault-explorer-page .vault-entry-button{align-self:flex-end;margin:12px 0 0 auto;background:#31552e;color:#fff5df;border:1px solid #31552e;border-radius:999px;padding:8px 12px;font-size:11px;line-height:1.1}
.vault-explorer-page .vault-entry-button:hover{background:#6f542d;border-color:#6f542d}
/* Tarot all-view group dividers stop the 78-card wall from reading as one dump. */
.vault-explorer-page .vault-group-heading{grid-column:1/-1;display:flex;align-items:center;gap:16px;margin:18px 0 0;color:#31552e;font-family:Georgia,serif;font-size:clamp(25px,2.3vw,34px)}
.vault-explorer-page .vault-group-heading:after{content:"";height:1px;flex:1;background:rgba(107,78,36,.24)}
.vault-explorer-page .vault-group-heading:first-child{margin-top:0}
.vault-explorer-page .vault-results-head{padding-top:42px}
.vault-explorer-page .vault-explorer-main{padding-bottom:64px}
@media(max-width:1050px){.vault-explorer-page .vault-explorer-hero{min-height:475px;padding-top:46px;padding-bottom:40px}.vault-explorer-page .vault-compact-card{grid-template-columns:68px minmax(0,1fr)}.vault-explorer-page .vault-card-media{width:50px;min-width:50px}.vault-explorer-page .vault-path-card,.vault-explorer-page .vault-path-card:nth-child(3n+1),.vault-explorer-page .vault-path-card:nth-child(4n){min-height:165px}}
@media(max-width:760px){.vault-explorer-page .vault-explorer-hero{min-height:590px;padding-bottom:36px}.vault-explorer-page .vault-hero-copy>.button{margin-left:0}.vault-explorer-page .vault-at-glance-band .vault-hero-index{background:#3f6638}.vault-explorer-page .vault-compact-card{grid-template-columns:62px minmax(0,1fr)}.vault-explorer-page .vault-card-media{width:46px;min-width:46px;min-height:112px}.vault-explorer-page .vault-path-card,.vault-explorer-page .vault-path-card:nth-child(3n+1),.vault-explorer-page .vault-path-card:nth-child(4n){min-height:155px}}


/* ========================================================================= */
/* ZIP 16.5 — VAULT PALETTE + VISUAL HIERARCHY                              */
/* Home-page palette extension: sage + botanical + restrained teal/blue.     */
/* Darkest forest remains reserved for the shared footer.                     */
/* ========================================================================= */

.vault-explorer-page{
  --vault-cream:#f3ead8;
  --vault-cream-soft:#f7f0e2;
  --vault-sage:#a9bd8f;
  --vault-sage-soft:#c6d5b5;
  --vault-pale-green:#dce7d2;
  --vault-botanical:#66815b;
  --vault-olive:#71855e;
  --vault-teal:#4f7f7a;
  --vault-teal-soft:#b8d2cc;
  --vault-blue-soft:#c9d9da;
  --vault-blue-deep:#5d7f86;
  --vault-ink:#28452f;
  --vault-muted:#59665c;
  --vault-accent:#8a6b42;
}

/* Center the breakdown panel and soften it away from footer-green. */
.vault-explorer-page .vault-at-glance-band{
  background:var(--vault-cream);
  padding-top:28px;
  padding-bottom:30px;
}
.vault-explorer-page .vault-at-glance-inner{
  display:flex;
  justify-content:center;
}
.vault-explorer-page .vault-at-glance-band .vault-hero-aside{
  width:min(820px,78vw)!important;
  max-width:820px!important;
  margin:0 auto!important;
}
.vault-explorer-page .vault-at-glance-band .vault-hero-index{
  background:linear-gradient(135deg,var(--vault-botanical),var(--vault-teal));
  border-color:rgba(138,107,66,.40);
  color:#f8efdf;
  box-shadow:0 14px 30px rgba(75,103,91,.12);
}
.vault-explorer-page .vault-at-glance-band .vault-hero-index-label{color:#ead3a3}
.vault-explorer-page .vault-at-glance-band .vault-hero-stat{border-top-color:rgba(248,239,223,.22)}
.vault-explorer-page .vault-at-glance-band .vault-hero-stat strong{color:#fff7e8}
.vault-explorer-page .vault-at-glance-band .vault-hero-stat span,
.vault-explorer-page .vault-at-glance-band .vault-hero-assurance{color:#edf1e7!important}
.vault-explorer-page .vault-at-glance-band .vault-hero-assurance{border-top-color:rgba(248,239,223,.22)}

/* Search becomes a deliberate pale teal feature instead of a washed-out box. */
.vault-explorer-page .vault-discovery-panel{
  background:linear-gradient(135deg,var(--vault-teal-soft),var(--vault-blue-soft));
  border-color:rgba(79,127,122,.32);
  box-shadow:0 10px 24px rgba(79,127,122,.08);
}
.vault-explorer-page .vault-search-field span{color:#315a54}
.vault-explorer-page .vault-search-field input{
  background:#fbf5e9;
  border-color:rgba(93,127,134,.45);
  color:var(--vault-ink);
}
.vault-explorer-page .vault-clear-button{
  background:var(--vault-blue-deep);
  border-color:var(--vault-blue-deep);
  color:#fff7e8;
}
.vault-explorer-page .vault-clear-button:hover{background:var(--vault-teal);border-color:var(--vault-teal)}

/* Category cards: multiple home-compatible shades, no footer-green blocks. */
.vault-explorer-page .vault-path-card,
.vault-explorer-page .vault-path-card:nth-child(3n+1),
.vault-explorer-page .vault-path-card:nth-child(4n),
.vault-explorer-page .vault-path-card.is-active{
  background:var(--vault-sage);
  border-color:rgba(107,78,36,.30);
}
.vault-explorer-page .vault-path-card:nth-child(3n+2){background:var(--vault-sage-soft)}
.vault-explorer-page .vault-path-card:nth-child(3n){background:var(--vault-teal-soft)}
.vault-explorer-page .vault-path-card:hover{background:#b7c99e;border-color:rgba(107,78,36,.48)}
.vault-explorer-page .vault-path-card.is-active{background:#9fb88c}
.vault-explorer-page .vault-path-card strong,
.vault-explorer-page .vault-path-card h3{color:var(--vault-ink)}
.vault-explorer-page .vault-path-card>span:last-of-type,
.vault-explorer-page .vault-path-card p{color:#43584c}
.vault-explorer-page .vault-path-card b,
.vault-explorer-page .vault-path-card .vault-path-action{
  background:var(--vault-blue-deep)!important;
  border-color:var(--vault-blue-deep)!important;
  color:#fff7e8!important;
}
.vault-explorer-page .vault-path-card:hover b,
.vault-explorer-page .vault-path-card.active b{
  background:var(--vault-teal)!important;
  border-color:var(--vault-teal)!important;
}

/* Browse canvas/card depth: cream page, visibly separate pale green/blue cards. */
.vault-explorer-page .vault-explorer-main{background:var(--vault-cream)}
.vault-explorer-page .vault-compact-card{
  background:var(--vault-pale-green);
  border-color:rgba(83,111,91,.20);
  box-shadow:0 8px 18px rgba(58,82,68,.055);
}
.vault-explorer-page .vault-compact-card:nth-of-type(even){background:#d5e3da}
.vault-explorer-page .vault-compact-card:nth-of-type(4n+2){background:#d7e3e3}

/* Temporary media area: medium botanical/teal, not the footer's darkest green. */
.vault-explorer-page .vault-card-media{
  background:linear-gradient(155deg,var(--vault-botanical),var(--vault-teal));
  color:#ead3a3;
}
.vault-explorer-page .vault-card-media:after{border-color:rgba(248,239,223,.25)}

/* Keyword chips: pale teal/sage fill for better hierarchy and scanability. */
.vault-explorer-page .vault-compact-chips span{
  background:#cfe0d7;
  border:1px solid rgba(79,127,122,.26);
  color:#3d635b;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.vault-explorer-page .vault-compact-card:nth-of-type(3n) .vault-compact-chips span{
  background:#d3e3e4;
  border-color:rgba(93,127,134,.24);
  color:#46656b;
}

/* Actions use medium blue-teal for contrast; deepest forest remains footer only. */
.vault-explorer-page .vault-entry-button,
.vault-explorer-page .vault-card-open{
  background:var(--vault-blue-deep)!important;
  border-color:var(--vault-blue-deep)!important;
  color:#fff7e8!important;
}
.vault-explorer-page .vault-entry-button:hover,
.vault-explorer-page .vault-card-open:hover{background:var(--vault-teal)!important;border-color:var(--vault-teal)!important}

.vault-explorer-page .vault-result-count{
  background:#d8e4df;
  border-color:rgba(79,127,122,.22);
  color:#426159;
}
.vault-explorer-page .vault-group-heading{color:#496945}
.vault-explorer-page .vault-group-heading:after{background:rgba(93,127,134,.24)}

/* Keep bottom rhythm tight so the footer follows the final card cleanly. */
.vault-explorer-page .vault-compact-grid{margin-bottom:22px}
.vault-explorer-page .vault-results{padding-bottom:18px}

@media(max-width:1050px){
  .vault-explorer-page .vault-at-glance-band .vault-hero-aside{width:min(760px,88vw)!important;max-width:760px!important}
}
@media(max-width:760px){
  .vault-explorer-page .vault-at-glance-band .vault-hero-aside{width:100%!important;max-width:none!important}
  .vault-explorer-page .vault-path-card:nth-child(n){background:var(--vault-sage-soft)}
  .vault-explorer-page .vault-path-card:nth-child(3n){background:var(--vault-teal-soft)}
}

/* ========================================================================= */
/* ZIP 16.5 OLIVE REVISION — PALETTE UNIFICATION                            */
/* Replaces the cool blue/teal experiment with warm olive + sage hierarchy. */
/* Darkest forest remains reserved for the shared footer only.               */
/* ========================================================================= */

.vault-explorer-page{
  --vault-cream:#f3ead8;
  --vault-cream-soft:#f8f1e4;
  --vault-olive-pale:#dfe7c9;
  --vault-olive-soft:#cbd8a6;
  --vault-olive-light:#b7c98e;
  --vault-olive:#9caf72;
  --vault-olive-mid:#7f9660;
  --vault-moss:#657a4d;
  --vault-botanical:#587047;
  --vault-ink:#304728;
  --vault-muted:#5d6655;
  --vault-accent:#8a6b42;
  --vault-chip:#e9efd7;
}

/* Centered summary panel: solid warm olive, no gradient or blue cast. */
.vault-explorer-page .vault-at-glance-band{background:var(--vault-cream)}
.vault-explorer-page .vault-at-glance-inner{display:flex;justify-content:center}
.vault-explorer-page .vault-at-glance-band .vault-hero-aside{
  width:min(820px,78vw)!important;
  max-width:820px!important;
  margin:0 auto!important;
}
.vault-explorer-page .vault-at-glance-band .vault-hero-index{
  background:var(--vault-olive-mid)!important;
  border-color:rgba(107,78,36,.30)!important;
  color:#fff7e8!important;
  box-shadow:0 14px 30px rgba(76,91,55,.10)!important;
}
.vault-explorer-page .vault-at-glance-band .vault-hero-index-label{color:#f0d9a8!important}
.vault-explorer-page .vault-at-glance-band .vault-hero-stat{border-top-color:rgba(255,247,232,.24)!important}
.vault-explorer-page .vault-at-glance-band .vault-hero-stat strong{color:#fff8e9!important}
.vault-explorer-page .vault-at-glance-band .vault-hero-stat span,
.vault-explorer-page .vault-at-glance-band .vault-hero-assurance{color:#f3f0df!important}
.vault-explorer-page .vault-at-glance-band .vault-hero-assurance{border-top-color:rgba(255,247,232,.24)!important}

/* Search: pale olive, warm and distinct without introducing another hue family. */
.vault-explorer-page .vault-discovery-panel{
  background:var(--vault-olive-pale)!important;
  border-color:rgba(101,122,77,.28)!important;
  box-shadow:0 10px 24px rgba(76,91,55,.06)!important;
}
.vault-explorer-page .vault-search-field span{color:var(--vault-ink)!important}
.vault-explorer-page .vault-search-field input{
  background:#fbf6ea!important;
  border-color:rgba(127,150,96,.42)!important;
  color:var(--vault-ink)!important;
}
.vault-explorer-page .vault-clear-button{
  background:var(--vault-moss)!important;
  border-color:var(--vault-moss)!important;
  color:#fff7e8!important;
}
.vault-explorer-page .vault-clear-button:hover{background:var(--vault-botanical)!important;border-color:var(--vault-botanical)!important}

/* Category cards: one unified color within the section. */
.vault-explorer-page .vault-path-card,
.vault-explorer-page .vault-path-card:nth-child(n),
.vault-explorer-page .vault-path-card:nth-child(3n+1),
.vault-explorer-page .vault-path-card:nth-child(3n+2),
.vault-explorer-page .vault-path-card:nth-child(3n),
.vault-explorer-page .vault-path-card:nth-child(4n),
.vault-explorer-page .vault-path-card.is-active{
  background:var(--vault-olive-light)!important;
  border-color:rgba(107,78,36,.28)!important;
  color:var(--vault-ink)!important;
}
.vault-explorer-page .vault-path-card:hover,
.vault-explorer-page .vault-path-card.is-active{
  background:var(--vault-olive-soft)!important;
  border-color:rgba(107,78,36,.45)!important;
}
.vault-explorer-page .vault-path-card strong,
.vault-explorer-page .vault-path-card h3{color:var(--vault-ink)!important}
.vault-explorer-page .vault-path-card>span:last-of-type,
.vault-explorer-page .vault-path-card p{color:#48583f!important}
.vault-explorer-page .vault-path-card b,
.vault-explorer-page .vault-path-card .vault-path-action{
  background:var(--vault-moss)!important;
  border-color:var(--vault-moss)!important;
  color:#fff7e8!important;
}
.vault-explorer-page .vault-path-card:hover b,
.vault-explorer-page .vault-path-card.active b{background:var(--vault-botanical)!important;border-color:var(--vault-botanical)!important}

/* All result cards in a section are uniform. No alternating blue/green cards. */
.vault-explorer-page .vault-compact-card,
.vault-explorer-page .vault-compact-card:nth-of-type(even),
.vault-explorer-page .vault-compact-card:nth-of-type(4n+2),
.vault-explorer-page .vault-compact-card:nth-child(n){
  background:var(--vault-olive-pale)!important;
  border-color:rgba(91,112,71,.22)!important;
  box-shadow:0 8px 18px rgba(70,85,54,.05)!important;
}

/* Temporary image rail: medium olive/botanical rather than blue-green. */
.vault-explorer-page .vault-card-media{
  background:linear-gradient(155deg,var(--vault-olive-mid),var(--vault-botanical))!important;
  color:#efd69f!important;
}
.vault-explorer-page .vault-card-media:after{border-color:rgba(255,247,232,.25)!important}

/* Keyword chips: pale green fill makes meanings pop without competing with CTAs. */
.vault-explorer-page .vault-compact-chips span,
.vault-explorer-page .vault-compact-card:nth-of-type(3n) .vault-compact-chips span{
  background:var(--vault-chip)!important;
  border:1px solid rgba(101,122,77,.28)!important;
  color:#46603b!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)!important;
}

/* Buttons/actions: strong olive contrast, no blue. */
.vault-explorer-page .vault-entry-button,
.vault-explorer-page .vault-card-open{
  background:var(--vault-moss)!important;
  border-color:var(--vault-moss)!important;
  color:#fff7e8!important;
}
.vault-explorer-page .vault-entry-button:hover,
.vault-explorer-page .vault-card-open:hover{background:var(--vault-botanical)!important;border-color:var(--vault-botanical)!important}

.vault-explorer-page .vault-result-count{
  background:var(--vault-olive-soft)!important;
  border-color:rgba(101,122,77,.24)!important;
  color:#425736!important;
}
.vault-explorer-page .vault-group-heading{color:#526941!important}
.vault-explorer-page .vault-group-heading:after{background:rgba(101,122,77,.24)!important}

@media(max-width:760px){
  .vault-explorer-page .vault-path-card:nth-child(n){background:var(--vault-olive-light)!important}
  .vault-explorer-page .vault-compact-card:nth-child(n){background:var(--vault-olive-pale)!important}
}

/* ========================================================================= */
/* ZIP 16.6 — VAULT CONTRAST + HIERARCHY LOCK                                */
/* Final palette refinement before dedicated Tarot / Stone imagery phase.    */
/* ========================================================================= */

.vault-explorer-page{
  --vault-feature-sage:#687b61;
  --vault-search-sage:#d2ddbd;
  --vault-search-border:#a7b88d;
  --vault-chip-fill:#eef1df;
  --vault-chip-border:#b9c69f;
  --vault-meta:#536249;
}

/* A few shades darker and less yellow than 16.5; still softer than footer. */
.vault-explorer-page .vault-at-glance-band .vault-hero-index{
  background:var(--vault-feature-sage)!important;
  border-color:rgba(89,103,76,.44)!important;
  box-shadow:0 14px 30px rgba(62,77,52,.12)!important;
}
.vault-explorer-page .vault-at-glance-band .vault-hero-index-label{
  color:#efd6a4!important;
  font-weight:800;
}
.vault-explorer-page .vault-at-glance-band .vault-hero-stat strong{color:#fff8e9!important}
.vault-explorer-page .vault-at-glance-band .vault-hero-stat span,
.vault-explorer-page .vault-at-glance-band .vault-hero-assurance{color:#f4f0df!important}

/* Search must read as a tool, not dissolve into the cream canvas. */
.vault-explorer-page .vault-discovery-panel{
  background:var(--vault-search-sage)!important;
  border:1px solid var(--vault-search-border)!important;
  box-shadow:0 10px 24px rgba(72,88,57,.075)!important;
  margin-top:4px!important;
  margin-bottom:34px!important;
}
.vault-explorer-page .vault-search-field span,
.vault-explorer-page .vault-subfilter-label{
  color:#334c2d!important;
  font-size:11px!important;
  letter-spacing:.18em!important;
  font-weight:900!important;
}
.vault-explorer-page .vault-search-field input{
  background:#fbf6ea!important;
  border:1px solid #9daa84!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.58)!important;
}
.vault-explorer-page .vault-clear-button{
  background:#60774c!important;
  border-color:#60774c!important;
}
.vault-explorer-page .vault-clear-button:hover{
  background:#536a43!important;
  border-color:#536a43!important;
}

/* Pull the Find -> Explore progression together. */
.vault-explorer-page .vault-explorer-intro{margin-top:0!important;margin-bottom:28px!important}
.vault-explorer-page .vault-path-grid{margin-top:0!important}

/* Metadata and keyword pills get deliberate contrast without adding new hues. */
.vault-explorer-page .vault-compact-meta{
  color:var(--vault-meta)!important;
  font-weight:900!important;
}
.vault-explorer-page .vault-compact-chips span,
.vault-explorer-page .vault-compact-card:nth-of-type(3n) .vault-compact-chips span{
  background:var(--vault-chip-fill)!important;
  border:1px solid var(--vault-chip-border)!important;
  color:#405936!important;
  box-shadow:0 1px 0 rgba(255,255,255,.35)!important;
}

/* Keep same-section cards uniform. */
.vault-explorer-page .vault-path-card:nth-child(n){background:var(--vault-olive-light)!important}
.vault-explorer-page .vault-compact-card:nth-child(n){background:var(--vault-olive-pale)!important}

@media(max-width:760px){
  .vault-explorer-page .vault-discovery-panel{margin-bottom:30px!important}
}


/* ZIP 17 — Vault imagery foundation */
.vault-explorer-page .vault-entry-art{overflow:hidden;background:#dfe7d2!important}
.vault-explorer-page .vault-entry-art:after{display:none!important}
.vault-explorer-page .vault-entry-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.vault-explorer-page .vault-detail-media.vault-entry-art{min-height:420px;background:#e6eadc!important}
.vault-explorer-page .vault-detail-media.vault-entry-art img{width:100%;height:100%;min-height:420px;object-fit:cover}
@media(max-width:760px){.vault-explorer-page .vault-detail-media.vault-entry-art,.vault-explorer-page .vault-detail-media.vault-entry-art img{min-height:300px}}

/* ZIP18 TAROT THUMBNAIL LAYOUT FIX */
.tarot-explorer-page .vault-compact-card{
  display:grid;
  grid-template-columns:118px minmax(0,1fr);
  align-items:stretch;
  min-height:226px;
  overflow:hidden;
}
.tarot-explorer-page .vault-compact-card .vault-card-media{
  width:102px;
  height:166px;
  margin:18px 0 18px 16px;
  align-self:center;
  justify-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:9px;
  background:transparent;
  box-shadow:0 7px 18px rgba(40,49,31,.15);
}
.tarot-explorer-page .vault-compact-card .vault-card-media img{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center center;
  border-radius:9px;
}
.tarot-explorer-page .vault-compact-card .vault-compact-body{
  min-width:0;
  padding:20px 18px 18px 10px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.tarot-explorer-page .vault-compact-card .vault-entry-button{
  margin-top:auto;
  align-self:flex-end;
}
@media(max-width:760px){
  .tarot-explorer-page .vault-compact-card{
    grid-template-columns:108px minmax(0,1fr);
    min-height:214px;
  }
  .tarot-explorer-page .vault-compact-card .vault-card-media{
    width:92px;
    height:150px;
    margin:16px 0 16px 14px;
  }
  .tarot-explorer-page .vault-compact-card .vault-compact-body{
    padding:18px 14px 16px 8px;
  }
}
@media(max-width:430px){
  .tarot-explorer-page .vault-compact-card{
    grid-template-columns:96px minmax(0,1fr);
  }
  .tarot-explorer-page .vault-compact-card .vault-card-media{
    width:82px;
    height:134px;
    margin-left:12px;
  }
}

/* ZIP19 TAROT VISUAL REFINEMENT */
.tarot-explorer-page .vault-compact-card{
  grid-template-columns:154px minmax(0,1fr);
  min-height:0;
  height:auto;
  align-items:center;
  column-gap:12px;
}
.tarot-explorer-page .vault-compact-card .vault-card-media{
  width:132px;
  height:214px;
  margin:16px 0 16px 16px;
  align-self:center;
  justify-self:center;
  border-radius:10px;
  box-shadow:0 8px 20px rgba(36,45,29,.18);
}
.tarot-explorer-page .vault-compact-card .vault-card-media img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
  filter:none;
}
.tarot-explorer-page .vault-compact-card .vault-compact-body{
  padding:17px 18px 17px 4px;
  justify-content:center;
  gap:8px;
}
.tarot-explorer-page .vault-compact-card .vault-compact-meta,
.tarot-explorer-page .vault-compact-card h3,
.tarot-explorer-page .vault-compact-card .vault-compact-chips{
  margin-top:0;
  margin-bottom:0;
}
.tarot-explorer-page .vault-compact-card .vault-entry-button{
  margin-top:8px;
  align-self:flex-end;
}
@media(max-width:760px){
  .tarot-explorer-page .vault-compact-card{
    grid-template-columns:142px minmax(0,1fr);
    min-height:0;
  }
  .tarot-explorer-page .vault-compact-card .vault-card-media{
    width:122px;
    height:198px;
    margin:14px 0 14px 14px;
  }
  .tarot-explorer-page .vault-compact-card .vault-compact-body{
    padding:15px 14px 15px 2px;
  }
}
@media(max-width:430px){
  .tarot-explorer-page .vault-compact-card{
    grid-template-columns:124px minmax(0,1fr);
  }
  .tarot-explorer-page .vault-compact-card .vault-card-media{
    width:106px;
    height:172px;
    margin:12px 0 12px 12px;
  }
}

/* ZIP20 TAROT PROPORTION REFINEMENT */
.tarot-explorer-page .vault-compact-card{
  grid-template-columns:166px minmax(0,1fr);
  column-gap:12px;
}
.tarot-explorer-page .vault-compact-card .vault-card-media{
  width:144px;
  height:198px;
  margin:14px 0 14px 16px;
}
.tarot-explorer-page .vault-compact-card .vault-card-media img{
  width:100%;
  height:100%;
  object-fit:fill;
  object-position:center center;
}
.tarot-explorer-page .vault-compact-card .vault-compact-body{
  padding:15px 18px 15px 4px;
}
@media(max-width:760px){
  .tarot-explorer-page .vault-compact-card{grid-template-columns:154px minmax(0,1fr);}
  .tarot-explorer-page .vault-compact-card .vault-card-media{width:134px;height:184px;margin:13px 0 13px 14px;}
  .tarot-explorer-page .vault-compact-card .vault-compact-body{padding:14px 14px 14px 2px;}
}
@media(max-width:430px){
  .tarot-explorer-page .vault-compact-card{grid-template-columns:136px minmax(0,1fr);}
  .tarot-explorer-page .vault-compact-card .vault-card-media{width:118px;height:162px;margin:11px 0 11px 12px;}
}

/* ZIP21 TAROT FINAL VISUAL NORMALIZATION */
.tarot-explorer-page .vault-compact-grid{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:100%;overflow:visible;}
.tarot-explorer-page .vault-compact-card{width:100%;max-width:100%;min-width:0;grid-template-columns:166px minmax(0,1fr);column-gap:10px;align-items:center;overflow:hidden;}
.tarot-explorer-page .vault-compact-card .vault-card-media{width:144px;height:198px;margin:12px 0 12px 14px;}
.tarot-explorer-page .vault-compact-card .vault-compact-body{min-width:0;padding:13px 14px 13px 4px;gap:6px;}
.tarot-explorer-page .vault-compact-card h3{line-height:1.02;}
.tarot-explorer-page .vault-compact-card .vault-entry-button{margin-top:6px;}
@media(max-width:1050px){
  .tarot-explorer-page .vault-compact-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .tarot-explorer-page .vault-compact-card{grid-template-columns:150px minmax(0,1fr);}
  .tarot-explorer-page .vault-compact-card .vault-card-media{width:132px;height:181px;margin:11px 0 11px 12px;}
}
@media(max-width:760px){
  .tarot-explorer-page .vault-compact-grid{grid-template-columns:1fr;}
  .tarot-explorer-page .vault-compact-card{grid-template-columns:154px minmax(0,1fr);}
  .tarot-explorer-page .vault-compact-card .vault-card-media{width:134px;height:184px;margin:12px 0 12px 12px;}
}