/* =========================================
   PENDANTS PAGE — DESERT NIGHT THEME
   Page-specific overrides for pendants.html.
   Shared component styles live in style.css;
   only desert-page-unique rules belong here.
   ========================================= */

/* Page content sits above the WebGL canvas */
.jynn-layer {
    position: relative;
    z-index: 10;
}

/* --- Hero Section re-skin --- */
.desert-hero {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: flex-end;
    padding: 0 0 14vh;
    position: relative;
}

/* Scrim over the entire page content area (hero + product grid) for
   legibility over the WebGL desert scene — ONE continuous layer, not two
   separate treatments meeting at a boundary (a hero-only overlay plus a
   separately-tuned grid-section background, which is what this used to
   be, produces a visible seam wherever their two different treatments
   don't line up exactly).
   Scoped to `.jynn-category` (this element — the `<main>` that wraps
   the hero AND the product grid) rather than `.desert-hero` alone, so
   `position: absolute; inset: 0` sizes the scrim to `<main>`'s FULL
   content height — seamless from the top of the hero to the bottom of
   the last product card, however tall that ends up being (product count
   varies, and infinite scroll keeps appending more). A flat, uniform
   colour (not a percentage-anchored gradient) is deliberate: gradient
   percentages assume a specific box height, which breaks the moment the
   box's real height differs from what the gradient was tuned for — see
   the git history on this file for two different ways that broke. A flat
   colour has no "wrong height" to get, so it can't develop a seam or get
   misplaced regardless of how many products load.
   `<main>` sits between the header and footer in the DOM (header.php
   closes before this element opens; footer.php opens only after it
   closes), so this can structurally never reach either one — no extra
   scoping needed to "exclude" them. */
.jynn-category::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: rgba(3, 4, 7, 0.38);
}

/* Bracelets/chains/brooches (dawn/day/dusk) render a bright desert sky —
   the base scrim above isn't dark enough to keep it legible, so this
   strengthens just the `background` (position/inset/z-index are inherited
   unchanged from the base rule above; only re-declaring what actually
   differs). Pendants (night) never gets `.is-daytime` (see pendants-v2.js),
   so it keeps the softer base scrim untouched. */
.jynn-category.is-daytime::before {
    background: rgba(3, 4, 7, 0.6);
}

/* Daytime skies (dawn / day / dusk) are bright, so the softer night scrim
   above isn't enough — the cream hero copy washes out. pendants.js adds
   `.is-daytime` to the hero on those presets; strengthen the scrim behind the
   bottom-left copy (fading to clear upper-right so the sun/sky stay visible)
   and lift the subtext colour. The night preset never gets `.is-daytime`, so
   the Desert Night hero is untouched. */
/* The .is-daytime overlay override was removed so all pages use the base radial overlay from the Pendants page */

.desert-hero.is-daytime .hero-subtext {
    color: #F3E7D6;
}

.desert-hero .hero-content {
    position: relative;
    z-index: 2;
}

.desert-hero .hero-badge {
    border-left-color: #E8C77A;
    color: #C8A875;
}

.desert-hero .hero-title {
    font-size: clamp(3.5rem, 8vw, 8rem);
}

.desert-hero .hero-subtext {
    color: #B89878;
}

/* Entrance Animations */
.reveal-target {
    opacity: 0;
    transform: translateY(20px);
}

/* --- Grid & Showcase Section --- */
.pendant-grid-section {
    padding: 12rem 0 14rem;
    position: relative;
    z-index: 10;
    background: linear-gradient(180deg,
            rgba(3, 4, 7, 0) 0%,
            rgba(3, 4, 7, 0.16) 24%,
            rgba(3, 4, 7, 0.34) 58%,
            rgba(3, 4, 7, 0.34) 100%);
}

/* Removed Option D blending gradient */

/* Minimalist Editorial Title Header */
.editorial-header {
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 1.5rem;
}

.editorial-header .header-line {
    width: 60px;
    height: 1px;
    background: var(--accent-glow);
    opacity: 0.8;
}

.editorial-header .header-main {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.editorial-header .collection-tag {
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--accent-glow);
    letter-spacing: 0.25em;
    text-transform: uppercase;
}

.editorial-header .section-title {
    font-size: clamp(2.5rem, 5vw, 5rem);
    font-family: var(--font-display);
    color: var(--text-bright);
    margin: 0;
    font-weight: 700;
}

/* NOTE: Product card / showcase-row layout (.showcase-card, .card-media-wrapper,
   .card-num, .card-meta, etc.) is NOT styled here. The real WooCommerce
   markup renders class="products jynn-editorial-showcase" (see
   jynn_child_editorial_loop_class() in functions.php), so those rules live
   in woocommerce-shop.css, which targets .jynn-editorial-showcase. The
   3-column staggered ("uneven") staircase layout is defined there and is
   deliberately left untouched. */

/* --- Grid alignment fix (pendants page only) --------------------------------
   WooCommerce adds clearfix ::before / ::after pseudo-elements to ul.products
   (a leftover from its legacy float layout). On our CSS grid those
   pseudo-elements are treated as grid ITEMS: ::before takes row 1 / column 1
   and pushes every product one cell to the right — product 01 lands in column
   2, column 1 of the first row is left empty, product 09 gets orphaned in a
   row of its own, and the staircase margin-tops (assigned by :nth-child, which
   does NOT count pseudo-elements) end up on the wrong columns.

   Removing the pseudo-elements from the grid restores the intended clean
   3-column staircase. Scoped to #pendant-editorial so only this page changes;
   the same latent issue exists on the other editorial archives (e.g.
   bracelets) and can be fixed globally in woocommerce-shop.css on request. */
#pendant-editorial ul.products.jynn-editorial-showcase::before,
#pendant-editorial ul.products.jynn-editorial-showcase::after {
    content: none;
    display: none;
}

/* --- Mobile (phones ≤ 640px) ------------------------------------------------
   Pendants page only.

   1) Single-column product grid. The shared woocommerce-shop.css sets the
      phone grid to `1fr` WITHOUT !important, but its tablet rule uses
      `repeat(2,1fr) !important`, so phones wrongly get two cramped columns
      (cards overflow their track). An id-scoped !important restores one
      full-width card per row, and margins are flattened so stacked cards
      don't inherit the desktop staircase offsets.
   2) Tighter vertical rhythm — the desktop 12rem / 14rem section padding is
      far too tall on a phone.
   3) Slightly smaller hero + section headings so they don't dominate. */
@media (max-width: 640px) {
    #pendant-editorial ul.products.jynn-editorial-showcase {
        grid-template-columns: 1fr !important;
    }

    #pendant-editorial ul.products.jynn-editorial-showcase li.product {
        margin-top: 0 !important;
    }

    .pendant-grid-section {
        padding: 5rem 0 7rem;
    }

    .desert-hero {
        padding-bottom: 12vh;
    }

    .desert-hero .hero-title {
        font-size: clamp(2.6rem, 12vw, 3.8rem);
    }

    .editorial-header {
        margin-bottom: 2.25rem;
    }

    .editorial-header .section-title {
        font-size: clamp(2rem, 9vw, 2.75rem);
    }

    /* Product descriptions are dropped on phones to keep each card compact
       (name + price + CTA only). */
    #pendant-editorial .card-desc {
        display: none;
    }
}