/* =========================================
   JYNN WooCommerce — Alternating Editorial Rows
   Each product is a row: image one side, details the
   other, flipping every other row (zig-zag). Ported
   from the static pendants design, with reliable
   image fill + a clean (not clipped) index numeral +
   lightweight transitions. Shared across all category
   archives + the shop.
   ========================================= */

/* Dark background on archive pages. */
.woocommerce-shop,
.tax-product_cat,
.tax-product_tag {
    background-color: var(--bg-void);
    color: var(--text-bright);
}

.woocommerce-shop .site,
.tax-product_cat .site,
.tax-product_tag .site,
.woocommerce-shop .site-content,
.tax-product_cat .site-content {
    background-color: transparent;
}

/* Shop/archive header: title, result count, sorting — legible on dark. */
.woocommerce-products-header__title,
.woocommerce-products-header__title.page-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 600;
    color: var(--text-bright);
    letter-spacing: -0.01em;
    margin-bottom: 0.5rem;
}

.woocommerce .woocommerce-result-count {
    color: var(--text-dim);
    font-size: 0.85rem;
    letter-spacing: 0.05em;
}

.woocommerce .woocommerce-ordering select,
.woocommerce select.orderby {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-bright);
    border: 1px solid var(--border-light);
    padding: 0.6rem 0.9rem;
    font-family: var(--font-body);
    border-radius: 2px;
}

/* --- Rows list --- */
/* Simple, even 2-column grid. The asymmetric column-span experiment (each
   card a different width via a repeating 6-position pattern) is dropped —
   combined with a fixed image aspect-ratio, differing widths produced
   differing heights per card, which read as broken/inconsistent rather
   than intentionally art-directed. A uniform grid with consistent card
   proportions is the reliable baseline; revisit asymmetry later as a
   deliberate, fully-tested design pass rather than an incremental patch. */

/* 3-column staggered editorial grid. All cards are the same width and use
   the same image aspect ratio (so nothing looks broken), but the three
   columns are offset vertically from each other — column 1 sits high,
   column 2 drops down, column 3 sits between — so the layout reads as a
   deliberate asymmetric stagger rather than rigid aligned rows. The offset
   is applied to the FIRST card of each column (the top of the column) via
   the :nth-child(3n) pattern; every card below inherits the shift because
   grid auto-flow stacks them in column order. */
