/* ===== Hello Directory Styles ===== */

/* Deal-in-post fix */
.deal-in-post a { 
    font-weight: bold; 
}

/* Terms Styling (Pills) */
.box-terms {
    position: absolute;
    top: 15px;
    right: 20px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.term-pill {
    background: #f8f8f8;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    color: #444;
    text-decoration: none;
}

.term-pill:hover {
    background: #fcb900;
    color: #000;
}

/* GP element card: GB term_list outputs <a rel="tag"> with no .term-pill class.
   Style term links inside .box-terms the same as the legacy pills. */
.box-terms a {
    background: #f8f8f8;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    color: #444;
    text-decoration: none;
}

.box-terms a:hover {
    background: #fcb900;
    color: #000;
}

/* Buttons */
.box-button, .box-button-secondary {
    display: inline-block;
    padding: 12px 18px;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    transition: background 0.3s ease, color 0.3s ease;
}

.box-button { 
    background: #fcb900; 
    color: #000; 
}

/*
 * HS-641 — :focus and :active must be RESTATED here, or the label goes
 * invisible once a reader has clicked the button.
 *
 * GeneratePress emits `a:hover, a:focus, a:active { color: var(--accent) }`
 * and --accent on this site is #fcb900 — the SAME yellow as this button's
 * background. That selector's specificity is 0,1,1; the `.box-button` rule
 * above is 0,1,0, so on focus GP WINS and the text becomes #fcb900 on #fcb900.
 * GP also sets `transition: color .1s` on every `a`, which is why it fades out
 * rather than snapping.
 *
 * Hover was never affected because `.box-button:hover` is 0,2,0 and outranks
 * GP. Only focus and active were losing.
 *
 * 🔴 THE TRIGGER IS NOT THE CLICK, IT IS COMING BACK. Chrome restores DOM focus
 * to the element you last clicked when the window regains focus, so the button
 * you pressed is still :focus when you return from the merchant — Brandy,
 * 2026-08-25: "it fades away when i return to the page. if i'm in another app
 * it shows it. but if i go back to focus on chrome, then it disappears."
 * Sitewide, logged in or not, and it reproduced in Incognito.
 *
 * 🔴 FOCUS RESTATES THE BASE COLOURS. HER RULING, 2026-08-25: *"it should go
 * back to black on yellow not yellow on black. yellow on black is ONLY hover."*
 * A first pass pointed :focus at the hover treatment and she reversed it — the
 * inverted palette is what HOVER means on this site and nothing else may borrow
 * it. All this rule does is win the specificity fight and hand the button back
 * the colours it already had.
 *
 * ⚠️ ORDER IS LOAD-BEARING: :hover is declared AFTER :focus at the same 0,2,0
 * specificity, so a button that is both focused and hovered shows the hover
 * treatment. Moving :hover above these would make a focused button stop
 * responding to the pointer.
 */
.box-button:focus,
.box-button:active {
    background: #fcb900;
    color: #000;
}

.box-button:hover {
    background: #000;
    color: #fcb900;
}

.box-button-secondary {
    background: #000;
    color: #fff;
}

.box-button-secondary:focus,
.box-button-secondary:active {
    background: #000;
    color: #fff;
}

.box-button-secondary:hover {
    background: #333;
    color: #fff;
}

/* Coupon Styles */
.coupon-wrapper { 
    display: flex; 
    gap: 10px; 
    flex-wrap: wrap; 
}

.coupon-section { 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
    flex: 1; 
}

.single-coupon { 
    background: #f8f8f8; 
    padding: 10px 12px; 
    border-radius: 5px; 
    font-size: 14px; 
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
}

.coupon-info { 
    display: block; 
    margin-bottom: 4px; 
    color: #333; 
    font-weight: normal; 
}

.coupon-code {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    background: #e3e3e3;
    border-radius: 3px;
    color: #4CAF50;
    font-weight: bold;
    white-space: nowrap;
    cursor: pointer;
}

.coupon-code img { 
    margin-left: 5px; 
    width: 14px; 
    height: 14px; 
    opacity: 0.7; 
}

.coupon-code:hover img { 
    opacity: 1; 
}

/* Box Tile Layout */
.shop-tile {
    background: #fff;
    padding: 30px 40px;
    border-radius: 8px;
    box-shadow: 0 0 45px rgba(0,0,0,.1);
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

.shop-tile.closed-box { 
    opacity: 0.6; 
}

.box-bottom { 
    display: flex; 
    align-items: center; 
    gap: 20px; 
    flex-wrap: wrap; 
}

.coupon-wrapper { 
    margin-left: auto; 
    flex: 1; 
}

.box-price, .box-price-closed {
    font-size: 28px;
    font-weight: bold;
}

.box-price { 
    color: #000; 
}

.box-price-closed { 
    color: #999; 
}

.from-label {
    display: block;
    font-size: 14px;
    color: #777;
}

.price-frequency {
    font-size: 14px;
    font-weight: normal;
    color: #777;
}

.box-title {
    font-size: 28px;
    margin: 0;
    color: #000;
}

.box-title a {
    color: #000;
    text-decoration: none;
}

.box-title a:hover, 
.box-title a:focus {
    color: #fcb900;
    text-decoration: underline;
}

.box-frequency {
    font-size: 14px;
    color: #777;
    font-weight: normal;
    margin: 5px 0 10px 0;
}

.box-description {
    font-size: 14px;
    color: #444;
}

.price-button-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Floating Bottom Bar */
#floating-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    padding: 10px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.floating-bar-inner { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    max-width: 1200px; 
    width: 100%; 
    gap: 10px; 
    flex-wrap: wrap; 
}

.floating-bar-left { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
}

.floating-bar-left .box-title {
    font-size: 20px; /* Increased from 18px */
    margin: 0;
}

.floating-bar-left .box-price { 
    font-weight: normal; 
    font-size: 14px; 
    color: #777; 
}

/* Name sits left; the coupon + button group to the right (desktop). */
.floating-bar-left {
    margin-right: auto;
}

.floating-bar-coupon {
    display: flex;
    font-size: 12px;
    line-height: 1.3;
}

/* No grey box / border around the coupon — just the deal text + code. */
.floating-bar-coupon .single-coupon {
    background: transparent;
    border: none;
    padding: 0;
}

/* Mobile Responsive */
@media (max-width: 767px) {
    .box-terms {
        position: static;
        margin-bottom: 5px;
    }
    
    .box-bottom {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .shop-tile { 
        padding: 20px; 
    }
    
    .box-bottom { 
        flex-direction: column; 
        align-items: flex-start; 
    }
    
    .coupon-wrapper {
        width: 100%;
        margin: 0;
    }
}

/* Shop single page: no in-tile H2 title (theme renders H1 above), so drop the
   absolute positioning on .box-terms and let lozenges flow naturally at the top
   of the tile with margin below. Scales with however many pills wrap. */
body.single-shop .shop-tile .box-terms {
    position: static;
    margin-bottom: 8px;
}

/* Related-terms line on taxonomy archives (rendered by render_taxonomy_related_terms).
   Default link color #3c4753, yellow on hover/focus/active matching .term-pill:hover. */
.hello-cat-header-after-content-container a,
.hello-cat-header-after-content-container a:visited {
    color: #3c4753;
    text-decoration: none;
}
.hello-cat-header-after-content-container a:hover,
.hello-cat-header-after-content-container a:focus,
.hello-cat-header-after-content-container a:active {
    color: #fcb900;
}

/* HS-247: match prod's Related-line sizing. Prod inherits body 14px / line-height 1.45
   and sets margin-bottom on this container; on THE the container inherits the oversized
   GB archive-description font, so pin it here. Scoped to the container's own text — does
   NOT touch the archive H1/description (separate elements outside this div) or the anchor
   color rules above (color lives on the more-specific `container a` selector).

   HS-248 added `.hello-related-reviews` to this selector on 2026-08-12 and it came back
   out the same day: Brandy removed the related_reviews field and its "See more:" output
   entirely ("we do not need related reviews on directory entries"), so the class is no
   longer emitted anywhere and the rule had nothing left to style. */
.hello-cat-header-after-content-container {
    font-size: 14px;
    line-height: 1.45;
    margin-top: 8px;
    margin-bottom: 10px;
}

/* ============================================================
   Directory Entry Card — GP block element "Directory Entry Card"
   (post 1225017). First-principles styling, BEM nomenclature.
   ============================================================ */
.hs-dcard {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 6px 30px rgba(0, 0, 0, .08);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 24px 0;
    position: relative;   /* stretched-link anchor for whole-card click */
}

/* Stretched link: the title anchor covers the full card. Anything that
   needs to be independently clickable (e.g. .hs-dcard__cta) gets z-index:2. */
.hs-dcard__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Archive affiliate CTA must remain clickable above the card-wide stretched link. */
.hs-dcard__cta { position: relative; z-index: 2; }

.hs-dcard__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hs-dcard__pills a {
    display: inline-block;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 6px 12px;
    border-radius: 999px;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}

.hs-dcard__pills a:hover {
    background: #fcb900;
    color: #111;
}

.hs-dcard__title {
    font-size: clamp(1.5rem, 5vw, 2rem);
    font-weight: 800;
    line-height: 1.15;
    color: #111;
    margin: 0;
}

.hs-dcard__price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.hs-dcard__from {
    font-size: .85rem;
    color: #6b7280;
    font-weight: 500;
    text-transform: lowercase;
}

.hs-dcard__amount {
    font-size: 1.4rem;        /* kept below the title (1.5–2rem) so the name leads */
    font-weight: 800;
    color: #111;
    line-height: 1;
}

.hs-dcard__freq {
    font-size: .9rem;
    color: #6b7280;
    font-weight: 500;
    text-transform: lowercase;
}

.hs-dcard__desc {
    font-size: .95rem;
    line-height: 1.6;
    color: #4b5563;
    margin: 0;
}

.hs-dcard__cta {
    display: inline-block;
    align-self: flex-start;
    background: #fcb900;
    color: #111;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    padding: 13px 28px;
    border-radius: 8px;
    transition: background .2s ease, color .2s ease;
}

/* HS-641 — :focus/:active restate the BASE colours, same reason as .box-button
   above: GP's `a:focus{color:var(--accent)}` is #fcb900, identical to this
   button's background, and at 0,1,1 it outranks the 0,1,0 base rule. Her
   ruling: focus goes back to black-on-yellow; the inverted palette is hover
   and hover only. :hover is declared after, so hover still wins when both. */
.hs-dcard__cta:focus,
.hs-dcard__cta:active {
    background: #fcb900;
    color: #111;
}

.hs-dcard__cta:hover {
    background: #111;
    color: #fcb900;
}

/* The closed-box variant carries both classes, so it must win over the rules
   above — same 0,2,0 specificity, so source order decides and these have to
   stay after them. */
.hs-dcard__cta.box-button-secondary:focus,
.hs-dcard__cta.box-button-secondary:active {
    background: #000;
    color: #fff;
}

.hs-dcard__cta.box-button-secondary:hover {
    background: #333;
    color: #fff;
}

/* Coupon inside the card: drop the legacy full-width grey box — just the deal
   text + the copyable code pill, sitting on the white card. */
.hs-dcard .coupon-section {
    flex: 0 1 auto;
    margin: 0;
}

.hs-dcard .single-coupon {
    background: transparent;
    padding: 0;
    font-size: .9rem;
    color: #4b5563;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}


@media (max-width: 600px) {
    .hs-dcard { padding: 20px; border-radius: 12px; }
    .hs-dcard__cta { align-self: stretch; text-align: center; }
}

/* Closed-box parity: card dims + price grays when the CTA renders
   as the non-link CLOSED span (hs_box_button shortcode). Mirrors
   legacy .shop-tile.closed-box / .box-price-closed. */
.hs-dcard:has(.box-button-secondary) {
    opacity: 0.6;
}

.hs-dcard:has(.box-button-secondary) .hs-dcard__amount {
    color: #999;
}

/* Closed CTA must NOT be the orange accent button. hs-dcard__cta sets
   background:#fcb900; this 2-class selector (higher specificity) restores the
   legacy secondary button look (black) for the non-link CLOSED span. */
.hs-dcard__cta.box-button-secondary {
    background: #000;
    color: #fff;
}

/* ============================================================
   Floating bottom bar — mobile.
   Top row: item name (left) + coupon code (right). The name stays so
   you know the box even when the button label is customized on a post.
   Second row: full-width button.
   ============================================================ */
@media (max-width: 767px) {
    #floating-bottom-bar { padding: 10px 14px; }
    .floating-bar-inner { gap: 8px 10px; align-items: flex-start; }
    /* flex-basis 0 lets the name shrink and wrap its text so it shares the top
       row with the code instead of consuming the whole line. */
    .floating-bar-left {
        margin-right: 0;
        flex: 1 1 0%;
        min-width: 0;
    }
    /* Long names wrap and stack on the left; the code stays on the right
       instead of being pushed to its own line. */
    .floating-bar-left .box-title {
        font-size: 20px; /* was 15px — Brandy 2026-08-09: box name too small on mobile; match desktop size */
        line-height: 1.25;
    }
    /* Pin the code to the right edge of the top row next to the name. */
    .floating-bar-coupon { flex: 0 0 auto; margin-left: auto; }
    /* Mobile: price hidden (shown desktop only); coupon deal-text hidden, code only. */
    .floating-bar-left .box-price { display: none; }
    .floating-bar-coupon .coupon-info { display: none; }
    .box-button.floating-bar-btn-main {
        order: 10;
        flex: 1 0 100%;
        width: 100%;
        text-align: center;
        padding: 14px;
        font-size: 16px;
    }
}

/* ============================================================
   Standalone content images: balance the space above and below
   (they were hugging the text below + gapping above). Equal margin
   both sides, matching the slider's rhythm. Set on both the image
   and its neighbours so it's correct whether the theme spaces via
   margin-bottom (classic) or margin-block-start (block gap). Scoped
   to direct children of .entry-content so carousels/grids are untouched.
   ============================================================ */
.entry-content > figure.wp-block-image {
    margin-top: 1em;
    margin-bottom: 0;
}

.entry-content > figure.wp-block-image + * {
    margin-top: 1em;
}

.entry-content > *:has(+ figure.wp-block-image) {
    margin-bottom: 0;
}

/* ============================================================
   Directory ARCHIVE card grid (GP loop-template element 1225022).
   3-up desktop → 2 → 1, each item a compact hs-dcard with a
   full-bleed image at the top.
   ============================================================ */
.hs-archive__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 24px 0;
}

/* Responsive grid breakpoints: 3-up desktop (base), 2-up tablet, 1-up mobile.
   With narrowed sidebars (left 15% + right 18%) there is room for 3-up at
   desktop widths even in both-sidebars layout — no both-sidebars override needed. */
@media (max-width: 900px) { .hs-archive__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .hs-archive__grid { grid-template-columns: 1fr; } }

.hs-dcard--archive {
    padding: 0;
    overflow: hidden;
    gap: 12px;
    margin: 0;
}

.hs-dcard--archive .hs-dcard__image {
    margin: 0;
    line-height: 0;
}

.hs-dcard--archive .hs-dcard__image img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

/* Reserve two lines for the title so the price row aligns across cards
   regardless of 1- vs 2-line names; clamp longer names to two lines. */
.hs-dcard--archive .hs-dcard__title {
    font-size: 1.1rem;
    line-height: 1.25;
    margin: 4px 16px 0;
    min-height: 2.5em;        /* 2 lines × 1.25 line-height — keeps price rows aligned */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hs-dcard--archive .hs-dcard__title a {
    color: #111;
    text-decoration: none;
}

.hs-dcard--archive .hs-dcard__price {
    margin: 0 16px;
}

.hs-dcard--archive .hs-dcard__desc { margin: 0 16px; }

/* Price stays smaller than the title (sub name) so the name leads the card. */
.hs-dcard--archive .hs-dcard__amount { font-size: 1rem; }

/* margin-top:auto pushes the CTA to the card's bottom edge so buttons line up
   across the row even when content above differs in height.
   white-space:nowrap + reduced padding prevents "Subscribe" from wrapping
   at 2-up and 3-up widths on narrow viewports. Font-size steps down slightly
   at 2-up to stay readable and tappable inside the compact card. */
.hs-dcard--archive .hs-dcard__cta {
    margin: auto 10px 18px;
    align-self: stretch;
    text-align: center;
    white-space: nowrap;
    font-size: 0.875rem;
}

@media (max-width: 900px) {
    .hs-dcard--archive .hs-dcard__cta {
        font-size: 0.8125rem;
        margin-left: 8px;
        margin-right: 8px;
    }
}

/* ============================================================
   Directory single layout tuning (Brandy review 2026-05-31).
   First-pass spacing values — nudge to taste.
   ============================================================ */
/* Disclosure sits above the H1; the H1 rides right on the featured image. */
body.single-shop .entry-header { margin-top: 0; margin-bottom: 0; }
body.single-shop .entry-title { margin-bottom: 0; }
/* Kill the 2em margin-top on the featured image so it sits tight under the H1. */
body.single-shop .featured-image.page-header-image-single { margin-top: 0; }

/* Affiliate disclosure — small, italic, muted; consistent sitewide.
   NB the comment four lines up says "Disclosure sits above the H1". It does not, and
   has not: render_shop_disclosure() echoes it AFTER </header>, so the DOM order on a
   shop single is title -> disclosure -> featured image. The comment described an
   intention. HS-566 is that intention, asked for again and scoped to mobile. */
.hs-directory-disclosure {
    font-size: 0.8rem;
    font-style: italic;
    line-height: 1.5;
    color: #6b7280;
    margin: 0 0 0.5em;
}

/* HS-566 — MOBILE shop single only: the disclosure moves ABOVE the title, directly
   under the breadcrumbs, and drops one step in size. Her words, 2026-08-17:
   "on mobile view make the disclosure 1 pt smaller move it above title under breadcrumbs".
   Reading order on a phone becomes: breadcrumbs -> disclosure -> title.

   WHY CSS AND NOT THE PHP HOOK, and this is not a preference: anonymous HTML is
   edge-cached as ONE object for every device (rule cf89d1c5, 14-day TTL), so markup
   that varies by device poisons the cache — the same reason the breadcrumb separator
   is wrapped in a span for CSS rather than hidden with wp_is_mobile(). The markup
   stays identical everywhere; only the media query differs.

   The disclosure and <header> are siblings inside .inside-article, so a column flex
   parent plus order:-1 is what reorders them. Scoped to body.single-shop AND to the
   mobile query, so desktop and every other template keep the block layout they have.

   ⚠️ THE SPACING EFFECT IS BIGGER THAN "MARGINS DO NOT COLLAPSE BETWEEN CHILDREN",
   so it is stated properly: every direct child becomes a BFC root, so margins stop
   collapsing OUT of them as well. Concretely, on this template at this width,
   .hs-dcard's `margin: 24px 0` and .entry-content's GP `margin-top: 2em` now ADD
   (56px) where they used to collapse (32px). Mobile only, one template, cosmetic —
   and it is the thing to eyeball.

   ANCHORED ON `article > .inside-article`, not on `.inside-article` alone: GP Premium
   emits a NESTED .inside-article when a content-template element has "use theme
   container" on (gp-premium/elements/class-block.php). There is exactly one on shop
   singles today — four entries were checked — so this costs nothing now, and a nested
   one would sit deeper than a direct child of <article> and be left alone. A descendant
   selector would have flexed both.

   768px is the site's established mobile breakpoint (GP Menu Plus's, and the same one
   theme-utilities.css uses for the breadcrumb spacing directly above this element).

   SIZE, measured rather than guessed: the base is the browser default 16px — GP writes
   no body font-size and :root only defines the block-editor presets — so 0.8rem is
   12.8px and 0.75rem is 12px. One clean step down. */
@media (max-width: 768px) {
    body.single-shop article > .inside-article {
        display: flex;
        flex-direction: column;
    }
    body.single-shop article > .inside-article > .hs-directory-disclosure {
        order: -1;
        font-size: 0.75rem;
        margin: 0 0 0.6em;
    }
}

/* Post content rhythm: a single adjacent-margin system (top-margin on each
   direct-child block after the first) — tighter than the prior ~1.5em, and
   predictable (not dependent on WP's block-gap container pipeline). Galleries
   get extra room after them. Scoped to direct children so nested
   carousels/grids/listicle children keep their own spacing. */
.entry-content > * + * { margin-top: 1em; }
.entry-content > figure.wp-block-gallery + * { margin-top: 2em; }

/* ============================================================
   Post card variant for Featured / Latest lander grids.
   Inherits the .hs-dcard shell (radius, shadow, flex column).
   Drops directory-specific price / freq / cta-subscribe rows;
   substitutes excerpt + text "Read more" link.
   Used on survivor-taxonomy archive page 1 (lander element).
   ============================================================ */
.hs-dcard--post {
    padding: 0;
    overflow: hidden;
    gap: 0;
    margin: 0;
    /* Flex column so image (top) + name (below) stack and every card in a row
       stretches to equal height. */
    display: flex;
    flex-direction: column;
    height: 100%;   /* fill the stretched grid cell so all cards in a row match height */
}

/* HS-117 FINAL: real advent-card layout — IMAGE ON TOP, NAME BELOW.
   The block markup already renders the image figure first, then the title h3,
   so NO flex `order` reversal is needed (the name-on-top flip from the prior
   revision is reverted). Image is a uniform fixed 3:2 box so every card's image
   is the same size → rows line up evenly (this is the "line up evenly" fix —
   the ragged look came from the variable-height name-on-top crop). */
.hs-dcard--post .hs-dcard__image {
    margin: 0;
    line-height: 0;
    /* Image leads, fixed-size; name flows beneath. */
    order: 0;
}

.hs-dcard--post .hs-dcard__image img {
    width: 100%;
    /* UNIFORM fixed 3:2 box, cover-cropped, so every card's image is identical
       in size and the rows line up evenly across the grid. */
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
}

/* Name BELOW the image — large, bold, centered (the big sub/brand name).
   Matches the reference advent cards (e.g. "PLAY-DOH ADVENT CALENDAR").
   HS-117 allcaps fix: text-transform:uppercase is moved to the --box modifier
   below so only box-name titles render in ALL CAPS. Plain post-title fallback
   cards keep all other properties (size, weight, centering, wrap) but render
   in normal case. */
.hs-dcard--post .hs-dcard__title {
    order: 1;
    font-size: 1.7rem;
    /* Medium weight — lighter than the prior 700/bold. Poppins (the heading
       font) ships a true 500, so this renders distinctly lighter, not rounded
       back up to 700. Subtitle weight (400) is unchanged. */
    font-weight: 500;
    line-height: 1.15;
    text-align: center;
    /* Space from image above; even padding L/R. Bottom margin tightened so the
       secondary post-title subtitle sits close beneath the hero name. */
    margin: 16px 16px 6px;
    /* HS-117 text-wrap fix: ALL-CAPS long tokens must wrap fully inside the card
       rather than overflow horizontally and be clipped by .hs-dcard--post's
       overflow:hidden. overflow-wrap + word-break handle both hyphenated and
       solid-token overflow. white-space:normal is explicit to guard against any
       inherited nowrap (e.g. from .box-button white-space:nowrap further up). */
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* HS-117 allcaps fix: uppercase ONLY on box-name titles (PHP adds --box class
   on the swap path; fallback plain-post cards never receive this class). */
.hs-dcard--post .hs-dcard__title--box {
    /* Box name reads in ALL CAPS, matching the reference advent cards
       (e.g. "PLAY-DOH ADVENT CALENDAR"). Visual only — HTML stays mixed-case. */
    text-transform: uppercase;
}

.hs-dcard--post .hs-dcard__title a {
    color: #111;
    text-decoration: none;
    /* no hover recolor — matches --archive */
}

/* Secondary line: the post's own title, smaller + muted, sits in the old
   excerpt position directly under the hero box name. */
.hs-dcard--post .hs-dcard__subtitle {
    order: 2;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.3;
    text-align: center;
    color: #6b6b6b;
    margin: 0 16px 20px;
    /* HS-117 text-wrap fix: ensure subtitle wraps fully too. */
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}


@media (max-width: 600px) {
    .hs-dcard--post { border-radius: 12px; }
}

/* ============================================================
   Featured grid equal-height fix (scoped to .hs-lander-featured).
   Grid default is align-items:stretch, which sizes every item in
   a row to the tallest cell. Declaring it explicitly prevents any
   theme rule from overriding it, and align-self:stretch on the
   card echoes the intent for the same reason.
   ============================================================ */
.hs-lander-featured .hs-archive__grid {
    align-items: stretch;
}

.hs-lander-featured .hs-archive__grid .hs-dcard--post {
    align-self: stretch;
    height: 100%;
}

/* ============================================================
   Latest post-list rows — standard archive listing below the
   Featured card grid. Thumbnail left, title + excerpt right.
   ============================================================ */
.hs-lander-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hs-lander-list__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    padding: 24px 0;
    border-bottom: 1px solid var(--contrast-3, #e5e5e5);
}

.hs-lander-list__item:last-child {
    border-bottom: none;
}

.hs-lander-list__thumb {
    flex: 0 0 270px;
    margin: 0;
    line-height: 0;
}

.hs-lander-list__thumb img {
    width: 270px;
    height: 203px;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

.hs-lander-list__body {
    flex: 1 1 auto;
    min-width: 0;
}

.hs-lander-list__title {
    font-size: 1.5rem;
    line-height: 1.25;
    margin: 0;
    font-weight: 700;
}

.hs-lander-list__title a {
    color: #111;
    text-decoration: none;
}

.hs-lander-list__title a:hover {
    text-decoration: underline;
}

.hs-lander-list__excerpt {
    display: none;
}

@media (max-width: 600px) {
    .hs-lander-list__item {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 20px 0;
    }

    .hs-lander-list__thumb {
        flex: none;
        width: 100%;
    }

    .hs-lander-list__thumb img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .hs-lander-list__title {
        font-size: 1.25rem;
    }
}

/* ============================================================
   Hub page title divider — border-bottom under the entry-title
   on the three content-type hub pages, matching /shop/ and
   single-post treatment. Scoped via body classes added by
   htf_append_body_classes() (page-<slug>).
   ============================================================ */
body.page-subscription-box-reviews .entry-title,
body.page-best-subscription-coupons-promo-codes .entry-title,
body.page-subscription-box-spoilers .entry-title {
    padding-bottom: 0.5em;
    /* 2px dashed since 2026-08-09 PM (Brandy): title/heading underline swap —
       keep in step with body.hs-curated-index .entry-title (theme-utilities.css). */
    border-bottom: 2px dashed var(--contrast-3, #dcdcdc);
    margin-bottom: 0.75em;
}

/* ============================================================
   RIGHT SIDEBAR — compact restyle.
   Scope anchor: .inside-right-sidebar
   ALL rules below are prefixed with .inside-right-sidebar so
   they CANNOT affect the hub lander main content or any archive
   that shares .hs-dcard / .hs-lander-list classes.
   ============================================================ */

/* ----------------------------------------------------------
   Featured card — compact sidebar version.
   Overrides the hub's large-card .hs-dcard--post treatment:
   small horizontal layout (thumb left, title right), no big
   square image, no bold oversized title.
   ---------------------------------------------------------- */
.inside-right-sidebar .hs-sb-featured .hs-archive__grid {
    display: block;         /* kill the 3-col grid — single item */
    margin: 0;
}

/* Full-width image, no card box (Brandy 2026-06-02): image spans the sidebar,
   title sits beneath it, no shadow / padding / background. */
.inside-right-sidebar .hs-sb-featured .hs-dcard--post {
    display: block;
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0 0 1rem;
    height: auto;
    position: relative;
}

.inside-right-sidebar .hs-sb-featured .hs-dcard--post .hs-dcard__image {
    margin: 0;
    line-height: 0;
}

.inside-right-sidebar .hs-sb-featured .hs-dcard--post .hs-dcard__image img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    border-radius: 4px;
}

/* Stretched link on featured item — title anchor covers the whole thing. */
.inside-right-sidebar .hs-sb-featured .hs-dcard--post .hs-dcard__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.inside-right-sidebar .hs-sb-featured .hs-dcard--post .hs-dcard__title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 8px 0 0;
    color: #111;
}

.inside-right-sidebar .hs-sb-featured .hs-dcard--post .hs-dcard__title a {
    color: #111;
    text-decoration: none;
}

.inside-right-sidebar .hs-sb-featured .hs-dcard--post .hs-dcard__title a:hover {
    color: #fcb900;
}

/* ----------------------------------------------------------
   List rows (Coupons / Discover a Deal / Spoilers sections).
   Compact horizontal layout: small thumb + small non-bold title.
   Whole row is clickable via stretched-link on title anchor.
   ---------------------------------------------------------- */
.inside-right-sidebar .hs-lander-list {
    gap: 0;
    margin: 0 0 0.75rem;
}

.inside-right-sidebar .hs-lander-list__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--contrast-3, #e5e5e5);
    position: relative;     /* stretched-link anchor */
}

.inside-right-sidebar .hs-lander-list__item:last-child {
    border-bottom: none;
}

/* Small fixed thumbnail */
.inside-right-sidebar .hs-lander-list__thumb {
    flex: 0 0 60px;
    margin: 0;
    line-height: 0;
}

.inside-right-sidebar .hs-lander-list__thumb img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    display: block;
    border-radius: 6px;
}

/* Title: small, normal weight */
.inside-right-sidebar .hs-lander-list__title {
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.3;
    margin: 0;
    color: #222;
}

.inside-right-sidebar .hs-lander-list__title a {
    color: #222;
    text-decoration: none;
}

.inside-right-sidebar .hs-lander-list__title a:hover {
    color: #fcb900;
    text-decoration: none;
}

/* Stretched link — the title anchor covers the entire row.
   Anything above z-index:1 remains independently clickable. */
.inside-right-sidebar .hs-lander-list__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Hide excerpt in sidebar — rows are too compact for it */
.inside-right-sidebar .hs-lander-list__excerpt {
    display: none;
}

/* ============================================================
   Reverse-lookup post list — shop single "Featured in" section.
   Net-new vocabulary; never shares selectors with hs-dcard.
   ============================================================ */
.hs-box-posts {
    margin: 2em 0 1em;
}

.hs-box-posts__heading {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111;
    margin: 0 0 1em;
    padding-bottom: 0.4em;
    border-bottom: 1px solid var(--contrast-3, #e5e5e5);
}

.hs-box-posts__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hs-box-posts__item {
    margin: 0;
    padding: 0;
}

.hs-box-posts__link {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #222;
    padding: 8px;
    border-radius: 6px;
    transition: background .15s ease;
}

.hs-box-posts__link:hover {
    background: #f3f4f6;
    color: #111;
}

.hs-box-posts__thumb {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    line-height: 0;
}

.hs-box-posts__thumb img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    display: block;
    border-radius: 4px;
}

.hs-box-posts__thumb--placeholder {
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 4px;
    background: var(--contrast-2, #f0f0f0);
}

.hs-box-posts__title {
    font-size: 0.9rem;
    line-height: 1.35;
    font-weight: 500;
}

/* ============================================================
   Subscription related-posts — categorized sections on shop
   singles (subscription/brand shop_type).
   Four buckets: News, Reviews, Spoilers, Featured In.
   BEM: .hs-related-posts > __group > __heading + __list > __item
        > __link > __thumb + __title
   ============================================================ */
.hs-related-posts {
    margin: 2em 0 1em;
}

.hs-related-posts__group {
    margin-bottom: 2.5em;
}

.hs-related-posts__heading {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111;
    margin: 0 0 0.75em;
    padding-bottom: 0.4em;
    border-bottom: 1px solid var(--contrast-3, #e5e5e5);
}

.hs-related-posts__count {
    font-weight: 400;
    color: #6b7280;
    font-size: 1rem;
}

.hs-related-posts__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.hs-related-posts__item {
    margin: 0;
    padding: 0;
}

.hs-related-posts__link {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none;
    color: #222;
    padding: 8px;
    border-radius: 6px;
    transition: background .15s ease;
}

.hs-related-posts__link:hover {
    background: #f3f4f6;
    color: #111;
}

.hs-related-posts__thumb {
    display: block;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    line-height: 0;
}

.hs-related-posts__thumb img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    display: block;
    border-radius: 4px;
}

.hs-related-posts__thumb--placeholder {
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 4px;
    background: var(--contrast-2, #f0f0f0);
}

.hs-related-posts__title {
    font-size: 0.9rem;
    line-height: 1.35;
    font-weight: 500;
}

@media (max-width: 600px) {
    .hs-related-posts__list { grid-template-columns: 1fr; }
    .hs-related-posts__link { flex-direction: row; align-items: center; }
}

/* -----------------------------------------------------------------------------
   SUBSCRIPTION CATEGORY NAV
   ----------------------------------------------------------------------------- */

.hs-subnav {
    margin: 0 0 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.hs-subnav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hs-subnav__item {
    flex-shrink: 0;
}

.hs-subnav__link {
    display: inline-block;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 6px 12px;
    border-radius: 999px;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}

.hs-subnav__link:hover {
    background: #fcb900;
    color: #111;
}

.hs-subnav__link--current {
    background: #111;
    color: #fff;
}

.hs-subnav__link--current:hover {
    background: #333;
    color: #fff;
}

.hs-subnav--children {
    margin-top: .25rem;
    margin-bottom: 1rem;
}

.hs-subnav__children {
    flex-wrap: wrap;
}

.hs-subnav__link--child {
    background: #fff;
    color: #4b5563;
    border: 1px solid #e5e7eb;
}

.hs-subnav__link--child:hover {
    background: #fcb900;
    color: #111;
    border-color: #fcb900;
}

.hs-subnav__link--child.hs-subnav__link--current {
    background: #4b5563;
    color: #fff;
    border-color: #4b5563;
}

.hs-subnav__link--child.hs-subnav__link--current:hover {
    background: #374151;
    border-color: #374151;
}

@media (max-width: 640px) {
    .hs-subnav__list {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
    }
}

/* ==========================================================================
   .hs-catnav — left-sidebar subscription category tree
   ========================================================================== */

.hs-catnav {
    margin: 0;
    font-size: 13px;
}

.hs-catnav__list,
.hs-catnav__children {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hs-catnav__children {
    padding-left: 12px;
    border-left: 2px solid #e5e7eb;
    margin-top: 2px;
    margin-bottom: 4px;
}

/* Parent row summary */
.hs-catnav__summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 8px;
    font-weight: 600;
    list-style: none;
    border-radius: 6px;
}

.hs-catnav__summary::-webkit-details-marker {
    display: none;
}

/* Caret removed — no arrow/triangle affordance in the tree. */
.hs-catnav__summary::after {
    display: none;
}

/* Links */
.hs-catnav__link,
.hs-catnav__parent-link {
    display: block;
    padding: 3px 8px;
    color: #4b5563;
    text-decoration: none;
    border-radius: 6px;
}

.hs-catnav__link:hover,
.hs-catnav__parent-link:hover {
    background: #f3f4f6;
    color: #111;
}

/* Current item */
.hs-catnav__link--current,
.hs-catnav__parent-link--current {
    background: #111;
    color: #fff;
}

.hs-catnav__link--current:hover,
.hs-catnav__parent-link--current:hover {
    background: #333;
    color: #fff;
}

/* Current parent — lighter highlight */
.hs-catnav__summary--current-parent {
    color: #111;
    font-weight: 700;
}

/* Item spacing — tight, matches prod stacked list */
.hs-catnav__item {
    margin-bottom: 0;
}

.hs-catnav__child {
    margin-bottom: 0;
}

/* Childless top-level items: bold to match parent <summary> rows (font-weight:600).
   Selector targets only direct-child links with no nested <details> tree. */
.hs-catnav__list > .hs-catnav__item > .hs-catnav__link {
    font-weight: 600;
    /* HS-468: a parent row nests its <a> inside <summary>, and BOTH carry
       padding:3px 8px, so a parent's text starts 16px in and its hover pill 8px
       in. A childless top-level item has no <summary>, so it started at 8px / 0px
       and rendered 8px left of every other row. margin-left absorbs exactly the
       summary's inline padding, so text AND pill line up. Measured at 1280px:
       parents 66px, childless 58px before / 66px after. */
    margin-left: 8px;
}

/* Mobile wrapper: checkbox-toggle pattern (replaces broken outer <details>).
   Desktop (default): label hidden, nav always visible.
   Mobile (<=768px): label shown as tap target; nav hidden until checkbox checked. */

/* Always hide the raw checkbox — keep it accessible but visually invisible. */
.hs-catnav__toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Desktop default: label hidden, nav always visible. */
.hs-catnav__mobile-summary {
    display: none;
}

/* Gray panel — wraps the full nav on desktop; also applies when expanded mobile. */
.hs-catnav {
    display: block;
    background: #f5f5f5;
    padding: 8px 10px;
    border-radius: 6px;
}

@media (max-width: 768px) {
    .hs-catnav__mobile-summary {
        display: block;
        cursor: pointer;
        font-weight: 700;
        font-size: 13px;
        padding: 8px 10px;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        margin-bottom: 4px;
    }

    .hs-catnav {
        display: none;
    }

    .hs-catnav__toggle:checked ~ .hs-catnav {
        display: block;
    }
}

/* ============================================================
   DIRECTORY CONTROLS BAR — .hs-dcontrols
   Wraps the search box and the sort control. Search sits left,
   sort right; they stack on narrow screens so neither is
   squeezed. HS-009.
   ============================================================ */
.hs-dcontrols {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

/* The sort control carries its own bottom margin for the case where it
   renders alone; inside the bar the bar owns the spacing. */
.hs-dcontrols .hs-sort {
    margin-bottom: 0;
}

/* ============================================================
   DIRECTORY SEARCH — .hs-dsearch
   Brandy 2026-08-15: "there is no search for the directory."
   Submits s= + post_type=shop, which is what scopes the search
   to box entries rather than the whole site.
   ============================================================ */
.hs-dsearch {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 260px;
    min-width: 0;
}

.hs-dsearch__label {
    font-size: 15px;
    color: #3d3d3d;                /* 10.4:1 on #fff */
    white-space: nowrap;
    font-weight: 500;
}

/* 🔴 ACCESSIBILITY — every colour here is stated explicitly and none is
   inherited. Brandy 2026-08-15: "Search button is impossible to read.
   Everything needs to be accessible."
   The first version set only `background: #f5f5f5` and let the text colour
   inherit. The theme paints button text WHITE, so the result was white-on-
   near-white — a control that is invisible to everyone, not just to low-
   vision readers. Contrast ratios below are against the stated background,
   and all clear WCAG 2.1 AA (4.5:1 for text, 3:1 for UI boundaries). */
.hs-dsearch__input {
    font-size: 15px;               /* 13px was below comfortable reading size */
    padding: 8px 12px;
    border: 1px solid #6b7280;     /* 4.8:1 on #fff — AA for a UI boundary */
    border-radius: 4px;
    background: #fff;
    color: #1a1a1a;                /* 16.9:1 — stated, never inherited */
    flex: 1 1 auto;
    min-width: 0;
    max-width: 320px;
}

.hs-dsearch__input::placeholder {
    color: #595959;                /* 7.0:1 on #fff — placeholders are text too */
    opacity: 1;                    /* Firefox dims placeholders by default */
}

.hs-dsearch__submit {
    font-size: 15px;
    font-weight: 600;
    padding: 8px 18px;
    border: 1px solid #1a1a1a;
    border-radius: 4px;
    background: #1a1a1a;           /* matches the site header */
    color: #fff;                   /* 16.9:1 — the fix */
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.3;
}

.hs-dsearch__submit:hover,
.hs-dsearch__submit:focus {
    background: #3d3d3d;           /* 10.4:1 with #fff — still AA at hover */
    border-color: #3d3d3d;
    color: #fff;
}

/* A visible keyboard focus ring on BOTH controls. Never remove the outline
   without replacing it — keyboard users lose their place entirely. */
.hs-dsearch__input:focus-visible,
.hs-dsearch__submit:focus-visible {
    outline: 3px solid #1a1a1a;
    outline-offset: 2px;
}

/* Honour a reader's contrast preference rather than overriding it. */
@media (prefers-contrast: more) {
    .hs-dsearch__input {
        border-color: #000;
        border-width: 2px;
    }

    .hs-dsearch__submit {
        background: #000;
        border-color: #000;
    }
}

@media (max-width: 600px) {
    .hs-dcontrols {
        justify-content: flex-start;
    }

    .hs-dsearch {
        flex: 1 1 100%;
    }

    .hs-dsearch__label {
        /* On a phone the placeholder carries the meaning; the label stays
           for screen readers but stops eating a third of the row. */
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .hs-dsearch__input {
        max-width: none;
    }
}

/* ============================================================
   SORT CONTROL — .hs-sort
   Renders above the archive grid on shop CPT archives.
   ============================================================ */
.hs-sort {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 16px;
}

.hs-sort__label {
    font-size: 13px;
    color: #555;
}

.hs-sort__select {
    font-size: 13px;
    padding: 4px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
}

.hs-sort__submit {
    font-size: 13px;
    padding: 4px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #f5f5f5;
    cursor: pointer;
}

/* ============================================================
   Author archive header card — GP loop-template element 1226396.
   Avatar (left) beside name + role + bio (right) in a card that
   reuses the .hs-dcard shell tokens (radius 14px, padding 28px,
   shadow, #fff). Stacks + centers on mobile. Sits above the
   "Latest from …" heading and the author post grid.
   ============================================================ */
.hs-author-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 28px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 6px 30px rgba(0, 0, 0, .08);
    padding: 28px;
    margin: 24px 0 32px;
    max-width: 100%;
}

.hs-author-header__avatar {
    flex: 0 0 110px;
    width: 110px;
    height: 110px;
    margin: 0;
    line-height: 0;
}

.hs-author-header__avatar img {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.hs-author-header__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

/* Name leads the card at the archive-title scale (mirrors .hs-dcard__title). */
.hs-author-header__name {
    font-size: clamp(1.5rem, 5vw, 2rem);
    font-weight: 800;
    line-height: 1.15;
    color: #111;
    margin: 0;
}

/* Small, muted, uppercase tracking — matches the site's "from"/disclosure muting. */
.hs-author-header__role {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin: 0 0 4px;
}

.hs-author-header__bio {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    color: #374151;
    max-width: 60ch;
    margin: 0;
}

/* Mobile: stack avatar above body, center everything. */
@media (max-width: 767px) {
    .hs-author-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 18px;
        padding: 24px;
        border-radius: 12px;
    }
    .hs-author-header__body {
        align-items: center;
    }
    .hs-author-header__bio {
        max-width: 100%;
    }
}

/* Suppress an empty header card on a zero-post author. The header dynamic
   tags resolve from the queried post; with no posts there is no name/avatar/
   bio, so :empty (and the name-only fallback) leaves nothing meaningful —
   collapse the card so no blank box renders. A name still shows via the
   HTF page-header is_author() H1 path. */
.hs-author-header:not(:has(.hs-author-header__name)),
.hs-author-header:has(.hs-author-header__name:empty):not(:has(.hs-author-header__bio)):not(:has(.hs-author-header__avatar img[src])) {
    display: none;
}

/* ============================================================
   HS-117 archive grid — robust auto-fit column sizing.

   LAYOUT-WIDTH mechanism (HS-117): GP sidebar ratio is set via the
   HTF filter generate_right_sidebar_width → 24% sitewide (was GP
   default 30%). Content column ~973px at 1280 container. The old
   per-page body.hs-curated-index.right-sidebar .grid-container
   max-width:1500px override has been REMOVED — container is 1280px
   sitewide everywhere. No .content-area / .is-right-sidebar CSS
   overrides remain here; those belong in the GP filter (HTF owns it).

   KEPT below: the auto-fit grid rule (harmless improvement — the
   grid fills as many roomy columns as the real column width allows,
   instead of a fixed viewport-based count), the curated-card gap,
   the 3-up explicit grid pin (clip guard), and curated text-wrap
   rules.
   ============================================================ */

/* Robust archive grid: auto-fit on the real column width, not a
   fixed viewport-based count. Gracefully fills as many columns as
   the column width allows and drops to fewer as it narrows. */
body .hs-archive__grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* HS-117 card-style revision: more breathing room between CURATED cards.
   Scoped via :has(.hs-dcard--post) so only curated (post) grids widen the
   gap — the directory-archive grid keeps its base 24px. (was: base 24px) */
body .hs-archive__grid:has(.hs-dcard--post) {
    gap: 36px;
}

/* HS-117 r2: FULL-WIDTH (no-sidebar) curated pages render 4-up.
   Brandy: "advents need to be 4 up as do black friday." Scoped to
   body.no-sidebar + the curated-grid wrapper so ONLY the full-width
   curated pages (advent, black friday) force 4 columns. Sidebar
   curated pages (spoilers/reviews on right-sidebar) are NOT matched
   and keep their narrower auto-fit fit. !important defeats the
   auto-fit rule above on the same element. */
body.no-sidebar .hs-curated-grid .hs-archive__grid {
    grid-template-columns: repeat(4, 1fr) !important;
}
@media (max-width: 1000px) {
    body.no-sidebar .hs-curated-grid .hs-archive__grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 600px) {
    body.no-sidebar .hs-curated-grid .hs-archive__grid {
        grid-template-columns: 1fr !important;
    }
}


/* HS-117 R2: 3-up curated grid on sidebar pages, scoped to hs-curated-index so
   no-sidebar advent/BF (4-up) and directory archive are completely untouched.
   minmax(0,1fr) removes the implicit min-width clip. */
body.hs-curated-index.right-sidebar .hs-curated-grid .hs-archive__grid,
body.hs-curated-index.left-sidebar  .hs-curated-grid .hs-archive__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
/* HS-117: curated 3→2 breakpoint aligned to prod (hellosubscription.com).
   Prod style.css @media (max-width: 1199px) sets nth-child(2n+1){margin-left:0}
   on .page-template-page-special-event .posts-grid li.hentry → 2-up at <1200px.
   THE mirrors this with max-width: 1199.98px (one sub-pixel below prod's 1200px
   min-width equivalent) so both sites cut 3→2 at exactly the same breakpoint. */
@media (max-width: 1199.98px) {
  body.hs-curated-index.right-sidebar .hs-curated-grid .hs-archive__grid,
  body.hs-curated-index.left-sidebar  .hs-curated-grid .hs-archive__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 600px) {
  body.hs-curated-index.right-sidebar .hs-curated-grid .hs-archive__grid,
  body.hs-curated-index.left-sidebar  .hs-curated-grid .hs-archive__grid {
    grid-template-columns: 1fr !important;
  }
}

/* HS-117: floor the 24% sitewide sidebar so it stops shrinking into a sliver
   between the desktop and the stack point. 300px keeps the Featured 16:9
   card + list thumbs legible. Scoped to body.right-sidebar to exclude the
   subscription-surface both-sidebars layout (which carries body.both-sidebars,
   not body.right-sidebar — no subscription-surface body class exists in PHP).
   Stack point raised to match prod's col-md-* breakpoint (min-width:992px). */
@media (min-width: 992px) {
  body.right-sidebar .is-right-sidebar { min-width: 300px; }
}

/* HS-117: stack the sidebar to match prod's Bootstrap col-md breakpoint.
   Prod style.css @media (min-width: 992px) floats .col-md-9/.col-md-3 —
   so below 992px the sidebar stacks. THE mirrors this with max-width:991.98px.
   !important required because GP's inline generate_no_cache_dynamic_css emits
   .content-area{width:76%} without !important; the enqueued HDP stylesheet wins. */
@media (max-width: 991.98px) {
  body.right-sidebar .is-right-sidebar,
  body.right-sidebar .site-content .content-area { width: 100% !important; }
  body.right-sidebar .is-right-sidebar { min-width: 0; }
}

/* ============================================================
   HS-368 — admin-only Edit button on box surfaces.
   Server-rendered ONLY for logged-in editors (box_edit_button()),
   so anonymous/cached HTML never contains it. z-index sits above
   .hs-dcard's stretched whole-card link so the button is clickable.
   ============================================================ */
.hs-box-edit {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 4px 9px;
    border-radius: 6px;
    background: #111;
    color: #fff;
    text-decoration: none;
    opacity: .75;
}
.hs-box-edit:hover,
.hs-box-edit:focus {
    opacity: 1;
    color: #fff;
    text-decoration: none;
}

/* HS-405: the admin strip holds MULTIPLE chips — the container takes the
   card's absolute top-right slot and lays chips in a row; chips themselves
   must be static or they all stack in the same corner (Brandy screenshot,
   2026-08-11). */
.hs-box-admin-links {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    display: flex;
    gap: 4px;
}
.hs-box-admin-links .hs-box-edit {
    position: static;
    top: auto;
    right: auto;
}
/* Floating bar: inline row right of the price, not absolute. */
#floating-bottom-bar .hs-box-admin-links {
    position: static;
    display: inline-flex;
    gap: 4px;
    margin-left: 8px;
    vertical-align: middle;
}

/* Floating bar: inline next to the box title, not absolute. */
#floating-bottom-bar .hs-box-edit {
    position: static;
    margin-left: 8px;
    vertical-align: middle;
    /* .box-title a (0,1,1) outranks .hs-box-edit (0,1,0) — re-assert white
       under this ID selector or the chip is black-on-black (reviewer catch). */
    color: #fff;
    text-decoration: none;
}
#floating-bottom-bar .hs-box-edit:hover,
#floating-bottom-bar .hs-box-edit:focus {
    color: #fff;
    text-decoration: none;
}

/* Long coupon text must not grow the floating bar (Brandy 2026-08-09:
   "Good Chop Coupon – $130 Off Your First FOUR..." wrapped the bar tall).
   Clamp the deal text to one ellipsized line; the code + CTA stay intact. */
#floating-bottom-bar .coupon-info {
    display: block;
    max-width: 34ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0;
}
@media (max-width: 767px) {
    #floating-bottom-bar .coupon-info {
        max-width: 16ch;
    }
}

/* Sidebar section headers ("Discover a Deal" etc.) sat too far above their
   post lists (Brandy 2026-08-09) — they carry no margin of their own, so they
   inherit the theme's full h2 bottom margin. Tighten, sidebar-scoped. */
.inside-right-sidebar h2.gb-headline {
    margin-bottom: 8px;
    padding-bottom: 6px;
}

/* HS-440: sidebar section heading treatment. Deliberately a structural rule
   here, NOT GenerateBlocks block attributes — GB compiles its per-uniqueId CSS
   per PAGE and caches it permanently, and no element edit invalidates it, so a
   page whose file predated a new section rendered that heading unstyled. This
   selector is enqueued site-wide and filemtime-busted, so it cannot go stale;
   its specificity also wins over GB's where GB's copy still exists. Values
   replicate what GB emitted where it worked — a delivery fix, not a restyle.
   Do not move these back into block attrs. */
.inside-right-sidebar h2.gb-headline {
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    border-bottom-width: 2px;
    border-bottom-style: solid;
}

/* ============================================================
   MOBILE CATEGORY NAV — under the page title. HS-260.
   Brandy: "can you move it under the page title."

   The tree renders TWICE and each copy shows at exactly one
   breakpoint:
     .hs-dcatnav-mobile  in the content flow, under the archive
                         title and above the grid  -> mobile only
     #left-sidebar copy  -> desktop only

   Why two copies rather than moving one: #left-sidebar is a
   SIBLING of #primary, and the page title lives inside #primary.
   CSS `order` can put the sidebar above or below the content as
   a whole, but it cannot place it BETWEEN the title and the grid.
   An earlier attempt used `order: -1` and put the nav above the
   title, which is not what was asked for.

   The nav stays collapsed behind the "Categories" tap target, so
   it costs one row rather than 96 links.
   ============================================================ */

/* Desktop: the in-content copy does not exist. */
.hs-dcatnav-mobile {
    display: none;
}

@media (max-width: 768px) {
    .hs-dcatnav-mobile {
        display: block;
        margin: 0 0 12px;
    }

    /* ...and the sidebar copy stands down, so only one is ever on screen. */
    body.post-type-archive-shop #left-sidebar,
    body.tax-subscriptions #left-sidebar,
    body.tax-shop-category #left-sidebar,
    body.tax-subscription_tag #left-sidebar {
        display: none;
    }
}