/** Shopify CDN: Minification failed

Line 1421:0 Unexpected "}"

**/
/* ==========================================================================
   YUP! Pet Toys — brand layer
   Translated from the "YUP Landing Page" Claude Design artboard.
   Scoped under .yup-* so it never leaks into Horizon's own components.
   ========================================================================== */

:root {
  --yup-teal:      #14505C;
  --yup-teal-dark: #0E3A43;
  --yup-red:       #9B2226;
  --yup-gold:      #C79049;
  --yup-cream:     #F4EAD7;
  --yup-paper:     #FBF6EC;
  --yup-sand:      #EFE4CE;
  --yup-line:      #E4D6BC;
  --yup-ink:       #15110E;
  --yup-body:      #4A4038;
  --yup-muted:     #7A6E62;

  --yup-display: 'Archivo Black', 'Archivo', Helvetica, Arial, sans-serif;
  --yup-ui:      'Archivo', Helvetica, Arial, sans-serif;
  --yup-text:    'Karla', Helvetica, Arial, sans-serif;

  --yup-page: 1200px;
  --yup-gutter: clamp(20px, 4vw, 32px);
}

/* --- page shell ---------------------------------------------------------- */
body {
  background: var(--yup-paper);
  -webkit-font-smoothing: antialiased;
}
body .page-wrapper { overflow-x: clip; }
body ::selection { background: var(--yup-gold); color: var(--yup-ink); }

/* Horizon puts spacing on the layout main; the YUP sections own their own. */
main.content-for-layout:has(.yup-section) { padding: 0; }

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

.yup-section {
  font-family: var(--yup-text);
  color: var(--yup-ink);
  font-size: 16px;
  line-height: 1.6;
}
.yup-section img { max-width: 100%; }

.yup-wrap {
  max-width: var(--yup-page);
  margin-inline: auto;
  padding-inline: var(--yup-gutter);
}

/* --- shared type --------------------------------------------------------- */
.yup-eyebrow {
  font-family: var(--yup-ui);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.yup-eyebrow--red  { color: var(--yup-red); }
.yup-eyebrow--gold { color: var(--yup-gold); }

.yup-h2 {
  font-family: var(--yup-display);
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.04;
  letter-spacing: -0.005em;
  color: var(--yup-teal);
  margin: 0;
  text-wrap: balance;
}
.yup-h2--cream { color: var(--yup-cream); }
.yup-h2--sm { font-size: clamp(28px, 4vw, 42px); }

.yup-lede {
  margin: 0;
  color: var(--yup-body);
  line-height: 1.6;
  font-size: 16px;
}

/* --- shared buttons ------------------------------------------------------ */
.yup-btn {
  display: inline-block;
  font-family: var(--yup-ui);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 16px 28px;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
  line-height: 1.2;
}
.yup-btn--red {
  background: var(--yup-red);
  color: var(--yup-cream);
  border-color: var(--yup-gold);
}
.yup-btn--red:hover { background: var(--yup-gold); color: var(--yup-ink); }

.yup-btn--teal {
  background: var(--yup-teal);
  color: var(--yup-cream);
  border-color: var(--yup-teal);
}
.yup-btn--teal:hover { background: var(--yup-red); border-color: var(--yup-red); color: var(--yup-cream); }

.yup-btn--gold {
  background: var(--yup-gold);
  color: var(--yup-ink);
  border-color: var(--yup-gold);
}
.yup-btn--gold:hover { background: var(--yup-cream); border-color: var(--yup-cream); }

.yup-btn--ghost {
  color: var(--yup-cream);
  font-weight: 600;
  padding: 16px 8px;
  border: 0;
  border-bottom: 2px solid rgba(199, 144, 73, .5);
  border-radius: 0;
  background: none;
}
.yup-btn--ghost:hover { color: var(--yup-gold); }

/* ==========================================================================
   Announcement bar
   ========================================================================== */
.yup-announce {
  background: var(--yup-red);
  color: var(--yup-cream);
  font-family: var(--yup-ui);
  font-weight: 700;
  font-size: clamp(10px, 2.4vw, 12px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  padding: 10px 16px;
  line-height: 1.5;
}
.yup-announce a { color: inherit; text-decoration: underline; }

/* ==========================================================================
   Header
   ========================================================================== */
.yup-header-section { position: sticky; top: 0; z-index: 50; }

.yup-header {
  background: var(--yup-teal);
  border-bottom: 3px solid var(--yup-gold);
}
.yup-header__inner {
  max-width: var(--yup-page);
  margin-inline: auto;
  padding: 10px clamp(16px, 4vw, 32px);
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 32px);
}
.yup-header__logo {
  display: flex;
  align-items: center;
  margin-block: -14px;
  flex-shrink: 0;
  text-decoration: none;
}
.yup-header__logo img {
  height: 96px;
  width: auto;
  display: block;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .35));
}
.yup-header__wordmark {
  font-family: var(--yup-display);
  font-size: 26px;
  color: var(--yup-cream);
  letter-spacing: -0.01em;
}

