/** Shopify CDN: Minification failed

Line 4620:11 Unexpected "="
Line 4624:16 Expected identifier but found "'yp-marquee'"
Line 4624:68 Unexpected ","
Line 4624:79 Expected identifier but found "{"
Line 4624:85 Expected identifier but found "'item'"
Line 4624:127 Unexpected ","
Line 4624:136 Expected identifier but found "'item'"
Line 4624:176 Unexpected ","
Line 4624:185 Expected identifier but found "'item'"
Line 4624:226 Unexpected ","
... and 7 more hidden warnings

**/
/* ==========================================================================
   YP storefront sections for Shopify
   Every class is prefixed yp- and every rule is scoped to .yp, so nothing
   here can restyle the rest of the theme (and the theme can't restyle this).
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap");

/* 1. Design tokens — the ESMURE system. Change the brand here ---------------- */
/* Shopify's own policy pages sit outside the sections, so they take the same tokens. */
.yp,
.shopify-policy__container {
  /* Colour: the palette */
  /* "Tide" palette (chosen by Mark 2026-10-18, replacing Evergreen): ESMURE as
     care for the home, the family and the pets in it. Six colours and their
     tints, nothing else. Porcelain is the page and takes most of every screen;
     white lifts cards and fields off it. Ink carries the words and the footer.
     Tide (deep teal) is the colour you recognise and the colour you press: the
     top bar, buttons, links, selected states and the About panel, never more
     than one large teal block in view. Coral is the warm hand: the stroke under
     a word, badges, small accents; never text on light. Sea Mist is Tide at
     rest: tick marks, icon seats, quiet bands. Text is only ever Ink, Tide,
     Porcelain or the muted grey, so contrast holds. The old token names
     (evergreen, clay, bone) are kept so components don't change. */
  --primary: #12454f;        /* Tide: buttons, links, selected states (9.9:1 on Porcelain) */
  --primary-hover: #18232a;  /* a button turns Ink under the pointer */
  --primary-ink: #f8f4ee;
  --ground-deep: #1c2a2e;    /* footer: Ink, one step down */
  --evergreen: #12454f;      /* Tide, under its old name: the top bar, panels and blocks of colour */
  --clay-deep: #a9745c;      /* Coral, deepened: avatar grounds and small accents; not for text on light */
  --star: #a9745c;           /* ratings: Coral deepened until stars read on Porcelain (3.6:1, a graphic not text) */
  --mist: #ece4da;           /* Sea Mist: tick marks, icon seats, quiet bands */
  --clay: #c99b84;           /* Coral: the stroke under a word, the block behind the hero photograph; never text */
  --clay-soft: #f4e9e0;      /* Coral, soft: card and panel tint */
  --bone: #f8f4ee;           /* Porcelain: the page */
  --bone-deep: #efe8df;      /* Porcelain, one step down: bands and panels */
  --white: #fffdfa;          /* cards, fields, raised surfaces */
  --deep-ink: #1f2a2c;       /* Ink: text and the wordmark (15:1 on Porcelain) */
  --muted: #635c55;          /* secondary text; passes 4.5:1 on Porcelain, its band, the tints and Sea Mist */
  --border: #e5ddd3;
  --border-strong: #c9bdb0;  /* outlines on controls */
  --on-dark: #f8f4ee;        /* text on Ink and Tide */
  --on-dark-muted: rgba(246, 248, 247, 0.8);
  --on-dark-line: rgba(246, 248, 247, 0.2);
  --danger: #9e3a2c;         /* errors; 6.8:1 on white */
  --success: #1f6b45;        /* confirmations; 6.5:1 on white */
  --warning: #855a00;        /* cautions; 5.9:1 on white */
  --sale-red: #b4472c;       /* sale prices and "Save" badges; 5.4:1 on white, 4.7:1 on the band */

  /* Colour: roles. Components read these, so the palette can change in one place. */
  --accent: var(--clay);
  --accent-ink: var(--deep-ink);
  --brand: var(--primary);
  --ink: var(--deep-ink);
  --ink-soft: var(--muted);
  --surface: var(--bone);
  --surface-2: var(--bone-deep);
  --input: var(--white);
  --line: var(--border);
  --sale: var(--primary);

  /* Type: Urbanist for headings (a geometric sans built on circles, like the
     wordmark), Hanken Grotesk for everything else. Both are
     sans-serif, sentence case, and never lighter than regular. */
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-head: var(--font-body); /* interface labels: buttons, navigation, prices */

  /* Type scale: fluid between phone and desktop, never just shrunk */
  --text-hero: clamp(44px, 4.2vw + 26px, 88px);
  --text-display: clamp(36px, 3vw + 22px, 68px);
  --text-h1: clamp(32px, 2.1vw + 22px, 54px);
  --text-h2: clamp(28px, 1.7vw + 20px, 46px);
  --text-h3: clamp(20px, 0.7vw + 17px, 26px);
  --text-h4: 18px;
  --text-lede: clamp(17px, 0.4vw + 15px, 20px);
  --text-body: 16px;
  --text-sm: 14px;
  --text-xs: 13px;
  --text-micro: 12px;

  --leading-tight: 1.02;
  --leading-heading: 1.1;
  --leading-body: 1.6;
  --tracking-display: -0.012em;
  --tracking-heading: -0.006em;
  --tracking-label: 0.05em;
  /* Spacing: a 4/8 scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --page: 1400px;
  --gutter: clamp(20px, 4.4vw, 64px);
  --section: clamp(56px, 7vw, 112px);

  /* Shape: soft, not round. Cards and pictures share one generous corner,
     controls a smaller one, and buttons and tags are pills. */
  --radius-control: 10px;    /* buttons, fields, small controls */
  --radius-card: 14px;       /* images, cards, dialogs */
  --radius-panel: 22px;      /* large panels and the hero photograph */
  --radius-pill: 999px;      /* tags, chips, counters */
  --shadow-soft: 0 10px 30px rgba(24, 35, 42, 0.08);  --shadow-pop: 0 16px 48px rgba(24, 35, 42, 0.12);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  background: var(--surface);
  color: var(--ink);
  font: 400 var(--text-body) / var(--leading-body) var(--font-body);
  letter-spacing: normal;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 2. Base — :where() keeps these weaker than the component rules below ------ */
.yp, .yp *, .yp *::before, .yp *::after { box-sizing: border-box; }

.yp :where(h1, h2, h3, p, ul, li) { margin: 0; }
.yp :where(ul) { padding: 0; list-style: none; }
.yp :where(a) { color: inherit; text-decoration: none; }
.yp :where(button, input) { font: inherit; color: inherit; letter-spacing: normal; }
.yp :where(button) {
  margin: 0;
  padding: 0;
  min-height: 0;
  border-radius: 0;
  box-shadow: none;
  text-transform: none;
  cursor: pointer;
}
.yp :where(img) { display: block; max-width: 100%; height: auto; }
.yp :where(h1, h2, h3) {
  color: inherit;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  text-transform: none;
  text-wrap: balance;
}
.yp :where(p, li) { text-wrap: pretty; }
/* .yp-h1 is the section and page heading size, .yp-h3 the smaller one */
.yp-h1 { font-size: var(--text-h2); }
.yp-h3 { font-size: var(--text-h3); }

.yp :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* 3. Utilities ------------------------------------------------------------- */
.yp-wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.yp-section { padding-block: var(--section); }

.yp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.yp-icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.yp-icon--fill { fill: currentColor; stroke: none; }

/* inline icon sprite: keep it in the DOM but out of the layout */
.yp-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.yp-eyebrow {
  font: 600 13px/1.4 var(--font-head);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.yp-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
  font: 600 15px/1.6 var(--font-head);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.yp-btn:hover { background: var(--ink); color: #fff; }
.yp-btn__icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  transition: transform 0.25s var(--ease);
}
.yp-btn__icon .yp-icon { width: 14px; height: 14px; stroke-width: 2; }
.yp-btn:hover .yp-btn__icon { transform: translateX(3px); }

.yp-pill {
  padding: 6px 12px;
  background: var(--accent);
  font: 500 14px/1.6 var(--font-head);
}

/* Image placeholder. Put an <img> inside and it fills the box. */
.yp-ph {
  --ph: var(--mist);
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 15% 10%, rgba(255, 255, 255, 0.55), transparent 60%),
    var(--ph);
  color: rgba(0, 0, 0, 0.14);
}
.yp-ph > .yp-icon { width: 26%; height: auto; aspect-ratio: 1; max-width: 150px; }
.yp-ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.yp-ph[data-label]::after {
  content: attr(data-label);
  position: absolute;
  left: 16px;
  bottom: 12px;
  color: rgba(0, 0, 0, 0.5);
  font: 600 11px/1 var(--font-head);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.yp-ph--sage { --ph: var(--mist); }
.yp-ph--sand { --ph: var(--bone-deep); }
.yp-ph--sky  { --ph: #e3eeed; }
.yp-ph--clay { --ph: #f6dcd2; }

/* 4. Announcement bar ------------------------------------------------------ */
.yp-announce {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px var(--gutter);
  background: var(--accent);
  color: var(--accent-ink);
}
.yp-announce__messages {
  display: grid;
  width: min(100%, 420px);
  text-align: center;
}
.yp-announce__messages p {
  grid-area: 1 / 1;
  font: 700 14px/24px var(--font-body);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
/* incoming message waits for the outgoing one to clear, so they never overlap */
.yp-announce__messages p.yp-is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0.2s; }
.yp-announce__nav {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  background: none;
  color: var(--ink);
}
.yp-announce__nav .yp-icon { width: 14px; height: 14px; stroke-width: 2.5; }

/* 5. Header ---------------------------------------------------------------- */
.yp-site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface);
  transition: box-shadow 0.25s var(--ease);
}
.yp-site-header.yp-is-stuck { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); }

.yp-site-header__inner {
  display: flex;
  align-items: center;
  gap: 12px 24px;
  min-height: 84px;
  padding-block: 12px;
}

.yp-logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand);
  font: 700 30px/1 var(--font-head);
  letter-spacing: -0.05em;
}
.yp-logo__word b { font-weight: 400; }
.yp-logo__mark { width: 30px; height: 30px; }

.yp-nav {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 4px 28px;
  margin-left: 24px;
  font: 500 15px/1.6 var(--font-head);
}
.yp-nav a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-block: 4px;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1.5px;
  transition: background-size 0.3s var(--ease);
}
.yp-nav a:hover { background-size: 100% 1.5px; }
.yp-nav__caret { width: 14px; height: 14px; stroke-width: 2.5; }

.yp-search {
  display: flex;
  align-items: center;
  width: min(100%, 320px);
  height: 48px;
  padding: 0 8px 0 18px;
  border-radius: 999px;
  background: var(--input);
}
.yp-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font-size: 14px;
}
.yp-search input::placeholder { color: var(--ink); opacity: 0.8; }
.yp-search:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.yp-search button,
.yp-icon-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  background: none;
}
.yp-search .yp-icon, .yp-icon-btn .yp-icon { width: 20px; height: 20px; stroke-width: 1.8; }
.yp-menu-toggle { display: none; }

@media (max-width: 989px) {
  .yp-site-header__inner { flex-wrap: wrap; min-height: 64px; }
  .yp-logo { margin-right: auto; font-size: 24px; }
  .yp-logo__mark { width: 24px; height: 24px; }
  .yp-menu-toggle { display: grid; }
  .yp-search { order: 5; width: 100%; height: 44px; }
  .yp-nav {
    order: 6;
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding-bottom: 8px;
  }
  .yp-nav.yp-is-open { display: flex; }
  .yp-nav a { padding-block: 12px; border-bottom: 1px solid var(--line); background: none; }
}

/* 6. Hero ------------------------------------------------------------------ */
.yp-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 5vw, 72px);
  padding-block: 16px var(--section);
}
.yp-hero__copy { display: grid; justify-items: start; gap: 24px; }
.yp-hero__title {
  font-size: clamp(34px, 2.8vw + 12px, 52px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.yp-hero__title span { display: block; }
.yp-marker {
  font-weight: 600;
  /* highlighter stroke under the word */
  background: linear-gradient(transparent 68%, var(--accent) 68% 92%, transparent 92%);
  padding-inline: 2px;
}

.yp-checklist { display: grid; gap: 10px; font: 500 14px/1.5 var(--font-head); }
.yp-checklist li { display: flex; align-items: center; gap: 12px; }
.yp-checklist__tick {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
}
.yp-checklist__tick .yp-icon { width: 14px; height: 14px; stroke-width: 2.5; }

.yp-hero__media { aspect-ratio: 1; max-height: 640px; width: 100%; }

@media (max-width: 749px) {
  .yp-hero { grid-template-columns: 1fr; padding-top: 24px; }
  .yp-hero__media { aspect-ratio: 4 / 3; }
}

/* 8. Products -------------------------------------------------------------- */
.yp-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 32px;
}

.yp-carousel__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 10px) / 4.15);
  gap: 10px;
  /* bleed to the right edge of the screen, like a peeking slider */
  margin-right: calc(var(--gutter) * -1);
  padding-right: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.yp-carousel__rail::-webkit-scrollbar { display: none; }

.yp-product { scroll-snap-align: start; text-align: center; }
.yp-product__media {
  aspect-ratio: 1;
  border-radius: var(--radius-card);
}
.yp-product__media > .yp-icon,
.yp-product__media > img { transition: transform 0.6s var(--ease); }
.yp-product:hover .yp-product__media > .yp-icon,
.yp-product:hover .yp-product__media > img { transform: scale(1.06); }

.yp-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--sale);
  color: var(--ink);
  font: 500 12px/1.6 var(--font-head);
}

.yp-product__cta {
  position: absolute;
  inset: auto 12px 12px;
  padding: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  font: 600 14px/1.5 var(--font-head);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.yp-product:hover .yp-product__cta,
.yp-product__media:focus-visible .yp-product__cta { opacity: 1; transform: none; }

.yp-product__title { margin: 14px 8px 4px; font-size: 15px; line-height: 1.6; }
.yp-product__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.yp-price { font: 600 14px/1.6 var(--font-head); }
.yp-price s { margin-left: 2px; color: rgba(0, 0, 0, 0.5); }

.yp-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 32px;
}
.yp-carousel__progress { flex: 0 1 250px; height: 2px; background: var(--line); }
.yp-carousel__progress span {
  display: block;
  width: 25%;
  height: 100%;
  background: var(--ink);
  transition: width 0.2s linear;
}
.yp-carousel__arrows { display: flex; gap: 8px; }
.yp-arrow-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  background: var(--surface);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.yp-arrow-btn .yp-icon { width: 16px; height: 16px; stroke-width: 2; }
.yp-arrow-btn:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: #fff; }
.yp-arrow-btn:disabled { opacity: 0.4; cursor: default; }

@media (max-width: 989px) { .yp-carousel__rail { grid-auto-columns: calc((100% - 2 * 10px) / 2.6); } }
@media (max-width: 599px) { .yp-carousel__rail { grid-auto-columns: calc((100% - 10px) / 1.6); } }

/* 9. Split (text + image) -------------------------------------------------- */
.yp-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--section);
}
.yp-split__copy {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 20px;
  padding: clamp(32px, 5vw, 64px);
  background: var(--surface-2);
}
.yp-split__copy p { max-width: 54ch; }
.yp-split__copy--center h2 { justify-self: center; }
.yp-split__media { min-height: clamp(280px, 40vw, 580px); }
.yp-split--reverse .yp-split__media { order: -1; }

@media (max-width: 749px) {
  .yp-split { grid-template-columns: 1fr; }
  .yp-split .yp-split__media { order: -1; }
}

/* 10. Feature -------------------------------------------------------------- */
.yp-feature {
  display: grid;
  justify-items: center;
  gap: 24px;
  max-width: 1180px;
  padding-block: var(--section);
  text-align: center;
}
.yp-feature__media { width: 100%; aspect-ratio: 16 / 9; }
.yp-feature p { max-width: 70ch; }

/* 11. FAQ ------------------------------------------------------------------ */
.yp-faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: start;
  gap: 24px clamp(24px, 6vw, 96px);
  padding-block: var(--section);
}
.yp-faq > h2 { max-width: 9ch; }

.yp-faq details { border-bottom: 1px solid var(--line); }
.yp-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 20px;
  font: 600 clamp(17px, 0.6vw + 14px, 22px) / 1.4 var(--font-head);
  cursor: pointer;
  list-style: none;
}
.yp-faq summary::-webkit-details-marker { display: none; }
.yp-faq__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--input);
  transition: transform 0.3s var(--ease), background 0.2s;
}
.yp-faq__icon .yp-icon { width: 14px; height: 14px; stroke-width: 2.5; }
.yp-faq summary:hover .yp-faq__icon { background: var(--accent); }
.yp-faq details[open] .yp-faq__icon { transform: rotate(180deg); background: var(--accent); }
.yp-faq details p { max-width: 68ch; padding-bottom: 24px; color: var(--ink-soft); }

@media (max-width: 749px) {
  .yp-faq { grid-template-columns: 1fr; }
  .yp-faq > h2 { position: static; max-width: none; }
}

/* 12. Footer --------------------------------------------------------------- */
.yp-site-footer { background: var(--accent); }
/* the footer logo uses the text colour */
.yp-site-footer .yp-logo { color: var(--accent-ink); }
.yp-site-footer__grid {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1.6fr;
  gap: 40px 32px;
  padding-block: 64px 32px;
}
.yp-site-footer__brand { display: grid; justify-items: start; gap: 16px; max-width: 360px; }
.yp-site-footer h2 { margin-bottom: 14px; font-size: 16px; }
.yp-site-footer nav a { display: block; padding-block: 5px; }
.yp-site-footer nav a:hover { text-decoration: underline; text-underline-offset: 3px; }

.yp-socials { display: flex; gap: 6px; }
.yp-socials a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: var(--surface);
  font: 600 14px/1 var(--font-head);
  transition: background 0.2s, color 0.2s;
}
.yp-socials a:hover { background: var(--ink); color: #fff; }

.yp-site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 20px 28px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.yp-payments { display: flex; flex-wrap: wrap; gap: 6px; }
.yp-payments li {
  padding: 3px 8px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  background: var(--surface);
  font: 600 11px/1.6 var(--font-head);
}

@media (max-width: 989px) { .yp-site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 479px) { .yp-site-footer__grid { grid-template-columns: 1fr; } }

/* 13. Motion --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .yp *, .yp *::before, .yp *::after { transition-duration: 0.01ms !important; }
}

/* 14. Shopify-only additions ----------------------------------------------- */

/* Shopify wraps each section in its own div, so the wrapper is what sticks */
.yp-header-section { position: sticky; top: 0; z-index: 20; }

.yp-logo__img { width: var(--yp-logo-w, 160px); height: auto; }
/* vector wordmark: takes its colour from the logo link, and is never squashed by the header row */
.yp-wordmark { display: block; flex: none; width: var(--yp-logo-w, 160px); max-width: 46vw; height: auto; overflow: visible; }

.yp-cart { position: relative; }
.yp-cart__count {
  position: absolute;
  top: 0;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  font: 600 10px/16px var(--font-head);
  text-align: center;
}

/* theme input styles tend to be heavy; flatten them inside the search pill */
.yp .yp-search input {
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-appearance: none;
          appearance: none;
}

.yp-nav a[aria-current="page"] { background-size: 100% 1.5px; }
.yp-product__media { --ph: var(--surface-2); }
.yp-split__copy p + p { margin-top: 12px; }

.yp-pay { display: flex; flex-wrap: wrap; gap: 6px; }
.yp-pay svg { display: block; width: auto; height: 24px; }


/* 15. Parity pass ---------------------------------------------------------- */
/* Sizes and spacing in this block were measured against the reference layout. */

html.yp-lock { overflow: hidden; }

/* Spacing between sections */
.yp-hero { gap: clamp(24px, 4.4vw, 56px); padding-block: 0; }
.yp-section { padding-block: clamp(32px, 3.9vw, 50px); }
.yp-split { margin-top: 0; }
.yp-split__media { min-height: 0; max-height: 640px; aspect-ratio: 1; }
.yp-split__text { max-width: 54ch; }

.yp-eyebrow { font-size: 15px; }

/* Buttons */
.yp-btn--large { min-height: 50px; padding: 10px 12px 10px 24px; }
.yp-btn--block { display: flex; justify-content: center; width: 100%; min-height: 50px; }
.yp-btn:disabled { opacity: 0.5; cursor: default; }
.yp-btn:disabled:hover { background: var(--accent); color: var(--accent-ink); }
.yp-arrow-btn { border-color: rgba(0, 0, 0, 0.2); }

/* Hero: hand-drawn stroke under the highlighted word (takes the accent colour) */
.yp-marker {
  position: relative;
  z-index: 0;
  padding-inline: 0;
  background: none;
  white-space: nowrap;
}
.yp-marker::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -3%;
  bottom: 0.02em;
  left: -3%;
  height: 0.34em;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 13C40 5 78 4 112 7s58 7 85 3' fill='none' stroke='%23000' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 13C40 5 78 4 112 7s58 7 85 3' fill='none' stroke='%23000' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* Icon strip: centred, looping carousel ------------------------------------ */
.yp-icons {
  position: relative;
  overflow: hidden;
  padding-block: clamp(48px, 6.8vw, 87px);
  touch-action: pan-y;
}
.yp-icons:not(.yp-is-ready) { overflow-x: auto; }
.yp-icons__track {
  position: relative;
  display: flex;
  gap: 8px;
  width: max-content;
  transition: transform 0.7s var(--ease);
  will-change: transform;
}
.yp-icons__slide {
  flex: none;
  width: clamp(270px, 45vw, 577px);
  opacity: 0.35;
  transition: opacity 0.5s var(--ease);
  user-select: none;
}
.yp-icons__slide.yp-is-active { opacity: 1; }
.yp-icons__arrows { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

.yp-icon-box {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 10px;
  min-height: 178px;
  padding: 24px 16px 32px;
  background: var(--surface-2);
  text-align: center;
}
.yp-icon-box .yp-icon { width: 48px; height: 48px; stroke-width: 1; }
.yp-icon-box h2 { font-size: 18px; }
.yp-icon-box p { color: var(--ink-soft); font-size: 15px; }

/* Header: pill hover + mega menu (desktop) --------------------------------- */
.yp-nav__close,
.yp-nav-scrim,
.yp-mega__title { display: none; }

@media (min-width: 990px) {
  .yp-nav { gap: 2px 4px; margin-left: 16px; }
  .yp-nav .yp-nav__link {
    padding: 6px 12px;
    border-radius: 999px;
    background: none;
    font-weight: 600;
    transition: background-color 0.2s var(--ease);
  }
  .yp-nav .yp-nav__link:hover,
  .yp-nav .yp-nav__link[aria-current="page"],
  .yp-nav__item.yp-is-open > .yp-nav__link { background: var(--accent); }

  /* static, so the panel can span the whole header */
  .yp-nav__item { position: static; }

  .yp-mega {
    position: absolute;
    inset: 100% 0 auto;
    border-top: 1px solid var(--line);
    background: var(--surface);
    /* dims the page below the panel without covering the header above it */
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.35);
    clip-path: inset(0 -100vmax -100vmax -100vmax);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s var(--ease), visibility 0.2s;
  }
  .yp-nav__item.yp-is-open .yp-mega,
  .yp-nav__item:focus-within .yp-mega { opacity: 1; visibility: visible; }

  .yp-mega__inner { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 150px; }
  .yp-mega__inner--flat { grid-template-columns: minmax(0, 1fr); }

  .yp-mega__side {
    display: grid;
    align-content: start;
    justify-items: start;
    gap: 6px;
    padding: 24px 24px 28px 0;
    border-right: 1px solid var(--line);
  }
  .yp-nav .yp-mega__tab {
    padding: 0;
    background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 2px;
    font: 600 22px/1.4 var(--font-head);
    transition: background-size 0.3s var(--ease);
  }
  .yp-nav .yp-mega__tab.yp-is-active { background-size: 100% 2px; }

  .yp-mega__panel {
    display: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;
    gap: 16px 24px;
    padding: 24px 0 28px 32px;
  }
  .yp-mega__panel.yp-is-active { display: grid; }
  .yp-mega__inner--flat .yp-mega__panel { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-left: 0; }
}

.yp-nav .yp-mega__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  background: none;
  font: 500 15px/1.4 var(--font-body);
}
.yp-mega__link:hover span { text-decoration: underline; text-underline-offset: 3px; }
.yp-mega__thumb { flex: none; width: 48px; height: 48px; border-radius: 8px; object-fit: cover; }

/* Header: slide-in menu (mobile) ------------------------------------------- */
@media (max-width: 989px) {
  .yp-nav {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    display: flex;
    flex-basis: auto;
    width: min(88vw, 380px);
    padding: 68px 20px 32px;
    overflow-y: auto;
    background: var(--surface);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.35s var(--ease), visibility 0.35s;
  }
  .yp-nav.yp-is-open { transform: none; visibility: visible; }

  .yp-nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 55;
    display: block;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease), visibility 0.3s;
  }
  .yp-nav.yp-is-open + .yp-nav-scrim { opacity: 1; visibility: visible; }

  .yp-nav__close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--input);
  }
  .yp-nav__close .yp-icon { width: 16px; height: 16px; stroke-width: 2; }

  .yp-nav .yp-nav__link { justify-content: space-between; padding-block: 14px; font-size: 17px; font-weight: 600; }
  .yp-nav__item { display: grid; }
  .yp-mega__inner { max-width: none; padding: 0; }
  .yp-mega__side { display: none; }
  .yp-mega__panel { display: grid; gap: 2px; padding: 8px 0 12px 12px; }
  .yp-nav .yp-mega__title { display: block; padding-block: 8px; border: 0; font: 600 15px/1.4 var(--font-head); }
  .yp-nav .yp-mega__link { padding-block: 6px; border: 0; }
  .yp-mega__thumb { width: 36px; height: 36px; border-radius: 6px; }
}

.yp-cart__count[hidden] { display: none; }

/* Product cards: hover image + quick add ----------------------------------- */
.yp-product__media { border-radius: 20px; }
.yp-product__link { position: absolute; inset: 0; display: grid; place-items: center; }
.yp-product__link > .yp-icon { width: 26%; max-width: 150px; height: auto; aspect-ratio: 1; }
.yp-product__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.45s var(--ease);
}
.yp-product__img--hover { opacity: 0; }
.yp-product:hover .yp-product__img--hover { opacity: 1; }

.yp-badge { top: 10px; left: 10px; }
.yp-badge--muted { background: var(--mist); }

.yp-quick {
  position: absolute;
  inset: auto 20px 20px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 50px;
  padding: 0 11px 0 24px;
  border: 0;
  background: var(--surface);
  color: var(--ink);
  font: 600 15px/1.2 var(--font-head);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.yp-product:hover .yp-quick,
.yp-quick:focus-visible { opacity: 1; transform: none; }
.yp-quick.yp-is-busy { opacity: 0.6; pointer-events: none; }
.yp-quick__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
}
.yp-quick__icon .yp-icon { width: 12px; height: 12px; stroke-width: 2.5; }

/* No hover on touch screens: show a small round button instead */
@media (hover: none), (max-width: 599px) {
  .yp-quick {
    inset: auto 10px 10px auto;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-height: 0;
    padding: 0;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    opacity: 1;
    transform: none;
  }
  .yp-quick__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .yp-quick__icon { background: none; color: var(--ink); }
}

.yp-product__title { margin-top: 16px; font-size: 16px; }
.yp-price { font: 500 15px/1.6 var(--font-body); }

/* Product tabs */
.yp-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.yp-tab {
  padding: 6px 12px;
  border: 0;
  background: transparent;
  font: 500 15px/1.6 var(--font-body);
  transition: background-color 0.2s var(--ease);
}
.yp-tab:hover { background: var(--surface-2); }
.yp-tab.yp-is-active { background: var(--accent); }

/* Feature image: square and full width by default --------------------------- */
.yp-feature {
  max-width: var(--page);
  margin-inline: auto;
  padding: clamp(28px, 3vw, 40px) clamp(8px, 1vw, 12px);
}
.yp-feature--square .yp-feature__media { aspect-ratio: 1; }
.yp-feature--wide { max-width: 1180px; padding-inline: var(--gutter); }
.yp-feature__text { max-width: 70ch; padding-inline: var(--gutter); }

