/* ==========================================================================
   layout.css — Header, Announcement Ticker, Nav Drawer, Footer & Structure
   Herba Sparsh Child Theme
   Author: Pratik Patil
   ========================================================================== */

/* ==========================================================================
   1. ANNOUNCEMENT TICKER BAR
   ========================================================================== */

.hst-announcement-bar {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    overflow: hidden;
    white-space: nowrap;
    padding: 8px 0;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--color-gold);
    position: relative;
    display: flex;
    align-items: center;
}

/* Pause control sits on the dark ribbon: light-on-dark instead of the dark chip used on light surfaces. */
.hst-announcement-bar .hst-marquee-pause {
    background: var(--color-on-primary-hover-bg);
}

.hst-announcement-bar .hst-marquee-pause:hover {
    background: var(--color-on-primary-border);
}

.hst-announcement-ticker {
    display: inline-flex;
    animation: hst-ticker-scroll 25s linear infinite;
}

.hst-announcement-ticker span {
    padding-right: 3rem;
}

@keyframes hst-ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.hst-announcement-bar:hover .hst-announcement-ticker,
.hst-announcement-ticker.is-paused {
    animation-play-state: paused;
}

/* ---- Marquee Pause/Play Control (used by the customer review carousel) ---- */
.hst-marquee-pause {
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.12);
    border: none;
    color: currentColor;
    cursor: pointer;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--space-md);
    position: relative;
    z-index: 1;
    transition: background-color 200ms ease;
}

.hst-marquee-pause:hover {
    background: rgba(0, 0, 0, 0.2);
}

.hst-marquee-pause:focus-visible {
    outline: none;
    box-shadow: var(--shadow-glow);
}

.hst-marquee-pause[aria-pressed="true"] .hst-marquee-pause__icon-pause,
.hst-marquee-pause[aria-pressed="false"] .hst-marquee-pause__icon-play {
    display: none;
}

/* ==========================================================================
   2. CUSTOM HEADER (EDGE-TO-EDGE 3-COLUMN LAYOUT)
   ========================================================================== */

/* Header background is the warm cream body tone (not the dark green
   --color-primary) — the logo's own dark green/ink/gold colors are meant to
   be preserved untouched, and only read clearly against a light surface. */
.site-header,
.site-header .col-full,
.site-header > div {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: var(--color-background) !important;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-md);
    border-bottom: 1px solid var(--color-border) !important;
}

/* ---- Kill Storefront's default vertical gap between the sticky header
   and the page content (visible as a white strip above the hero slider).
   storefront_before_content — where the hero slider hooks in — fires
   between </header> and #content, so the gap is Storefront's default
   spacing on #page/#content/.col-full, not padding inside the header. ---- */
#page,
.home #content,
.front-page #content,
.home #content > .col-full,
.front-page #content > .col-full,
.home .content-area,
.front-page .content-area {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.hst-hero-slider {
    margin-top: 0;
    display: block;
}

.hst-custom-header {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 var(--space-xl) !important;
    box-sizing: border-box !important;
}

/* ---- Center Column: Logo (Dead Center) ---- */
.hst-custom-header__center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 0% !important;
    text-align: center !important;
}

/* Wraps the logo in a real heading tag for SEO (h1 on the front page, see
   hst_header_logo_tag()) without taking any part in layout itself, the flex
   centering above still applies directly to whatever's inside it. */
.hst-header-logo-wrap {
    display: contents;
}

.hst-brand-logo-link {
    display: inline-flex;
    align-items: center;
}

/* Fixed, not calc(navbar-height - X): the logo's own size is a design
   decision, independent of how tall/short the header bar is. Tying it to
   navbar-height meant shrinking the bar also shrank the logo, which isn't
   what we want for a wide rectangular wordmark that doesn't need much
   vertical room in the first place. */
.hst-custom-header__center img,
.hst-custom-header__center .custom-logo {
    max-height: 84px;
    width: auto;
    object-fit: contain;
}