.yup-nav {
  display: flex;
  gap: clamp(16px, 2.2vw, 28px);
  margin-left: auto;
  align-items: center;
  font-family: var(--yup-ui);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.yup-nav a { color: var(--yup-cream); text-decoration: none; transition: color .18s ease; }
.yup-nav a:hover { color: var(--yup-gold); }

.yup-header__cta {
  font-size: 13px;
  padding: 13px 20px;
  white-space: nowrap;
}
.yup-header__cart {
  font-family: var(--yup-ui);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yup-cream);
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s ease;
}
.yup-header__cart:hover { color: var(--yup-gold); }

.yup-burger {
  display: none;
  margin-left: auto;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 48px;
  height: 48px;
  padding: 0 10px;
  background: none;
  border: 2px solid var(--yup-gold);
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
}
.yup-burger span {
  display: block;
  height: 2px;
  background: var(--yup-cream);
  border-radius: 2px;
}

/* mobile drawer */
.yup-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(21, 17, 14, .55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  border: 0;
  padding: 0;
}
.yup-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 100;
  width: min(320px, 84vw);
  background: var(--yup-teal);
  border-left: 3px solid var(--yup-gold);
  transform: translateX(105%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  flex-direction: column;
  padding: 24px;
  box-shadow: -20px 0 50px rgba(0, 0, 0, .3);
  overflow-y: auto;
}
.yup-header[data-open='true'] ~ .yup-scrim { opacity: 1; pointer-events: auto; }
.yup-header[data-open='true'] ~ .yup-drawer { transform: translateX(0); }

.yup-drawer__close {
  align-self: flex-end;
  width: 44px;
  height: 44px;
  background: none;
  border: 2px solid var(--yup-gold);
  border-radius: 4px;
  color: var(--yup-cream);
  font-size: 22px;
  font-family: var(--yup-ui);
  cursor: pointer;
  line-height: 1;
}
.yup-drawer__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 24px;
  font-family: var(--yup-ui);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.yup-drawer__nav a {
  color: var(--yup-cream);
  padding: 16px 4px;
  border-bottom: 1px solid rgba(199, 144, 73, .3);
  text-decoration: none;
}
.yup-drawer__cta { margin-top: 28px; font-size: 14px; padding: 18px 22px; }

@media (max-width: 899px) {
  .yup-nav, .yup-header__cta { display: none; }
  .yup-burger { display: flex; }
  .yup-header__logo img { height: 68px; }
}
@media (min-width: 900px) {
  .yup-scrim, .yup-drawer { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.yup-hero { background: var(--yup-teal); position: relative; overflow: hidden; }
.yup-hero__inner {
  max-width: var(--yup-page);
  margin-inline: auto;
  padding: clamp(40px, 6vw, 72px) var(--yup-gutter) 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
.yup-hero__copy { padding-bottom: clamp(24px, 6vw, 80px); }
.yup-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--yup-gold);
  color: var(--yup-gold);
  font-family: var(--yup-ui);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 3px;
  margin-bottom: clamp(18px, 3vw, 28px);
}
.yup-hero__title {
  font-family: var(--yup-display);
  font-weight: 400;
  font-size: clamp(40px, 7.5vw, 76px);
  line-height: .96;
  letter-spacing: -0.02em;
  color: var(--yup-cream);
  margin: 0 0 20px;
  text-wrap: balance;
}
.yup-hero__title em { font-style: normal; color: var(--yup-gold); }
.yup-hero__text {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
  color: rgba(244, 234, 215, .82);
  margin: 0 0 32px;
  max-width: 460px;
  text-wrap: pretty;
}
.yup-hero__actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.yup-hero__actions .yup-btn--red { font-size: 15px; padding: 18px 30px; letter-spacing: .09em; }

.yup-stats {
  display: flex;
  gap: clamp(20px, 4vw, 36px);
  flex-wrap: wrap;
  margin-top: clamp(28px, 4vw, 48px);
  padding-top: 24px;
  border-top: 1px solid rgba(199, 144, 73, .3);
}
.yup-stat__n {
  font-family: var(--yup-display);
  font-weight: 400;
  font-size: 26px;
  color: var(--yup-gold);
  line-height: 1.2;
}
.yup-stat__label { font-size: 13px; color: rgba(244, 234, 215, .7); letter-spacing: .05em; }

.yup-hero__media { position: relative; align-self: end; width: 100%; }
.yup-hero__halo {
  position: absolute;
  left: 50%;
  top: 6%;
  transform: translateX(-50%);
  width: 76%;
  max-width: 470px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(199, 144, 73, .18);
  border: 1px solid rgba(199, 144, 73, .35);
}
.yup-hero__media img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  max-width: 520px;
  margin-inline: auto;
  filter: drop-shadow(0 26px 44px rgba(0, 0, 0, .4));
}

/* ==========================================================================
   Lockup band
   ========================================================================== */
