/* PupStore — local-store.css
 * Minimal, scoped styles for the rebuilt client-side store. Everything is
 * namespaced under .pup-* so it cannot collide with the Horizon theme. We
 * reuse the theme's .button where possible and only add what the theme lacks
 * (drawer open visibility, upload control, line-item layout). Nothing here
 * alters existing theme layout.
 */

/* ---- Drawer open state -----------------------------------------------------
 * The theme's dialog is opened via native showModal() in our JS. We add a
 * fallback for the [open] attribute path and keep it scrolling. */
.cart-drawer__dialog.pup-drawer-open,
.cart-drawer__dialog[open] {
  display: block;
}

/* ---- Managed containers ---------------------------------------------------*/
.pup-drawer-managed,
.pup-cart-managed {
  display: block;
  width: 100%;
}

/* ---- Line items (shared drawer + cart page) -------------------------------*/
.pup-lines {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
}
.pup-line {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(var(--color-foreground-rgb, 0 0 0) / 0.1);
}
.pup-line:last-child {
  border-bottom: 0;
}
.pup-line__media {
  flex: 0 0 auto;
}
.pup-line__img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 10px;
  background: rgba(var(--color-foreground-rgb, 0 0 0) / 0.05);
  display: block;
}
.pup-line__img--placeholder {
  border: 1px dashed rgba(var(--color-foreground-rgb, 0 0 0) / 0.2);
}
.pup-line__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pup-line__title {
  font-weight: 600;
  line-height: 1.3;
}
.pup-line__option {
  font-size: 0.85em;
  opacity: 0.7;
}
.pup-line__photo-note {
  font-size: 0.72em;
  opacity: 0.6;
}
/* A cart line the live catalog no longer sells. It stays visible and removable
   — the customer decides what leaves their own cart — but it is visibly out of
   the sale, and cartSubtotal()/checkout() already exclude and refuse it. */
.pup-line--gone .pup-line__img,
.pup-line--gone .pup-line__title,
.pup-line--gone .pup-line__option,
.pup-line--gone .pup-line__price {
  opacity: 0.45;
}
.pup-line--gone .pup-line__price-total {
  text-decoration: line-through;
}
.pup-line__gone {
  font-size: 0.78em;
  font-weight: 600;
  color: #9b1c0f;
  background: #fde3e0;
  border-radius: 6px;
  padding: 3px 8px;
  align-self: flex-start;
}
.pup-line__controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.pup-line__price {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
}
.pup-line__price-each {
  font-size: 0.72em;
  opacity: 0.55;
}
.pup-line__price-total {
  font-weight: 600;
}

/* ---- Quantity stepper -----------------------------------------------------*/
.pup-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(var(--color-foreground-rgb, 0 0 0) / 0.2);
  border-radius: 10px;
  overflow: hidden;
}
.pup-qty__btn {
  appearance: none;
  border: 0;
  background: transparent;
  width: 32px;
  height: 32px;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: inherit;
}
.pup-qty__btn:hover {
  background: rgba(var(--color-foreground-rgb, 0 0 0) / 0.06);
}
.pup-qty__input {
  width: 36px;
  height: 32px;
  text-align: center;
  border: 0;
  border-left: 1px solid rgba(var(--color-foreground-rgb, 0 0 0) / 0.15);
  border-right: 1px solid rgba(var(--color-foreground-rgb, 0 0 0) / 0.15);
  background: transparent;
  color: inherit;
  font: inherit;
  -moz-appearance: textfield;
}
.pup-qty__input::-webkit-outer-spin-button,
.pup-qty__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.pup-line__remove {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  opacity: 0.6;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  font-size: 0.85em;
  padding: 0;
}
.pup-line__remove:hover {
  opacity: 1;
}

