/*! Al Ayn — homepage 2026 refresh (registry key: refresh26).
 *  Extracted from views/home-refresh26.php so it is cached once instead of
 *  re-sent inline on every homepage hit — the homepage is the most requested
 *  page on the site and 88% of its shoppers are on mobile data.
 *  Scoped to .hp26-* ; nothing here leaks onto another template.
 */
/* Scoped to this homepage only. Plain CSS, no Tailwind utilities — the server
   cannot rebuild the bundle, so unbuilt utility classes would be inert. */
/* MOBILE FIRST. 88% of this shop's customers with a known device are on a
   phone (74 vs 10 in customer_analytics), so the small screen is the design
   target and the desktop layout is the enhancement.

   The opening therefore has one job on a phone: say what this is, give one
   action, and get out of the way so real product is on screen. It is a compact
   band — no mosaic, no second CTA — which puts the first product card inside
   the first viewport on a 390x844 handset. The mosaic returns at >=62rem,
   where there is width to spend on it. */
.hp26-open {
    background: var(--brand-charcoal, #1F2937);
    color: #fff;
    /* The header is position:fixed and body reserves 94px for it, which is a
       few pixels short of the announcement bar + header on a phone — enough to
       clip the eyebrow. The extra top padding absorbs that instead of moving
       the shared layout. */
    padding-block: 2.25rem 1.5rem;
}
@media (min-width: 48rem) { .hp26-open { padding-block: 2.25rem; } }
.hp26-open__inner {
    display: grid;
    gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
    align-items: center;
    grid-template-columns: 1fr;
}
@media (min-width: 62rem) {
    .hp26-open__inner { align-items: center; }
    .hp26-open { padding-block: clamp(2rem, 1rem + 2.4vw, 3.25rem); }
}
@media (min-width: 62rem) {
    .hp26-open__inner { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
}
.hp26-open__eyebrow {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brand-gold, #D4A537);
}
.hp26-open__title {
    margin: 0 0 0.6rem;
    font-size: clamp(1.55rem, 1.15rem + 2vw, 3.4rem);
    line-height: 1.14;
    color: #fff;
    text-wrap: balance;
}
/* The lede is the first thing to go on a phone: the headline already says it,
   and every line here is a line of product the shopper cannot see. */
.hp26-open__lede { display: none; }
@media (min-width: 48rem) {
    .hp26-open__lede {
        display: block;
        margin: 0 0 1.5rem;
        max-width: 42ch;
        font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.0625rem);
        line-height: 1.6;
        color: #E5E7EB;
    }
}
.hp26-open__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hp26-open__actions .btn-primary { flex: 1 1 auto; justify-content: center; }
/* Secondary action is desktop-only — on a phone it competes with the primary
   for the same thumb and pushes the grid down another 60px. */
.hp26-open__secondary { display: none; }
@media (min-width: 48rem) {
    .hp26-open__actions .btn-primary { flex: 0 0 auto; }
    .hp26-open__secondary { display: inline-flex; }
}
.hp26-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
    color: #D1D5DB;
}
.hp26-facts li { display: flex; align-items: center; gap: 0.4rem; }
.hp26-facts svg { color: var(--brand-gold, #D4A537); flex: 0 0 auto; }

/* Mosaic: three portraits at the ratio the photography actually is. The lead
   image spans two rows so the block has a focal point without cropping. */
/* Desktop enhancement only. On a phone these three images cost ~430px of the
   first screen and say nothing the product grid below does not say better. */
.hp26-mosaic { display: none; }
@media (min-width: 62rem) {
    .hp26-mosaic {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }
}
@media (min-width: 62rem) {
    /* Fixed height, explicit rows. max-height alone does NOT clip a grid whose
       tracks are sized by content — the mosaic simply overflowed the dark
       section and bled across the category rail below it. Two equal rows with
       the lead spanning both keeps the first product grid within reach on a
       900px-tall laptop, and object-position sits high so a portrait crops at
       the hem rather than the face. */
    .hp26-mosaic {
        height: 34rem;
        grid-template-rows: repeat(2, minmax(0, 1fr));
    }
    .hp26-mosaic__item { min-height: 0; }
    .hp26-mosaic__item img,
    .hp26-mosaic__item:first-child img {
        aspect-ratio: auto;
        height: 100%;
        object-position: 50% 20%;
    }
}
.hp26-mosaic__item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 12px;
    background: #111827;
    text-decoration: none;
    color: inherit;
}
.hp26-mosaic__item:first-child { grid-row: span 2; }
.hp26-mosaic__item img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    transition: transform .45s cubic-bezier(.16,.84,.44,1);
}
.hp26-mosaic__item:first-child img { aspect-ratio: 3 / 4.35; }
@media (hover: hover) { .hp26-mosaic__item:hover img { transform: scale(1.04); } }
.hp26-mosaic__cap {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.75rem 0.75rem 0.6rem;
    background: linear-gradient(to top, rgba(9,12,20,.86), rgba(9,12,20,0));
    font-size: 0.75rem;
    color: #fff;
}
.hp26-mosaic__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp26-mosaic__price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 30rem) { .hp26-mosaic__cap { font-size: 0.6875rem; } }


