/* ==========================================================================
   product.css — Single product page
   Herba Sparsh Child Theme · loaded on is_product() only
   --------------------------------------------------------------------------
   Gallery + purchase panel become a two-column grid; everything below
   (tabs, ingredients, related products) is a single centred column.
   ========================================================================== */

/* ---- Column + breadcrumb (same fix as shop.css / cart-checkout-account) ----
   Deliberately wider than the shared --content-max-width (1200px) used
   everywhere else on the site: on a wide desktop monitor, 1200px left
   several hundred empty pixels of gutter on each side of the product
   page specifically — a product page has no sidebar/secondary content to
   fill that space, unlike e.g. the shop grid, which just grows another
   column. Widening ONLY here (not the shared token, which other
   sections rely on) lets the actual gallery image and purchase panel
   grow into that room instead of just padding dead margin. */
.single-product .site-content > .col-full,
.single-product .storefront-breadcrumb > .col-full {
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: var(--space-xl);
    box-sizing: content-box;
}

.single-product #primary.content-area {
    float: none;
    width: 100%;
    margin: 0;
}

.single-product .storefront-breadcrumb {
    margin: 0;
    padding: var(--space-md) 0 0;
    background: transparent;
}

.single-product .woocommerce-breadcrumb {
    margin: 0 0 var(--space-lg);
    padding: 0;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-foreground-muted);
}

/* ---- Gallery image itself: WooCommerce bakes a fixed intrinsic width into
   the <img> tag from wc_get_image_size('single') — 416px here, resolved
   from theme/layout heuristics rather than this theme's own 604px column —
   so the tag's own width/height attributes must be overridden or the image
   sits small inside its now-full-width wrapper. width:100%/height:auto
   scales it to fill the column at its own aspect ratio (no cropping). ---- */
.woocommerce div.product .woocommerce-product-gallery__image img,
.woocommerce div.product .woocommerce-product-gallery__wrapper img {
    width: 100%;
    height: auto;
}

/* ---- Gallery + purchase panel ----
   Flexbox, not CSS Grid: this was a 2-column CSS Grid (gallery + summary
   explicitly in row 1) with the tabs/related/upsells sections auto-placed
   into their own full-width row below. In every real-browser test that
   auto-placement reliably inserted one genuinely empty 0-height grid ROW
   immediately before whichever of those full-width sections was the
   LAST one placed (confirmed live: forcing one of them to an explicit
   row just moved the phantom row to sit before the next auto-placed one
   instead of removing it) — a real engine auto-placement quirk with this
   exact mix of explicit + auto-placed items, not a sizing/padding/margin
   issue, and not fixable by adjusting gap/padding since grid row-gap
   applies around a 0-height track exactly as it would a real one. That
   phantom row's OWN two row-gaps (one on each side of it) were the actual
   source of the oversized gap above the tabs and above the footer, not
   anything margin/padding could reach. Flexbox has no row-track concept
   to auto-place a phantom empty one into, so switching sidesteps the bug
   outright: gallery/summary share row 1 by flex-wrap, and every
   full-width section below (flex-basis:100%) just wraps onto its own
   line in DOM order, however many of them are present. */
.woocommerce div.product {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xl);
    align-items: flex-start;
    max-width: none;
}

/* The actual root cause of the phantom empty row/gap described above:
   Storefront applies a legacy float clearfix (content:"", display:table)
   to this element's ::before/::after — meaningless once it's a flex
   container, but `display:table` still generates a real box, and a real
   box inside a flex container becomes a real flex item. Two invisible
   zero-content flex items (one at the very start, one at the very end)
   each still pull in the container's `gap` on both sides of themselves —
   that's the actual source, not anything about padding, margin, or grid
   auto-placement. Confirmed live: the gaps match exactly, to the pixel,
   once these are killed off. */
.woocommerce div.product::before,
.woocommerce div.product::after {
    content: none !important;
    display: none !important;
}