/* Mobile: the 96px navbar-height + 32px side padding is sized for a
   desktop 3-column header, but on a ~390px-wide phone it eats a large
   share of the viewport before any real content shows and leaves the
   icon groups looking squeezed in from the edges. Redefining the token
   itself (rather than just this one rule) so every calc() built on it —
   the logo's max-height, sticky-offset calcs in product.css — shrinks
   to match, instead of drifting out of sync with the shorter header.
   NOTE: this block must come AFTER the base ".hst-custom-header__center
   img" rule above — same specificity, so source order decides, and a
   mobile override placed before the base rule gets silently beaten by it. */
@media (max-width: 768px) {
    :root {
        --navbar-height: 48px;
    }

    .hst-custom-header {
        padding: 0 var(--space-md) !important;
    }

    .hst-custom-header__center img,
    .hst-custom-header__center .custom-logo {
        max-height: 42px;
    }
}

.hst-custom-header__inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: var(--navbar-height) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    position: relative !important;
}

/* ---- Left Column: Hamburger + Search (Extreme Left) ---- */
.hst-custom-header__left {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 1 1 0% !important;
    gap: var(--space-md) !important; /* matches __right's gap so both grouped pairs read as the same visual rhythm */
}

.hst-hamburger-btn {
    background: transparent;
    border: none;
    color: var(--color-primary);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 200ms ease, background-color 200ms ease;
}

.hst-hamburger-btn:hover {
    color: var(--color-accent-text);
    background-color: var(--color-muted);
}

.hst-brand-title {
    font-family: var(--font-heading);
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none !important;
    letter-spacing: -0.01em;
    white-space: nowrap; /* never wrap the wordmark onto two lines on phones */
}

@media (max-width: 480px) {
    .hst-brand-title {
        font-size: 1.25rem;
    }
}

/* ---- Right Column: Account, Cart (Extreme Right) ---- */
.hst-custom-header__right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 1 1 0% !important;
    gap: var(--space-md) !important;
}

/* Mobile: the two icons within each group (hamburger+search,
   account+cart) were only 16px apart (--space-md) — the same tight
   "paired" gap used at desktop width, where there's much more
   surrounding room to read it as intentional grouping. At ~390px wide
   that same 16px reads as cramped. Loosened on mobile only. Placed
   after both base rules above (not just inside a later media query)
   because they're equally-specific !important selectors — the later
   one in source order wins regardless of media-query nesting. */
@media (max-width: 768px) {
    .hst-custom-header__left,
    .hst-custom-header__right {
        gap: var(--space-lg) !important;
    }
}

.hst-icon-btn {
    background: transparent;
    border: none;
    color: var(--color-primary);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-decoration: none !important;
    transition: color 200ms ease, background-color 200ms ease;
}

.hst-icon-btn:hover {
    color: var(--color-accent-text);
    background-color: var(--color-muted);
}

/* Numeric Cart Count Badge ONLY (NO PRICE TEXT) */
.hst-cart-button {
    position: relative;
}

.hst-cart-count-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background-color: var(--color-accent);
    color: var(--color-primary);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--color-background);
}

/* Hide legacy Storefront cart price & text elements */
.site-header-cart,
.storefront-handheld-footer-bar,
.site-header .site-search {
    display: none !important;
}

/* ==========================================================================
   3. OFF-CANVAS NAVIGATION DRAWER
   ========================================================================== */

.hst-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 300ms ease, visibility 300ms ease;
}

.hst-nav-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

.hst-nav-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 360px;
    max-width: 85vw;
    background: var(--color-background); /* Warm parchment background */
    z-index: 2001;
    transform: translateX(-100%);
    transition: transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.hst-nav-drawer.is-active {
    transform: translateX(0);
}

/* WordPress's own admin toolbar is also fixed at top:0 for logged-in
   users (body.admin-bar) — invisible to real customers, who never see
   it, but it visually overlaps this drawer's own header for anyone
   testing while logged in, since nothing here accounts for its height.
   WP's own default admin-bar heights: 32px desktop, 46px at its own
   782px mobile breakpoint — matched here, not guessed. */
