/*
 * HD Shop — Storefront Stylesheet
 *
 * Mobile-first. All breakpoints written as `min-width` queries.
 * HD design system colors only. NO #FFFFFF anywhere.
 *
 * Palette:
 *   --hd-parchment   #EDE5D8   background
 *   --hd-peacock     #1A6B6B   accents / buttons / links
 *   --hd-gold        #C9A96E   highlights / dividers / hover
 *   --hd-warm-taupe  #D4C4B0   secondary surfaces
 *   --hd-charcoal    #2C2C2C   body text
 *
 * Typography:
 *   Body:     'Cormorant Garamond', serif
 *   UI/Heads: 'Montserrat', sans-serif (uppercase + wide letter-spacing for nav/buttons)
 *
 * Scoping: every rule is namespaced to `.hd-shop` so we never collide
 * with the theme or other modules. Safe to ship alongside legacy WC
 * styles during the staging soak.
 */

/* ═══════════════════════════════════════════════════
   1. ROOT VARIABLES (scoped — fall back if globals missing)
   ═══════════════════════════════════════════════════ */

.hd-shop {
    --hd-parchment:    #EDE5D8;
    --hd-peacock:      #1A6B6B;
    --hd-peacock-dark: #145454;
    --hd-gold:         #C9A96E;
    --hd-warm-taupe:   #D4C4B0;
    --hd-charcoal:     #2C2C2C;
    --hd-muted:        #6B6258;

    --hd-card-shadow:        0 1px 2px rgba(44, 44, 44, 0.06);
    --hd-card-shadow-hover:  0 6px 18px rgba(44, 44, 44, 0.12);

    --hd-grid-gap-mobile:    18px;
    --hd-grid-gap-desktop:   28px;

    --hd-radius-card:    2px;
    --hd-radius-control: 2px;

    --hd-font-body: 'Cormorant Garamond', 'Garamond', Georgia, serif;
    --hd-font-ui:   'Montserrat', 'Helvetica Neue', Arial, sans-serif;

    background: var(--hd-parchment);
    color: var(--hd-charcoal);
    font-family: var(--hd-font-body);
    font-size: 17px;
    line-height: 1.5;
    padding: 28px 16px 48px;
    max-width: 1664px; /* +30% from 1280 — tile size bump per Bela 2026-05-22 */
    margin: 0 auto;
    box-sizing: border-box;
}

.hd-shop * { box-sizing: border-box; }

.hd-shop a {
    color: var(--hd-peacock);
    text-decoration: none;
    transition: color 0.18s ease;
}
.hd-shop a:hover,
.hd-shop a:focus { color: var(--hd-gold); }

.hd-shop-visually-hidden {
    position: absolute !important;
    height: 1px; width: 1px;
    overflow: hidden;
    clip: rect(1px,1px,1px,1px);
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════
   2. HERO
   ═══════════════════════════════════════════════════ */

/* GeneratePress featured-image page header: REMOVED on the shop.
   The theme renders the shop page's square (2133px) Featured Image as a
   full-width ~1200px-tall page header above the grid — oversized, redundant
   with the hero strip below, and a ~1.4MB load. Hidden here in the redesign
   so GeneratePress settings never need touching. Scoped to the shop via the
   hd-shop-active body class. Reversible: delete this rule. */
.hd-shop-active .featured-image.page-header-image {
    display: none;
}

.hd-shop-hero {
    position: relative;
    margin: 0 -16px 32px;
    overflow: hidden;
    background: var(--hd-warm-taupe);
}
.hd-shop-hero-image {
    display: block;
    width: 100%;
    height: auto;
    /* X+70B.2 (2026-05-29): shrunk another 35% per Bela.
       Was 273px (mobile/tablet base), now 178px. */
    max-height: 178px;
    object-fit: cover;
    object-position: center;
}
.hd-shop-hero-text {
    padding: 22px 18px 24px;
    text-align: center;
}
.hd-shop-hero-headline {
    font-family: var(--hd-font-ui);
    font-weight: 400;
    font-size: 22px;
    letter-spacing: 0.18em;
    text-transform: none;
    color: var(--hd-peacock);
    margin: 0 0 6px;
}
.hd-shop-hero-subline {
    font-family: var(--hd-font-body);
    font-style: italic;
    font-size: 18px;
    color: var(--hd-charcoal);
    margin: 0;
}

/* ═══════════════════════════════════════════════════
   3. TOOLBAR — X+36 redesign
   Minimal layout: count top-left, pagination centered,
   search centered, price + sort pills centered below.
   No background bar, no peacock pills, no Apply button.
   ═══════════════════════════════════════════════════ */

.hd-shop-toolbar {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0 0 28px;
}

/* "88 RESULTS" small uppercase label, left-aligned. */
.hd-shop-toolbar-count {
    font-family: var(--hd-font-ui);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: none;
    color: var(--hd-charcoal);
    margin: 0 0 18px;
    padding: 0 2px;
}

/* Form sits centered, vertical stack: search, then filters. */
.hd-shop-toolbar-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 18px 0 0;
}