.yup-lockup {
  background: var(--yup-teal-dark);
  border-top: 3px solid var(--yup-gold);
  border-bottom: 3px solid var(--yup-gold);
  padding: clamp(32px, 5vw, 52px) var(--yup-gutter) 20px;
}
.yup-lockup img {
  display: block;
  width: 100%;
  max-width: min(440px, 68vw);
  height: auto;
  margin: 0 auto clamp(20px, 3vw, 30px);
}
.yup-lockup__list {
  max-width: var(--yup-page);
  margin-inline: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(14px, 3vw, 32px);
  flex-wrap: wrap;
  font-family: var(--yup-ui);
  font-weight: 700;
  font-size: clamp(11px, 1.4vw, 13px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yup-cream);
}
.yup-lockup__sep { color: var(--yup-gold); }

/* ==========================================================================
   Lineup (product cards)
   ========================================================================== */
.yup-lineup { padding: clamp(56px, 8vw, 96px) 0; background: var(--yup-paper); }
.yup-lineup__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 32px);
  margin-bottom: clamp(28px, 4vw, 44px);
  flex-wrap: wrap;
}
.yup-lineup__head .yup-lede { max-width: 340px; }

.yup-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(18px, 2.5vw, 28px);
}
.yup-card {
  background: #fff;
  border: 2px solid var(--yup-line);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .2s ease;
}
.yup-card:hover { border-color: var(--yup-gold); }
.yup-card__media {
  /* White, not sand — see "Product media backdrop" below. */
  background: #ffffff;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
  display: block;
}
.yup-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yup-card__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  background: var(--yup-red);
  color: var(--yup-cream);
  font-family: var(--yup-ui);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 3px;
}
.yup-card__body { padding: 26px 24px 28px; display: flex; flex-direction: column; flex: 1; }
.yup-card__name {
  font-family: var(--yup-display);
  font-weight: 400;
  font-size: 26px;
  margin: 0 0 8px;
  color: var(--yup-teal);
  letter-spacing: -0.01em;
}
.yup-card__name a { color: inherit; text-decoration: none; }
.yup-card__spec {
  font-family: var(--yup-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--yup-red);
  margin-bottom: 14px;
}
.yup-card__blurb {
  margin: 0 0 22px;
  color: var(--yup-body);
  line-height: 1.6;
  font-size: 15px;
  flex: 1;
  text-wrap: pretty;
}
.yup-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.yup-card__price {
  font-family: var(--yup-display);
  font-weight: 400;
  font-size: 24px;
  color: var(--yup-ink);
}
.yup-card__price s { color: var(--yup-muted); font-size: 17px; margin-right: 8px; }
.yup-card__cta {
  font-size: 12px;
  letter-spacing: 0.1em;
  padding: 15px 20px;
  min-height: 46px;
  margin: 0;
}
.yup-card__cta[disabled] { opacity: .55; cursor: not-allowed; }
.yup-card form { margin: 0; }

/* ==========================================================================
   Why YUP! (benefits)
   ========================================================================== */
.yup-why { background: var(--yup-teal); padding: clamp(56px, 8vw, 96px) 0; }
.yup-why__head { text-align: center; margin-bottom: clamp(32px, 5vw, 56px); }
.yup-why__head .yup-h2 { max-width: 660px; margin-inline: auto; line-height: 1.06; }
.yup-grid3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: clamp(16px, 2.2vw, 24px);
}
.yup-benefit {
  background: var(--yup-cream);
  border: 2px solid var(--yup-gold);
  border-radius: 8px;
  padding: clamp(26px, 3vw, 38px) clamp(22px, 2.5vw, 32px);
}
.yup-benefit__n {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--yup-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--yup-display);
  font-weight: 400;
  font-size: 20px;
  color: var(--yup-teal);
  margin-bottom: 22px;
}
.yup-benefit h3 {
  font-family: var(--yup-display);
  font-weight: 400;
  font-size: 22px;
  margin: 0 0 12px;
  color: var(--yup-teal);
}
.yup-benefit p { margin: 0; color: var(--yup-body); line-height: 1.65; font-size: 15px; text-wrap: pretty; }

/* ==========================================================================
   Story
   ========================================================================== */
.yup-story { padding: clamp(56px, 8vw, 96px) 0; background: var(--yup-paper); }
.yup-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.yup-story__figure {
  border: 2px solid var(--yup-line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--yup-sand);
  margin: 0;
}
.yup-story__figure img { width: 100%; height: auto; display: block; }
.yup-story h2 { margin-bottom: 22px; line-height: 1.06; font-size: clamp(28px, 4.2vw, 44px); }
.yup-story p {
  font-size: clamp(16px, 1.5vw, 17px);
  line-height: 1.7;
  color: var(--yup-body);
  margin: 0 0 18px;
  text-wrap: pretty;
}
.yup-story p:last-of-type { margin-bottom: 30px; }

/* ==========================================================================
   Reviews
   ========================================================================== */