body.admin-bar .hst-nav-drawer {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .hst-nav-drawer {
        top: 46px;
    }
}

.hst-nav-drawer__header {
    display: flex;
    align-items: center;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-border);
}

.hst-nav-drawer__close {
    background: none;
    border: none;
    color: var(--color-foreground);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-sm);
    transition: background 200ms ease;
    flex-shrink: 0;
}

.hst-nav-drawer__close:hover {
    background: var(--color-muted);
}

.hst-logo-text {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
}

.hst-nav-drawer__search {
    padding: var(--space-md) var(--space-lg);
}

.hst-drawer-search-form {
    display: flex;
    align-items: center;
    position: relative;
}

.hst-drawer-search-input {
    width: 100%;
    padding: 10px 40px 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 14px;
    background: var(--color-surface);
}

.hst-drawer-search-btn {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    color: var(--color-foreground-muted);
    cursor: pointer;
}

.hst-nav-drawer__menu {
    flex: 1;
    padding: var(--space-md) var(--space-lg);
}

.hst-drawer-section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-foreground-muted);
    margin-bottom: var(--space-md);
}

.hst-drawer-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hst-drawer-nav-list li {
    margin-bottom: var(--space-xs);
}

.hst-drawer-nav-list li a {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-foreground);
    padding: 10px 0;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    transition: color 200ms ease, padding-left 200ms ease;
}

.hst-drawer-nav-list li a:hover {
    color: var(--color-secondary);
    padding-left: 6px;
}

.hst-nav-drawer__footer {
    padding: var(--space-lg);
    border-top: 1px solid var(--color-border);
    background: var(--color-muted);
}

.hst-drawer-trust-pill {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary);
    text-align: center;
}

/* ==========================================================================
   4. SEARCH MODAL OVERLAY
   ========================================================================== */

.hst-search-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--color-surface);
    box-shadow: var(--shadow-xl);
    z-index: 2002;
    transform: translateY(-100%);
    transition: transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    padding: var(--space-lg) var(--space-xl);
}

.hst-search-modal.is-active {
    transform: translateY(0);
}

.hst-search-modal__inner {
    max-width: var(--content-max-width);
    margin: 0 auto;
}

.hst-search-modal__form {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.hst-search-modal__icon {
    color: var(--color-foreground-muted);
    flex-shrink: 0;
}

.hst-search-modal__input {
    flex: 1;
    border: none !important;
    font-family: var(--font-heading);
    font-size: 1.25rem !important;
    background: transparent !important;
    box-shadow: none !important;
}

.hst-search-modal__close {
    background: none;
    border: none;
    color: var(--color-foreground-muted);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   5. FEATURED PRODUCTS SECTION (HOMEPAGE)
   ========================================================================== */

/* Vertical rhythm from here down to the ingredient-story section: every
   section owns its OWN top gap only (a single consistent --space-2xl
   margin-top), instead of the previous mix of top+bottom margins AND
   padding stacked on top of each other, which compounded into gaps that
   were both bigger and inconsistent with each other (trust bar, for one,
   had both padding and margin pulling in the same direction). One rule,
   applied the same way everywhere, so the gaps actually match. */
.hst-featured-section {
    padding: 0;
    margin: var(--space-2xl) auto 0 auto;
    max-width: var(--content-max-width);
}

.hst-featured-section__header {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.hst-featured-section__header h2 {
    font-family: var(--font-heading);
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--color-foreground);
    margin: 0 0 var(--space-xs) 0;
}

.hst-featured-section__header p {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-foreground-muted);
    margin: 0;
}

/* ---- Product Grid (custom markup — see hst_render_product_card() /
   woocommerce_product_loop_start in inc/shop.php: every product loop
   sitewide — homepage, shop, related products, cross-sells — uses this
   same grid, not the [products] shortcode's own ul.products markup).
   auto-fill + minmax naturally caps at 5 columns within this section's
   1200px max-width and reflows to fewer columns as the product count
   changes, with no hardcoded column-count breakpoints to maintain.

   REAL BUG, found live: this used to be `auto-fit`, not `auto-fill`. With
   auto-fit, a row with fewer products than fit at the 220px floor has its
   EMPTY tracks collapse entirely, and the 1fr on the remaining (real)
   tracks then stretches them to fill the freed-up space — so a shop
   category or Related Products block with only 1-2 items rendered each
   card dramatically wider than designed. The product photo inside is a
   fixed-resolution crop (woocommerce_thumbnail size), so stretching its
   box past that native resolution is exactly what produced the blurry,
   "torn" look Pratik saw — confirmed by the pattern he described (worse
   whenever a page had fewer products, same look everywhere that reuses
   this grid). `auto-fill` keeps the unused tracks in the layout instead of
   collapsing them, so existing cards stay at their intended size and the
   leftover space is just empty gutter to the right, never stretch. ---- */
/* flex, not grid: a grid's unfilled trailing tracks always collapse to the
   LEFT (last row of 4 in a 5-column grid sits flush left with empty space
   stranded on the right — this was especially visible on the homepage
   with exactly 4 Featured Products at some widths, and on Related
   Products, which is almost never a round multiple of the column count).
   flex-wrap + justify-content:center centers the content of EVERY row,
   full or not, independent of product count or viewport width — no
   server-side "is this a short row" logic needed (a previous version of
   this rule had a `--few` modifier class for that; flex replaces it for
   every case, not just a hand-picked threshold).
   flex-basis (not grid's 1fr) still avoids the stretch-to-blurry bug a
   true grid `1fr`/auto-fit caused with few items (see git history) — cards
   keep their intended ~220px size and shrink only if the row is tight,
   never grow past it. */
.hst-product-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-lg);
}