.woocommerce div.product .woocommerce-product-gallery {
    /* Storefront ships its OWN bundled woocommerce.css (separate from the
       WooCommerce plugin's), with `.single-product div.product
       .woocommerce-product-gallery { width: 39.13%; float: left; }` at
       exactly this specificity (0,3,1) — a tie with the selector below — and
       it happens to be enqueued after this stylesheet, so on a tie it wins
       the cascade. Confirmed by walking document.styleSheets in the console,
       not assumed. !important is the honest fix for a same-specificity,
       later-in-cascade rule from a file this theme doesn't control. */
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    /* Same story again: Storefront's rule also sets position:relative,
       which otherwise wins non-important and turns "stick at this offset
       once scrolled" into "always sit shifted down from its normal spot". */
    position: sticky !important;
    top: calc(var(--navbar-height) + var(--space-lg));
    /* Slightly wider than the summary column (mirrors the old 1.05fr),
       flex-basis:0 so the two columns divide the row strictly by this
       ratio rather than by content's own natural width. */
    flex: 1.05 1 0%;
    min-width: 0;

    /* Thumbnails on the left of the main image, not stacked below it.
       WooCommerce/Flexslider appends `.flex-control-thumbs` as a sibling
       AFTER `.woocommerce-product-gallery__wrapper` in the DOM — row-reverse
       flips the visual order without touching markup or the thumbnail
       click targets flexslider wires up. align-items left at its flex
       default (stretch) so the thumbnail column matches the main image's
       rendered height and can scroll internally if there are more
       thumbnails than fit (see .flex-control-thumbs in woocommerce.css). */
    display: flex !important;
    flex-direction: row-reverse !important;
    gap: var(--space-sm) !important;
}

.woocommerce div.product .woocommerce-product-gallery__wrapper {
    flex: 1 1 auto;
    min-width: 0;
}

/* div.product's direct children are gallery, summary, tabs, related (in that
   DOM order) — only the first two belong in the 2-column row; everything
   after them must take the full row width so it wraps onto its own line
   below, whichever and however many of these sections are actually present
   on a given product (upsells/cross-sells are conditional). */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related.products,
.woocommerce div.product .upsells.products,
.woocommerce div.product .cross-sells {
    flex: 1 1 100%;
    width: 100%;
}

.woocommerce div.product .summary.entry-summary {
    /* Same fight as the gallery above, mirror image: Storefront's classic
       layout floats this side `float: right` (not left) at equal
       specificity — found empirically (computed style still showed
       float:right after a non-important reset), so it needs the same
       !important treatment, or it keeps floating instead of sitting in
       the flex row next to the gallery. */
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding-top: var(--space-sm);
    flex: 0.95 1 0%;
    min-width: 0;
}

.woocommerce div.product .product_title {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-foreground);
    line-height: 1.25;
    margin: 0 0 var(--space-sm);
}

.woocommerce div.product .woocommerce-product-rating {
    margin: 0 0 var(--space-md);
}

.woocommerce div.product p.price {
    font-family: var(--font-body);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 var(--space-lg);
}

.woocommerce div.product p.price del {
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--color-foreground-muted);
    opacity: 1;
}

.woocommerce div.product .woocommerce-product-details__short-description {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-foreground-muted);
    margin: 0 0 var(--space-lg);
}

.woocommerce div.product form.cart {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: center;
    margin: 0 0 var(--space-lg) !important;
}

/* ---- Quantity stepper: minus / number / plus as one pill (product.js adds
   the two buttons; the number input's own min/max — set server-side via
   woocommerce_quantity_input_args — are what actually enforce 1–10). ---- */
.woocommerce div.product form.cart .quantity {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-surface);
}

.woocommerce div.product form.cart .quantity input[type="number"] {
    width: 48px;
    border: none;
    border-radius: 0;
    padding: 0;
    -moz-appearance: textfield;
    appearance: textfield;
}

.woocommerce div.product form.cart .quantity input[type="number"]::-webkit-outer-spin-button,
.woocommerce div.product form.cart .quantity input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.hst-qty-btn {
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--color-muted);
    color: var(--color-primary);
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 200ms ease;
}

.hst-qty-btn:hover {
    background: var(--color-accent-tint);
}

.hst-qty-btn:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--color-accent);
}

.hst-qty-btn:active {
    background: var(--color-border);
}

.woocommerce div.product .stock {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 var(--space-lg);
}

.woocommerce div.product .stock.in-stock {
    color: var(--color-success);
}

.woocommerce div.product .stock.out-of-stock {
    color: var(--color-destructive);
}