ul.products.jynn-editorial-showcase,
.woocommerce ul.products.jynn-editorial-showcase,
.woocommerce[class*="columns-"] ul.products.jynn-editorial-showcase {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    column-gap: 3rem;
    row-gap: 6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* WooCommerce adds clearfix ::before/::after pseudo-elements to ul.products
   (a leftover from its float layout). On a CSS grid those become grid ITEMS
   — ::before takes row 1 / column 1 and shoves every product one cell right,
   leaving column 1 empty and scrambling the staircase. Remove them so the
   grid is correct on EVERY category archive (not just one). */
ul.products.jynn-editorial-showcase::before,
ul.products.jynn-editorial-showcase::after,
.woocommerce ul.products.jynn-editorial-showcase::before,
.woocommerce ul.products.jynn-editorial-showcase::after {
    content: none !important;
    display: none !important;
}

/* Neutralise WooCommerce's legacy float layout on our grid items. WC's
   woocommerce-layout.css floats each product (float:left; width:22.05%),
   and an inline rule forces width:100% — both would fight the grid. Match
   its highest selector specificity + !important so the grid always wins. */
.woocommerce ul.products.jynn-editorial-showcase li.product,
.woocommerce[class*="columns-"] ul.products.jynn-editorial-showcase li.product,
.jynn-editorial-showcase .showcase-card {
    float: none !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Staircase: each column steps progressively lower left-to-right.
   Column 1 = no offset (highest), column 2 drops, column 3 drops furthest —
   a monotonic descent so the top edge reads as a staircase, matching the
   reference. (Not a zigzag: the offset must increase across columns, not
   go down then back up.) !important to beat WC's margin reset above. */
.woocommerce ul.products.jynn-editorial-showcase li.product:nth-child(3n+2),
.jynn-editorial-showcase .showcase-card:nth-child(3n+2) {
    margin-top: 8rem !important;
}

.woocommerce ul.products.jynn-editorial-showcase li.product:nth-child(3n+3),
.jynn-editorial-showcase .showcase-card:nth-child(3n+3) {
    margin-top: 16rem !important;
}

/* Tablet: collapse to 2 columns, lighter stagger. */
@media (max-width: 1024px) {

    ul.products.jynn-editorial-showcase,
    .woocommerce ul.products.jynn-editorial-showcase,
    .woocommerce[class*="columns-"] ul.products.jynn-editorial-showcase {
        grid-template-columns: repeat(2, 1fr) !important;
        column-gap: 2.5rem;
        row-gap: 4rem;
    }

    .woocommerce ul.products.jynn-editorial-showcase li.product:nth-child(3n+2),
    .jynn-editorial-showcase .showcase-card:nth-child(3n+2),
    .woocommerce ul.products.jynn-editorial-showcase li.product:nth-child(3n+3),
    .jynn-editorial-showcase .showcase-card:nth-child(3n+3) {
        margin-top: 0 !important;
    }

    /* Stagger the right-hand column of the 2-col layout instead. */
    .woocommerce ul.products.jynn-editorial-showcase li.product:nth-child(2n),
    .jynn-editorial-showcase .showcase-card:nth-child(2n) {
        margin-top: 5rem;
    }
}

/* Mobile: single column, no stagger. !important so it beats the tablet
   `repeat(2,1fr) !important` rule above (which otherwise wins on phones and
   leaves two cramped columns). Applies to every category archive. */
@media (max-width: 640px) {

    ul.products.jynn-editorial-showcase,
    .woocommerce ul.products.jynn-editorial-showcase,
    .woocommerce[class*="columns-"] ul.products.jynn-editorial-showcase {
        grid-template-columns: 1fr !important;
        row-gap: 3.5rem;
    }

    .woocommerce ul.products.jynn-editorial-showcase li.product,
    .jynn-editorial-showcase .showcase-card,
    .woocommerce ul.products.jynn-editorial-showcase li.product:nth-child(2n),
    .jynn-editorial-showcase .showcase-card:nth-child(2n) {
        margin-top: 0 !important;
    }
}

/* Each product is a self-contained card: numeral, then image, then copy —
   stacked. Spacing between them is controlled by the numeral's margin-bottom
   and the meta's margin-top (not a flex gap), so each interval is tuned. */
.woocommerce ul.products.jynn-editorial-showcase li.product,
.jynn-editorial-showcase .showcase-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    float: none;
    width: auto;
    margin: 0;
    clear: none;
    will-change: transform, opacity;
}

/* --- Media (one consistent aspect ratio for every card) --- */
.jynn-editorial-showcase .card-media-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    display: block;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-light);
    box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.9);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.jynn-editorial-showcase .card-media-wrapper .product-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.jynn-editorial-showcase .card-media-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top,
            rgba(3, 4, 7, 0.4) 0%,
            rgba(3, 4, 7, 0.05) 30%,
            rgba(3, 4, 7, 0) 55%);
}

.jynn-editorial-showcase .card-sale-flash {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    z-index: 2;
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bg-void);
    background: var(--accent-glow);
    padding: 0.3rem 0.7rem;
}

/* --- Meta --- */
/* Copy column. Uniform gap removed in favour of deliberate grouping:
   the tier label sits tight above the name (one unit), the description
   and price row get their own breathing room via targeted margins below. */
.jynn-editorial-showcase .card-meta {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 100%;
    margin-top: 1.5rem;
}

/* Index numeral — small serif marker sitting ABOVE the image, matching the
   reference editorial layout ("01", "02" labels above each card). It's a
   direct child of the card now (before the media wrapper in markup), so it
   sits in normal flow at the top of the card. */
.jynn-editorial-showcase .card-num {
    display: block;
    font-family: var(--font-display);
    font-variant-numeric: lining-nums !important;
    font-size: 1.05rem;
    font-weight: 500;
    font-style: italic;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--accent-glow);
    margin-bottom: 1rem;
    padding-left: 0.15rem;
}