.yup-reviews {
  background: var(--yup-cream);
  border-top: 3px solid var(--yup-gold);
  border-bottom: 3px solid var(--yup-gold);
  padding: clamp(52px, 7vw, 88px) 0;
}
.yup-reviews__head { text-align: center; margin-bottom: clamp(28px, 4vw, 44px); }
.yup-review {
  background: var(--yup-paper);
  border: 2px solid var(--yup-line);
  border-radius: 8px;
  padding: clamp(24px, 3vw, 32px) clamp(22px, 2.5vw, 28px);
  margin: 0;
}
.yup-review__stars { color: var(--yup-gold); letter-spacing: 4px; font-size: 16px; margin-bottom: 16px; }
.yup-review blockquote {
  margin: 0 0 20px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--yup-ink);
  text-wrap: pretty;
}
.yup-review figcaption {
  font-family: var(--yup-ui);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--yup-teal);
}

/* ==========================================================================
   Where to buy
   ========================================================================== */
.yup-stores { padding: clamp(56px, 8vw, 96px) 0; background: var(--yup-paper); }
.yup-stores .yup-split { align-items: start; }
.yup-stores h2 { margin-bottom: 20px; line-height: 1.06; font-size: clamp(28px, 4.2vw, 44px); }
.yup-stores__text {
  font-size: clamp(16px, 1.5vw, 17px);
  line-height: 1.7;
  color: var(--yup-body);
  margin: 0 0 26px;
  max-width: 440px;
}
.yup-zip { display: flex; gap: 12px; flex-wrap: wrap; max-width: 420px; }
.yup-input {
  flex: 1 1 180px;
  min-width: 0;
  font-family: var(--yup-text);
  font-size: 16px;
  padding: 16px 18px;
  border: 2px solid var(--yup-gold);
  border-radius: 4px;
  background: var(--yup-paper);
  color: var(--yup-ink);
  outline: none;
}
.yup-input::placeholder { color: var(--yup-muted); }
.yup-input:focus-visible { border-color: var(--yup-red); }
.yup-zip .yup-btn { font-size: 13px; letter-spacing: .1em; padding: 16px 26px; min-height: 48px; border-color: var(--yup-red); }
.yup-zip .yup-btn:hover { background: var(--yup-teal); border-color: var(--yup-teal); color: var(--yup-cream); }
.yup-stores__msg { margin-top: 14px; font-size: 14px; color: var(--yup-muted); min-height: 1.2em; }

.yup-wholesale {
  background: var(--yup-teal);
  border-radius: 8px;
  padding: clamp(28px, 3.4vw, 40px) clamp(24px, 3vw, 36px);
  border: 2px solid var(--yup-gold);
}
.yup-wholesale h3 {
  font-family: var(--yup-display);
  font-weight: 400;
  font-size: 22px;
  color: var(--yup-cream);
  margin: 0 0 20px;
}
.yup-wholesale p { color: rgba(244, 234, 215, .82); line-height: 1.65; font-size: 16px; margin: 0 0 26px; }
.yup-wholesale .yup-btn { font-size: 13px; letter-spacing: .1em; padding: 15px 24px; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.yup-faq { background: var(--yup-paper); padding: 0 var(--yup-gutter) clamp(56px, 8vw, 96px); }
.yup-faq__inner { max-width: 840px; margin-inline: auto; }
.yup-faq h2 { text-align: center; margin: 0 0 clamp(24px, 3vw, 36px); }
.yup-faq__list { border-top: 2px solid var(--yup-line); }
.yup-faq__item { border-bottom: 2px solid var(--yup-line); }
.yup-faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--yup-ui);
  font-weight: 700;
  font-size: clamp(16px, 2vw, 18px);
  color: var(--yup-teal);
  min-height: 56px;
  transition: color .18s ease;
}
.yup-faq__item summary::-webkit-details-marker { display: none; }
.yup-faq__item summary:hover { color: var(--yup-red); }
.yup-faq__sign {
  font-family: var(--yup-display);
  font-size: 22px;
  color: var(--yup-gold);
  flex-shrink: 0;
  line-height: 1;
}
.yup-faq__item[open] .yup-faq__sign::before { content: '\2212'; }
.yup-faq__item:not([open]) .yup-faq__sign::before { content: '+'; }
.yup-faq__item p {
  margin: 0;
  padding: 0 4px 26px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--yup-body);
  max-width: 660px;
  text-wrap: pretty;
}

/* ==========================================================================
   Email capture
   ========================================================================== */