/* ---- Pincode delivery check — our own widget, see
   hst_single_product_pincode_check() in inc/shipping.php. Positioned after
   the SKU/badge trust row (not full-width like the Shiprocket plugin's
   original) so it reads as a small, secondary tool, not a layout block of
   its own. ---- */
.hst-pincode-check {
    max-width: 340px;
    margin: var(--space-md) 0 0;
}

.hst-pincode-check__row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--color-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md);
}

.hst-pincode-check__icon {
    flex: 0 0 auto;
    display: flex;
    color: var(--color-secondary);
}

.hst-pincode-check__icon svg {
    width: 18px;
    height: 18px;
}

.hst-pincode-check__input {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--color-surface) !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
}

.hst-pincode-check__btn {
    flex: 0 0 auto;
    background: transparent !important;
    color: var(--color-primary) !important;
    border: 1.5px solid var(--color-primary) !important;
    padding: 8px 16px !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    white-space: nowrap;
    cursor: pointer;
    transition: all 200ms ease;
}

.hst-pincode-check__btn:hover {
    background: var(--color-primary) !important;
    color: var(--color-on-primary) !important;
}

.hst-pincode-check__btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.hst-pincode-check__response {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-foreground-muted);
    margin-top: var(--space-xs);
    min-height: 1em;
}

.hst-pincode-check__response.is-success {
    color: var(--color-success);
    font-weight: 600;
}

.hst-pincode-check__response.is-error {
    color: var(--color-destructive);
}

@media (max-width: 480px) {
    .hst-pincode-check {
        max-width: 100%;
    }
}

/* "Coming Soon" is a launch-timing label, not a problem — alarm-red (or
   the generic out-of-stock styling) wrongly implies something's wrong
   with the product. See inc/coming-soon.php for the dedicated
   availability-class filter this targets. */
.woocommerce div.product .stock.coming-soon {
    color: var(--color-secondary);
}

/* Pre-order: purchasable right now, so not the generic in-stock green
   either — its own colour (matches the card badge, inc/preorder.php). */
.woocommerce div.product .stock.pre-order {
    color: var(--color-accent-text);
}

/* ---- Pre-order countdown banner (inc/preorder.php,
   assets/js/preorder-countdown.js) — sits above the gallery/summary,
   ticking down to the moment the product unblocks. ---- */
.hst-preorder-countdown {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-accent-tint);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-md);
}

.hst-preorder-countdown__label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-foreground);
}

.hst-preorder-countdown__clock {
    display: flex;
    gap: var(--space-sm);
}

.hst-preorder-countdown__segment {
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-family: var(--font-body);
    font-variant-numeric: tabular-nums;
}

.hst-preorder-countdown__segment span {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-accent-text);
}

.hst-preorder-countdown__segment small {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-foreground-muted);
    text-transform: lowercase;
}

@media (max-width: 480px) {
    .hst-preorder-countdown {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ---- "Made with" ingredient chips ----
   The label sits on its own line, above the chips, rather than sharing a row
   with them: the purchase panel is a fixed-width column (capped by
   --content-max-width, same at 1440px or 2560px — a wider browser window
   doesn't widen it), so every character the label used to take inline was
   width the chips didn't have, and that's what was forcing an early wrap. */
.hst-pdp-chips {
    margin: 0 0 var(--space-lg);
}

.hst-pdp-chips__label {
    display: block;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-foreground-muted);
    margin: 0 0 var(--space-sm);
}

.hst-pdp-chips__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs) var(--space-sm);
}

/* ---- "How to Apply" only: tighter gap so the arrow sits snugly between
   steps instead of floating in the middle of a wide flex gap. ---- */
.hst-pdp-chips__row--steps {
    gap: var(--space-xs) 2px;
}

.hst-pdp-step-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    flex-shrink: 0;
    color: var(--color-border-hover);
}

.hst-pdp-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 6px;
    border-radius: var(--radius-full);
    background: var(--color-muted);
    color: var(--color-foreground);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 200ms ease, transform 150ms ease;
}

.hst-pdp-chip:hover {
    background: var(--color-accent-tint);
    transform: translateY(-1px);
}

.hst-pdp-chip .hst-ing-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

