/**
 * Mobile refinements — loaded last so it can correct earlier sheets without
 * editing them. Everything here is additive: removing this file returns the
 * theme to its previous behaviour.
 *
 * 1. Touch targets
 * 2. Product rail position indicator
 * 3. PDP dosage selector + sticky buy bar
 * 4. Checkout auth gate order summary
 */

/* ------------------------------------------------------------------ *
 * 1. Touch targets
 * ------------------------------------------------------------------ */

/**
 * Header icons stay 36px visually (the hover disc is part of the design) but get
 * a 44px hit area via an overlay. The header action gap is 8px, so ±4px on each
 * neighbour makes the targets meet exactly without overlapping.
 */
@media (max-width: 1023px) {
  body.ts-v3-home .ts-v10-header__actions .ts-v10-icon-btn,
  body.ts-v3-home .ts-v10-header__actions .wc-block-mini-cart__button,
  body.ts-v3-home
    .ts-v10-header__actions
    button.wp-block-navigation__responsive-container-open,
  body.ts-v10 .ts-v10-header__actions .ts-v10-icon-btn,
  body.ts-v10 .ts-v10-header__actions .wc-block-mini-cart__button,
  body.ts-v10
    .ts-v10-header__actions
    button.wp-block-navigation__responsive-container-open {
    position: relative;
    overflow: visible !important;
  }

  body.ts-v3-home .ts-v10-header__actions .ts-v10-icon-btn::after,
  body.ts-v3-home .ts-v10-header__actions .wc-block-mini-cart__button::after,
  body.ts-v3-home
    .ts-v10-header__actions
    button.wp-block-navigation__responsive-container-open::after,
  body.ts-v10 .ts-v10-header__actions .ts-v10-icon-btn::after,
  body.ts-v10 .ts-v10-header__actions .wc-block-mini-cart__button::after,
  body.ts-v10
    .ts-v10-header__actions
    button.wp-block-navigation__responsive-container-open::after {
    content: '';
    position: absolute;
    inset: -0.25rem;
    border-radius: inherit;
  }
}

/* Cart drawer: quantity steppers, remove, and upsell controls. */
@media (max-width: 1023px) {
  body .wc-block-mini-cart__drawer .wc-block-components-quantity-selector__button {
    position: relative;
  }

  body
    .wc-block-mini-cart__drawer
    .wc-block-components-quantity-selector__button::after {
    content: '';
    position: absolute;
    /* 24x26 visual -> 44x44 touch. */
    inset: -0.5625rem -0.625rem;
  }

  body .wc-block-mini-cart__drawer .wc-block-cart-item__remove-link {
    position: relative;
  }

  body .wc-block-mini-cart__drawer .wc-block-cart-item__remove-link::after {
    content: '';
    position: absolute;
    /* 21x21 visual -> 44x44 touch. */
    inset: -0.71875rem;
  }

  body .wc-block-mini-cart__drawer .ts-cart-upsells__dot {
    position: relative;
  }

  body .wc-block-mini-cart__drawer .ts-cart-upsells__dot::after {
    content: '';
    position: absolute;
    /* 6px visual -> 44px touch. Dots sit in a flex row with generous gap. */
    inset: -1.1875rem;
  }

  body .wc-block-mini-cart__drawer .ts-cart-upsell__dose-pill,
  body .wc-block-mini-cart__drawer .ts-bac-upsell__add {
    min-height: 2.125rem;
  }
}

/* Quality tabs: 32px -> 44px, and snap so a partial tab never rests mid-word. */
@media (max-width: 1023px) {
  body.ts-v3-home .ts-home-bento__quality-tabs {
    scroll-snap-type: x proximity;
    scroll-padding-inline: 1rem;
  }

  body.ts-v3-home .ts-home-bento__quality-tab {
    min-height: 2.75rem;
    scroll-snap-align: start;
  }
}

/* ------------------------------------------------------------------ *
 * 2. Product rail position indicator
 * ------------------------------------------------------------------ */