/* ---- Subtotal + footer ----------------------------------------------------*/
.pup-drawer-footer,
.pup-cart-summary {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(var(--color-foreground-rgb, 0 0 0) / 0.12);
}
.pup-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 12px;
}
/* ---- Promo / discount code ----------------------------------------------- */
.pup-promo {
  margin: 0 0 12px;
}
.pup-promo__form {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.pup-promo__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(var(--color-foreground-rgb, 0 0 0) / 0.25);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-transform: uppercase;
}
.pup-promo__input:focus {
  outline: none;
  border-color: rgba(var(--color-foreground-rgb, 0 0 0) / 0.55);
}
.pup-promo__apply {
  flex: 0 0 auto;
  cursor: pointer;
}
.pup-promo__apply[data-busy] {
  opacity: 0.6;
  pointer-events: none;
}
.pup-promo__applied {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pup-promo__code {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px dashed rgba(var(--color-foreground-rgb, 0 0 0) / 0.35);
}
.pup-promo__remove {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  font-size: 0.85em;
  text-decoration: underline;
  opacity: 0.7;
}
.pup-promo__remove:hover {
  opacity: 1;
}
.pup-promo__msg {
  margin-top: 6px;
  font-size: 0.82em;
  min-height: 1em;
  opacity: 0.7;
}
.pup-promo__msg[data-warn] {
  color: #c0341d;
  opacity: 1;
}
.pup-discount,
.pup-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}
.pup-discount {
  color: #1a7f37;
  font-weight: 600;
}
.pup-total {
  font-weight: 700;
  font-size: 1.05rem;
}

.pup-cart-note {
  font-size: 0.8em;
  opacity: 0.6;
  margin: 0 0 12px;
}
.pup-checkout-btn {
  width: 100%;
  cursor: pointer;
}
.pup-checkout-btn.pup-busy {
  opacity: 0.7;
  pointer-events: none;
}
.pup-checkout-msg {
  margin-top: 10px;
  font-size: 0.85em;
  min-height: 1em;
}
.pup-checkout-msg--error {
  color: #c0341d;
}

/* ---- Image upload control (drop zone + pet-name + upsell) -----------------*/
.pup-upload {
  display: block;
  margin: 8px 0 4px;
}

/* The big dashed drop zone. */
.pup-upload__dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 118px;
  padding: 30px 24px;
  text-align: center;
  background: transparent;
  border: 2px dashed rgba(var(--color-foreground-rgb, 0 0 0) / 0.28);
  border-radius: 18px;
  color: inherit;
  font: inherit;
  cursor: pointer;
  appearance: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.pup-upload__dropzone:hover,
.pup-upload__dropzone:focus-visible {
  border-color: rgba(var(--color-foreground-rgb, 0 0 0) / 0.5);
  background: rgba(var(--color-foreground-rgb, 0 0 0) / 0.03);
  outline: none;
}
.pup-upload__dropzone--over {
  border-color: rgba(var(--color-foreground-rgb, 0 0 0) / 0.65);
  background: rgba(var(--color-foreground-rgb, 0 0 0) / 0.05);
}
.pup-upload__dz-title {
  font-weight: 700;
  font-size: 1rem;
}
.pup-upload__dz-sub {
  font-size: 0.85rem;
  opacity: 0.6;
}
.pup-upload__counter {
  position: absolute;
  right: 16px;
  bottom: 10px;
  font-size: 0.8rem;
  opacity: 0.5;
}

/* Thumbnail grid of uploaded photos. */
.pup-upload__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.pup-upload__cell {
  position: relative;
  width: 72px;
  height: 72px;
}
.pup-upload__cell.is-uploading {
  opacity: 0.55;
}
.pup-upload__thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 10px;
  background: rgba(var(--color-foreground-rgb, 0 0 0) / 0.05);
  display: block;
}
.pup-upload__remove {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #1a1a1a;
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.pup-upload__remove:hover {
  background: #000;
}
.pup-upload__status {
  margin-top: 8px;
  font-size: 0.85em;
  min-height: 1em;
  opacity: 0.85;
}
.pup-upload__status--ok {
  color: #1a8a3b;
}
.pup-upload__status--error {
  color: #c0341d;
}

/* ---- Pet Name field -------------------------------------------------------*/
.pup-field {
  margin-top: 18px;
}
.pup-field__label {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 8px;
}
.pup-field__hint {
  font-weight: 400;
  opacity: 0.55;
}
.pup-field__input {
  display: block;
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid rgba(var(--color-foreground-rgb, 0 0 0) / 0.25);
  border-radius: 10px;
}
.pup-field__input:focus {
  outline: none;
  border-color: rgba(var(--color-foreground-rgb, 0 0 0) / 0.6);
}
.pup-field__input::placeholder {
  opacity: 0.45;
}

/* ---- "Carry Your Best Friend With You" upsell ----------------------------*/
.pup-upsell {
  margin-top: 18px;
}
.pup-upsell__label {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 8px;
}
.pup-upsell__row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.95rem;
}
.pup-upsell__check {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  accent-color: #1a1a1a;
  cursor: pointer;
}