/* Tier label — first thing in the copy now, tight to the name below it. */
.jynn-editorial-showcase .card-wish-tier {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
    font-family: monospace;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-glow);
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.jynn-editorial-showcase .card-wish-tier::before {
    content: "";
    width: 34px;
    height: 1px;
    background: var(--accent-glow);
    opacity: 0.75;
    flex: none;
}

.jynn-editorial-showcase .card-name {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--text-bright);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0;
    transition: color var(--transition-fast);
}

.jynn-editorial-showcase .card-name a {
    color: inherit;
    text-decoration: none;
}

.jynn-editorial-showcase .card-desc {
    font-size: 1.02rem;
    color: var(--text-dim);
    line-height: 1.7;
    max-width: 100%;
    margin: 1rem 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jynn-editorial-showcase .card-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-light);
}

.jynn-editorial-showcase .card-price {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-bright);
    letter-spacing: -0.01em;
}

.jynn-editorial-showcase .btn-acquire {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-bright);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-glow);
    padding-bottom: 5px;
    transition: color var(--transition-fast), border-color var(--transition-fast), gap var(--transition-fast);
}

.jynn-editorial-showcase .btn-acquire::after {
    content: "\2192";
    font-size: 1.1rem;
    transition: transform var(--transition-fast);
}

.jynn-editorial-showcase .btn-acquire:hover {
    color: #FFF;
    border-color: #FFF;
    gap: 0.9rem;
}

.jynn-editorial-showcase .btn-acquire:hover::after {
    transform: translateX(5px);
}

/* --- Hover --- */
.jynn-editorial-showcase .showcase-card:hover .product-img {
    transform: scale(1.04);
}

.jynn-editorial-showcase .showcase-card:hover .card-media-wrapper {
    border-color: rgba(212, 175, 55, 0.45);
    box-shadow: 0 42px 80px -30px rgba(0, 0, 0, 0.95);
}

.jynn-editorial-showcase .showcase-card:hover .card-name {
    color: #FFF;
}

@media (prefers-reduced-motion: reduce) {
    .jynn-editorial-showcase .product-img {
        transition: none;
    }

    .jynn-editorial-showcase .showcase-card:hover .product-img {
        transform: none;
    }
}

/* --- Editorial section header — SHARED across every category archive -------
   The category template (taxonomy-product_cat.php) is common, but each
   category's skin (pendants.css, bracelets.css, …) historically defined its
   own .editorial-header, so only pendants got the right-aligned, tight
   treatment. These rules promote that reference treatment to ALL categories.
   Scoped to .jynn-category (the archive <main> wrapper) so specificity beats
   the per-category bare .editorial-header rules regardless of load order. */
.jynn-category .editorial-header {
    margin-bottom: 3rem;
    align-items: flex-end;
    text-align: right;
}

.jynn-category .editorial-header .header-main {
    align-items: flex-end;
}

@media (max-width: 640px) {

    /* Compact cards on phones for every category: drop descriptions and
       shrink the section title (the pendants mobile treatment, made common). */
    .jynn-editorial-showcase .card-desc {
        display: none;
    }

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

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

/* --- Infinite scroll (shared across all category archives) --- */
/* The sentinel is an invisible tripwire near the end of the grid; when it
   scrolls into view archive-infinite.js fetches the next page of this
   category's products and appends them to the grid above. */
.jynn-infinite {
    width: 100%;
    grid-column: 1 / -1;
    /* harmless outside a grid; spans full row if inside one */
}

.jynn-infinite__sentinel {
    width: 100%;
    height: 1px;
}

.jynn-infinite__status {
    min-height: 1.4em;
    margin-top: 3rem;
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--text-dim);
}

/* Cards appended by AJAX fade+rise in (existing cards are revealed by the
   scene JS; appended ones aren't tracked by it, so give them their own
   entrance here). */