.hd-shop-toolbar-search-row {
    width: 100%;
    max-width: 420px;
}
.hd-shop-toolbar-search-row input[type="search"] {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(201, 169, 110, 0.65);
    background: transparent;
    color: var(--hd-charcoal);
    padding: 9px 14px;
    font-family: var(--hd-font-body);
    font-style: italic;
    font-size: 16px;
    border-radius: 3px;
    outline: none;
    text-align: center;
    transition: border-color 0.18s ease;
}
.hd-shop-toolbar-search-row input[type="search"]::placeholder {
    color: var(--hd-muted);
    font-style: italic;
}
.hd-shop-toolbar-search-row input[type="search"]:focus {
    border-color: var(--hd-gold);
}

.hd-shop-toolbar-filters-row {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

/* Pill-styled selects (Price + Sort) with gold borders, no chrome. */
.hd-shop-pill {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(201, 169, 110, 0.65);
    background: transparent;
    color: var(--hd-charcoal);
    font-family: var(--hd-font-body);
    font-size: 14px;
    padding: 8px 32px 8px 14px;
    border-radius: 3px;
    cursor: pointer;
    min-width: 0;
    /* Gold caret arrow rendered via two linear-gradient triangles. */
    background-image: linear-gradient(45deg, transparent 50%, var(--hd-gold) 50%), linear-gradient(135deg, var(--hd-gold) 50%, transparent 50%);
    background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    transition: border-color 0.18s ease;
}
.hd-shop-pill:hover,
.hd-shop-pill:focus {
    border-color: var(--hd-gold);
    outline: none;
}

/* ═══════════════════════════════════════════════════
   4. GRID
   ═══════════════════════════════════════════════════ */

.hd-shop-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--hd-grid-gap-mobile);
    margin: 0 0 28px;
    position: relative;
}

.hd-shop-grid.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(237, 229, 216, 0.66);
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════
   5. PRODUCT CARD
   ═══════════════════════════════════════════════════ */

/* X+36 redesign: no card box. The arrangement floats on the
   parchment background; only the image carries the shadow. */
.hd-shop-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
    transition: transform 0.18s ease;
}
.hd-shop-card:hover {
    transform: translateY(-2px);
}

.hd-shop-card-link {
    display: block;
    color: inherit;
}
.hd-shop-card-link:hover,
.hd-shop-card-link:focus {
    color: inherit;
}

.hd-shop-card-image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--hd-warm-taupe);
    border-radius: 3px;
    /* X+36 redesign: shadow lives on the image (floating effect),
       not on the card container. */
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18), 0 4px 10px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.25s ease;
}
.hd-shop-card:hover .hd-shop-card-image-wrap {
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.24), 0 6px 14px rgba(0, 0, 0, 0.10);
}
.hd-shop-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.hd-shop-card:hover .hd-shop-card-image {
    transform: scale(1.03);
}

/* X+36 redesign: text floats on parchment below the image, no box.
   Generous breathing room between image and label so the arrangement
   feels presented rather than packaged. */