.hst-product-grid > .hst-product-card {
    flex: 0 1 220px;
}

/* Below 640px, two 220px cards + gap + the page's own side gutters no
   longer fit, so cards would shrink to 1 per row — browsing felt slow (far
   more scrolling per product seen) and wasted the screen's width. Force 2
   equal-width columns explicitly at the sizes phones actually are. */
@media (max-width: 640px) {
    .hst-product-grid {
        gap: var(--space-md);
    }

    /* flex-grow: 0 (not 1) — a lone trailing card (an odd count, or a
       single-product section like "Upcoming Products") must NOT stretch to
       fill the leftover row width; it stays at its intended half-width and
       gets centered by justify-content above, same as the desktop grid. */
    .hst-product-grid > .hst-product-card {
        flex: 0 1 calc(50% - var(--space-md) / 2);
    }

    /* The global .woocommerce a.button rule in components.css (12px 28px
       padding, 15px font — sized for a full-width desktop button) wins on
       specificity/!important here too, so "Add to cart" wraps to two lines
       inside a ~140px-wide half-card on a phone, the exact "desktop button
       just shrunk to fit" look. Needs its own !important to win back, sized
       for the card it actually sits in. */
    .hst-product-grid > .hst-product-card .hst-product-card__cta {
        padding: 10px 12px !important;
        font-size: 13px !important;
        letter-spacing: 0.01em !important;
    }
}

.hst-product-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    /* A slight overshoot on the way up (not a linear ease) is what reads as a
       "pop" rather than a plain lift — kept to translateY only, no scale on
       the card itself: MASTER.md's own anti-pattern list rules that out
       ("Layout-shifting hover transforms — translateY only, never scale on
       cards"), and a card scaling up would also visually collide with its
       neighbours in a tight grid. */
    transition: box-shadow 250ms ease, transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
}

.hst-product-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-7px);
}

.hst-product-card__media {
    position: relative;
    display: block;
    overflow: hidden;
}

.hst-product-card__media img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    transition: transform 400ms ease;
}

.hst-product-card:hover .hst-product-card__media img {
    transform: scale(1.03);
}

.hst-product-card__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    background: var(--color-destructive);
    color: var(--color-on-primary);
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
}