/* ---- Chip tooltip: the ingredient's benefit blurb (its taxonomy term
   Description field, already entered in wp-admin — nothing new to fill in)
   shown on hover/keyboard-focus, so a shopper learns what an ingredient
   does without leaving the purchase panel or opening the tab.
   A real element (not ::after generated content), because the horizontal
   position needs to be corrected by JS (product.js) when the default
   centred position would run the bubble off the edge of the viewport — the
   first chip in the row sits close to the left edge on narrow screens, and
   a fixed centred/edge-anchored CSS rule can't know that in advance. The
   arrow is a SEPARATE element anchored to the chip itself (not the bubble),
   so it always points at the chip's centre even when JS shifts the bubble. */
.hst-pdp-chip--has-tooltip {
    position: relative;
}

.hst-pdp-chip__tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(calc(-50% + var(--tt-shift, 0px))) translateY(4px);
    width: max-content;
    max-width: min(220px, calc(100vw - 32px));
    padding: 8px 12px;
    border-radius: var(--radius-md, 10px);
    background: var(--color-foreground);
    color: var(--color-background);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
    z-index: 20;
}

.hst-pdp-chip--has-tooltip::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border: 6px solid transparent;
    border-top-color: var(--color-foreground);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
    z-index: 20;
}

.hst-pdp-chip--has-tooltip:hover .hst-pdp-chip__tooltip,
.hst-pdp-chip--has-tooltip:hover::before,
.hst-pdp-chip--has-tooltip:focus-visible .hst-pdp-chip__tooltip,
.hst-pdp-chip--has-tooltip:focus-visible::before {
    opacity: 1;
    visibility: visible;
}

.hst-pdp-chip--has-tooltip:hover .hst-pdp-chip__tooltip,
.hst-pdp-chip--has-tooltip:focus-visible .hst-pdp-chip__tooltip {
    transform: translateX(calc(-50% + var(--tt-shift, 0px))) translateY(0);
}

.hst-pdp-chip--has-tooltip:hover::before,
.hst-pdp-chip--has-tooltip:focus-visible::before {
    transform: translateX(-50%) translateY(0);
}

/* Touch devices have no hover: fall back to a tap opening the Ingredients
   tab (already the chip's default behaviour), so nothing is lost there. */
@media (hover: none) {
    .hst-pdp-chip__tooltip,
    .hst-pdp-chip--has-tooltip::before {
        display: none;
    }
}

/* An admin-uploaded icon (inc/ingredients.php) is a real photo/image, not
   drawn art — crop it to a small circle so it sits at the same visual
   weight as the hand-drawn ones regardless of its own aspect ratio. */
.hst-ing-icon--uploaded {
    border-radius: var(--radius-full);
    object-fit: cover;
}

/* ---- Trust row ---- */
.hst-pdp-trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    margin: 0 0 var(--space-lg);
    padding: var(--space-md) 0 0;
    border-top: 1px solid var(--color-border);
    list-style: none;
}

.hst-pdp-trust li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-foreground-muted);
}

.hst-pdp-trust svg {
    color: var(--color-accent);
    flex-shrink: 0;
}

/* ---- Meta line (SKU / category / tags) ---- */
.hst-product-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-foreground-muted);
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-md);
}

.hst-product-meta a {
    color: var(--color-secondary);
}

/* ---- Ingredients tab: just the full list now (icon cards removed —
   the "Made with" chips in the purchase panel are the illustrated part). ---- */
.hst-ing-full {
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
}

.hst-ing-full h3 {
    margin: 0 0 var(--space-sm);
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-foreground);
}

.hst-ing-full__list {
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--color-foreground-muted);
    margin: 0 0 var(--space-sm);
}

.hst-ing-full__note {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-foreground-muted);
    margin: 0;
}

/* ---- Reviews: "must be logged in" message ---- */
.woocommerce-Reviews .must-log-in {
    padding: var(--space-lg);
    background: var(--color-muted);
    border-radius: var(--radius-lg);
    font-family: var(--font-body);
    color: var(--color-foreground);
}

