/* Scamper theme: base styles and shared components.
   Section-specific styles live in each section's {% stylesheet %}. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 96px;
}

html:has(dialog[open][data-scroll-lock]) {
  overflow: hidden;
}

body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: var(--font-body-weight);
  font-size: calc(16px * var(--body-scale));
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1 0 auto;
  overflow-x: clip;
}

img,
picture,
video,
svg,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
textarea,
select,
button {
  font: inherit;
  color: inherit;
}

/* Pause button for content that moves by itself (snippets/motion-toggle.liquid) */
.motion-toggle {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
}

.motion-toggle .icon {
  width: 14px;
  height: 14px;
}

.motion-toggle__play,
.is-paused .motion-toggle__pause {
  display: none;
}

.is-paused .motion-toggle__play {
  display: contents;
}

.ticker .motion-toggle,
.announcement .motion-toggle {
  position: absolute;
  top: 50%;
  right: 12px;
  translate: 0 -50%;
}

.announcement .motion-toggle {
  width: 28px;
  height: 28px;
  border-width: 1px;
}

.section-heading__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Next to the tabs: same height and spacing as a tab */
.section-heading__actions .motion-toggle {
  width: 44px;
  height: 44px;
}

/* Over the moving text, a ring of the strip colour keeps letters from touching the button */
.ticker .motion-toggle {
  box-shadow: 0 0 0 10px var(--color-bg);
}

.is-paused .ticker__track,
.is-paused .marquee__track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .motion-toggle {
    display: none;
  }
}

/* Placeholders follow the colour scheme (the browser grey fell to 1.8:1 on dark schemes);
   70% of the text colour keeps 4.5:1 on every scheme */
::placeholder {
  color: rgba(var(--color-text-rgb), 0.7);
  opacity: 1;
}

a {
  color: inherit;
  text-underline-offset: 0.2em;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-style: var(--font-heading-style);
  letter-spacing: -0.02em;
  line-height: 1.04;
  overflow-wrap: break-word;
  text-wrap: balance;
}

h1, .h1 { font-size: calc(clamp(2.6rem, 6vw, 5.6rem) * var(--heading-scale)); }
h2, .h2 { font-size: calc(clamp(2.1rem, 4.4vw, 4rem) * var(--heading-scale)); }
h3, .h3 { font-size: calc(clamp(1.45rem, 2.2vw, 1.9rem) * var(--heading-scale)); letter-spacing: -0.01em; }
h4, .h4 { font-size: calc(1.2rem * var(--heading-scale)); letter-spacing: 0; }
h5, h6 { font-size: 1rem; letter-spacing: 0.02em; }

p {
  text-wrap: pretty;
}

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: var(--button-radius);
  background: var(--color-button);
  color: var(--color-button-label);
  font-weight: var(--font-body-weight-bold);
}

.skip-link:focus {
  top: 12px;
}

/* Page width wrapper with a 16px minimum gutter. */
.page-width {
  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 48px);
}

.section {
  background: var(--color-bg);
  color: var(--color-text);
}

.section-pad {
  padding-block: var(--pad-top, 56px) var(--pad-bottom, 56px);
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.section-heading > :first-child {
  max-width: 760px;
}

.section-heading p {
  margin-top: 10px;
  color: var(--color-muted);
  font-size: 1.08rem;
}

.link-arrow {
  font-weight: var(--font-body-weight-bold);
  white-space: nowrap;
}

/* Rich text from the editor: consistent across product, article and collection text. */
.rte > * + * { margin-top: 1em; }
.rte h1, .rte h2, .rte h3, .rte h4 { margin-top: 1.4em; }
.rte h2 { font-size: calc(1.9rem * var(--heading-scale)); }
.rte h3 { font-size: calc(1.45rem * var(--heading-scale)); }
.rte ul, .rte ol { padding-left: 1.3em; }
.rte li + li { margin-top: 0.35em; }
.rte blockquote {
  padding: 4px 0 4px 18px;
  border-left: 4px solid var(--color-accent);
  font-size: 1.15em;
  font-weight: var(--font-body-weight-medium);
}
.rte img { border-radius: var(--radius-sm); }
.rte table { width: 100%; border-collapse: collapse; }
.rte th, .rte td { padding: 8px 10px; border-bottom: 1px solid var(--color-line); text-align: left; }
.rte a { color: var(--color-accent); }

/* Buttons */
.button,
.shopify-challenge__button,
.shopify-payment-button .shopify-payment-button__button--unbranded {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: var(--button-radius);
  border: 2px solid var(--color-button);
  background: var(--color-button);
  color: var(--color-button-label);
  font-family: var(--font-body);
  font-weight: var(--font-body-weight-bold);
  font-size: 1rem;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button--secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}

.button--secondary:hover {
  background: var(--color-text);
  color: var(--color-bg);
}

.button--full {
  width: 100%;
}

.button[disabled],
.button[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.button svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  position: relative;
}

.icon-button:hover {
  background: var(--color-surface);
  color: var(--color-surface-text);
}

.icon-button svg {
  width: 22px;
  height: 22px;
}

.icon {
  width: 20px;
  height: 20px;
  flex: none;
}

/* Forms */
.field {
  display: grid;
  gap: 6px;
}

.field label,
.field__label {
  font-weight: var(--font-body-weight-medium);
  font-size: 0.95rem;
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  border: 2px solid var(--color-border);
  border-radius: calc(var(--radius-sm) * 0.6);
  background: var(--color-bg);
  color: var(--color-text);
}

.textarea {
  min-height: 120px;
  resize: vertical;
}

.select {
  appearance: none;
  padding-right: 44px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

.form-message {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-surface-text);
}

.form-message--error {
  border: 2px solid currentColor;
}

/* Badges, prices, ratings */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.78rem;
  font-weight: var(--font-body-weight-bold);
  line-height: 1;
}

.badge--sale {
  background: var(--color-button);
  color: var(--color-button-label);
}

.badge--sold-out {
  background: var(--color-text);
  color: var(--color-bg);
}

.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-weight: var(--font-body-weight-bold);
}

.price__compare {
  font-weight: var(--font-body-weight);
  color: var(--color-muted);
  text-decoration: line-through;
}

.price__unit {
  flex-basis: 100%;
  font-size: 0.85rem;
  font-weight: var(--font-body-weight);
  color: var(--color-muted);
}

.rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--color-muted);
}