.hst-product-card__body {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.hst-product-card__title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-foreground);
    text-decoration: none !important;
    line-height: 1.4;
    margin-bottom: var(--space-xs);
}

.hst-product-card__price {
    font-family: var(--font-body);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--space-md);
}

.hst-product-card__price del {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-foreground-muted);
    opacity: 1;
    margin-right: var(--space-xs);
}

.hst-product-card__price ins {
    font-weight: 700;
    text-decoration: none;
    color: var(--color-primary);
}

.hst-product-card__cta {
    display: block;
    text-align: center;
    margin-top: auto;
    padding: 10px 16px;
    font-size: 13px;
    border-radius: var(--radius-md);
    background: var(--color-accent);
    color: var(--color-on-accent);
    font-weight: 600;
    text-decoration: none !important;
    transition: background-color 200ms ease;
}

.hst-product-card__cta:hover {
    background: var(--color-accent-hover);
    color: var(--color-on-accent);
}

/* After an AJAX add-to-cart WooCommerce injects a "View cart" link. Storefront
   styles it as a heavy dark block with an arrow; keep it as a quiet text link. */
.hst-product-card .added_to_cart {
    display: block;
    margin: var(--space-sm) 0 0;
    padding: 0;
    background: none;
    border: 0;
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
    box-shadow: none;
}

.hst-product-card .added_to_cart::after {
    display: none;
}

.hst-product-card .added_to_cart:hover {
    color: var(--color-primary);
    background: none;
}

.hst-product-card__cta.added {
    background: var(--color-primary);
}

/* ==========================================================================
   6. TRUST SIGNAL BAR (WITH SUBLABELS RESTORED)
   ========================================================================== */

.hst-trust-bar {
    background-color: var(--color-muted);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-lg) var(--space-xl);
    margin: var(--space-2xl) 0 0 0;
}

.hst-trust-bar__inner {
    max-width: var(--content-max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-lg);
    text-align: center;
}

.hst-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-width: 0; /* lets a grid item shrink below its text's natural width instead of forcing the row to overflow */
}

.hst-trust-item svg {
    width: 28px;
    height: 28px;
    color: var(--color-secondary);
    flex-shrink: 0;
    margin-bottom: var(--space-xs);
}

.hst-trust-item__text {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hst-trust-item__label {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-foreground);
    line-height: 1.15;
}

.hst-trust-item__sublabel {
    display: block !important;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-foreground-muted);
    margin-top: 2px;
    line-height: 1.25;
}

/* ---- All 5 items stay in ONE row at every width (never wrap to 2-3 rows)
   — Pratik asked for this explicitly after the old breakpoints (3-col
   tablet, 2-col phone) broke the row into a ragged, uneven-looking stack.
   `repeat(5, 1fr)` never changes; only the icon size, type scale, and
   gaps/padding step down so 5 columns keep fitting a narrowing viewport.
   `min-width: 0` on .hst-trust-item (above) is what actually makes this
   possible — a grid item's default min-width is auto (its content's
   natural width), which would force the row wider than the screen and
   either overflow or silently wrap despite grid-template-columns staying
   at 5; min-width: 0 lets each column — and the text inside it — actually
   compress and wrap onto 2-3 short lines within its own narrow column
   instead. ---- */
@media (max-width: 1023px) {
    .hst-trust-bar {
        padding: var(--space-lg) var(--space-md);
    }

    .hst-trust-bar__inner {
        gap: var(--space-sm);
    }

    .hst-trust-item svg {
        width: 22px;
        height: 22px;
    }

    .hst-trust-item__label {
        font-size: 0.75rem;
    }

    .hst-trust-item__sublabel {
        font-size: 0.625rem;
    }
}

@media (max-width: 640px) {
    .hst-trust-bar {
        padding: var(--space-md) var(--space-sm);
    }

    .hst-trust-bar__inner {
        gap: var(--space-xs);
    }

    .hst-trust-item {
        gap: 4px;
    }

    .hst-trust-item svg {
        width: 18px;
        height: 18px;
        margin-bottom: 2px;
    }

    .hst-trust-item__label {
        font-size: 0.5625rem;
    }

    .hst-trust-item__sublabel {
        font-size: 0.5rem;
        margin-top: 1px;
    }
}