.hd-shop-card-body {
    padding: 22px 4px 0;
    text-align: center;
}
.hd-shop-card-title {
    font-family: var(--hd-font-body);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--hd-gold);
    margin: 0 0 6px;
    line-height: 1.25;
}
.hd-shop-card-price {
    /* X+70B.7 (2026-05-29):
       - Cormorant Garamond kept (luxury serif aligned with HD brand)
       - lining + tabular numerals = all digits same full-cap height on
         baseline (kills the "up-and-down-and-between" of old-style figures)
       - font-feature-settings is a fallback for older browsers that don't
         understand font-variant-numeric
       - +3px (19px) and 500 weight give the price visual presence on cards */
    font-family: var(--hd-font-body), Georgia, "Times New Roman", serif;
    font-style: normal;
    font-weight: 500;
    font-size: 19px;
    color: var(--hd-charcoal);
    letter-spacing: 0.04em;
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1, "tnum" 1;
    margin-top: 4px;
}

/* ═══════════════════════════════════════════════════
   6. DELIVERY STRIP RIBBON
   ═══════════════════════════════════════════════════ */

/* X+36 redesign: semi-transparent gold for ALL variants so the
   arrangement underneath bleeds through (luxury feel, not a bar).
   Mixed-case label, lighter weight, tighter padding. */
.hd-shop-delivery-strip {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    background: rgba(201, 169, 110, 0.55);
    color: var(--hd-charcoal);
    font-family: var(--hd-font-ui);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: none;
    padding: 6px 10px;
    line-height: 1.2;
}
/* All lead variants share the same gold tint — colour does not encode
   urgency, the label text does. */
.hd-shop-delivery-strip--same_day,
.hd-shop-delivery-strip--next_day,
.hd-shop-delivery-strip--pre_order {
    background: rgba(201, 169, 110, 0.55);
    color: var(--hd-charcoal);
}

/* ─────────────────────────────────────────────────────
   Disable ribbon — discreet 35%-translucent gold tag at
   the top of the image when a product is unavailable for
   a Disable Dates window. Sits clear of the bottom
   delivery strip. Markup from hd-taxonomy.
   ───────────────────────────────────────────────────── */
.hd-disable-ribbon {
    position: absolute;
    top: 10px;
    left: 0;
    z-index: 3;
    background: rgba(201, 169, 110, 0.35);
    color: var(--hd-charcoal);
    font-family: var(--hd-font-ui);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    padding: 4px 12px 4px 10px;
    line-height: 1.2;
    border-radius: 0 999px 999px 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}

/* ═══════════════════════════════════════════════════
   7. EMPTY STATE
   ═══════════════════════════════════════════════════ */

.hd-shop-empty {
    text-align: center;
    padding: 48px 16px 64px;
    background: rgba(212, 196, 176, 0.32);
    border-top: 1px solid var(--hd-gold);
    border-bottom: 1px solid var(--hd-gold);
}
.hd-shop-empty-icon {
    display: inline-flex;
    color: var(--hd-peacock);
    margin: 0 0 14px;
}
.hd-shop-empty-headline {
    font-family: var(--hd-font-ui);
    font-size: 17px;
    letter-spacing: 0.16em;
    text-transform: none;
    color: var(--hd-charcoal);
    margin: 0 0 10px;
}
.hd-shop-empty-subline {
    font-family: var(--hd-font-body);
    font-style: italic;
    color: var(--hd-muted);
    font-size: 17px;
    margin: 0 0 22px;
}
.hd-shop-empty-reset {
    display: inline-block;
    font-family: var(--hd-font-ui);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: none;
    padding: 10px 22px;
    border: 1px solid var(--hd-peacock);
    color: var(--hd-peacock);
    border-radius: var(--hd-radius-control);
    transition: background 0.18s ease, color 0.18s ease;
}
.hd-shop-empty-reset:hover,
.hd-shop-empty-reset:focus {
    background: var(--hd-peacock);
    color: var(--hd-parchment);
}

/* ═══════════════════════════════════════════════════
   8. PAGINATION
   ═══════════════════════════════════════════════════ */

.hd-shop-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 0;
    font-family: var(--hd-font-ui);
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: none;
}
.hd-shop-pagination--top    { margin: 0 0 22px; border-bottom: 1px solid rgba(201, 169, 110, 0.4); }
.hd-shop-pagination--bottom { margin: 22px 0 0; border-top: 1px solid rgba(201, 169, 110, 0.4); }