.rating__stars {
  --fill: calc(var(--rating) / var(--rating-max) * 100%);
  display: inline-block;
  font-size: 1rem;
  letter-spacing: 2px;
  line-height: 1;
  background: linear-gradient(90deg, var(--color-accent) var(--fill), var(--color-line) var(--fill));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Product grid and cards */
.product-grid {
  display: grid;
  grid-template-columns: repeat(var(--columns, 4), minmax(0, 1fr));
  --columns: var(--columns-desktop, 4);
  gap: clamp(14px, 2vw, 22px);
  list-style: none;
  padding: 0;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.card__media {
  position: relative;
  display: block;
  aspect-ratio: var(--card-ratio);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--tint, var(--color-surface));
  margin-bottom: 10px;
}

.card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.35s ease;
}

.card__media img + img {
  opacity: 0;
}

.card:hover .card__media img:first-child {
  transform: scale(1.05);
}

.card:hover .card__media img + img {
  opacity: 1;
}

.card__badges {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.card__title {
  font-family: var(--font-body);
  font-weight: var(--font-body-weight-bold);
  font-size: 1.05rem;
  line-height: 1.3;
  letter-spacing: 0;
}

.card__title a {
  text-decoration: none;
}

.card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

.card__quick {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: 0 6px 18px rgba(var(--color-text-rgb), 0.16);
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.card__quick:hover {
  background: var(--color-button);
  color: var(--color-button-label);
  transform: scale(1.06);
}

.card__quick svg {
  width: 20px;
  height: 20px;
}

.card[hidden] {
  display: none;
}

/* Placeholder when a merchant has not picked an image yet */
.placeholder-svg {
  width: 100%;
  height: 100%;
  background: var(--color-surface);
  fill: rgba(var(--color-text-rgb), 0.35);
}

/* Drawers and dialogs */
.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(440px, 100vw);
  height: 100%;
  max-height: 100%;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.18);
}

.drawer--left {
  inset: 0 auto 0 0;
  margin: 0 auto 0 0;
}

.drawer::backdrop {
  background: rgba(23, 20, 15, 0.42);
  backdrop-filter: blur(2px);
}

.drawer[open] {
  animation: drawer-in 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.drawer--left[open] {
  animation-name: drawer-in-left;
}

@keyframes drawer-in {
  from { transform: translateX(100%); }
}

@keyframes drawer-in-left {
  from { transform: translateX(-100%); }
}

.drawer__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.drawer__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--color-line);
}

.drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.drawer__foot {
  padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--color-line);
}

/* Scroll reveal: content is visible at rest, it only slides when JS adds .is-pending */
.reveal.is-pending {
  transform: translateY(22px);
}

.reveal {
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 40px;
  list-style: none;
  padding: 0;
}

.pagination a,
.pagination span {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  border: 2px solid transparent;
  text-decoration: none;
  font-weight: var(--font-body-weight-bold);
}

.pagination a:hover {
  border-color: var(--color-border);
}

.pagination [aria-current="page"] {
  background: var(--color-button);
  color: var(--color-button-label);
}

/* Empty states */
.empty-state {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 56px 16px;
  text-align: center;
}

@media (max-width: 989px) {
  .product-grid {
    --columns: var(--columns-tablet, 2);
  }
}

@media (max-width: 599px) {
  .product-grid {
    --columns: var(--columns-mobile, 2);
  }

  .button {
    min-height: 50px;
    padding: 0 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal.is-pending {
    transform: none;
  }
}

/* Shopper profile picker */
profile-picker {
  display: block;
  position: relative;
}

.profile-picker__button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 8px 4px 14px;
  border: 2px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: var(--font-body-weight-bold);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.profile-picker__button::-webkit-details-marker {
  display: none;
}

.profile-picker__button:hover {
  background: var(--color-surface);
  color: var(--color-surface-text);
}

.profile-picker__label {
  color: var(--color-muted);
  font-weight: var(--font-body-weight-medium);
}

.profile-picker__current {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.profile-picker__icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-bg);
}

.profile-picker__icon .icon {
  width: 18px;
  height: 18px;
}

.profile-picker__chevron {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.profile-picker__details[open] .profile-picker__chevron {
  transform: rotate(180deg);
}

.profile-picker__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 40;
  width: min(320px, calc(100vw - 32px));
  padding: 18px;
  border-radius: var(--radius);
  border: 2px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: 0 18px 40px rgba(var(--color-text-rgb), 0.16);
}

.profile-picker__heading {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 1.25rem;
  line-height: 1.1;
  margin-bottom: 12px;
}

.profile-picker__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  list-style: none;
  padding: 0;
}

.profile-picker__option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 6px 10px;
  border: 2px solid var(--color-line);
  border-radius: 14px;
  background: transparent;
  font-weight: var(--font-body-weight-bold);
  text-align: left;
  cursor: pointer;
}

.profile-picker__option:hover {
  border-color: var(--color-border);
}

.profile-picker__option[aria-pressed="true"] {
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-surface-text);
}

.profile-picker__note {
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--color-muted);
}

[data-location="mobile"] .profile-picker__panel {
  left: 0;
  right: auto;
}

[data-location="mobile"] .profile-picker__button {
  width: 100%;
  justify-content: space-between;
}

.profile-chip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 8px 8px 8px 16px;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-surface-text);
  font-weight: var(--font-body-weight-bold);
}

.profile-chip[hidden] {
  display: none;
}

.profile-chip a {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.85rem;
}

/* Colour-block card wells: each card in a row takes a different tint of the scheme */
.product-grid > :nth-child(4n + 1),
.marquee__group > :nth-child(4n + 1) { --tint: var(--color-surface); }
.product-grid > :nth-child(4n + 2),
.marquee__group > :nth-child(4n + 2) { --tint: color-mix(in srgb, var(--color-surface) 70%, var(--color-accent) 30%); }
.product-grid > :nth-child(4n + 3),
.marquee__group > :nth-child(4n + 3) { --tint: color-mix(in srgb, var(--color-bg) 55%, var(--color-surface) 45%); }
.product-grid > :nth-child(4n + 4),
.marquee__group > :nth-child(4n + 4) { --tint: color-mix(in srgb, var(--color-surface) 82%, var(--color-text) 18%); }

/* Quantity stepper */
.qty {
  display: inline-flex;
  align-items: center;
  border: 2px solid var(--color-border);
  border-radius: 999px;
  height: 48px;
}

.qty button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 100%;
  border: 0;
  background: none;
  cursor: pointer;
}