@media (max-width: 380px) {
    .hst-trust-bar {
        padding: var(--space-sm) var(--space-xs);
    }

    .hst-trust-item svg {
        width: 16px;
        height: 16px;
    }

    .hst-trust-item__label {
        font-size: 0.5rem;
    }

    .hst-trust-item__sublabel {
        font-size: 0.4375rem;
    }
}

/* ==========================================================================
   7. SLEEK MULTI-COLUMN FOOTER
   ========================================================================== */

.site-footer {
    background-color: var(--color-primary) !important;
    color: var(--color-on-primary-muted) !important;
    padding: var(--space-lg) 0 0 0 !important;
}

.hst-footer-wrapper {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

/* Newsletter bar */
.hst-footer-newsletter {
    background: var(--color-on-primary-hover-bg);
    border: 1px solid var(--color-on-primary-border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
    margin-bottom: var(--space-lg);
}

.hst-footer-newsletter__content h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-on-primary) !important;
    margin: 0 0 var(--space-xs) 0;
}

.hst-footer-newsletter__content p {
    font-size: 0.875rem;
    color: var(--color-on-primary-muted) !important;
    margin: 0;
}

.hst-footer-newsletter__form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    flex-shrink: 0;
    width: 420px;
    max-width: 100%;
}

.hst-footer-newsletter__form input[type="email"] {
    flex: 1;
    min-width: 200px;
    background: var(--color-on-primary-hover-bg);
    border: 1px solid var(--color-on-primary-border);
    color: var(--color-on-primary);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    font-size: 0.875rem;
}

.hst-footer-newsletter__form input[type="email"]::placeholder {
    color: var(--color-on-primary-muted);
}

.hst-footer-newsletter__status {
    width: 100%;
    font-size: 0.8125rem;
    font-weight: 600;
    margin-top: var(--space-xs);
    display: none;
}

.hst-footer-newsletter__status.is-visible {
    display: block;
}

.hst-footer-newsletter__status.is-success {
    color: var(--color-accent-text);
}

/* Homepage sticky "Notify me" bar — fixed to the bottom of the viewport,
   stays put while the page scrolls. Homepage-only (see functions.php),
   so it never competes with the Buy Now / Add to Cart bar on product pages. */
.hst-notify-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background: var(--color-primary);
    color: var(--color-on-primary);
    padding: var(--space-sm) var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-md);
    box-shadow: var(--shadow-lg);
}

.hst-notify-bar.is-dismissed {
    display: none;
}

.hst-notify-bar__label {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 40px; /* matches the 40px control height below so both sit on the same visual center */
    color: var(--color-on-primary);
    white-space: nowrap;
}