/* Drawers (bag, quick add): built by yp-store.js -------------------------- */
.yp-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
}
.yp-backdrop.yp-is-open { opacity: 1; visibility: visible; }

.yp-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  width: min(92vw, 440px);
  outline: none;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.35s var(--ease), visibility 0.35s;
}
.yp-drawer.yp-is-open { transform: none; visibility: visible; }

.yp-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
}
.yp-drawer__head h2 { font-size: 20px; }
.yp-drawer__close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--input);
}
.yp-drawer__close .yp-icon { width: 16px; height: 16px; stroke-width: 2; }
.yp-drawer__body { flex: 1; padding: 20px 24px; overflow-y: auto; }
.yp-drawer__foot { display: grid; gap: 10px; padding: 20px 24px 24px; border-top: 1px solid var(--line); }
.yp-drawer__foot:empty { display: none; }
.yp-drawer__total { display: flex; justify-content: space-between; font: 600 17px/1.4 var(--font-head); }
.yp-drawer__small,
.yp-drawer__note { color: var(--ink-soft); font-size: 14px; }
.yp-drawer__link { justify-self: center; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.yp-drawer__error { color: #9e3a2c; font-size: 14px; }
.yp-drawer__error:empty { display: none; }

.yp-lines { display: grid; gap: 20px; }
.yp-line { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; transition: opacity 0.2s; }
.yp-line.yp-is-busy { opacity: 0.5; pointer-events: none; }
.yp-line__media,
.yp-quickadd__media { --ph: var(--surface-2); border-radius: 12px; aspect-ratio: 1; }
.yp-line__info { display: grid; align-content: start; justify-items: start; gap: 6px; }
.yp-line__title { font: 600 15px/1.4 var(--font-head); }
.yp-line__variant { color: var(--ink-soft); font-size: 13px; }
.yp-line__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.yp-line__price { font: 600 15px/1.4 var(--font-head); }
.yp-line__remove {
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.yp-qty { display: inline-flex; align-items: center; border: 1px solid var(--line); }
.yp-qty button { display: grid; place-items: center; width: 32px; height: 32px; border: 0; background: none; }
.yp-qty .yp-icon { width: 12px; height: 12px; stroke-width: 2; }
.yp-qty span { min-width: 28px; font-weight: 600; text-align: center; }

.yp-quickadd { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 16px; margin-bottom: 20px; }
.yp-quickadd__title { display: block; font: 600 17px/1.35 var(--font-head); }
.yp-quickadd__price { margin-top: 6px; font: 600 15px/1.4 var(--font-head); }
.yp-field { display: grid; gap: 6px; margin-bottom: 14px; font: 600 13px/1.4 var(--font-head); }
.yp-field select {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  font: 400 15px/1 var(--font-body);
}

/* Newsletter popup ----------------------------------------------------------- */
.yp-popup {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: grid;
  place-items: center;
  padding: 16px;
  background: none;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.yp-popup[hidden] { display: none; }
.yp-popup.yp-is-open { opacity: 1; }
.yp-popup__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); }
.yp-popup__card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(100%, 440px);
  padding: 44px 32px 28px;
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  text-align: center;
}
.yp-popup__card h2 { color: var(--brand); font-size: clamp(22px, 2vw + 12px, 28px); text-transform: uppercase; }
.yp-popup__text { color: var(--ink-soft); }
.yp-popup__close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  background: none;
}
.yp-popup__close .yp-icon { width: 18px; height: 18px; }
.yp .yp-popup__input {
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
  font-size: 15px;
  text-align: center;
}
.yp-popup__decline {
  border: 0;
  background: none;
  color: var(--ink-soft);
  font: 600 12px/1.6 var(--font-head);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.yp-popup__error { color: #9e3a2c; font-size: 14px; }

/* Reveal on scroll (only once the script has loaded, so nothing stays hidden without it) */
.yp-js .yp-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s var(--ease) var(--yp-delay, 0s),
    transform 0.7s var(--ease) var(--yp-delay, 0s),
    background-color 0.25s var(--ease),
    color 0.25s var(--ease);
}
.yp-js .yp-reveal.yp-is-in { opacity: 1; transform: none; }

/* 16. Inner pages ---------------------------------------------------------- */

/* Shared page shell */
.yp-page { padding-block: clamp(24px, 3vw, 40px) var(--section); }
.yp-page--narrow { max-width: 860px; }
.yp-page__title { margin-bottom: 24px; }
.yp-empty { display: grid; justify-items: start; gap: 16px; }

.yp-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font: 500 13px/1.6 var(--font-head);
}
.yp-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.yp-crumbs__sep { color: rgba(0, 0, 0, 0.3); }
.yp-crumbs [aria-current] { color: var(--ink-soft); }

/* Rich text written in the Shopify editor (pages, posts, descriptions) */
.yp-rte > * + * { margin-top: 1em; }
.yp-rte h2 { margin-top: 1.6em; font-size: 24px; }
.yp-rte h3 { margin-top: 1.6em; font-size: 20px; }
.yp-rte a { text-decoration: underline; text-underline-offset: 3px; }
.yp-rte ul { padding-left: 1.2em; list-style: disc; }
.yp-rte ol { padding-left: 1.2em; }
.yp-rte li + li { margin-top: 0.4em; }
.yp-rte blockquote { margin-inline: 0; padding-left: 16px; border-left: 3px solid var(--accent); }
.yp-rte table { width: 100%; border-collapse: collapse; }
.yp-rte th,
.yp-rte td { padding: 10px; border: 1px solid var(--line); text-align: left; }

/* Accordion rows (product details, filters) */
.yp-acc { border-bottom: 1px solid var(--line); }
.yp-acc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 16px;
  font: 600 16px/1.4 var(--font-head);
  cursor: pointer;
  list-style: none;
}
.yp-acc summary::-webkit-details-marker { display: none; }
.yp-acc summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 2px solid;
  border-bottom: 2px solid;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.25s var(--ease);
}
.yp-acc[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.yp-acc__body { padding-bottom: 18px; color: var(--ink-soft); }

/* Form fields */
.yp .yp-input {
  width: 100%;
  min-height: 50px;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
  color: var(--ink);
  font: 400 15px/1.5 var(--font-body);
}
.yp textarea.yp-input { min-height: 160px; resize: vertical; }
.yp-form { display: grid; gap: 16px; max-width: 640px; }
.yp-form label { display: grid; gap: 6px; font: 600 13px/1.4 var(--font-head); }
.yp-form .yp-btn { justify-self: start; }
.yp-form__note { padding: 12px 16px; background: var(--surface-2); }
.yp-form__note--error { color: #9e3a2c; }
.yp-contact { padding-bottom: var(--section); }
.yp-contact h2 { margin-bottom: 20px; }

.yp-btn--ghost { justify-content: center; border: 1px solid rgba(0, 0, 0, 0.2); background: none; }

/* Product page --------------------------------------------------------------- */
.yp-pdp {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: start;
  padding-block: 36px clamp(40px, 6vw, 88px);
}
/* the gallery scrolls with the page; it does not follow the reader down */
.yp-pdp__media { position: relative; }
.yp-pdp__info { display: grid; gap: 20px; min-width: 0; padding-left: clamp(24px, 4vw, 50px); }
.yp-pdp__info .yp-crumbs { margin-bottom: 0; }
.yp-pdp__badge { position: static; justify-self: start; }
.yp-pdp__price { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.yp-pdp__now { font: 600 28px/1.2 var(--font-head); }
.yp-pdp__price s { color: rgba(0, 0, 0, 0.5); }
.yp-save { padding: 4px 8px; background: var(--accent); font: 600 13px/1 var(--font-body); }
.yp-save[hidden],
.yp-badge[hidden],
.yp-pdp__price s[hidden] { display: none; }

.yp-gallery { position: relative; }
.yp-gallery__stage { aspect-ratio: 1; }
.yp-gallery__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s;
}
.yp-gallery__slide.yp-is-active { opacity: 1; visibility: visible; }
.yp-gallery__slide img,
.yp-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* thumbnails float over the bottom of the main image */
.yp-gallery__thumbs {
  position: absolute;
  bottom: 20px;
  left: 50%;
  display: flex;
  gap: 6px;
  max-width: calc(100% - 40px);
  padding: 6px;
  overflow-x: auto;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateX(-50%);
  scrollbar-width: none;
}
.yp-gallery__thumb {
  flex: none;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border: 1.5px solid transparent;
  border-radius: 6px;
  background: var(--surface-2);
}
.yp-gallery__thumb.yp-is-active { border-color: var(--ink); }

.yp-pdp__form { display: grid; gap: 20px; }
.yp-option { min-width: 0; margin: 0; padding: 0; border: 0; }
.yp-option legend { margin-bottom: 10px; padding: 0; font: 600 16px/1.4 var(--font-head); }
.yp-option legend span { color: var(--ink-soft); font: 400 15px/1.4 var(--font-body); }
.yp-option__values { display: flex; flex-wrap: wrap; gap: 8px; }
.yp-chip { position: relative; cursor: pointer; }
.yp .yp-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.yp-chip span {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  border: 1px solid var(--ink);
  border-radius: 60px;
  font: 500 15px/1 var(--font-body);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.yp-chip input:checked + span { background: var(--ink); color: #fff; }
.yp-chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }

.yp-pdp__buy { display: grid; grid-template-columns: 115px minmax(0, 1fr); gap: 8px; }
.yp-qty--large { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; height: 50px; border-color: rgba(0, 0, 0, 0.2); }
.yp-qty--large button { width: auto; height: 100%; }
.yp-qty--field { width: 76px; height: 40px; border-color: rgba(0, 0, 0, 0.2); }
.yp .yp-qty input {
  width: 100%;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-weight: 600;
  text-align: center;
  -moz-appearance: textfield;
       appearance: textfield;
}
.yp-qty--large input::-webkit-outer-spin-button,
.yp-qty--large input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }

.yp-sticky {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(100vw - 32px, 425px);
  padding: 16px;
  background: var(--surface);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
.yp-sticky.yp-is-visible { opacity: 1; visibility: visible; transform: none; }
.yp-sticky__media { --ph: var(--surface-2); flex: none; width: 72px; border-radius: 10px; aspect-ratio: 1; }
.yp-sticky__info { flex: 1; min-width: 0; }
.yp-sticky__title {
  display: -webkit-box;
  overflow: hidden;
  font: 600 15px/1.35 var(--font-head);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.yp-sticky__variant { color: var(--ink-soft); font-size: 13px; }
.yp-sticky .yp-btn { flex: none; min-height: 44px; padding: 8px 20px; }

@media (max-width: 989px) {
  .yp-pdp { grid-template-columns: minmax(0, 1fr); padding-top: 16px; }
  .yp-pdp__media { position: static; }
  .yp-pdp__info { margin-top: 24px; padding-left: 0; }
}
/* Product details: the description reads as a designed page, not a plain list.
   Lead paragraph → intro line; headings → coral marker; bullet points → white
   cards with a tick, two per row; a paragraph that opens with a bold question →
   an answer card. Works on any product's description without changing its HTML. */
.yp-details .yp-rte { max-width: none; color: var(--muted); }
.yp-details .yp-rte > p:first-child { max-width: 36em; color: var(--ink); font: 400 clamp(18px, 0.8vw + 14px, 22px) / 1.5 var(--font-body); }
.yp-details .yp-rte > p:first-child strong { display: block; margin-bottom: 6px; font: 600 clamp(22px, 1vw + 16px, 30px) / 1.2 var(--font-display); letter-spacing: -0.015em; }
.yp-details .yp-rte h3 { display: flex; align-items: center; gap: 12px; margin-top: 2.4em; color: var(--ink); font: 600 clamp(19px, 0.5vw + 16px, 23px) / 1.3 var(--font-display); }
.yp-details .yp-rte h3::before { content: ''; flex: none; width: 22px; height: 3px; border-radius: 2px; background: var(--clay); }
.yp-details .yp-rte ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; margin-top: 18px; padding: 0; list-style: none; }
.yp-details .yp-rte li { position: relative; margin: 0; padding: 18px 18px 18px 54px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--white); line-height: 1.5; }
.yp-details .yp-rte li + li { margin-top: 0; }
.yp-details .yp-rte li::before {
  content: '';
  position: absolute;
  top: 17px;
  left: 18px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312454f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.yp-details .yp-rte li strong { display: block; margin-bottom: 3px; color: var(--ink); font-weight: 700; }
/* "Good to know" notes are honest limits, not features: an info mark, not a tick */
.yp-details .yp-rte ul.yp-notes li::before {
  background: var(--bone-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356636a' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 11v6'/%3E%3Ccircle cx='12' cy='7' r='0.6' fill='%2356636a'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.yp-details .yp-rte > p:not(:first-child):has(> strong:first-child) { padding: 16px 20px; border-left: 3px solid var(--primary); border-radius: var(--radius-card); background: var(--white); }
.yp-details .yp-rte > p:not(:first-child) > strong:first-child { display: block; margin-bottom: 4px; color: var(--ink); }
.yp-details .yp-rte > p + p:has(> strong:first-child) { margin-top: 10px; }
@media (max-width: 599px) {
  .yp-details .yp-rte ul { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .yp-details .yp-rte li { padding: 16px 16px 16px 50px; }
  .yp-details .yp-rte li::before { top: 15px; left: 15px; }
}

/* Product videos: the product's own clips, side by side, looping while in view */
.yp-videos { padding-block: clamp(40px, 6vw, 80px); }
.yp-videos__head { display: grid; gap: 10px; max-width: 640px; margin-bottom: 28px; }
.yp-videos__text { margin: 0; color: var(--ink-soft); font: 400 16px/1.55 var(--font-body); }
.yp-videos__grid { display: grid; gap: 16px; }
.yp-videos__grid--1 { grid-template-columns: minmax(0, 360px); }
.yp-videos__grid--2 { grid-template-columns: repeat(2, minmax(0, 360px)); }
.yp-videos__grid--3 { grid-template-columns: repeat(3, minmax(0, 320px)); }
.yp-videos__item { display: grid; gap: 10px; margin: 0; }
.yp-videos__frame { overflow: hidden; aspect-ratio: 9 / 16; border-radius: var(--radius-card); background: var(--surface-2); }
.yp-videos__frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.yp-videos__caption { color: var(--ink-soft); font: 400 14px/1.45 var(--font-body); }
@media (max-width: 599px) {
  .yp-videos__grid--2,
  .yp-videos__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .yp-videos__caption { font-size: 13px; }
}

/* bag drawer: family-kit offer under the lines when one ear camera is in the bag */
.yp-kit-nudge { display: grid; gap: 8px; margin-top: 18px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface-2); }
.yp-kit-nudge__title { margin: 0; color: var(--ink); font: 700 15px/1.3 var(--font-head); }
.yp-kit-nudge .yp-drawer__small { margin: 0; }

@media (max-width: 599px) {
  .yp-sticky { right: 8px; bottom: 8px; left: 8px; width: auto; }
  /* phones: price, bundle and Add to bag come straight after the name; the
     who-it's-for line and key points follow the button, crumbs are dropped */
  .yp-pdp__info { margin-top: 18px; gap: 16px; }
  .yp-pdp__info > * { order: 3; }
  .yp-pdp__info > .yp-pdp__head { order: 0; }
  .yp-pdp__info > .yp-pdp__form { order: 1; }
  .yp-pdp__info > .yp-pdp__suits,
  .yp-pdp__info > .yp-checklist,
  .yp-pdp__info > .yp-tiles { order: 2; }
  .yp-pdp__info > .yp-crumbs { display: none; }
  .yp-pdp__head .yp-h1 { font-size: 26px; line-height: 1.2; }
  .yp-pdp__head .yp-pdp__type { margin-bottom: -6px; }
}

/* Icon grid + comparison table (product page extras) -------------------------- */
.yp-icon-grid { display: grid; gap: 28px; padding-block: var(--section); }
.yp-icon-grid__items { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.yp-icon-grid .yp-icon-box { min-height: 226px; }
.yp-icon-box h3 { font-size: 18px; }

.yp-compare { display: grid; justify-items: center; gap: 28px; padding-block: var(--section); }
.yp-compare__scroll { width: 100%; max-width: 860px; overflow-x: auto; }
.yp-compare table { width: 100%; border-collapse: collapse; text-align: center; }
.yp-compare th,
.yp-compare td { padding: 16px 12px; border-bottom: 1px solid var(--line); }
.yp-compare thead th,
.yp-compare thead td { border-bottom: 0; font: 600 16px/1.4 var(--font-head); }
.yp-compare th[scope="row"] { font: 500 15px/1.4 var(--font-body); text-align: left; }
.yp-compare__us { background: var(--accent); }
.yp-compare .yp-icon { width: 22px; height: 22px; margin-inline: auto; stroke-width: 2; }
.yp-compare__no { color: rgba(0, 0, 0, 0.35); }

/* Collection + search --------------------------------------------------------- */
.yp-plp { padding-block: 24px var(--section); }
.yp-plp__head { display: grid; gap: 12px; margin-bottom: 28px; }
.yp-plp__desc { max-width: 70ch; color: var(--ink-soft); }
.yp-plp__layout { display: grid; grid-template-columns: 315px minmax(0, 1fr); align-items: start; gap: 0 30px; }
.yp-plp__layout--plain { grid-template-columns: minmax(0, 1fr); }
.yp-plp__bar {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding-bottom: 24px;
}
.yp-plp__count { margin-right: auto; color: var(--ink-soft); }
.yp-plp__filter-toggle {
  display: none;
  align-items: center;
  height: 50px;
  padding: 0 20px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: none;
  font: 600 15px/1 var(--font-head);
}
.yp-select { display: inline-flex; align-items: center; gap: 10px; font: 500 15px/1 var(--font-body); }
.yp .yp-select select {
  height: 50px;
  margin: 0;
  padding: 0 36px 0 16px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background-color: var(--surface);
  box-shadow: none;
  color: var(--ink);
  font: 500 15px/1 var(--font-body);
}

.yp-facets ul { display: grid; gap: 10px; padding-bottom: 18px; }
.yp-check { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.yp .yp-check input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.yp-check input:disabled + span { color: rgba(0, 0, 0, 0.35); }
.yp-price-range { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-bottom: 18px; }
.yp-price-range label { display: grid; gap: 4px; font-size: 13px; }
.yp .yp-price-range .yp-input { min-height: 44px; padding: 8px 10px; }
.yp-facets__clear { display: inline-block; margin-top: 16px; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }

.yp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 30px; }
.yp-grid--4,
.yp-plp__layout--plain .yp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.yp-grid__empty { grid-column: 1 / -1; padding-block: 48px; color: var(--ink-soft); text-align: center; }
.yp-result a { display: grid; gap: 8px; padding: 20px; background: var(--surface-2); }
.yp-result h3 { font-size: 17px; }
.yp-result p { color: var(--ink-soft); font-size: 14px; }
.yp-search--page { width: min(100%, 560px); margin-bottom: 24px; }
.yp-search--page + .yp-plp__count { margin-bottom: 24px; }

.yp-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 48px;
  font: 600 15px/1 var(--font-head);
}
.yp-pagination .page a,
.yp-pagination .page.current,
.yp-pagination .next a,
.yp-pagination .prev a {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.yp-pagination .page.current { border-color: var(--ink); background: var(--ink); color: #fff; }
.yp-pagination a:hover { border-color: var(--ink); }

@media (max-width: 989px) {
  .yp-plp__layout { grid-template-columns: minmax(0, 1fr); }
  .yp-plp__filter-toggle { display: inline-flex; }
  .yp-facets { display: none; margin-bottom: 24px; }
  .yp-facets.yp-is-open { display: block; }
  .yp-grid,
  .yp-grid--4,
  .yp-plp__layout--plain .yp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 10px; }
}

/* Bag page ----------------------------------------------------------------- */
.yp-cart-page { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: 48px; }
.yp-lines--page .yp-line { grid-template-columns: 110px minmax(0, 1fr); padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.yp-cart-page__summary { position: sticky; top: 124px; display: grid; gap: 12px; padding: 24px; background: var(--surface-2); }
@media (max-width: 989px) {
  .yp-cart-page { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .yp-cart-page__summary { position: static; }
}

/* Blog, articles, collection list --------------------------------------------- */
.yp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 30px; }
.yp-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.yp-card__media { margin-bottom: 16px; border-radius: 20px; aspect-ratio: 4 / 3; }
.yp-card__media--square { aspect-ratio: 1; }
.yp-card__meta { color: var(--ink-soft); font-size: 13px; }
.yp-card__title { margin-block: 6px 8px; font-size: 20px; }
.yp-card__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.yp-card > p:last-child { color: var(--ink-soft); }
.yp-cards--4 .yp-card__title { margin: 0; font-size: 17px; text-align: center; }
.yp-article__media { margin-bottom: 32px; border-radius: 20px; aspect-ratio: 16 / 9; }
.yp-article__back { margin-top: 40px; font: 600 15px/1.6 var(--font-head); }
@media (max-width: 989px) {
  .yp-cards,
  .yp-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 10px; }
}
@media (max-width: 599px) {
  .yp-cards { grid-template-columns: minmax(0, 1fr); }
  .yp-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 404 */
.yp-404 { display: grid; justify-items: center; gap: 16px; padding-block: clamp(64px, 10vw, 140px); text-align: center; }

/* 17. Motion ---------------------------------------------------------------- */
/* One set of curves and timings for everything that moves. Things ease out
   when they arrive (fast start, soft landing) and leave a little quicker than
   they came. Only transform and opacity are animated, so it stays smooth. */
.yp {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.3, 1.15, 0.5, 1); /* barely any overshoot */
  --t-fast: 0.15s;
  --t-base: 0.22s;
  --t-slow: 0.3s;
}

@keyframes yp-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes yp-slide-in { from { opacity: 0; transform: translateX(24px); } }
@keyframes yp-drop { from { opacity: 0; transform: translateY(-6px); } }

/* Buttons: the dark fill sweeps up from the bottom ----------------------------- */
.yp-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color var(--t-base) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.yp-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform 0.5s var(--ease-out);
}
.yp-btn:hover { background: var(--accent); color: var(--accent-ink); }
.yp-btn--ghost:hover { background: none; }
.yp-btn:active { transform: scale(0.98); }
.yp-btn:disabled::before { display: none; }
.yp-btn__icon { transition: transform var(--t-base) var(--ease-out); }
@media (hover: hover) {
  .yp-btn:hover:not(:disabled) { color: #fff; }
  .yp-btn:hover:not(:disabled)::before { transform: none; }
  .yp-btn:hover .yp-btn__icon { transform: translateX(4px); }
}

/* Header ----------------------------------------------------------------------- */
@media (min-width: 990px) {
  /* the yellow pill grows in behind the link instead of snapping on */
  .yp-nav .yp-nav__link { position: relative; isolation: isolate; }
  .yp-nav .yp-nav__link:hover,
  .yp-nav .yp-nav__link[aria-current="page"],
  .yp-nav__item.yp-is-open > .yp-nav__link { background: none; }
  .yp-nav .yp-nav__link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 999px;
    background: var(--accent);
    opacity: 0;
    transform: scale(0.82);
    transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-spring);
  }
  .yp-nav .yp-nav__link:hover::before,
  .yp-nav .yp-nav__link[aria-current="page"]::before,
  .yp-nav__item.yp-is-open > .yp-nav__link::before { opacity: 1; transform: none; }

  .yp-nav__caret { transition: transform var(--t-base) var(--ease-out); }
  .yp-nav__item.yp-is-open .yp-nav__caret { transform: rotate(180deg); }

  /* mega menu: panel fades, contents slide down and stagger in */
  .yp-mega { transition: opacity 0.25s var(--ease-in-out), visibility 0.25s; }
  .yp-nav__item.yp-is-open .yp-mega,
  .yp-nav__item:focus-within .yp-mega { transition: opacity 0.4s var(--ease-out), visibility 0s; }
  .yp-mega__inner { transform: translateY(-12px); transition: transform 0.25s var(--ease-in-out); }
  .yp-nav__item.yp-is-open .yp-mega__inner,
  .yp-nav__item:focus-within .yp-mega__inner { transform: none; transition: transform 0.6s var(--ease-out); }

  .yp-nav__item.yp-is-open .yp-mega__tab,
  .yp-nav__item.yp-is-open .yp-mega__panel.yp-is-active > .yp-mega__link {
    animation: yp-rise 0.5s var(--ease-out) both;
  }
  .yp-mega__tab:nth-child(2),
  .yp-mega__link:nth-of-type(2) { animation-delay: 40ms; }
  .yp-mega__tab:nth-child(3),
  .yp-mega__link:nth-of-type(3) { animation-delay: 80ms; }
  .yp-mega__tab:nth-child(4),
  .yp-mega__link:nth-of-type(4) { animation-delay: 120ms; }
  .yp-mega__tab:nth-child(5),
  .yp-mega__link:nth-of-type(5) { animation-delay: 160ms; }
  .yp-mega__tab:nth-child(n + 6),
  .yp-mega__link:nth-of-type(n + 6) { animation-delay: 200ms; }
}
.yp-mega__thumb { transition: transform var(--t-slow) var(--ease-out); }
.yp-mega__link:hover .yp-mega__thumb { transform: scale(1.08); }

.yp-icon-btn .yp-icon,
.yp-search button .yp-icon { transition: transform var(--t-base) var(--ease-spring); }
.yp-icon-btn:hover .yp-icon,
.yp-search button:hover .yp-icon { transform: scale(1.12); }
.yp-search { transition: background-color var(--t-base) var(--ease-out); }
.yp-search:hover { background: var(--mist); }

/* mobile menu: slides in slowly, leaves quickly */
@media (max-width: 989px) {
  .yp-nav { transition: transform 0.4s var(--ease-in-out), visibility 0.4s; }
  .yp-nav.yp-is-open { transition: transform 0.6s var(--ease-out), visibility 0s; }
  .yp-nav-scrim { transition: opacity 0.4s var(--ease-in-out), visibility 0.4s; }
  .yp-nav.yp-is-open + .yp-nav-scrim { transition: opacity 0.5s var(--ease-out), visibility 0s; }
  .yp-nav.yp-is-open > .yp-nav__link,
  .yp-nav.yp-is-open > .yp-nav__item { animation: yp-slide-in 0.6s var(--ease-out) both; }
  .yp-nav > :nth-child(3) { animation-delay: 50ms; }
  .yp-nav > :nth-child(4) { animation-delay: 100ms; }
  .yp-nav > :nth-child(5) { animation-delay: 150ms; }
  .yp-nav > :nth-child(6) { animation-delay: 200ms; }
  .yp-nav > :nth-child(n + 7) { animation-delay: 250ms; }
}

/* Product cards ------------------------------------------------------------------ */
.yp-product__img { transition: opacity 0.6s var(--ease-out), transform 0.9s var(--ease-out); }
.yp-product__img--hover { transform: scale(1.05); }
.yp-quick {
  transform: translateY(14px);
  transition:
    opacity var(--t-base) var(--ease-out),
    transform 0.5s var(--ease-out),
    background-color var(--t-base) var(--ease-out);
}
.yp-quick__icon { transition: transform 0.5s var(--ease-out); }
.yp-product__title a {
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  transition: background-size 0.45s var(--ease-out);
}
.yp-product__title a:hover { text-decoration: none; }
@media (hover: hover) {
  .yp-product:hover .yp-product__img--hover { transform: none; }
  .yp-product:hover .yp-product__img:only-of-type { transform: scale(1.04); }
  .yp-quick:hover { background: var(--accent); }
  .yp-quick:hover .yp-quick__icon { transform: rotate(90deg); }
  .yp-product:hover .yp-product__title a { background-size: 100% 1px; }
}
@media (hover: none), (max-width: 599px) {
  .yp-quick { transform: none; }
  .yp-quick:active { transform: scale(0.92); }
}

/* Small controls ------------------------------------------------------------------ */
.yp-arrow-btn {
  transition:
    background-color var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out),
    color var(--t-base) var(--ease-out),
    opacity var(--t-base) var(--ease-out),
    transform var(--t-fast) var(--ease-out);
}
.yp-arrow-btn .yp-icon { transition: transform var(--t-base) var(--ease-spring); }
.yp-arrow-btn:hover:not(:disabled) .yp-icon { transform: scale(1.2); }
.yp-arrow-btn:active:not(:disabled) { transform: scale(0.94); }
.yp-carousel__progress span { transition: width 0.4s var(--ease-out); }

.yp-tab,
.yp-chip span {
  transition:
    background-color var(--t-base) var(--ease-out),
    color var(--t-base) var(--ease-out),
    transform var(--t-fast) var(--ease-out);
}
.yp-chip:hover input:not(:checked) + span { background: var(--surface-2); }
.yp-chip:active span,
.yp-tab:active { transform: scale(0.96); }

.yp-gallery__slide { transform: scale(1.02); transition: opacity 0.5s var(--ease-out), transform 0.8s var(--ease-out), visibility 0.5s; }
.yp-gallery__slide.yp-is-active { transform: none; }
.yp-gallery__thumb { transition: border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-spring); }
.yp-gallery__thumb:hover { transform: translateY(-2px); }

.yp-socials a,
.yp-pagination a { transition: background-color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-spring); }
.yp-socials a:hover { transform: translateY(-2px); }

.yp-icon-grid .yp-icon-box { transition: transform var(--t-slow) var(--ease-out); }
.yp-icon-grid .yp-icon-box .yp-icon { transition: transform var(--t-slow) var(--ease-spring); }
.yp-icon-grid .yp-icon-box:hover { transform: translateY(-4px); }
.yp-icon-grid .yp-icon-box:hover .yp-icon { transform: scale(1.1); }

.yp-card__media > img { transition: transform 0.9s var(--ease-out); }
.yp-card:hover .yp-card__media > img { transform: scale(1.04); }

/* Icon strip: softer glide, cards settle into place -------------------------------- */
.yp-icons__track { transition: transform 0.9s var(--ease-in-out); }
.yp-icons__slide { transform: scale(0.97); transition: opacity 0.7s var(--ease-out), transform 0.9s var(--ease-out); }
.yp-icons__slide.yp-is-active { transform: none; }

/* Accordions: the script tweens the height, this handles the icon and content ------ */
.yp-faq__icon { transition: transform 0.45s var(--ease-out), background-color var(--t-base) var(--ease-out); }
.yp-acc summary::after { transition: transform 0.45s var(--ease-out); }
.yp-faq details.yp-is-closing .yp-faq__icon { background: var(--input); transform: none; }
.yp-acc.yp-is-closing summary::after { transform: translateY(-2px) rotate(45deg); }
.yp-faq details[open] > :not(summary),
.yp-acc[open] > :not(summary) { animation: yp-drop 0.5s var(--ease-out) 60ms both; }
.yp-faq details.yp-is-closing > :not(summary),
.yp-acc.yp-is-closing > :not(summary) { opacity: 0; transition: opacity 0.2s var(--ease-in-out); animation: none; }

/* Drawers: glide in, contents follow one after another ----------------------------- */
.yp-backdrop { transition: opacity 0.4s var(--ease-in-out), visibility 0.4s; }
.yp-backdrop.yp-is-open { transition: opacity 0.5s var(--ease-out), visibility 0s; }
.yp-drawer { transition: transform 0.4s var(--ease-in-out), visibility 0.4s; }
.yp-drawer.yp-is-open {
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.12);
  transition: transform 0.6s var(--ease-out), visibility 0s;
}
.yp-drawer.yp-is-entering .yp-line,
.yp-drawer.yp-is-entering .yp-quickadd,
.yp-drawer.yp-is-entering .yp-field,
.yp-drawer.yp-is-entering .yp-drawer__note,
.yp-drawer.yp-is-entering .yp-drawer__foot > * {
  animation: yp-slide-in 0.6s var(--ease-out) both;
  animation-delay: calc(120ms + var(--i, 0) * 50ms);
}
.yp-drawer__foot > :nth-child(1) { --i: 3; }
.yp-drawer__foot > :nth-child(2) { --i: 4; }
.yp-drawer__foot > :nth-child(n + 3) { --i: 5; }
.yp-field:nth-of-type(1) { --i: 1; }
.yp-field:nth-of-type(n + 2) { --i: 2; }
.yp-drawer__close,
.yp-nav__close,
.yp-popup__close { transition: transform var(--t-base) var(--ease-spring), background-color var(--t-base) var(--ease-out); }
.yp-drawer__close:hover,
.yp-nav__close:hover,
.yp-popup__close:hover { transform: rotate(90deg); }
.yp-qty button { transition: background-color var(--t-fast) var(--ease-out); }
.yp-qty button:hover { background: var(--surface-2); }