.yup-email {
  background: var(--yup-red);
  padding: clamp(52px, 7vw, 80px) var(--yup-gutter);
  border-top: 3px solid var(--yup-gold);
}
.yup-email__inner { max-width: 820px; margin-inline: auto; text-align: center; }
.yup-email h2 {
  font-family: var(--yup-display);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.06;
  margin: 0 0 14px;
  color: var(--yup-cream);
  text-wrap: balance;
}
.yup-email p {
  color: rgba(244, 234, 215, .85);
  font-size: clamp(16px, 1.5vw, 17px);
  line-height: 1.6;
  margin: 0 0 28px;
}
.yup-email form { display: flex; gap: 12px; flex-wrap: wrap; max-width: 520px; margin-inline: auto; justify-content: center; }
.yup-email .yup-input { flex: 1 1 220px; padding: 17px 20px; background: var(--yup-cream); }
.yup-email .yup-btn {
  background: var(--yup-teal);
  color: var(--yup-cream);
  border-color: var(--yup-gold);
  font-size: 13px;
  letter-spacing: .1em;
  padding: 17px 28px;
  min-height: 50px;
}
.yup-email .yup-btn:hover { background: var(--yup-gold); color: var(--yup-ink); }
.yup-email__note { color: var(--yup-cream); font-size: 15px; margin: 18px 0 0; }

/* ==========================================================================
   Footer
   ========================================================================== */
.yup-footer {
  background: var(--yup-teal);
  color: rgba(244, 234, 215, .7);
  padding: clamp(44px, 6vw, 64px) var(--yup-gutter) 36px;
  font-family: var(--yup-text);
  font-size: 16px;
}
.yup-footer__cols {
  max-width: var(--yup-page);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(28px, 4vw, 48px);
}
.yup-footer__brand { min-width: 220px; }
.yup-footer__brand img { height: 88px; width: auto; display: block; margin-bottom: 18px; }
.yup-footer__brand p { margin: 0; font-size: 15px; line-height: 1.65; max-width: 280px; }
.yup-footer__col { display: flex; flex-direction: column; gap: 12px; }
.yup-footer__title {
  font-family: var(--yup-ui);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yup-gold);
  margin-bottom: 4px;
}
.yup-footer__col a {
  color: rgba(244, 234, 215, .75);
  font-size: 15px;
  text-decoration: none;
  transition: color .18s ease;
}
.yup-footer__col a:hover { color: var(--yup-gold); }
.yup-footer__bar {
  max-width: var(--yup-page);
  margin: 40px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(199, 144, 73, .3);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
}
.yup-footer__legal { display: flex; gap: 20px; flex-wrap: wrap; }
.yup-footer__legal a { color: rgba(244, 234, 215, .6); text-decoration: none; }
.yup-footer__legal a:hover { color: var(--yup-gold); }

/* --- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .yup-drawer, .yup-scrim, .yup-btn, .yup-card { transition: none; }
}

/* ==========================================================================
   GLOBAL BRAND LAYER
   Everything above styles the bespoke YUP! sections. This block re-skins the
   stock Horizon templates — product, collection, cart, search, 404, pages,
   blog — so the whole site reads as one brand rather than two.

   Horizon builds its type off four CSS custom properties emitted by
   snippets/theme-styles-variables.liquid. This file loads after that block,
   so redefining them here repoints every stock section at the YUP! faces
   without touching Shopify's font_picker settings.
   ========================================================================== */

:root {
  --font-body--family: 'Karla', Helvetica, Arial, sans-serif;
  --font-body--style: normal;
  --font-body--weight: 400;

  --font-subheading--family: 'Archivo', Helvetica, Arial, sans-serif;
  --font-subheading--style: normal;
  --font-subheading--weight: 600;

  --font-heading--family: 'Archivo Black', 'Archivo', Helvetica, Arial, sans-serif;
  --font-heading--style: normal;
  --font-heading--weight: 400;

  /* Buttons resolve to the accent face via --button-font-family-primary. */
  --font-accent--family: 'Archivo', Helvetica, Arial, sans-serif;
  --font-accent--style: normal;
  --font-accent--weight: 700;
}

/* Horizon's per-level heading variables (--font-h1--family and friends) are
   injected outside the theme source, so we cannot rely on them dereferencing
   --font-heading--family at render time. Re-point them explicitly. Only the
   face is set here — size, line-height, tracking and case still come from the
   theme's own typography settings. */
:root {
  --font-h1--family: var(--font-heading--family);
  --font-h1--style: var(--font-heading--style);
  --font-h1--weight: var(--font-heading--weight);
  --font-h2--family: var(--font-heading--family);
  --font-h2--style: var(--font-heading--style);
  --font-h2--weight: var(--font-heading--weight);
  --font-h3--family: var(--font-heading--family);
  --font-h3--style: var(--font-heading--style);
  --font-h3--weight: var(--font-heading--weight);
  --font-h4--family: var(--font-heading--family);
  --font-h4--style: var(--font-heading--style);
  --font-h4--weight: var(--font-heading--weight);
  --font-h5--family: var(--font-subheading--family);
  --font-h5--style: var(--font-subheading--style);
  --font-h5--weight: var(--font-subheading--weight);
  --font-h6--family: var(--font-subheading--family);
  --font-h6--style: var(--font-subheading--style);
  --font-h6--weight: var(--font-subheading--weight);
  --font-paragraph--family: var(--font-body--family);
  --font-paragraph--style: var(--font-body--style);
  --font-paragraph--weight: var(--font-body--weight);
}

/* Last-resort guarantee: if a Horizon build renames those variables again,
   the element selectors below still land the right face. */