.hst-notify-bar__form {
    /* Storefront's base stylesheet gives every <form> a default
       margin-bottom: 1.618em (style.css global form rule) — left unset,
       that extra margin became part of this flex item's margin box, which
       is what align-items: center actually centers, so the form's visible
       content centered a few px above the label's true center. */
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.hst-notify-bar__form input[type="email"] {
    background: var(--color-on-primary-hover-bg);
    border: 1px solid var(--color-on-primary-border);
    color: var(--color-on-primary);
    border-radius: var(--radius-md);
    box-sizing: border-box;
    height: 40px;
    padding: 0 14px;
    font-size: 0.8125rem;
    width: 240px;
    max-width: 60vw;
}

.hst-notify-bar__form input[type="email"]::placeholder {
    color: var(--color-on-primary-muted);
}

.hst-notify-bar__btn {
    background: var(--color-accent);
    color: var(--color-on-accent);
    border: none;
    border-radius: var(--radius-md);
    box-sizing: border-box;
    height: 40px;
    padding: 0 18px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.hst-notify-bar__btn:hover {
    background: var(--color-accent-hover);
}

.hst-notify-bar__dismiss {
    position: absolute;
    top: 50%;
    right: var(--space-md);
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--color-on-primary-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
}

.hst-notify-bar__dismiss:hover {
    color: var(--color-on-primary);
}

.hst-notify-bar__status {
    width: 100%;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    margin: 0;
    display: none;
}

.hst-notify-bar__status.is-visible {
    display: block;
}

.hst-notify-bar__status.is-success {
    color: var(--color-gold-shine-3);
}

.hst-notify-bar__status.is-error {
    color: var(--color-destructive-on-primary);
}

/* On phone this stops being a horizontal bar stretched to fit (the desktop
   layout just given more rows) and becomes its own compact bottom sheet:
   label on its own line, input+button as one thumb-reachable row underneath,
   a rounded top edge and bright top border so it reads as a floating
   material rather than a strip pinned to the browser chrome, and safe-area
   padding so it clears the home-indicator on notched phones. */
@media (max-width: 600px) {
    .hst-notify-bar {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: var(--space-xs);
        padding: var(--space-md) var(--space-lg);
        padding-right: var(--space-3xl);
        padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom));
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        border-top: 1px solid var(--color-on-primary-border);
    }

    .hst-notify-bar__label {
        line-height: 1.3;
        white-space: normal;
        font-size: 0.875rem;
    }

    .hst-notify-bar__form {
        width: 100%;
        flex-wrap: nowrap;
    }

    .hst-notify-bar__form input[type="email"] {
        flex: 1 1 auto;
        width: auto;
        max-width: none;
        min-width: 0;
    }

    .hst-notify-bar__btn {
        flex: 0 0 auto;
    }

    .hst-notify-bar__dismiss {
        top: var(--space-md);
        transform: none;
    }
}

.hst-footer-newsletter__status.is-error {
    color: var(--color-destructive-on-primary);
}

.hst-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: var(--space-xl);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-on-primary-border);
}

.hst-footer-heading {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-on-primary) !important;
    margin: 0 0 var(--space-lg) 0;
}

.hst-footer-desc {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-on-primary-muted) !important;
    margin-bottom: var(--space-md);
}

.hst-footer-contact-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.875rem;
    color: var(--color-on-primary-muted) !important;
    margin-bottom: var(--space-xs);
}

/* A plain `a { color: ... }` rule elsewhere directly targets any link in
   here (the phone number, WhatsApp) and wins over the parent's color above
   even with !important — inheritance only applies when nothing else
   matches the element itself, and a direct type-selector rule always does.
   Confirmed live: the phone/WhatsApp links rendered almost invisible
   (dark green text on the dark green footer) until this was added. */
.hst-footer-contact-item a {
    color: var(--color-on-primary-muted) !important;
    text-decoration: none !important;
}

.hst-footer-contact-item a:hover,
.hst-footer-contact-item a:focus {
    color: var(--color-on-primary) !important;
    text-decoration: underline !important;
}

.hst-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hst-footer-links li {
    margin-bottom: var(--space-sm);
}

.hst-footer-links li a {
    color: var(--color-on-primary-muted) !important;
    font-size: 0.875rem;
    text-decoration: none !important;
    transition: color 200ms ease;
}

.hst-footer-links li a:hover {
    color: var(--color-accent-text) !important;
}

.hst-footer-badge-pill {
    display: inline-block;
    background: var(--color-accent-tint);
    border: 1px solid var(--color-accent);
    color: var(--color-accent-text);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* Hide default WordPress blog post loop ("Hello world!") on Homepage */
.home .site-main article,
.home .site-main .type-post,
.home .site-main .entry-header,
.home .site-main .entry-content,
.home .site-main .entry-meta,
.home .site-main #comments {
    display: none !important;
}

/* ==========================================================================
   8. BRAND NARRATIVE & CUSTOMER REVIEWS (HOMEPAGE)
   ========================================================================== */

.hst-story-reviews-section {
    max-width: var(--content-max-width);
    margin: var(--space-2xl) auto 0 auto;
    padding: 0 var(--space-xl);
}