/* Popup: scales up with a slight overshoot, shrinks away quicker ------------------ */
.yp-popup { transition: opacity 0.35s var(--ease-in-out); }
.yp-popup.yp-is-open { transition: opacity 0.45s var(--ease-out); }
.yp-popup__card { transform: translateY(18px) scale(0.96); transition: transform 0.35s var(--ease-in-out); }
.yp-popup.yp-is-open .yp-popup__card { transform: none; transition: transform 0.65s var(--ease-spring); }

/* Floating add-to-bag card */
.yp-sticky { transition: opacity 0.3s var(--ease-in-out), transform 0.3s var(--ease-in-out), visibility 0.3s; }
.yp-sticky.yp-is-visible { transition: opacity 0.4s var(--ease-out), transform 0.65s var(--ease-spring), visibility 0s; }

/* Reveal on scroll: longer, softer, and the hero underline draws itself ----------- */
.yp-js .yp-reveal {
  transform: translateY(20px);
  transition:
    opacity 0.9s var(--ease-out) var(--yp-delay, 0s),
    transform 0.9s var(--ease-out) var(--yp-delay, 0s),
    background-color var(--t-base) var(--ease-out),
    color var(--t-base) var(--ease-out);
}
.yp-js .yp-reveal .yp-marker::after { transform: scaleX(0); transform-origin: left center; transition: transform 0.9s var(--ease-out) 0.55s; }
.yp-js .yp-reveal.yp-is-in .yp-marker::after { transform: none; }

/* Anyone who has asked their device for less motion gets none of the above */
@media (prefers-reduced-motion: reduce) {
  .yp *, .yp *::before, .yp *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition-delay: 0s !important;
  }
}


/* 18. ESMURE design system --------------------------------------------------- */
/* The layer that makes every component speak the same language. Everything here
   reads the tokens in section 1: one type scale, one palette, one spacing scale,
   two corner radii, one set of timings. It comes last so it settles any
   differences left by the earlier sections. */

/* Numbers line up wherever they are compared or change in place */
.yp-price,
.yp-pdp__price,
.yp-line__price,
.yp-drawer__total,
.yp-qty,
.yp-pagination,
.yp-plp__count,
.yp-cart__count { font-variant-numeric: tabular-nums; }

/* Labels: the one small-caps style, used for eyebrows, badges and column heads */
.yp-eyebrow,
.yp .yp-badge,
.yp-site-footer h2,
.yp-form label > span,
.yp-price-range label > span {
  font: 600 var(--text-micro) / 1.4 var(--font-body);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.yp-eyebrow { color: var(--primary); }

/* Buttons ---------------------------------------------------------------------- */
.yp .yp-btn {
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-control);
  background: var(--primary);
  color: var(--primary-ink);
  font: 600 var(--text-sm) / 1 var(--font-body);
  letter-spacing: 0.01em;
  /* opacity and transform stay in the list so a button can still fade up on scroll */
  transition:
    background-color var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out),
    color var(--t-base) var(--ease-out),
    opacity 0.6s var(--ease-out) var(--yp-delay, 0s),
    transform 0.6s var(--ease-out) var(--yp-delay, 0s);
}
.yp .yp-btn::before { content: none; }
.yp .yp-btn:hover:not(:disabled) { background: var(--primary-hover); color: var(--primary-ink); }
.yp .yp-btn:active { transform: none; }
.yp .yp-btn--large { min-height: 52px; padding: 0 28px; }
.yp .yp-btn--block { min-height: 48px; }
.yp .yp-btn--ghost { border: 1px solid var(--border-strong); background: transparent; color: var(--deep-ink); }
.yp .yp-btn--ghost:hover:not(:disabled) { border-color: var(--deep-ink); background: transparent; color: var(--deep-ink); }
.yp .yp-btn:disabled,
.yp .yp-btn:disabled:hover { background: var(--border); color: var(--muted); opacity: 1; }
.yp .yp-btn__icon { width: 16px; height: 16px; border-radius: 0; background: none; color: inherit; }
.yp .yp-btn__icon .yp-icon { width: 16px; height: 16px; stroke-width: 1.75; }

/* Announcement bar ------------------------------------------------------------- */
.yp-announce { padding-block: 10px; background: var(--primary); color: rgba(255, 255, 255, 0.92); }
.yp-announce__messages p {
  font: 500 var(--text-micro) / 20px var(--font-body);
  letter-spacing: var(--tracking-label);
}
.yp-announce__nav { color: inherit; opacity: 0.7; transition: opacity var(--t-base) var(--ease-out); }
.yp-announce__nav:hover { opacity: 1; }

/* Header and navigation -------------------------------------------------------- */
.yp-site-header__inner { min-height: 76px; gap: var(--space-3) var(--space-5); }
.yp-site-header.yp-is-stuck { box-shadow: 0 1px 0 var(--border); }
.yp-nav { font: 500 15px/1.4 var(--font-body); }
.yp .yp-search { height: 44px; border: 1px solid var(--border); background: var(--bone-deep); }
.yp .yp-search:hover { background: var(--bone-deep); border-color: var(--border-strong); }
.yp .yp-search:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
.yp .yp-search input { font-size: var(--text-sm); }
.yp .yp-search input::placeholder { color: var(--muted); opacity: 1; }
.yp-icon-btn .yp-icon,
.yp-search .yp-icon { stroke-width: 1.5; }
.yp .yp-icon-btn:hover .yp-icon,
.yp .yp-search button:hover .yp-icon { transform: none; }
.yp-icon-btn { border-radius: var(--radius-control); transition: color var(--t-base) var(--ease-out); }
.yp-icon-btn:hover { color: var(--primary); }
.yp-cart__count { background: var(--primary); color: var(--primary-ink); }

@media (min-width: 990px) {
  .yp-nav { gap: var(--space-1) 28px; margin-left: var(--space-6); }
  /* links: no pill, a thin line draws in under the word instead */
  .yp-nav .yp-nav__link { padding: 8px 0; border-radius: 0; font-weight: 500; transition: color var(--t-base) var(--ease-out); }
  .yp-nav .yp-nav__link::before {
    inset: auto 0 2px;
    height: 1.5px;
    border-radius: 0;
    background: currentColor;
    opacity: 1;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--t-base) var(--ease-out);
  }
  .yp-nav .yp-nav__link:hover,
  .yp-nav .yp-nav__link[aria-current="page"],
  .yp-nav__item.yp-is-open > .yp-nav__link { color: var(--primary); }
  .yp-nav .yp-nav__link:hover::before,
  .yp-nav .yp-nav__link[aria-current="page"]::before,
  .yp-nav__item.yp-is-open > .yp-nav__link::before { transform: none; }

  .yp-mega { border-top-color: var(--border); box-shadow: 0 0 0 100vmax rgba(24, 35, 42, 0.28); }
  .yp-mega__side { gap: var(--space-2); padding: var(--space-6) var(--space-6) var(--space-6) 0; border-right-color: var(--border); }
  .yp-nav .yp-mega__tab { font: 600 20px/1.3 var(--font-display); letter-spacing: var(--tracking-heading); }
  .yp-mega__panel { gap: var(--space-4) var(--space-5); padding: var(--space-6) 0 var(--space-6) var(--space-6); }
  .yp-nav__item.yp-is-open .yp-mega__inner,
  .yp-nav__item:focus-within .yp-mega__inner { transition: transform var(--t-slow) var(--ease-out); }
  .yp-nav__item.yp-is-open .yp-mega__tab,
  .yp-nav__item.yp-is-open .yp-mega__panel.yp-is-active > .yp-mega__link { animation-duration: 0.3s; }
}
.yp-nav .yp-mega__link { font: 500 15px/1.4 var(--font-body); transition: color var(--t-base) var(--ease-out); }
.yp-nav .yp-mega__link:hover { color: var(--primary); }
.yp-mega__link:hover span { text-decoration: none; }
.yp-mega__thumb { border-radius: var(--radius-control); }
.yp .yp-mega__link:hover .yp-mega__thumb { transform: none; }

@media (max-width: 989px) {
  .yp-nav .yp-nav__link { font-size: 18px; font-weight: 500; }
  .yp-nav.yp-is-open > .yp-nav__link,
  .yp-nav.yp-is-open > .yp-nav__item { animation-duration: 0.3s; }
  .yp-nav { transition: transform 0.26s var(--ease-in-out), visibility 0.26s; }
  .yp-nav.yp-is-open { transition: transform 0.34s var(--ease-out), visibility 0s; }
}

/* Hero ---------------------------------------------------------------------------- */
/* the image has rounded corners now, so it needs air between it and the header */
.yp-hero { padding-top: var(--space-5); }
.yp-hero__copy { gap: var(--space-5); }
.yp-hero__title {
  font: 500 var(--text-display) / var(--leading-tight) var(--font-display);
  letter-spacing: var(--tracking-display);
}
.yp-marker { font-weight: 700; }
.yp-marker::after { background: var(--clay); }
.yp-hero__media { border-radius: var(--radius-card); }
.yp-checklist { gap: var(--space-3); font: 500 15px/1.5 var(--font-body); }
.yp-checklist__tick { width: 22px; height: 22px; background: var(--mist); color: var(--primary); }
.yp-checklist__tick .yp-icon { width: 12px; height: 12px; stroke-width: 2.25; }

/* Section headings: one rhythm above and below ------------------------------------ */
.yp-section__head { margin-bottom: var(--space-6); }
.yp-split__copy { gap: var(--space-4); }
.yp-split__text,
.yp-feature__text,
.yp-plp__desc { color: var(--muted); }
.yp-split__text { max-width: 52ch; }
.yp-feature { gap: var(--space-5); }
.yp-feature__media { border-radius: var(--radius-card); }

/* Icon boxes ----------------------------------------------------------------------- */
.yp-icon-box { gap: var(--space-2); border-radius: var(--radius-card); background: var(--bone-deep); }
.yp-icon-box .yp-icon { width: 36px; height: 36px; margin-bottom: var(--space-2); color: var(--primary); stroke-width: 1.25; }
.yp-icon-box h2,
.yp-icon-box h3 { font-size: 17px; letter-spacing: -0.01em; }
.yp-icon-box p { max-width: 34ch; color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
.yp .yp-icon-grid .yp-icon-box:hover { transform: none; }
.yp .yp-icon-grid .yp-icon-box:hover .yp-icon { transform: none; }
.yp-icon-grid__items,
.yp-icons__track { gap: var(--space-3); }

/* Product cards -------------------------------------------------------------------- */
.yp-product { text-align: left; }
.yp-product__media { border-radius: var(--radius-card); }
.yp .yp-product__title {
  display: -webkit-box;
  margin: var(--space-3) 0 var(--space-1);
  overflow: hidden;
  font: 500 15px/1.35 var(--font-body);
  letter-spacing: 0;
  text-wrap: balance;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.yp .yp-product__title a { background: none; transition: color var(--t-base) var(--ease-out); }
.yp .yp-product:hover .yp-product__title a { color: var(--primary); }
.yp-price { color: var(--deep-ink); font: 600 15px/1.4 var(--font-body); }
.yp-price s,
.yp-pdp__price s { margin-left: var(--space-1); color: var(--muted); font-weight: 400; font-size: var(--text-sm); }
/* on sale: the live price takes the brand green, the old price stays quiet */
.yp-price:has(s) { color: var(--primary); }

.yp .yp-badge { top: var(--space-3); left: var(--space-3); padding: 4px 10px; border-radius: var(--radius-pill); background: var(--primary); color: var(--primary-ink); font-size: 11px; }
.yp .yp-badge--muted { background: var(--white); color: var(--deep-ink); box-shadow: inset 0 0 0 1px var(--border-strong); }

.yp .yp-product__img { transition: opacity var(--t-slow) var(--ease-out); }
.yp .yp-product__img--hover,
.yp .yp-product:hover .yp-product__img:only-of-type { transform: none; }
.yp .yp-quick {
  inset: auto var(--space-3) var(--space-3);
  min-height: 44px;
  padding: 0 10px 0 var(--space-4);
  border-radius: var(--radius-control);
  font: 600 var(--text-sm) / 1 var(--font-body);
  transform: translateY(6px);
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out);
}
.yp .yp-product:hover .yp-quick,
.yp .yp-quick:focus-visible { transform: none; }
.yp .yp-quick:hover { background: var(--bone-deep); }
.yp .yp-quick__icon { width: 26px; height: 26px; background: var(--primary); }
.yp .yp-quick:hover .yp-quick__icon { transform: none; }
@media (hover: none), (max-width: 599px) {
  .yp .yp-quick { inset: auto var(--space-2) var(--space-2) auto; width: 40px; min-height: 0; padding: 0; border-radius: 50%; transform: none; }
  .yp .yp-quick__icon { background: none; color: var(--primary); }
}

.yp .yp-tab { padding: 8px var(--space-4); border-radius: var(--radius-pill); color: var(--muted); font: 500 var(--text-sm) / 1.2 var(--font-body); }
.yp .yp-tab:hover { background: var(--bone-deep); color: var(--deep-ink); }
.yp .yp-tab.yp-is-active { background: var(--primary); color: var(--primary-ink); }

.yp .yp-arrow-btn { border-color: var(--border-strong); border-radius: 50%; }
.yp .yp-arrow-btn:hover:not(:disabled) { border-color: var(--primary); background: var(--primary); color: var(--primary-ink); }
.yp .yp-arrow-btn:hover:not(:disabled) .yp-icon,
.yp .yp-arrow-btn:active:not(:disabled) { transform: none; }
.yp-carousel__progress { background: var(--border); }
.yp-carousel__progress span { background: var(--primary); }
.yp-grid { gap: var(--space-6) var(--space-5); }

/* Product page --------------------------------------------------------------------- */
.yp-pdp__info { gap: var(--space-5); }
.yp-pdp__info .yp-h1 { font-size: var(--text-h1); }
.yp-gallery__stage { border-radius: var(--radius-card); }
.yp .yp-gallery__slide { transform: none; transition: opacity var(--t-slow) var(--ease-out), visibility var(--t-slow); }
.yp-gallery__thumbs { gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-card); box-shadow: var(--shadow-pop); }
.yp-gallery__thumb { border-radius: var(--radius-control); }
.yp .yp-gallery__thumb:hover { transform: none; }
.yp-gallery__thumb.yp-is-active { border-color: var(--primary); }
.yp-pdp__now { font: 600 26px/1.2 var(--font-body); letter-spacing: -0.01em; }
.yp-pdp__price:has(s:not([hidden])) .yp-pdp__now { color: var(--primary); }
.yp .yp-save { padding: 5px 8px; border-radius: 4px; background: var(--mist); color: var(--primary); font: 600 var(--text-micro) / 1 var(--font-body); letter-spacing: 0.02em; }
.yp-option legend { margin-bottom: var(--space-3); font: 600 var(--text-sm) / 1.4 var(--font-body); }
.yp-option legend span { color: var(--muted); font: 400 var(--text-sm) / 1.4 var(--font-body); }
.yp .yp-chip span { height: 40px; padding: 0 var(--space-4); border-color: var(--border-strong); border-radius: var(--radius-pill); font: 500 var(--text-sm) / 1 var(--font-body); }
.yp .yp-chip:hover input:not(:checked) + span { border-color: var(--deep-ink); background: transparent; }
.yp .yp-chip input:checked + span { border-color: var(--primary); background: var(--primary); color: var(--primary-ink); }
.yp .yp-chip input:focus-visible + span { outline-color: var(--primary); }
.yp .yp-chip:active span { transform: none; }
.yp-qty { border-color: var(--border-strong); border-radius: var(--radius-control); overflow: hidden; }
.yp-qty--large { height: 48px; }
.yp-pdp__buy { grid-template-columns: 116px minmax(0, 1fr); gap: var(--space-2); }
.yp-acc { border-bottom-color: var(--border); }
.yp-acc summary { padding-block: var(--space-4); font: 600 15px/1.4 var(--font-body); }
.yp-acc summary::after { width: 7px; height: 7px; border-width: 1.5px; }
.yp-acc__body { color: var(--muted); font-size: 15px; }
.yp-sticky { border-radius: var(--radius-card); box-shadow: var(--shadow-pop); }
.yp-sticky.yp-is-visible { transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out), visibility 0s; }
.yp-sticky__title { font: 600 var(--text-sm) / 1.35 var(--font-body); }
.yp .yp-sticky .yp-btn { min-height: 40px; padding: 0 var(--space-4); }

.yp-compare__us { background: var(--mist); }
.yp-compare thead th { font: 600 var(--text-sm) / 1.4 var(--font-body); }
.yp-compare th[scope="row"] { font: 500 15px/1.4 var(--font-body); }
.yp-compare .yp-icon { color: var(--primary); }
.yp-compare .yp-compare__no { color: var(--border-strong); }

/* Collection, search, filters ------------------------------------------------------ */
.yp-plp__bar { font-size: var(--text-sm); }
.yp-plp__count { color: var(--muted); }
.yp-select { font: 500 var(--text-sm) / 1 var(--font-body); }
.yp .yp-select select,
.yp .yp-field select { height: 44px; border-color: var(--border-strong); border-radius: var(--radius-control); font: 500 var(--text-sm) / 1 var(--font-body); }
.yp-plp__filter-toggle { height: 44px; border-color: var(--border-strong); border-radius: var(--radius-control); font: 600 var(--text-sm) / 1 var(--font-body); }
.yp-facets .yp-acc summary { font-size: var(--text-sm); }
.yp-check { font-size: var(--text-sm); }
.yp .yp-check input { accent-color: var(--primary); }
.yp-facets__clear { color: var(--primary); }
.yp-result a { border-radius: var(--radius-card); }
.yp-pagination { font: 500 var(--text-sm) / 1 var(--font-body); }
.yp-pagination .page a,
.yp-pagination .page.current,
.yp-pagination .next a,
.yp-pagination .prev a { min-width: 40px; height: 40px; border-color: var(--border-strong); border-radius: var(--radius-control); }
.yp-pagination .page.current { border-color: var(--primary); background: var(--primary); color: var(--primary-ink); }
.yp-pagination a:hover { border-color: var(--primary); color: var(--primary); }

/* Fields and forms ----------------------------------------------------------------- */
.yp .yp-input,
.yp .yp-popup__input {
  min-height: 48px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  font: 400 15px/1.5 var(--font-body);
  transition: border-color var(--t-base) var(--ease-out);
}
.yp .yp-input:hover,
.yp .yp-popup__input:hover { border-color: var(--muted); }
.yp .yp-input:focus,
.yp .yp-popup__input:focus { border-color: var(--primary); }
.yp-form label > span,
.yp-price-range label > span { color: var(--muted); }
.yp-form__note { border-radius: var(--radius-control); }
.yp-drawer__error,
.yp-popup__error,
.yp-form__note--error { color: var(--danger); }

/* Pages, articles, rich text ------------------------------------------------------- */
.yp-page__title { margin-bottom: var(--space-5); font-size: var(--text-h1); }
.yp-crumbs { margin-bottom: var(--space-5); color: var(--muted); font: 400 var(--text-xs) / 1.6 var(--font-body); }
.yp-crumbs a { color: var(--deep-ink); }
.yp-crumbs a:hover { color: var(--primary); text-decoration: none; }
.yp-crumbs__sep { color: var(--border-strong); }
.yp-rte { max-width: 68ch; font-size: var(--text-body); line-height: 1.7; }
.yp-acc__body.yp-rte { font-size: 15px; line-height: 1.6; }
.yp-rte h2 { margin-top: 1.8em; font-size: var(--text-h3); }
.yp-rte h3 { margin-top: 1.6em; font-size: var(--text-h4); }
.yp-rte a { color: var(--primary); text-decoration-thickness: 1px; }
.yp-rte blockquote { border-left-color: var(--clay); color: var(--muted); }
.yp-card__media,
.yp-article__media { border-radius: var(--radius-card); }
.yp-card__meta { color: var(--muted); font-size: var(--text-xs); }
.yp-card__title { font-size: 20px; }
.yp-card__title a:hover { color: var(--primary); text-decoration: none; }
.yp .yp-card:hover .yp-card__media > img { transform: none; }
.yp-article__back a { color: var(--primary); }

/* FAQ ------------------------------------------------------------------------------ */
.yp-faq details { border-bottom-color: var(--border); }
.yp-faq summary { padding-block: var(--space-5); font: 600 17px/1.4 var(--font-display); letter-spacing: -0.01em; }
.yp-faq details p { color: var(--muted); font-size: 15px; }
.yp-faq__icon { width: 28px; height: 28px; background: var(--bone-deep); color: var(--deep-ink); }
.yp-faq summary:hover .yp-faq__icon { background: var(--mist); }
.yp-faq details[open] .yp-faq__icon { background: var(--primary); color: var(--primary-ink); }
.yp-faq details.yp-is-closing .yp-faq__icon { background: var(--bone-deep); color: var(--deep-ink); }
.yp-faq details[open] > :not(summary),
.yp-acc[open] > :not(summary) { animation-duration: 0.3s; animation-delay: 0s; }

/* Drawers, popup ------------------------------------------------------------------- */
.yp-backdrop { background: rgba(24, 35, 42, 0.4); }
.yp-drawer { transition: transform 0.26s var(--ease-in-out), visibility 0.26s; }
.yp-drawer.yp-is-open { box-shadow: var(--shadow-pop); transition: transform 0.36s var(--ease-out), visibility 0s; }
.yp-drawer__head { border-bottom-color: var(--border); }
.yp-drawer__head h2 { font-size: var(--text-h4); }
.yp-drawer__foot { gap: var(--space-3); border-top-color: var(--border); }
.yp-drawer__close,
.yp-nav__close { background: var(--bone-deep); }
.yp .yp-drawer__close:hover,
.yp .yp-nav__close:hover,
.yp .yp-popup__close:hover { transform: none; background: var(--mist); }
.yp-line__media,
.yp-quickadd__media,
.yp-sticky__media { border-radius: var(--radius-control); }
.yp-line__title,
.yp-quickadd__title { font: 600 15px/1.35 var(--font-body); }
.yp-line__variant,
.yp-line__remove,
.yp-drawer__small,
.yp-drawer__note { color: var(--muted); font-size: var(--text-xs); }
.yp-line__price,
.yp-quickadd__price { font: 600 15px/1.4 var(--font-body); }
.yp-drawer__total { font: 600 var(--text-body) / 1.4 var(--font-body); }
.yp-drawer__link { color: var(--deep-ink); font-size: var(--text-sm); text-decoration-thickness: 1px; }
.yp-field { font: 600 var(--text-xs) / 1.4 var(--font-body); }
.yp-cart-page__summary { border-radius: var(--radius-card); }
.yp-drawer.yp-is-entering .yp-line,
.yp-drawer.yp-is-entering .yp-quickadd,
.yp-drawer.yp-is-entering .yp-field,
.yp-drawer.yp-is-entering .yp-drawer__note,
.yp-drawer.yp-is-entering .yp-drawer__foot > * { animation-duration: 0.32s; animation-delay: calc(80ms + var(--i, 0) * 30ms); }

.yp-popup__scrim { background: rgba(24, 35, 42, 0.4); }
.yp-popup__card { gap: var(--space-4); padding: var(--space-7) var(--space-6) var(--space-6); border-radius: var(--radius-card); box-shadow: var(--shadow-pop); transform: translateY(12px) scale(0.98); }
.yp-popup.yp-is-open .yp-popup__card { transition: transform var(--t-slow) var(--ease-out); }
.yp-popup__card h2 { color: var(--deep-ink); font-size: var(--text-h3); text-transform: none; }
.yp-popup__text { color: var(--muted); font-size: 15px; }
.yp .yp-popup__input { text-align: left; }
.yp-popup__decline { color: var(--muted); font: 500 var(--text-xs) / 1.6 var(--font-body); letter-spacing: 0; text-transform: none; text-decoration: underline; text-underline-offset: 3px; }