body.ts-v3-home .ts-home-bento__carousel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 18px gap + 7px dot = a 25px pitch, so the expanded hit areas below reach
     25x44 and tile the strip with no dead space between them. */
  gap: 1.125rem;
  margin: 1rem auto 0;
  padding: 0;
}

body.ts-v3-home .ts-home-bento__carousel-dot {
  position: relative;
  flex: 0 0 auto;
  width: 0.4375rem;
  height: 0.4375rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}

/* 7px visual -> 25x44 touch, without widening the row. */
body.ts-v3-home .ts-home-bento__carousel-dot::after {
  content: '';
  position: absolute;
  inset: -1.15625rem -0.5625rem;
}

body.ts-v3-home .ts-home-bento__carousel-dot.is-active {
  background: rgba(255, 255, 255, 0.95);
  transform: scale(1.35);
}

body.ts-v3-home .ts-home-bento__carousel-dot:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 3px;
}

@media (min-width: 1024px) {
  /* The full rail is visible on desktop, so the indicator is redundant there. */
  body.ts-v3-home .ts-home-bento__carousel-dots {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.ts-v3-home .ts-home-bento__carousel-dot {
    transition: none;
  }
}

/* ------------------------------------------------------------------ *
 * 3. PDP dosage selector + sticky buy bar
 * ------------------------------------------------------------------ */

/* Dosage pills were 40x40 circles floating over the hero image with no label. */
@media (max-width: 899px) {
  body.ts-v3-pdp .ts-pdp-hero__dose {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
}

body.ts-v3-pdp .ts-pdp-sticky-atc {
  position: fixed;
  z-index: 60;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom));
  /* --ts-blue-surface at 0.97 rather than the flat token, so the blur still
     reads as content passing underneath. */
  border-top: 1px solid #d1d5db;
  background: rgba(238, 244, 250, 0.97);
  backdrop-filter: blur(12px);
  box-shadow: 0 -6px 24px rgba(12, 49, 71, 0.12);
  transform: translateY(100%);
  transition: transform 0.2s ease;
}

body.ts-v3-pdp .ts-pdp-sticky-atc.is-visible {
  transform: translateY(0);
}

/**
 * The bar dims with the page while the dropup is open, so the panel is the only
 * lit surface. It gets its own overlay instead of being covered by the scrim
 * because the panel is a child of the bar and would darken along with it.
 */