/* ======================================================================
   PRODUCT CARD — the page is built around this, so it carries the design.
   Mobile first: two up at 390px, three at 640, four at 1024.

   The catalogue is cut-out product photography on white. A white card on a
   white page gives it nothing to sit on, which is why the live grid reads
   flat. Here the image sits on a warm gradient bed and the card floats on a
   soft shadow instead of a hairline border.
   ====================================================================== */
.hp26-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}
@media (min-width: 40rem) { .hp26-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 64rem) { .hp26-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } }

/* The .hp26-c card rules moved to assets/css/storefront-consistency-2026.css
   on 2026-08-26 when the card was promoted to every storefront page. Keeping a
   second copy here would be worse than duplication: this file loads LATER (via
   $additionalHead) so it would silently win every tie and swallow the
   accessibility corrections applied over there. The grid and the page furniture
   below stay — they are homepage-only. */
/* Category rail — one pill treatment, depth by indent, legible overflow. */
.hp26-rail { position: relative; }
.hp26-rail::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: 3rem;
    pointer-events: none;
    background: linear-gradient(to left, #fff, rgba(255,255,255,0));
}
.hp26-rail__track {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-block: 0.25rem;
    scrollbar-width: none;
}
.hp26-rail__track::-webkit-scrollbar { display: none; }
.hp26-pill {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding-inline: 1rem;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    background: #fff;
    color: var(--brand-charcoal, #1F2937);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.hp26-pill:hover { border-color: var(--brand-gold, #D4A537); }
.hp26-pill--all { background: var(--brand-charcoal, #1F2937); border-color: var(--brand-charcoal, #1F2937); color: #fff; }
.hp26-pill--child { font-weight: 500; color: #4B5563; }
.hp26-pill__n {
    font-size: 0.6875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #6B7280;
}
.hp26-pill--all .hp26-pill__n { color: #E5E7EB; }

/* Section headers — one component, three uses. */
.hp26-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    margin-bottom: 1.25rem;
}
.hp26-head__eyebrow {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8A6B24;
}
.hp26-head__title { margin: 0; }
.hp26-head__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 44px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #8A6B24;
    text-decoration: none;
    white-space: nowrap;
}
.hp26-head__link:hover { text-decoration: underline; }

/* Trust band — stated once, at the end. */
.hp26-trust { border-top: 1px solid #E5E7EB; background: #fff; }
.hp26-trust__grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    padding-block: 2rem;
}
.hp26-trust__item { display: flex; gap: 0.75rem; align-items: flex-start; }
.hp26-trust__item svg { color: #8A6B24; flex: 0 0 auto; margin-top: 2px; }
.hp26-trust__t { display: block; font-weight: 600; color: var(--brand-charcoal, #1F2937); font-size: 0.9375rem; }
.hp26-trust__d { display: block; color: #4B5563; font-size: 0.8125rem; }

@media (prefers-reduced-motion: reduce) {
    .hp26-mosaic__item img { transition: none; }
}