/* Footer --------------------------------------------------------------------------- */
.yp-site-footer { background: var(--primary); color: rgba(255, 255, 255, 0.86); }
.yp-site-footer .yp-logo { color: var(--white); }
.yp-site-footer__grid { gap: var(--space-7) var(--space-6); padding-block: var(--space-8) var(--space-7); }
.yp-site-footer__brand { gap: var(--space-4); font-size: 15px; }
.yp-site-footer h2 { margin-bottom: var(--space-4); color: rgba(255, 255, 255, 0.62); }
.yp-site-footer nav a { padding-block: 6px; font-size: 15px; transition: color var(--t-base) var(--ease-out); }
.yp-site-footer nav a:hover { color: var(--white); text-decoration: none; }
.yp-site-footer__bottom { padding-block: var(--space-5); border-top-color: rgba(255, 255, 255, 0.16); font-size: var(--text-xs); }
.yp-socials { gap: var(--space-2); }
.yp-socials a {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: transparent;
  color: var(--white);
  font: 600 var(--text-xs) / 1 var(--font-body);
}
.yp .yp-socials a:hover { transform: none; border-color: var(--white); background: var(--white); color: var(--primary); }
.yp-site-footer :focus-visible { outline-color: var(--white); }

/* Motion: scroll reveal, shorter and smaller --------------------------------------- */
@keyframes yp-rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes yp-slide-in { from { opacity: 0; transform: translateX(12px); } }
@keyframes yp-drop { from { opacity: 0; transform: translateY(-4px); } }
.yp-js .yp-reveal {
  transform: translateY(12px);
  transition:
    opacity 0.6s var(--ease-out) var(--yp-delay, 0s),
    transform 0.6s var(--ease-out) var(--yp-delay, 0s),
    background-color var(--t-base) var(--ease-out),
    color var(--t-base) var(--ease-out);
}
.yp-js .yp-reveal .yp-marker::after { transition: transform 0.6s var(--ease-out) 0.35s; }
.yp-icons__slide { transform: none; }
.yp-icons__track { transition-duration: 0.7s; }

/* Logo: the uploaded wordmark used as a stencil, filled with the current text colour.
   Forest green in the header, white in the footer, from one file. ------------------ */
.yp-logo__tint {
  display: block;
  flex: none;
  width: var(--yp-logo-w, 160px);
  max-width: 46vw;
  background: currentColor;
  -webkit-mask: var(--yp-logo-src) center / contain no-repeat;
          mask: var(--yp-logo-src) center / contain no-repeat;
}
/* The logo file carries empty space above and below the letters. Let that space
   overlap the header's own padding so the bar keeps its designed height. */
.yp-site-header .yp-logo__tint { margin-block: -12px; }

/* Phone header: menu, logo, account and bag must share one row, so the icons
   sit close together and the logo gives way before anything wraps. */
@media (max-width: 989px) {
  .yp-site-header__inner { gap: var(--space-2) var(--space-1); }
  .yp-site-header .yp-logo__tint,
  .yp-site-header .yp-logo__img,
  .yp-site-header .yp-wordmark { max-width: 40vw; }
}

/* ESMURE 2.0 homepage ---------------------------------------------------------------
   An editorial sequence: a statement, two doors (Dogs, Cats), a short shelf of
   products, the philosophy, one product in focus, one photograph, the practical
   facts, then the newsletter. Sections that depend on a photograph or a product
   stay out of the page until they have one. */

/* A full-width Warm Bone band behind a section */
.yp-band { background: var(--bone-deep); }

/* Hero: 5 columns of words, 7 of photograph */
.yp-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 72px); }
.yp-hero__lede { max-width: 34ch; color: var(--muted); font-size: clamp(17px, 0.5vw + 15px, 20px); line-height: 1.5; }
.yp-hero__media { max-height: 720px; aspect-ratio: 7 / 6; }
.yp-ph > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Hero without a photograph: a centred statement */
.yp-hero--text { grid-template-columns: minmax(0, 1fr); justify-items: center; padding-block: clamp(72px, 11vw, 168px); text-align: center; }
.yp-hero--text .yp-hero__copy { justify-items: center; max-width: 820px; }
.yp-hero--text .yp-hero__lede { max-width: 40ch; }

/* The theme's own square photograph: the pets sit in the lower two thirds, so the
   wide crop gives up the top of the room first */
.yp-hero__media--square > img { object-position: 50% 72%; }

@media (max-width: 749px) {
  .yp-hero { grid-template-columns: minmax(0, 1fr); }
  .yp-hero__media { aspect-ratio: 4 / 5; }
  .yp-hero__media--square { aspect-ratio: 1; }
}

/* Text and image without an image: the same centred statement, on Warm Bone */
.yp-split--text { grid-template-columns: minmax(0, 1fr); }
.yp-split--text .yp-split__copy { justify-items: center; padding-block: var(--section); text-align: center; }
.yp-split--text .yp-split__copy h2 { max-width: 20ch; }
.yp-split--text .yp-split__text { max-width: 56ch; }

/* Product story */
.yp-spotlight {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(24px, 5vw, 72px);
  padding-block: var(--section);
}
.yp-spotlight--reverse .yp-spotlight__media { order: 2; }
.yp-spotlight__media { --ph: var(--bone-deep); border-radius: var(--radius-card); aspect-ratio: 1; }
.yp-spotlight__copy { display: grid; justify-items: start; gap: var(--space-4); }
.yp-spotlight__text { max-width: 46ch; color: var(--muted); }
@media (max-width: 749px) {
  .yp-spotlight { grid-template-columns: minmax(0, 1fr); }
  .yp-spotlight--reverse .yp-spotlight__media { order: 0; }
}

/* Editorial image: one photograph, a few words over its lower edge */
.yp-editorial { position: relative; display: grid; align-items: end; min-height: clamp(420px, 56vw, 720px); margin-block: var(--section); color: var(--white); }
.yp-editorial__media { position: absolute; inset: 0; }
/* the fade guarantees readable text whatever the photograph */
.yp-editorial__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(17, 26, 31, 0.72), rgba(17, 26, 31, 0) 62%); }
.yp-editorial__copy { position: relative; display: grid; justify-items: start; gap: var(--space-3); padding-block: clamp(32px, 5vw, 64px); }
.yp-editorial__copy h2 { max-width: 16ch; }
.yp-editorial__copy p { max-width: 40ch; font-size: clamp(16px, 0.4vw + 15px, 18px); }
.yp .yp-btn--light { margin-top: var(--space-2); background: var(--white); color: var(--primary); }
.yp .yp-btn--light:hover:not(:disabled) { background: var(--bone-deep); color: var(--primary); }

/* Product facts: a plain two-column list. Label on the left, the fact on the right. */
.yp-pdp__suits { max-width: 46ch; color: var(--muted); }
.yp-specs { display: grid; margin: 0; }
.yp-specs div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-4); padding-block: 10px; border-top: 1px solid var(--border); }
.yp-specs dt { color: var(--muted); font-size: var(--text-sm); }
.yp-specs dd { margin: 0; color: var(--deep-ink); font-variant-numeric: tabular-nums; }

/* Product page: the reconstructed layout -------------------------------------------
   Gallery takes about 58% of the width; the purchase panel takes the rest.
   Below them, description and specifications sit at full width. */
.yp-pdp { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); }
@media (max-width: 989px) {
  .yp-pdp { grid-template-columns: minmax(0, 1fr); }
}

/* Rating summary: five stars cut from one bar, filled to the real average */
.yp-rating { display: inline-flex; align-items: center; justify-self: start; gap: var(--space-2); color: var(--muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.yp-rating__stars {
  position: relative;
  width: 90px;
  height: 16px;
  background: var(--border-strong);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.6l2.6 5.3 5.8.8-4.2 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.2-4.1 5.8-.8z'/%3E%3C/svg%3E") left center / 18px 16px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.6l2.6 5.3 5.8.8-4.2 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.2-4.1 5.8-.8z'/%3E%3C/svg%3E") left center / 18px 16px repeat-x;
}
.yp-rating__stars::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--yp-rating, 0%); background: var(--primary); }

/* Availability: a dot and two words */
.yp-stock { display: flex; align-items: center; gap: var(--space-2); color: var(--success); font: 500 var(--text-sm) / 1.4 var(--font-body); }
.yp-stock::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.yp-stock--out { color: var(--muted); }

/* Express checkout buttons come from Shopify; they only need to match our shape */
.yp-pdp__express:empty,
.yp-pdp__express[hidden] { display: none; }
.yp-pdp__express {
  --shopify-accelerated-checkout-button-block-size: 48px;
  --shopify-accelerated-checkout-button-border-radius: var(--radius-control);
  --shopify-accelerated-checkout-button-box-shadow: none;
}
.yp-pdp__express .shopify-payment-button__button { min-height: 48px; border-radius: var(--radius-control); }
.yp-pdp__express .shopify-payment-button__more-options { margin-top: var(--space-2); color: var(--muted); font-size: var(--text-sm); }

/* Delivery and returns: one line each, with a link to the full policy */
.yp-service { display: grid; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--border); color: var(--muted); font-size: var(--text-sm); }
.yp-service li { display: flex; align-items: flex-start; gap: var(--space-3); }
.yp-service .yp-icon { width: 20px; height: 20px; margin-top: 1px; color: var(--primary); stroke-width: 1.5; }
.yp-service a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.yp-service strong { color: var(--ink); font-weight: 600; }
.yp-service [data-yp-eta] { color: var(--ink); }
.yp-pdp__accs:empty { display: none; }
#yp-delivery { scroll-margin-top: 140px; }

/* Gallery: zoom button and video */
.yp-gallery__zoom {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  color: var(--deep-ink);
  box-shadow: 0 2px 8px rgba(24, 35, 42, 0.12);
}
.yp-gallery__zoom[hidden] { display: none; }
.yp-gallery__zoom .yp-icon { width: 18px; height: 18px; }
.yp-gallery__slide--video video,
.yp-gallery__slide--video iframe { width: 100%; height: 100%; border: 0; object-fit: cover; }

/* Lightbox: the photograph, large, on a near-black ground */
.yp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 56px var(--space-4);
  outline: none;
  background: rgba(17, 26, 31, 0.94);
  color: var(--white);
}
.yp-lightbox[hidden] { display: none; }
.yp-lightbox__img { width: auto; max-width: 100%; height: auto; max-height: calc(100vh - 112px); background: var(--white); object-fit: contain; }
.yp-lightbox__close,
.yp-lightbox__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
  transition: background-color var(--t-base) var(--ease-out);
}
.yp-lightbox__close:hover,
.yp-lightbox__nav:hover { background: rgba(255, 255, 255, 0.26); }
.yp-lightbox__close { top: var(--space-3); right: var(--space-3); }
.yp-lightbox__nav { top: 50%; transform: translateY(-50%); }
.yp-lightbox__nav--prev { left: var(--space-3); }
.yp-lightbox__nav--next { right: var(--space-3); }
.yp-lightbox__nav[hidden] { display: none; }
.yp-lightbox__count { position: absolute; right: 0; bottom: var(--space-4); left: 0; font-size: var(--text-xs); font-variant-numeric: tabular-nums; text-align: center; }
.yp-lightbox :focus-visible { outline-color: var(--white); }

/* Details: description on the wide column, facts on the narrow one */
.yp-details { display: grid; gap: var(--space-6); padding-block: var(--section); border-top: 1px solid var(--border); }
.yp-details__intro { display: grid; gap: var(--space-4); }
.yp-details__story { max-width: 34em; font: 500 clamp(20px, 1.1vw + 15px, 28px) / 1.35 var(--font-display); letter-spacing: -0.015em; }
.yp-details__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; gap: var(--space-6) clamp(24px, 6vw, 96px); }
.yp-details__grid > :only-child { grid-column: 1 / -1; max-width: 68ch; }
.yp-details__facts { display: grid; gap: var(--space-3); }
.yp-details__facts h3 { margin-top: var(--space-4); font: 600 var(--text-sm) / 1.4 var(--font-body); letter-spacing: 0; }
.yp-details__facts h3:first-child { margin-top: 0; }
.yp-details__facts p { color: var(--muted); }
@media (max-width: 749px) {
  .yp-details__grid { grid-template-columns: minmax(0, 1fr); }
}
.yp-pdp__apps { padding-block: var(--section); border-top: 1px solid var(--border); }

/* Pack sizes: one row per pack, the chosen one outlined in Evergreen --------------- */
.yp-packs__list { display: grid; gap: var(--space-2); }
.yp-pack { position: relative; display: block; cursor: pointer; }
.yp .yp-pack input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.yp-pack__body,
.yp-pack__price { position: relative; pointer-events: none; }
.yp-pack {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 56px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  transition: border-color var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out);
}
.yp-pack:hover { border-color: var(--deep-ink); }
.yp-pack:has(input:checked) { border-color: var(--primary); background: var(--mist); box-shadow: inset 0 0 0 1px var(--primary); }
.yp-pack:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.yp-pack:has(input:disabled) { opacity: 0.5; cursor: default; }
.yp-pack__body { display: grid; gap: 2px; }
.yp-pack__label { font: 600 15px/1.3 var(--font-body); }
.yp-pack__note { color: var(--muted); font-size: var(--text-xs); }
.yp-pack__price { font: 600 15px/1.3 var(--font-body); font-variant-numeric: tabular-nums; }

/* Test layout notice: plain and unmissable, so sample text is never mistaken for real */
.yp-testnote { margin: 0; padding: 10px var(--gutter); background: var(--deep-ink); color: var(--white); font: 500 var(--text-xs) / 1.5 var(--font-body); text-align: center; }
.yp-testnote--inline { max-width: 60ch; margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--radius-control); background: var(--bone-deep); color: var(--muted); text-align: left; }

/* Featured collections ------------------------------------------------------------- */
.yp-collections { padding-block: var(--section) 0; }
.yp-collections__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); }
.yp-collection { display: grid; gap: var(--space-4); }
.yp-collection__media { border-radius: var(--radius-card); aspect-ratio: 4 / 3; }
.yp-collection__label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.yp-collection__label h3 { font-size: var(--text-h3); }
.yp-collection__text { margin-top: var(--space-1); color: var(--muted); font-size: 15px; }
.yp-collection__media { aspect-ratio: 5 / 4; }
.yp-collection__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
  color: var(--primary);
  font: 600 var(--text-sm) / 1 var(--font-body);
}
.yp-collection__cta .yp-icon { width: 16px; height: 16px; stroke-width: 1.75; transition: transform var(--t-base) var(--ease-out); }
.yp-collection:hover .yp-collection__cta .yp-icon { transform: translateX(4px); }

/* Related products: takes no space until Shopify returns some */
.yp-recs:empty { display: none; }

/* the main product image can be swiped sideways without blocking page scroll */
.yp-gallery__stage { touch-action: pan-y; }

/* Newsletter: in the page, not in the way ------------------------------------------ */
.yp-newsletter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-6) var(--space-8);
  padding-block: var(--section);
  border-top: 1px solid var(--border);
}
.yp-newsletter__copy { display: grid; gap: var(--space-3); }
.yp-newsletter__text { max-width: 44ch; color: var(--muted); }
.yp-newsletter__form { display: grid; gap: var(--space-3); }
.yp-newsletter__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); }
.yp-newsletter__consent { color: var(--muted); font-size: var(--text-xs); }
@media (max-width: 749px) {
  .yp-newsletter { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
}
@media (max-width: 479px) {
  .yp-newsletter__row { grid-template-columns: minmax(0, 1fr); }
}

/* Tap targets: nothing a thumb has to hit is smaller than 40px --------------------- */
.yp .yp-icon-btn { width: 44px; height: 44px; }
.yp .yp-search { padding-right: 2px; }
.yp .yp-search button { width: 40px; height: 40px; }
/* the arrows grow without making the bar taller */
.yp-announce__nav { flex: none; width: 40px; height: 40px; margin-block: -10px; }
.yp-announce__messages p { text-wrap: balance; }
@media (max-width: 599px) {
  /* messages rotate by themselves, so on a phone the room goes to the words */
  .yp-announce__nav { display: none; }
}
.yp .yp-tab { display: inline-flex; align-items: center; min-height: 40px; padding-block: 0; }
.yp-drawer .yp-qty button { width: 40px; height: 40px; }
.yp-qty--large { grid-template-columns: 40px minmax(0, 1fr) 40px; }
.yp-pdp__buy { grid-template-columns: 124px minmax(0, 1fr); }
.yp-drawer__close,
.yp-popup__close { width: 40px; height: 40px; }

/* Shopify's policy pages (refunds, privacy, terms, shipping) ----------------------- */
.shopify-policy__container {
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(32px, 5vw, 64px) var(--gutter) var(--section);
}
.shopify-policy__title h1 {
  margin: 0 0 var(--space-5);
  font: 600 var(--text-h1) / var(--leading-heading) var(--font-display);
  letter-spacing: var(--tracking-heading);
  text-align: left;
  text-wrap: balance;
}
.shopify-policy__body { font-size: var(--text-body); line-height: 1.7; }
.shopify-policy__body h2,
.shopify-policy__body h3 { margin: 1.8em 0 0.5em; font: 600 var(--text-h3) / var(--leading-heading) var(--font-display); letter-spacing: var(--tracking-heading); }
.shopify-policy__body h3 { font: 600 var(--text-h4) / 1.4 var(--font-body); letter-spacing: 0; }
.shopify-policy__body p,
.shopify-policy__body ul,
.shopify-policy__body ol { margin: 0 0 1em; }
.shopify-policy__body a { color: var(--primary); text-underline-offset: 3px; }

/* 19. ESMURE, the brand layer -----------------------------------------------------
   One system with the logo. ESMURE is a shop for dogs, cats and the people who
   love them, drawn in a warm urban register: calm, sturdy, and unmistakably
   about pets.

     1. The logo's palette. Cream page, Stone bands, white cards. Graphite for
        the wordmark, text and structure; Smoked Olive for anything you press;
        Taupe as the warm note.
     2. The logo's geometry. Headings in Urbanist, a geometric sans built on
        circles like the wordmark. One word per headline gets a hand-drawn
        stroke, and section tags open with a small bar: the wordmark's shelf.
     3. Measured shapes. Corners are rounded but not round: 10 on controls, 14 on
        cards, 22 on panels. Only tags and portraits are fully round.
     4. Pets in the picture. The dog and the cat are the two ways into the shop
        and the portraits in the About panel.
     5. Small, kind motion. Cards lift, pictures ease in. Nothing slides,
        bounces, loops or follows the reader.

   It comes last so it settles everything written before it. */
.yp {
  --grid-gap: clamp(16px, 2vw, 28px);
}
/* the host theme paints the page white; match it to Ivory so no seam shows */
body:has(.yp-site-header) { background-color: #f6f8f7; }
/* the host theme draws a drop shadow under every <header>; page headings inside
   these sections are headers too, and should not carry it */
.yp header { box-shadow: none; }

/* Type -------------------------------------------------------------------------- */
.yp :where(h3) { line-height: 1.25; letter-spacing: -0.01em; }
.yp-h1 { font-size: var(--text-h2); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
.yp-marker { font-weight: inherit; }
.yp-marker::after { right: -1%; left: -2%; }

/* The tag: a short Evergreen bar and a few words, nothing around them. The bar
   is the wordmark's floating shelf at label size. Sits above headings. */
.yp-label {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 10px;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--primary);
  font: 600 var(--text-sm) / 1.4 var(--font-body);
}
.yp-label::before { content: ""; flex: none; width: 18px; height: 4px; background: currentColor; }

/* The text link: Olive, with an arrow that steps forward */
.yp-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  color: var(--primary);
  font: 600 15px/1.4 var(--font-body);
  text-decoration: underline transparent;
  text-underline-offset: 5px;
  transition: text-decoration-color var(--t-base) var(--ease-out);
}
.yp-link .yp-icon { width: 18px; height: 18px; stroke-width: 1.75; transition: transform var(--t-base) var(--ease-out); }
.yp-link:hover { text-decoration-color: currentColor; }
.yp-link:hover .yp-icon { transform: translateX(4px); }

/* On Olive and Charcoal */
.yp-dark { color: var(--on-dark); }
.yp-dark .yp-label { color: var(--on-dark); }
.yp-dark .yp-label::before { background: var(--clay); }
.yp-dark :focus-visible,
.yp-site-footer :focus-visible { outline-color: var(--on-dark); }

/* Buttons: Olive plates that lift a little, and turn Graphite, under the pointer --- */
.yp .yp-btn {
  gap: 10px;
  min-height: 50px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-control);
  font: 600 15px/1 var(--font-body);
  letter-spacing: 0;
  transition:
    background-color var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out),
    color var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out),
    transform var(--t-base) var(--ease-out),
    opacity 0.6s var(--ease-out) var(--yp-delay, 0s);
}
.yp .yp-btn--large { min-height: 56px; padding: 0 28px; font-size: var(--text-body); }
.yp .yp-btn--block { min-height: 52px; }
.yp .yp-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(24, 35, 42, 0.2); }
.yp .yp-btn:active:not(:disabled) { transform: scale(0.98); box-shadow: none; }
.yp .yp-btn--ghost { border: 1.5px solid var(--deep-ink); background: transparent; color: var(--deep-ink); }
.yp .yp-btn--ghost:hover:not(:disabled) { border-color: var(--deep-ink); background: var(--bone-deep); color: var(--deep-ink); box-shadow: none; }
.yp .yp-btn__icon { transition: transform var(--t-base) var(--ease-out); }
.yp .yp-btn:hover:not(:disabled) .yp-btn__icon { transform: translateX(3px); }
.yp-dark .yp-btn,
.yp-site-footer .yp-btn { background: var(--on-dark); color: var(--primary); }
.yp-dark .yp-btn:hover:not(:disabled),
.yp-site-footer .yp-btn:hover:not(:disabled) { background: var(--white); color: var(--primary); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18); }

/* Announcement bar ------------------------------------------------------------- */
.yp-announce { background: var(--evergreen); color: var(--on-dark); }
.yp-announce__messages p { font: 500 var(--text-xs) / 20px var(--font-body); letter-spacing: 0.01em; text-transform: none; }

/* Header: an Ivory bar on a hairline. It stays at the top of the screen and does
   not slide away or back. ------------------------------------------------------- */
/* a hairline for the edge and a soft shadow so the bar sits above the page */
.yp-site-header,
.yp-site-header.yp-is-stuck { box-shadow: 0 1px 0 var(--border), 0 8px 24px rgba(24, 35, 42, 0.1); }
.yp-site-header .yp-logo { display: flex; align-items: center; min-height: 44px; }
.yp .yp-search { border-radius: var(--radius-control); }
/* Selecting the search field draws no ring and no dark edge. The field turns
   white instead, so anyone moving through the page by keyboard can still see
   where they are. */
.yp .yp-search:focus-within { outline: none; border-color: var(--border); background: var(--white); }
.yp .yp-search input:focus,
.yp .yp-search input:focus-visible { outline: none; box-shadow: none; }
@media (min-width: 990px) {
  .yp-nav { gap: var(--space-1) var(--space-6); }
  .yp-nav .yp-nav__link { color: var(--deep-ink); }
  .yp-nav .yp-nav__link::before { height: 2px; border-radius: 0; background: var(--evergreen); }
  .yp-nav .yp-nav__link:hover,
  .yp-nav .yp-nav__link[aria-current="page"],
  .yp-nav__item.yp-is-open > .yp-nav__link { color: var(--primary); }
}
@media (max-width: 989px) {
  .yp-nav .yp-nav__link { padding-block: 10px; font: 600 28px/1.2 var(--font-display); letter-spacing: var(--tracking-heading); }
  .yp .yp-search { height: 44px; }
}

/* Section headings --------------------------------------------------------------- */
.yp-section__head { align-items: flex-end; gap: var(--space-4) var(--space-5); margin-bottom: clamp(28px, 3.4vw, 48px); }
.yp-section__title { display: grid; gap: var(--space-4); }

/* Hero: words on the left; on the right a photograph of pets at home, resting on
   a tilted block of Smoked Olive, with a small note pinned to its corner. -------- */
.yp-hero {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  gap: var(--space-7) var(--grid-gap);
  padding-block: clamp(28px, 4vw, 64px) clamp(56px, 7vw, 104px);
}
.yp-hero__copy { grid-column: 1 / span 6; gap: var(--space-5); }
.yp-hero__title { font: 600 var(--text-hero) / var(--leading-tight) var(--font-display); letter-spacing: var(--tracking-display); }
.yp-hero__lede { max-width: 34ch; color: var(--muted); font-size: var(--text-lede); line-height: 1.5; }
.yp-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-2); }
.yp-hero__figure { position: relative; grid-column: 7 / -1; margin: 0 0 0 clamp(0px, 2vw, 32px); }
.yp-hero__figure::before {
  content: "";
  position: absolute;
  inset: 9% -3.5% -5% 9%;
  border-radius: var(--radius-panel);
  background: var(--clay);
  transform: rotate(-3deg);
}
.yp-hero__media { position: relative; width: 100%; max-height: none; aspect-ratio: 1; border-radius: var(--radius-panel); }
.yp-hero__media--square > img { object-position: center; }
.yp-hero__note {
  position: absolute;
  left: -18px;
  bottom: 28px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 8px;
  border-radius: var(--radius-pill);
  background: var(--white);
  box-shadow: var(--shadow-soft);
  color: var(--deep-ink);
  font: 600 var(--text-sm) / 1.3 var(--font-body);
}
.yp-hero__note-icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--clay-soft); color: var(--primary); }
.yp-hero__note-icon .yp-icon { width: 17px; height: 17px; stroke-width: 1.75; }
/* the photograph eases into place and the note arrives a moment later; neither
   is ever hidden for long, so the page paints at once */
@keyframes yp-settle { from { transform: scale(1.05); } }
@keyframes yp-pin { from { opacity: 0; transform: translateY(10px) scale(0.96); } }
.yp-hero__media img { animation: yp-settle 1.4s var(--ease-out) both; }
.yp-hero__note { animation: yp-pin 0.6s var(--ease-out) 0.5s both; }

.yp-hero--text { padding-block: clamp(72px, 10vw, 152px); text-align: center; }
.yp-hero--text .yp-hero__copy { grid-column: 2 / -2; justify-items: center; }
.yp-hero--text .yp-hero__actions { justify-content: center; }

@media (max-width: 989px) {
  .yp-hero__copy { grid-column: 1 / span 7; }
  .yp-hero__figure { grid-column: 8 / -1; margin-left: 0; }
  .yp-hero__note { left: 10px; bottom: 10px; }
}
@media (max-width: 749px) {
  .yp-hero { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-7); }
  .yp-hero__copy,
  .yp-hero__figure,
  .yp-hero--text .yp-hero__copy { grid-column: 1 / -1; }
  .yp-hero__media,
  .yp-hero__media--square { aspect-ratio: 1; }
  .yp-hero__actions .yp-btn { flex: 1 1 140px; padding-inline: var(--space-4); white-space: nowrap; }
}
@media (max-width: 479px) {
  /* two buttons share one row on a phone, so they drop their arrows */
  .yp-hero__actions .yp-btn__icon { display: none; }
}