body.ts-v3-pdp .ts-pdp-sticky-atc::after {
  position: absolute;
  z-index: 7;
  background: rgba(4, 26, 45, 0.55);
  content: '';
  /* -1px at the top so the bar's own border is dimmed too, rather than staying
     lit as a pale line across the top of a dark bar. */
  inset: -1px 0 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

body.ts-v3-pdp .ts-pdp-sticky-atc.has-open-panel::after {
  opacity: 1;
  pointer-events: auto;
}

body.ts-v3-pdp .ts-pdp-sticky-atc__media {
  display: flex;
  overflow: hidden;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 2.5rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(12, 49, 71, 0.1);
  border-radius: 0.5rem;
  background: #fff;
}

body.ts-v3-pdp .ts-pdp-sticky-atc__media[hidden] {
  display: none;
}

body.ts-v3-pdp .ts-pdp-sticky-atc__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.ts-v3-pdp .ts-pdp-sticky-atc__meta {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.125rem;
}

body.ts-v3-pdp .ts-pdp-sticky-atc__name {
  overflow: hidden;
  color: #1c3144;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.ts-v3-pdp .ts-pdp-sticky-atc__line {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.375rem;
}

body.ts-v3-pdp .ts-pdp-sticky-atc__price {
  color: rgba(28, 49, 68, 0.72);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
}

body.ts-v3-pdp .ts-pdp-sticky-atc__variant {
  position: relative;
  display: inline-flex;
  max-width: 9rem;
  align-items: center;
  padding: 0.125rem 0.4375rem;
  border: 1px solid rgba(12, 49, 71, 0.16);
  border-radius: 999px;
  margin: 0;
  background: rgba(12, 49, 71, 0.05);
  color: #0c3147;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  gap: 0.25rem;
  line-height: 1.3;
}

/* The chip has to stay small to sit inline with the price, so the touch target
   is grown past its painted box instead. Bleeds up over the product name, which
   is not interactive, and stops short of the price to its right. */
body.ts-v3-pdp .ts-pdp-sticky-atc__variant::after {
  position: absolute;
  content: '';
  inset: -0.75rem -0.1875rem;
}

body.ts-v3-pdp .ts-pdp-sticky-atc__variant[hidden] {
  display: none;
}

body.ts-v3-pdp .ts-pdp-sticky-atc__variant-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.ts-v3-pdp .ts-pdp-sticky-atc__variant svg {
  flex: 0 0 auto;
  opacity: 0.55;
  transition: transform 0.15s ease;
}

/* Nothing picked yet — the chip is the prompt, not just a readout. */
body.ts-v3-pdp .ts-pdp-sticky-atc__variant.is-empty {
  border-color: rgba(196, 106, 30, 0.4);
  background: rgba(196, 106, 30, 0.1);
  color: #a4560f;
}

/**
 * Scrim behind the open dropup. Sits at 59, one below the bar and above the
 * sticky header (40), so the whole page dims and the panel is the only lit
 * thing left. touch-action stops a drag from scrolling the page underneath.
 */
body.ts-v3-pdp .ts-pdp-sticky-atc-scrim {
  position: fixed;
  z-index: 59;
  inset: 0;
  background: rgba(4, 26, 45, 0.55);
  opacity: 0;
  pointer-events: none;
  touch-action: none;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
  visibility: hidden;
}

body.ts-v3-pdp .ts-pdp-sticky-atc-scrim.is-visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

body.ts-v3-pdp .ts-pdp-sticky-atc__variant[aria-expanded='true'] svg {
  opacity: 1;
  transform: rotate(180deg);
}

/**
 * Dropup. Same panel language as the product card variation dropup
 * (.ts-v10-variation-dropup) so switching dose feels identical wherever the
 * shopper does it — only the anchoring differs, since this one hangs off a
 * fixed bar instead of a card.
 */
body.ts-v3-pdp .ts-pdp-sticky-atc__panel {
  position: absolute;
  z-index: 8;
  right: 0.75rem;
  bottom: calc(100% + 0.5rem);
  left: 0.75rem;
  display: flex;
  max-height: min(60vh, 22rem);
  flex-direction: column;
  padding: 0.875rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow:
    0 18px 40px rgba(0, 44, 80, 0.28),
    0 0 0 1px rgba(0, 44, 80, 0.06);
  gap: 0.625rem;
}

body.ts-v3-pdp .ts-pdp-sticky-atc__panel[hidden] {
  display: none;
}

body.ts-v3-pdp .ts-pdp-sticky-atc__options {
  display: flex;
  overflow-y: auto;
  flex-direction: column;
  padding: 0;
  margin: 0;
  gap: 0.375rem;
  list-style: none;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

body.ts-v3-pdp .ts-pdp-sticky-atc__option {
  display: grid;
  width: 100%;
  min-height: 2.75rem;
  align-items: center;
  padding: 0.5rem 0.875rem;
  border: none;
  border-radius: 9999px;
  background: #eef1f6;
  color: #002c50;
  column-gap: 0.625rem;
  cursor: pointer;
  font-family: inherit;
  grid-template-columns: minmax(0, 1fr) auto;
  text-align: left;
}

body.ts-v3-pdp .ts-pdp-sticky-atc__option:hover,
body.ts-v3-pdp .ts-pdp-sticky-atc__option.is-selected {
  background: #e3e9f2;
}

body.ts-v3-pdp .ts-pdp-sticky-atc__option.is-selected {
  box-shadow: inset 0 0 0 1.5px rgba(0, 56, 104, 0.35);
}

body.ts-v3-pdp .ts-pdp-sticky-atc__option-label {
  overflow: hidden;
  min-width: 0;
  color: #24344d;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.ts-v3-pdp .ts-pdp-sticky-atc__option-price {
  color: #002c50;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

/**
 * Matches the product card Add to cart: same --ts-blue-dark fill, 110px pill and
 * type. Min-height stays at the 2.75rem touch target rather than the card's
 * 2rem, since this one is thumb-reachable at the bottom of the screen.
 */
body.ts-v3-pdp .ts-pdp-sticky-atc__button {
  display: flex;
  min-height: 2.75rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding-block: 0;
  padding-inline: 1.25rem;
  border: 1px solid var(--ts-blue-dark, #1c3e56);
  border-radius: 110px;
  background: var(--ts-blue-dark, #1c3e56);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.016em;
  line-height: 1.2;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    opacity 0.2s ease;
  white-space: nowrap;
}

body.ts-v3-pdp .ts-pdp-sticky-atc__button:hover:not([aria-disabled='true']) {
  border-color: var(--ts-blue-deep, #0c3147);
  background: var(--ts-blue-deep, #0c3147);
}

body.ts-v3-pdp .ts-pdp-sticky-atc__button[disabled] {
  cursor: not-allowed;
  opacity: 0.45;
}

/* Dimmed because it will not add anything yet, but still tappable: the tap
   scrolls back to the variation picker. */
body.ts-v3-pdp .ts-pdp-sticky-atc__button[aria-disabled='true'] {
  cursor: pointer;
  opacity: 0.55;
}

@media (max-width: 899px) {
  body.ts-v3-pdp .ts-pdp-sticky-atc {
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.ts-v3-pdp .ts-pdp-sticky-atc,
  body.ts-v3-pdp .ts-pdp-sticky-atc::after,
  body.ts-v3-pdp .ts-pdp-sticky-atc-scrim,
  body.ts-v3-pdp .ts-pdp-sticky-atc__variant svg {
    transition: none;
  }
}

/* ------------------------------------------------------------------ *
 * 4. Checkout auth gate order summary
 * ------------------------------------------------------------------ */

.ts-checkout-auth-gate__summary {
  margin: 1.25rem 0;
  padding: 1rem;
  border: 1px solid rgba(12, 49, 71, 0.12);
  border-radius: 0.75rem;
  background: rgba(12, 49, 71, 0.03);
}

.ts-checkout-auth-gate__summary-title {
  margin: 0 0 0.75rem;
  color: rgba(28, 49, 68, 0.72);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ts-checkout-auth-gate__items {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ts-checkout-auth-gate__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
}

.ts-checkout-auth-gate__item-media {
  display: flex;
  overflow: hidden;
  width: 3rem;
  height: 3rem;
  flex: 0 0 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: #fff;
}

.ts-checkout-auth-gate__item-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ts-checkout-auth-gate__item-name {
  min-width: 0;
  flex: 1 1 auto;
  color: #1c3144;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
}

.ts-checkout-auth-gate__item-qty {
  color: rgba(28, 49, 68, 0.6);
  font-weight: 400;
}

.ts-checkout-auth-gate__item-price {
  flex: 0 0 auto;
  color: #1c3144;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.ts-checkout-auth-gate__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0.875rem 0 0;
  padding-top: 0.875rem;
  border-top: 1px solid rgba(12, 49, 71, 0.12);
  color: #1c3144;
  font-size: 1rem;
}

.ts-checkout-auth-gate__primary {
  display: flex;
  width: 100%;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
}

/* ------------------------------------------------------------------ *
 * 5. Support funnel — extra touch padding on narrow screens
 * ------------------------------------------------------------------ */

@media (max-width: 639px) {
  body.ts-v10-support .ts-support-back,
  body.ts-v3-support .ts-support-back {
    position: relative;
  }

  body.ts-v10-support .ts-support-back::before,
  body.ts-v3-support .ts-support-back::before {
    content: '';
    position: absolute;
    inset: -0.5rem -0.75rem;
  }

  body.ts-v10-support .ts-support-aside__email,
  body.ts-v3-support .ts-support-aside__email {
    position: relative;
  }

  body.ts-v10-support .ts-support-aside__email::after,
  body.ts-v3-support .ts-support-aside__email::after {
    content: '';
    position: absolute;
    inset: -0.375rem -0.5rem;
  }
}