body { font-family: var(--font-body--family); }
h1, h2, h3, h4 { font-family: var(--font-heading--family); }
h5, h6 { font-family: var(--font-subheading--family); }

/* Archivo Black ships a single 400 weight. Without this the browser
   synthesises a fake bold on top of an already-heavy face and the display
   headings turn to mud. h5/h6 use the subheading face and keep their weight. */
h1, h2, h3, h4 {
  font-weight: 400;
}

/* Match the button treatment used across the YUP! sections. */
.button,
.button-secondary {
  font-weight: 700;
  letter-spacing: 0.09em;
}

/* Horizon's product price and section headers lean on the subheading face;
   nudge them toward the design's tighter, more deliberate spacing. */
.price,
.product-price {
  letter-spacing: 0.01em;
}

/* Gold hover on inline links, mirroring the footer and nav behaviour. */
.yup-section a:not(.yup-btn):hover {
  color: var(--yup-gold);
}

/* ==========================================================================
   Store locator page
   ========================================================================== */
.yup-locator { padding: clamp(48px, 7vw, 88px) 0; background: var(--yup-paper); }
.yup-locator__head { max-width: 720px; margin-bottom: clamp(24px, 3vw, 36px); }
.yup-locator__head h1 { margin-bottom: 18px; }

.yup-locator__search {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  max-width: 640px;
  margin-bottom: 10px;
}
.yup-locator__search .yup-input { flex: 1 1 220px; }
.yup-locator__search .yup-btn { font-size: 13px; padding: 16px 24px; min-height: 48px; }
.yup-locator__status { margin: 0 0 clamp(20px, 3vw, 28px); font-size: 14px; color: var(--yup-muted); min-height: 1.3em; }
.yup-locator__empty { margin-top: 20px; color: var(--yup-body); }

.yup-locator__grid {
  display: grid;
  grid-template-columns: minmax(280px, 400px) 1fr;
  gap: clamp(20px, 3vw, 32px);
  align-items: start;
}
@media (max-width: 849px) {
  .yup-locator__grid { grid-template-columns: 1fr; }
  .yup-locator__map { order: -1; }
}

.yup-locator__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 620px;
  overflow-y: auto;
  border: 2px solid var(--yup-line);
  border-radius: 8px;
  background: #fff;
}
.yup-locator__item { padding: 20px 22px; border-bottom: 1px solid var(--yup-line); }
.yup-locator__item:last-child { border-bottom: 0; }
.yup-locator__item[hidden] { display: none; }

.yup-locator__name {
  font-family: var(--yup-display);
  font-weight: 400;
  font-size: 18px;
  color: var(--yup-teal);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.yup-locator__addr { font-style: normal; font-size: 15px; line-height: 1.55; color: var(--yup-body); margin-bottom: 10px; }
.yup-locator__meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.yup-locator__meta a,
.yup-locator__show {
  font-family: var(--yup-ui);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--yup-red);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.yup-locator__meta a:hover,
.yup-locator__show:hover { color: var(--yup-teal); }
.yup-locator__dist {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--yup-ui);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yup-gold);
}

.yup-locator__map {
  height: clamp(360px, 60vh, 620px);
  border: 2px solid var(--yup-line);
  border-radius: 8px;
  background: var(--yup-sand);
  z-index: 0;
}
/* Leaflet paints its own chrome; keep it inside the brand. */
.yup-locator__map .leaflet-container { font-family: var(--yup-text); border-radius: 6px; }
.yup-locator__map .leaflet-popup-content-wrapper { border-radius: 6px; }
.yup-locator__map .leaflet-popup-content { font-size: 14px; line-height: 1.5; }
.yup-locator__map .leaflet-popup-content strong { font-family: var(--yup-display); font-weight: 400; color: var(--yup-teal); }
.yup-locator__map .leaflet-bar a { color: var(--yup-teal); }

/* Brand map pin — CSS-drawn, so no marker image request. */
.yup-pin span {
  display: block;
  width: 22px;
  height: 22px;
  margin: 2px;
  background: var(--yup-red);
  border: 2px solid var(--yup-cream);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.yup-pin:hover span,
.leaflet-marker-icon.yup-pin:focus span { background: var(--yup-teal); }

/* ==========================================================================
   Wholesale enquiry page
   ========================================================================== */
.yup-wholesale-page { padding: clamp(48px, 7vw, 88px) 0; background: var(--yup-paper); }
.yup-wholesale-page__grid {
  display: grid;
  grid-template-columns: minmax(280px, 440px) 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 899px) {
  .yup-wholesale-page__grid { grid-template-columns: 1fr; }
}
.yup-wholesale-page__intro h1 { margin-bottom: 18px; }

.yup-points { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 16px; }
.yup-points li {
  padding-left: 18px;
  border-left: 3px solid var(--yup-gold);
  display: grid;
  gap: 4px;
}
.yup-points strong {
  font-family: var(--yup-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yup-teal);
}
.yup-points span { font-size: 15px; line-height: 1.6; color: var(--yup-body); }
.yup-points__note { margin-top: 26px; font-size: 15px; line-height: 1.6; color: var(--yup-muted); }

.yup-formcard {
  background: #fff;
  border: 2px solid var(--yup-line);
  border-radius: 8px;
  padding: clamp(24px, 3vw, 38px);
}
.yup-formcard form { margin: 0; display: grid; gap: 18px; }

.yup-field { display: grid; gap: 7px; }
.yup-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 599px) { .yup-field-row { grid-template-columns: 1fr; } }