/* The theme's own pet portraits fill their frames; each is framed on the face. ---- */
.yp .yp-pet { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.yp .yp-pet--dog { object-position: 52% 40%; }
.yp .yp-pet--cat { object-position: 62% 24%; }

/* Who are you shopping for? One Oat panel holds the question and its answers, so
   they read as a single unit: the question on the left, and beside it one slim
   white card per pet (a round portrait, a name, a line and an arrow). The space
   above and below the panel is the same, so it sits evenly between its
   neighbours. ---------------------------------------------------------------------- */
.yp-collections { padding-block: 0; }
.yp-chooser {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  align-items: center;
  gap: var(--space-5) var(--grid-gap);
  padding: clamp(18px, 2vw, 28px) clamp(18px, 2.6vw, 36px);
  border-radius: var(--radius-panel);
  background: var(--bone-deep);
}
.yp-collections .yp-section__head { margin-bottom: 0; }
.yp-collections .yp-h1 { font-size: var(--text-h3); line-height: 1.2; }
.yp-collections__grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); }
.yp-collection {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: 100%;
  padding: 10px var(--space-5) 10px 10px;
  border-radius: var(--radius-card);
  background: var(--white);
  transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out);
}
.yp-collection--sand,
.yp-moment--sand { --tile: var(--clay-soft); }
.yp-collection--olive,
.yp-moment--olive { --tile: var(--mist); }
.yp-collection--limestone,
.yp-moment--limestone { --tile: var(--bone-deep); }
.yp-collection:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--primary), var(--shadow-soft); }
.yp-collection__media { flex: none; width: clamp(76px, 7vw, 104px); aspect-ratio: 1; border: 5px solid var(--tile, var(--bone-deep)); border-radius: 50%; }
.yp-collection__media > img { transition: transform 1.2s var(--ease-out); }
.yp-collection:hover .yp-collection__media > img { transform: scale(1.06); }
.yp-collection__label { flex: 1; min-width: 0; align-items: center; gap: var(--space-4); }
.yp-collection__label h3 { font: 600 clamp(18px, 0.5vw + 16px, 22px) / 1.2 var(--font-display); letter-spacing: var(--tracking-heading); }
.yp-collection__text { margin-top: 2px; font-size: var(--text-sm); line-height: 1.4; }
.yp-collection__cta {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--mist);
  color: var(--primary);
  transition: background-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}
.yp-collection__cta .yp-icon { width: 18px; height: 18px; }
.yp-collection:hover .yp-collection__cta { background: var(--primary); color: var(--white); }
@media (max-width: 989px) {
  .yp-chooser { grid-template-columns: minmax(0, 1fr); }
}
/* Product shelf: square pictures, clear names and prices, a small lift on hover ---- */
.yp-product__media { aspect-ratio: 1; transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out); }
.yp .yp-product:hover .yp-product__media { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.yp .yp-product__title { margin: var(--space-4) 0 2px; font: 600 var(--text-body) / 1.3 var(--font-body); }
.yp-price { font: 500 15px/1.4 var(--font-body); }
.yp .yp-product__img { transition: opacity var(--t-slow) var(--ease-out), transform 1.2s var(--ease-out); }
.yp .yp-product:hover .yp-product__img:only-of-type { transform: scale(1.03); }
.yp .yp-quick { border-radius: var(--radius-control); }
.yp-carousel__rail { gap: 12px; padding-top: 6px; }
.yp-carousel__controls[hidden] { display: none; }
@media (min-width: 990px) {
  .yp-carousel__rail { grid-auto-columns: calc((100% - 3 * var(--grid-gap)) / 4); gap: var(--grid-gap); }
}
.yp-grid { gap: var(--space-7) var(--grid-gap); }

/* Everyday moments: six soft cards, each with a small drawn symbol --------------- */
.yp-moments { padding-block: 0 var(--section); }
.yp-band > .yp-moments { padding-top: var(--section); }
.yp-moments__intro { max-width: 36ch; color: var(--muted); }
.yp-moments__list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--grid-gap); }
.yp-moment {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  height: 100%;
  padding: var(--space-5);
  border-radius: var(--radius-card);
  background: var(--tile, var(--bone-deep));
  transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out);
}
.yp-moment__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-6);
  border-radius: 50%;
  background: var(--white);
  color: var(--primary);
  transition: transform var(--t-slow) var(--ease-out);
}
.yp-moment h3 { font: 600 var(--text-h4) / 1.25 var(--font-display); letter-spacing: -0.01em; }
.yp-moment p { color: var(--muted); font-size: var(--text-sm); line-height: 1.45; }
/* the symbol tilts, as if picked up */
.yp-moment:hover .yp-moment__icon { transform: rotate(-8deg) scale(1.06); }
a.yp-moment:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
@media (max-width: 1199px) {
  .yp-moments__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .yp-moments__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .yp-moment { padding: var(--space-4); }
  .yp-moment__icon { width: 44px; height: 44px; margin-bottom: var(--space-4); }
}

/* About: an Olive panel with the two portraits, one line and a short paragraph ---- */
.yp-about { padding-block: 0 var(--section); }
.yp-manifesto {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  gap: var(--space-6) var(--grid-gap);
  padding: clamp(28px, 6vw, 88px);
  border-radius: var(--radius-panel);
  background: var(--evergreen);
}
/* The headline is sized from its own column (cqi = 1% of the column's width), so
   a long underlined phrase always fits beside the paragraph instead of running
   into it. The phrase may also wrap as one block if it still cannot fit. */
.yp-manifesto__lead { grid-column: 1 / span 7; display: grid; justify-items: start; gap: var(--space-5); min-width: 0; container-type: inline-size; }
.yp-manifesto__statement { max-width: 100%; font: 600 var(--text-display) / 1.04 var(--font-display); font-size: clamp(32px, 9.4cqi, 68px); letter-spacing: var(--tracking-display); }
.yp-manifesto__statement .yp-marker { display: inline-block; max-width: 100%; white-space: normal; }
.yp-manifesto__body { grid-column: 8 / -1; display: grid; justify-items: start; gap: var(--space-6); }
.yp-manifesto__text { display: grid; gap: 1em; color: var(--on-dark-muted); font-size: clamp(16px, 0.3vw + 14.5px, 18px); line-height: 1.6; }
.yp-manifesto__text strong { color: var(--on-dark); font-weight: 600; }
/* the closing line of the About text stands on its own */
.yp-manifesto__text p:last-child:not(:first-child) > strong:only-child { display: block; padding-top: var(--space-2); font: 600 var(--text-h3) / 1.2 var(--font-display); letter-spacing: -0.015em; }
.yp-duo { display: flex; }
.yp-duo__pet { position: relative; overflow: hidden; width: clamp(72px, 7vw, 104px); aspect-ratio: 1; border: 3px solid var(--evergreen); border-radius: 50%; background: var(--evergreen); }
.yp-duo__pet + .yp-duo__pet { margin-left: -18px; }
@media (max-width: 989px) {
  .yp-manifesto__lead,
  .yp-manifesto__body { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  /* a two-word underlined phrase is wider than a phone: let it wrap as one block */
  .yp-site-footer__statement .yp-marker { display: inline-block; white-space: normal; }
}

/* Good to know: white cards, each with its symbol on a round olive-tint seat ------ */
.yp-icon-grid { gap: 0; }
.yp-icon-grid__head { display: grid; justify-items: start; gap: var(--space-4); margin-bottom: clamp(28px, 3.4vw, 48px); }
.yp-icon-grid__items { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); counter-reset: yp-fact; }
.yp-icon-grid .yp-icon-box {
  justify-items: start;
  align-content: start;
  gap: var(--space-2);
  min-height: 0;
  padding: var(--space-5);
  border-radius: var(--radius-card);
  background: var(--white);
  text-align: left;
  counter-increment: yp-fact;
}
.yp-icon-grid .yp-icon-box .yp-icon { box-sizing: border-box; width: 52px; height: 52px; margin-bottom: var(--space-5); padding: 14px; border-radius: 50%; background: var(--mist); color: var(--primary); stroke-width: 1.5; }
.yp-icon-grid--numbered .yp-icon-box::before {
  content: counter(yp-fact);
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-5);
  border-radius: 50%;
  background: var(--clay-soft);
  color: var(--primary);
  font: 600 var(--text-h4) / 1 var(--font-display);
}
.yp-icon-grid .yp-icon-box h3 { font: 600 17px/1.3 var(--font-display); }
.yp-icon-grid .yp-icon-box p { max-width: 32ch; }
@media (max-width: 989px) {
  .yp-icon-grid__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
  .yp-icon-grid__items { grid-template-columns: minmax(0, 1fr); }
}

/* Questions: the heading sits on the left, the answers open on the right. Nothing
   here sticks: the heading scrolls away with the rest of the page. ---------------- */
.yp-faq { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6) var(--grid-gap); }
.yp-faq__head { grid-column: 1 / span 4; display: grid; justify-items: start; gap: var(--space-4); }
.yp-faq__list { grid-column: 6 / -1; }
.yp-faq summary { font: 600 17px/1.4 var(--font-body); letter-spacing: 0; }
@media (max-width: 989px) {
  .yp-faq__head,
  .yp-faq__list { grid-column: 1 / -1; }
}

/* Newsletter: an olive-tint panel with one field to type in ------------------------ */
.yp-signup { padding-block: 0 var(--section); }
.yp-band > .yp-signup { padding-top: var(--section); }
.yp-newsletter {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: var(--space-6) clamp(24px, 5vw, 72px);
  padding: clamp(28px, 5vw, 72px);
  border: 0;
  border-radius: var(--radius-panel);
  background: var(--clay-soft);
}
.yp-newsletter__copy { justify-items: start; gap: var(--space-4); }
.yp .yp-newsletter__row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px; padding: 6px; border-radius: calc(var(--radius-control) + 6px); background: var(--white); box-shadow: inset 0 0 0 1px var(--border); }
.yp .yp-newsletter__row:focus-within { box-shadow: inset 0 0 0 2px var(--primary); }
.yp .yp-newsletter .yp-input { height: 48px; padding-inline: 18px 8px; border: 0; border-radius: var(--radius-control); background: transparent; outline-offset: -2px; }
.yp .yp-newsletter .yp-btn { min-height: 48px; }
@media (max-width: 849px) {
  .yp-newsletter { grid-template-columns: minmax(0, 1fr); }
}

/* Full-width photograph ---------------------------------------------------------- */
.yp-image-band--contained { padding-block: 0 var(--section); }
.yp-image-band__media { aspect-ratio: 21 / 9; }
.yp-image-band__media--tall { aspect-ratio: 16 / 10; }
.yp-image-band--contained .yp-image-band__media { border-radius: var(--radius-panel); }
.yp-image-band__media:has(.yp-image-band__copy)::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(to top, rgba(24, 35, 42, 0.7), transparent); }
.yp-image-band__copy { position: absolute; z-index: 1; left: var(--gutter); bottom: clamp(24px, 4vw, 56px); display: grid; gap: var(--space-3); max-width: min(30ch, 80%); color: var(--white); }
.yp-image-band--contained .yp-image-band__copy { left: clamp(20px, 3vw, 48px); }
.yp-image-band__heading { font: 600 var(--text-display) / 1.04 var(--font-display); letter-spacing: var(--tracking-display); }
@media (max-width: 749px) {
  .yp-image-band__media,
  .yp-image-band__media--tall { aspect-ratio: 4 / 5; }
}

/* Footer: deep Charcoal. The line the page opened with, the links, then the wordmark
   at full width as a quiet signature. --------------------------------------------- */
.yp-site-footer { overflow: hidden; background: var(--ground-deep); color: var(--on-dark-muted); }
.yp-site-footer__lead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5) var(--space-7);
  padding-block: clamp(56px, 7vw, 104px) clamp(36px, 4vw, 56px);
}
.yp-site-footer__statement { color: var(--on-dark); font: 600 var(--text-display) / 1.04 var(--font-display); letter-spacing: var(--tracking-display); }
.yp-site-footer__grid { grid-template-columns: minmax(0, 5fr) repeat(2, minmax(0, 2fr)) minmax(0, 3fr); gap: var(--space-7) var(--grid-gap); padding-block: var(--space-7) var(--space-8); border-top: 1px solid var(--on-dark-line); }
.yp-site-footer:has(.yp-site-footer__mark) .yp-site-footer__brand .yp-logo { display: none; }
.yp-site-footer__brand { max-width: 32ch; }
.yp-site-footer h2 { color: var(--on-dark-muted); }
.yp-site-footer nav a,
.yp-site-footer .yp-rte a { color: var(--on-dark); }
.yp-site-footer nav a { text-decoration: underline transparent; text-underline-offset: 5px; transition: text-decoration-color var(--t-base) var(--ease-out); }
.yp-site-footer nav a:hover { text-decoration-color: var(--clay); }
.yp-site-footer__bottom { border-top-color: var(--on-dark-line); }
.yp-site-footer__mark { display: flow-root; max-width: var(--page); margin-inline: auto; padding: 0 var(--gutter) clamp(8px, 1.5vw, 24px); pointer-events: none; }
/* The ESMURE wordmark file is 3:1 with clear space around the letters. These
   offsets trim that space so the letters themselves run margin to margin. */
.yp-site-footer__mark span {
  display: block;
  width: 114%;
  margin: -10% 0 -10.2% -7.1%;
  background: rgba(246, 248, 247, 0.09);
  -webkit-mask: var(--yp-logo-src) center / contain no-repeat;
          mask: var(--yp-logo-src) center / contain no-repeat;
}
@media (max-width: 989px) {
  .yp-site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yp-site-footer__brand { grid-column: 1 / -1; }
  .yp-site-footer nav a { padding-block: 10px; }
}

/* Product page ------------------------------------------------------------------- */
.yp-testnote { background: var(--deep-ink); }
.yp-pdp__info > .yp-h1 { font-size: clamp(30px, 1.8vw + 20px, 46px); line-height: 1.05; }
.yp-pdp__now { font: 600 24px/1.3 var(--font-body); }
.yp-pdp__suits { color: var(--muted); font-size: var(--text-lede); line-height: 1.5; }
.yp .yp-pdp__badge { box-shadow: inset 0 0 0 1px var(--border-strong); }
.yp-sticky { border-radius: var(--radius-card); }
/* details: an Oat band, edge to edge, with the facts on a white card */
.yp-details { border-top: 0; background: var(--bone-deep); box-shadow: 0 0 0 100vmax var(--bone-deep); clip-path: inset(0 -100vmax); }
.yp-details__facts { padding: var(--space-5) var(--space-5) var(--space-6); border-radius: var(--radius-card); background: var(--white); }
.yp-details__story { font: 600 clamp(20px, 1vw + 16px, 28px) / 1.3 var(--font-display); letter-spacing: -0.015em; }

/* Drawers, dialogs ---------------------------------------------------------------- */
.yp-drawer__head h2 { font-size: var(--text-h3); }

/* Motion: things arriving on screen fade in where they stand. Nothing slides,
   rises or follows the reader while the page is scrolled. ------------------------- */
.yp-js .yp-reveal {
  transform: none;
  transition:
    opacity 0.5s var(--ease-out) var(--yp-delay, 0s),
    background-color var(--t-base) var(--ease-out),
    color var(--t-base) var(--ease-out);
}
/* a photograph band opens gently as it arrives */
.yp-js .yp-reveal.yp-reveal-media { opacity: 1; transform: none; clip-path: inset(6% round var(--radius-panel)); transition: clip-path 1s var(--ease-out); }
.yp-js .yp-reveal.yp-reveal-media.yp-is-in { clip-path: inset(0); }

@media (prefers-reduced-motion: reduce) {
  .yp-js .yp-reveal.yp-reveal-media { transition: none; transform: none; clip-path: none; }
  .yp-hero__media img,
  .yp-hero__note { animation: none; }
  .yp .yp-btn:hover:not(:disabled),
  .yp-collection:hover,
  a.yp-moment:hover,
  .yp-moment:hover .yp-moment__icon,
  .yp .yp-product:hover .yp-product__media,
  .yp .yp-product:hover .yp-product__img:only-of-type,
  .yp-collection:hover .yp-collection__media > img { transform: none; }
}

/* Product page: what helps someone decide ------------------------------------------
   Real things first (stock running low, the ways to pay, other products). The
   sample layout adds stand-ins for what a live shop earns later: a rating, a
   quote, a wall of reviews. Every stand-in carries the "Sample" tag below. */
.yp-sample-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font: 600 11px/1.5 var(--font-body);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.yp-rating { flex-wrap: wrap; min-height: 28px; color: var(--deep-ink); font-weight: 500; text-decoration: underline transparent; text-underline-offset: 4px; transition: text-decoration-color var(--t-base) var(--ease-out); }
.yp-rating:hover { text-decoration-color: currentColor; }
.yp-rating__stars::after { background: var(--star); }
.yp-rating__stars--large { width: 135px; height: 24px; -webkit-mask-size: 27px 24px; mask-size: 27px 24px; }

.yp-stock--low { color: var(--warning); }

.yp-pack__label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.yp-pack__badge { padding: 2px 9px; border-radius: var(--radius-pill); background: var(--clay-soft); color: var(--deep-ink); font: 600 11px/1.6 var(--font-body); }

/* the ways to pay, under the button */
.yp-paywith { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); }
.yp-paywith p { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--muted); font: 500 var(--text-sm) / 1.4 var(--font-body); }
.yp-paywith p .yp-icon { width: 18px; height: 18px; color: var(--primary); }
.yp-paywith .yp-pay svg { height: 22px; }

/* Proof beside the decision: the score, one customer's words set large behind an
   oversized quotation mark, then who said it and a way to read the rest. A white
   card on the ivory page, edged in sand, so it reads as a quotation and not
   as another button. */
.yp-quote {
  position: relative;
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-5) var(--space-5) var(--space-4);
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border), inset 4px 0 0 var(--clay), var(--shadow-soft);
}
.yp-quote::before {
  content: "\201C";
  position: absolute;
  top: -0.12em;
  right: var(--space-4);
  color: var(--clay-soft);
  font: 700 140px/1 var(--font-display);
  pointer-events: none;
}
.yp-quote__top { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-2); color: var(--muted); font-size: var(--text-sm); }
.yp-quote__top strong { color: var(--deep-ink); font-weight: 600; }
.yp-quote blockquote { position: relative; margin: 0; font: 600 clamp(18px, 0.5vw + 16px, 22px) / 1.35 var(--font-display); letter-spacing: -0.015em; text-wrap: pretty; }
.yp-quote figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); font-size: var(--text-sm); line-height: 1.3; }
.yp-quote__who { display: grid; }
.yp-quote__who strong { font-weight: 600; }
.yp-quote figcaption .yp-link { margin-left: auto; font-size: var(--text-sm); }
/* At a glance: up to four reasons, each with a symbol on a round seat */
.yp-benefits { padding-block: 0 var(--section); }
.yp-benefits__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--grid-gap); }
.yp-benefit { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-card); background: var(--white); box-shadow: inset 0 0 0 1px var(--border); }
.yp-benefit__icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--mist); color: var(--primary); }
.yp-benefit h3 { font: 600 17px/1.3 var(--font-display); }
.yp-benefit p { margin-top: var(--space-1); color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }

/* Reviews: the score and its breakdown on the left, the reviews themselves on the right */
.yp-reviews { padding-block: var(--section); }
.yp-reviews__head { display: grid; gap: var(--space-4); margin-bottom: clamp(28px, 3.4vw, 48px); }
.yp-reviews__notice { display: flex; flex-wrap: nowrap; align-items: baseline; gap: var(--space-2); max-width: 70ch; color: var(--muted); font-size: var(--text-sm); }
.yp-reviews__body { display: grid; grid-template-columns: minmax(240px, 3fr) minmax(0, 9fr); align-items: start; gap: var(--space-7) var(--grid-gap); }
.yp-reviews__summary { display: grid; justify-items: start; gap: var(--space-2); padding: var(--space-6); border-radius: var(--radius-card); background: var(--bone-deep); }
.yp-reviews__score { font: 600 64px/1 var(--font-display); letter-spacing: var(--tracking-display); }
.yp-reviews__count { color: var(--muted); font-size: var(--text-sm); }
.yp-reviews__bars { display: grid; gap: var(--space-2); width: 100%; margin-top: var(--space-4); color: var(--muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.yp-reviews__bars li { display: grid; grid-template-columns: 44px minmax(0, 1fr) 34px; align-items: center; gap: var(--space-2); }
.yp-reviews__bars li > :last-child { text-align: right; }
.yp-reviews__track { height: 6px; overflow: hidden; border-radius: var(--radius-pill); background: var(--white); }
.yp-reviews__track span { display: block; height: 100%; border-radius: inherit; background: var(--star); }
.yp-reviews__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: var(--grid-gap); }
.yp-review { display: grid; align-content: start; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-card); background: var(--white); box-shadow: inset 0 0 0 1px var(--border); }
.yp-review h3 { font: 600 17px/1.3 var(--font-display); }
.yp-review > p { color: var(--muted); font-size: 15px; line-height: 1.55; }
.yp-review footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-2); font-size: var(--text-sm); line-height: 1.3; }
.yp-review footer strong { display: block; font-weight: 600; }
.yp-review footer .yp-sample-tag { margin-left: auto; }
.yp-review__avatar { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--mist); color: var(--primary); font: 600 15px/1 var(--font-display); }
.yp-review__meta { color: var(--muted); font-size: var(--text-xs); }
@media (max-width: 849px) {
  .yp-reviews__body { grid-template-columns: minmax(0, 1fr); }
}
/* Landing page: what moves a visitor to shop ----------------------------------------
   One clear action in the hero with proof beside it, the practical promises in a
   slim bar straight after, then categories, bestsellers, one product in focus,
   reasons, reviews, the story. */
.yp-hero__proof { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--deep-ink); font: 500 var(--text-sm) / 1.4 var(--font-body); }
.yp-section__note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-5); color: var(--muted); font-size: var(--text-xs); }

/* the promises bar: icon and a few words each, on a hairline */
.yp-icon-grid--bar { padding-block: 0 clamp(32px, 4vw, 56px); }
.yp-icon-grid--bar .yp-icon-grid__items { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-block: 1px solid var(--border); }
.yp-icon-grid--bar .yp-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-3);
  border-radius: 0;
  background: none;
}
.yp-icon-grid--bar .yp-icon-box + .yp-icon-box { border-left: 1px solid var(--border); }
.yp-icon-grid--bar .yp-icon-box .yp-icon { width: 22px; height: 22px; margin: 0; padding: 0; border-radius: 0; background: none; }
.yp-icon-grid--bar .yp-icon-box h3 { font: 500 var(--text-sm) / 1.35 var(--font-body); }
@media (max-width: 989px) {
  .yp-icon-grid--bar .yp-icon-grid__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yp-icon-grid--bar .yp-icon-box { justify-content: flex-start; }
  .yp-icon-grid--bar .yp-icon-box:nth-child(odd) { border-left: 0; }
  .yp-icon-grid--bar .yp-icon-box:nth-child(n + 3) { border-top: 1px solid var(--border); }
}
/* three reasons read better as three columns than as four with a gap */
.yp-icon-grid--cards .yp-icon-grid__items:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 749px) {
  .yp-icon-grid--cards .yp-icon-grid__items:has(> :nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr); }
}
.yp-icon-grid--cards .yp-icon-box { box-shadow: inset 0 0 0 1px var(--border); }
.yp-band .yp-icon-grid--cards .yp-icon-box { box-shadow: none; }

/* stars on a product card */
.yp-product__rating { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; color: var(--muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.yp-product__rating .yp-rating__stars { width: 72px; height: 13px; -webkit-mask-size: 14.4px 13px; mask-size: 14.4px 13px; }

/* one product in focus */
.yp-spotlight { align-items: center; gap: var(--space-6) clamp(24px, 5vw, 80px); padding-block: var(--section); }
.yp-spotlight__media { --ph: var(--white); border-radius: var(--radius-panel); }
.yp-spotlight__media img { transition: transform 1.2s var(--ease-out); }
.yp-spotlight__media:hover img { transform: scale(1.03); }
.yp-spotlight__copy { gap: var(--space-5); }
.yp-spotlight__text { font-size: var(--text-lede); line-height: 1.55; }
.yp-spotlight__buy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); padding-top: var(--space-2); }
.yp-spotlight__price { font: 600 24px/1.2 var(--font-body); font-variant-numeric: tabular-nums; }
.yp-spotlight__price s { margin-left: var(--space-1); color: var(--muted); font-weight: 400; font-size: var(--text-body); }

/* reviews on the landing page: the score panel carries a button */
.yp-reviews__summary .yp-btn { margin-top: var(--space-4); }
.yp-reviews__head .yp-label { justify-self: start; }
@media (prefers-reduced-motion: reduce) {
  .yp-spotlight__media:hover img { transform: none; }
}
/* Page titles (Products, Search, Your bag, a page's own name) are labels for the
   page, not headlines, so they stay smaller than the logo above them. */
.yp-plp__head .yp-h1,
.yp-page__title { font-size: clamp(26px, 0.8vw + 22px, 34px); line-height: 1.15; }
/* Menu bar: the links always sit on one row. When the bar gets tight the search
   field gives up width first, then the logo and the gaps step down a size. */
@media (min-width: 990px) {
  .yp-nav { flex: 1 0 auto; flex-wrap: nowrap; }
  .yp-nav .yp-nav__link { white-space: nowrap; }
  .yp .yp-search { flex: 0 1 320px; width: auto; min-width: 150px; }
  .yp .yp-search input { min-width: 0; }
}
@media (min-width: 990px) and (max-width: 1199px) {
  .yp-nav { gap: var(--space-1) 20px; margin-left: var(--space-4); }
  .yp-site-header .yp-logo__tint,
  .yp-site-header .yp-logo__img,
  .yp-site-header .yp-wordmark { width: min(var(--yp-logo-w, 160px), 170px); }
}
/* The drawn ESMURE wordmark. Graphite in the header, like the text it sits with;
   Cream in the footer; and once more at full width, faint, as the footer's
   signature (faint by opacity, so its fill and outline stay one even tone). */
.yp-site-header .yp-logo { color: var(--deep-ink); }
.yp-site-footer__mark--drawn .yp-wordmark { width: 100%; max-width: none; color: var(--on-dark); opacity: 0.09; }
/* Reviews, with a focal point. The score stands on Graphite; the first review
   leads on Olive, set larger, with the reviewer's pet as its picture; the rest
   are quiet white cards whose initials sit on solid grounds. Stars are ochre
   everywhere except on Olive, where they are Cream. */
.yp-reviews__summary { background: var(--deep-ink); color: var(--on-dark); }
.yp-reviews__summary .yp-reviews__count,
.yp-reviews__summary .yp-reviews__bars { color: var(--on-dark-muted); }
.yp-reviews__summary .yp-rating__stars { background: rgba(246, 248, 247, 0.22); }
.yp-reviews__summary .yp-reviews__track { background: rgba(246, 248, 247, 0.18); }
.yp-reviews__summary .yp-btn { background: var(--on-dark); color: var(--deep-ink); }
.yp-reviews__summary .yp-btn:hover:not(:disabled) { background: var(--white); color: var(--deep-ink); }
.yp-review__avatar { background: var(--evergreen); color: var(--on-dark); }
.yp-review:nth-child(3n) .yp-review__avatar { background: var(--clay-deep); }
.yp-review:nth-child(3n + 1) .yp-review__avatar { background: var(--deep-ink); }
.yp-review--featured {
  grid-column: 1 / -1;
  gap: var(--space-4);
  padding: clamp(24px, 3vw, 40px);
  background: var(--evergreen);
  color: var(--on-dark);
  box-shadow: none;
}
.yp-review--featured .yp-rating__stars { width: 112px; height: 20px; background: rgba(246, 248, 247, 0.28); -webkit-mask-size: 22.4px 20px; mask-size: 22.4px 20px; }
.yp-review--featured .yp-rating__stars::after { background: var(--on-dark); }
.yp-review--featured h3 { font: 600 clamp(22px, 1.2vw + 16px, 30px) / 1.15 var(--font-display); letter-spacing: var(--tracking-heading); }
.yp-review--featured > p { max-width: 56ch; color: var(--on-dark); font-size: var(--text-lede); line-height: 1.5; }
.yp-review--featured footer { margin-top: var(--space-3); font-size: var(--text-body); }
.yp-review--featured .yp-review__meta { color: var(--on-dark-muted); font-size: var(--text-sm); }
.yp-review--featured .yp-sample-tag { border-color: rgba(246, 248, 247, 0.5); color: var(--on-dark); }
.yp-review .yp-review__avatar--pet { position: relative; overflow: hidden; width: 56px; height: 56px; border: 2px solid var(--on-dark); background: var(--mist); }
/* Drawers (bag, quick add): one smooth slide ------------------------------------------
   The panel carries its shadow all the way in and out. Opening eases out, closing
   is a little quicker, and the dimmed page behind keeps the same time. The page
   is padded by its scrollbar's width while it is locked, so it does not shift.
   Contents rise in once, after the panel has mostly arrived. */