.hst-narrative-box {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    /* padding, not margin-bottom: the bullets row inside this box was
       letting its own margin collapse straight through to the next
       section, quietly eating half the intended gap. Padding can't
       collapse, so this is the one reliable way to get the real 48px. */
    padding-bottom: var(--space-2xl);
}

.hst-narrative-title {
    font-family: var(--font-display);
    font-size: 2.75rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-foreground);
    margin-bottom: var(--space-md);
    line-height: 1.25;
}

.hst-narrative-text {
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--color-foreground-muted);
    margin-bottom: var(--space-xl);
}

.hst-narrative-cta {
    margin-bottom: var(--space-xl);
}

.hst-narrative-bullets {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--color-primary);
    flex-wrap: wrap;
}

.hst-minimal-banner {
    background: var(--color-muted);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-foreground-muted);
    letter-spacing: 0.04em;
    margin-bottom: var(--space-2xl);
}

.hst-reviews-box {
    text-align: center;
    overflow: hidden;
}

.hst-reviews-header {
    margin-bottom: var(--space-2xl);
}

.hst-reviews-subheading {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-style: italic;
    color: var(--color-foreground-muted);
    display: block;
    margin-bottom: 4px;
}

.hst-reviews-header h3 {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-foreground);
    margin: 0;
}

/* ---- Empty state: no reviews flagged "Show on homepage" yet. Same card
   shape as a real review (.hst-review-card), so it reads as "a slot
   waiting to be filled" rather than a different, lesser layout bolted on
   for the empty case. ---- */
.hst-review-card--empty {
    border-style: dashed;
    background: var(--color-muted);
}

.hst-review-empty-cta {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-accent);
    text-decoration: none;
}

.hst-review-empty-cta:hover {
    text-decoration: underline;
}

/* Horizontal Infinite Carousel Container */
.hst-reviews-carousel-wrapper {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
    padding: var(--space-md) 0 var(--space-2xl) 0;
}

.hst-reviews-pause {
    position: absolute;
    top: var(--space-md);
    right: var(--space-xl);
    z-index: 5;
    color: var(--color-primary);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
}

.hst-reviews-pause:hover {
    background: var(--color-muted);
}

.hst-reviews-track {
    display: flex;
    gap: var(--space-xl);
    width: max-content;
    animation: hst-reviews-slide 32s linear infinite;
    padding-left: var(--space-xl);
}

.hst-reviews-carousel-wrapper:hover .hst-reviews-track,
.hst-reviews-track.is-paused {
    animation-play-state: paused;
}

@keyframes hst-reviews-slide {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.hst-reviews-track .hst-review-card {
    flex: 0 0 380px;
    width: 380px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl) var(--space-xl);
    box-shadow: var(--shadow-sm);
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    transition: transform 250ms ease, box-shadow 250ms ease;
}

.hst-reviews-track .hst-review-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.hst-reviews-track.is-static {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 var(--space-xl);
}

.hst-review-stars {
    display: flex;
    gap: 2px;
    margin-bottom: var(--space-md);
}

.hst-review-text {
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--color-foreground);
    margin-bottom: var(--space-2xl);
    font-weight: 500;
}

.hst-review-author {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-md);
}

.hst-review-author strong {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-foreground);
}

.hst-review-product-tag {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-foreground-muted);
    margin-top: 4px;
}

.hst-reviews-footer {
    margin-top: var(--space-lg);
}

.hst-reviews-stats {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-foreground-muted);
    margin: 0;
}

.hst-footer-credit,
.hst-footer-credit p {
    text-align: center;
    padding: var(--space-sm) 0;
    font-size: 0.875rem;
    color: var(--color-on-primary-muted) !important;
}

@media (max-width: 1023px) {
    .hst-footer-newsletter {
        flex-direction: column;
        text-align: center;
    }
    .hst-footer-newsletter__form {
        width: 100%;
    }
    .hst-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
    }
}

@media (max-width: 600px) {
    .hst-footer-grid {
        grid-template-columns: 1fr;
    }
}