/**
 * Sticky Add to Cart bar — standalone copy (v1.6.21)
 *
 * The phone sticky bar is part of the 2026 product page design
 * (assets/css/hd-product.css, "Sticky Add to Cart bar"). While that design is
 * switched off (hd_product_settings() → 'enabled' => false) the bar still
 * prints on product pages, and this file — the same rules, copied as they
 * are, plus the colour / font variables they use — styles it. With the design
 * on, hd-product.css loads instead and this file does not.
 *
 * Keep the two copies the same: a change to the bar goes in both files.
 *
 * @package thdretail-child
 */

:root {
  --hd-blue-stone: #025960;
  --hd-california: #FC9E01;
  --hd-firefly: #113D3C;
  --hd-font-body: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --hd-font-display: "DM Serif Display", "Playfair Display", Georgia, "Times New Roman", serif;
  --hd-gray: #8A8A8A;
  --hd-nebula: #D4E0DE;
  --hd-radius-pill: 100px;
  --hd-sirocco: #6B7F7E;
}

/* ---------- Sticky Add to Cart bar (phones only) ----------
   Printed by hd_product_sticky_bar(); hd-product.js slides it in once the
   real Add to Cart button has scrolled away. Desktop never shows it.
   [thumb] [TITLE / price (+ was-price) / plan caption] [pill button]
   The left part is a tap target back to the options; the plan caption reads
   "One-time purchase" or "⟳ Every 2 weeks · Save 25%" on subscribe-able products. */
.hd-sticky { display: none; }
@media (max-width: 767px) {
  .hd-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
    display: block;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #fff;
    border-top: 1px solid var(--hd-nebula);
    box-shadow: 0 -8px 28px rgba(17, 61, 60, .14);
    font-family: var(--hd-font-body);
    transform: translateY(110%);
    transition: transform .25s ease;
    -webkit-font-smoothing: antialiased;
  }
  .hd-sticky.is-visible { transform: none; }
  .hd-sticky__inner { display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 12px; }
  /* Left part: a real button (jumps back to the options) that looks like plain content */
  .hd-sticky .hd-sticky__summary, .hd-sticky .hd-sticky__summary:hover, .hd-sticky .hd-sticky__summary:focus, .hd-sticky .hd-sticky__summary:active { display: flex; flex: 1 1 auto; align-items: center; gap: 10px; min-width: 0; height: auto; margin: 0; padding: 0; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; letter-spacing: normal; text-transform: none; text-align: left; cursor: pointer; box-shadow: none; -webkit-appearance: none; appearance: none; }
  .hd-sticky .hd-sticky__summary:focus-visible { outline: 2px solid var(--hd-blue-stone); outline-offset: 3px; }
  .hd-sticky .hd-sticky__img { flex: none; width: 48px !important; height: 48px !important; max-width: none; margin: 0; padding: 3px; border: 1px solid var(--hd-nebula); border-radius: 10px; object-fit: contain; background: #fff; }
  .hd-sticky__text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; gap: 1px; }
  .hd-sticky__title { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; font-weight: 600; letter-spacing: .04em; line-height: 1.3; text-transform: uppercase; color: var(--hd-firefly); }
  .hd-sticky__price { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-family: var(--hd-font-body); font-size: 17px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; color: var(--hd-blue-stone); }
  .hd-sticky__price .amount, .hd-sticky__price bdi { font-family: inherit; font-size: inherit; font-weight: inherit; color: inherit; }
  .hd-sticky__price ins { text-decoration: none; }
  .hd-sticky__price del { order: 2; font-size: 12px; font-weight: 600; color: var(--hd-gray); text-decoration: line-through; }
  .hd-sticky__price del .amount { color: inherit; }
  .hd-sticky__price .screen-reader-text, .hd-sticky__price .wcsatt-sub-options, .hd-sticky__price .wcsatt-dash, .hd-sticky__price .wcsatt-sub-discount, .hd-sticky__price .wcsatt-options-wrapper { display: none !important; }
  .hd-sticky__plan { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; overflow: hidden; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: .01em; color: var(--hd-sirocco); }
  .hd-sticky__plan[hidden] { display: none; }
  .hd-sticky__plan > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .hd-sticky__plan--sub { color: var(--hd-blue-stone); }
  .hd-sticky__plan-icon { flex: none; width: 12px; height: 12px; }
  /* Button: the brand pill; "Sign Up Now" (subscription) is a touch wider than "Add To Cart" */
  .hd-sticky__btn { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 124px; max-width: 46%; height: var(--hd-btn-h-sm, 40px); margin: 0; padding: 0 18px; border: 0; border-radius: var(--hd-radius-pill, 100px); background: var(--hd-california); color: #fff; font-family: var(--hd-font-display); font-size: 16px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; box-shadow: 0 4px 14px rgba(252, 158, 1, .28); transition: background .15s, box-shadow .15s; }
  .hd-sticky__btn:hover, .hd-sticky__btn:active { background: #E68E00; color: #fff; box-shadow: none; }
  .hd-sticky__btn:focus-visible { outline: 2px solid var(--hd-blue-stone); outline-offset: 2px; }
  body.hd-sticky-visible { padding-bottom: var(--hd-sticky-h, calc(72px + env(safe-area-inset-bottom, 0px))); }
  body.hd-sticky-visible .kadence-scroll-to-top, body.hd-sticky-visible #kt-scroll-up { bottom: calc(var(--hd-sticky-h, 72px) + 12px); }
}
@media (max-width: 389px) {
  .hd-sticky__inner { gap: 8px; padding-left: 10px; padding-right: 10px; }
  .hd-sticky .hd-sticky__img { width: 42px !important; height: 42px !important; }
  .hd-sticky__price { font-size: 16px; }
  .hd-sticky__btn { min-width: 112px; padding: 0 14px; font-size: 15px; }
}
@media (max-width: 349px) {
  .hd-sticky .hd-sticky__img { display: none; }
  .hd-sticky__btn { min-width: 0; max-width: 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .hd-sticky { transition: none; }
}