html.yp-lock { overflow: hidden; padding-right: var(--yp-scrollbar, 0px); }
.yp-backdrop { transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.3s; }
.yp-backdrop.yp-is-open { transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s; }
.yp-drawer {
  box-shadow: var(--shadow-pop);
  will-change: transform;
  backface-visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.3s;
}
.yp-drawer.yp-is-open { box-shadow: var(--shadow-pop); transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s; }
/* one drawer handing over to another takes its place at once */
.yp-drawer.yp-is-swapping,
.yp-drawer.yp-is-swapping.yp-is-open { transition: none; }
@keyframes yp-drawer-item { from { opacity: 0; transform: translateY(8px); } }
.yp-drawer.yp-is-entering .yp-line,
.yp-drawer.yp-is-entering .yp-quickadd,
.yp-drawer.yp-is-entering .yp-field,
.yp-drawer.yp-is-entering .yp-drawer__note,
.yp-drawer.yp-is-entering .yp-drawer__foot > * {
  animation: yp-drawer-item 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(140ms + var(--i, 0) * 35ms);
}
@keyframes yp-fade { from { opacity: 0; } }
.yp-drawer__note--fade { animation: yp-fade 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .yp-backdrop,
  .yp-backdrop.yp-is-open,
  .yp-drawer,
  .yp-drawer.yp-is-open { transition: none; }
  .yp-drawer.yp-is-entering .yp-line,
  .yp-drawer.yp-is-entering .yp-quickadd,
  .yp-drawer.yp-is-entering .yp-field,
  .yp-drawer.yp-is-entering .yp-drawer__note,
  .yp-drawer.yp-is-entering .yp-drawer__foot > *,
  .yp-drawer__note--fade { animation: none; }
}
/* Hero, the words column: the stroke belongs to its word --------------------------
   The underline is as wide as the word it sits under and rests just below the
   letters instead of running through them. The rating line becomes one unit:
   two pet portraits, the stars and score, then who rated. On a phone the two
   buttons share a row and the photograph is cropped to the pets, so both are
   in view on the first screen. */
.yp-hero__title .yp-marker { width: fit-content; max-width: 100%; }
.yp-hero__title .yp-marker::after { right: -2%; bottom: -0.07em; left: -1%; height: 0.3em; }

.yp-hero__proof { flex-wrap: nowrap; gap: var(--space-3); padding-top: var(--space-2); }
.yp-hero__faces { display: flex; flex: none; }
.yp-hero__faces > span {
  position: relative;
  overflow: hidden;
  width: 44px;
  height: 44px;
  border: 2px solid var(--bone);
  border-radius: 50%;
  background: var(--mist);
  box-shadow: 0 1px 2px rgba(24, 35, 42, 0.16);
}
.yp-hero__faces > span + span { margin-left: -12px; }
.yp-hero__score { display: grid; gap: 2px; margin: 0; }
.yp-hero__stars { display: flex; align-items: center; gap: var(--space-2); color: var(--deep-ink); font: 500 var(--text-sm) / 1.3 var(--font-body); }
.yp-hero__stars strong { font-weight: 700; }
.yp-hero__owners { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-2); color: var(--muted); font: 400 var(--text-sm) / 1.4 var(--font-body); }

@media (max-width: 749px) {
  .yp-hero { row-gap: var(--space-6); }
  .yp-hero__actions { flex-wrap: nowrap; width: 100%; }
  .yp-hero__actions .yp-btn { flex: 1 1 auto; min-width: 0; padding-inline: var(--space-3); }
  .yp-hero__actions .yp-btn--ghost { flex: 0 1 auto; padding-inline: var(--space-4); }
  .yp-hero__actions .yp-btn__icon { display: none; }
  .yp-hero__media,
  .yp-hero__media--square { aspect-ratio: 4 / 3; }
  .yp-hero__media--square > img { object-position: 50% 82%; }
}

/* Reviews as a rail of cards --------------------------------------------------------
   The score panel stays on Graphite, now with a one-word verdict above the
   figure. Beside it the reviews run along one rail as equal cards: an Olive
   quotation mark, the title, the stars, the words, then who wrote them. Arrows
   and the progress line appear only when there is more to see. */
.yp-reviews__word { color: var(--on-dark); font: 600 var(--text-sm) / 1.3 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; }
/* the rail and its controls sit straight on the section's grid, so the score
   panel can match the height of the cards and not of the cards plus controls */
.yp-reviews__body--rail { align-items: stretch; row-gap: var(--space-5); }
.yp-reviews__body--rail .yp-reviews__summary { align-content: center; }
.yp-reviews__carousel { display: contents; }
.yp-reviews__carousel > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 850px) {
  .yp-reviews__body--rail .yp-reviews__summary { grid-row: 1; }
  .yp-reviews__summary ~ .yp-reviews__carousel > * { grid-column: 2; }
  .yp-reviews__summary ~ .yp-reviews__carousel > .yp-reviews__rail { grid-row: 1; }
}
.yp-reviews__rail { grid-auto-columns: calc((100% - 2 * var(--grid-gap)) / 3); gap: var(--grid-gap); padding-block: 0; }
.yp-review--card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); scroll-snap-align: start; }
.yp-review--card h3 { font: 600 19px/1.25 var(--font-display); letter-spacing: var(--tracking-heading); }
.yp-review--card > p { flex: 1 1 auto; }
.yp-review--card footer { flex-wrap: nowrap; margin-top: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.yp-review__quote {
  display: block;
  flex: none;
  width: 34px;
  height: 26px;
  background: var(--evergreen);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 26'%3E%3Cpath d='M0 26V15C0 6 5 1 14 0v5c-4 1-7 4-7 8h7v13H0zM20 26V15c0-9 5-14 14-15v5c-4 1-7 4-7 8h7v13H20z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 26'%3E%3Cpath d='M0 26V15C0 6 5 1 14 0v5c-4 1-7 4-7 8h7v13H0zM20 26V15c0-9 5-14 14-15v5c-4 1-7 4-7 8h7v13H20z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.yp-reviews__carousel .yp-carousel__controls { margin-top: 0; }
@media (max-width: 1199px) {
  .yp-reviews__rail { grid-auto-columns: calc((100% - var(--grid-gap)) / 2); }
}
@media (max-width: 849px) {
  .yp-reviews__body--rail .yp-reviews__summary { justify-items: center; text-align: center; }
  .yp-reviews__rail { grid-auto-columns: calc((100% - var(--grid-gap)) / 2.15); }
}
@media (max-width: 599px) {
  .yp-reviews__rail { grid-auto-columns: 84%; }
}

/* 20. Evergreen: the signature ------------------------------------------------------
   What makes a screen ESMURE without the logo on it:
     1. Proportion. Bone and white take about nine tenths of any view, Evergreen
        under a tenth, Clay only as a stroke or a single block.
     2. Display type set large, medium weight, tight, in sentence case, with one
        phrase carried on a Clay stroke.
     3. A short bar before every label, the shelf of the wordmark's E.
     4. A seat for the arrow: every button that leads somewhere ends in a small
        round seat, and the seat steps forward under the pointer.
     5. Round portraits of the dog and the cat wherever the brand speaks. */

/* Type: hierarchy by size and space, not weight. Display lines are medium and
   balance their own line breaks; running text avoids one-word last lines. */
.yp :where(h1, h2, h3, h4),
.yp-h1,
.yp-hero__title { text-wrap: balance; }
.yp :where(p, li, dd, figcaption) { text-wrap: pretty; }
.yp-hero__title,
.yp-h1,
.yp :where(h1, h2) { font-weight: 500; }
.yp-hero__title { letter-spacing: -0.035em; }
.yp-h1 { letter-spacing: -0.025em; }

/* Buttons: the arrow sits in a round seat */
.yp .yp-btn:has(.yp-btn__icon) { padding-right: 10px; }
.yp .yp-btn--large:has(.yp-btn__icon) { padding-right: 12px; }
.yp .yp-btn__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(246, 248, 247, 0.16);
}
.yp .yp-btn--large .yp-btn__icon { width: 34px; height: 34px; }
.yp .yp-btn__icon .yp-icon { width: 16px; height: 16px; stroke-width: 2; }
.yp-dark .yp-btn .yp-btn__icon,
.yp-site-footer .yp-btn .yp-btn__icon,
.yp-reviews__summary .yp-btn .yp-btn__icon { background: rgba(18, 69, 79, 0.1); }
.yp .yp-btn:hover:not(:disabled) { box-shadow: 0 10px 22px rgba(18, 69, 79, 0.22); }

/* Homepage rhythm. The story panel now sits mid-page, between the shelf and the
   product in focus, so the page reads light, Evergreen, band, light, Mist, and
   never puts two dark blocks together. The product in focus takes a smaller
   picture and leaves more room to the words; questions sit on Pale Mist. */
@media (min-width: 850px) {
  .yp-spotlight { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .yp-spotlight--reverse { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}
.yp-band:has(> .yp-faq) { background: var(--mist); }
/* a panel that follows a coloured band keeps its distance from it */
.shopify-section:has(> .yp-band) + .shopify-section .yp-signup { padding-top: var(--section); }
.yp-reviews__notice .yp-sample-tag { flex: none; }
/* the brand line, under the closing statement's rule in the footer */
.yp-site-footer__tagline { color: var(--on-dark); font: 500 22px/1.2 var(--font-display); letter-spacing: var(--tracking-heading); }
/* on the narrowest phones the hero's two buttons need the room the seat takes */
@media (max-width: 379px) {
  .yp .yp-hero__actions .yp-btn__icon { display: none; }
  .yp .yp-hero__actions .yp-btn:has(.yp-btn__icon) { padding-right: var(--space-3); }
}
/* an empty bag says so plainly and offers the way back to the shop */
.yp-drawer__empty { display: grid; justify-items: start; gap: var(--space-3); padding-top: var(--space-5); }
.yp-drawer__empty-title { font: 500 var(--text-h3) / 1.2 var(--font-display); letter-spacing: var(--tracking-heading); }
.yp-drawer__empty .yp-drawer__note { font-size: var(--text-sm); }
.yp-drawer__empty .yp-btn { margin-top: var(--space-3); }

/* 21. The product page ---------------------------------------------------------------
   Two columns that end together. The gallery takes the wider one; under it sit
   the reasons at a glance and one customer's words, so the column is as long as
   the purchase panel beside it and nothing needs to follow the reader down.
   The panel reads in one order: what it is, what it costs, who it is for, then
   choose, add, and the practical promises. Hairlines separate the three parts. */
.yp-pdp__aside { display: grid; align-content: start; gap: var(--space-6); min-width: 0; padding-top: var(--space-6); }
@media (min-width: 990px) {
  .yp-pdp {
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(32px, 4.6vw, 76px);
  }
  .yp-pdp__media { grid-column: 1; grid-row: 1; }
  .yp-pdp__info { grid-column: 2; grid-row: 1 / span 2; padding-left: 0; }
  .yp-pdp__aside { grid-column: 1; grid-row: 2; }
}
/* the gallery: a white stage with the same corner as the hero photograph */
.yp-gallery__stage { --ph: var(--white); border-radius: var(--radius-panel); }

/* what it is and what it costs: one tight group */
.yp-pdp__head { display: grid; justify-items: start; gap: var(--space-3); min-width: 0; }
.yp-pdp__head .yp-h1 { font-size: clamp(30px, 1.8vw + 20px, 46px); line-height: 1.05; }
.yp-pdp__price { padding-top: var(--space-1); }
.yp-pdp__now { font: 500 clamp(24px, 0.6vw + 20px, 30px) / 1.2 var(--font-display); letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.yp-pdp__suits { max-width: 44ch; }
/* the hook under the name: one plain line, a step up from body text */
.yp-pdp__tagline { max-width: 40ch; margin-top: calc(var(--space-1) * -1); color: var(--ink); font: 500 17px/1.45 var(--font-body); }

/* key points as tiles: "Title | a few words", two to a row */
.yp-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.yp-tile { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--white); }
.yp-tile .yp-checklist__tick { margin-top: 1px; }
.yp-tile b { display: block; font: 600 14px/1.3 var(--font-body); color: var(--ink); }
.yp-tile small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--muted); }

/* choose and add: set off from the description by a hairline */
.yp-pdp__form { padding-top: var(--space-5); border-top: 1px solid var(--border); }
.yp-pdp__buy .yp-btn { min-height: 52px; font-size: var(--text-body); }
.yp-qty--large { height: 52px; }

/* at a glance, under the gallery: symbols and words, no boxes */
.yp-pdp__aside .yp-benefits { padding-block: 0; }
.yp-pdp__aside .yp-benefits__list { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-5) var(--grid-gap); }
.yp-pdp__aside .yp-benefit { flex-direction: column; gap: var(--space-3); padding: var(--space-5) 0 0; border-top: 1px solid var(--border); border-radius: 0; background: none; box-shadow: none; }
.yp-pdp__aside .yp-benefit__icon { width: 44px; height: 44px; }
.yp-pdp__aside .yp-quote blockquote { max-width: 36ch; font-weight: 500; font-size: clamp(20px, 0.8vw + 16px, 26px); line-height: 1.3; }
@media (max-width: 989px) {
  .yp-pdp__aside { padding-top: var(--space-7); }
}
@media (max-width: 599px) {
  .yp-pdp__aside .yp-benefits__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .yp-pdp__aside .yp-benefit { flex-direction: row; padding-block: var(--space-4); }
  .yp-pdp__aside .yp-benefit:last-child { border-bottom: 1px solid var(--border); }
}
/* keep the Add to bag button on the first screen of a laptop */
@media (min-width: 990px) {
  .yp-pdp { padding-top: var(--space-5); }
  .yp-pdp__info { gap: 20px; }
  .yp-pdp__info .yp-checklist { gap: var(--space-2); }
  .yp-pdp__form { gap: var(--space-4); padding-top: 20px; }
  .yp-packs__list { gap: var(--space-2); }
}
/* contact details in the footer: email, phone and address, one to a line */
.yp-site-footer__contact { display: grid; justify-items: start; gap: var(--space-2); margin-top: var(--space-4); color: var(--on-dark-muted); font-style: normal; font-size: 15px; line-height: 1.5; }
.yp-site-footer__contact a { color: var(--on-dark); text-decoration: underline transparent; text-underline-offset: 5px; transition: text-decoration-color var(--t-base) var(--ease-out); overflow-wrap: anywhere; }
.yp-site-footer__contact a:hover { text-decoration-color: var(--clay); }

/* Product options: labelled buttons. The chosen one fills with Evergreen; one
   that is sold out with the other choices is struck through but still pickable.
   A colour set on the option in Shopify shows as a dot beside its name. */
.yp .yp-option__values { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.yp .yp-chip span {
  gap: var(--space-2);
  height: auto;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  background: var(--white);
  color: var(--deep-ink);
  font: 500 15px/1.2 var(--font-body);
  transition: background-color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}
.yp .yp-chip:hover input:not(:checked) + span { border-color: var(--deep-ink); background: var(--white); }
.yp .yp-chip input:checked + span { border-color: var(--primary); background: var(--primary); color: var(--primary-ink); }
.yp .yp-chip input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 3px; }
.yp .yp-chip.yp-is-off span { border-style: dashed; background: transparent; color: var(--muted); text-decoration: line-through; }
.yp .yp-chip.yp-is-off input:checked + span { border-style: solid; border-color: var(--muted); background: var(--bone-deep); color: var(--muted); }
.yp-chip--swatch span { padding-left: 12px; }
.yp-chip__dot { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--bone-deep) center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(24, 35, 42, 0.22); }

/* Add to bag says what it is doing: a turning ring while it adds, a tick once
   the bag has it. It stays Evergreen throughout, so it never looks switched off. */
@keyframes yp-turn { to { transform: rotate(360deg); } }
.yp .yp-btn.yp-is-busy,
.yp .yp-btn.yp-is-done { gap: 10px; }
.yp .yp-btn.yp-is-busy:disabled { background: var(--primary); color: var(--primary-ink); opacity: 1; cursor: progress; }
.yp .yp-btn.yp-is-busy::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(246, 248, 247, 0.35);
  border-top-color: var(--primary-ink);
  border-radius: 50%;
  animation: yp-turn 0.7s linear infinite;
}
.yp .yp-btn.yp-is-done::after {
  content: "";
  flex: none;
  width: 7px;
  height: 13px;
  margin-top: -3px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
  .yp .yp-btn.yp-is-busy::after { animation-duration: 2.4s; }
}

/* Sizes as tiles ----------------------------------------------------------------------
   Supplier sizes arrive as "1Pc/35.4"X63"/2 Seats Or Short "L" Part". They are
   shown in centimetres, smallest first, two to a row: the size large, what it
   fits underneath, its price in the corner. The chosen tile takes the Evergreen
   edge and a Mist ground, the same as every other choice on the page. */
.yp-option__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); width: 100%; }
.yp-option__guide {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary);
  font: 600 var(--text-sm) / 1.3 var(--font-body);
  text-decoration: underline transparent;
  text-underline-offset: 4px;
  cursor: pointer;
  transition: text-decoration-color var(--t-base) var(--ease-out);
}
.yp-option__guide:hover { text-decoration-color: currentColor; }
.yp-option__guide .yp-icon { width: 17px; height: 17px; stroke-width: 1.6; }
.yp-sizes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.yp .yp-size { position: relative; display: block; cursor: pointer; }
.yp .yp-size__body { width: 100%; }
.yp .yp-size input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.yp-size__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "dim price" "fit fit";
  align-items: baseline;
  gap: 2px var(--space-2);
  height: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  background: var(--white);
  transition: border-color var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.yp-size__dim { grid-area: dim; color: var(--deep-ink); font: 600 15px/1.25 var(--font-display); letter-spacing: -0.005em; font-variant-numeric: tabular-nums; }
.yp-size__price { grid-area: price; color: var(--deep-ink); font: 500 var(--text-sm) / 1.25 var(--font-body); font-variant-numeric: tabular-nums; }
.yp-size__fit { grid-area: fit; color: var(--muted); font-size: 13px; line-height: 1.35; }
.yp-size:hover .yp-size__body { border-color: var(--deep-ink); }
.yp-size input:checked + .yp-size__body { border-color: var(--primary); background: var(--mist); box-shadow: inset 0 0 0 1px var(--primary); }
.yp-size input:focus-visible + .yp-size__body { outline: 2px solid var(--primary); outline-offset: 2px; }
.yp-size.yp-is-off .yp-size__body { border-style: dashed; background: transparent; }
.yp-size.yp-is-off .yp-size__dim,
.yp-size.yp-is-off .yp-size__price { color: var(--muted); text-decoration: line-through; }

/* Complete the set ----------------------------------------------------------------------
   Matching pieces in the chosen colour, ticked on with one tap and added with the
   main one. The ticked state is the same Evergreen as the size tiles. */
.yp-addons[hidden] { display: none; }
.yp-addons legend span { margin-left: 6px; color: var(--muted); font-weight: 400; }
.yp-addons__list { display: grid; gap: var(--space-2); }
.yp .yp-addon {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  background: var(--white);
  cursor: pointer;
  transition: border-color var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out);
}
.yp .yp-addon input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.yp-addon__tick { display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--border-strong); border-radius: 6px; background: var(--white); transition: background-color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out); }
.yp-addon__tick::after { content: ""; width: 6px; height: 11px; margin-top: -3px; border: solid transparent; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.yp-addon__body { display: grid; gap: 1px; min-width: 0; }
.yp-addon__name { color: var(--deep-ink); font: 600 var(--text-sm) / 1.3 var(--font-body); }
.yp-addon__fit { color: var(--muted); font-size: 13px; line-height: 1.35; }
.yp-addon__price { color: var(--deep-ink); font: 600 var(--text-sm) / 1.3 var(--font-body); font-variant-numeric: tabular-nums; }
.yp-addon:hover { border-color: var(--deep-ink); }
.yp-addon:has(input:checked) { border-color: var(--primary); background: var(--mist); box-shadow: inset 0 0 0 1px var(--primary); }
.yp-addon:has(input:checked) .yp-addon__tick { border-color: var(--primary); background: var(--primary); }
.yp-addon:has(input:checked) .yp-addon__tick::after { border-color: var(--primary-ink); }
.yp-addon:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.yp-addon.yp-is-off { cursor: default; opacity: 0.6; }
@media (max-width: 359px) {
  .yp-sizes { grid-template-columns: minmax(0, 1fr); }
}

/* Set builder -----------------------------------------------------------------------------
   Offer cards: the chosen card is framed in Evergreen and holds the dropdowns; the
   matching pair sits in a Mist strip at the foot. Prices are the variants' own. */
.yp-set { display: grid; gap: var(--space-3); margin: var(--space-2) 0 var(--space-4); }
.yp-set__head { display: flex; align-items: center; gap: var(--space-3); margin: 0; color: var(--deep-ink); font: 700 15px / 1.2 var(--font-display); letter-spacing: 0.01em; }
.yp-set__head::before, .yp-set__head::after { content: ""; flex: 1; height: 1px; background: var(--border-strong); }
.yp-deal { border: 1px solid var(--border-strong); border-radius: var(--radius-card); background: var(--white); overflow: hidden; transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out); }
.yp-deal:hover { border-color: var(--deep-ink); }
.yp-deal.yp-is-active { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.yp .yp-deal__top { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: 16px 16px 14px; cursor: pointer; }
.yp .yp-deal__top input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.yp-deal__radio { width: 22px; height: 22px; border: 1.5px solid var(--border-strong); border-radius: 50%; background: var(--white); transition: border var(--t-base) var(--ease-out); }
.yp-is-active .yp-deal__radio { border: 7px solid var(--primary); }
.yp-deal__top:has(input:focus-visible) .yp-deal__radio { outline: 2px solid var(--primary); outline-offset: 2px; }
.yp-deal__title { display: grid; gap: 2px; color: var(--deep-ink); font: 700 19px / 1.2 var(--font-display); }
.yp-deal__title small { color: var(--muted); font: 400 13px / 1.35 var(--font-body); }
.yp-deal__title em { justify-self: start; margin-top: 2px; padding: 2px 8px; border-radius: 999px; background: var(--primary); color: var(--primary-ink); font: 600 12px / 1.4 var(--font-body); font-style: normal; }
.yp-deal__price { display: grid; justify-items: end; gap: 1px; font-variant-numeric: tabular-nums; }
.yp-deal__price b { color: var(--deep-ink); font: 700 20px / 1.1 var(--font-display); }
.yp-deal__price s { color: var(--muted); font-size: 13px; }
.yp-deal__price s[hidden] { display: none; }
.yp-deal__body { display: grid; gap: var(--space-3); padding: 0 16px 16px; }
.yp-deal__body[hidden] { display: none; }
.yp-deal__row { display: grid; gap: var(--space-2); }
.yp-deal__label { display: none; margin: 0; color: var(--deep-ink); font: 600 13px / 1.3 var(--font-body); }
.yp-set--two .yp-deal__label { display: block; }
.yp-deal__selects { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-2); }
.yp-deal__note { margin: 0; color: #9a3b2e; font-size: 13px; }
.yp-deal__note[hidden] { display: none; }
.yp .yp-select { display: grid; gap: 4px; min-width: 0; }
.yp .yp-select > span { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); color: var(--muted); font: 500 12px / 1.3 var(--font-body); letter-spacing: 0.02em; }
.yp .yp-select .yp-option__guide { padding: 0; font-size: 12px; }
.yp .yp-set select {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2318232a' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--deep-ink);
  font: 500 var(--text-sm) / 1.2 var(--font-body);
  text-overflow: ellipsis;
  appearance: none;
  cursor: pointer;
}
.yp .yp-set select:hover { border-color: var(--deep-ink); }
.yp .yp-set select:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.yp-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "check price" "selects selects";
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: 12px 16px 14px;
  border-top: 1px dashed var(--border-strong);
  background: var(--mist);
}
.yp .yp-pair__check { grid-area: check; position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: var(--space-3); min-width: 0; cursor: pointer; }
.yp .yp-pair__check input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.yp-pair__tick { display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--border-strong); border-radius: 6px; background: var(--white); color: transparent; transition: background-color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out); }
.yp-pair__tick .yp-icon { width: 14px; height: 14px; stroke-width: 2.4; }
.yp-pair.yp-is-on .yp-pair__tick { border-color: var(--primary); background: var(--primary); color: var(--primary-ink); }
.yp-pair__check:has(input:focus-visible) .yp-pair__tick { outline: 2px solid var(--primary); outline-offset: 2px; }
.yp-pair__img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--white); }
.yp-pair__name { display: grid; gap: 1px; min-width: 0; }
.yp-pair__name b { color: var(--deep-ink); font: 700 var(--text-sm) / 1.3 var(--font-body); }
.yp-pair__name small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.yp-pair__price { grid-area: price; color: var(--deep-ink); font: 700 16px / 1.2 var(--font-display); font-variant-numeric: tabular-nums; }
.yp-pair__selects { grid-area: selects; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2); }
.yp .yp-pair select { height: 40px; }
.yp-pair.yp-is-off { opacity: 0.65; }
.yp-pair.yp-is-off .yp-pair__check { cursor: default; }
@media (min-width: 990px) {
  .yp-pair__selects { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-left: calc(22px + 56px + var(--space-3) * 2); }
}
.yp-qty[hidden] { display: none; }
.yp .yp-pdp__buy:has(> .yp-qty[hidden]) { grid-template-columns: minmax(0, 1fr); }
.yp-deal__selects { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.yp-deal__fit { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.35; }
.yp-deal__fit:empty { display: none; }

/* Bundle boxes (kit cards): photo, "Best value" tag on the kit */
.yp-set--kit .yp-deal { position: relative; overflow: visible; }
.yp-set--kit .yp-deal__top { grid-template-columns: auto auto minmax(0, 1fr) auto; }
.yp-kit__pics { display: flex; }
.yp-kit__pics img { width: 52px; height: 52px; object-fit: cover; border: 1px solid var(--border); border-radius: 10px; background: var(--white); }
.yp-kit__pics--two img + img { margin-left: -22px; box-shadow: -2px 0 0 var(--white); }
.yp-deal--best { margin-top: 8px; }
.yp-kit__badge { position: absolute; top: 0; right: 16px; z-index: 1; transform: translateY(-50%); padding: 3px 10px; border-radius: 999px; background: var(--sale-red); color: var(--white); font: 700 11px / 1.4 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; }
.yp-set--kit .yp-deal__title small { font-size: 13px; }
.yp-set--kit .yp-deal__body { padding-top: 0; }
.yp-kit__second { max-width: 260px; }
@media (max-width: 420px) {
  .yp-set--kit .yp-deal__top { gap: 10px; padding: 14px 12px 12px; }
  .yp-kit__pics img { width: 44px; height: 44px; }
  .yp-set--kit .yp-deal__title { font-size: 17px; }
}

/* Guarantee strip under the buy button */
.yp-guarantees { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: var(--space-3) 0 0; padding: 12px; list-style: none; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--white); }
.yp-guarantees li { display: grid; justify-items: center; gap: 6px; text-align: center; color: var(--deep-ink); font: 600 12px / 1.3 var(--font-body); }
.yp-guarantees svg { width: 22px; height: 22px; color: var(--primary); }
@media (max-width: 420px) { .yp-guarantees { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; } }

/* Seasonal gift line: a tinted note with the order-by date */
.yp-giftline { display: flex; align-items: flex-start; gap: 10px; margin: var(--space-3) 0 0; padding: 12px 14px; border-radius: var(--radius-card); background: color-mix(in srgb, var(--primary) 9%, var(--white)); color: var(--deep-ink); font: 400 14px / 1.45 var(--font-body); }
.yp-giftline svg { flex: none; width: 22px; height: 22px; color: var(--primary); }
.yp-giftline strong { display: block; font-weight: 700; }

/* Reviews (Judge.me widget): one white panel in the shop's own type and colours.
   Judge.me sets its colours as inline variables, so these need !important. */