.yup-field label,
.yup-fieldset legend {
  font-family: var(--yup-ui);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yup-teal);
}
.yup-req { color: var(--yup-red); }
.yup-formcard .yup-input { width: 100%; }
.yup-formcard textarea.yup-input { resize: vertical; line-height: 1.6; }
.yup-formcard select.yup-input {
  appearance: none;
  /* Brand caret, inlined so it costs no request. */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2314505C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  padding-right: 42px;
  cursor: pointer;
}

.yup-fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.yup-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 18px; }
.yup-checks label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--yup-text);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--yup-ink);
  cursor: pointer;
}
.yup-checks input { width: 18px; height: 18px; accent-color: var(--yup-teal); flex-shrink: 0; }

.yup-formcard__submit { width: 100%; margin-top: 4px; font-size: 14px; padding: 18px 24px; }
.yup-formcard__fine { margin: 0; font-size: 13px; line-height: 1.55; color: var(--yup-muted); }

.yup-form__success,
.yup-form__error { border-radius: 6px; padding: 20px 22px; display: grid; gap: 8px; }
.yup-form__success { background: var(--yup-cream); border: 2px solid var(--yup-teal); }
.yup-form__error { background: #FBEDED; border: 2px solid var(--yup-red); }
.yup-form__success strong,
.yup-form__error strong {
  font-family: var(--yup-display);
  font-weight: 400;
  font-size: 19px;
  color: var(--yup-teal);
}
.yup-form__error strong { color: var(--yup-red); }
.yup-form__success p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--yup-body); }
.yup-form__error ul { margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.6; color: var(--yup-body); }

/* ==========================================================================
   Product media backdrop
   White behind every product image — product page, collection cards, quick
   add — so cut-out shots with a transparent background sit on white rather
   than a tinted panel. CSS cannot detect an alpha channel, so this applies
   to all product media; with fully opaque shots it simply never shows.
   Horizon emits its own `background-color: var(--color-background)` from a
   section-level {% style %} block that renders after this file, so the
   `body` prefix is there to win on specificity rather than order.
   ========================================================================== */
body .product-media-container,
body .product-media-container.constrain-height {
  background-color: #ffffff;
}

/* ==========================================================================
   Floating cart tab
   Persistent shortcut + add-to-cart confirmation. Sits below Horizon's
   overlay (16) and drawer (18) layers so the cart drawer always covers it.
   ========================================================================== */
.yup-carttab {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: calc(clamp(16px, 3vw, 28px) + env(safe-area-inset-bottom, 0px));
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
  /* visibility is stepped, not eased: delay it when hiding so the fade can
     finish, apply it instantly when showing. Keeping visibility (rather than
     opacity alone) also takes the tab out of the tab order while empty. */
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.yup-carttab[data-empty='true'] {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
}
.yup-carttab[data-empty='false'] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .25s ease, transform .25s ease, visibility 0s;
}