/* ---- Add-to-cart inline error --------------------------------------------*/
.pup-add-error {
  color: #c0341d;
  font-size: 0.9em;
  margin: 0 0 10px;
}
.pup-form-error-text {
  color: #c0341d;
}

/* ---- Contact form -> support inbox (contact.js) ---------------------------*/
/* The mirrored Shopify contact form now posts to POST /api/contact. These are
   the only new visuals: a status line, the success replacement, and the
   off-screen honeypot. Kept neutral so they inherit each locale's theme. */
.pup-contact-status {
  margin: 0 0 14px;
  padding: 10px 13px;
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.45;
}
.pup-contact-status--pending {
  background: #f2f2f2;
  color: #4a4a4a;
}
.pup-contact-status--error {
  background: #fdecea;
  color: #c0341d;
}
.pup-contact-done {
  padding: 22px 20px;
  border: 1px solid #e2e2e2;
  border-radius: 12px;
  background: #fafafa;
  text-align: center;
}
.pup-contact-done__title {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 1.05rem;
}
.pup-contact-done__body {
  margin: 0;
  color: #5a5a5a;
  font-size: 0.95rem;
  line-height: 1.5;
}
/* Honeypot: removed from view and from the accessibility tree, but still a
   real, fillable input so bots submit it. Never `display:none` — some bots
   skip hidden fields, which would defeat the trap. */
.pup-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   Localization: currency (presentment) + language toggle (localization.js)
   ───────────────────────────────────────────────────────────────────────── */

/* Flicker guard: the <head> geo bootstrap adds .pup-fx-pending on <html> for a
   returning non-SEK visitor, so baked SEK prices stay hidden until
   localization.js converts them (it removes the class on DOMContentLoaded). The
   keyframe is a fail-safe: prices reveal on their own after 1.2s even if the JS
   never runs, so a price can never stay invisible. */
html.pup-fx-pending .price,
html.pup-fx-pending .compare-at-price {
  visibility: hidden;
  animation: pup-fx-reveal 0s linear 1.2s forwards;
}
@keyframes pup-fx-reveal { to { visibility: visible; } }

/* "Billed in SEK" settlement note. Shown wherever a non-SEK display currency is
   active: inside each toggle panel, and by the cart/drawer checkout button. */
.pup-fx-note {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: #6a6a6a;
  letter-spacing: 0.01em;
}
.pup-fx-note--panel {
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.4rem;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 8px;
}
.pup-fx-note--cart {
  margin: 0.15rem 0 0.6rem;
  text-align: center;
}

/* Desktop dropdown panel: our JS drives open/close via the [hidden] attribute,
   so make sure a shown panel is actually visible regardless of theme CSS, and a
   hidden one is truly gone. */
.dropdown-localization .localization-wrapper[hidden] { display: none !important; }
.dropdown-localization .localization-wrapper { display: block; }

/* Current selection in the country list: reveal the checkmark the theme markup
   already ships (it keys off nothing in the mirror, so we drive it here). */