.qty button svg {
  width: 16px;
  height: 16px;
}

.qty input {
  width: 44px;
  height: 100%;
  border: 0;
  background: none;
  text-align: center;
  font-weight: var(--font-body-weight-bold);
  -moz-appearance: textfield;
}

.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Cart lines (drawer and page) */
.cart-lines {
  display: grid;
  gap: 18px;
  list-style: none;
  padding: 0;
}

.cart-line {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}

.cart-line__media {
  border-radius: calc(var(--radius) * 0.6);
  overflow: hidden;
  background: var(--color-surface);
  aspect-ratio: 1;
}

.cart-line__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-line__title {
  font-weight: var(--font-body-weight-bold);
  text-decoration: none;
}

.cart-line__meta {
  margin-top: 4px;
  display: grid;
  gap: 2px;
  font-size: 0.88rem;
  color: var(--color-muted);
}

.cart-line__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.cart-line__remove {
  border: 0;
  background: none;
  color: var(--color-muted);
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.88rem;
  min-height: 44px;
}

.cart-line__total {
  text-align: right;
  font-weight: var(--font-body-weight-bold);
}

.cart-line__discounts {
  list-style: none;
  padding: 0;
  font-size: 0.85rem;
  color: var(--color-accent);
}

.cart-summary {
  display: grid;
  gap: 12px;
}

.cart-summary__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-weight: var(--font-body-weight-bold);
}

.cart-summary__total {
  font-size: 1.25rem;
}

.cart-summary__note {
  font-size: 0.88rem;
  color: var(--color-muted);
}

.cart-summary__discounts {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 4px;
  color: var(--color-accent);
  font-weight: var(--font-body-weight-medium);
}

.additional-checkout-buttons {
  margin-top: 4px;
}

[aria-busy="true"] {
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.cart-note summary {
  cursor: pointer;
  font-weight: var(--font-body-weight-bold);
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* Newsletter, social media icons, localization */
.newsletter-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  max-width: 460px;
  container-type: inline-size;
}

.newsletter-form__row {
  display: flex;
  gap: 8px;
  padding: 5px;
  border: 2px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg);
}

.newsletter-form__row:focus-within {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

.newsletter-form__input {
  flex: 1;
  min-width: 0;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: var(--color-text);
}

.newsletter-form__input:focus {
  outline: none;
}

.newsletter-form__row .button {
  min-height: 46px;
}

.newsletter-form__arrow {
  display: none;
}

/* In a narrow footer column the button shrinks to a round arrow, so the field keeps room to type */
@container (max-width: 320px) {
  .newsletter-form__input {
    padding: 0 8px 0 14px;
  }

  .newsletter-form__row .newsletter-form__submit {
    flex-shrink: 0;
    width: 46px;
    min-width: 46px;
    padding: 0;
  }

  .newsletter-form__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .newsletter-form__arrow {
    display: block;
    width: 20px;
    height: 20px;
  }
}

.social-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 18px;
  margin-left: -10px;
  list-style: none;
  padding: 0;
}

.localization-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.localization-form .select {
  min-width: 220px;
  background-color: var(--color-bg);
}

/* Pickup availability and gift card recipient */
.pickup {
  margin-top: 16px;
  font-size: 0.92rem;
}

.pickup__summary {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  list-style: none;
}

.pickup__summary::-webkit-details-marker {
  display: none;
}

.pickup__summary small {
  display: block;
  color: var(--color-muted);
}

.pickup__list {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: calc(var(--radius) * 0.6);
  background: var(--color-surface);
  color: var(--color-surface-text);
  list-style: none;
}

.pickup__list li {
  display: grid;
  gap: 2px;
}

.recipient {
  padding: 12px 16px;
  border: 2px solid var(--color-line);
  border-radius: calc(var(--radius) * 0.6);
}

.recipient__toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  font-weight: var(--font-body-weight-bold);
  cursor: pointer;
  list-style: none;
}

.recipient__toggle::-webkit-details-marker {
  display: none;
}

.recipient__fields {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

/* Filters */
collection-filters {
  display: block;
}

.facets__form {
  display: grid;
  gap: 18px;
}

.facets__groups {
  display: grid;
}

.facets__group {
  border-bottom: 1px solid var(--color-line);
}

.facets__group summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  font-weight: var(--font-body-weight-bold);
  cursor: pointer;
  list-style: none;
}

.facets__group summary::-webkit-details-marker {
  display: none;
}

.facets__group summary span:first-child {
  flex: 1;
}

.facets__group summary .icon {
  transition: transform 0.2s ease;
}

.facets__group[open] summary .icon {
  transform: rotate(180deg);
}

.facets__count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--color-button);
  color: var(--color-button-label);
  font-size: 0.75rem;
}

.facets__list {
  display: grid;
  gap: 2px;
  padding: 0 0 14px;
  list-style: none;
}

.facets__list label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  cursor: pointer;
}

.facets__check {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.facets__check + label::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-radius: 6px;
}

.facets__check:checked + label::before {
  background: var(--color-button) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 7 9 18l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat;
  border-color: var(--color-button);
}

.facets__check:focus-visible + label::before {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.facets__check:disabled + label {
  opacity: 0.45;
  cursor: not-allowed;
}

.facets__swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.facets__value-count {
  color: var(--color-muted);
  font-size: 0.85rem;
}

.facets__price {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-bottom: 16px;
}

.facets__price .input {
  min-height: 44px;
}

.facets__active:not(:empty) {
  margin-top: 16px;
}

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

.facets__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-surface-text);
  font-size: 0.88rem;
  font-weight: var(--font-body-weight-bold);
  text-decoration: none;
}

.facets__chip .icon {
  width: 14px;
  height: 14px;
}

.facets__clear {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  font-size: 0.88rem;
}

/* Collection tiles (home section and collections list) */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
  list-style: none;
  padding: 0;
}

.tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tiles--3 .tile:first-child { grid-row: span 1; }

.tile__link {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
}

.tile__link img,
.tile__link .placeholder-svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.tile__link:hover img {
  transform: scale(1.05);
}

.tile__label {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 14px 20px;
  border-radius: calc(var(--radius) * 0.75);
  background: var(--color-bg);
}

.tile__title {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: -0.02em;
}

.tile__subtitle {
  display: block;
  margin-top: 4px;
  font-size: 0.875rem;
  font-weight: var(--font-body-weight-medium);
  color: var(--color-muted);
}

.tile__arrow {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-button);
  color: var(--color-button-label);
  transition: transform 0.25s ease;
}