.woocommerce-Reviews .must-log-in a {
    font-weight: 600;
    color: var(--color-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- Related products heading, matching the shop/homepage pattern ---- */
.single-product .related.products > h2 {
    text-align: center;
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-foreground);
    margin: var(--space-3xl) 0 var(--space-xl);
}

/* ---- Small screens: stack, drop the sticky gallery ---- */
@media (max-width: 900px) {
    .woocommerce div.product {
        gap: var(--space-xl);
    }

    .woocommerce div.product .woocommerce-product-gallery,
    .woocommerce div.product .summary.entry-summary {
        /* The desktop ratio (flex: 1.05/0.95) only makes sense in the
           2-column row; full width each so they stack instead of trying
           to share a now much narrower row. */
        flex-basis: 100%;
    }

    .woocommerce div.product .woocommerce-product-gallery {
        position: static !important;
    }

    .woocommerce div.product .product_title {
        font-size: 1.625rem;
    }
}

@media (max-width: 480px) {
    .single-product .site-content > .col-full,
    .single-product .storefront-breadcrumb > .col-full {
        padding-inline: var(--space-lg);
    }

    /* Quantity stepper (~130px) pairs naturally with Add to Cart on one
       row — there's room. Buy Now forced onto its own full-width row via
       flex-basis: 100% (the standard flex-wrap line-break trick) rather
       than stacking all three, which left Add to Cart and Buy Now too
       narrow for their own text at this width. Buy Now ending up
       full-width is a net win anyway — more visual weight on the actual
       conversion button, not just a layout compromise. */
    .woocommerce div.product form.cart {
        align-items: center;
    }

    .woocommerce div.product form.cart .quantity {
        flex: 0 0 auto;
    }

    .woocommerce div.product form.cart .single_add_to_cart_button {
        flex: 1 1 auto;
    }

    .woocommerce div.product form.cart .cfc-buy-now-button {
        flex: 1 1 100%;
    }
}

/* ---- "Notify me when back in stock" ---- */
.hst-notify {
    margin: var(--space-md) 0 var(--space-lg);
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 10px);
    background: var(--color-muted);
}

.hst-notify__label {
    margin: 0 0 var(--space-sm);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-foreground);
}

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

.hst-notify__form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

/* Email/Phone pill toggle — a sliding indicator behind two icon+label
   options, in the same rounded/accent language as the rest of the site
   (product.css's quantity stepper, the colour-theme swatches) rather than
   bare radio buttons. */
.hst-notify__channels {
    position: relative;
    flex: 1 1 100%;
    display: flex;
    padding: 3px;
    margin-bottom: 2px;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
}

.hst-notify__channel-indicator {
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(50% - 3px);
    height: calc(100% - 6px);
    background: var(--color-accent);
    border-radius: var(--radius-full);
    transition: transform 280ms cubic-bezier(0.65, 0, 0.35, 1);
    will-change: transform;
}

.hst-notify__channels.is-phone .hst-notify__channel-indicator {
    transform: translateX(100%);
}

.hst-notify__channel-option {
    position: relative;
    z-index: 1;
    flex: 1 1 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-foreground-muted);
    cursor: pointer;
    transition: color 200ms ease;
}

.hst-notify__channel-option svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    transition: transform 280ms cubic-bezier(0.65, 0, 0.35, 1);
}

.hst-notify__channel-option input {
    /* Visually hidden, not display:none — stays in the tab order and
       operable by assistive tech; the label itself carries the visible
       state via :has() below. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hst-notify__channel-option:has(input:checked) {
    color: var(--color-on-accent, #fff);
}

.hst-notify__channel-option:has(input:checked) svg {
    transform: scale(1.08);
}

.hst-notify__channel-option:has(input:focus-visible) {
    outline: 2px solid var(--color-ring, var(--color-accent));
    outline-offset: 2px;
}

.hst-notify__contact-wrap {
    position: relative;
    flex: 1 1 200px;
    min-width: 0;
}

.hst-notify__email,
.hst-notify__phone {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: 0.875rem;
    background: var(--color-background);
    color: var(--color-foreground);
    transition: opacity 220ms ease, transform 220ms ease;
}

/* Crossfade rather than snap: the outgoing field lifts out of flow and
   fades while the incoming one settles into place. */
.hst-notify__email.is-hidden,
.hst-notify__phone.is-hidden {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
}

.hst-notify__btn {
    flex: 0 0 auto;
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-full);
    background: var(--color-accent);
    color: var(--color-on-accent, #fff);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 200ms ease;
}

.hst-notify__btn:hover {
    background: var(--color-accent-hover, var(--color-accent));
}

.hst-notify__status {
    margin: var(--space-sm) 0 0;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-foreground-muted);
}

.hst-notify__status:empty {
    margin: 0;
}