.jynn-editorial-showcase .showcase-card.jynn-card-in {
    animation: jynn-card-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes jynn-card-in {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jynn-editorial-showcase .showcase-card.jynn-card-in {
        animation: none;
    }
}


/* --- Baseline hero + grid for categories WITHOUT a ported WebGL scene ------
   Themed categories (pendants = .desert-hero, bracelets = .forest-hero) get
   their full-viewport hero + section spacing from their per-theme CSS, which
   is only enqueued for those slugs. Categories without a scene (chains,
   brooches, and any future one) use the shared .jynn-cat-hero /
   .jynn-cat-grid-section classes instead — styled here, in the stylesheet
   that loads on EVERY category archive — so they render the exact same full
   editorial template over the global dark background. */
.jynn-category .jynn-cat-hero {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: flex-end;
    padding: 0 0 14vh;
    position: relative;
}

/* The page-content scrim (previously duplicated here as
   `.jynn-category::before` / `.jynn-category.is-daytime::before`, both
   `position: fixed`) has been removed from this file. It was a duplicate
   of the same selectors in pendants-v2.css — which is enqueued on every
   category archive alongside this stylesheet — and being
   `position: fixed` on the whole `<main class="jynn-category">`, it
   stayed pinned to the viewport on scroll and painted over the footer.
   The surviving version (pendants-v2.css, same `.jynn-category` selector
   but `position: absolute` with a flat colour instead of a
   height-dependent gradient) is the only one needed now that every
   category shares the desert scene; see the comment there. */
.jynn-category .jynn-cat-hero .hero-content {
    position: relative;
    z-index: 2;
}

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

.jynn-category .jynn-cat-grid-section {
    padding: 12rem 0 14rem;
    position: relative;
    z-index: 10;
    /* Deepens the background further down the section so product copy stays
       legible — same gradient the themed grid sections use. */
    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%);
}

@media (max-width: 640px) {
    .jynn-category .jynn-cat-grid-section {
        padding: 7rem 0 8rem;
    }
}

/* =========================================
   SHOP ARCHIVE — galaxy background, toolbar header,
   fully-styled sort dropdown, symmetric grid.
   Scoped to body.woocommerce-shop so the product
   CATEGORY archives keep their editorial staircase.
   ========================================= */

/* Sit above the fixed galaxy canvas, and clear the fixed navbar. The nav is
   ~94px tall (transparent, site-wide); 10rem top leaves comfortable breathing
   room, matching the clearance the content templates use. */
.jynn-shop {
    position: relative;
    z-index: 1;
    padding: 10rem 0 6rem;
}

/* Centered editorial masthead: gold eyebrow + large serif title. */
.jynn-shop__masthead {
    text-align: center;
    margin-bottom: 3.5rem;
}

.jynn-shop__eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.72rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--accent-glow);
    margin-bottom: 1.25rem;
}

.jynn-shop__title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(3rem, 7vw, 5.5rem);
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: var(--text-bright);
    margin: 0;
}

/* Controls bar: result count (left) + sort (right), aligned to the grid,
   with a hairline beneath separating identity from the products. */
.jynn-shop__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-bottom: 1.25rem;
    margin-bottom: 3rem;
    border-bottom: 1px solid var(--border-light, rgba(255, 255, 255, 0.1));
}

.jynn-shop__controls .woocommerce-result-count {
    float: none;
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-dim);
}

/* --- Fully custom sort dropdown --- */
.jynn-shop__sort .woocommerce-ordering {
    float: none;
    margin: 0;
}

.jynn-shop__sort select.orderby,
.woocommerce .jynn-shop__sort select.orderby {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    max-width: none;
    background-color: rgba(255, 255, 255, 0.03);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23d4af37' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 0.7rem;
    color: var(--text-bright);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 2px;
    padding: 0.75rem 2.75rem 0.75rem 1.1rem;
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.25s ease, background-color 0.25s ease;
}