.yup-carttab__btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--yup-teal);
  color: var(--yup-cream);
  border: 2px solid var(--yup-gold);
  border-radius: 999px;
  padding: 13px 20px;
  font-family: var(--yup-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(21, 17, 14, .28);
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.yup-carttab__btn:hover { background: var(--yup-red); color: var(--yup-cream); }
.yup-carttab__icon { flex-shrink: 0; }

.yup-carttab__count {
  background: var(--yup-red);
  color: var(--yup-cream);
  border-radius: 999px;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1;
}

.yup-carttab__toast {
  pointer-events: auto;
  margin: 0;
  background: var(--yup-cream);
  color: var(--yup-teal);
  border: 2px solid var(--yup-teal);
  border-radius: 6px;
  padding: 10px 16px;
  font-family: var(--yup-ui);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(21, 17, 14, .22);
  animation: yup-toast-in .25s ease both;
}
.yup-carttab__toast[hidden] { display: none; }

@keyframes yup-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes yup-carttab-bump {
  0%, 100% { transform: scale(1); }
  35%      { transform: scale(1.09); }
}
.yup-carttab.is-bump .yup-carttab__btn {
  animation: yup-carttab-bump .45s ease;
}

/* On narrow screens drop the word and keep the icon + count compact. */
@media (max-width: 479px) {
  .yup-carttab__label { display: none; }
  .yup-carttab__btn { padding: 13px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .yup-carttab,
  .yup-carttab__btn,
  .yup-carttab__toast { transition: none; animation: none; }
  .yup-carttab.is-bump .yup-carttab__btn { animation: none; }
}

/* icon-cart.svg ships without intrinsic dimensions and leans on
   --icon-stroke-width, so size and stroke are set here. */
.yup-carttab__icon {
  display: inline-flex;
  flex-shrink: 0;
  --icon-stroke-width: 1.5;
}
.yup-carttab__icon svg { width: 20px; height: 20px; display: block; }

/* Coming-soon state on the locator page */
.yup-locator__coming { max-width: 560px; font-size: clamp(16px, 1.5vw, 17px); line-height: 1.7; }
.yup-locator__coming-cta { margin-top: 24px; }

/* ==========================================================================
   Gallery — one scrollable row + lightbox
   Uniform tile height with auto width keeps every image's own proportions,
   so nothing is cropped to fit a shared ratio.
   ========================================================================== */
.yup-gallery { padding: clamp(48px, 7vw, 88px) 0; background: var(--yup-paper); }
.yup-gallery__head { max-width: 640px; margin-bottom: clamp(20px, 2.6vw, 32px); }
.yup-gallery__head .yup-h2 { margin-bottom: 14px; }
.yup-gallery__intro { max-width: 560px; }

/* The scroller sits inside .yup-wrap, so the row lines up with the heading
   and scrolls within the content column. Small padding leaves room for the
   focus ring and the tile hover lift. */
.yup-gallery__track {
  display: flex;
  gap: clamp(12px, 1.6vw, 18px);
  overflow-x: auto;
  overflow-y: hidden;
  /* No snap and no smooth: both fight the per-frame scrollLeft writes that
     drive the continuous scroll. */
  scroll-snap-type: none;
  scroll-behavior: auto;
  padding: 4px 4px 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--yup-gold) var(--yup-line);
  -webkit-overflow-scrolling: touch;
}
.yup-gallery__track::-webkit-scrollbar { height: 8px; }
.yup-gallery__track::-webkit-scrollbar-track { background: var(--yup-line); border-radius: 99px; }
.yup-gallery__track::-webkit-scrollbar-thumb { background: var(--yup-gold); border-radius: 99px; }

.yup-gallery__item {
  flex: 0 0 auto;
  height: var(--yup-gallery-height, 260px);
  padding: 0;
  margin: 0;
  border: 2px solid var(--yup-line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  cursor: zoom-in;
  transition: border-color .2s ease, transform .2s ease;
}
.yup-gallery__item:hover { border-color: var(--yup-gold); transform: translateY(-2px); }
.yup-gallery__item:focus-visible { outline: 3px solid var(--yup-red); outline-offset: 3px; }
.yup-gallery__item img { height: 100%; width: auto; display: block; }

@media (max-width: 599px) {
  .yup-gallery__item { height: min(var(--yup-gallery-height, 260px), 62vw); }
}

/* --- lightbox ------------------------------------------------------------ */
.yup-lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
  overflow: hidden;
  place-items: center;
}
.yup-lightbox[open] { display: grid; grid-template-columns: auto 1fr auto; align-content: center; }
.yup-lightbox::backdrop { background: rgba(21, 17, 14, .88); }

.yup-lightbox__img {
  grid-column: 2;
  max-width: min(92vw, 1100px);
  max-height: 82vh;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
  border: 3px solid var(--yup-gold);
  border-radius: 8px;
  background: #fff;
}
.yup-lightbox__caption {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 16px auto 0;
  max-width: min(92vw, 760px);
  text-align: center;
  font-family: var(--yup-text);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(244, 234, 215, .82);
}

.yup-lightbox__nav,
.yup-lightbox__close {
  background: var(--yup-teal);
  color: var(--yup-cream);
  border: 2px solid var(--yup-gold);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--yup-ui);
  line-height: 1;
  transition: background-color .18s ease;
}
.yup-lightbox__nav:hover,
.yup-lightbox__close:hover { background: var(--yup-red); }
.yup-lightbox__nav:focus-visible,
.yup-lightbox__close:focus-visible { outline: 3px solid var(--yup-cream); outline-offset: 2px; }

.yup-lightbox__nav {
  width: 52px;
  height: 52px;
  font-size: 30px;
  margin: 0 clamp(6px, 1.5vw, 18px);
  align-self: center;
}
.yup-lightbox__nav--prev { grid-column: 1; }
.yup-lightbox__nav--next { grid-column: 3; }
.yup-lightbox[data-single='true'] .yup-lightbox__nav { visibility: hidden; }

.yup-lightbox__close {
  position: fixed;
  top: clamp(12px, 2vw, 24px);
  right: clamp(12px, 2vw, 24px);
  width: 46px;
  height: 46px;
  font-size: 26px;
  z-index: 2;
}

@media (max-width: 599px) {
  .yup-lightbox__nav { width: 44px; height: 44px; font-size: 24px; margin: 0 4px; }
  .yup-lightbox__img { max-width: 96vw; max-height: 72vh; }
}

@media (prefers-reduced-motion: reduce) {
  .yup-gallery__item { transition: none; }
  .yup-gallery__item:hover { transform: none; }
}
}