.yp-pdp__apps .jm-review-widget {
  --jm-review-widget-star-and-histogram-color: var(--star) !important;
  --jm-review-widget-button-color: var(--primary) !important;
  --jm-review-widget-button-text-color: var(--primary-ink) !important;
  --jm-review-widget-text-color: var(--ink) !important;
  --jm-review-widget-lighter-text-color: var(--muted) !important;
  --jm-widget-primary-color: var(--primary) !important;
  --jm-review-widget-form-button-color: var(--primary) !important;
  --jm-review-widget-form-text-color: var(--ink) !important;
  --jm-review-widget-form-field-background-color: var(--bone) !important;
  padding: clamp(20px, 4vw, 40px);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  background: var(--white);
  font-family: var(--font-body);
}
.yp-pdp__apps .jm-review-widget-minimal-header__title {
  font: 600 var(--text-h3) / 1.15 var(--font-display) !important;
  letter-spacing: var(--tracking-display);
}
.yp-pdp__apps .jm-average-rating-display p:first-of-type {
  font: 600 34px/1 var(--font-display) !important;
  letter-spacing: -0.02em;
}
.yp-pdp__apps .jm-average-rating-display p + p { color: var(--muted); }
.yp-pdp__apps .jm-button {
  min-height: 46px;
  border-radius: var(--radius-control) !important;
  font: 600 15px/1 var(--font-body) !important;
}
.yp-pdp__apps .jm-button--primary { padding-inline: 28px !important; transition: background var(--t-base) var(--ease-out); }
.yp-pdp__apps .jm-button--primary:hover { background: var(--primary-hover) !important; }
.yp-pdp__apps .jm-button--secondary { border: 1px solid var(--border-strong) !important; background: var(--white) !important; color: var(--ink) !important; }
.yp-pdp__apps .jm-review-item { padding-block: var(--space-5); border-top: 1px solid var(--border); }
.yp-pdp__apps .jm-star-rating__font-icon { color: var(--star) !important; font-size: 1.1em !important; }
.yp-pdp__apps .jm-reviewer-avatar { background: var(--mist) !important; color: var(--primary) !important; font-weight: 600; }
.yp-pdp__apps .jm-reviewer-info__name { font: 600 15px/1.3 var(--font-body) !important; color: var(--ink); text-transform: capitalize; }
.yp-pdp__apps .jm-reviewer-info__details p:not(.jm-reviewer-info__name) { font-size: 13px !important; color: var(--muted) !important; }
.yp-pdp__apps .jm-review-content__body { font: 400 16px/1.6 var(--font-body) !important; color: var(--ink); }

/* ESMURE Help: corner assistant ------------------------------------------------ */
.yp-help { position: fixed; right: 24px; bottom: 24px; z-index: 45; background: transparent; font-family: var(--font-body); color: var(--ink); }
.yp-help[hidden] { display: none; }
.yp-help .yp-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* lift clear of the product page's sticky Add to bag card */
body:has(.yp-sticky.yp-is-visible) .yp-help:not(.yp-help--open) { bottom: 140px; }
.yp-help__launcher {
  display: flex; align-items: center; gap: 10px; margin-left: auto;
  height: 56px; padding: 0 22px 0 16px; border: 0; border-radius: var(--radius-pill);
  background: var(--primary); color: var(--primary-ink); cursor: pointer;
  font: 600 15px/1 var(--font-body);
  box-shadow: 0 10px 28px rgba(18, 69, 79, 0.28);
  transition: background var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.yp-help__launcher:hover { background: var(--primary-hover); transform: translateY(-1px); }
.yp-help__launcher:focus-visible { outline: 3px solid var(--clay); outline-offset: 3px; }
.yp-help__launcher svg, .yp-help__close svg, .yp-help__input svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.yp-help__launcher .yp-help__bubble-icon { width: 26px; height: 26px; stroke: none; }
.yp-help__bubble-icon path { fill: var(--primary-ink); }
.yp-help__bubble-icon circle { fill: var(--primary); }
.yp-help__launcher { -webkit-tap-highlight-color: transparent; -webkit-appearance: none; appearance: none; outline: 0; }
.yp-help__launcher-icon, .yp-help__launcher-close { display: grid; place-items: center; }
.yp-help__launcher-close { display: none; }
.yp-help--open .yp-help__launcher { width: 56px; padding: 0; justify-content: center; }
.yp-help--open .yp-help__launcher-icon, .yp-help--open .yp-help__launcher-label { display: none; }
.yp-help--open .yp-help__launcher-close { display: grid; }

.yp-help__panel {
  position: absolute; right: 0; bottom: 72px;
  display: flex; flex-direction: column;
  width: min(380px, calc(100vw - 32px)); height: min(600px, calc(100vh - 140px));
  overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-panel);
  background: var(--bone); box-shadow: 0 24px 60px rgba(24, 35, 42, 0.18);
  /* closed: shrunk towards the button and faded out */
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(16px) scale(0.92); transform-origin: calc(100% - 28px) calc(100% + 44px);
  transition: opacity 0.18s ease-in, transform 0.22s ease-in, visibility 0s linear 0.22s;
}
.yp-help--open .yp-help__panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity 0.22s var(--ease-out), transform 0.42s cubic-bezier(0.34, 1.36, 0.5, 1), visibility 0s;
}
/* the launcher's icons turn over as they swap */
.yp-help__launcher-icon svg, .yp-help__launcher-close svg { animation: yp-help-turn 0.32s var(--ease-out); }
@keyframes yp-help-turn { from { opacity: 0; transform: rotate(-70deg) scale(0.6); } }
.yp-help__launcher:active { transform: scale(0.94); }
@media (prefers-reduced-motion: reduce) {
  .yp-help__panel, .yp-help--open .yp-help__panel { transform: none; transition: opacity 0.15s linear, visibility 0s linear 0.15s; }
  .yp-help--open .yp-help__panel { transition: opacity 0.15s linear; }
  .yp-help__launcher-icon svg, .yp-help__launcher-close svg { animation: none; }
}

.yp-help__head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 16px 18px; background: var(--primary); color: var(--primary-ink); }
.yp-help__avatar { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--primary-ink); color: var(--primary); font: 700 18px/1 var(--font-display); }
.yp-help__who { flex: 1; min-width: 0; }
.yp-help__name { font: 600 17px/1.2 var(--font-display); }
.yp-help__status { margin-top: 2px; font-size: 13px; opacity: 0.8; }
.yp-help__close { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.yp-help__close:hover { background: rgba(246, 248, 247, 0.14); }

.yp-help__log { flex: 1; overflow-y: auto; padding: 18px 16px 8px; display: grid; align-content: start; gap: 10px; overscroll-behavior: contain; }
.yp-help__msg { display: flex; }
.yp-help__msg--you { justify-content: flex-end; }
.yp-help__bubble { max-width: 86%; padding: 11px 14px; border-radius: 16px; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.yp-help__bubble { border-radius: 18px; }
.yp-help__msg--bot .yp-help__bubble { border: 1px solid var(--border); background: var(--white); box-shadow: 0 1px 2px rgba(24, 35, 42, 0.04); }
.yp-help__msg--you .yp-help__bubble { background: var(--primary); color: var(--primary-ink); }
.yp-help__bubble p + p { margin-top: 8px; }
.yp-help__bubble a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.yp-help__bubble a.yp-help__cta, .yp-help__cta {
  display: inline-flex; align-items: center; justify-content: center; margin-top: 10px; min-height: 42px; padding: 0 18px;
  border: 0; border-radius: var(--radius-control); background: var(--primary); color: var(--primary-ink);
  font: 600 14px/1 var(--font-body); text-decoration: none; cursor: pointer;
}
.yp-help__cta:hover { background: var(--primary-hover); }
.yp-help__cta:disabled { opacity: 0.6; cursor: default; }
.yp-help__bubble a.yp-help__product { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--bone); color: var(--ink); text-decoration: none; font-weight: 400; }
.yp-help__product img { flex: none; width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--white); }
.yp-help__product b { display: block; font-size: 14px; line-height: 1.3; }
.yp-help__product small { color: var(--muted); font-size: 13px; }
.yp-help__typing .yp-help__bubble { display: flex; gap: 4px; padding: 14px; }
.yp-help__typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); animation: yp-help-dot 1s infinite; }
.yp-help__typing i:nth-child(2) { animation-delay: 0.15s; }
.yp-help__typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes yp-help-dot { 50% { opacity: 0.35; transform: translateY(-2px); } }

.yp-help__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 16px 10px; }
.yp-help__chips:empty { display: none; }
.yp-help__chip { padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--white); color: var(--primary); font: 600 13px/1.25 var(--font-body); text-align: left; cursor: pointer; }
.yp-help__chip:hover { border-color: var(--primary); background: var(--mist); }

.yp-help__input { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); background: var(--white); }
.yp-help__input input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--bone); font: 400 16px/1 var(--font-body); color: var(--ink); }
.yp-help__input input:focus { outline: 2px solid var(--primary); outline-offset: 0; border-color: transparent; }
.yp-help__input button { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--primary); color: var(--primary-ink); cursor: pointer; }
.yp-help__foot { padding: 0 16px 10px; background: var(--white); color: var(--muted); font-size: 11.5px; text-align: center; }
.yp-help__foot a { color: inherit; text-decoration: underline; }

.yp-help__team { display: grid; gap: 10px; width: 100%; padding: 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--white); }
.yp-help__team label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.yp-help__team small { color: var(--muted); font-weight: 400; }
.yp-help__team input, .yp-help__team textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--bone); font: 400 16px/1.4 var(--font-body); color: var(--ink); resize: vertical; }
.yp-help__team .yp-help__cta { margin-top: 2px; }
.yp-help__small { color: var(--muted); font-size: 12.5px; }
.yp-help__small a { color: var(--primary); }

html.yp-help-lock, html.yp-help-lock body { overflow: hidden; }
@media (max-width: 599px) {
  .yp-help { right: 16px; bottom: 16px; }
  /* open on a phone: the chat takes the whole screen, over the announcement bar and header */
  .yp-help--open { inset: 0; z-index: 9000; }
  .yp-help__panel {
    inset: 0; width: 100%; height: 100%; height: 100dvh; border: 0; border-radius: 0; box-shadow: none;
    opacity: 1; transform: translateY(100%); transform-origin: center bottom;
    transition: transform 0.28s cubic-bezier(0.4, 0, 1, 1), visibility 0s linear 0.28s;
  }
  .yp-help--open .yp-help__panel { transform: none; transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s; }
  .yp-help__head { padding-top: max(16px, env(safe-area-inset-top)); }
  .yp-help__foot { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  body:has(.yp-sticky.yp-is-visible) .yp-help:not(.yp-help--open) { bottom: 120px; }
  .yp-help__launcher { width: 52px; height: 52px; padding: 0; justify-content: center; }
  .yp-help__launcher-label { display: none; }
  .yp-help--open .yp-help__launcher { display: none; }
  .yp-help__panel { position: fixed; }
}


/* Track your order (/apps/track123): the lookup form only, in the shop's look.
   Track123 ships its own CSS and inline colours, hence the !important. */
.yp-track { padding: clamp(32px, 6vw, 72px) var(--gutter, 20px) var(--section); background: var(--bone); }
.yp-track__intro { max-width: 560px; margin: 0 auto var(--space-5); text-align: center; }
.yp-track__intro .yp-label { justify-content: center; }
.yp-track__intro .yp-h1 { margin-top: var(--space-2); font-size: var(--text-h2); }
.yp-track__text { margin-top: var(--space-3); color: var(--muted); font-size: 16px; line-height: 1.55; }
.yp-track__text b { color: var(--ink); font-weight: 600; }
.yp-track__points { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: var(--space-4); padding: 0; list-style: none; font-size: 14px; color: var(--ink); }
.yp-track__points li { display: inline-flex; align-items: center; gap: 7px; }
.yp-track__points .yp-icon { width: 17px; height: 17px; color: var(--primary); }
.yp-track__points a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* the app's empty banner above the form */
.yp-track .track123_tab_form_background { display: none !important; }
.yp-track .track123_track_tab_wrapper { padding: 0 !important; background: none !important; }
.yp-track .track123_tab_form_main_wrapper { max-width: 560px !important; margin: 0 auto !important; padding: 0 !important; }

/* the card */
.yp-track .track123_tab_form_wrapper {
  position: relative; padding: clamp(20px, 4vw, 32px) clamp(18px, 4vw, 32px) 36px !important;
  border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--white) !important;
  box-shadow: 0 18px 48px rgba(24, 35, 42, 0.08);
}
.yp-track .track123_tab_form_wrapper > div[style] { padding-top: 0 !important; padding-bottom: 0 !important; }

/* Order number / Tracking number: a pill switch */
.yp-track .track123_tab { display: flex !important; gap: 4px; margin: 0 0 var(--space-5) !important; padding: 4px; border-radius: var(--radius-pill); background: var(--bone-deep); }
.yp-track .track123_tab_bar {
  flex: 1; width: auto !important; padding: 11px 10px !important; border: 0 !important; border-radius: var(--radius-pill);
  color: var(--muted) !important; opacity: 1 !important; font: 600 15px/1.2 var(--font-body) !important;
  transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.yp-track .track123_tab_bar:hover { color: var(--ink) !important; }
.yp-track .track123_tab_bar_color { background: var(--white); color: var(--primary) !important; box-shadow: 0 1px 3px rgba(24, 35, 42, 0.12); }

/* fields and button */
.yp-track .track123_two_form_wrapper { min-height: 0 !important; }
.yp-track .track123_input_container { margin-bottom: var(--space-3) !important; }
.yp-track .track123_form_input {
  width: 100% !important; height: 54px !important; padding: 0 16px !important;
  border: 1px solid var(--border-strong) !important; border-radius: var(--radius-control) !important;
  background: var(--bone) !important; color: var(--ink) !important; box-shadow: none !important;
  font: 400 16px/1.2 var(--font-body) !important;
  transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
}
.yp-track .track123_form_input::placeholder { color: var(--muted); opacity: 1; }
.yp-track .track123_form_input:focus { outline: 0 !important; border-color: var(--primary) !important; background: var(--white) !important; box-shadow: 0 0 0 3px rgba(18, 69, 79, 0.14) !important; }
.yp-track .track123_form_error { margin-top: 6px; color: var(--sale-red) !important; font-size: 13px !important; }
.yp-track .track123_form_button {
  width: 100% !important; height: 54px !important; min-height: 54px !important; margin-top: var(--space-1) !important;
  border: 0 !important; border-radius: var(--radius-control) !important;
  background: var(--primary) !important; color: var(--primary-ink) !important; box-shadow: none !important;
  font: 600 16px/1 var(--font-body) !important; letter-spacing: 0 !important; text-transform: none !important;
  cursor: pointer; transition: background var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.yp-track .track123_form_button:hover { background: var(--primary-hover) !important; }
.yp-track .track123_form_button:active { transform: scale(0.99); }
.yp-track .track123_form_button::before, .yp-track .track123_form_button::after { display: none !important; }
.yp-track .track123_tracking_line { background: var(--border) !important; }
.yp-track .track123_tracking_word { color: var(--muted) !important; font-size: 12px !important; letter-spacing: 0.08em; }
.yp-track #track123-powered-by { right: 16px !important; bottom: 12px !important; }
.yp-track .track123_input_wrapper { padding: 0 !important; }

/* Details, kept short: later parts of the description fold into rows */
.yp-details__more { margin-top: 2em; border-top: 1px solid var(--border); }
.yp-details__more .yp-acc summary { padding-block: 18px; color: var(--ink); font: 600 clamp(17px, 0.4vw + 15px, 20px) / 1.3 var(--font-display); }
.yp-details__more .yp-acc__body { padding-bottom: 20px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.yp-details__more .yp-acc__body > ul:first-child { margin-top: 0; }
/* the open cards are tighter on phones */
@media (max-width: 599px) {
  .yp-details .yp-rte ul { gap: 8px; margin-top: 14px; }
  .yp-details .yp-rte li { padding: 14px 14px 14px 48px; font-size: 15px; line-height: 1.45; }
  .yp-details .yp-rte li::before { top: 14px; left: 14px; width: 22px; height: 22px; background-size: 12px; }
  .yp-details .yp-rte h3 { margin-top: 1.6em; }
  .yp-details .yp-rte > p:first-child { font-size: 17px; }
}

/* Questions: six rows, then "Show all questions" */
#yp-delivery .yp-faq__list:not(.yp-is-expanded) > details:nth-of-type(n+7) { display: none; }
.yp-faq__more {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; margin-top: var(--space-4); padding: 14px 18px;
  border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--white);
  color: var(--primary); font: 600 15px/1.2 var(--font-body); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.yp-faq__more:hover { border-color: var(--primary); background: var(--mist); }
.yp-faq__more:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }
.yp-faq__more:active { transform: scale(0.99); }
.yp-faq__more-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--mist); transition: transform 0.35s var(--ease-out), background var(--t-base) var(--ease-out); }
.yp-faq__more:hover .yp-faq__more-icon { background: var(--white); }
.yp-faq__more-icon .yp-icon { width: 15px; height: 15px; stroke-width: 2.2; }
.yp-faq__more[aria-expanded="true"] .yp-faq__more-icon { transform: rotate(180deg); }
/* rows that were folded slide in one after another */
.yp-faq__new { animation: yp-faq-row 0.45s var(--ease-out) both; animation-delay: calc(var(--yp-row, 0) * 45ms); }
@keyframes yp-faq-row { from { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .yp-faq__new { animation: none; } .yp-faq__more-icon { transition: none; } }
.yp-faq__more[hidden] { display: none; }
@media (max-width: 599px) {
  #yp-delivery summary { padding-block: 16px; font-size: 16px; }
}

/* Bag: "Often added" one-tap extra ------------------------------------------- */
.yp-addon { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--white); }
.yp-addon:empty { display: none; }
.yp-addon__media { flex: none; width: 56px; height: 56px; overflow: hidden; border-radius: 10px; background: var(--bone); }
.yp-addon__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yp-addon__info { flex: 1; min-width: 0; }
.yp-addon__label { margin: 0; color: var(--primary); font: 600 11px/1.3 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; }
.yp-addon__title { display: block; margin-top: 2px; overflow: hidden; color: var(--ink); font: 600 14px/1.3 var(--font-body); text-decoration: none; white-space: nowrap; text-overflow: ellipsis; }
.yp-addon__price { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.yp-addon__add { flex: none; min-height: 38px; padding: 0 16px; border: 1px solid var(--primary); border-radius: var(--radius-pill); background: var(--white); color: var(--primary); font: 600 14px/1 var(--font-body); cursor: pointer; transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out); }
.yp-addon__add:hover { background: var(--primary); color: var(--primary-ink); }
.yp-addon__add.yp-is-busy { opacity: 0.6; pointer-events: none; }

/* Winter: light snowfall over the hero picture (only rendered until 31 January) */
.yp-hero__figure { position: relative; }
.yp-snow { position: absolute; inset: 0; z-index: 2; overflow: hidden; border-radius: var(--radius-panel); pointer-events: none; }
.yp-snow i { position: absolute; top: -12px; border-radius: 50%; background: #fff; opacity: 0.85; box-shadow: 0 0 6px rgba(255, 255, 255, 0.6); animation: yp-snow-fall linear infinite; }
.yp-snow i:nth-child(3n) { opacity: 0.55; filter: blur(1px); }
@keyframes yp-snow-fall {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(14px, 50vh, 0); }
  100% { transform: translate3d(-6px, 105vh, 0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .yp-snow { display: none; } }

/* Motion: things arriving on screen rise softly into place (a little more on phones) */
.yp-js .yp-reveal {
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 0.8s var(--ease-out) var(--yp-delay, 0s),
    transform 1s var(--ease-out) var(--yp-delay, 0s),
    background-color var(--t-base) var(--ease-out),
    color var(--t-base) var(--ease-out);
}
.yp-js .yp-reveal.yp-is-in { opacity: 1; transform: none; }
@media (max-width: 749px) {
  .yp-js .yp-reveal { transform: translate3d(0, 30px, 0) scale(0.98); }
  .yp-js .yp-reveal.yp-is-in { transform: none; }
}

/* Announcement bar: always one line, so the bar never changes height as messages rotate */
.yp-announce__messages p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 599px) {
  .yp-announce { padding-block: 9px; }
  .yp-announce__messages { width: 100%; }
}

/* Spotlight on phones: the whole product in a shorter frame, not a full-screen crop */
@media (max-width: 749px) {
  .yp-spotlight { gap: var(--space-5); }
  .yp-spotlight__media { aspect-ratio: 4 / 3; }
  .yp-spotlight__media img { object-fit: contain; padding: 14px; }
}

/* FAQ as cards: each question a soft white card, numbered, with a help card beside them */
.yp-faq--cards .yp-faq__head { align-content: start; }
.yp-faq__lede { max-width: 34ch; color: var(--muted); font-size: 16px; line-height: 1.6; }
.yp-faq__help { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-card); background: var(--white); box-shadow: var(--shadow-soft); }
.yp-faq__help-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--primary); color: var(--primary-ink); }
.yp-faq__help-icon .yp-icon { width: 20px; height: 20px; }
.yp-faq__help-title { font: 600 15px/1.3 var(--font-body); color: var(--deep-ink); }
.yp-faq__help-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font: 600 14px/1.4 var(--font-body); color: var(--primary); text-decoration: none; }
.yp-faq__help-link .yp-icon { width: 14px; height: 14px; transition: transform var(--t-base) var(--ease-out); }
.yp-faq__help-link:hover .yp-icon { transform: translateX(3px); }
.yp-faq--cards .yp-faq__list { display: grid; gap: 12px; align-content: start; }
.yp-faq--cards details { border: 1px solid transparent; border-radius: var(--radius-card); background: var(--white); box-shadow: 0 1px 2px rgba(24, 35, 42, 0.04); transition: box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out), border-color 0.3s var(--ease-out); }
.yp-faq--cards details:hover { box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.yp-faq--cards details[open] { border-color: color-mix(in srgb, var(--primary) 22%, transparent); box-shadow: var(--shadow-soft); transform: none; }
.yp-faq--cards summary { gap: var(--space-4); padding: 18px 20px; }
.yp-faq--cards details > :not(summary) { padding-inline: 20px 20px; margin-left: 44px; }
.yp-faq--cards details p { padding-bottom: 20px; }
.yp-faq__num { flex: none; width: 28px; font: 600 13px/1 var(--font-body); letter-spacing: 0.04em; color: var(--primary); opacity: 0.55; }
.yp-faq--cards details[open] .yp-faq__num { opacity: 1; }
.yp-faq--cards summary .yp-faq__icon { margin-left: auto; }
@media (max-width: 749px) {
  .yp-faq--cards summary { padding: 16px; gap: var(--space-3); font-size: 16px; }
  .yp-faq--cards details > :not(summary) { padding-inline: 16px; margin-left: 0; }
  .yp-faq__num { width: 22px; }
}
@media (prefers-reduced-motion: reduce) { .yp-faq--cards details, .yp-faq--cards details:hover { transition: none; transform: none; } }

/* Depth: clean but not flat. Resting shadows on cards and photos, a coral block behind
   the spotlight photo (the hero's own graphic), and faint winter snowflakes on the panels. */
:root {
  --yp-flake: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%2312454F' stroke-opacity='0.09' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M50 6v88M50 20l-9-9M50 20l9-9M50 80l-9 9M50 80l9 9M11.9 28l76.2 44M24 35l-12.3 3.3M24 35l-3.3-12.3M76 65l3.3 12.3M76 65l12.3-3.3M11.9 72l76.2-44M24 65l-3.3 12.3M24 65l-12.3-3.3M76 35l12.3 3.3M76 35l3.3-12.3'/%3E%3C/svg%3E");
  --yp-flake-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23FFFFFF' stroke-opacity='0.75' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M50 6v88M50 20l-9-9M50 20l9-9M50 80l-9 9M50 80l9 9M11.9 28l76.2 44M24 35l-12.3 3.3M24 35l-3.3-12.3M76 65l3.3 12.3M76 65l12.3-3.3M11.9 72l76.2-44M24 65l-3.3 12.3M24 65l-12.3-3.3M76 35l12.3 3.3M76 35l3.3-12.3'/%3E%3C/svg%3E");
  --yp-shadow-rest: 0 1px 2px rgba(24, 35, 42, 0.04), 0 6px 18px -8px rgba(18, 69, 79, 0.16);
  --yp-shadow-lift: 0 2px 4px rgba(24, 35, 42, 0.05), 0 22px 44px -18px rgba(18, 69, 79, 0.28);
}

/* "Ready for winter?" panel: snowflakes drift in the empty corner */
.yp-chooser {
  background:
    var(--yp-flake) no-repeat left -34px bottom -46px / 170px,
    var(--yp-flake) no-repeat 26% 16% / 46px,
    var(--yp-flake) no-repeat 8% 12% / 26px,
    var(--bone-deep);
  box-shadow: inset 0 0 0 1px rgba(18, 69, 79, 0.05);
}
.yp-collection { box-shadow: var(--yp-shadow-rest); }
.yp-collection:hover { box-shadow: inset 0 0 0 1px var(--primary), var(--yp-shadow-lift); }
.yp-collection__media { box-shadow: 0 6px 14px -6px rgba(18, 69, 79, 0.3); }

/* Product cards rest on the page instead of lying flat on it */
.yp-product__media { box-shadow: var(--yp-shadow-rest); }
.yp-product:hover .yp-product__media { box-shadow: var(--yp-shadow-lift); }

/* Spotlight photo: lifted, with a soft coral block behind it like the hero */
.yp-spotlight__media {
  position: relative;
  overflow: visible;
  box-shadow: var(--yp-shadow-lift), 18px 18px 0 0 var(--clay-soft);
}
.yp-spotlight__media > img { border-radius: inherit; }
.yp-spotlight--reverse .yp-spotlight__media { box-shadow: var(--yp-shadow-lift), -18px 18px 0 0 var(--clay-soft); }

/* Primary buttons get a little weight */
.yp .yp-btn:not(.yp-btn--ghost) { box-shadow: 0 8px 18px -10px rgba(18, 69, 79, 0.55); }
.yp .yp-btn:not(.yp-btn--ghost):hover { box-shadow: 0 12px 24px -10px rgba(18, 69, 79, 0.6); }

/* FAQ band and the sign-up panel: a few flakes for the season */
.yp-band:has(> .yp-faq) {
  background:
    var(--yp-flake) no-repeat right 4% top 40px / 120px,
    var(--yp-flake) no-repeat right 14% top 150px / 40px,
    var(--mist);
}
.yp-newsletter {
  background:
    var(--yp-flake-light) no-repeat right -30px top -30px / 150px,
    var(--yp-flake-light) no-repeat 47% 82% / 34px,
    var(--clay-soft);
  box-shadow: var(--yp-shadow-rest);
}
.yp-faq__help { box-shadow: var(--yp-shadow-lift); }

@media (max-width: 749px) {
  .yp-spotlight__media,
  .yp-spotlight--reverse .yp-spotlight__media { box-shadow: var(--yp-shadow-rest), 10px 10px 0 0 var(--clay-soft); }
  .yp-chooser { background-size: 120px, 34px, 20px, auto; background-position: right -30px bottom -40px, 88% 6%, 78% 3%, 0 0; }
}
.yp-spotlight__media:hover img { transform: none; }
/* flakes sit in the empty left corner of the FAQ band, clear of the question cards */
.yp-band:has(> .yp-faq) {
  background:
    var(--yp-flake) no-repeat left -40px bottom -50px / 190px,
    var(--yp-flake) no-repeat left 30% bottom 70px / 40px,
    var(--mist);
}
/* the block behind the spotlight photo reads as coral, not a smudge */
.yp-spotlight__media { --yp-block: color-mix(in srgb, var(--clay) 45%, var(--clay-soft)); box-shadow: var(--yp-shadow-lift), 18px 18px 0 0 var(--yp-block); }
.yp-spotlight--reverse .yp-spotlight__media { box-shadow: var(--yp-shadow-lift), -18px 18px 0 0 var(--yp-block); }
@media (max-width: 749px) {
  .yp-spotlight__media,
  .yp-spotlight--reverse .yp-spotlight__media { box-shadow: var(--yp-shadow-rest), 10px 10px 0 0 var(--yp-block); }
  .yp-band:has(> .yp-faq) { background-position: right -50px bottom -60px, right 12% bottom 40px, 0 0; background-size: 150px, 32px, auto; }
}
.yp-spotlight__media { overflow: hidden; }

/* "Bought with confidence" cards: a focal point instead of four equal pale boxes.
   The first card leads in deep teal, every card carries a big faint number,
   solid icon badges, and the cards lift on hover. */
.yp-icon-grid--cards .yp-icon-box,
.yp-band .yp-icon-grid--cards .yp-icon-box {
  position: relative;
  overflow: hidden;
  padding: var(--space-6) var(--space-5) var(--space-6);
  box-shadow: var(--yp-shadow-rest);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.yp-icon-grid--cards:not(.yp-icon-grid--numbered) .yp-icon-box::after {
  content: counter(yp-fact, decimal-leading-zero);
  position: absolute;
  top: 14px;
  right: 20px;
  font: 600 64px/1 var(--font-display);
  letter-spacing: -0.04em;
  color: var(--primary);
  opacity: 0.07;
  pointer-events: none;
}
.yp-icon-grid--cards .yp-icon-box:hover { transform: translateY(-4px); box-shadow: var(--yp-shadow-lift); }
.yp-icon-grid--cards .yp-icon-box .yp-icon {
  width: 56px;
  height: 56px;
  padding: 15px;
  background: var(--primary);
  color: var(--white);
  box-shadow: 0 10px 20px -10px rgba(18, 69, 79, 0.7);
  stroke-width: 1.75;
}
.yp-icon-grid--cards .yp-icon-box h3 { font-size: 19px; letter-spacing: -0.01em; }
.yp-icon-grid--cards .yp-icon-box h3::after {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  margin-top: 10px;
  border-radius: 2px;
  background: var(--clay);
}
/* the lead card */
.yp-icon-grid--cards .yp-icon-box:first-child {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, 0.10), transparent 60%),
    var(--primary);
  box-shadow: 0 24px 48px -22px rgba(18, 69, 79, 0.65);
}
.yp-icon-grid--cards .yp-icon-box:first-child h3 { color: var(--white); }
.yp-icon-grid--cards .yp-icon-box:first-child p { color: rgba(255, 255, 255, 0.78); }
.yp-icon-grid--cards .yp-icon-box:first-child .yp-icon { background: var(--clay); color: var(--deep-ink, #12333a); box-shadow: none; }
.yp-icon-grid--cards .yp-icon-box:first-child::after { color: var(--white); opacity: 0.12; }
@media (prefers-reduced-motion: reduce) { .yp-icon-grid--cards .yp-icon-box:hover { transform: none; } }

/* Polish pass: empty bag, four-up moments, page heads */
.yp-empty--bag { justify-items: center; max-width: 520px; margin: clamp(16px, 4vw, 48px) auto 0; padding: clamp(28px, 5vw, 48px); border-radius: var(--radius-panel); background: var(--white) var(--yp-flake) right -40px bottom -50px / 160px no-repeat; box-shadow: var(--yp-shadow-rest); text-align: center; }
.yp-empty__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--mist); color: var(--primary); }
.yp-empty__icon .yp-icon { width: 26px; height: 26px; }
.yp-empty__title { font: 600 var(--text-h3) / 1.2 var(--font-display); letter-spacing: -0.015em; color: var(--deep-ink); }
.yp-empty__text { max-width: 38ch; color: var(--muted); line-height: 1.6; }
.yp-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 4px; }
@media (min-width: 990px) {
  .yp-moments__list:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.yp-moments a.yp-moment { box-shadow: var(--yp-shadow-rest); }
.yp-moments a.yp-moment:hover { box-shadow: var(--yp-shadow-lift); }
.yp-cards .yp-card__media { box-shadow: var(--yp-shadow-rest); transition: box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out); }
.yp-cards .yp-card:hover .yp-card__media { box-shadow: var(--yp-shadow-lift); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .yp-cards .yp-card:hover .yp-card__media { transform: none; } }
/* A page that is only a title (About, FAQ): the title lines up with the sections below it */
.yp-page--head { padding-bottom: 0; }
.yp-page--head .yp-page__title { margin-bottom: 0; }
.yp-page--head + * , .shopify-section:has(.yp-page--head) + .shopify-section > .yp > section { padding-top: clamp(28px, 3vw, 44px); }
.yp-empty--bag { background-position: right -56px bottom -64px; background-size: 140px; }