.tile__arrow .icon {
  width: 18px;
  height: 18px;
}

.tile__link:hover .tile__arrow {
  transform: rotate(-45deg);
}

@media (max-width: 989px) {
  .tiles--3,
  .tiles--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tiles--3 .tile:first-child {
    grid-column: 1 / -1;
  }

  .tiles--3 .tile:first-child .tile__link {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 599px) {
  .tiles,
  .tiles--2,
  .tiles--3,
  .tiles--4 {
    grid-template-columns: 1fr;
  }

  .tile__link,
  .tiles--3 .tile:first-child .tile__link {
    aspect-ratio: 4 / 3;
  }
}

/* Collection and search layout */
.collection {
  padding-block: 32px 64px;
}

.collection__head {
  display: grid;
  gap: 24px;
  align-items: center;
  margin-bottom: 32px;
}

.collection__head--image {
  grid-template-columns: 1.2fr 1fr;
}

.collection__intro {
  display: grid;
  gap: 14px;
  justify-items: start;
}

.collection__description {
  max-width: 640px;
  font-size: 1.1rem;
  color: var(--color-muted);
}

.collection__image {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.collection__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.collection__layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}

.collection__layout--full {
  grid-template-columns: minmax(0, 1fr);
}

.collection__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

/* Sort on its own, when the collection has no filters */
.collection__sort .facets__sort {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.collection__sort label {
  white-space: nowrap;
}

.collection__count {
  color: var(--color-muted);
  font-weight: var(--font-body-weight-medium);
}

.collection__filter-button {
  display: none;
}

/* Large screens: the filter drawer becomes a static sidebar */
@media (min-width: 990px) {
  .filters-drawer {
    position: sticky;
    top: 110px;
    display: block;
    inset: auto;
    width: auto;
    height: auto;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    animation: none;
  }

  .filters-drawer .drawer__head,
  .filters-drawer .drawer__foot {
    display: none;
  }

  .filters-drawer .drawer__body {
    padding: 0;
    overflow: visible;
  }
}

@media (max-width: 989px) {
  .collection__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .collection__filter-button {
    display: inline-flex;
  }

  .collection__head--image {
    grid-template-columns: 1fr;
  }
}

/* Search form (search page, 404) */
.search-page__form {
  display: flex;
  gap: 10px;
  width: min(640px, 100%);
}

.search-page__form .input {
  flex: 1;
  min-width: 0;
}


/* Unbranded dynamic checkout button follows the theme; branded buttons keep Shopify's colors */
.shopify-payment-button .shopify-payment-button__button--unbranded,
.shopify-payment-button .shopify-payment-button__button--unbranded:hover:not([disabled]) {
  width: 100%;
  background-color: var(--color-button);
  color: var(--color-button-label);
  border-color: var(--color-button);
}

.shopify-payment-button__more-options {
  color: var(--color-text);
  text-decoration: underline;
}

/* Product page and featured product */
.product {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  padding-block: var(--pad-top, 24px) var(--pad-bottom, 56px);
}

.product__info {
  position: sticky;
  top: 110px;
  display: grid;
  gap: 22px;
}

.product__vendor {
  margin-bottom: 8px;
  font-size: 0.85rem;
  font-weight: var(--font-body-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.product__price .price {
  transform-origin: left center;
  font-size: 1.5rem;
}

.product__tax {
  margin-top: 6px;
  font-size: 0.88rem;
  color: var(--color-muted);
}

.product__tax a {
  color: inherit;
}

.product__installments {
  margin-top: 10px;
  font-size: 0.9rem;
}

.product__sku {
  font-size: 0.88rem;
  color: var(--color-muted);
}

.variant-picker {
  display: grid;
  gap: 18px;
}

.variant-picker__option {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.variant-picker__option legend {
  margin-bottom: 10px;
  font-weight: var(--font-body-weight-bold);
}

.variant-picker__selected {
  font-weight: var(--font-body-weight);
  color: var(--color-muted);
}

.variant-picker__values {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.variant-picker__value {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 46px;
  padding: 0 18px;
  border: 2px solid var(--color-line);
  border-radius: 999px;
  font-weight: var(--font-body-weight-bold);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.variant-picker__value:hover {
  border-color: var(--color-border);
}

input:checked + .variant-picker__value {
  border-color: var(--color-button);
  background: var(--color-button);
  color: var(--color-button-label);
}

input:focus-visible + .variant-picker__value {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

.variant-picker__value.is-unavailable {
  color: var(--color-muted);
  text-decoration: line-through;
}

.variant-picker__value--swatch {
  min-width: 46px;
  width: 46px;
  padding: 0;
}

.variant-picker__swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

input:checked + .variant-picker__value--swatch {
  background: transparent;
  border-color: var(--color-button);
}

.product-form {
  display: grid;
  gap: 12px;
}

.product-form__row {
  display: flex;
  gap: 10px;
}

.product-form__add {
  flex: 1;
  min-height: 52px;
}

.product-form__dynamic .shopify-payment-button__button {
  min-height: 52px;
  border-radius: var(--button-radius);
}

.selling-plans {
  display: grid;
  gap: 8px;
  border: 0;
  padding: 0;
  margin: 0;
}

.selling-plans__option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 16px;
  border: 2px solid var(--color-line);
  border-radius: calc(var(--radius) * 0.6);
  cursor: pointer;
}

.selling-plans__option:has(input:checked) {
  border-color: var(--color-border);
}

.product__description {
  color: var(--color-muted);
}

.product__tab {
  border-top: 1px solid var(--color-line);
}

.product__tab:last-of-type {
  border-bottom: 1px solid var(--color-line);
}

.product__tab summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  font-weight: var(--font-body-weight-bold);
  cursor: pointer;
  list-style: none;
}

.product__tab summary::-webkit-details-marker {
  display: none;
}

.product__tab summary span {
  flex: 1;
}

.product__tab-toggle {
  transition: transform 0.2s ease;
}

.product__tab[open] .product__tab-toggle {
  transform: rotate(45deg);
}

.product__tab-body {
  padding-bottom: 18px;
  color: var(--color-muted);
}

.product__perks {
  display: grid;
  gap: 10px;
  list-style: none;
  padding: 16px 18px;
  border-radius: calc(var(--radius) * 0.7);
  background: var(--color-surface);
  color: var(--color-surface-text);
}

.product__perks li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: var(--font-body-weight-medium);
}

.product__complementary-heading {
  margin-bottom: 10px;
  font-weight: var(--font-body-weight-bold);
}

.mini-list {
  display: grid;
  gap: 10px;
  list-style: none;
  padding: 0;
}

.mini {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: center;
}

.mini__media {
  border-radius: 14px;
  overflow: hidden;
  background: var(--color-surface);
  aspect-ratio: 1;
}

.mini__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mini__title {
  font-weight: var(--font-body-weight-bold);
  text-decoration: none;
}

.link-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border: 0;
  background: none;
  font-weight: var(--font-body-weight-bold);
  text-decoration: underline;
  cursor: pointer;
}

.gallery {
  display: block;
  position: relative;
}

.gallery__track {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  list-style: none;
  padding: 0;
}

.gallery__item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-surface);
  aspect-ratio: 1;
}

.gallery__item:first-child {
  grid-column: 1 / -1;
  aspect-ratio: auto;
}

.gallery__item img,
.gallery__item video,
.gallery__item model-viewer,
.gallery__item .placeholder-svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery__item:first-child img {
  height: auto;
  aspect-ratio: var(--ratio);
  max-height: 760px;
}

.gallery__embed,
.gallery__embed iframe {
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: 0;
}

.gallery__dots {
  display: none;
}

.gallery__xr {
  margin-top: 12px;
}

@media (max-width: 989px) {
  .product {
    grid-template-columns: 1fr;
  }

  .product__info {
    position: static;
  }

  .gallery__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 10px;
  }

  .gallery__track::-webkit-scrollbar {
    display: none;
  }

  .gallery__item,
  .gallery__item:first-child {
    flex: 0 0 88%;
    scroll-snap-align: center;
    aspect-ratio: 1;
  }

  .gallery__item:only-child {
    flex-basis: 100%;
  }

  .gallery__item:first-child img {
    height: 100%;
    aspect-ratio: auto;
  }

  .gallery__dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
    list-style: none;
    padding: 0;
  }

  .gallery__dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-line);
  }

  .gallery__dots button[aria-current="true"] {
    width: 22px;
    border-radius: 4px;
    background: var(--color-text);
  }
}