.localization-form__list-item { position: relative; }
.localization-form__list-item .icon-checkmark { visibility: hidden; }
.localization-form__list-item--current .icon-checkmark { visibility: visible; }
.localization-form__list-item--current { font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════════
   PUPFEST 2026 CONVERSION REDESIGN
   ---------------------------------------------------------------------------
   Warm CONTENT inside a RESTRAINED, fast, high-trust SHELL. Every rule below is
   scoped under `html.pup-redesign`, so flipping PupStore.redesign (config.js) to
   false removes the class and reverts the storefront to its exact prior look.
   Design tokens live in :root (inert — nothing consumes them unless scoped).
   Accent (teal) is reserved for THE primary CTA + a few key highlights only.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --pup-accent: #108474;          /* teal — primary CTA + key highlights ONLY */
  --pup-accent-ink: #ffffff;      /* text on accent */
  --pup-accent-hover: #0d7365;    /* teal darkened ~8% */
  --pup-pink: #D7A3C7;            /* pink accent — trust icons, size guide, links */
  --pup-pink-hover: #c68fb4;      /* pink darkened ~8% */
  --pup-warm: #d7c3a7;            /* warm tan — sparingly, warmth accents */
  --pup-warm-soft: #f3ede3;
  --pup-surface: #ffffff;
  --pup-surface-2: #faf8f5;       /* soft warm off-white, not stark grey */
  --pup-ink: rgb(0 0 0 / 0.86);
  --pup-ink-soft: rgb(0 0 0 / 0.62);
  --pup-line: rgb(0 0 0 / 0.10);
  --pup-radius: 12px;
  --pup-radius-lg: 20px;
  --pup-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 8px 24px rgb(0 0 0 / .06);
  --pup-space: clamp(16px, 3vw, 40px);
  --pup-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ── Primary CTA system ────────────────────────────────────────────────────
   ONE accent CTA style, used for THE primary action per page (Add to cart /
   Checkout / Start your portrait). We tint the theme's add-to-cart button and
   expose a reusable .pup-cta for our own injected buttons. Secondary actions
   stay quiet (theme default). */
html.pup-redesign .product-form-buttons .add-to-cart-button {
  /* Override the theme's own button variable (so its hover/animation flow
     through) AND hard-set background-color as a belt-and-suspenders fallback. */
  --color-primary-button-background: var(--pup-accent);
  background-color: var(--pup-accent) !important;
  background-image: none !important;
  border-color: var(--pup-accent) !important;
  color: var(--pup-accent-ink);
  /* NB: do NOT transition background-color on this button. Verified empirically
     in the mirror: with a background-color transition the theme's black value
     holds at rest and visually beats even our !important accent; transitioning
     ONLY transform makes the accent apply statically and reliably. (Suspected
     cause: the theme's own button transition interacting with its
     --color-primary-button-background var; the fix is robust regardless.) */
  transition: transform .08s var(--pup-ease) !important;
}
html.pup-redesign .product-form-buttons .add-to-cart-button:hover {
  --color-primary-button-background: var(--pup-accent-hover);
  background-color: var(--pup-accent-hover) !important;
  border-color: var(--pup-accent-hover) !important;
}
html.pup-redesign .product-form-buttons .add-to-cart-button:active { transform: translateY(1px); }

html.pup-redesign .pup-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  border: 1px solid var(--pup-accent);
  border-radius: var(--pup-radius);
  background-color: var(--pup-accent);
  color: var(--pup-accent-ink);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s var(--pup-ease), transform .08s var(--pup-ease);
}
html.pup-redesign .pup-cta:hover { background-color: var(--pup-accent-hover); border-color: var(--pup-accent-hover); }
html.pup-redesign .pup-cta:active { transform: translateY(1px); }

