/* CG Haven storefront - premium collector experience. Design language: Playfair Display
   (headlines) + Libre Franklin (UI/body), near-black ground, warm gold accent, cinematic
   layered imagery, restrained motion (transform/opacity only, reduced-motion aware). */

:root {
    --ink: #070809;
    --coal: #0b0c0e;
    --panel: #15161b;
    --panel-2: #191a20;
    --panel-border: rgba(255, 255, 255, 0.1);
    --gold: #d9b55b;
    --gold-light: #e8c96f;
    --text: #ffffff;
    --text-soft: #d2d2d5;
    --muted: #a7a7ad;
    --sale: #e5484d;
    --radius: 2px;
    --radius-lg: 4px;
    color-scheme: dark;

    /* Legacy aliases - older page templates predate this token rewrite and still reference
       these names; kept as aliases so nothing silently renders unstyled. */
    --cgh-gold: var(--gold);
    --cgh-gold-bright: var(--gold-light);
    --cgh-panel: var(--panel);
    --cgh-panel-border: var(--panel-border);
    --cgh-radius: var(--radius);
    --cgh-radius-lg: var(--radius-lg);
    --cgh-sale: var(--sale);
    --cgh-text: var(--text);
    --cgh-text-muted: var(--muted);
    --cgh-text-soft: var(--text-soft);
    --cgh-bg: var(--ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }

body {
    margin: 0;
    width: 100%;
    overflow-x: hidden;
    background: var(--ink);
    color: var(--text);
    font-family: "Libre Franklin", -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.5;
}

/* Subtle film-grain overlay - cheap (one fixed SVG, no repaint cost) but reads as premium. */
body::before {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 999; opacity: 0.045;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }

.cgh-container { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.cgh-display { font-family: "Playfair Display", Georgia, serif; letter-spacing: -0.02em; }
.cgh-eyebrow { color: var(--gold-light); font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; }

/* ==================== Buttons / icon buttons ==================== */

.cgh-btn-gold, .cgh-btn-outline {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 15px 26px; font-size: 12px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase;
    border-radius: var(--radius); transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.cgh-btn-gold { background: var(--gold); color: #08090b; border: 1px solid var(--gold); }
.cgh-btn-gold:hover { background: var(--gold-light); border-color: var(--gold-light); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(217, 181, 91, 0.18); }
.cgh-btn-outline { background: rgba(0, 0, 0, 0.12); color: #fff; border: 1px solid rgba(255, 255, 255, 0.34); }
.cgh-btn-outline:hover { border-color: var(--gold); color: var(--gold-light); transform: translateY(-2px); }

.cgh-icon-btn {
    position: relative; display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem;
    color: #fff; background: none; border: none; transition: color 0.2s ease, background 0.2s ease;
}
.cgh-icon-btn:hover { color: var(--gold-light); background: rgba(255, 255, 255, 0.05); }
.cgh-icon-btn svg { width: 19px; height: 19px; }

/* ==================== Sticky nav ==================== */

.cgh-site-header {
    position: fixed; top: 0; inset-inline: 0; z-index: 40;
    padding: 18px 20px; background: rgba(7, 8, 9, 0.75); backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--panel-border);
    transition: padding 0.35s ease, background 0.35s ease, border-color 0.35s ease;
}
.cgh-site-header.is-compact { padding: 9px 20px; background: rgba(7, 8, 9, 0.94); border-color: rgba(217, 181, 91, 0.28); }
.cgh-nav-inner { max-width: 1440px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cgh-wordmark { display: flex; align-items: center; gap: 10px; font-weight: 900; letter-spacing: 0.17em; font-size: 15px; white-space: nowrap; }
.cgh-wordmark .cgh-mark { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--gold); color: var(--gold-light); font-size: 13px; font-weight: 800; }
.cgh-primary-nav { display: none; align-items: center; justify-content: center; gap: 22px; }
.cgh-primary-nav a { font-size: 11px; font-weight: 700; letter-spacing: 0.11em; color: rgba(255, 255, 255, 0.8); white-space: nowrap; }
.cgh-primary-nav a:hover { color: var(--gold-light); }
@media (min-width: 1100px) { .cgh-primary-nav { display: flex; flex-wrap: wrap; } }
.cgh-nav-actions { display: flex; align-items: center; gap: 2px; }
.cgh-cart-count, .cgh-wishlist-count {
    position: absolute; top: 0; right: 0; min-width: 16px; padding: 0 4px; border-radius: 999px;
    background: var(--gold); color: #08090b; font-size: 9px; font-weight: 800; line-height: 16px; text-align: center;
}
.cgh-mobile-toggle { display: grid; }
@media (min-width: 1100px) { .cgh-mobile-toggle { display: none; } }

/* ==================== Search panel ==================== */

.cgh-search-panel {
    position: fixed; top: 73px; inset-inline: 0; z-index: 30; padding: 20px;
    background: rgba(11, 12, 14, 0.97); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(217, 181, 91, 0.3);
}
.cgh-search-panel[hidden] { display: none; }
.cgh-search-form { max-width: 720px; margin: 0 auto; display: flex; gap: 10px; position: relative; }
.cgh-search-form input {
    width: 100%; padding: 13px 16px; background: var(--panel); border: 1px solid var(--panel-border);
    color: var(--text); font-size: 14px; border-radius: var(--radius);
}
.cgh-search-form input:focus { border-color: var(--gold); outline: none; }
.cgh-search-suggestions {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; max-height: 420px; overflow-y: auto;
    background: var(--panel); border: 1px solid var(--panel-border); z-index: 5;
}
.cgh-search-suggestions[hidden] { display: none; }
.cgh-suggestion { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--panel-border); }
.cgh-suggestion:hover { background: var(--panel-2); }
.cgh-suggestion img { width: 44px; height: 44px; object-fit: contain; background: #f1eee5; border-radius: 4px; flex-shrink: 0; }
.cgh-suggestion .name { font-size: 13px; font-weight: 600; color: var(--text); }
.cgh-suggestion .meta { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.cgh-suggestion .price { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--gold-light); white-space: nowrap; }
.cgh-suggestion-empty { padding: 16px; text-align: center; color: var(--muted); font-size: 13px; }

/* ==================== Mobile menu ==================== */

.cgh-mobile-menu {
    position: fixed; inset-block: 0; left: 0; z-index: 60; width: 85%; max-width: 380px;
    background: var(--coal); border-right: 1px solid rgba(217, 181, 91, 0.3); padding: 24px;
    transform: translateX(-100%); transition: transform 0.35s ease; overflow-y: auto;
}
.cgh-mobile-menu.is-open { transform: translateX(0); }
.cgh-mobile-menu-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.cgh-mobile-menu nav { display: flex; flex-direction: column; }
.cgh-mobile-menu nav a { padding: 16px 0; border-bottom: 1px solid var(--panel-border); font-size: 14px; font-weight: 700; letter-spacing: 0.1em; color: #fff; }
.cgh-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, 0.7); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.cgh-overlay.is-open { opacity: 1; pointer-events: auto; }

/* ==================== Hero ==================== */

.cgh-hero { position: relative; isolation: isolate; overflow: hidden; min-height: 92vh; display: flex; align-items: flex-end; padding: 140px 20px 60px; }
.cgh-hero::after {
    content: ""; position: absolute; z-index: 8; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, #070809 5%, rgba(7, 8, 9, 0.89) 34%, rgba(7, 8, 9, 0.32) 74%, #070809 100%), linear-gradient(0deg, #070809 0%, transparent 33%);
}
.cgh-hero-bg { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.62; transform: scale(1.08); will-change: transform; }

/* ==================== Hero depth-layer parallax scene ====================
   5 real depth planes (sky/fortress/midground/character/foreground, plus an optional flag)
   each moving at a different speed on scroll and, on desktop with a fine pointer, on mouse
   move - driven by assets/js/hero-parallax.js through a single rAF loop that only ever
   touches `transform` (never layout), so cost stays flat no matter how many layers are
   present. Falls back cleanly to a single .cgh-hero-bg image when no layers are configured -
   see views/storefront/sections/hero.php.

   THE VISUAL LAYOUT EDITOR (admin.cms.hero_layout_editor / assets/js/admin-hero-layout-editor.js)
   previews every layer with plain object-fit: contain and default (centered) object-position -
   no per-layer cropping or alignment tricks. That preview is only trustworthy if the live
   site's base rule matches it exactly, so object-fit/object-position are DELIBERATELY never
   overridden per layer here, even though a hand-tuned crop/alignment per layer (e.g. cover +
   "right top" for fortress) can look marginally better for one specific box. The moment the
   admin drags or resizes a box, any such override stops matching what they saw and designed
   against in the editor - which is exactly the "doesn't display how I arranged it" bug this
   replaced. If a layer needs cropping to avoid a gap, resize its box bigger in the editor
   instead (what you see there is now guaranteed to be what renders live) rather than adding
   an object-fit/object-position override back here. */
.cgh-hero-scene { position: absolute; inset: 0; z-index: 1; }
.cgh-hero-layer { position: absolute; will-change: transform; }
.cgh-hero-layer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center center; }

.cgh-hero-layer--sky { inset: -3%; z-index: 1; }

.cgh-hero-layer--fortress { z-index: 2; top: -2%; right: -4%; width: 52%; height: 88%; }

/* The left ~35% of the frame is where .cgh-hero::after darkens hardest for text legibility
   (see below) - the reference poster has no text to compete with there, but ours does, so
   midground/flag default here to just right of that boundary rather than the reference's
   exact left-side position, or they'd simply disappear into the shadow. Drag them in the
   editor if a different spot works better for your artwork. */
.cgh-hero-layer--midground { z-index: 3; left: 58%; top: 54%; width: 26%; height: 26%; }

.cgh-hero-layer--character { z-index: 4; left: 24%; top: 0; width: 54%; height: 100%; }
.cgh-hero-layer--character img { opacity: 0.98; }

.cgh-hero-layer--flag { z-index: 4; left: 32%; top: 6%; width: 22%; height: 28%; }

.cgh-hero-layer--foreground {
    z-index: 5; left: 0; right: 0; bottom: -6%; height: 42%;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%); mask-image: linear-gradient(to bottom, transparent, #000 30%);
}
.cgh-hero-layer--foreground img { filter: blur(1.2px); }

/* Atmospheric haze: a slow drifting soft gold-tinted band between the sky and fortress
   layers, softening distant elements (atmospheric perspective) with no extra art asset. */
.cgh-hero-haze {
    position: absolute; inset: -10%; z-index: 2; pointer-events: none;
    background: linear-gradient(100deg, transparent 20%, rgba(217, 181, 91, 0.05) 45%, transparent 70%);
    animation: cgh-haze-drift 26s ease-in-out infinite;
}

/* Embers: cheap, fully CSS-driven drifting light particles (positions/timing randomized
   server-side per span, see hero.php, so no JS is needed for this to run). */
.cgh-hero-embers { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
.cgh-hero-embers span {
    position: absolute; bottom: -4%; border-radius: 50%;
    background: var(--gold-light); box-shadow: 0 0 6px 1px rgba(232, 201, 111, 0.75);
    opacity: 0; animation-name: cgh-ember-rise; animation-timing-function: linear; animation-iteration-count: infinite;
}

@keyframes cgh-haze-drift {
    0%, 100% { transform: translateX(-2%); }
    50% { transform: translateX(2%); }
}
@keyframes cgh-ember-rise {
    0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
    12% { opacity: 0.9; }
    88% { opacity: 0.35; }
    100% { transform: translate(var(--ember-drift, 20px), -78vh) scale(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .cgh-hero-layer, .cgh-hero-haze, .cgh-hero-embers span { animation: none !important; transform: none !important; }
}

/* ---- Per-layer decorative effects (Admin > Homepage CMS > Hero Banner > Edit Hero Layer
   Positions > Layer Animation Effects) - type/speed/variation set --fx-duration/--fx-intensity
   and pick one of these classes server-side (see views/storefront/sections/hero.php). Applied
   to the layer's <img>, never its wrapper div, since the wrapper's transform is already driven
   every frame by hero-parallax.js and a CSS animation on the same property would fight it -
   the two transforms compose naturally on separate elements, same trick as the hero cards'
   outer-shuffle/inner-bob pair below. "sway" replaces the old flag-only cgh-hero-flag-sway. */
.cgh-fx-glow { animation: cgh-fx-glow var(--fx-duration, 3s) ease-in-out infinite; }
@keyframes cgh-fx-glow {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 0 rgba(217, 181, 91, 0)); }
    50% { filter: brightness(calc(1 + 0.14 * var(--fx-intensity, 1))) drop-shadow(0 0 calc(16px * var(--fx-intensity, 1)) rgba(217, 181, 91, 0.6)); }
}
.cgh-fx-float { animation: cgh-fx-float var(--fx-duration, 5s) ease-in-out infinite; }
@keyframes cgh-fx-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(calc(-9px * var(--fx-intensity, 1))); }
}
.cgh-fx-drift { animation: cgh-fx-drift var(--fx-duration, 6s) ease-in-out infinite; }
@keyframes cgh-fx-drift {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(calc(12px * var(--fx-intensity, 1))); }
}
.cgh-fx-sway { transform-origin: 20% 25%; animation: cgh-fx-sway var(--fx-duration, 4.5s) ease-in-out infinite; }
@keyframes cgh-fx-sway {
    0%, 100% { transform: rotate(0deg) skewX(0deg); }
    50% { transform: rotate(calc(0.6deg * var(--fx-intensity, 1))) skewX(calc(-0.8deg * var(--fx-intensity, 1))); }
}
@media (prefers-reduced-motion: reduce) {
    .cgh-fx-glow, .cgh-fx-float, .cgh-fx-drift, .cgh-fx-sway { animation: none !important; filter: none !important; transform: none !important; }
}

/* Mobile: keep the depth (still real layered art) but drop the heaviest ambient motion and
   the foreground defocus blur, since these are the most expensive/least visible on a small,
   often lower-powered screen. Scroll parallax amplitude is also reduced in JS on narrow
   viewports - see assets/js/hero-parallax.js. */
@media (max-width: 760px) {
    .cgh-hero-embers, .cgh-hero-haze { display: none; }
    .cgh-hero-layer--foreground img { filter: none; }
}

.cgh-hero-card {
    position: absolute; z-index: 9; border: 1px solid rgba(217, 181, 91, 0.38); overflow: hidden;
    background: linear-gradient(135deg, rgba(31, 29, 23, 0.84), rgba(10, 11, 13, 0.6)); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    will-change: transform, opacity;
}
/* Two layered animations: the outer .cgh-hero-card does a FAST shuffle burst (deal out with
   a real spinning rotation, hold, deal back in) - most of the loop is a long still hold so
   the burst reads as a distinct shuffle event, not a slow continuous drift. The inner
   -float wrapper adds a small continuous bob so the held cards still feel alive. The image
   inside the float wrapper is deliberately oversized (inset: -14%) so that bob never
   uncovers a gap at the card's edge - overflow is clipped by the static outer card, not by
   the moving wrapper, so the frame always stays full. */
.cgh-hero-card-float { position: relative; width: 100%; height: 100%; }
.cgh-hero-card-float img { position: absolute; inset: -14%; width: auto; height: auto; min-width: 128%; min-height: 128%; object-fit: cover; opacity: 0.85; display: block; }
.cgh-hero-card.c1 {
    width: 180px; height: 252px; right: 12%; top: 20%; transform: rotate(9deg);
    animation: cgh-shuffle-c1 5s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.cgh-hero-card.c2 {
    width: 145px; height: 208px; right: 28%; top: 40%; transform: rotate(-11deg);
    animation: cgh-shuffle-c2 5s cubic-bezier(0.16, 1, 0.3, 1) infinite; animation-delay: 0.15s;
}
.cgh-hero-card.c3 {
    width: 118px; height: 168px; right: 6%; bottom: 16%; transform: rotate(14deg);
    animation: cgh-shuffle-c3 5s cubic-bezier(0.16, 1, 0.3, 1) infinite; animation-delay: 0.3s;
}
.cgh-hero-card.c1 .cgh-hero-card-float { animation: cgh-card-bob 4.2s ease-in-out infinite; }
.cgh-hero-card.c2 .cgh-hero-card-float { animation: cgh-card-bob 3.6s ease-in-out infinite; animation-delay: 0.5s; }
.cgh-hero-card.c3 .cgh-hero-card-float { animation: cgh-card-bob 4.8s ease-in-out infinite; animation-delay: 1s; }

/* Each card holds briefly as a small, neatly-tilted "deck" card - all three converging on
   the SAME point (verified by measuring each card's real rendered center at rest and solving
   the exact translate needed to bring all three centers to one shared coordinate, then
   scaling each down by a different factor so their deck-sized boxes come out roughly equal
   despite their different natural sizes - a real stacked deck, not three cards that merely
   drift toward each other). From there it's DEALT OUT fast - a snappy ~0.7s full ~360 degree
   spin to its resting spread position (a quick flick, not a slow drift) - then floats/holds
   there for about 3 seconds (the continuous bob on the inner wrapper keeps it alive during
   the hold), then spins back into the deck just as fast and holds briefly before repeating.
   The trick: the deck pose is written as (angle - 360deg) going out and (angle + 360deg)
   coming back - numerically a full turn apart, but the SAME rendered angle, so the loop
   repeats with no visible jump while the journey between poses genuinely spins. */
@keyframes cgh-shuffle-c1 {
    0%, 12% { transform: translate(-2.5vw, 19.7vh) rotate(-364deg) scale(0.61); }
    26%, 86% { transform: translate(0, 0) rotate(9deg) scale(1); }
    100% { transform: translate(-2.5vw, 19.7vh) rotate(356deg) scale(0.61); }
}
@keyframes cgh-shuffle-c2 {
    0%, 12% { transform: translate(12.6vw, 2vh) rotate(-357deg) scale(0.76); }
    26%, 86% { transform: translate(0, 0) rotate(-11deg) scale(1); }
    100% { transform: translate(12.6vw, 2vh) rotate(363deg) scale(0.76); }
}
@keyframes cgh-shuffle-c3 {
    0%, 12% { transform: translate(-10.1vw, -21.7vh) rotate(-366deg) scale(0.93); }
    26%, 86% { transform: translate(0, 0) rotate(14deg) scale(1); }
    100% { transform: translate(-10.1vw, -21.7vh) rotate(354deg) scale(0.93); }
}
@keyframes cgh-card-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}
@media (prefers-reduced-motion: reduce) {
    .cgh-hero-card.c1, .cgh-hero-card.c2, .cgh-hero-card.c3,
    .cgh-hero-card-float { animation: none; }
}
@media (max-width: 900px) {
    .cgh-hero-card.c1 { right: -10%; top: 24%; opacity: 0.55; }
    .cgh-hero-card.c2 { right: 12%; top: 56%; opacity: 0.45; }
    .cgh-hero-card.c3 { display: none; }
    .cgh-hero::after { background: linear-gradient(90deg, #070809 0%, rgba(7, 8, 9, 0.67) 100%), linear-gradient(0deg, #070809 0%, transparent 38%); }
}
.cgh-hero-content { position: relative; z-index: 10; max-width: 1240px; margin: 0 auto; width: 100%; }
.cgh-hero-headline { font-size: clamp(38px, 8vw, 108px); font-weight: 800; line-height: 0.88; margin: 16px 0 22px; max-width: 780px; white-space: pre-line; }
.cgh-hero-sub { max-width: 520px; font-size: 15px; line-height: 1.7; color: var(--text-soft); margin: 0 0 34px; }
.cgh-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.cgh-scroll-cue { display: none; align-items: center; gap: 10px; margin-top: 40px; font-size: 10px; font-weight: 700; letter-spacing: 0.2em; color: var(--gold-light); }
@media (min-width: 860px) { .cgh-scroll-cue { display: inline-flex; } }
@media (prefers-reduced-motion: reduce) { .cgh-hero-bg { transform: none !important; } }

/* ==================== Trust strip ==================== */

.cgh-trust-strip { border-block: 1px solid var(--panel-border); background: var(--ink); }
.cgh-trust-strip .cgh-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 26px 20px; }
@media (min-width: 700px) { .cgh-trust-strip .cgh-container { grid-template-columns: repeat(4, 1fr); } }
.cgh-trust-item { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.cgh-trust-item svg { width: 18px; height: 18px; stroke: var(--gold); flex-shrink: 0; }

/* ==================== Section shell ==================== */

.cgh-section { padding: 88px 20px; }
.cgh-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 40px; }
.cgh-section-head h2 { font-size: clamp(30px, 5vw, 52px); font-weight: 700; margin: 10px 0 0; }
.cgh-section-head p { color: var(--muted); margin: 14px 0 0; max-width: 480px; font-size: 14px; line-height: 1.6; }
.cgh-section-head .cgh-view-all { color: var(--gold-light); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.cgh-bg-coal { background: #101116; }
.cgh-bg-ink { background: var(--coal); }

/* ==================== Category grid ==================== */

/* Full-width wrapping grid, not a horizontal scroller - with only a handful of tiles that
   used to mean the last one sat half-cut-off at the edge of an invisible scroll area (the
   scrollbar was deliberately hidden, so there was no hint more content existed off-screen).
   Wrapping means every tile the admin adds is always fully visible, using the whole section
   width, with "View All" above still the way to reach the full catalog. No overflow property
   here is intentional: overflow-x:auto used to implicitly compute overflow-y to auto too (a
   classic CSS trap), which clipped the top of a tile's own hover-lift against this container -
   a plain grid has no such clipping, so the lift is never cut off. */
.cgh-category-rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; padding-top: 10px; }
.cgh-category-tile {
    position: relative; height: 320px; overflow: hidden;
    border: 1px solid var(--panel-border); background: var(--panel); background-size: cover; background-position: center;
    transition: transform 0.35s ease, border-color 0.35s ease;
}
.cgh-category-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4, 5, 6, 0.93), rgba(4, 5, 6, 0.07) 65%); }
.cgh-category-tile:hover { transform: translateY(-8px) rotate(-0.6deg); border-color: rgba(217, 181, 91, 0.8); }
.cgh-category-tile-body { position: absolute; inset-inline: 0; bottom: 0; z-index: 1; padding: 22px; }
.cgh-category-tile-body svg { width: 22px; height: 22px; stroke: var(--gold-light); margin-bottom: 24px; }
.cgh-category-tile-title { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.cgh-category-tile-count { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* ==================== Testimonials ==================== */

.cgh-testimonial-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.cgh-testimonial-card {
    background: var(--panel); border: 1px solid var(--panel-border); border-radius: 4px;
    padding: 28px; display: flex; flex-direction: column; gap: 14px;
}
.cgh-testimonial-card.is-featured { border-color: rgba(217, 181, 91, 0.5); background: linear-gradient(160deg, rgba(217, 181, 91, 0.08), var(--panel)); }
.cgh-testimonial-stars { color: var(--gold); font-size: 16px; letter-spacing: 2px; }
.cgh-testimonial-quote { font-size: 15px; line-height: 1.7; color: var(--text-soft); flex: 1; margin: 0; }
.cgh-testimonial-author { display: flex; align-items: center; gap: 12px; }
.cgh-testimonial-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.cgh-testimonial-name { font-weight: 700; font-size: 13px; }
.cgh-testimonial-product { font-size: 11px; color: var(--muted); }
.cgh-testimonial-product a { color: var(--gold-light); }

/* ==================== Brand logo strip (continuous marquee) ==================== */

.cgh-brand-strip-section { padding-block: 56px; }
.cgh-brand-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cgh-brand-track {
    display: flex; align-items: center; gap: 64px; width: max-content;
    animation: cgh-marquee-scroll var(--marquee-duration, 32s) linear infinite;
}
.cgh-brand-marquee:hover .cgh-brand-track { animation-play-state: paused; }
.cgh-brand-logo { flex: 0 0 auto; display: flex; align-items: center; height: 42px; }
.cgh-brand-logo img { height: 100%; width: auto; max-width: 140px; object-fit: contain; filter: grayscale(1) brightness(1.6) contrast(0.9); opacity: 0.55; transition: opacity 0.25s ease, filter 0.25s ease; }
.cgh-brand-logo:hover img { filter: none; opacity: 1; }
/* --marquee-distance/--marquee-duration are set by brand-marquee.js once it knows how many
   logos exist - a handful of logos can be narrower than the screen, and without JS to pad
   the track out, translateX(-50%) would leave a visible empty gap before the loop reset. */
@keyframes cgh-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(var(--marquee-distance, -50%)); } }
@media (prefers-reduced-motion: reduce) {
    .cgh-brand-track { animation: none; overflow-x: auto; }
    .cgh-brand-logo.is-duplicate { display: none; }
}