/* ---------- Scroll effects ----------
   Native scroll-driven animations (Chrome, Edge, Safari 26+). They run on the compositor,
   need no JavaScript and leave content static where unsupported or when motion is reduced. */

.reading-progress {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  /* Page-load sequence in the first banner: lines rise in one after another, the photo settles */
  .scroll-fx .shopify-section:first-of-type .banner__content > *,
  .scroll-fx main > .shopify-section:first-child .banner__content > * {
    animation: fx-load-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .scroll-fx main > .shopify-section:first-child .banner__content > :nth-child(2) { animation-delay: 0.08s; }
  .scroll-fx main > .shopify-section:first-child .banner__content > :nth-child(3) { animation-delay: 0.16s; }
  .scroll-fx main > .shopify-section:first-child .banner__content > :nth-child(4) { animation-delay: 0.24s; }

  .scroll-fx main > .shopify-section:first-child .banner__media picture {
    display: block;
    height: 100%;
    animation: fx-load-settle 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  @keyframes fx-load-rise {
    from { opacity: 0.01; transform: translateY(36px); }
    to { opacity: 1; transform: none; }
  }

  @keyframes fx-load-settle {
    from { transform: scale(1.1); }
    to { transform: scale(1); }
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Hero parallax on large screens. The photo starts uncropped and drifts up as the banner leaves. */
    @media (min-width: 750px) {
      .scroll-fx .banner__media img {
        height: 120%;
        animation: fx-parallax linear both;
        animation-timeline: view();
        animation-range: exit 0% exit 100%;
      }
    }

    @keyframes fx-parallax {
      from { transform: translateY(0); }
      to { transform: translateY(-16%); }
    }

    /* Image reveal: the side photo opens up like a curtain */
    .scroll-fx .split__media img {
      animation: fx-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }

    @keyframes fx-reveal {
      from { clip-path: inset(22% 22% 22% 22% round var(--radius)); transform: scale(1.18); }
      to { clip-path: inset(0 0 0 0 round 0); transform: scale(1); }
    }

    /* Section headings slide in from the side */
    .scroll-fx .section-heading > :first-child {
      animation: fx-slide linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }

    @keyframes fx-slide {
      from { transform: translateX(-72px); }
      to { transform: none; }
    }

    /* Cards, tiles and quotes rise in; neighbors follow a beat later */
    .scroll-fx .reveal {
      animation: fx-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }

    .scroll-fx .product-grid > .reveal:nth-child(4n + 2),
    .scroll-fx .tiles > .reveal:nth-child(3n + 2),
    .scroll-fx .quotes > .reveal:nth-child(3n + 2) { animation-range: entry 8% entry 88%; }

    .scroll-fx .product-grid > .reveal:nth-child(4n + 3),
    .scroll-fx .tiles > .reveal:nth-child(3n + 3),
    .scroll-fx .quotes > .reveal:nth-child(3n + 3) { animation-range: entry 16% entry 96%; }

    .scroll-fx .product-grid > .reveal:nth-child(4n + 4) { animation-range: entry 24% cover 30%; }

    /* No opacity in scroll-linked entrances: until scrolled to, text would sit transparent, and
       contrast checkers (and anyone reading ahead with a screen magnifier) see invisible text */
    @keyframes fx-rise {
      from { transform: translateY(70px) scale(0.96); }
      to { transform: none; }
    }

    /* Scrolling text keeps its own loop and gets pushed further by the page scroll */
    .scroll-fx .ticker__scroll {
      animation: fx-ticker linear both;
      animation-timeline: view();
      animation-range: cover;
    }

    @keyframes fx-ticker {
      from { transform: translateX(0); }
      to { transform: translateX(-25%); }
    }

    /* Reading progress on blog posts */
    .scroll-fx .reading-progress {
      display: block;
      position: fixed;
      inset: 0 0 auto;
      z-index: 50;
      height: 4px;
      background: var(--color-accent);
      transform-origin: left center;
      animation: fx-progress linear both;
      animation-timeline: scroll(root);
    }

    @keyframes fx-progress {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }
  }
}

/* ---------- Collection tiles fly in and collide ----------
   theme.js adds .fx-armed to tile rows below the fold and .fx-play when they come into view.
   Without JavaScript, or with reduced motion, the tiles simply stand in place. */
@media (prefers-reduced-motion: no-preference) {
  .scroll-fx [data-fx-collide].fx-armed:not(.fx-play) > .tile {
    visibility: hidden;
  }

  .scroll-fx [data-fx-collide] {
    --impact: clamp(12px, 1.6vw, 18px);
  }

  .scroll-fx [data-fx-collide].fx-play > .tile:first-child {
    animation: fx-fly-left 0.95s cubic-bezier(0.3, 0, 0.2, 1) both;
  }

  .scroll-fx [data-fx-collide].fx-play > .tile:last-child {
    animation: fx-fly-right 0.95s cubic-bezier(0.3, 0, 0.2, 1) both;
  }

  .scroll-fx [data-fx-collide].fx-play > .tile:not(:first-child):not(:last-child) {
    animation: fx-hit 0.95s linear both;
  }

  /* Impact at 55%: recoil, then a short shake that dies down */
  /* At impact the side tiles close the gap and touch the middle one, then bounce back */
  @keyframes fx-fly-left {
    0% { transform: translateX(-110vw) rotate(-9deg); }
    55% { transform: translateX(var(--impact, 16px)) rotate(0); }
    62% { transform: translateX(-18px) rotate(-2.5deg); }
    70% { transform: translateX(8px) rotate(1.2deg); }
    78% { transform: translateX(-5px) rotate(-0.6deg); }
    86% { transform: translateX(3px) rotate(0.3deg); }
    93% { transform: translateX(-1px); }
    100% { transform: none; }
  }

  @keyframes fx-fly-right {
    0% { transform: translateX(110vw) rotate(9deg); }
    55% { transform: translateX(calc(var(--impact, 16px) * -1)) rotate(0); }
    62% { transform: translateX(18px) rotate(2.5deg); }
    70% { transform: translateX(-8px) rotate(-1.2deg); }
    78% { transform: translateX(5px) rotate(0.6deg); }
    86% { transform: translateX(-3px) rotate(-0.3deg); }
    93% { transform: translateX(1px); }
    100% { transform: none; }
  }

  /* The middle tile waits, gets hit from both sides and jiggles */
  @keyframes fx-hit {
    0%, 52% { transform: scale(0.94); }
    58% { transform: scale(1.04, 0.97); }
    64% { transform: translateY(-6px) rotate(-1.4deg) scale(1.01); }
    72% { transform: translateY(2px) rotate(1deg); }
    80% { transform: rotate(-0.6deg); }
    88% { transform: rotate(0.3deg); }
    100% { transform: none; }
  }

  /* One column on phones: tiles come in from alternating sides and land with a small wobble */
  @media (max-width: 599px) {
    .scroll-fx [data-fx-collide] {
      --impact: 0px;
    }

    .scroll-fx [data-fx-collide].fx-play > .tile:nth-child(odd),
    .scroll-fx [data-fx-collide].fx-play > .tile:nth-child(even) {
      animation-duration: 0.8s;
    }

    .scroll-fx [data-fx-collide].fx-play > .tile:nth-child(odd) { animation-name: fx-fly-left; }
    .scroll-fx [data-fx-collide].fx-play > .tile:nth-child(even) { animation-name: fx-fly-right; }
    .scroll-fx [data-fx-collide].fx-play > .tile:nth-child(2) { animation-delay: 0.12s; }
    .scroll-fx [data-fx-collide].fx-play > .tile:nth-child(3) { animation-delay: 0.24s; }
  }
}

/* App blocks (for example Formgong reviews) pick up the theme's form style */
.shopify-app-block {
  min-width: 0;
}

.shopify-app-block h2 {
  font-size: calc(clamp(1.8rem, 3vw, 2.6rem) * var(--heading-scale));
  margin-bottom: 14px;
}

.shopify-app-block form {
  display: grid;
  gap: 14px;
  max-width: 680px;
}

.shopify-app-block label {
  display: grid;
  gap: 6px;
  font-weight: var(--font-body-weight-medium);
}

.shopify-app-block input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
.shopify-app-block textarea,
.shopify-app-block select {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  border: 2px solid var(--color-border);
  border-radius: calc(var(--radius-sm) * 0.6);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
}

.shopify-app-block textarea {
  min-height: 120px;
}

.shopify-app-block button[type="submit"],
.shopify-app-block input[type="submit"] {
  justify-self: start;
  min-height: 52px;
  padding: 0 26px;
  border: 2px solid var(--color-button);
  border-radius: var(--button-radius);
  background: var(--color-button);
  color: var(--color-button-label);
  font: inherit;
  font-weight: var(--font-body-weight-bold);
  cursor: pointer;
}

.shopify-app-block fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

.shopify-app-block .fg-rate {
  font-size: 1.6rem;
  line-height: 1;
}

.shopify-app-block .fg-rate legend {
  margin-bottom: 4px;
  font-size: 1rem;
  font-weight: var(--font-body-weight-medium);
}

/* ---------- Product page motion ----------
   Short and playful: the photo hops in, the details slide in one by one, the photo
   zooms a little under the pointer, perk icons wag, and (in theme.js) chosen options
   bounce and the product jumps into the cart. Transforms and opacity only: nothing
   moves the layout. */

@media (prefers-reduced-motion: no-preference) {
  /* Entrance, once per page load. theme.js adds .fx-done afterwards so details
     re-rendered for a new variant do not replay it. */
  .scroll-fx .product:not(.fx-done) .gallery__item:first-child {
    animation: fx-hop-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .scroll-fx .product:not(.fx-done) .product__info > * {
    animation: fx-slide-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--fx-i, 0) * 70ms + 140ms);
  }

  .scroll-fx .product__info > :nth-child(2) { --fx-i: 1; }
  .scroll-fx .product__info > :nth-child(3) { --fx-i: 2; }
  .scroll-fx .product__info > :nth-child(4) { --fx-i: 3; }
  .scroll-fx .product__info > :nth-child(5) { --fx-i: 4; }
  .scroll-fx .product__info > :nth-child(6) { --fx-i: 5; }
  .scroll-fx .product__info > :nth-child(7) { --fx-i: 6; }
  .scroll-fx .product__info > :nth-child(8) { --fx-i: 7; }
  .scroll-fx .product__info > :nth-child(n + 9) { --fx-i: 8; }

  /* Perk icons wag like a tail: once after the entrance, then on hover */
  .scroll-fx .product__perks svg {
    transform-origin: 50% 90%;
  }

  .scroll-fx .product:not(.fx-done) .product__perks svg {
    animation: fx-wag 0.8s ease-in-out 1.1s both;
  }

  .scroll-fx .product__perks li:hover svg {
    animation: fx-wag 0.8s ease-in-out;
  }

  /* The photo zooms in a little under the pointer */
  @media (hover: hover) and (pointer: fine) {
    .scroll-fx .gallery__item img {
      transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .scroll-fx .gallery__item:hover img {
      transform: scale(1.05);
    }
  }

  /* Buttons squish when pressed */
  .scroll-fx .product-form__add,
  .scroll-fx .card__quick,
  .scroll-fx .qty button {
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.15s ease, color 0.15s ease;
  }

  .scroll-fx .product-form__add:hover:not([disabled]) {
    transform: translateY(-2px);
  }

  .scroll-fx .product-form__add:active:not([disabled]),
  .scroll-fx .card__quick:active,
  .scroll-fx .qty button:active {
    transform: scale(0.93);
  }

  /* Open tabs drop their text in */
  .scroll-fx .product__tab[open] .product__tab-body {
    animation: fx-drop 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  @keyframes fx-hop-in {
    0% { translate: 0 34px; scale: 0.93; }
    55% { translate: 0 -8px; scale: 1.01; }
    80% { translate: 0 2px; }
    100% { translate: 0 0; scale: 1; }
  }

  @keyframes fx-slide-in {
    from { opacity: 0; translate: 40px 0; }
    to { opacity: 1; translate: 0 0; }
  }

  @keyframes fx-wag {
    0%, 100% { rotate: 0deg; }
    20% { rotate: -16deg; }
    40% { rotate: 13deg; }
    60% { rotate: -9deg; }
    80% { rotate: 5deg; }
  }

  @keyframes fx-drop {
    from { opacity: 0; translate: 0 -10px; }
    to { opacity: 1; translate: 0 0; }
  }
}

/* More photos rise into place as they scroll into view (large screens) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 990px) {
    .scroll-fx .gallery__item:not(:first-child) {
      animation: fx-settle linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 85%;
    }

    @keyframes fx-settle {
      from { opacity: 0; translate: 0 70px; scale: 0.92; }
      to { opacity: 1; translate: 0 0; scale: 1; }
    }
  }
}

/* The flying copy of the product on its way to the cart */
.fx-flyer {
  position: fixed;
  z-index: 1000;
  width: 140px;
  height: 140px;
  margin: -70px 0 0 -70px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 12px 30px rgb(0 0 0 / 0.25);
  pointer-events: none;
}

/* ---------- App forms (for example Formgong reviews): playful but quiet ----------
   Stars fill in the accent colour and pop one after another, fields lift when focused,
   fields that fail validation shake "no", the status line pops in, and the form rises
   in as it scrolls into view. Star colour is not motion, so it sits outside the guard. */

.shopify-app-block fieldset label:hover::before,
.shopify-app-block fieldset label:hover ~ label::before,
.shopify-app-block fieldset label:has(input:checked)::before,
.shopify-app-block fieldset label:has(input:checked) ~ label::before {
  color: var(--color-accent);
}

.shopify-app-block fieldset label::before {
  display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
  .scroll-fx .shopify-app-block fieldset label::before {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.15s ease;
  }

  .scroll-fx .shopify-app-block fieldset label:hover::before {
    transform: scale(1.35);
  }

  /* Picking a rating: the chosen star and every star before it pop, left to right */
  .scroll-fx .shopify-app-block fieldset label:has(input:checked)::before,
  .scroll-fx .shopify-app-block fieldset label:has(input:checked) ~ label::before {
    animation: fx-star 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) var(--fx-d, 0ms) both;
  }

  /* Stars come in reverse order in the markup: the last label is the first star */
  .scroll-fx .shopify-app-block fieldset label:nth-last-child(2) { --fx-d: 70ms; }
  .scroll-fx .shopify-app-block fieldset label:nth-last-child(3) { --fx-d: 140ms; }
  .scroll-fx .shopify-app-block fieldset label:nth-last-child(4) { --fx-d: 210ms; }
  .scroll-fx .shopify-app-block fieldset label:nth-last-child(5) { --fx-d: 280ms; }

  /* Fields lift and light up while you type in them */
  .scroll-fx .shopify-app-block input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
  .scroll-fx .shopify-app-block textarea {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.15s ease, box-shadow 0.25s ease;
  }

  .scroll-fx .shopify-app-block input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):focus,
  .scroll-fx .shopify-app-block textarea:focus {
    transform: translateY(-3px);
    border-color: var(--color-accent);
    box-shadow: 0 10px 22px -12px rgb(0 0 0 / 0.45);
  }

  .scroll-fx .shopify-app-block label:focus-within {
    color: var(--color-accent);
  }

  .scroll-fx .shopify-app-block fieldset label:focus-within {
    color: inherit;
  }

  /* A field left wrong shakes its head */
  .scroll-fx .shopify-app-block input:user-invalid,
  .scroll-fx .shopify-app-block textarea:user-invalid,
  .scroll-fx .shopify-app-block fieldset:has(input:user-invalid) label {
    animation: fx-shake 0.42s ease;
  }

  /* The button wags when you point at it and squishes when pressed */
  .scroll-fx .shopify-app-block button[type="submit"] {
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .scroll-fx .shopify-app-block button[type="submit"]:hover {
    animation: fx-nudge 0.5s ease;
  }

  .scroll-fx .shopify-app-block button[type="submit"]:active {
    transform: scale(0.93);
  }

  .scroll-fx .shopify-app-block [role="status"]:not(:empty) {
    animation: fx-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  @keyframes fx-star {
    0% { transform: scale(0.4) rotate(-30deg); }
    60% { transform: scale(1.4) rotate(8deg); }
    100% { transform: none; }
  }

  @keyframes fx-shake {
    0%, 100% { translate: 0 0; }
    20% { translate: -8px 0; }
    40% { translate: 7px 0; }
    60% { translate: -5px 0; }
    80% { translate: 3px 0; }
  }

  @keyframes fx-nudge {
    0%, 100% { rotate: 0deg; }
    30% { rotate: -4deg; }
    60% { rotate: 3deg; }
  }

  @keyframes fx-pop {
    from { opacity: 0; scale: 0.8; }
    to { opacity: 1; scale: 1; }
  }
}

/* The heading slides in and each part of the form rises as it scrolls into view */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .scroll-fx .shopify-app-block h2 {
      animation: fx-slide linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
    }

    .scroll-fx .shopify-app-block form > :not(input[type="hidden"]) {
      animation: fx-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 75%;
    }
  }
}

/* App dialogs (for example a review app's form or thank-you window) take the theme's look:
   paper background, the theme border and radius, heading font, and theme buttons. */
:is(.shopify-app-block dialog, dialog.fg-thanks) {
  /* The theme's reset zeroes margins; a modal dialog is centred by margin: auto */
  margin: auto;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: clamp(22px, 4vw, 34px);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: 0 30px 70px -30px rgb(0 0 0 / 0.45);
}

/* The thank-you window keeps its padding on the inner body: the app reads a click on the dialog box itself as a backdrop click */
dialog.fg-thanks {
  padding: 0;
}

.fg-thanks__body {
  padding: clamp(22px, 4vw, 34px);
}

:is(.shopify-app-block dialog, dialog.fg-thanks)::backdrop {
  background: rgb(20 16 10 / 0.45);
  backdrop-filter: blur(3px);
}

:is(.shopify-app-block dialog, dialog.fg-thanks) :is(h2, h3) {
  margin-bottom: 10px;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: calc(clamp(1.6rem, 3vw, 2.1rem) * var(--heading-scale));
  line-height: 1.1;
}

:is(.shopify-app-block dialog, dialog.fg-thanks) p {
  font-size: 1.05rem;
}

:is(.shopify-app-block dialog, dialog.fg-thanks) button:not([type="submit"]) {
  min-height: 48px;
  margin-top: 20px;
  padding: 0 24px;
  border: 2px solid var(--color-border);
  border-radius: var(--button-radius);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-weight: var(--font-body-weight-bold);
  cursor: pointer;
}

:is(.shopify-app-block dialog, dialog.fg-thanks) button:not([type="submit"]):hover {
  background: var(--color-text);
  color: var(--color-bg);
}

@media (prefers-reduced-motion: no-preference) {
  /* The window pops up with a small bounce; the page behind fades */
  .scroll-fx :is(.shopify-app-block dialog, dialog.fg-thanks)[open] {
    animation: fx-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  .scroll-fx :is(.shopify-app-block dialog, dialog.fg-thanks)[open]::backdrop {
    animation: fx-fade 0.3s ease both;
  }

  @keyframes fx-fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

/* Review widget from a review app (summary row, star histogram, review cards), laid out
   like the big review apps and coloured like the theme's product cards. */
.shopify-app-block .fg-summary {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr) auto;
  gap: clamp(18px, 4vw, 48px);
  align-items: center;
  margin-block: 18px 28px;
  padding: clamp(20px, 3vw, 32px);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-surface-text);
}

/* The app prints an empty summary until a review is approved */
.shopify-app-block .fg-summary:empty {
  display: none;
}

.shopify-app-block .fg-summary__score {
  text-align: center;
}

/* The app prints the stars and the average as one line ("★★★★★ 4.7") */
.shopify-app-block .fg-summary__avg {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--color-accent);
}