/* ── Above-the-fold star summary (real Judge.me rating on the PDP) ──────────*/
html.pup-redesign .pup-stars {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 2px;
  font-size: 0.95rem;
  color: var(--pup-ink-soft);
}
html.pup-redesign .pup-stars__row { display: inline-flex; gap: 2px; }
html.pup-redesign .pup-stars__row svg { width: 17px; height: 17px; display: block; fill: #f5a623; }
html.pup-redesign .pup-stars__row svg.pup-stars--off { fill: rgb(0 0 0 / 0.16); }
html.pup-redesign .pup-stars__label { color: inherit; }
html.pup-redesign a.pup-stars { text-decoration: none; }
html.pup-redesign a.pup-stars:hover .pup-stars__count { text-decoration: underline; }
html.pup-redesign .pup-stars__count { color: var(--pup-ink); font-weight: 600; }

/* ── Trust row near the buy box ────────────────────────────────────────────*/
html.pup-redesign .pup-trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  margin: 16px 0 4px;
  padding: 14px 16px;
  border: 1px solid var(--pup-line);
  border-radius: var(--pup-radius);
  background: var(--pup-surface-2);
}
html.pup-redesign .pup-trust__item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.82rem;
  line-height: 1.25;
  color: var(--pup-ink-soft);
}
html.pup-redesign .pup-trust__item svg {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  stroke: var(--pup-pink);  /* trust-row icons: pink accent (per request) */
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html.pup-redesign .pup-trust__item strong { color: var(--pup-ink); font-weight: 600; }

/* ── Returns / satisfaction one-liner (Baymard: 60% look for it on the PDP) ─*/
html.pup-redesign .pup-returns {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 12px 0 2px;
  font-size: 0.86rem;
  color: var(--pup-ink-soft);
}
html.pup-redesign .pup-returns strong { color: var(--pup-ink); font-weight: 600; }
html.pup-redesign .pup-returns a {
  color: var(--pup-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}

/* ── Hide the theme's baked-in "Free worldwide shipping 🐾 For you & your pup"
   micro-copy banner (its class carries a per-block hash suffix, so match the
   stable prefix). Gated by the redesign flag like everything else. ──────────*/
html.pup-redesign [class^="ai-shipping-microcopy-"] { display: none !important; }

/* ── Size-guide trigger + modal (Baymard: 42% judge size from images) ──────*/
html.pup-redesign .pup-sizeguide-line { margin: 12px 0 2px; }
html.pup-redesign .pup-sizeguide-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--pup-pink);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}
html.pup-redesign .pup-sizeguide-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
html.pup-redesign .pup-sizeguide-btn:hover { color: var(--pup-pink-hover); text-decoration: underline; }

/* "Not sure which photo…? View Instructions" theme link → pink accent.
   transition:none is required — the theme transitions `color`, which otherwise
   holds the original foreground colour at rest and beats even our !important
   (same quirk as the add-to-cart button). */
html.pup-redesign .pup-pink-link {
  color: var(--pup-pink) !important;
  transition: none !important;
}

html.pup-redesign .pup-sg-overlay {
  position: fixed; inset: 0; z-index: 2147483000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgb(30 26 22 / 0.55);
  opacity: 0; transition: opacity .18s var(--pup-ease);
}
html.pup-redesign .pup-sg-overlay.is-open { opacity: 1; }
html.pup-redesign .pup-sg-dialog {
  position: relative;
  width: min(560px, 96vw);
  max-height: 88vh; overflow-y: auto;
  background: var(--pup-surface);
  border-radius: var(--pup-radius-lg);
  box-shadow: var(--pup-shadow);
  padding: 26px 26px 24px;
}
html.pup-redesign .pup-sg-dialog h3 { margin: 0 0 4px; font-size: 1.15rem; }
html.pup-redesign .pup-sg-dialog p.pup-sg-sub { margin: 0 0 18px; color: var(--pup-ink-soft); font-size: 0.9rem; }
html.pup-redesign .pup-sg-close {
  position: absolute; inset-block-start: 14px; inset-inline-end: 14px;
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: rgb(0 0 0 / 0.06); color: var(--pup-ink);
  font-size: 20px; line-height: 1; cursor: pointer;
}
html.pup-redesign .pup-sg-close:hover { background: rgb(0 0 0 / 0.12); }
html.pup-redesign .pup-sg-rows { display: grid; gap: 14px; }
html.pup-redesign .pup-sg-row { display: flex; align-items: center; gap: 16px; }
html.pup-redesign .pup-sg-swatch {
  flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--pup-surface-2);
  border: 1px solid var(--pup-line);
  border-radius: 8px;
  color: var(--pup-ink-soft);
  font-size: 0.7rem;
}
html.pup-redesign .pup-sg-info strong { display: block; font-size: 0.98rem; }
html.pup-redesign .pup-sg-info span { color: var(--pup-ink-soft); font-size: 0.86rem; }
html.pup-redesign .pup-sg-scale {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--pup-line);
  font-size: 0.82rem; color: var(--pup-ink-soft); line-height: 1.5;
}