/* ==================== Featured drop ==================== */

.cgh-featured-drop { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; max-width: 1240px; margin: 0 auto; }
.cgh-featured-image-wrap { position: relative; min-height: 380px; }
.cgh-featured-frame { position: absolute; inset: 20px; border: 1px solid rgba(217, 181, 91, 0.35); pointer-events: none; }
.cgh-featured-image-wrap img { position: relative; height: 440px; width: 100%; object-fit: contain; padding: 28px; }
.cgh-featured-caption { position: absolute; bottom: 0; right: 0; border: 1px solid rgba(217, 181, 91, 0.4); background: var(--coal); padding: 12px 18px; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: var(--gold-light); text-transform: uppercase; }
.cgh-featured-set { margin: 18px 0 4px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--gold-light); text-transform: uppercase; }
.cgh-featured-headline { font-size: clamp(30px, 4.5vw, 48px); font-weight: 700; line-height: 0.98; margin: 4px 0 12px; }
.cgh-featured-edition { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 14px; }
.cgh-featured-sub { color: var(--muted); font-size: 14px; line-height: 1.7; max-width: 460px; margin: 0 0 24px; }
.cgh-featured-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 32px; margin-bottom: 30px; }
.cgh-featured-price { font-size: 22px; font-weight: 700; color: var(--gold-light); }
.cgh-featured-tag { border-left: 2px solid var(--gold); padding-left: 12px; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: var(--gold-light); text-transform: uppercase; }
.cgh-countdown { display: flex; gap: 10px; margin-bottom: 26px; flex-wrap: wrap; }
.cgh-countdown-unit { background: var(--coal); border: 1px solid var(--panel-border); padding: 12px 16px; text-align: center; min-width: 64px; }
.cgh-countdown-unit .num { font-size: 22px; font-weight: 800; color: var(--gold-light); }
.cgh-countdown-unit .lbl { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
@media (max-width: 900px) { .cgh-featured-drop { grid-template-columns: 1fr; } }

/* ==================== Vault ==================== */

.cgh-vault-section {
    background-color: #101116;
    background-image: linear-gradient(rgba(217, 181, 91, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(217, 181, 91, 0.06) 1px, transparent 1px);
    background-size: 42px 42px;
}
.cgh-vault-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .cgh-vault-grid { grid-template-columns: 1fr 1fr; } }
.cgh-vault-card { position: relative; overflow: hidden; min-height: 400px; border: 1px solid rgba(217, 181, 91, 0.19); background: #111216; display: block; }
.cgh-vault-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.62; transition: transform 0.6s ease; }
.cgh-vault-card:hover img { transform: scale(1.06); }
.cgh-vault-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 6, 7, 0.96), rgba(5, 6, 7, 0.05) 75%); }
.cgh-vault-card-body { position: relative; z-index: 1; padding: 26px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.cgh-vault-tag { display: inline-block; align-self: flex-start; border: 1px solid var(--gold); padding: 4px 8px; font-size: 9px; font-weight: 700; letter-spacing: 0.14em; color: var(--gold-light); text-transform: uppercase; margin-bottom: 14px; }
.cgh-vault-title { font-size: 21px; font-weight: 700; margin: 0 0 8px; }
.cgh-vault-price { font-size: 14px; color: var(--gold-light); margin: 0 0 18px; }
.cgh-vault-actions { display: flex; gap: 10px; }
.cgh-vault-actions .cgh-btn-gold { padding: 11px 20px; }
.cgh-vault-actions .cgh-icon-btn { border: 1px solid rgba(255, 255, 255, 0.2); width: 2.4rem; height: 2.4rem; }

/* ==================== Product cards (new arrivals / shop grid) ==================== */

.cgh-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.cgh-product-card { position: relative; background: #111216; border: 1px solid var(--panel-border); transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.cgh-product-card:hover { transform: translateY(-6px); border-color: rgba(217, 181, 91, 0.75); box-shadow: 0 20px 42px rgba(0, 0, 0, 0.38); }
/* .cgh-product-media is an <a> - anchors default to display:inline, which ignores
   height/overflow entirely and lets the <img> render at its natural size instead of
   the intended 230px crop. display:block is what actually makes this a fixed-size box. */
.cgh-product-media { position: relative; display: block; height: 230px; background: var(--panel-2); overflow: hidden; }
.cgh-product-media img { width: 100%; height: 100%; object-fit: contain; padding: 14px; box-sizing: border-box; transition: transform 0.55s ease; }
.cgh-product-card:hover .cgh-product-media img { transform: scale(1.07); }
.cgh-badge-row { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.cgh-badge { font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 8px; background: var(--coal); color: var(--gold-light); }
.cgh-badge-sale { background: var(--sale); color: #fff; }
.cgh-badge-new { background: var(--gold); color: #08090b; }
.cgh-badge-preorder { background: #4c6ef5; color: #fff; }
.cgh-badge-outofstock { background: #333; color: var(--muted); }
.cgh-wishlist-btn {
    position: absolute; top: 8px; right: 8px; z-index: 2; width: 34px; height: 34px; border-radius: 50%;
    background: rgba(16, 17, 22, 0.8); border: none; display: grid; place-items: center;
}
.cgh-wishlist-btn svg { width: 16px; height: 16px; stroke: #fff; fill: none; transition: fill 0.2s ease, stroke 0.2s ease; }
.cgh-wishlist-btn.is-active svg, [data-wishlist-toggle].is-active svg { stroke: var(--gold-light); fill: var(--gold-light); }
.cgh-product-body { padding: 18px; }
.cgh-product-category { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 6px; }
.cgh-product-title { font-size: 14px; font-weight: 700; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cgh-product-price { display: flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 700; }
.cgh-price-old { font-size: 12px; color: var(--muted); text-decoration: line-through; font-weight: 400; }
.cgh-stock-state { font-size: 11px; color: var(--muted); margin-top: 6px; }
.cgh-stock-state.out { color: var(--sale); }
.cgh-quick-add {
    opacity: 0; transform: translateY(8px); margin-top: 14px; width: 100%; padding: 10px;
    border: 1px solid var(--gold); background: transparent; color: var(--gold-light);
    font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; transition: 0.25s ease;
}
.cgh-product-card:hover .cgh-quick-add { opacity: 1; transform: none; }
@media (hover: none) { .cgh-quick-add { opacity: 1; transform: none; } }

/* ==================== Filter chips + toolbar (new arrivals / shop) ==================== */

.cgh-filter-rail { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.cgh-filter-chip {
    border: 1px solid rgba(255, 255, 255, 0.17); color: var(--muted); background: none;
    padding: 10px 14px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    white-space: nowrap; transition: 0.2s ease;
}
.cgh-filter-chip:hover, .cgh-filter-chip.is-active { color: #08090b; border-color: var(--gold); background: var(--gold); }

/* ==================== Storytelling (scroll parallax) ==================== */

.cgh-story-stage { position: relative; min-height: 640px; overflow: hidden; display: grid; place-items: center; padding: 60px 20px; }
.cgh-story-stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(217, 181, 91, 0.16), transparent 42%), linear-gradient(90deg, #070809, transparent, #070809); }
.cgh-story-art { position: absolute; width: 220px; aspect-ratio: 2/3; object-fit: cover; border: 1px solid rgba(217, 181, 91, 0.35); filter: grayscale(0.45) contrast(1.2); opacity: 0.4; }
.cgh-story-art.a { left: 8%; top: 10%; transform: rotate(-14deg); }
.cgh-story-art.b { right: 8%; bottom: 8%; transform: rotate(11deg); }
.cgh-story-art.c { right: 22%; top: 8%; width: 150px; transform: rotate(-5deg); }
@media (max-width: 900px) { .cgh-story-art.a { left: -14%; } .cgh-story-art.b { right: -16%; } .cgh-story-art.c { display: none; } }
.cgh-story-words { position: relative; z-index: 1; text-align: center; }
.cgh-story-word {
    font-size: clamp(44px, 10vw, 108px); font-weight: 700; line-height: 0.86; margin: 0;
}
.js .cgh-story-word { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js .cgh-story-word.is-visible { opacity: 1; transform: none; }
.cgh-story-word:nth-child(odd) { color: #fff; }
.cgh-story-word:nth-child(even) { color: var(--gold-light); }
.cgh-story-rule { height: 1px; width: 96px; margin: 32px auto 20px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.cgh-story-welcome { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { .js .cgh-story-word { opacity: 1; transform: none; transition: none; } }

/* ==================== Release calendar ==================== */

.cgh-calendar-rail { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 8px; }
.cgh-timeline-card { flex: 0 0 auto; min-width: 260px; border-top: 2px solid var(--gold); background: var(--panel); padding: 20px; }
.cgh-timeline-card img { height: 140px; width: 100%; object-fit: cover; filter: grayscale(1); margin-bottom: 18px; }
.cgh-timeline-date { font-size: 22px; font-weight: 800; color: var(--gold-light); }
.cgh-timeline-game { margin-top: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.cgh-timeline-title { margin-top: 6px; font-size: 16px; font-weight: 700; }
.cgh-timeline-status { display: inline-block; margin-top: 16px; border: 1px solid rgba(217, 181, 91, 0.5); padding: 4px 8px; font-size: 9px; font-weight: 700; letter-spacing: 0.1em; color: var(--gold-light); text-transform: uppercase; }

/* ==================== Full-bleed banners ==================== */

.cgh-banner { position: relative; min-height: 440px; overflow: hidden; display: flex; align-items: center; padding: 60px 20px; }
.cgh-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.4; filter: saturate(0.55); }
.cgh-banner.is-grayscale img { opacity: 0.3; filter: grayscale(1); }
.cgh-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 8, 9, 0.94), rgba(7, 8, 9, 0.38), rgba(7, 8, 9, 0.88)); }
.cgh-banner-content { position: relative; z-index: 1; max-width: 640px; }
.cgh-banner-title { font-size: clamp(30px, 5vw, 56px); font-weight: 700; line-height: 0.95; margin: 16px 0 28px; white-space: pre-line; }
.cgh-banner-sub { color: var(--text-soft); font-size: 14px; line-height: 1.7; margin: 0 0 28px; max-width: 480px; }

/* ==================== Announcement bar ==================== */

.cgh-announcement-bar { position: relative; z-index: 41; background: var(--gold); color: #08090b; text-align: center; font-size: 12px; font-weight: 700; padding: 9px 16px; }
.cgh-announcement-bar a { text-decoration: underline; }

/* ==================== Holding page (no CMS content yet) ==================== */

.cgh-holding { min-height: calc(100vh - 140px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 160px 20px 60px; }
.cgh-holding h1 { font-size: clamp(28px, 5vw, 52px); margin: 0 0 12px; letter-spacing: 0.01em; white-space: pre-line; }
.cgh-holding p { color: var(--muted); max-width: 480px; margin: 0 auto; }

/* ==================== Footer ==================== */

.cgh-site-footer { border-top: 1px solid var(--panel-border); background: var(--ink); padding: 80px 20px 28px; }
.cgh-footer-grid { display: grid; gap: 40px; margin-bottom: 60px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .cgh-footer-grid { grid-template-columns: 1.3fr 0.7fr 0.7fr 0.7fr 1.4fr; } }
.cgh-footer-grid h5 { font-size: 10px; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase; color: var(--gold-light); margin: 0 0 18px; }
.cgh-footer-grid a, .cgh-footer-grid p { color: var(--muted); font-size: 14px; display: block; margin-bottom: 12px; line-height: 1.6; }
.cgh-footer-grid a:hover { color: #fff; }
.cgh-footer-newsletter-form { display: flex; gap: 8px; margin-top: 20px; }
.cgh-footer-newsletter-form input { flex: 1; min-width: 0; padding: 13px; background: var(--panel); border: 1px solid var(--panel-border); color: #fff; font-size: 13px; }
.cgh-footer-social { display: flex; gap: 18px; margin-top: 24px; }
.cgh-footer-social a { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0; }
.cgh-footer-social a:hover { color: var(--gold-light); }
.cgh-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; border-top: 1px solid var(--panel-border); padding-top: 24px; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* ==================== Cart drawer ==================== */

.cgh-cart-drawer {
    position: fixed; inset-block: 0; right: 0; z-index: 60; width: 100%; max-width: 420px;
    background: #101116; border-left: 1px solid rgba(217, 181, 91, 0.3); display: flex; flex-direction: column;
    padding: 24px; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cgh-cart-drawer.is-open { transform: translateX(0); }
.cgh-cart-drawer-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--panel-border); padding-bottom: 20px; }
.cgh-cart-drawer-header h2 { font-size: 26px; margin: 0; }
.cgh-cart-drawer-items { flex: 1; overflow-y: auto; padding: 20px 0; }
.cgh-cart-drawer-footer { border-top: 1px solid var(--panel-border); padding-top: 20px; }
.cgh-cart-line { display: flex; gap: 12px; border-bottom: 1px solid var(--panel-border); padding-bottom: 16px; margin-bottom: 16px; }
.cgh-cart-line img { width: 56px; height: 56px; object-fit: cover; background: #f1eee5; flex-shrink: 0; }
.cgh-cart-line-name { font-size: 13px; font-weight: 700; }
.cgh-cart-line-price { font-size: 12px; color: var(--gold-light); margin-top: 4px; }
.cgh-cart-qty-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.cgh-qty-btn { border: 1px solid rgba(255, 255, 255, 0.2); background: none; color: #fff; width: 26px; height: 26px; font-size: 14px; }
.cgh-cart-remove { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--muted); background: none; border: none; }
.cgh-cart-remove:hover { color: #fff; }
.cgh-cart-empty { text-align: center; padding: 60px 0; color: var(--muted); font-size: 13px; }
.cgh-cart-total-row { display: flex; justify-content: space-between; margin-bottom: 16px; }
.cgh-cart-total-row span:first-child { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.cgh-cart-total-row strong { font-size: 18px; color: var(--gold-light); }
.cgh-cart-note { text-align: center; font-size: 11px; color: var(--muted); margin-top: 12px; }

/* ==================== Shop / catalog ==================== */

.cgh-shop-layout { display: grid; grid-template-columns: 240px 1fr; gap: 32px; padding: 32px 20px; max-width: 1240px; margin: 0 auto; }
.cgh-filter-group { margin-bottom: 24px; }
.cgh-filter-group h4 { font-size: 12px; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; letter-spacing: 0.05em; }
.cgh-filter-group label { display: block; font-size: 13px; margin-bottom: 8px; color: var(--text-soft); font-weight: normal; }
.cgh-shop-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.cgh-shop-toolbar select, .cgh-shop-toolbar input[type=text] { background: var(--panel); border: 1px solid var(--panel-border); padding: 8px 12px; color: var(--text); font-size: 13px; }
@media (max-width: 860px) { .cgh-shop-layout { grid-template-columns: 1fr; } }

/* ==================== Product detail ==================== */

.cgh-product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 140px 20px 40px; max-width: 1240px; margin: 0 auto; }
.cgh-gallery-main { aspect-ratio: 1; background: #f1eee5; overflow: hidden; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; }
.cgh-gallery-main img { width: 100%; height: 100%; object-fit: contain; padding: 20px; cursor: zoom-in; mix-blend-mode: multiply; }
.cgh-gallery-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.cgh-gallery-thumbs img { width: 70px; height: 70px; object-fit: cover; border: 1px solid var(--panel-border); cursor: pointer; background: #f1eee5; }
.cgh-gallery-thumbs img.is-active { border-color: var(--gold); }
.cgh-pd-title { font-size: 30px; font-weight: 700; margin: 0 0 10px; }
.cgh-pd-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.cgh-pd-meta span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); border: 1px solid var(--panel-border); padding: 5px 10px; }
.cgh-pd-price { font-size: 26px; font-weight: 700; color: var(--gold-light); margin-bottom: 18px; }
.cgh-pd-trust { display: flex; gap: 18px; flex-wrap: wrap; margin: 20px 0; padding: 16px 0; border-top: 1px solid var(--panel-border); border-bottom: 1px solid var(--panel-border); }
.cgh-pd-trust span { font-size: 12px; color: var(--muted); }
.cgh-pd-tabs h3 { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-light); margin: 28px 0 10px; }
.cgh-qty-input { width: 70px; padding: 12px; background: var(--panel); border: 1px solid var(--panel-border); color: var(--text); }
@media (max-width: 860px) { .cgh-product-detail { grid-template-columns: 1fr; } }

/* ==================== Account pages (orders, addresses, details, etc.) ==================== */
.cgh-account-layout { display: grid; grid-template-columns: 220px 1fr; gap: 40px; padding: 40px 20px; }
.cgh-account-nav { display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 760px) {
    .cgh-account-layout { grid-template-columns: 1fr; gap: 16px; padding: 24px 16px; }
    .cgh-account-nav { flex-direction: row; flex-wrap: wrap; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
    .cgh-account-nav a { white-space: nowrap; }
}

/* ==================== Fullscreen zoom overlay ==================== */

.cgh-zoom-overlay { position: fixed; inset: 0; background: rgba(8, 9, 10, 0.95); display: none; align-items: center; justify-content: center; z-index: 100; padding: 40px; }
.cgh-zoom-overlay.is-open { display: flex; }
.cgh-zoom-overlay img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cgh-zoom-close { position: absolute; top: 20px; right: 24px; background: none; border: none; color: #fff; font-size: 28px; cursor: pointer; }

/* ==================== Alerts / forms (account/checkout pages) ==================== */

.cgh-alert-error { background: rgba(229, 72, 77, 0.12); border: 1px solid rgba(229, 72, 77, 0.4); color: #ffb4b6; padding: 12px 16px; font-size: 13px; margin-bottom: 16px; }
.cgh-alert-success { background: rgba(74, 222, 128, 0.12); border: 1px solid rgba(74, 222, 128, 0.4); color: #bbf7d0; padding: 12px 16px; font-size: 13px; margin-bottom: 16px; }
.cgh-alert-info { background: rgba(217, 181, 91, 0.1); border: 1px solid rgba(217, 181, 91, 0.35); color: var(--text-soft); padding: 12px 16px; font-size: 13px; margin-bottom: 16px; }
.cgh-form-card { max-width: 480px; margin: 140px auto 60px; background: var(--panel); border: 1px solid var(--panel-border); padding: 32px; }
.cgh-form-field { margin-bottom: 16px; }
.cgh-form-field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.cgh-form-field input, .cgh-form-field select, .cgh-form-field textarea { width: 100%; padding: 12px 14px; background: var(--ink); border: 1px solid var(--panel-border); color: var(--text); font-size: 14px; font-family: inherit; }

/* Pages that aren't full-bleed hero pages need top padding to clear the fixed nav. */
.cgh-page-offset { padding-top: 100px; }

/* ==================== Generic card / empty-state utilities ==================== */

.cgh-card { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-lg); padding: 24px; }
.cgh-empty-state { text-align: center; padding: 60px 20px; color: var(--muted); font-size: 14px; line-height: 1.7; }

/* ==================== Reveal-on-scroll (generic) ====================
   Gated behind .js (added by an inline script the instant JS runs) so a no-JS visitor never
   has content hidden behind a reveal that will never fire - a real fallback, not a fake one. */

.js .cgh-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js .cgh-reveal.is-visible { opacity: 1; transform: none; }

.js section[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js section[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .js .cgh-reveal, .js section[data-reveal] { opacity: 1; transform: none; transition: none; }
}