/* With no reviews yet the row holds only the invitation and the button */
.shopify-app-block .fg-summary > .fg-empty {
  grid-column: 1 / -2;
  padding: 0;
}

.shopify-app-block .fg-summary__count {
  margin-top: 6px;
  color: inherit;
  opacity: 0.75;
}

.shopify-app-block .fg-summary__bars {
  display: grid;
  gap: 7px;
}

.shopify-app-block .fg-bar {
  display: grid;
  grid-template-columns: 2.6em minmax(0, 1fr) 2.2em;
  gap: 10px;
  align-items: center;
  font-size: 0.9rem;
}

.shopify-app-block .fg-bar__track {
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 14%, transparent);
  overflow: hidden;
}

.shopify-app-block .fg-bar__fill {
  height: 100%;
  border-radius: inherit;
  background: var(--color-accent);
  transform-origin: left center;
}

.shopify-app-block .fg-bar__n {
  text-align: end;
  opacity: 0.75;
}

.shopify-app-block :is(.fg-write, .fg-cancel) {
  min-height: 52px;
  padding: 0 26px;
  border: 2px solid var(--color-button);
  border-radius: var(--button-radius);
  font: inherit;
  font-weight: var(--font-body-weight-bold);
  white-space: nowrap;
  cursor: pointer;
}