/* ── Sticky mobile add-to-cart bar ─────────────────────────────────────────*/
html.pup-redesign .pup-stickybar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--pup-surface);
  border-top: 1px solid var(--pup-line);
  box-shadow: 0 -6px 20px rgb(0 0 0 / 0.08);
  transform: translateY(110%);
  transition: transform .25s var(--pup-ease);
}
html.pup-redesign .pup-stickybar.is-visible { transform: translateY(0); }
html.pup-redesign .pup-stickybar__meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
html.pup-redesign .pup-stickybar__name { font-size: 0.78rem; color: var(--pup-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.pup-redesign .pup-stickybar__price { font-size: 1rem; font-weight: 700; color: var(--pup-ink); }
html.pup-redesign .pup-stickybar__cta { flex: 1 1 auto; margin-inline-start: auto; max-width: 62%; }
@media (min-width: 750px) {
  html.pup-redesign .pup-stickybar { display: none !important; }
}

/* ── Motion preference: disable non-essential animation ─────────────────────*/
@media (prefers-reduced-motion: reduce) {
  html.pup-redesign .pup-stickybar,
  html.pup-redesign .pup-sg-overlay,
  html.pup-redesign .product-form-buttons .add-to-cart-button,
  html.pup-redesign .pup-cta { transition: none; }
}

/* ── RTL: components use logical properties end-to-end; text simply starts. ─*/
html.pup-redesign[dir="rtl"] .pup-trust { text-align: start; }

/* ═══════════════════════════════════════════════════════════════════════════
   PHONE LAYER
   ---------------------------------------------------------------------------
   Everything above was written desktop-first; this section makes the store feel
   native on a phone. Three groups, in order:

     1. TOUCH        — applies to any coarse pointer (phone + tablet), any width.
     2. PHONE        — max-width 749px, matching the theme's own breakpoint.
     3. SAFE AREA    — notch / home-indicator insets for anything fixed.

   Sizing rule of thumb: 44 × 44 CSS px is the minimum comfortable touch target
   (Apple HIG / WCAG 2.5.5). Where a control must stay visually small, the hit
   area is grown with a transparent ::after overlay instead of by resizing it.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. TOUCH ──────────────────────────────────────────────────────────────*/
@media (pointer: coarse) {
  /* Kill the 300 ms synthetic-click delay and double-tap-to-zoom on controls.
     Deliberately NOT on the document — pinch-zoom must survive for a11y. */
  a, button, summary, label,
  input, select, textarea,
  [role="button"] {
    touch-action: manipulation;
  }

  /* The grey flash Android paints over a tapped element. We give our own
     :active feedback below, which reads as deliberate rather than accidental. */
  a, button, summary, [role="button"] {
    -webkit-tap-highlight-color: transparent;
  }

  /* iOS zooms the viewport when a focused field's text is under 16px, and never
     zooms back out. This is the single most common mobile-form defect. max()
     leaves any field that is already larger at its designed size.
     !important is deliberate: these are bare element selectors, so every
     class-based theme rule (.field__input, .cart-note textarea, …) outranks
     them on specificity. Chasing each theme class individually would silently
     miss the next one; the 16px floor has to be unconditional to do its job. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: max(16px, 1em) !important;
  }

  /* Text fields should be thumb-height everywhere, not just in our own
     components — the theme ships several at 28-32px (cart note, gift message).
     Excludes checkbox/radio/range, whose sizing is handled separately. */
  input[type="text"],
  input[type="email"],
  input[type="search"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input:not([type]),
  select {
    min-height: 44px;
  }

  /* Our own controls: real thumb-sized targets. */
  .pup-qty__btn { min-width: 44px; min-height: 44px; font-size: 1.25rem; }
  .pup-qty__input { width: 52px; min-height: 44px; }
  .pup-line__remove {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
  }
  .pup-checkout-btn { min-height: 52px; } /* the page's primary action */
  .pup-promo__input, .pup-promo__apply { min-height: 48px; }
  .pup-promo__apply { min-width: 92px; }
  .pup-promo__remove {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .pup-field__input { min-height: 48px; }
  html.pup-redesign .pup-sizeguide-btn { min-height: 44px; }
  html.pup-redesign .pup-sg-close { width: 44px; height: 44px; font-size: 24px; }

  /* Upsell checkbox: an 18px box is a coin-toss to hit. Grow the box, and make
     the whole row tall enough that tapping the label text is comfortable. */
  .pup-upsell__row { min-height: 48px; padding: 4px 0; }
  .pup-upsell__check { width: 24px; height: 24px; }

  /* Remove-photo "×" sits on a 72px thumbnail, so it cannot grow much without
     covering the image. Keep it small; extend the hit area invisibly. */
  .pup-upload__remove { width: 28px; height: 28px; font-size: 17px; }
  .pup-upload__remove::after {
    content: "";
    position: absolute;
    inset: -9px;            /* 28 + 9 + 9 = 46px effective */
  }

  /* Theme controls that ship below the threshold. */
  .quick-add__button,
  .slideshow-control,
  .facets-toggle__button,
  .policy-list-trigger,
  .popup-link__button {
    min-width: 44px;
    min-height: 44px;
  }
  /* These two are inline text triggers — centring keeps the design intact. */
  .policy-list-trigger,
  .popup-link__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Small icon links (social row): grow the hit area, not the icon. The theme's
     wrapper is .social-icons__icon-wrapper, NOT .social-icons — matched by the
     actual DOM rather than the guessed name. */
  .social-icons__icon-wrapper a,
  .social-icons a,
  .list-social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  /* Footer legal/brand line: 15px-tall text links are the hardest thing on the
     page to hit. Padding grows the target without moving the text. */
  .footer-utilities__text a,
  .footer-utilities__group-copyright a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Our own returns link under the buy box. */
  html.pup-redesign .pup-returns a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Theme disclosures ("Send it as a gift", footer accordions). */
  summary {
    min-height: 44px;
  }
  .email-signup__button {
    min-height: 44px;
  }

  /* Review/stats carousel pagination dots ship at 8x8. They must stay visually
     tiny, so grow the hit area with an overlay instead. Horizontal expansion is
     kept modest (dots sit close together, and overlapping hit areas cause
     mis-taps) — vertical is where the free room is. Class names carry a
     per-block hash, hence the substring match. */
  button[class*="ai-review-dot"],
  button[class*="ai-stats-dot"] {
    position: relative;
  }
  button[class*="ai-review-dot"]::after,
  button[class*="ai-stats-dot"]::after {
    content: "";
    position: absolute;
    inset: -18px -6px; /* 8px dot -> ~44x20 effective */
  }

  /* Our above-the-fold star summary links down to the reviews. */
  html.pup-redesign a.pup-stars {
    min-height: 44px;
  }

  /* Judge.me carousel arrows (40x40, just under the threshold). */
  .jdgm-arrow {
    min-width: 44px;
    min-height: 44px;
  }

  /* Quiet, deliberate press feedback in place of the browser's grey flash. */
  .pup-qty__btn:active,
  .pup-line__remove:active,
  .pup-promo__apply:active,
  .pup-upload__remove:active {
    background-color: rgba(var(--color-foreground-rgb, 0 0 0) / 0.1);
  }
  .pup-checkout-btn:active,
  html.pup-redesign .pup-cta:active { transform: translateY(1px); }
}

/* ── 2. PHONE ──────────────────────────────────────────────────────────────*/
@media (max-width: 749px) {
  /* Trust row: two columns at 390px forces "Worldwide shipping for you & your
     pup" into three ragged lines and pulls its icon out of line with the text.
     One column reads cleanly — this block is meant to be scannable, not dense. */
  html.pup-redesign .pup-trust {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px;
  }
  html.pup-redesign .pup-trust__item {
    align-items: flex-start;
    font-size: 0.86rem;
  }
  html.pup-redesign .pup-trust__item svg { margin-top: 1px; }

  /* Size guide as a bottom sheet: thumb-reachable, and never taller than the
     visible viewport (dvh accounts for the collapsing URL bar). */
  html.pup-redesign .pup-sg-overlay {
    align-items: flex-end;
    padding: 0;
  }
  html.pup-redesign .pup-sg-dialog {
    width: 100%;
    max-width: 100%;
    max-height: 88dvh;
    border-radius: var(--pup-radius-lg) var(--pup-radius-lg) 0 0;
    padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    overscroll-behavior: contain;   /* scroll the sheet, not the page behind it */
    -webkit-overflow-scrolling: touch;
    transform: translateY(14px);
    transition: transform .22s var(--pup-ease);
  }
  html.pup-redesign .pup-sg-overlay.is-open .pup-sg-dialog { transform: translateY(0); }
  /* Grab handle — signals "this sheet moves" the way native sheets do. */
  html.pup-redesign .pup-sg-dialog::before {
    content: "";
    display: block;
    width: 38px;
    height: 4px;
    margin: -8px auto 14px;
    border-radius: 999px;
    background: rgb(0 0 0 / 0.18);
  }

  /* The theme centres the drawer's contents vertically. That reads well for the
     empty state ("Your cart is empty" sitting mid-panel), but on a 844px-tall
     phone it strands a populated cart in the middle with a large void above AND
     below the line items. ui-drawer.js already marks the empty state, so top-
     align the moment there is something in the cart. */
  .cart-drawer__dialog:not(.cart-drawer--empty) .cart-drawer__content {
    justify-content: flex-start;
    /* Clear the floating close button, which sits in the panel's top-right and
       would otherwise overlap a long product title on the first line. */
    padding-top: 44px;
  }
  /* Let the item list take the space the centring used to eat, so long carts
     scroll inside the drawer instead of pushing the checkout button off-screen. */
  .cart-drawer__dialog:not(.cart-drawer--empty) .cart-drawer__items {
    flex: 1 1 auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Cart lines get tight under ~400px: let the price wrap beside the controls
     rather than squeezing the title column. */
  .pup-line { gap: 12px; }
  .pup-line__img, .pup-line__img--placeholder { width: 64px; height: 64px; }
  .pup-line__controls { gap: 8px 14px; }
  .pup-line__price {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
  }

  /* Promo row: side-by-side leaves the field too narrow to read a code back. */
  .pup-promo__form { flex-wrap: wrap; }
  .pup-promo__input { flex: 1 1 100%; }
  .pup-promo__apply { flex: 1 1 100%; }

  /* Shorter dropzone keeps Add-to-cart nearer the fold. */
  .pup-upload__dropzone { min-height: 104px; padding: 22px 16px; }
  .pup-upload__grid { gap: 12px; }

  /* The sticky add-to-cart bar floats over the page end. Reserve room so the
     last content is never trapped underneath it. Class set by mobile.js. */
  html.pup-redesign body.pup-stickybar-visible { padding-bottom: 76px; }
}

/* Scroll lock, applied by mobile.js while a drawer/sheet is open. position:fixed
   (rather than overflow:hidden) is the only approach iOS Safari honours; the JS
   restores the scroll offset on close so the page does not jump. Not inside a
   media query — a locked background is wrong at every width. */
html.pup-scroll-locked,
html.pup-scroll-locked body { overflow: hidden; }
body.pup-scroll-locked {
  position: fixed;
  inset-inline: 0;
  width: 100%;
  overscroll-behavior: none;
}

/* ── 3. SAFE AREA ──────────────────────────────────────────────────────────*/
/* Anything pinned to an edge must clear the notch and the home indicator, or
   iOS draws it underneath. The sticky bar handles its own bottom inset already. */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 749px) {
    .cart-drawer__dialog[open],
    .cart-drawer__dialog.pup-drawer-open,
    .menu-drawer {
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
  }
}

/* ── Motion preference ─────────────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
  html.pup-redesign .pup-sg-dialog { transition: none; }
}