.jynn-shop__sort select.orderby:hover,
.jynn-shop__sort select.orderby:focus {
    border-color: var(--accent-glow, #d4af37);
    background-color: rgba(212, 175, 55, 0.08);
    outline: none;
}

/* Native option list can't inherit theme colors reliably — force dark. */
.jynn-shop__sort select.orderby option {
    background: #0b0b0f;
    color: #ffffff;
}

.jynn-shop__notices:empty {
    margin: 0;
}

/* Symmetric aligned grid on the SHOP only: neutralise the per-column
   staircase offsets defined above (:nth-child margin-top). Higher
   specificity + !important so it always beats those stagger rules. */
body.woocommerce-shop ul.products.jynn-editorial-showcase li.product:nth-child(3n+2),
body.woocommerce-shop ul.products.jynn-editorial-showcase li.product:nth-child(3n+3),
body.woocommerce-shop ul.products.jynn-editorial-showcase li.product:nth-child(2n),
body.woocommerce-shop .jynn-editorial-showcase .showcase-card:nth-child(3n+2),
body.woocommerce-shop .jynn-editorial-showcase .showcase-card:nth-child(3n+3),
body.woocommerce-shop .jynn-editorial-showcase .showcase-card:nth-child(2n) {
    margin-top: 0 !important;
}

/* --- Shop responsive --- */
@media (max-width: 1024px) {
    .jynn-shop {
        padding: 9rem 0 5rem;
    }
}

@media (max-width: 768px) {
    .jynn-shop {
        padding: 8rem 0 4rem;
    }

    /* Compact masthead + stack the controls (count over full-width sort). */
    .jynn-shop__masthead {
        margin-bottom: 2.5rem;
    }

    .jynn-shop__controls {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        margin-bottom: 2rem;
        padding-bottom: 1.25rem;
    }

    .jynn-shop__sort {
        width: 100%;
    }

    .jynn-shop__sort .woocommerce-ordering,
    .jynn-shop__sort select.orderby,
    .woocommerce .jynn-shop__sort select.orderby {
        width: 100%;
    }
}


/* =========================================
   Pagination — quiet editorial numerals.
   No pills, no fills, no boxes: tracked bronze
   figures with a single hairline of gold marking
   the current page. Meant to recede; it is only a
   fallback beneath infinite scroll.
   ========================================= */
.woocommerce-pagination {
    margin-top: 4rem;
    text-align: center;
}

.woocommerce-pagination ul,
.woocommerce-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    border: none !important;
}

.woocommerce-pagination ul li {
    margin: 0;
    border: none !important;
    overflow: visible;
}

/* Numerals: legible tracked figures with a real 44px tap target.
   The `.woocommerce nav` prefix + !important defeat WooCommerce's default
   pale-grey pagination box (which otherwise wins on specificity + order). */
.woocommerce nav.woocommerce-pagination ul li .page-numbers,
.woocommerce-pagination ul li .page-numbers {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 0.5rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    line-height: 1;
    color: var(--text-dim);
    background: none !important;
    border: none !important;
    border-radius: 2px !important;
    text-decoration: none;
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover,
.woocommerce-pagination ul li a.page-numbers:hover {
    color: var(--text-bright);
    background: rgba(255, 255, 255, 0.03) !important;
}

/* Current page: brightened figure + a clear gold underline. */
.woocommerce nav.woocommerce-pagination ul li span.page-numbers.current,
.woocommerce-pagination ul li span.page-numbers.current {
    color: var(--text-bright) !important;
    background: none !important;
}
.woocommerce nav.woocommerce-pagination ul li span.page-numbers.current::after,
.woocommerce-pagination ul li span.page-numbers.current::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 7px;
    width: 20px;
    height: 2px;
    transform: translateX(-50%);
    background: var(--accent-glow) !important;
}

/* Prev / Next: clearly visible hairline-bordered arrow controls. */
.woocommerce nav.woocommerce-pagination ul li .prev.page-numbers,
.woocommerce nav.woocommerce-pagination ul li .next.page-numbers,
.woocommerce-pagination ul li .prev.page-numbers,
.woocommerce-pagination ul li .next.page-numbers {
    min-width: 48px;
    height: 44px;
    font-size: 1.1rem;
    letter-spacing: 0;
    color: var(--text-bright);
    border: 1px solid var(--border-light) !important;
    border-radius: 2px !important;
}
.woocommerce nav.woocommerce-pagination ul li .prev.page-numbers:hover,
.woocommerce nav.woocommerce-pagination ul li .next.page-numbers:hover,
.woocommerce-pagination ul li .prev.page-numbers:hover,
.woocommerce-pagination ul li .next.page-numbers:hover {
    color: var(--accent-glow);
    border-color: var(--accent-glow) !important;
    background: rgba(212, 175, 55, 0.06) !important;
}

/* Ellipsis */
.woocommerce nav.woocommerce-pagination ul li .page-numbers.dots,
.woocommerce-pagination ul li .page-numbers.dots {
    border: none !important;
    background: none !important;
    color: var(--text-dim);
    min-width: 20px;
}