.shopify-app-block .fg-write {
  background: var(--color-button);
  color: var(--color-button-label);
}

.shopify-app-block .fg-cancel {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}

.shopify-app-block .fg-done {
  font-weight: var(--font-body-weight-bold);
  color: var(--color-accent);
}

.shopify-app-block .fg-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: clamp(14px, 2vw, 22px);
  list-style: none;
  padding: 0;
}

.shopify-app-block .fg-card {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: clamp(18px, 2.5vw, 24px);
  border-radius: var(--radius);
  background: var(--tint, var(--color-surface));
  color: var(--color-surface-text);
}

.shopify-app-block .fg-card:nth-child(4n + 2) { --tint: color-mix(in srgb, var(--color-surface) 70%, var(--color-accent) 30%); }
.shopify-app-block .fg-card:nth-child(4n + 3) { --tint: color-mix(in srgb, var(--color-bg) 55%, var(--color-surface) 45%); }
.shopify-app-block .fg-card:nth-child(4n + 4) { --tint: color-mix(in srgb, var(--color-surface) 82%, var(--color-text) 18%); }

.shopify-app-block .fg-card__name {
  font-weight: var(--font-body-weight-bold);
}

.shopify-app-block .fg-card__stars {
  color: var(--color-accent);
  letter-spacing: 0.08em;
}

.shopify-app-block .fg-card__date {
  font-size: 0.85rem;
  opacity: 0.7;
}

.shopify-app-block .fg-card__reply {
  margin-top: 6px;
  padding-left: 12px;
  border-left: 3px solid var(--color-accent);
  font-size: 0.95rem;
}

.shopify-app-block .fg-empty {
  padding: 28px 0;
  text-align: center;
  font-size: 1.1rem;
}

@media (max-width: 749px) {
  .shopify-app-block .fg-summary {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
  }

  .shopify-app-block .fg-summary :is(.fg-write, .fg-cancel) {
    width: 100%;
  }
}

/* Bars fill and cards rise as the widget scrolls into view */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .scroll-fx .shopify-app-block .fg-bar__fill {
      animation: fx-fill linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 40%;
    }

    .scroll-fx .shopify-app-block .fg-card {
      animation: fx-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 75%;
    }

    @keyframes fx-fill {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }
  }
}