.hd-shop-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid transparent;
    color: var(--hd-peacock);
    border-radius: var(--hd-radius-control);
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    cursor: pointer;
}
.hd-shop-page-link:hover,
.hd-shop-page-link:focus {
    background: var(--hd-warm-taupe);
    color: var(--hd-charcoal);
    border-color: var(--hd-gold);
}
.hd-shop-page-link--current {
    background: var(--hd-peacock);
    color: var(--hd-parchment);
    border-color: var(--hd-peacock);
    cursor: default;
}
.hd-shop-page-link--current:hover,
.hd-shop-page-link--current:focus {
    background: var(--hd-peacock);
    color: var(--hd-parchment);
}
.hd-shop-page-link--disabled {
    color: var(--hd-muted);
    cursor: not-allowed;
    pointer-events: none;
}
.hd-shop-page-ellipsis {
    padding: 0 4px;
    color: var(--hd-muted);
}
/* Uniform pagination item size — beats global `span{font-size:21px}` so
   the prev/current spans match the numbered <a> links (even + 14px). */
.hd-shop-pagination a,
.hd-shop-pagination span,
.hd-shop-page-link,
.hd-shop-page-ellipsis { font-size: 14px; line-height: 1; }

/* ═══════════════════════════════════════════════════
   9. RESPONSIVE
   ═══════════════════════════════════════════════════ */

/* Small tablet+ : 2 columns, toolbar starts laying out horizontally */
@media (min-width: 480px) {
    .hd-shop {
        padding: 32px 20px 56px;
    }
    .hd-shop-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .hd-shop-grid--cols-1 {
        grid-template-columns: 1fr;
    }
}

/* Tablet/landscape : 3 columns kick in for grid-cols-4 + grid-cols-3 */
@media (min-width: 768px) {
    .hd-shop {
        padding: 40px 24px 64px;
    }
    /* X+36 toolbar redesign — old class names retired. The new
       .hd-shop-toolbar-form drives its own layout (vertical stack,
       centered) at every breakpoint, so no responsive override
       is needed here. */

    .hd-shop-grid {
        gap: var(--hd-grid-gap-desktop);
        grid-template-columns: repeat(3, 1fr);
    }
    .hd-shop-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
    .hd-shop-grid--cols-1 { grid-template-columns: 1fr; }

    .hd-shop-hero {
        margin: 0 0 36px;
    }
    .hd-shop-hero-text {
        padding: 28px 28px 30px;
    }
    .hd-shop-hero-headline {
        font-size: 26px;
    }
    .hd-shop-card-title {
        font-size: 13px;
    }
}

/* Desktop : 4-col grid by default (X+70B). Per-tenant override via .--cols-N modifier. */
@media (min-width: 1024px) {
    .hd-shop-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .hd-shop-grid--cols-6 { grid-template-columns: repeat(6, 1fr); }
    .hd-shop-grid--cols-5 { grid-template-columns: repeat(5, 1fr); }
    .hd-shop-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
    .hd-shop-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
    .hd-shop-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
    .hd-shop-grid--cols-1 { grid-template-columns: 1fr; }

    .hd-shop-hero-image {
        /* X+70B.2 (2026-05-29): shrunk 35% per Bela. Was 480px, now 312px. */
        max-height: 312px;
    }
    .hd-shop-hero-headline {
        font-size: 32px;
    }
    .hd-shop-hero-subline {
        font-size: 20px;
    }
}

/* Large desktop : a touch more breathing room */
@media (min-width: 1280px) {
    .hd-shop {
        padding: 48px 32px 80px;
    }
    .hd-shop-card-body { padding: 16px 16px 22px; }
}

/* ═══════════════════════════════════════════════════
   10. REDUCED MOTION
   ═══════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .hd-shop-card,
    .hd-shop-card-image,
    .hd-shop-toolbar-submit,
    .hd-shop-toolbar-apply,
    .hd-shop-page-link,
    .hd-shop-empty-reset,
    .hd-shop a {
        transition: none;
    }
    .hd-shop-card:hover .hd-shop-card-image {
        transform: none;
    }
    .hd-shop-card:hover {
        transform: none;
    }
}

/* ═══════════════════════════════════════════════════
   11. FOCUS STATES (accessibility — keyboard nav clarity)
   ═══════════════════════════════════════════════════ */

.hd-shop a:focus-visible,
.hd-shop button:focus-visible,
.hd-shop input:focus-visible,
.hd-shop select:focus-visible {
    outline: 2px solid var(--hd-gold);
    outline-offset: 2px;
}