/* Moments with a collection photo: picture on top, symbol badge on its edge, a shop row */
.yp-moment--photo { gap: 6px; padding: 10px 10px 22px; background: var(--white); box-shadow: var(--yp-shadow-rest); }
.yp-moment__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: calc(var(--radius-card) - 6px); background: var(--tile, var(--bone-deep)); }
.yp-moment__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); }
.yp-moment--photo .yp-moment__icon { position: relative; z-index: 1; width: 52px; height: 52px; margin: -36px 0 8px 14px; background: var(--primary); color: var(--primary-ink); box-shadow: 0 0 0 4px var(--white), 0 8px 18px -6px rgba(18, 69, 79, 0.45); }
.yp-moment--photo h3, .yp-moment--photo p, .yp-moment__shop { padding-inline: 14px; }
.yp-moment--photo h3 { font-size: 20px; }
.yp-moment--photo h3::after { content: ""; display: block; width: 28px; height: 3px; margin-top: 10px; border-radius: 2px; background: var(--clay); }
.yp-moment__shop { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; font: 600 14px/1.3 var(--font-body); color: var(--primary); }
.yp-moment__shop .yp-icon { width: 14px; height: 14px; transition: transform var(--t-base) var(--ease-out); }
a.yp-moment--photo:hover { transform: translateY(-5px); box-shadow: var(--yp-shadow-lift); }
a.yp-moment--photo:hover .yp-moment__media img { transform: scale(1.05); }
a.yp-moment--photo:hover .yp-moment__shop .yp-icon { transform: translateX(4px); }
.yp-moment--photo:hover .yp-moment__icon { transform: rotate(-8deg) scale(1.06); }
@media (max-width: 599px) {
  .yp-moment--photo { padding: 8px 8px 16px; }
  .yp-moment--photo .yp-moment__icon { width: 42px; height: 42px; margin: -28px 0 6px 10px; }
  .yp-moment--photo h3, .yp-moment--photo p, .yp-moment__shop { padding-inline: 8px; }
  .yp-moment--photo h3 { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { a.yp-moment--photo:hover, a.yp-moment--photo:hover .yp-moment__media img { transform: none; } }

/* Newsletter, deep style: teal panel, coral marker, ticks, a white form card with a gift badge */
.yp-newsletter--deep {
  position: relative; overflow: hidden; align-items: center;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--primary) 70%, #fff 8%) 0%, transparent 55%), var(--yp-flake-light) right -60px top -70px / 260px no-repeat, var(--primary);
  color: var(--on-dark, #fff); box-shadow: var(--yp-shadow-lift);
}
.yp-newsletter--deep::after { content: ""; position: absolute; left: 44%; bottom: -26px; width: 70px; height: 70px; background: var(--yp-flake-light) center / contain no-repeat; opacity: 0.5; pointer-events: none; }
.yp-newsletter--deep .yp-label { color: var(--clay); }
.yp-newsletter--deep .yp-label::before { background: var(--clay); }
.yp-newsletter--deep .yp-h1 { color: #fff; font-size: clamp(36px, 3.4vw + 12px, 60px); }
.yp-newsletter--deep .yp-newsletter__text { color: rgba(255, 255, 255, 0.78); font-size: 17px; }
.yp-newsletter__points { display: grid; gap: 10px; margin-top: 6px; padding: 0; list-style: none; }
.yp-newsletter__points li { display: flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, 0.92); font-size: 15px; }
.yp-newsletter__tick { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--clay); color: #fff; }
.yp-newsletter__tick .yp-icon { width: 13px; height: 13px; }
.yp-newsletter--deep .yp-newsletter__form { position: relative; z-index: 1; padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-panel); background: var(--white); color: var(--deep-ink); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.45); transform: rotate(-1.2deg); transition: transform 0.5s var(--ease-out); }
.yp-newsletter--deep .yp-newsletter__form:hover, .yp-newsletter--deep .yp-newsletter__form:focus-within { transform: none; }
.yp-newsletter__badge { position: absolute; top: -22px; right: 26px; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--clay); color: #fff; box-shadow: 0 0 0 5px var(--white), 0 10px 22px -8px rgba(0, 0, 0, 0.4); }
.yp-newsletter__badge .yp-icon { width: 24px; height: 24px; }
.yp-newsletter__form-title { font: 600 var(--text-h3) / 1.2 var(--font-display); letter-spacing: -0.015em; }
.yp-newsletter--deep .yp-newsletter__row { background: var(--bone, #f5f7f6); }
.yp-newsletter--deep .yp-newsletter__consent { color: var(--muted); }
@media (max-width: 749px) {
  .yp-newsletter--deep { background-size: auto, 170px, auto; }
  .yp-newsletter--deep .yp-newsletter__form { transform: none; margin-top: 12px; }
  .yp-newsletter--deep::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .yp-newsletter--deep .yp-newsletter__form { transform: none; transition: none; } }

/* Details revamp: headline-led copy on the left, photos + specs on the right */
.yp-details { gap: var(--space-5); }
.yp-details__label.yp-label { font-size: 14px; }
.yp-details__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6) clamp(32px, 6vw, 96px); }
.yp-details__side { display: grid; gap: var(--space-5); align-content: start; }
.yp-details__side:empty { display: none; }
.yp-details__grid:has(> .yp-details__side:empty) > .yp-rte { grid-column: 1 / -1; max-width: 68ch; }
@media (min-width: 990px) { .yp-details__side { position: sticky; top: 110px; } }
.yp-details .yp-rte > p:first-child { font-size: clamp(18px, 0.6vw + 15px, 21px); }
.yp-details .yp-rte > p:first-child strong { margin-bottom: 14px; font-size: clamp(32px, 2.4vw + 14px, 52px); line-height: 1.05; letter-spacing: -0.025em; }
.yp-details .yp-rte > p:first-child strong::after { content: ""; display: block; width: 56px; height: 4px; margin-top: 18px; border-radius: 2px; background: var(--clay); }

/* feature cards: solid badge, shadow, lift */
.yp-details .yp-rte ul:not(.yp-notes) { counter-reset: yp-feat; gap: 14px; }
.yp-details .yp-rte ul:not(.yp-notes) li { counter-increment: yp-feat; padding: 22px 22px 22px 76px; border: 0; box-shadow: var(--yp-shadow-rest); transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); }
.yp-details .yp-rte ul:not(.yp-notes) li:hover { transform: translateY(-3px); box-shadow: var(--yp-shadow-lift); }
.yp-details .yp-rte ul:not(.yp-notes) li::before { content: counter(yp-feat, decimal-leading-zero); top: 20px; left: 20px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--primary); background-image: none; color: #fff; font: 600 14px/1 var(--font-body); }
.yp-details .yp-rte ul:not(.yp-notes) li strong { font: 600 17px/1.3 var(--font-display); margin-bottom: 6px; }

/* good to know: an open card with a coral edge */
.yp-details__more { border-top: 0; }
.yp-details__more .yp-acc { margin-top: 14px; padding: 4px 22px 6px; border: 0; border-left: 4px solid var(--clay); border-radius: var(--radius-card); background: var(--white); box-shadow: var(--yp-shadow-rest); }
.yp-details__more .yp-acc summary { border: 0; }
.yp-details .yp-rte .yp-details__more ul.yp-notes { grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; }
.yp-details .yp-rte .yp-details__more ul.yp-notes li { padding: 10px 0 10px 32px; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: none; }
.yp-details .yp-rte .yp-details__more ul.yp-notes li:first-child { border-top: 0; }
.yp-details .yp-rte .yp-details__more ul.yp-notes li::before { top: 12px; left: 0; }

/* the photo pair */
.yp-details__visual { position: relative; margin: 0 0 28px; }
.yp-details__photo { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-panel); background: var(--white); box-shadow: var(--yp-shadow-lift); }
.yp-details__photo img { width: 100%; height: 100%; object-fit: cover; }
.yp-details__inset { position: absolute; left: -28px; bottom: -28px; width: 38%; aspect-ratio: 1; overflow: hidden; border: 6px solid var(--white); border-radius: 22px; background: var(--white); box-shadow: 0 18px 36px -14px rgba(18, 69, 79, 0.45); transform: rotate(-4deg); }
.yp-details__inset img { width: 100%; height: 100%; object-fit: cover; }
.yp-details__chip { position: absolute; top: 18px; right: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: var(--white); color: var(--primary); font: 600 13px/1 var(--font-body); box-shadow: var(--yp-shadow-rest); }
.yp-details__chip .yp-icon { width: 16px; height: 16px; }
@media (max-width: 989px) {
  .yp-details__grid { grid-template-columns: minmax(0, 1fr); }
  .yp-details__visual { display: none; }
}
@media (prefers-reduced-motion: reduce) { .yp-details .yp-rte ul:not(.yp-notes) li:hover { transform: none; } }

/* Product top: "Why it's handy" fills the space under the gallery, as a 2 x 2 of cards */
.yp-pdp__aside .yp-glance { margin-top: var(--space-5); padding: 22px; border-radius: var(--radius-panel); background: var(--bone-deep); }
.yp-glance__title { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font: 600 19px/1.3 var(--font-display); color: var(--deep-ink); }
.yp-glance__title::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--clay); }
.yp-pdp__aside .yp-glance .yp-benefits__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.yp-pdp__aside .yp-glance .yp-benefit { flex-direction: row; gap: 14px; padding: 18px; border: 0; border-radius: var(--radius-card); background: var(--white); box-shadow: var(--yp-shadow-rest); }
.yp-pdp__aside .yp-glance .yp-benefit__icon { width: 36px; height: 36px; background: var(--primary); color: #fff; }
.yp-pdp__aside .yp-glance .yp-benefit__icon .yp-icon { width: 16px; height: 16px; }
.yp-pdp__aside .yp-glance .yp-benefit h3 { font-size: 16px; }
.yp-pdp__aside .yp-glance .yp-benefit p { font-size: 14px; }
.yp-details--lifted .yp-rte > h3:first-of-type,
.yp-details--lifted .yp-rte > h3:first-of-type + ul { display: none; }
@media (max-width: 989px) {
  .yp-pdp__aside .yp-glance { padding: 16px; }
}
@media (max-width: 599px) {
  .yp-pdp__aside .yp-glance .yp-benefits__list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
/* every product's "at a glance" points under the gallery get the same card treatment */
.yp-pdp__aside .yp-benefits { margin-top: var(--space-5); padding: 22px; border-radius: var(--radius-panel); background: var(--bone-deep); }
.yp-pdp__aside .yp-benefits:not(:has(.yp-glance__title))::before { content: "Why it's handy"; display: flex; align-items: center; margin-bottom: 14px; padding-left: 32px; font: 600 19px/1.3 var(--font-display); color: var(--deep-ink); background: linear-gradient(var(--clay), var(--clay)) left center / 22px 3px no-repeat; }
.yp-pdp__aside .yp-benefits .yp-benefits__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.yp-pdp__aside .yp-benefits .yp-benefit { flex-direction: row; gap: 14px; padding: 18px; border: 0; border-radius: var(--radius-card); background: var(--white); box-shadow: var(--yp-shadow-rest); }
.yp-pdp__aside .yp-benefits .yp-benefit__icon { width: 36px; height: 36px; background: var(--primary); color: #fff; }
.yp-pdp__aside .yp-benefits .yp-benefit__icon .yp-icon { width: 16px; height: 16px; }
.yp-pdp__aside .yp-benefits .yp-benefit h3 { font-size: 16px; }
.yp-pdp__aside .yp-benefits .yp-benefit p { font-size: 14px; }
@media (max-width: 599px) {
  .yp-pdp__aside .yp-benefits { padding: 16px; }
  .yp-pdp__aside .yp-benefits .yp-benefits__list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
.yp-pdp__aside .yp-benefits .yp-benefit:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* product page questions: the same card style as the homepage FAQ, numbered by counter */
.yp-faq--count .yp-faq__list { counter-reset: yp-q; }
.yp-faq--count .yp-faq__list details { counter-increment: yp-q; }
.yp-faq--count summary::before { content: counter(yp-q, decimal-leading-zero); flex: none; width: 28px; font: 600 13px/1 var(--font-body); letter-spacing: 0.04em; color: var(--primary); opacity: 0.55; }
.yp-faq--count details[open] summary::before { opacity: 1; }
.yp-faq--cards .yp-faq__more { border: 0; border-radius: var(--radius-card); background: var(--white); box-shadow: var(--yp-shadow-rest); }
@media (max-width: 749px) { .yp-faq--count summary::before { width: 22px; } }

/* Contact page: teal panel with the ways to reach us, form in a white card */
.yp-contact--split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 3vw, 40px); align-items: stretch; padding-top: clamp(24px, 3vw, 40px); }
.yp-contact__panel { position: relative; overflow: hidden; display: grid; align-content: start; gap: 18px; padding: clamp(28px, 4vw, 48px); border-radius: var(--radius-panel); background: radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--primary) 70%, #fff 8%) 0%, transparent 60%), var(--yp-flake-light) right -70px bottom -80px / 260px no-repeat, var(--primary); color: #fff; box-shadow: var(--yp-shadow-lift); }
.yp-contact__panel .yp-label { color: var(--clay); }
.yp-contact__panel .yp-label::before { background: var(--clay); }
.yp-contact__title { color: #fff; font: 600 clamp(32px, 2.4vw + 14px, 50px) / 1.08 var(--font-display); letter-spacing: -0.025em; }
.yp-contact__intro { max-width: 38ch; color: rgba(255, 255, 255, 0.8); font-size: 16px; line-height: 1.6; }
.yp-contact__ways { display: grid; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.yp-contact__ways a { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius-card); background: rgba(255, 255, 255, 0.08); color: #fff; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); transition: background 0.25s var(--ease-out), transform 0.25s var(--ease-out); }
.yp-contact__ways a:hover { background: rgba(255, 255, 255, 0.14); transform: translateX(4px); }
.yp-contact__ways strong { display: block; font: 600 16px/1.3 var(--font-display); }
.yp-contact__ways small { display: block; color: rgba(255, 255, 255, 0.72); font-size: 14px; }
.yp-contact__icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--clay); color: #fff; }
.yp-contact__icon .yp-icon { width: 19px; height: 19px; }
.yp-contact__quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.yp-contact__quick p { width: 100%; margin-bottom: 2px; color: rgba(255, 255, 255, 0.6); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.yp-contact__quick a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; background: #fff; color: var(--primary); font: 600 13px/1 var(--font-body); text-decoration: none; }
.yp-contact__quick a .yp-icon { width: 15px; height: 15px; }
.yp-contact__card { display: grid; align-content: start; gap: 6px; padding: clamp(24px, 3.5vw, 44px); border-radius: var(--radius-panel); background: var(--white); box-shadow: var(--yp-shadow-rest); }
.yp-contact--split h2.yp-h3 { margin-bottom: 0; }
.yp-contact__form-text { margin-bottom: 14px; color: var(--muted); }
.yp-contact__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.yp-contact__card .yp-input { background: var(--bone, #f5f7f6); }
.yp-contact__card .yp-btn { margin-top: 6px; }
@media (max-width: 899px) {
  .yp-contact--split { grid-template-columns: minmax(0, 1fr); }
  .yp-contact__row { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .yp-contact__ways a:hover { transform: none; } }
.yp-contact__panel { background-position: 0 0, right -80px top -90px, 0 0; }
.yp-contact__card .yp-input::placeholder { color: var(--muted); opacity: 0.6; }

/* Guides list: header, a wide feature guide, then cards with topic + reading time */
.yp-guides__head { display: grid; gap: 14px; max-width: 760px; margin: 8px 0 clamp(28px, 4vw, 48px); }
.yp-guides__title { font: 600 clamp(36px, 3vw + 14px, 60px) / 1.05 var(--font-display); letter-spacing: -0.03em; color: var(--deep-ink); }
.yp-guides__intro { max-width: 52ch; color: var(--muted); font-size: 17px; line-height: 1.6; }
.yp-guides__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin: 0; padding: 0; list-style: none; }
.yp-guide__link { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: var(--radius-panel); background: var(--white); color: inherit; text-decoration: none; box-shadow: var(--yp-shadow-rest); transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out); }
.yp-guide__link:hover { transform: translateY(-4px); box-shadow: var(--yp-shadow-lift); }
.yp-guide__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bone-deep); }
.yp-guide__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); }
.yp-guide__link:hover .yp-guide__media img { transform: scale(1.04); }
.yp-guide__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 20px 22px 22px; }
.yp-guide__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--muted); font-size: 13px; }
.yp-guide__meta > span:not(.yp-guide-topic) + span::before { content: "·"; margin-right: 12px; }
.yp-guide-topic { padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--clay) 18%, #fff); color: color-mix(in srgb, var(--clay) 60%, #000); font-weight: 600; font-size: 12px; letter-spacing: 0.02em; }
.yp-guide__title { font: 600 clamp(19px, 0.5vw + 16px, 22px) / 1.25 var(--font-display); letter-spacing: -0.015em; color: var(--deep-ink); }
.yp-guide__excerpt { color: var(--muted); font-size: 15px; line-height: 1.55; }
.yp-guide__more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; color: var(--primary); font: 600 14px/1.3 var(--font-body); text-decoration: none; }
.yp-guide__more .yp-icon { width: 14px; height: 14px; transition: transform var(--t-base) var(--ease-out); }
.yp-guide__link:hover .yp-guide__more .yp-icon { transform: translateX(4px); }
.yp-guide--feature { grid-column: 1 / -1; }
.yp-guide--feature .yp-guide__link { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.yp-guide--feature .yp-guide__media { aspect-ratio: auto; min-height: 340px; }
.yp-guide--feature .yp-guide__body { justify-content: center; gap: 14px; padding: clamp(24px, 4vw, 52px); }
.yp-guide--feature .yp-guide__title { font-size: clamp(26px, 1.6vw + 16px, 38px); line-height: 1.12; }
.yp-guide--feature .yp-guide__more { margin-top: 8px; }
@media (max-width: 989px) {
  .yp-guides__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yp-guide--feature .yp-guide__link { grid-template-columns: minmax(0, 1fr); }
  .yp-guide--feature .yp-guide__media { aspect-ratio: 16 / 10; min-height: 0; }
}
@media (max-width: 599px) { .yp-guides__list { grid-template-columns: minmax(0, 1fr); } }

/* A guide: meta row, bigger title, readable body with branded headings, shop card, more guides */
.yp-guide-page__meta { margin: 6px 0 14px; }
.yp-guide-page__title { margin-bottom: 26px; font: 600 clamp(32px, 2.6vw + 14px, 54px) / 1.06 var(--font-display); letter-spacing: -0.03em; color: var(--deep-ink); }
.yp-guide-page .yp-article__media { overflow: hidden; border-radius: var(--radius-panel); box-shadow: var(--yp-shadow-lift); }
.yp-guide-page__body { font-size: 17px; line-height: 1.75; }
.yp-guide-page__body > p:first-child { color: var(--ink); font-size: 20px; line-height: 1.6; }
.yp-guide-page__body h2 { margin-top: 2.2em; padding-top: 18px; font: 600 clamp(24px, 1vw + 18px, 30px) / 1.2 var(--font-display); letter-spacing: -0.02em; color: var(--deep-ink); background: linear-gradient(var(--clay), var(--clay)) left top / 40px 3px no-repeat; }
.yp-guide-page__body h3 { margin-top: 1.6em; font: 600 19px/1.3 var(--font-display); color: var(--primary); }
.yp-guide-page__body ul { padding-left: 0; list-style: none; }
.yp-guide-page__body ul li { position: relative; padding-left: 30px; }
.yp-guide-page__body ul li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 16px; height: 16px; border-radius: 50%; background: var(--primary) 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat; }
.yp-guide-page__body p > strong:first-child { color: var(--deep-ink); }
.yp-guide-page__body a { color: var(--primary); text-decoration-color: var(--clay); text-underline-offset: 3px; }
.yp-guide-page__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 48px; padding: clamp(22px, 3vw, 32px); border-radius: var(--radius-panel); background: var(--yp-flake-light) right -40px top -50px / 170px no-repeat, var(--primary); color: rgba(255, 255, 255, 0.8); box-shadow: var(--yp-shadow-lift); }
.yp-guide-page__cta-title { margin-bottom: 4px; color: #fff; font: 600 22px/1.2 var(--font-display); }
.yp-guide-page__cta .yp-btn { background: #fff; color: var(--primary); }
.yp-guides--more { padding-bottom: var(--section); }
.yp-guides__more-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 22px; padding-top: 12px; }
.yp-guides--more .yp-guide__media { aspect-ratio: 16 / 9; }
@media (prefers-reduced-motion: reduce) { .yp-guide__link:hover, .yp-guide__link:hover .yp-guide__media img { transform: none; } }
@media (min-width: 990px) {
  .yp-guide--feature .yp-guide__media { aspect-ratio: 16 / 10; min-height: 0; }
  .yp-guides__list:has(> .yp-guide--feature):has(> li:nth-child(5):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Shopify's cookie banner on phones: keep every choice, take up far less of the first screen */
@media (max-width: 600px) {
  #shopify-pc__banner__dialog { padding: 12px 16px !important; }
  #shopify-pc__banner__body-title { font-size: 14px !important; margin: 0 0 4px !important; }
  #shopify-pc__banner__wrapper { padding: 0 !important; }
  #shopify-pc__banner__body { font-size: 12px !important; line-height: 1.4 !important; margin: 0 !important; }
  #shopify-pc__banner__btns { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 8px !important; padding: 0 !important; }
  #shopify-pc__banner__btn-accept,
  #shopify-pc__banner__btn-decline { flex: 1 1 40% !important; min-height: 40px !important; margin: 0 !important; padding: 6px 8px !important; font-size: 14px !important; }
  #shopify-pc__banner__btn-manage-prefs { flex: 1 1 100% !important; margin: 0 !important; padding: 2px !important; font-size: 12px !important; }
}

/* Store CRO, 2026-11-02 ---------------------------------------------------------- */
/* Four products don't need a search bar taking up the phone screen; the footer still links to search */
@media (max-width: 989px) {
  .yp .yp-search:not(.yp-search--page) { display: none; }
}
/* Sofa cover: one cover first, the extras open on request */
.yp-set:not(.yp-set--open) [data-yp-pair],
.yp-set:not(.yp-set--open) [data-yp-deal="2"] { display: none; }
.yp .yp-set__more { width: 100%; min-height: 44px; margin-top: var(--space-2); border: 1px dashed var(--border-strong); border-radius: var(--radius-control); background: transparent; color: var(--deep-ink); font-size: var(--text-sm); cursor: pointer; }
.yp .yp-set__more:hover { border-color: var(--primary); color: var(--primary); }
.yp .yp-set__more[hidden] { display: none; }

/* ESMURE beauty direction: Instrument Serif has one weight, so never fake a bold */
.yp { font-synthesis: none; }
const fs=require('fs');const root='C:/Users/ma1rk/esmure-beauty/';const v2=fs.readFileSync(process.argv[1],'utf8');
let c=fs.readFileSync(root+'assets/yp-store.css','utf8');const m='/* ==========================================================================\n   ESMURE v2';const i=c.indexOf(m);if(i>=0)c=c.slice(0,i).trimEnd()+'\n';fs.writeFileSync(root+'assets/yp-store.css',c+v2);
const rd=f=>JSON.parse(fs.readFileSync(root+f,'utf8').replace(/^\s*\/\*[\s\S]*?\*\/\s*/,''));
const h=rd('templates/index.json');const s=h.sections;
s.marquee={type:'yp-marquee',settings:{label:'Shopping with ESMURE'},blocks:{a:{type:'item',settings:{text:'Free UK delivery'}},b:{type:'item',settings:{text:'14-day returns'}},c:{type:'item',settings:{text:'Secure checkout'}},d:{type:'item',settings:{text:'At-home beauty'}},e:{type:'item',settings:{text:'Described plainly'}},f:{type:'item',settings:{text:'Help when you need it'}}},block_order:['a','b','c','d','e','f']};
s.trust.disabled=true;
h.order=['hero','marquee','focus','collections','essentials','care','philosophy','faq','newsletter','trust','why','reviews','winter','sealer'];
fs.writeFileSync(root+'templates/index.json',JSON.stringify(h,null,2)+'\n');
const g=rd('sections/header-group.json');const y=g.sections.yp_header;y.block_order=y.block_order.filter(b=>b!=='nav_contact');delete y.blocks.nav_contact;y.blocks.nav_track.settings.label='Track order';fs.writeFileSync(root+'sections/header-group.json',JSON.stringify(g,null,2)+'\n');