/* ==========================================================
   misucreates — design tokens
   Look & feel modelled on chamberlaincoffee.eu: navy + powder
   blue, soft retro serif headings, big rounded cards.
   ========================================================== */
:root {
  --navy: #003865;          /* logo navy */
  --navy-deep: #003865;     /* body text: same navy as the logo */
  --sky-bg: #e9f2f9;        /* page background: light blue */
  --sky: #dae9f4;           /* light blue, the logo light blue */
  --butter: #dae9f4;        /* palette is white / dark blue / light blue only */
  --blush: #dae9f4;
  --sage: #dae9f4;
  --white: #ffffff;
  --muted: #5d6680;
  --line: #d3dbe3;
  --star: #dae9f4;

  --font-display: "Fraunces", "Recoleta", Georgia, serif;
  --font-body: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-pill: 999px;
  --gutter: 16px;
  --maxw: 1240px;
  --header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--sky-bg);
  color: var(--navy-deep);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }

h1, h2, h3, .h1 {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--navy-deep);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 8px;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--star); outline-offset: 3px; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: 820px; }
.center { display: flex; justify-content: center; margin-top: 36px; }
.eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--navy); margin: 0 0 12px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 28px;
  border: 0; border-radius: 14px;
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100;
  font-weight: 700; font-size: 16px; letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: #00294a; }
.btn--white { background: #fff; color: var(--navy-deep); min-height: 56px; padding: 0 40px; }
.btn--white:hover { box-shadow: 0 6px 20px rgba(0,0,0,.15); }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; border: 0; background: none; cursor: pointer; border-radius: 12px;
}
.icon-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:hover { background: rgba(0,56,101,.06); }

/* ---------- Announcement ---------- */
.announce {
  position: relative; height: 40px; overflow: hidden;
  background: var(--navy-deep); color: #fff; text-align: center; font-size: 14px;
}
.announce__msg {
  position: absolute; inset: 0; margin: 0; padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease;
}
.announce__msg.is-active { opacity: 1; transform: none; }

/* ---------- Header ---------- */
.header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid transparent; transition: border-color .2s; }
.header.is-scrolled { border-bottom-color: var(--line); }
.header__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  height: var(--header-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.header__menu { justify-self: start; }
.header__nav { display: none; gap: 28px; }
.header__nav a, .header__link {
  font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 600;
  text-decoration: none; font-size: 16px;
}
.header__nav a:hover, .header__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.header__logo { grid-column: 2; }
.header__logo img { height: 52px; width: auto; }
.header__actions { justify-self: end; display: flex; align-items: center; gap: 12px; }
.header__link { display: none; }
.cart-btn { position: relative; }
.cart-btn__count {
  position: absolute; top: 4px; right: 2px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--navy); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px;
}
.cart-btn.bump .cart-btn__count { animation: bump .35s ease; }
@keyframes bump { 50% { transform: scale(1.35); } }

@media (min-width: 900px) {
  .header__menu { display: none; }
  .header__nav { display: flex; }
  .header__link { display: inline; }
  .header__logo img { height: 58px; }
}

/* ---------- Drawer ---------- */
.drawer { position: fixed; inset: 0; z-index: 80; background: rgba(15,35,65,.4); }
.drawer[hidden] { display: none; }
.drawer__panel {
  width: min(86vw, 360px); height: 100%; background: #fff; padding: 20px 24px;
  animation: slideIn .25s ease;
}
@keyframes slideIn { from { transform: translateX(-100%); } }
.drawer__close { margin-left: -10px; margin-bottom: 12px; }
.drawer nav { display: flex; flex-direction: column; }
.drawer nav a {
  padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none;
  font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 700; font-size: 20px;
}

/* ---------- Hero ---------- */
.hero { position: relative; height: clamp(520px, 78vh, 720px); background: var(--navy); overflow: hidden; color: #fff; }
.hero__slide {
  position: absolute; inset: 0; display: flex; align-items: center;
  opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility .8s;
}
.hero__slide.is-active { opacity: 1; visibility: visible; }
.hero__art { position: absolute; inset: 0; }
.hero__art img {
  width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%;
  filter: invert(1); mix-blend-mode: screen; opacity: .5;
  transform: scale(1.04); transition: transform 8s ease-out;
}
.hero__slide.is-active .hero__art img { transform: scale(1); }
.hero__art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,56,101,.96) 0%, rgba(0,56,101,.82) 38%, rgba(0,56,101,.15) 75%, rgba(0,56,101,0) 100%);
}
.hero__content { position: relative; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.hero__content h1, .hero__content .h1 { color: #fff; font-size: clamp(40px, 6vw, 72px); max-width: 12ch; }
.hero__content p { font-size: clamp(18px, 2vw, 24px); font-weight: 300; max-width: 30ch; margin: 18px 0 32px; line-height: 1.45; }
.hero__dots { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; }
.hero__dots button {
  width: 10px; height: 10px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1.5px solid #fff; background: transparent;
}
.hero__dots button.is-active { background: #fff; }
@media (max-width: 700px) {
  .hero__art img { object-position: 78% 50%; opacity: .32; }
  .hero__art::after { background: linear-gradient(180deg, rgba(0,56,101,.5) 0%, rgba(0,56,101,.88) 55%); }
  .hero__slide { align-items: flex-end; padding-bottom: 72px; }
}

/* ---------- Sections ---------- */
.section { padding: clamp(56px, 8vw, 96px) 0; }
.section__title { text-align: center; font-size: clamp(30px, 4vw, 44px); }
.section__sub { text-align: center; margin: 10px 0 0; color: var(--muted); }
.section__title + .product-grid, .section__title + .cats, .section__title + .features, .section__title + .faq { margin-top: 40px; }
.section__sub + .bundle-grid, .section__sub + .gallery { margin-top: 40px; }

/* White rounded "panel" sections, like Chamberlain's category block */
.panel {
  background: #fff; border-radius: var(--radius-lg);
  padding: clamp(56px, 7vw, 88px) 0;
  margin: 0 clamp(0px, 1vw, 12px);
}
.panel--navy { background: var(--navy); color: #fff; }
.panel--navy .section__title, .panel--navy h3 { color: #fff; }

/* ---------- Product cards ---------- */
.product-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.product-card {
  --tint: var(--white);
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--tint); border-radius: var(--radius-lg);
  padding: 24px 24px 28px;
}
.badge {
  position: absolute; top: 18px; left: 18px; z-index: 2;
  background: var(--navy-deep); color: #fff; border-radius: var(--radius-pill);
  padding: 5px 13px; font-size: 13px; font-weight: 700;
  font-family: var(--font-display); font-variation-settings: "SOFT" 100;
}
.product-card__media {
  width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
  padding: 36px 12px 12px;
}
.product-card .price { margin-bottom: 18px; }
.product-card__buy { margin-top: auto; }
.product-card__media img {
  width: 100%; height: 100%; object-fit: contain;
  mix-blend-mode: multiply;                    /* white paper takes on the card colour */
  border-radius: 6px;
  transform: rotate(-1.5deg); transition: transform .35s ease;
}
.product-card:nth-child(even) .product-card__media img { transform: rotate(1.5deg); }
.product-card:hover .product-card__media img { transform: rotate(0) scale(1.03); }
.product-card h3 { font-size: 20px; margin-top: 16px; }
.price { margin: 4px 0 18px; font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 700; font-size: 18px; }
.price s { color: var(--muted); font-weight: 600; margin-left: 6px; }
.product-card__buy { display: flex; gap: 10px; width: 100%; max-width: 360px; }
.product-card__buy .btn { flex: 1; padding: 0 16px; }
.select {
  flex: 1; min-height: 48px; padding: 0 34px 0 14px; border-radius: 14px;
  border: 1.5px solid var(--navy-deep); background: #fff;
  appearance: none; cursor: pointer; font-size: 14px; font-weight: 500;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003865' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
}

.product-card--promo {
  background: var(--navy); color: #fff; justify-content: center; gap: 18px; padding: 40px 28px;
  min-height: 280px;
}
.product-card--promo h3 { color: #fff; font-size: clamp(26px, 3vw, 34px); margin: 0; max-width: 14ch; }
.product-card__eyebrow { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }

/* ---------- Categories ---------- */
.cats {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 12px;
}
@media (min-width: 800px) { .cats { grid-template-columns: repeat(6, 1fr); } }
.cats a {
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-decoration: none;
  font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 700; font-size: 16px; text-align: center;
}
.cats__img {
  width: min(100%, 140px); aspect-ratio: 1; border-radius: 50%;
  background-color: var(--sky); background-image: var(--img);
  background-size: var(--size, cover); background-position: var(--pos, center); background-repeat: no-repeat;
  background-blend-mode: multiply;
  border: 2px solid var(--sky);
  transition: transform .25s ease;
}
.cats li:nth-child(2) .cats__img { background-color: var(--butter); border-color: var(--butter); }
.cats li:nth-child(3) .cats__img { background-color: var(--blush); border-color: var(--blush); }
.cats li:nth-child(4) .cats__img { background-color: var(--sage); border-color: var(--sage); }
.cats li:nth-child(5) .cats__img { background-color: var(--butter); border-color: var(--butter); }
.cats a:hover .cats__img { transform: translateY(-4px); }
.cats__img--free { display: grid; place-items: center; background: var(--navy); border-color: var(--navy); }
.cats__img--free span {
  color: #fff; font-size: 26px; transform: rotate(-8deg);
  font-family: var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; font-weight: 800;
}

/* ---------- Bundles ---------- */
.bundle-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .bundle-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
.product-card--bundle .btn { min-width: 220px; }
.bundle-note { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
.fan { position: relative; width: 100%; aspect-ratio: 4 / 3; margin: 24px 0 8px; }
.fan img {
  position: absolute; top: 50%; left: 50%; width: 52%;
  background: #fff; padding: 6px; border-radius: 6px;
  box-shadow: 0 10px 30px rgba(15,35,65,.14);
  transition: transform .4s ease;
}
.fan img:nth-child(1) { transform: translate(-95%, -50%) rotate(-10deg); }
.fan img:nth-child(2) { transform: translate(-50%, -54%) rotate(0deg); z-index: 2; width: 40%; }
.fan img:nth-child(3) { transform: translate(-5%, -48%) rotate(9deg); }
.product-card--bundle:hover .fan img:nth-child(1) { transform: translate(-102%, -50%) rotate(-13deg); }
.product-card--bundle:hover .fan img:nth-child(3) { transform: translate(2%, -48%) rotate(12deg); }
.fan--alt img:nth-child(2) { width: 46%; }

/* ---------- Features ---------- */
.features { list-style: none; margin: 0; padding: 0; display: grid; gap: 36px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .features { grid-template-columns: repeat(4, 1fr); gap: 28px; } }
.features li { text-align: center; padding: 0 8px; }
.features svg { width: 56px; height: 56px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin: 0 auto 16px; }
.features h3 { font-size: 22px; margin-bottom: 8px; }
.features p { margin: 0; opacity: .85; font-weight: 300; }

/* ---------- Free page ---------- */
.free {
  display: grid; gap: 32px; align-items: center; grid-template-columns: 1fr;
  background: #fff; border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 32px);
}
@media (min-width: 860px) { .free { grid-template-columns: 1fr 1.1fr; gap: 56px; } }
.free__media { background: var(--tint); border-radius: var(--radius-md); padding: clamp(24px, 5vw, 56px); display: grid; place-items: center; }
.free__media img { mix-blend-mode: multiply; max-height: 460px; width: auto; transform: rotate(-3deg); }
.free__copy { padding: 0 clamp(4px, 2vw, 24px) 12px; }
.free__copy h2 { font-size: clamp(30px, 4vw, 46px); }
.free__copy > p:not(.eyebrow) { margin: 16px 0 24px; color: var(--muted); font-size: 18px; max-width: 46ch; }
.signup { display: flex; flex-wrap: wrap; gap: 10px; max-width: 480px; }
.signup input {
  flex: 1 1 220px; min-height: 52px; padding: 0 18px;
  border: 1.5px solid var(--navy-deep); border-radius: 14px; background: #fff;
}
.signup input::placeholder { color: #8a90a6; }
.signup .btn { min-height: 52px; }
.signup__msg { flex-basis: 100%; margin: 4px 0 0; font-size: 14px; min-height: 1.4em; }
.signup__msg.is-error { color: var(--muted); }

/* ---------- Gallery ---------- */
.gallery { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.gallery figure {
  margin: 0; aspect-ratio: 4 / 5; border-radius: var(--radius-md); overflow: hidden;
  background: var(--tint); display: grid; place-items: center; padding: 18px;
}
.gallery img { mix-blend-mode: multiply; max-height: 100%; object-fit: contain; transition: transform .4s ease; }
.gallery figure:hover img { transform: scale(1.04) rotate(-1deg); }

/* ---------- Story ---------- */
.story {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr; background: var(--navy); color: #fff;
  border-radius: var(--radius-lg);
}
@media (min-width: 860px) { .story { grid-template-columns: 1.05fr 1fr; } }
.story__copy { position: relative; z-index: 1; padding: clamp(36px, 6vw, 72px); }
.story__copy h2 { color: #fff; font-size: clamp(30px, 4vw, 46px); max-width: 14ch; }
.story__copy p { font-weight: 300; font-size: 18px; max-width: 44ch; margin: 18px 0 0; opacity: .92; }
.story__copy .btn { margin-top: 32px; }
.story__art { min-height: 280px; position: relative; }
.story__art img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: invert(1); mix-blend-mode: screen; opacity: .6;
}

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 700; font-size: 19px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 14px; margin-top: -9px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details p { margin: 0 0 22px; color: var(--muted); max-width: 62ch; }

/* ---------- Footer ---------- */
.footer {
  background: #fff; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  margin-top: clamp(56px, 8vw, 96px); padding: 64px 0 24px;
}
.footer__inner { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 960px) { .footer__inner { grid-template-columns: 1.15fr .9fr 1.1fr; align-items: start; } }
.footer__logo { height: 72px; width: auto; margin-bottom: 20px; }
.footer__brand h2 { font-size: 32px; }
.footer__brand > p { margin: 8px 0 18px; color: var(--muted); max-width: 36ch; }
.socials { list-style: none; margin: 24px 0 0; padding: 0; display: flex; gap: 10px; }
.socials a {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--navy-deep); color: #fff; transition: transform .15s;
}
.socials a:hover { transform: translateY(-2px); }
.socials svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.socials svg .fill { fill: currentColor; stroke: none; }
.footer__art { display: none; }
@media (min-width: 960px) {
  .footer__art { display: block; align-self: center; }
  .footer__art img { max-height: 340px; width: auto; margin: 0 auto; transform: rotate(4deg); border-radius: 10px; box-shadow: 0 12px 40px rgba(15,35,65,.12); }
}
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.footer__cols h3 { font-size: 17px; margin-bottom: 12px; }
.footer__cols a { display: block; text-decoration: none; padding: 4px 0; color: var(--muted); font-size: 15px; }
.footer__cols a:hover { color: var(--navy-deep); text-decoration: underline; text-underline-offset: 3px; }
.footer__legal {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px;
  margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--muted);
}
.footer__legal a { text-decoration: none; }
.footer__legal a:hover { text-decoration: underline; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 90;
  transform: translate(-50%, 140%); opacity: 0;
  background: var(--navy-deep); color: #fff; padding: 14px 22px; border-radius: 14px;
  font-weight: 500; box-shadow: 0 10px 30px rgba(0,0,0,.2);
  transition: transform .3s ease, opacity .3s ease; max-width: calc(100vw - 32px);
}
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ==========================================================
   Product page (modelled on Chamberlain's product template)
   ========================================================== */
a.product-card__media { display: block; }
.product-card h3 a { text-decoration: none; }
.product-card h3 a:hover { text-decoration: none; }
.product-card__view { margin-top: auto; min-width: 180px; }
@media (min-width: 1024px) { .product-grid--four { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.product-grid--four .product-card h3 { font-size: 18px; }

.checker {
  background-color: #fff;
  background-image: conic-gradient(#dae9f4 25%, #fff 0 50%, #dae9f4 0 75%, #fff 0);
  background-size: 22px 22px;
}

/* Tinted hero block that runs up behind the header */
.header--tint, .header--tint.is-scrolled { background: var(--pdp-tint); border-bottom-color: transparent; }
.pdp { background: var(--pdp-tint); border-radius: 0 0 50px 50px; padding: 8px 0 clamp(48px, 6vw, 80px); }
.pdp__grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 960px) {
  .pdp__grid { grid-template-columns: 1.15fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: start; }
  .pdp__info { position: sticky; top: calc(var(--header-h) + 24px); padding-top: 28px; }
}
.breadcrumb { font-size: 13px; color: var(--muted); margin: 8px 0 16px; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* Stage + views */
.pdp__stage { position: relative; aspect-ratio: 1 / 1; }
.view {
  position: absolute; inset: 0; display: grid; place-items: center;
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s;
}
.view.is-active { opacity: 1; visibility: visible; }
.view__page { width: 92%; height: 92%; object-fit: contain; mix-blend-mode: multiply; }
.view__zoom { width: 88%; height: 88%; border-radius: var(--radius-md); overflow: hidden; background: #fff; box-shadow: 0 14px 40px rgba(15,35,65,.12); }
.view__zoom img { width: 100%; height: 100%; object-fit: cover; transform: scale(2.6); transform-origin: var(--zoom-origin, 50% 50%); }
.view__fill { width: 86%; height: 86%; object-fit: contain; border-radius: 12px; }
.view__paper {
  max-width: 74%; max-height: 82%; width: auto; background: #fff; padding: 10px;
  box-shadow: 0 18px 50px rgba(15,35,65,.2); transform: rotate(-3deg);
}
.view__caption {
  position: absolute; bottom: 2%; left: 50%; transform: translateX(-50%); margin: 0; white-space: nowrap;
  background: #fff; color: var(--navy-deep); padding: 7px 16px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 500;
  box-shadow: 0 4px 14px rgba(15,35,65,.1);
}
.tablet { width: 86%; aspect-ratio: 4 / 3; background: var(--navy); border-radius: 30px; padding: 16px; box-shadow: 0 18px 50px rgba(15,35,65,.25); }
body[data-shape="portrait"] .view .tablet { width: 64%; aspect-ratio: 3 / 4; }
.tablet__screen { width: 100%; height: 100%; border-radius: 14px; overflow: hidden; display: grid; place-items: center; }
.tablet__screen img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }

.starburst { position: absolute; top: 3%; right: 4%; z-index: 3; width: clamp(84px, 11vw, 112px); aspect-ratio: 1; display: grid; place-items: center; transform: rotate(-10deg); }
.starburst svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--navy-deep); }
.starburst span {
  position: relative; color: #fff; text-align: center; line-height: 1.05; max-width: 70%;
  font-family: var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; font-weight: 700; font-size: clamp(14px, 1.6vw, 18px);
}

/* Thumbnails */
.thumbs { display: flex; gap: 12px; margin-top: 16px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: none; }
.thumbs::-webkit-scrollbar { display: none; }
.thumb {
  flex: 0 0 auto; width: 78px; height: 78px; padding: 6px; border-radius: 14px; cursor: pointer; overflow: hidden;
  background: #fff; border: 2px solid transparent; transition: border-color .15s, transform .15s;
}
.thumb:hover { transform: translateY(-2px); }
.thumb.is-active { border-color: var(--navy-deep); }
.thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.thumb--detail img { object-fit: cover; transform: scale(2.6); transform-origin: var(--zoom-origin, 50% 50%); }
.thumb--checker { background-color: #fff; background-image: conic-gradient(#dae9f4 25%, #fff 0 50%, #dae9f4 0 75%, #fff 0); background-size: 12px 12px; }
.thumb--print { background: var(--butter); }
.thumb--print img { mix-blend-mode: normal; transform: rotate(-6deg) scale(.82); box-shadow: 0 3px 8px rgba(15,35,65,.25); }

/* Info column */
.pdp__eyebrow { margin: 0 0 6px; font-size: 14px; color: var(--muted); }
.pdp__title { font-size: clamp(32px, 4vw, 46px); }
.pdp__meta { margin: 14px 0 0; font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 700; font-size: 18px; }
.pdp__desc { margin: 18px 0 0; font-size: 16px; max-width: 52ch; }
.pdp__level { margin: 14px 0 0; font-size: 15px; color: var(--muted); }
.pdp__level strong { color: var(--navy-deep); }

.seals { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.seals + .pdp__buybox .plans { margin-top: 16px; }
.seals li {
  position: relative; width: 58px; height: 58px; border-radius: 50%; background: #fff; border: 1.5px solid var(--navy-deep);
  display: grid; place-items: center; text-align: center; padding: 4px;
  font-size: 6.5px; font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: .04em; color: var(--navy-deep);
}
.seals li::before { content: ""; position: absolute; inset: 2.5px; border-radius: 50%; border: 1px dashed rgba(0,56,101,.35); pointer-events: none; }

.formats { border: 0; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.formats label { position: relative; cursor: pointer; }
.formats input { position: absolute; opacity: 0; pointer-events: none; }
.formats span {
  display: grid; place-items: center; text-align: center; min-height: 48px; padding: 6px 8px; border-radius: 10px;
  background: #fff; border: 1.5px solid var(--navy-deep); font-size: 14px; font-weight: 500; line-height: 1.2;
  transition: background-color .15s, color .15s;
}
.formats label:hover span { background: #f3f6f9; }
.formats input:checked + span { background: var(--navy-deep); color: #fff; }
.formats input:focus-visible + span { outline: 3px solid var(--star); outline-offset: 2px; }

.buy { display: flex; gap: 10px; margin-top: 14px; }
.qty { display: flex; align-items: center; height: 56px; border: 1.5px solid var(--navy-deep); border-radius: 14px; background: #fff; }
.qty__btn { width: 40px; height: 100%; border: 0; background: none; cursor: pointer; font-size: 20px; }
.qty input { width: 32px; border: 0; text-align: center; font-weight: 700; background: none; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.btn--big { flex: 1; min-height: 56px; font-size: clamp(17px, 1.6vw, 20px); }
.pdp__note { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 14px; }
.pdp__note svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* The cozy details */
.details__grid { display: grid; gap: 32px 16px; grid-template-columns: repeat(2, 1fr); margin-top: 40px; align-items: center; }
.details__hero { grid-column: 1 / -1; grid-row: 1; display: grid; place-items: center; }
.details__hero img { max-height: 340px; width: auto; background: #fff; padding: 10px; transform: rotate(-3deg); box-shadow: 0 16px 44px rgba(15,35,65,.14); }
@media (min-width: 860px) {
  .details__grid { grid-template-columns: 1fr 1.3fr 1fr; grid-template-areas: "a hero c" "b hero d"; gap: 40px 32px; }
  .details__grid > :nth-child(1) { grid-area: a; }
  .details__grid > :nth-child(2) { grid-area: b; }
  .details__grid > :nth-child(3) { grid-area: hero; }   /* the page spans both rows, so the benefits sit beside it instead of far below */
  .details__grid > :nth-child(4) { grid-area: c; }
  .details__grid > :nth-child(5) { grid-area: d; }
}
.fact { text-align: center; }
.fact svg { width: 44px; height: 44px; fill: none; stroke: var(--navy-deep); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin: 0 auto 10px; }
.fact h3 { font-size: 17px; }
.fact p { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
.details__faq { max-width: 820px; margin: 56px auto 0; }
.faq details ul { margin: 0 0 22px; padding-left: 20px; color: var(--muted); }
.faq details li { margin-bottom: 6px; }
.faq details li strong { color: var(--navy-deep); }

/* Color it in Procreate */
.steps__grid { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .steps__grid { grid-template-columns: 1fr 1fr; gap: 72px; } }
.steps__media { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.tablet--big { width: 100%; max-width: 520px; }
.swatches { display: flex; gap: 10px; }
.swatches i { width: 30px; height: 30px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 2px rgba(0,0,0,.06); }
.swatches i:nth-child(1) { background: #003865; }
.swatches i:nth-child(2) { background: #2f5f8a; }
.swatches i:nth-child(3) { background: #6c9ec9; }
.swatches i:nth-child(4) { background: #a9c8e3; }
.swatches i:nth-child(5) { background: #dae9f4; }
.steps__copy h2 { font-size: clamp(30px, 4vw, 44px); }
.steps__copy ol { list-style: none; counter-reset: step; margin: 28px 0 32px; padding: 0; }
.steps__copy li { counter-increment: step; position: relative; padding-left: 44px; margin-bottom: 16px; max-width: 48ch; }
.steps__copy li::before {
  content: counter(step); position: absolute; left: 0; top: -1px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--navy-deep); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700;
}

/* Behind the page */
.behind { background: var(--navy); color: #fff; padding: clamp(64px, 8vw, 100px) 0; margin-top: clamp(56px, 8vw, 96px); }
.behind .section__title { color: #fff; }
.timeline { list-style: none; margin: 56px auto 0; padding: 0; max-width: 820px; position: relative; }
.timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 2px dashed rgba(255,255,255,.55); }
.timeline li { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; margin-bottom: 56px; }
.timeline li:last-child { margin-bottom: 0; }
.timeline li::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -6px;
  border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px var(--navy);
}
.timeline li:nth-child(even) .timeline__img { order: 2; }
.timeline li:nth-child(even) .timeline__text { text-align: right; }
.timeline__img {
  aspect-ratio: 1; border-radius: var(--radius-md); overflow: hidden; background: var(--tint, #fff);
  display: grid; place-items: center; max-width: 280px; width: 100%; justify-self: end;
}
.timeline li:nth-child(even) .timeline__img { justify-self: start; }
.timeline__img img { width: 100%; height: 100%; object-fit: cover; }
.timeline__img.checker img { object-fit: contain; mix-blend-mode: multiply; padding: 14px; }
.timeline__img--paper img { width: 72%; height: auto; max-height: 82%; object-fit: contain; background: #fff; padding: 6px; transform: rotate(-4deg); box-shadow: 0 10px 24px rgba(15,35,65,.25); }
.timeline__text { max-width: 300px; }
.timeline li:nth-child(even) .timeline__text { justify-self: end; }
.timeline__text h3 { color: #fff; font-size: 24px; margin-bottom: 8px; }
.timeline__text p { margin: 0; opacity: .88; font-weight: 300; }
@media (max-width: 700px) {
  .timeline::before { left: 11px; }
  .timeline li { grid-template-columns: 1fr; gap: 18px; padding-left: 40px; }
  .timeline li::after { left: 11px; top: 24px; }
  .timeline li:nth-child(even) .timeline__img { order: 0; }
  .timeline li:nth-child(even) .timeline__text { text-align: left; justify-self: start; }
  .timeline__img, .timeline li:nth-child(even) .timeline__img { justify-self: start; max-width: 100%; }
  .timeline__text { max-width: none; }
}
.pdp-page .footer { margin-top: 0; }
.timeline__img.checker {
  background-color: #fff;
  background-image: conic-gradient(#dae9f4 25%, #fff 0 50%, #dae9f4 0 75%, #fff 0);
  background-size: 22px 22px;
}
.pdp__grid > * { min-width: 0; }   /* let the thumbnail row scroll instead of widening the page */
.view { grid-template-rows: 100%; grid-template-columns: 100%; }   /* gives % heights inside each view a definite size */

/* ==========================================================
   Subscribe & save (product page purchase options)
   ========================================================== */
[hidden] { display: none !important; }

.plans { border: 0; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; }
.plan {
  background: #fff; border: 2px solid transparent; border-radius: 16px;
  transition: border-color .15s;
}
.plan.is-selected { border-color: var(--navy-deep); }
.plan__head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; cursor: pointer; position: relative;
}
.plan__head input { position: absolute; opacity: 0; pointer-events: none; }
.plan__dot {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--navy-deep); display: grid; place-items: center;
}
.plan__dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--navy); transform: scale(0); transition: transform .15s; }
.plan.is-selected .plan__dot::after { transform: scale(1); }
.plan__head input:focus-visible ~ .plan__dot { outline: 3px solid var(--star); outline-offset: 2px; }
.plan__title { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.plan__name { font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .03em; }
.plan__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill {
  background: var(--sky); color: var(--navy); border-radius: 5px;
  padding: 3px 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}
.plan__price {
  margin-left: auto; white-space: nowrap;
  font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 700; font-size: 17px;
}
.plan__price small { font-size: 13px; font-weight: 600; }
.plan__price s { color: var(--muted); font-weight: 500; font-size: 14px; margin-left: 4px; }
.plan__body { display: none; padding: 0 18px 18px; }
.plan.is-selected .plan__body { display: block; }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ticks li { position: relative; padding-left: 30px; font-weight: 500; font-size: 15px; line-height: 1.35; }
.ticks li::before {
  content: ""; position: absolute; left: 2px; top: 1px; width: 18px; height: 18px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003865' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12 5 5 11-12'/%3E%3C/svg%3E");
}
.plan__every {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 16px 0 0;
  border: 1.5px solid var(--navy-deep); border-radius: 12px; padding: 12px 14px; font-size: 14px;
}
.plan__every svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.plan__every a { margin-left: auto; font-weight: 700; text-underline-offset: 3px; }
.plans + .formats { margin-top: 12px; }
@media (max-width: 420px) {
  .plan__head { padding: 14px; }
  .plan__body { padding: 0 14px 16px; }
}

/* ==========================================================
   The Cozy Club page
   ========================================================== */
.club-page .header { background: var(--pdp-tint); }
.club-page .header.is-scrolled { border-bottom-color: transparent; }
.club-hero__grid { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 960px) { .club-hero__grid { grid-template-columns: 1fr 1.05fr; gap: clamp(40px, 5vw, 80px); } }
.club-hero__copy .eyebrow { margin-top: 12px; }
.club-hero__title { font-size: clamp(40px, 6vw, 68px); }
.club-hero__lead { font-size: 18px; max-width: 46ch; margin: 18px 0 0; }

.club-offer { background: #fff; border: 2px solid var(--navy-deep); border-radius: 18px; padding: 22px; margin-top: 28px; max-width: 520px; }
.club-offer__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.club-offer__price { margin: 0; font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 700; font-size: 32px; letter-spacing: -0.02em; }
.club-offer__price small { font-size: 16px; font-weight: 600; }
.club-offer__price s { font-size: 17px; color: var(--muted); font-weight: 500; }
.club-offer .btn--big { width: 100%; margin-top: 20px; }
.club-offer__note { margin: 12px 0 0; text-align: center; font-size: 14px; color: var(--muted); }

.club-hero__art { position: relative; }
.club-stack { position: relative; aspect-ratio: 1 / 1; max-width: 560px; margin: 0 auto; }
.club-stack img {
  position: absolute; top: 50%; left: 50%; width: 52%;
  background: #fff; padding: 8px; border-radius: 6px; box-shadow: 0 14px 36px rgba(15,35,65,.16);
}
.club-stack img:nth-child(1) { transform: translate(-108%, -38%) rotate(-14deg); }
.club-stack img:nth-child(2) { transform: translate(8%, -40%) rotate(13deg); }
.club-stack img:nth-child(3) { transform: translate(-82%, -66%) rotate(-6deg); }
.club-stack img:nth-child(4) { transform: translate(-16%, -70%) rotate(7deg); width: 40%; }
.club-stack img:nth-child(5) { transform: translate(-50%, -42%) rotate(-1deg); width: 50%; z-index: 2; }
.club-hero__burst { top: 2%; right: 2%; }
.club-hero__burst span { font-size: clamp(13px, 1.4vw, 16px); }

.how { list-style: none; margin: 44px 0 0; padding: 0; display: grid; gap: 20px; grid-template-columns: 1fr; counter-reset: how; }
@media (min-width: 800px) { .how { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.how li { counter-increment: how; position: relative; background: #fff; border-radius: var(--radius-lg); padding: 32px 28px; text-align: center; }
.how li::before {
  content: counter(how); position: absolute; top: 18px; left: 18px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--navy-deep); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px;
}
.how svg { width: 52px; height: 52px; margin: 0 auto 14px; fill: none; stroke: var(--navy-deep); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.how h3 { font-size: 21px; }
.how p { margin: 8px auto 0; color: var(--muted); max-width: 32ch; }

.compare { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 40px; }
@media (min-width: 640px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare__col { position: relative; background: var(--sky-bg); border-radius: var(--radius-md); padding: 32px 24px; text-align: center; }
.compare__col--club { background: var(--navy); color: #fff; }
.compare__col--club h3 { color: #fff; }
.compare__col--club .badge { background: var(--star); color: var(--navy-deep); }
.compare__col h3 { font-size: 22px; }
.compare__sum { margin: 10px 0 0; font-size: 15px; opacity: .8; }
.compare__total { margin: 6px 0 0; font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 700; font-size: 48px; letter-spacing: -0.03em; line-height: 1.1; }
.compare__col:not(.compare__col--club) .compare__total { text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: var(--muted); }
.compare__per { margin: 4px 0 0; font-size: 15px; }

.drop { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); margin-top: 40px; }
@media (min-width: 900px) { .drop { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.drop figure { margin: 0; background: var(--tint, #fff); border-radius: var(--radius-md); padding: 18px 18px 14px; display: flex; flex-direction: column; }
.drop img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; mix-blend-mode: multiply; }
.drop figcaption { margin-top: 10px; text-align: center; font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 700; font-size: 16px; }
.drop__bonus { background: var(--navy) !important; color: #fff; align-items: center; justify-content: center; text-align: center; min-height: 160px; }
.drop__bonus span { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; font-weight: 700; font-size: clamp(20px, 2.4vw, 28px); max-width: 12ch; line-height: 1.15; }

.club-cta .story__copy h2 { max-width: 12ch; }

/* Homepage club banner */
.club-banner {
  display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center;
  background: var(--butter); border-radius: var(--radius-lg); padding: clamp(28px, 5vw, 56px);
}
@media (min-width: 860px) { .club-banner { grid-template-columns: 1.1fr 1fr; gap: 56px; } }
.club-banner h2 { font-size: clamp(30px, 4vw, 46px); }
.club-banner__lead { margin: 14px 0 0; font-size: 18px; max-width: 44ch; }
.club-banner .ticks { margin-top: 20px; }
.club-banner__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 26px; }
.club-banner__price { margin: 0; font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 700; font-size: 22px; }
.club-banner__price s { font-size: 16px; color: var(--muted); font-weight: 500; }
.club-banner .club-stack { max-width: 440px; }
.section--tight { padding-top: 0; }
.club-banner__cta .btn--big { flex: 0 1 auto; padding: 0 36px; }
.club-banner .eyebrow { display: flex; align-items: center; gap: 10px; }
.compare__col--club { padding-top: 52px; }
@media (min-width: 640px) { .compare__col { padding-top: 52px; } }
.club-stack { width: 100%; }
.club-hero, .club-banner { overflow: hidden; }
.club-hero__art { overflow: clip; overflow-clip-margin: 40px; }
.pill { white-space: nowrap; }
@media (max-width: 480px) {
  .club-offer { padding: 18px; }
  .club-offer__price { font-size: 28px; }
  .club-stack img { padding: 5px; }
}

/* ==========================================================
   Packs: cards, coming-soon art, pack gallery, notify form
   ========================================================== */
.cats__img--soon { background: var(--soon-bg); border-color: var(--soon-bg); }
.cats__img--soon span { color: var(--navy-deep); font-size: 22px; text-align: center; line-height: 1; }
.cats__img--soon small { display: block; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; }

.pack-fan { position: relative; display: block; width: 100%; height: 100%; }
.pack-fan img {
  position: absolute; top: 50%; left: 50%; width: 56%; height: auto; object-fit: contain;
  background: #fff; padding: 5px; border-radius: 5px; mix-blend-mode: normal;
  box-shadow: 0 8px 22px rgba(15,35,65,.14); transition: transform .35s ease;
}
.product-card .pack-fan img { transform: none; }
.product-card .pack-fan img:nth-child(1) { transform: translate(-92%, -50%) rotate(-10deg); }
.product-card .pack-fan img:nth-child(2) { transform: translate(-8%, -48%) rotate(9deg); }
.product-card .pack-fan img:nth-child(3) { transform: translate(-50%, -53%) rotate(-1deg); width: 52%; z-index: 2; }
.product-card:hover .pack-fan img:nth-child(1) { transform: translate(-98%, -50%) rotate(-13deg); }
.product-card:hover .pack-fan img:nth-child(2) { transform: translate(-2%, -48%) rotate(12deg); }
.pack-card__meta { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.product-card--pack .price { margin-top: 6px; }
.product-card--pack.is-soon .price { font-size: 16px; }

/* Placeholder art for packs without artwork yet */
.soon-art { position: relative; width: 78%; aspect-ratio: 1; display: grid; place-items: center; }
.soon-art span {
  position: absolute; width: 56%; aspect-ratio: 3 / 4; border-radius: 6px;
  background: rgba(255,255,255,.7); border: 2px dashed rgba(15,35,65,.35);
}
.soon-art span:nth-child(1) { transform: translateX(-34%) rotate(-10deg); }
.soon-art span:nth-child(2) { transform: translateX(34%) rotate(9deg); }
.soon-art span:nth-child(3) { background: #fff; border-style: solid; border-color: rgba(15,35,65,.15); box-shadow: 0 12px 30px rgba(15,35,65,.12); }
.soon-art p {
  position: relative; z-index: 2; margin: 0; text-align: center; transform: rotate(-6deg);
  font-family: var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; font-weight: 800;
  font-size: clamp(28px, 4vw, 48px); line-height: .95; color: var(--navy-deep);
}
.soon-art--card { width: 100%; height: 100%; aspect-ratio: auto; }
.soon-art--card p { font-size: clamp(24px, 2.6vw, 32px); }

.view--cover .club-stack { width: 88%; max-width: none; }
.thumb--cover { position: relative; }
.thumb__stack { position: relative; display: block; width: 100%; height: 100%; }
.thumb__stack img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; background: #fff; box-shadow: 0 2px 6px rgba(15,35,65,.2); mix-blend-mode: normal; }
.thumb__stack img:first-child { transform: rotate(-9deg) translateX(-6%); }
.thumb__stack img:last-child { transform: rotate(7deg) translateX(6%); }

.notify { margin-top: 26px; background: #fff; border-radius: 18px; padding: 22px; }
.notify__when { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 14px; }
.notify__when svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.notify__lead { margin: 8px 0 14px; font-size: 16px; }
.notify__club { margin: 18px 0 0; padding-top: 18px; border-top: 1.5px dashed rgba(0,56,101,.22); }
.notify__club .club-link { margin-top: 0; }
.notify .signup__msg:empty { display: none; }   /* no empty gap under the button until there is a message */
.product-card:hover .pack-fan img:nth-child(3) { transform: translate(-50%, -53%) rotate(0) scale(1.03); }
.section__sub + .product-grid { margin-top: 40px; }
.cats li .cats__img--soon { background-color: var(--soon-bg); border-color: var(--soon-bg); }
@media (max-width: 700px) { .view--cover .club-stack { width: 76%; } }
.pdp__gallery { overflow-x: clip; overflow-clip-margin: 24px; }

/* Color along: finished, colored pages */
.gallery--color { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
@media (min-width: 700px) { .gallery--color { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
.gallery--color figure {
  aspect-ratio: auto; background: #fff; padding: 10px; border-radius: 16px;
  box-shadow: 0 14px 36px rgba(15,35,65,.12); transform: rotate(-1deg); transition: transform .35s ease, box-shadow .35s ease;
}
.gallery--color figure:nth-child(even) { transform: rotate(1deg); }
.gallery--color figure:hover { transform: rotate(0) translateY(-4px); box-shadow: 0 20px 44px rgba(15,35,65,.18); }
.gallery--color img { mix-blend-mode: normal; width: 100%; height: auto; border-radius: 8px; }
.gallery--color figure:hover img { transform: none; }
.gallery--color img { max-height: none; }
/* Smaller colored pages: 4 per row on desktop, 2 on phones */
.gallery--color { grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 1080px; margin-left: auto; margin-right: auto; }
@media (min-width: 900px) { .gallery--color { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.gallery--color figure { padding: 6px; border-radius: 12px; box-shadow: 0 8px 22px rgba(15,35,65,.12); }
.gallery--color img { border-radius: 6px; }

/* ==========================================================
   Design pass: colored hero, calmer rhythm, colored footer art
   ========================================================== */
.hero__art img { opacity: .22; }
.hero__art::after { background: linear-gradient(90deg, rgba(0,56,101,.94) 0%, rgba(0,56,101,.7) 50%, rgba(0,56,101,.55) 100%); }
.hero__content { display: grid; grid-template-columns: 1fr; align-items: center; gap: 28px; }
.hero__feature { position: relative; margin: 0; order: -1; justify-self: center; width: min(78%, 340px); }
.hero__feature img {
  width: 100%; height: auto; background: #fff; padding: 8px; border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35); transform: rotate(3deg);
}
.hero__burst { top: -22px; right: -18px; width: 84px; }
.hero__burst svg { fill: var(--star); }
.hero__burst span { color: var(--navy-deep); font-size: 14px; }
.hero__slide.is-active .hero__feature img { animation: hero-pop .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes hero-pop { from { opacity: 0; transform: translateY(18px) rotate(6deg); } to { opacity: 1; transform: rotate(3deg); } }
@media (min-width: 900px) {
  .hero__content { grid-template-columns: 1fr 1.05fr; gap: 56px; }
  .hero__feature { order: 0; width: 100%; max-width: 560px; justify-self: end; }
  .hero__burst { top: -34px; right: -26px; width: 118px; }
  .hero__burst span { font-size: 17px; }
}
@media (max-width: 899px) {
  .hero { height: auto; min-height: 640px; }
  .hero__slide { position: absolute; align-items: center; padding: 36px 0 64px; }
  .hero__content p { margin: 12px 0 22px; font-size: 17px; }
  .hero__content h1, .hero__content .h1 { font-size: clamp(34px, 9vw, 52px); }
}
@media (max-width: 700px) {
  .hero__art::after { background: rgba(0,56,101,.82); }
  .hero__slide { align-items: center; padding-bottom: 56px; }
}
@media (prefers-reduced-motion: reduce) { .hero__slide.is-active .hero__feature img { animation: none; } }

/* Colored page in the footer */
@media (min-width: 960px) {
  .footer__art img { max-height: none; max-width: 100%; height: auto; background: #fff; padding: 6px; transform: rotate(-3deg); }
}
@media (min-width: 900px) { .hero__feature { order: 2; } }
@media (max-width: 859px) {
  .club-banner .club-stack { width: 80%; }
  .free__media img { max-height: 300px; }
}

/* ==========================================================
   Procreate tools: illustrated placeholder art
   ========================================================== */
.tool-art { width: 100%; height: 100%; display: grid; place-items: center; }
.tool-art--markers svg { width: 92%; height: 92%; overflow: visible; }
.product-card .tool-art--markers svg { transform: none; }

.tool-art--palettes { position: relative; }
.palette-card {
  position: absolute; width: 62%; background: #fff; border-radius: 12px; padding: 10px 10px 12px;
  box-shadow: 0 10px 26px rgba(15,35,65,.14); border: 2px solid var(--navy-deep);
}
.palette-card p { margin: 0 0 8px; font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 700; font-size: 13px; text-align: left; color: var(--navy-deep); line-height: 1.1; }
.palette-card__swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.palette-card__swatches i { aspect-ratio: 1; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1.5px rgba(15,35,65,.25); }
.palette-card:nth-child(1) { transform: translate(-30%, -26%) rotate(-9deg); }
.palette-card:nth-child(2) { transform: translate(30%, -6%) rotate(7deg); }
.palette-card:nth-child(3) { transform: translate(-4%, 26%) rotate(-2deg); z-index: 2; }
.product-card:hover .palette-card:nth-child(1) { transform: translate(-33%, -29%) rotate(-12deg); }
.product-card:hover .palette-card:nth-child(2) { transform: translate(33%, -6%) rotate(10deg); }
.palette-card { transition: transform .35s ease; }

/* Product page views and thumbs for tools */
.view .tool-art { width: 86%; height: 86%; }
.view .tool-art--palettes .palette-card { width: 54%; padding: 14px; }
.view .palette-card p { font-size: clamp(14px, 1.6vw, 18px); }
.view .palette-card__swatches { gap: 7px; }
.tablet__screen--art { background: #fff; }
.tablet__screen--art .tool-art { width: 100%; height: 100%; transform: scale(.82); }
.thumb .tool-art { pointer-events: none; }
.thumb .tool-art--palettes .palette-card { width: 70%; padding: 3px; border-width: 1px; border-radius: 4px; box-shadow: none; }
.thumb .palette-card p { display: none; }
.thumb .palette-card__swatches { gap: 1px; }
.thumb__tablet { display: grid; place-items: center; width: 100%; height: 100%; background: var(--navy); border-radius: 8px; padding: 5px; }
.thumb__tablet .tool-art { background: #fff; border-radius: 4px; }
.product-card--pack .product-card__buy .btn:only-child { flex: 1; }

/* Four products in a row: stack the format picker above the button */
@media (min-width: 1024px) {
  .product-grid--four .product-card__buy { flex-direction: column; }
  .product-grid--four .product-card__buy .select { flex: none; }
}

.product-grid--four .product-card__view { width: 100%; max-width: 360px; }

.footer__brand h2 { font-size: clamp(26px, 3vw, 32px); max-width: 13ch; }
.footer__brand { scroll-margin-top: calc(var(--header-h) + 24px); }

/* Color along: TikTok videos */
.tiktoks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 40px; max-width: 1080px; margin-left: auto; margin-right: auto; }
@media (min-width: 900px) { .tiktoks { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.tiktok {
  position: relative; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden;
  background: var(--navy-deep); box-shadow: 0 12px 30px rgba(15,35,65,.16);
}
.tiktok iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.breadcrumb { display: none; }
.pdp { padding-top: 24px; }
.footer__perks { margin: 14px 0 20px; }
.footer__perks li { font-size: 15px; font-weight: 400; color: var(--navy-deep); }
.footer__brand h2 { max-width: 16ch; }

/* The misu friends strip under the hero */
.friends { padding: clamp(36px, 5vw, 56px) var(--gutter) 0; display: flex; justify-content: center; }
.friends img { width: min(100%, 760px); height: auto; }
.friends + .section { padding-top: clamp(32px, 4vw, 48px); }
.footer__brand h2 { font-size: clamp(20px, 2vw, 24px); max-width: none; }
.footer__cols { grid-template-columns: repeat(2, 1fr); }

/* Cozy Club welcome gift */
.ticks__gift strong { color: var(--navy); }
.welcome { padding-bottom: 0; }
.welcome__card {
  display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center;
  background: #fff; border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 52px);
}
@media (min-width: 860px) { .welcome__card { grid-template-columns: 1.05fr 1fr; gap: 48px; } }
.welcome__copy h2 { font-size: clamp(30px, 4vw, 44px); }
.welcome__copy > p:not(.eyebrow) { margin: 14px 0 20px; font-size: 17px; color: var(--muted); max-width: 46ch; }
.welcome__gifts { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.welcome__gift { position: relative; aspect-ratio: 1; border-radius: var(--radius-md); display: grid; place-items: center; padding: 14px 14px 34px; }
.welcome__gift--palette { background: var(--butter); transform: rotate(-3deg); }
.welcome__gift--brushes { background: var(--sage); transform: rotate(3deg); }
.welcome__gift > span {
  position: absolute; bottom: 10px; left: 0; right: 0; text-align: center;
  font-family: var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 16px;
}
.welcome__gift .tool-art--palettes .palette-card { position: relative; width: 92%; transform: rotate(-2deg); }
.welcome__gift .palette-card p { font-size: 14px; }
.welcome__burst { top: -26px; right: -10px; width: 86px; }
.welcome__burst svg { fill: var(--navy); }
.welcome__burst span { font-size: 18px; }

/* New logo: smaller and crisp (cropped from a 1000px source) */
.header__logo { display: block; line-height: 0; }
.header__logo img { height: 38px; width: auto; }
@media (min-width: 900px) { .header__logo img { height: 44px; } }
.footer__logo { height: 52px; width: auto; margin-bottom: 18px; }

/* Keep the announcement bar stuck to the top, with the header right under it */
.announce { position: sticky; top: 0; z-index: 51; }
.header { top: 40px; }
html { scroll-padding-top: calc(var(--header-h) + 56px); }
@media (min-width: 960px) { .pdp__info { top: calc(var(--header-h) + 64px); } }
.footer__brand { scroll-margin-top: calc(var(--header-h) + 64px); }

/* ==========================================================
   One palette everywhere: white, dark blue (#003865), light blue (#dae9f4)
   ========================================================== */
:focus-visible { outline-color: var(--navy); }
.panel--navy :focus-visible, .hero :focus-visible, .story :focus-visible, .behind :focus-visible { outline-color: #fff; }
.product-card--pack, .product-grid .product-card:not(.product-card--promo) { background: #fff; }
.club-banner { background: #fff; }
.hero__burst svg { fill: var(--sky); }
.hero__burst span { color: var(--navy); }
.compare__col--club .badge { background: var(--sky); color: var(--navy); }
.welcome__burst svg { fill: var(--navy); }
.welcome__burst span { color: #fff; }
.ticks__gift strong { color: var(--navy); }
.signup__msg.is-error { color: #b42318; }   /* error text stays readable red */
.footer__lead { margin: 6px 0 0; color: var(--muted); font-size: 15px; }
.footer__perks { margin-top: 12px; }
.footer__lead { margin: 8px 0 18px; max-width: 46ch; }
.footer__lead { max-width: none; }

/* Footer: newsletter left, link columns middle, penguin + logo right (Bobbie Goods-style) */
.footer__inner { grid-template-columns: 1fr; gap: 36px; align-items: start; }
@media (min-width: 760px) { .footer__inner { grid-template-columns: 1.3fr 1fr; } .footer__mark { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .footer__inner { grid-template-columns: 1.4fr 1fr auto; gap: 56px; } .footer__mark { grid-column: auto; } }
.footer__mark { display: flex; flex-direction: column; align-items: center; justify-self: center; text-decoration: none; }
@media (min-width: 1024px) { .footer__mark { justify-self: end; } }
.footer__penguin { width: 84px; height: auto; margin-bottom: 4px; transition: transform .3s ease; }
.footer__mark:hover .footer__penguin { transform: rotate(-6deg) translateY(-3px); }
.footer__mark .footer__logo { height: 48px; width: auto; margin: 0; }
/* Footer mark: "misu" over the penguin's head, "creates" below */
.footer__mark { gap: 0; }
.footer__word { height: auto; display: block; }
.footer__word--misu { width: 68px; margin-bottom: -2px; position: relative; z-index: 1; }
.footer__word--creates { width: 112px; margin-top: 2px; }
.footer__penguin { width: 88px; margin: 0; }
.panel + .panel { margin-top: 24px; }
.footer__word--misu { width: 84px; margin-bottom: -6px; }

/* Shop grid: five cards (1 / 2 / 3+2 centred / 5 in a row) */
.product-grid--shop { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.product-grid--shop > * { flex: 0 1 100%; }
@media (min-width: 600px) { .product-grid--shop > * { flex-basis: calc((100% - 20px) / 2); } }
@media (min-width: 900px) { .product-grid--shop > * { flex-basis: calc((100% - 40px) / 3); } }
@media (min-width: 1200px) { .product-grid--shop { gap: 16px; } .product-grid--shop > * { flex-basis: calc((100% - 64px) / 5); } }
@media (min-width: 900px) {
  .product-grid--shop .product-card__buy { flex-direction: column; }
  .product-grid--shop .product-card__buy .select { flex: none; }
  .product-grid--shop .product-card__view { width: 100%; max-width: 360px; }
}
@media (min-width: 1200px) { .product-grid--shop .product-card { padding: 20px 16px 22px; } .product-grid--shop .product-card h3 { font-size: 18px; } }

/* Cozy Club card in the shop */
.product-card--club .product-card__media { position: relative; }
.club-card__sticker {
  position: absolute; top: 14%; right: 4%; z-index: 3; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; text-align: center; transform: rotate(-10deg);
  background: var(--navy); color: #fff; line-height: 1.05;
  font-family: var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 12px;
}
.product-card--club .product-card__buy .btn { flex: 1; }
/* same scale as "creates" (402px file shown at 112px) so both words match */
.footer__word--misu { width: 65px; margin-bottom: -4px; }

/* Shop cards: buy once / subscribe & save toggle */
.card-plan { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 100%; max-width: 360px; margin: 0 0 10px; padding: 4px; background: var(--sky-bg); border-radius: 12px; }
.card-plan label { position: relative; cursor: pointer; }
.card-plan input { position: absolute; opacity: 0; pointer-events: none; }
.card-plan span {
  display: grid; place-items: center; min-height: 36px; padding: 4px 6px; border-radius: 9px; text-align: center;
  font-size: 12.5px; font-weight: 600; line-height: 1.15; color: var(--navy); transition: background-color .15s, color .15s;
}
.card-plan input:checked + span { background: var(--navy); color: #fff; }
.card-plan input:focus-visible + span { outline: 2px solid var(--navy); outline-offset: 2px; }
.product-card--pack .card-plan + .product-card__buy { margin-top: 0; }
.product-card--pack .price { margin-bottom: 12px; }
.product-card--pack .card-plan { margin-top: auto; }

/* Cozy Club card in the shop: navy, to stand apart from the products */
.product-grid.product-grid--shop .product-card.product-card--club { background: var(--navy); color: #fff; }
.product-card--club h3, .product-card--club h3 a { color: #fff; }
.product-card--club .pack-card__meta { color: rgba(255,255,255,.8); }
.product-card--club .price { color: #fff; }
.product-card--club .price s { color: rgba(255,255,255,.6); }
.product-card--club .badge { background: var(--sky); color: var(--navy); }
.product-card--club .club-card__sticker { background: var(--sky); color: var(--navy); }
.product-card--club .btn--white { min-height: 48px; padding: 0 16px; }

/* ==========================================================
   Bag drawer (modelled on Chamberlain's cart)
   ========================================================== */
.bag { position: fixed; inset: 0; z-index: 120; }
.bag__overlay { position: absolute; inset: 0; background: rgba(0,56,101,.45); opacity: 0; transition: opacity .3s ease; }
.bag__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 100%);
  display: flex; flex-direction: column; background: #fff; color: var(--navy);
  border-radius: 24px 0 0 24px; box-shadow: -20px 0 60px rgba(0,56,101,.18);
  transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.bag.is-open .bag__overlay { opacity: 1; }
.bag.is-open .bag__panel { transform: none; }
@media (max-width: 480px) { .bag__panel { border-radius: 0; } }

.bag__head { position: relative; display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 0 56px; border-bottom: 1px solid var(--line); }
.bag__head h2 { font-size: 22px; }
.bag__close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; background: none; border-radius: 12px; cursor: pointer; display: grid; place-items: center; }
.bag__close:hover { background: var(--sky-bg); }
.bag__close svg { width: 24px; height: 24px; fill: none; stroke: var(--navy); stroke-width: 2; stroke-linecap: round; }

/* Lines */
.bag__items { flex: 1; overflow-y: auto; padding: 4px 24px; }
.bag-line { display: grid; grid-template-columns: 88px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.bag-line__thumb { width: 88px; height: 88px; border-radius: 14px; background: var(--sky-bg); display: grid; place-items: center; overflow: hidden; padding: 8px; }
.bag-line__thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.bag-line__thumb .tool-art { width: 100%; height: 100%; }
.bag-line__thumb .palette-card { width: 70%; padding: 3px; border-width: 1px; border-radius: 4px; box-shadow: none; }
.bag-line__thumb .palette-card p { display: none; }
.bag-line__thumb .palette-card__swatches { gap: 1px; }
.bag-line__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.bag-line__name { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 700; font-size: 17px; text-decoration: none; line-height: 1.2; }
.bag-line__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.bag-line__remove { flex: none; width: 32px; height: 32px; margin: -4px -6px 0 0; border: 0; background: none; border-radius: 8px; cursor: pointer; display: grid; place-items: center; }
.bag-line__remove:hover { background: var(--sky-bg); }
.bag-line__remove svg { width: 18px; height: 18px; fill: none; stroke: var(--navy); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bag-line__meta { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.bag-line__price { margin: 6px 0 10px; font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 700; font-size: 16px; }
.bag-line__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bag-line__upgrade {
  min-height: 38px; padding: 0 14px; border: 1.5px solid var(--navy); border-radius: 10px; background: #fff;
  font-size: 13.5px; cursor: pointer; transition: background-color .15s, color .15s;
}
.bag-line__upgrade:hover { background: var(--navy); color: #fff; }
.bag-line__sub { font-size: 13px; font-weight: 600; background: var(--sky); padding: 6px 10px; border-radius: 8px; }
.bag-qty { display: inline-flex; align-items: center; height: 38px; border: 1.5px solid var(--navy); border-radius: 10px; }
.bag-qty button { width: 34px; height: 100%; border: 0; background: none; cursor: pointer; font-size: 17px; color: var(--navy); }
.bag-qty button:disabled { opacity: .35; cursor: default; }
.bag-qty span { min-width: 22px; text-align: center; font-weight: 700; font-size: 14px; }

/* Empty state */
.bag__empty { height: 100%; min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.bag__empty img { width: 92px; height: auto; }
.bag__empty p { margin: 0; font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 700; font-size: 20px; }
.bag__shop { border: 1.5px solid var(--navy); background: #fff; color: var(--navy); }
.bag__shop:hover { background: var(--navy); color: #fff; }

/* Footer */
.bag__foot { border-top: 1px solid var(--line); padding: 16px 24px 20px; }
.bag__subtotal { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 700; font-size: 17px; }
.bag__checkout { width: 100%; }
.bag__note { margin: 10px 0 0; text-align: center; font-size: 12.5px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .bag__panel, .bag__overlay { transition: none; } }

/* Cozy Club page: white header like the homepage, tinted hero starts below it */
.club-page .header, .club-page .header.is-scrolled { background: #fff; }
.club-page .header.is-scrolled { border-bottom-color: var(--line); }
.club-page .club-hero { padding-top: clamp(32px, 4vw, 48px); }

/* Product pages: white header like the homepage too */
.pdp-page .header, .pdp-page .header.is-scrolled { background: #fff; }
.pdp-page .header.is-scrolled { border-bottom-color: var(--line); }
.pdp-page .pdp { padding-top: clamp(24px, 3vw, 40px); }
.footer__badge { width: 120px; height: auto; display: block; transition: transform .3s ease; }
.footer__mark:hover .footer__badge { transform: rotate(-4deg) translateY(-3px); }


/* ==========================================================
   Mini flipbook on the November Little Joys card: a little hardcover book
   ========================================================== */
.flipbook { position: relative; display: grid; place-items: center; padding: 30px 12px 30px; touch-action: pan-y; isolation: isolate; }
.flipbook__book { position: relative; display: block; width: 100%; padding: 6px 7px 8px 16px; transform: rotate(-2deg); transition: transform .35s ease; }
.product-card:hover .flipbook__book { transform: rotate(0deg) translateY(-2px); }
.flipbook__cover {
  position: absolute; inset: 0; border-radius: 4px 10px 10px 4px;
  background: linear-gradient(135deg, #0b4d84 0%, #003865 55%, #002b4f 100%);
  box-shadow: 0 16px 30px rgba(0,56,101,.28), 0 3px 6px rgba(0,56,101,.2);
}
.flipbook__cover::before {   /* spine */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 14px; border-radius: 4px 0 0 4px;
  background: linear-gradient(90deg, #00223f 0%, #00467d 55%, #003865 100%);
  box-shadow: inset -1px 0 0 rgba(255,255,255,.12);
}
.flipbook__cover::after {    /* spine ridges */
  content: ""; position: absolute; left: 3px; width: 8px; top: 14%; bottom: 14%;
  border-top: 1.5px solid rgba(255,255,255,.22); border-bottom: 1.5px solid rgba(255,255,255,.22);
}
.flipbook__pages {
  position: relative; display: block; aspect-ratio: 1400 / 1081; background: #fff; border-radius: 1px 4px 4px 1px;
  perspective: 1600px;
  box-shadow: 1.5px 1.5px 0 #f1f5f9, 3px 3px 0 #dde5ee, 4.5px 4.5px 0 #f1f5f9, 6px 6px 0 #d3dde8;   /* page edges */
}
.flipbook__sheet { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; border-radius: inherit; }
.product-card .flipbook__sheet { transform: none; mix-blend-mode: normal; }
.flipbook__shade { position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0,56,101,.35), rgba(0,56,101,.05) 70%); }
.flipbook__leaf { position: absolute; inset: 0; z-index: 3; transform-origin: left center; transform-style: preserve-3d; visibility: hidden; pointer-events: none; }
.flipbook__leaf-front { backface-visibility: hidden; }
.flipbook__leaf-back { position: absolute; inset: 0; transform: rotateY(180deg); backface-visibility: hidden; background: linear-gradient(90deg, #eef3f8, #fff 55%); border-radius: inherit; }
.flipbook__gutter { position: absolute; left: 0; top: 0; bottom: 0; width: 16%; z-index: 4; pointer-events: none; background: linear-gradient(90deg, rgba(0,56,101,.22), rgba(0,56,101,.05) 45%, transparent); }
.flipbook__ribbon {
  position: absolute; right: 24%; bottom: -12px; width: 10px; height: 22px; z-index: -1;
  background: var(--sky); border: 1.5px solid var(--navy); border-top: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
}
.flipbook__nav {
  position: absolute; top: 50%; z-index: 6; width: 30px; height: 30px; transform: translateY(-50%);
  border: 0; border-radius: 50%; background: #fff; color: var(--navy); font-size: 20px; line-height: 1; cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,56,101,.2); opacity: 0; transition: opacity .2s ease;
}
.flipbook__nav--prev { left: 2px; }
.flipbook__nav--next { right: 2px; }
.flipbook:hover .flipbook__nav, .flipbook__nav:focus-visible { opacity: 1; }
@media (hover: none) { .flipbook__nav { opacity: 1; } }
.flipbook__count {
  position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); z-index: 6;
  font-size: 11px; font-weight: 600; color: var(--navy); background: #fff; padding: 2px 9px; border-radius: 99px;
  box-shadow: 0 2px 8px rgba(0,56,101,.12); font-variant-numeric: tabular-nums;
}

/* Shop cards: whole card is clickable, and changes colour when pointed at */
.product-grid--shop .product-card[data-url] { cursor: pointer; transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.product-grid.product-grid--shop .product-card[data-url]:hover {
  background: var(--sky); transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0,56,101,.14);
}
.product-grid.product-grid--shop .product-card.product-card--club[data-url]:hover { background: #004a85; }
.product-grid--shop .product-card[data-url]:hover .badge { background: var(--navy); color: #fff; }
.product-grid--shop .product-card--club[data-url]:hover .badge { background: #fff; color: var(--navy); }


/* Cozy things strip: a row of little illustrations resting on the footer */
/* The friends sit right on the top edge of the footer, on every page */
.cozy-things { position: relative; z-index: 1; margin: clamp(40px, 5vw, 64px) auto calc(-0.064 * min(100vw - 32px, 528px)); /* seat line of the friends lands on the footer edge */ padding: 0 var(--gutter); max-width: 560px; }
.cozy-things img { display: block; width: 100%; height: auto; }
.cozy-things + .footer { margin-top: 0; padding-top: 88px; }

/* Illustrated icons in the navy features section */
.features .features__icon { display: block; width: 92px; height: 92px; margin: 0 auto 12px; }

/* Banner under the hero */
.cozy-banner { margin: 0; background: var(--sky); }
.cozy-banner img { display: block; width: 100%; height: auto; }
/* Phones: crop the banner taller and focus on the iPad and penguin */
@media (max-width: 599px) {
  .cozy-banner img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 96% 50%; }
}

/* Coloring video: full-width loop with a small "Coloring now" pill (under "Color along with us") */
.video-hero {
  position: relative; min-height: clamp(420px, 52vw, 640px); margin: 24px clamp(0px, 1vw, 12px) 0;
  border-radius: var(--radius-lg); overflow: hidden; background: var(--navy);
}
.video-hero__video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.video-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse at center, rgba(0,56,101,.82) 0%, rgba(0,56,101,.62) 60%, rgba(0,56,101,.5) 100%);
}
.rec-pill {
  position: absolute; z-index: 2; top: clamp(20px, 3vw, 32px); left: clamp(20px, 3vw, 32px);
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px 8px 12px; border-radius: 999px;
  background: #fff; color: var(--navy); font: 700 14px/1 var(--font-body);
  box-shadow: 0 6px 18px rgba(0,30,60,.25);
}
.rec-pill i { width: 9px; height: 9px; border-radius: 50%; background: #e0524a; animation: rec-pulse 1.6s infinite; }
@keyframes rec-pulse {
  0% { box-shadow: 0 0 0 0 rgba(224,82,74,.6); }
  70% { box-shadow: 0 0 0 8px rgba(224,82,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(224,82,74,0); }
}
@media (prefers-reduced-motion: reduce) { .rec-pill i { animation: none; } }

/* Title and line centred on the coloring video */
.video-hero { display: grid; place-items: center; }
.video-hero__copy {
  position: relative; z-index: 2; max-width: 640px; padding: 72px var(--gutter) 48px;
  text-align: center; color: #fff; text-shadow: 0 2px 12px rgba(0,30,60,.35);
}
.video-hero__copy h2 { color: #fff; font-size: clamp(36px, 5.4vw, 64px); margin: 0 0 14px; }
.video-hero__copy p { margin: 0 0 28px; font-size: clamp(17px, 1.8vw, 21px); font-weight: 300; line-height: 1.5; }
.video-hero__copy strong { font-weight: 700; }


.video-hero__copy .btn { text-shadow: none; }
.video-hero :focus-visible { outline-color: #fff; }
.video-hero { margin-top: 0; scroll-margin-top: 140px; }

/* Good to know: light blue panel, each question a white card, penguin peeking over the top */
.faq-peek { position: relative; margin-top: 84px; }
.faq-peek__penguin {
  position: absolute; left: 50%; top: -70px; z-index: 2; width: 78px; height: auto;
  transform: translateX(-50%); filter: drop-shadow(0 8px 14px rgba(0,30,60,.18));
}
.panel--sky { background: var(--sky); }
.faq-peek .panel { padding: 72px 0 clamp(40px, 5vw, 56px); }
.faq-cards { max-width: 820px; }
.faq-cards .section__title { margin-bottom: 28px; }
.faq-cards__list { display: grid; gap: 12px; }
.faq-cards details { background: #fff; border-radius: var(--radius-md); padding: 0 24px; box-shadow: 0 4px 14px rgba(0,56,101,.06); }
.faq-cards summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 0; font: 700 18px/1.3 var(--font-display); font-variation-settings: "SOFT" 100;
}
.faq-cards summary::-webkit-details-marker { display: none; }
.faq-cards summary::after {
  content: "+"; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sky); color: var(--navy); font: 500 22px/1 var(--font-body); transition: transform .2s ease, background .2s ease;
}
.faq-cards details[open] summary::after { transform: rotate(45deg); background: var(--navy); color: #fff; }
.faq-cards details p { margin: -4px 0 22px; color: var(--muted); max-width: 62ch; }
.faq-cards__ask { text-align: center; margin: 24px 0 0; color: var(--muted); }
.faq-cards__ask a { color: var(--navy); font-weight: 700; }

/* Cozy Club: the friends at the movies, sitting just below the stack of pages in the hero */
.club-hero__friends {
  position: relative; z-index: 2; display: block; width: min(340px, 72%); height: auto;
  margin: clamp(-72px, -6vw, -40px) auto 0; filter: drop-shadow(0 10px 14px rgba(0,56,101,.12));
}
.section + .faq-peek { margin-top: 24px; } /* after an unpadded section (Cozy Club "how it works"), its own bottom padding already gives the penguin room */

/* Everything you need: big title on the left, the four features in a 2 x 2 grid on the right */
.features-split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .features-split { grid-template-columns: .85fr 1.4fr; gap: 72px; } }
.features-split__title { color: #fff; font-size: clamp(32px, 4vw, 50px); line-height: 1.08; margin: 0; }
@media (max-width: 959px) { .features-split__title { text-align: center; } }
.features.features--split { gap: 32px 36px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .features.features--split { grid-template-columns: repeat(2, 1fr); } }
.features--split li { display: flex; gap: 16px; align-items: flex-start; text-align: left; padding: 0; }
.features--split .features__icon { width: 72px; height: 72px; flex: none; margin: -6px 0 0; }
.features--split h3 { font-size: 20px; margin: 0 0 6px; }
/* Features on a white or light panel: navy title, soft grey-blue text (a navy panel keeps white text) */
.panel:not(.panel--navy) .features-split__title { color: var(--navy); }
.panel:not(.panel--navy) .features p { color: var(--muted); opacity: 1; font-weight: 400; }

/* Homepage Cozy Club: text on the left, a navy cinema ticket with the friends sitting on top */
@media (min-width: 900px) { .club-banner--ticket { grid-template-columns: 1.1fr 1fr; gap: 56px; } }
.club-banner--ticket { gap: 40px; }
.club-ticket-wrap { position: relative; max-width: 420px; width: 100%; justify-self: center; }
.club-ticket__friends { position: relative; z-index: 2; display: block; width: 62%; height: auto; margin: 0 auto -7%; }
.club-ticket {
  position: relative; background: var(--navy); color: #fff; border-radius: 22px; padding: 44px 28px 26px; text-align: center;
  box-shadow: 0 20px 40px rgba(0,56,101,.22);
}
.club-ticket .pill { background: var(--sky); color: var(--navy); }
.club-ticket__admit { margin: 18px 0 6px; font: 700 12px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.club-ticket__price { margin: 0; font: 800 44px/1 var(--font-display); font-variation-settings: "SOFT" 100; }
.club-ticket__price small { font-size: 18px; font-weight: 600; }
.club-ticket__was { margin: 8px 0 0; font-size: 15px; opacity: .75; }
.club-ticket__tear { position: relative; border-top: 2px dashed rgba(255,255,255,.35); margin: 22px -28px; }
.club-ticket__tear::before, .club-ticket__tear::after { content: ""; position: absolute; top: -15px; width: 28px; height: 28px; border-radius: 50%; background: #fff; }
.club-ticket__tear::before { left: -14px; }
.club-ticket__tear::after { right: -14px; }
.club-ticket .btn { width: 100%; }
.panel--navy .club-ticket :focus-visible, .club-ticket :focus-visible { outline-color: #fff; }

/* Homepage: second Cozy Club banner, shaped like a ticket with a tear-off stub along the bottom */
.club-seat-wrap { margin-top: 24px; }
.club-seat { position: relative; background: #fff; border-radius: var(--radius-lg); }
.club-seat__top { display: grid; gap: 28px; align-items: center; padding: clamp(28px, 5vw, 56px) clamp(28px, 5vw, 56px) clamp(28px, 4vw, 40px); }
@media (min-width: 860px) { .club-seat__top { grid-template-columns: 1.1fr 1fr; gap: 48px; } }
.club-seat h2 { font-size: clamp(30px, 4vw, 46px); }
.club-seat .eyebrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.club-seat__lead { margin: 14px 0 0; font-size: 18px; max-width: 44ch; }
.club-seat .ticks { margin-top: 20px; }
.club-seat__art img { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
/* dashed tear line with round notches "cut" out of both edges (coloured like the page) */
.club-seat__tear { position: relative; border-top: 2px dashed var(--line); margin: 0 26px; }
.club-seat__tear::before, .club-seat__tear::after { content: ""; position: absolute; top: -18px; width: 36px; height: 36px; border-radius: 50%; background: var(--sky-bg); }
.club-seat__tear::before { left: -44px; }
.club-seat__tear::after { right: -44px; }
.club-seat__stub { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; padding: clamp(22px, 3vw, 30px) clamp(28px, 5vw, 56px); }
.club-seat__admit { display: block; margin-bottom: 6px; color: var(--muted); font: 700 11px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; }
.club-seat__price { margin: 0; font: 700 28px/1 var(--font-display); font-variation-settings: "SOFT" 100; }
.club-seat__price s { font-size: 16px; color: var(--muted); font-weight: 500; }
.club-seat__buy { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; column-gap: 24px; }
.club-seat__buy .club-seat__admit { grid-column: 1 / -1; }
.club-seat__buy .btn { padding: 0 44px; }
/* the cute ticket details on the right: row, seat, snacks, what's showing */
.club-seat__info { display: grid; grid-template-columns: repeat(2, auto); margin: 0; border: 2px solid var(--navy); border-radius: 14px; overflow: hidden; }
@media (min-width: 760px) { .club-seat__info { grid-template-columns: repeat(4, auto); } }
.club-seat__info div { padding: 12px 18px; text-align: center; border-color: var(--navy); border-style: solid; border-width: 0; }
.club-seat__info dt { color: var(--muted); font: 700 10px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 6px; }
.club-seat__info dd { margin: 0; font: 800 18px/1.1 var(--font-display); font-variation-settings: "SOFT" 100; color: var(--navy); white-space: nowrap; }
@media (min-width: 760px) { .club-seat__info div + div { border-left-width: 2px; } }
@media (max-width: 759px) {
  .club-seat__info { grid-template-columns: 1fr 1fr; }
  .club-seat__info div { padding: 12px 10px; }
  .club-seat__info dd { white-space: normal; }
  .club-seat__info div:nth-child(even) { border-left-width: 2px; }
  .club-seat__info { display: none; } /* phones: no ticket details, just price and button */
}
@media (max-width: 599px) {
  .club-seat__buy { width: 100%; grid-template-columns: 1fr; text-align: center; }
  .club-seat__buy .btn { width: 100%; margin-top: 16px; }
  .club-seat__info { width: 100%; }
  .club-seat__tear::before, .club-seat__tear::after { width: 28px; height: 28px; top: -14px; }
  .club-seat__tear::before { left: -40px; }
  .club-seat__tear::after { right: -40px; }
}


/* Coloring video with "Everything you need" sitting on it, under the Color along text */
.video-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.video-hero::before {
  background:
    linear-gradient(to bottom, rgba(0,40,75,0) 35%, rgba(0,40,75,.45) 100%),
    radial-gradient(ellipse at center, rgba(0,56,101,.82) 0%, rgba(0,56,101,.66) 60%, rgba(0,56,101,.55) 100%);
}
.video-hero__copy { padding-bottom: 0; }
.video-hero__features { position: relative; z-index: 2; width: 100%; max-width: 1140px; padding: 0 var(--gutter) clamp(40px, 5vw, 64px); color: #fff; }
.video-hero__features-title {
  margin: clamp(40px, 5vw, 56px) auto 28px; padding-top: clamp(32px, 4vw, 44px); max-width: 760px;
  border-top: 1px solid rgba(255,255,255,.25); text-align: center; color: #fff;
  font-size: clamp(22px, 2.4vw, 28px); text-shadow: 0 2px 12px rgba(0,30,60,.35);
}
.features.features--video { gap: 24px 32px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .features.features--video { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .features.features--video { grid-template-columns: repeat(4, 1fr); gap: 28px; } }
.features--video li { display: flex; gap: 14px; align-items: flex-start; text-align: left; padding: 0; }
.features--video .features__icon { width: 60px; height: 60px; flex: none; margin: -4px 0 0; }
.features--video h3 { color: #fff; font-size: 18px; margin: 0 0 4px; }
.features--video p { margin: 0; opacity: 1; color: rgba(255,255,255,.88); font-weight: 300; font-size: 15px; text-shadow: 0 1px 8px rgba(0,30,60,.35); }
@media (min-width: 1100px) {
  .features--video li { flex-direction: column; align-items: center; text-align: center; }
  .features--video .features__icon { width: 76px; height: 76px; margin: 0 0 6px; }
}
/* the club ticket now sits right before the story, so don't double the gap between them */
#club + #about { padding-top: 0; }
/* the video now only carries "Everything you need": a bigger title, no divider */
.video-hero__features { padding-top: clamp(88px, 9vw, 112px); }
.video-hero__features-title { margin: 0 auto clamp(32px, 4vw, 48px); padding-top: 0; border-top: 0; max-width: 820px; font-size: clamp(30px, 4vw, 50px); line-height: 1.1; }

/* Everything you need: navy card, the coloring video in its own rounded frame, the features beside it */
.video-split-section { scroll-margin-top: 120px; }
.video-split { display: grid; gap: 28px; align-items: center; background: var(--navy); color: #fff; border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 28px); }
@media (min-width: 900px) { .video-split { grid-template-columns: .9fr 1.1fr; gap: 48px; } }
.video-split__video { position: relative; aspect-ratio: 4 / 5; max-height: 560px; width: 100%; border-radius: 20px; overflow: hidden; background: var(--navy-deep); }
@media (min-width: 900px) { .video-split__video { aspect-ratio: auto; height: 100%; min-height: 480px; max-height: none; } }
.video-split__video video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.video-split__video .rec-pill { top: 16px; left: 16px; }
.video-split__copy { padding: clamp(4px, 2vw, 24px) clamp(4px, 2vw, 24px) clamp(12px, 2vw, 24px) 0; }
.video-split h2 { color: #fff; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; margin: 0 0 28px; }
.video-split__features { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.video-split__features li { display: flex; gap: 14px; align-items: flex-start; }
.video-split__features .features__icon { width: 58px; height: 58px; flex: none; margin-top: -4px; }
.video-split__features h3 { color: #fff; font-size: 18px; margin: 0 0 4px; }
.video-split__features p { margin: 0; font-size: 15px; font-weight: 300; color: rgba(255,255,255,.88); }
.video-split :focus-visible { outline-color: #fff; }


/* Tool products: "Inside your box" as a packing list, with the misucreates case peeking over the top */
.packing { position: relative; max-width: 760px; margin: 0 auto; }
.packing__top { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 0 0 16px; }
.packing__case { flex: none; width: 112px; height: auto; transform: rotate(-4deg); filter: drop-shadow(0 8px 12px rgba(0,56,101,.16)); }
.packing__title { margin: 0; font-size: clamp(30px, 4vw, 42px); line-height: 1.05; }
.packing__card { background: #fff; border-radius: var(--radius-lg); border: 2px dashed rgba(0,56,101,.25); outline: 8px solid #fff; padding: 28px clamp(18px, 3.5vw, 36px) 24px; }
.packing__head { font-size: 15px; line-height: 1.3; color: var(--muted); margin: 6px 0 0; }
.packing__list { list-style: none; margin: 0; padding: 0; display: grid; }
.packing__item { display: grid; grid-template-columns: 26px 44px 1fr 22px; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px dashed rgba(0,56,101,.22); }
.packing__num { font: 800 13px/1 var(--font-display); font-variation-settings: "SOFT" 100; color: var(--muted); }
.packing__art { width: 44px; height: 44px; border-radius: 50%; background: var(--sky); display: grid; place-items: center; }
.packing__art svg { width: 36px; height: 36px; overflow: visible; }
.packing__art .packing__line { width: 26px; height: 26px; fill: none; stroke: var(--navy-deep); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.packing__item h3 { font-size: 16px; margin: 0 0 2px; }
.packing__item p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.4; }
.packing__tick { width: 22px; height: 22px; border-radius: 6px; background: var(--navy); display: grid; place-items: center; }
.packing__tick svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.packing__note { text-align: center; margin: 14px auto 0; color: var(--navy-deep); font-size: 14px; }
@media (min-width: 760px) { .packing__list { grid-template-columns: 1fr 1fr; column-gap: 32px; } }
@media (max-width: 499px) { .packing__item { grid-template-columns: 44px 1fr 22px; } .packing__num { display: none; } }
.packing--single { max-width: 560px; }
.packing--single .packing__list { grid-template-columns: 1fr; }
@media (max-width: 499px) { .packing__case { width: 84px; } .packing__top { gap: 12px; } }
/* Tool products: less room around the Inside your box card */
.details.details--box { padding: clamp(32px, 4vw, 48px) 0; }
/* Product page: "you might also like", a bit tighter above and below */
.section.related { padding: clamp(40px, 5vw, 56px) 0 clamp(4px, 1vw, 12px); }

/* "use it in procreate": the brushes video inside the iPad frame */
.tablet__screen--video { aspect-ratio: 1030 / 720; height: auto; background: #fff; }
.tablet__screen--video video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* "use it in procreate" with the brushes video: steps as a dotted path on the left,
   the iPad tilted on the right with a "Choosing a brush" pill */
.steps--video .swatches { display: none; }
.steps--video .tablet--big { max-width: 600px; }
.steps--video .steps__copy ol { position: relative; margin: 24px 0 28px; }
.steps--video .steps__copy ol::before { content: ""; position: absolute; left: 15px; top: 16px; bottom: 16px; border-left: 2px dashed rgba(0,56,101,.25); }
.steps--video .steps__copy li { padding-left: 48px; margin-bottom: 0; padding-bottom: 18px; min-height: 32px; }
.steps--video .steps__copy li:last-child { padding-bottom: 0; }
.steps--video .steps__copy li span { display: block; padding-top: 5px; }
.steps--video .steps__copy li::before {
  top: 0; width: 32px; height: 32px; background: var(--sky); color: var(--navy); border: 2px solid #fff; z-index: 1;
  font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 800; font-size: 14px;
}
@media (min-width: 900px) {
  .steps--video .steps__grid { grid-template-columns: 1fr 1.15fr; gap: 56px; }
  .steps--video .steps__media { order: 2; }
  .steps--video .tablet--video { transform: rotate(2deg); }
}

/* A realistic iPad (landscape) for the brushes video: space-grey aluminium edge, black glass bezel,
   front camera on the long edge, top and volume buttons, and a soft glare across the screen */
.tablet.tablet--video {
  position: relative; aspect-ratio: auto; padding: clamp(10px, 1.6vw, 15px); border-radius: clamp(22px, 3vw, 32px);
  background: #121214;
  box-shadow:
    0 0 0 1px #3a3b3f,
    0 0 0 3px #9a9da3,
    0 0 0 4px #d4d6da,
    0 0 0 5px #6d7076,
    0 34px 60px -18px rgba(15,35,65,.55),
    0 14px 28px rgba(15,35,65,.18);
}
.tablet--video .tablet__screen--video { position: relative; border-radius: clamp(10px, 1.4vw, 16px); }
.tablet--video .tablet__screen--video::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(120deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 28%, rgba(255,255,255,0) 42%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}
.ipad-cam { position: absolute; top: clamp(3px, .6vw, 6px); left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #3b4a63 0 25%, #0a0a0c 45%); box-shadow: 0 0 0 1px #2a2b2e; }
.ipad-btn { position: absolute; background: linear-gradient(#b9bcc1, #7d8086); }
.ipad-btn--top { top: -8px; right: 12%; width: 9%; height: 4px; border-radius: 3px 3px 0 0; }
.ipad-btn--vol { right: -8px; top: 14%; width: 4px; height: 9%; border-radius: 0 3px 3px 0; }
.ipad-btn--vol2 { top: 26%; }
.tablet--video .rec-pill { top: auto; bottom: 12px; left: 12px; z-index: 1; }

/* Steps with a title and a line; the download step shows an arrow instead of a number */
.steps__copy li.step--titled strong { display: block; color: var(--navy-deep); font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 700; font-size: 18px; line-height: 1.25; margin-bottom: 3px; }
.steps__copy li.step--titled span { color: var(--muted); }
.steps--video .steps__copy li.step--titled span { padding-top: 4px; }
.steps__copy li.step--download { counter-increment: none; }
.steps__copy li.step--download::before {
  content: ""; background-color: var(--navy); border-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v10M7.5 11l4.5 4.5 4.5-4.5M6 19.5h12'/%3E%3C/svg%3E");
  background-size: 16px 16px; background-position: center; background-repeat: no-repeat;
}
/* Cozy Club page: the friends in their cinema seats peek over the club questions instead of the penguin */
.faq-peek__penguin.faq-peek__friends { width: clamp(180px, 22vw, 230px); top: clamp(-112px, -10vw, -88px); }
.section + .faq-peek.faq-peek--friends { margin-top: clamp(64px, 8vw, 96px); }

/* The Palette Collection "inside your box": all ten palettes as little Procreate-style cards */
.palette-box { max-width: var(--maxw); margin: 0 auto; }
.palette-box .packing__top { margin-bottom: 28px; }
.palette-box__grid { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .palette-box__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .palette-box__grid { grid-template-columns: repeat(5, 1fr); } }
.palette-box__card { background: #fff; border-radius: var(--radius-md); padding: 14px 14px 16px; box-shadow: 0 6px 16px rgba(0,56,101,.06); transition: transform .25s ease, box-shadow .25s ease; }
.palette-box__card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(0,56,101,.12); }
.palette-box__card h3 { font-size: 15px; margin: 0 0 10px; display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.palette-box__card h3 small { font: 700 10px/1 var(--font-body); color: var(--muted); letter-spacing: .08em; }
.palette-box__sw { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.palette-box__sw i { aspect-ratio: 1; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1.5px rgba(15,35,65,.14); }
.palette-box .packing__note { margin-top: 20px; }

/* ---------- Palettes: before & after slider under the palette cards ---------- */
.ba-wrap { display: grid; gap: 28px; align-items: center; margin-top: clamp(40px, 5vw, 64px); }
@media (min-width: 960px) { .ba-wrap { grid-template-columns: 1fr 2fr; gap: 56px; } }
.ba-wrap__title { font-size: clamp(26px, 3.2vw, 36px); line-height: 1.05; margin: 0 0 10px; }
.ba-wrap__copy p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.5; max-width: 34ch; }
.ba-wrap__media { position: relative; padding: 0 0 28px 18px; }
.ba { --pos: 50%; position: relative; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 14px 30px rgba(0,56,101,.14); user-select: none; -webkit-user-select: none; touch-action: pan-y; cursor: ew-resize; }
.ba:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.ba img { display: block; width: 100%; height: auto; pointer-events: none; }
.ba__after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.ba__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgba(0,56,101,.15); }
.ba__knob { position: absolute; top: 50%; left: var(--pos); width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: var(--navy); display: grid; place-items: center; box-shadow: 0 6px 16px rgba(0,56,101,.3); }
.ba__knob svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ba__tag { position: absolute; top: 12px; padding: 6px 12px; border-radius: 999px; background: #fff; color: var(--navy); font: 700 12px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 4px 10px rgba(0,56,101,.12); }
.ba__tag--l { left: 12px; } .ba__tag--r { right: 9%; }   /* clear of the little logo in the page corner */
.ba-chip { position: absolute; left: 0; bottom: 0; z-index: 2; width: clamp(132px, 18vw, 190px); background: #fff; border: 2px solid var(--navy-deep); border-radius: 12px; padding: 10px 12px 12px; box-shadow: 0 10px 24px rgba(0,56,101,.18); transform: rotate(-6deg); }
.ba-chip p { margin: 0 0 6px; font: 700 13px/1.1 var(--font-display); font-variation-settings: "SOFT" 100; color: var(--navy-deep); }
.ba-chip__sw { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.ba-chip__sw i { aspect-ratio: 1; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1.5px rgba(15,35,65,.14); }
@media (max-width: 499px) { .ba-wrap__media { padding: 0 0 22px 10px; } .ba__tag { font-size: 10px; padding: 5px 9px; } .ba__knob { width: 38px; height: 38px; margin: -19px 0 0 -19px; } }

/* Cozy Club shop card: this month's bonuses in a soft box under the line */
.club-card__bonus { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.12); color: #fff; font-size: 12.5px; line-height: 1.4; }
/* Shop cards: the description lines differ in length, so the price sits just above the button on every card */
.product-grid--shop .product-card .price { margin-top: auto; padding-top: 12px; }
.product-grid--shop .product-card .price ~ .product-card__buy, .product-grid--shop .product-card .price ~ .product-card__view { margin-top: 0; }
.pack-card__meta .nobr { white-space: nowrap; }
.pack-card__meta .meta-long { display: block; text-wrap: balance; }   /* a long part gets its own lines, evened out so no word sits alone */
/* Creative bonuses art on the club page: keep each picture inside its tile */
.welcome__gift { min-width: 0; overflow: hidden; }
.welcome__gift > .tool-art { width: 100%; min-width: 0; }
.welcome__gift > .tool-art svg { display: block; width: 100%; height: auto; }
/* Subscribe & save: "Explore what's in the club" as a soft blue bar with the cinema friends and an arrow button */
.club-link { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 8px 10px 8px 10px; border-radius: 14px; background: var(--sky); color: var(--navy); text-decoration: none; transition: background-color .2s ease; }
.club-link:hover { background: #cfe2f1; }
.club-link img { width: 62px; height: auto; flex: none; }
.club-link strong { display: block; font-size: 15px; line-height: 1.25; }
.club-link small { display: block; font-size: 13px; color: var(--muted); font-weight: 500; line-height: 1.3; }
.club-link i { margin-left: auto; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-style: normal; transition: transform .25s ease; }
.club-link:hover i { transform: translateX(3px); }
/* Note under the buy button: one line on wider screens (product.js shrinks the text slightly if needed) */
@media (min-width: 560px) { .pdp__note-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }

/* ---------- Club page: "how it works" as a dotted timeline with "when" labels ---------- */
.how-line { list-style: none; margin: 48px 0 0; padding: 0; display: grid; gap: 28px; position: relative; }
.how-line::before { content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; border-left: 2px dashed rgba(0,56,101,.3); }
.how-line li { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start; }
.how-line__dot { width: 56px; height: 56px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font: 800 22px/1 var(--font-display); font-variation-settings: "SOFT" 100; border: 4px solid var(--sky-bg); position: relative; z-index: 1; }
.how-line__when { display: inline-block; margin-bottom: 6px; padding: 5px 10px; border-radius: 999px; background: var(--sky); color: var(--navy); font: 700 11px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.how-line h3 { font-size: 20px; margin: 0; }
.how-line p { margin: 6px 0 0; color: var(--muted); font-size: 15px; line-height: 1.45; }
@media (min-width: 960px) {
  .how-line { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .how-line::before { left: 12%; right: 12%; top: 28px; bottom: auto; border-left: 0; border-top: 2px dashed rgba(0,56,101,.3); }
  .how-line li { grid-template-columns: 1fr; text-align: center; justify-items: center; align-content: start; gap: 14px; }
  .how-line p { max-width: 28ch; margin-inline: auto; }
}
.section.welcome + .faq-peek.faq-peek--friends { margin-top: clamp(128px, 13vw, 160px); }   /* room for the cinema friends below the bonuses card */

/* ---------- Club page: "your creative bonuses" as a navy unboxing panel ---------- */
.bonus-box { background: var(--navy); color: #fff; border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 52px); display: grid; gap: 32px; align-items: center; }
@media (min-width: 960px) { .bonus-box { grid-template-columns: 1fr 1fr; gap: 56px; } }
.bonus-box .eyebrow { color: var(--sky); }
.bonus-box h2 { color: #fff; font-size: clamp(30px, 4vw, 44px); margin: 0; }
.bonus-box__lead { color: rgba(255,255,255,.82); font-size: 17px; line-height: 1.5; margin: 12px 0 0; max-width: 52ch; }
.bonus-box__list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.bonus-box__list li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.bonus-box__list li > span { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.12); display: grid; place-items: center; font: 800 16px/1 var(--font-display); font-variation-settings: "SOFT" 100; color: var(--sky); }
.bonus-box__list strong { display: block; font-size: 17px; }
.bonus-box__list small { display: block; color: rgba(255,255,255,.75); font-size: 14px; line-height: 1.45; margin-top: 2px; }
.bonus-box__worth { margin: 22px 0 0; font-size: 15px; color: rgba(255,255,255,.85); }
.bonus-box__worth b { color: #fff; }
.bonus-box__stage { position: relative; min-height: 340px; }
.bonus-box__case { position: absolute; left: 0; top: 0; width: 58%; height: auto; transform: rotate(-6deg); filter: drop-shadow(0 18px 24px rgba(0,0,0,.3)); }
.bonus-box__board { position: absolute; right: 0; bottom: -4%; width: 50%; height: auto; transform: rotate(5deg); filter: drop-shadow(0 18px 24px rgba(0,0,0,.3)); }
.bonus-box__tag { position: absolute; right: 6%; top: 2%; z-index: 2; padding: 8px 14px; border-radius: 999px; background: var(--sky); color: var(--navy); font: 700 12px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; transform: rotate(6deg); }
@media (max-width: 599px) { .bonus-box__stage { min-height: 240px; } }

/* ---------- Club page: "this month's creative bonuses" as two product cards ---------- */
.bonus-cards__head { text-align: center; }
.bonus-cards__head h2 { font-size: clamp(30px, 4vw, 44px); margin: 0; }
.bonus-cards__head > p:not(.eyebrow) { color: var(--muted); font-size: 17px; line-height: 1.5; margin: 12px auto 0; max-width: 52ch; }
.bonus-cards { display: grid; gap: 20px; margin-top: 32px; }
@media (min-width: 860px) { .bonus-cards { grid-template-columns: 1fr 1fr; gap: 24px; } }
.bonus-card { background: #fff; border-radius: var(--radius-lg); padding: 26px; display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: center; }
.bonus-card > img { width: 120px; height: auto; filter: drop-shadow(0 10px 16px rgba(0,56,101,.16)); }
.bonus-card h3 { font-size: 22px; margin: 0; }
.bonus-card p { margin: 6px 0 12px; color: var(--muted); font-size: 15px; line-height: 1.45; }
.bonus-card__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.bonus-card__chips span { padding: 6px 10px; border-radius: 999px; background: var(--sky-bg); color: var(--navy-deep); font: 600 13px/1 var(--font-body); }
.bonus-card__dots { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; max-width: 220px; margin-bottom: 12px; }
.bonus-card__dots i { aspect-ratio: 1; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(15,35,65,.12); }
.bonus-card__worth { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.bonus-card__worth s { color: var(--muted); }
.bonus-card__worth b { padding: 5px 10px; border-radius: 999px; background: var(--navy); color: #fff; font: 700 11px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.bonus-cards__foot { text-align: center; margin: 22px 0 0; color: var(--navy-deep); font-size: 15px; }
@media (max-width: 499px) {
  .bonus-card { grid-template-columns: 1fr; text-align: center; }
  .bonus-card > img { margin: 0 auto; }
  .bonus-card__chips, .bonus-card__worth { justify-content: center; }
  .bonus-card__dots { margin-inline: auto; }
}
.section + .section.welcome { padding-top: clamp(8px, 2vw, 24px); }   /* club page: bonuses sit closer to "how it works" */
/* Club page "how it works": tighter spacing above and below */
.section.section--how { padding: clamp(40px, 5vw, 56px) 0 clamp(32px, 4vw, 48px); }
.section--how .how-line { margin-top: 36px; }
/* Club page bonuses in a navy box: white text, the two cards stay white */
.bonus-panel { background: var(--navy); color: #fff; border-radius: var(--radius-lg); padding: clamp(32px, 4.5vw, 56px) clamp(20px, 4vw, 48px); }
.bonus-panel .bonus-cards__head .eyebrow { color: var(--sky); }
.bonus-panel .bonus-cards__head h2 { color: #fff; }
.bonus-panel .bonus-cards__head > p:not(.eyebrow) { color: rgba(255,255,255,.82); }
.bonus-panel .bonus-card { box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.bonus-panel .bonus-cards__foot { color: rgba(255,255,255,.9); }
/* Big "bonus!" sticker on the corner of the navy bonuses box */
.bonus-panel { position: relative; }
.bonus-panel__burst { position: absolute; top: clamp(-64px, -4.5vw, -40px); right: clamp(-12px, 1.5vw, 24px); z-index: 2; width: clamp(140px, 15vw, 196px); aspect-ratio: 1; display: grid; place-items: center; transform: rotate(12deg); filter: drop-shadow(0 10px 18px rgba(0,56,101,.28)); }
.bonus-panel__burst svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--sky); stroke: var(--navy); stroke-width: 2.5; stroke-linejoin: round; }
.bonus-panel__burst span { position: relative; color: var(--navy); font: 800 clamp(24px, 2.7vw, 34px)/1 var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; }
@media (max-width: 599px) { .bonus-panel__burst { top: -52px; right: 8px; width: 120px; } .bonus-panel__burst span { font-size: 21px; } .bonus-panel { margin-top: 36px; } }

/* ---------- Palettes page: palette library (left) + before/after page with the palette on top (right) ---------- */
.pal-merge { display: grid; gap: 32px; align-items: center; }
@media (min-width: 980px) { .pal-merge { grid-template-columns: 1fr 1.15fr; gap: 48px; } }
.pal-lib { background: #fff; border-radius: var(--radius-lg); padding: 18px; box-shadow: 0 8px 22px rgba(0,56,101,.07); }
.pal-lib header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 4px 12px; }
.pal-lib header b { font: 800 18px/1 var(--font-display); font-variation-settings: "SOFT" 100; color: var(--navy-deep); }
.pal-lib header span { font: 700 11px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pal-lib__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pal-lib__pal { border-radius: 12px; background: var(--sky-bg); padding: 9px 10px 10px; }
.pal-lib__pal p { margin: 0 0 6px; font: 700 12.5px/1.2 var(--font-body); color: var(--navy-deep); }
.pal-lib__sw { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; }
.pal-lib__sw i { aspect-ratio: 1; border-radius: 3px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(15,35,65,.12); }
.pal-lib__pal.is-used { background: var(--navy); }
.pal-lib__pal.is-used p { color: #fff; }
.pal-lib__pal.is-used p::after { content: " \2713"; color: var(--sky); }
.pal-media { position: relative; padding-top: 34px; }
.pal-chip { position: absolute; top: 0; right: 14px; z-index: 3; width: clamp(170px, 20vw, 230px); background: #fff; border: 2px solid var(--navy-deep); border-radius: 12px; padding: 10px 12px 12px; box-shadow: 0 12px 26px rgba(0,56,101,.2); transform: rotate(4deg); }
.pal-chip p { margin: 0 0 7px; display: flex; justify-content: space-between; gap: 6px; font: 700 14px/1.1 var(--font-display); font-variation-settings: "SOFT" 100; color: var(--navy-deep); }
.pal-chip p small { font: 700 10px/1.4 var(--font-body); letter-spacing: .08em; color: var(--muted); }
.pal-chip__sw { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.pal-chip__sw i { aspect-ratio: 1; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1.5px rgba(15,35,65,.14); }
.pal-media__caption { margin: 14px 0 0; text-align: center; font-size: 15px; color: var(--navy-deep); }
.pal-media__caption b { font-family: var(--font-display); }
@media (max-width: 499px) { .pal-lib { padding: 14px; } .pal-lib__pal p { font-size: 11.5px; } .pal-chip { width: 150px; right: 6px; } }
/* Palettes section spacing: the Rose Cottage card overlaps the page's top edge instead of pushing it down,
   even space above and below, the two columns sit level */
.palette-box .packing__top { margin-bottom: clamp(32px, 4vw, 48px); }
.pal-merge { gap: clamp(36px, 4vw, 48px) clamp(28px, 3.5vw, 44px); }
.pal-media { padding-top: 0; }
.pal-chip { top: -22px; right: 18px; }
.details.details--box:has(.palette-box) { padding: clamp(40px, 5vw, 64px) 0 clamp(48px, 6vw, 80px); }
@media (max-width: 979px) { .pal-media { margin-top: 18px; } }
@media (min-width: 980px) {
  .pal-merge { align-items: stretch; }
  .pal-lib { display: flex; flex-direction: column; }
  .pal-lib__grid { flex: 1; grid-auto-rows: 1fr; }
  .pal-lib__pal { display: flex; flex-direction: column; justify-content: center; }
  .pal-media { align-self: center; }
}
/* Product photos in the gallery (The Art Box) */
.view__photo { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); box-shadow: 0 14px 40px rgba(15,35,65,.12); }
.thumb.thumb--photo { padding: 0; }
.thumb.thumb--photo img { object-fit: cover; mix-blend-mode: normal; border-radius: 12px; }
/* Real product photo on shop cards and in the bag (The Art Box) */
.product-card__media img.card-photo { object-fit: cover; mix-blend-mode: normal; border-radius: 14px; transform: none; box-shadow: 0 8px 18px rgba(15,35,65,.12); }
.product-card:hover .product-card__media img.card-photo { transform: scale(1.02); }
.bag-line__thumb:has(.card-photo) { padding: 0; }
.bag-line__thumb img.card-photo { object-fit: cover; mix-blend-mode: normal; }
/* Product photos shown whole, never cropped: the gallery, thumbnails, shop card and bag all follow the photo's 4:3 shape */
.pdp__stage.pdp__stage--photo { aspect-ratio: 1448 / 1086; }
.pdp__stage--photo .view__photo { object-fit: contain; }
.thumb.thumb--photo { width: 104px; height: 78px; }
.thumb.thumb--photo img { object-fit: contain; }
.product-card__media:has(.card-photo) { display: flex; align-items: center; justify-content: center; }
.product-card__media img.card-photo { width: 100%; height: auto; aspect-ratio: 1448 / 1086; object-fit: contain; }
.bag-line__thumb:has(.card-photo) { padding: 0; background: none; }
.bag-line__thumb img.card-photo { height: auto; aspect-ratio: 1448 / 1086; object-fit: contain; border-radius: 8px; }
/* Photo gallery (The Art Box): sits in the middle of the section next to the buy box, thumbnails centred */
@media (min-width: 900px) { .pdp__gallery:has(.pdp__stage--photo) { align-self: center; } }
.pdp__gallery:has(.pdp__stage--photo) .thumbs { justify-content: center; }

/* Shop cards: the tag ("New", "Subscribe & save", "Coming soon") sits on the top-right corner of the image */
.product-grid--shop .product-card .badge { top: 40px; left: auto; right: 30px; box-shadow: 0 4px 12px rgba(0,56,101,.18); }
.product-grid--shop .product-card__media { padding-top: 16px; }
.product-grid--shop .product-card__media:has(.card-photo) { align-items: center; }
.card-photo-wrap { position: relative; display: block; width: 100%; }
.card-photo-wrap .card-photo { display: block; }
.product-card .badge.badge--on-photo { top: 10px; right: 10px; left: auto; }
/* The Cozy Club and coming-soon cards keep their tag at the top left, above the image (as before) */
.product-grid--shop .product-card--club .badge, .product-grid--shop .product-card.is-soon .badge { top: 18px; left: 18px; right: auto; box-shadow: none; }
.product-grid--shop .product-card--club .product-card__media, .product-grid--shop .product-card.is-soon .product-card__media { padding-top: 36px; }
/* Demo clip in the photo gallery (The Art Box): portrait video shown whole in the middle of the frame */
.view__video { height: 100%; width: auto; max-width: 100%; object-fit: contain; border-radius: var(--radius-lg); background: #fff; box-shadow: 0 14px 40px rgba(15,35,65,.12); }
.thumb--video { position: relative; }
.thumb--video img { object-fit: cover !important; }
.thumb__play { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: rgba(0,56,101,.85); }
.thumb__play::after { content: ""; position: absolute; left: 11px; top: 8px; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent #fff; }
/* Photos shrink-wrap to their own shape, so a square image has no extra box behind it */
.pdp__stage--photo .view__photo { width: auto; height: auto; max-width: 100%; max-height: 100%; }
/* An image with its own sticker hides the page's "New" sticker */
.pdp__stage--nobadge .starburst { opacity: 0; visibility: hidden; }
.starburst { transition: opacity .25s ease; }

/* ---------- Tablet with the screen recording: product gallery (November Little Joys) and shop card ---------- */
.view .tablet.tablet--gallery { width: 88%; max-width: 560px; }
.view .tablet--gallery .tablet__screen--video { background: #fff; }
.view .tablet--gallery .tablet__screen--video video { object-fit: contain; }
/* shop card: a smaller tablet that sits on the card, tag on its top-right corner */
.product-card__media:has(.card-tablet) { display: flex; align-items: center; justify-content: center; overflow: visible; padding: 28px 10px 6px; }
.card-tablet .tablet.tablet--video { width: 98%; margin: 0 auto; padding: 6px; border-radius: 14px; box-shadow: 0 0 0 1px #3a3b3f, 0 0 0 2px #9a9da3, 0 0 0 3px #d4d6da, 0 10px 20px -6px rgba(15,35,65,.35); }
.card-tablet .tablet--video .tablet__screen--video { border-radius: 7px; }
.card-tablet .ipad-cam { width: 3px; height: 3px; margin-left: -1.5px; top: 1.5px; }
.card-tablet .ipad-btn--top { top: -5px; height: 2px; }
.card-tablet .ipad-btn--vol { right: -5px; width: 2px; }
.card-tablet .badge--on-photo { top: -22px; right: -4px; }

/* Shop cards, all screen sizes: the picture fills the card (no empty band around it) and the cards use their width better.
   Photo and tablet cards take the height left over in their row, with the picture centred in it. */
.product-grid--shop .product-card { padding: 16px 12px 24px; }
.product-grid--shop .product-card__media:has(.card-photo) { aspect-ratio: auto; padding: 8px 0 0; flex: 1 0 auto; }
.product-grid--shop .product-card__media:has(.card-tablet) { aspect-ratio: auto; padding: 8px 0 0; flex: 1 0 auto; }
.product-grid--shop .card-tablet .tablet.tablet--video { width: 100%; padding: 8px; border-radius: 18px; }
.product-grid--shop .card-tablet .badge--on-photo { top: 10px; right: 10px; }   /* same spot as on the photo cards */
.product-grid--shop .product-card h3 { margin-top: 14px; }
/* Cozy Club and coming-soon cards: a shorter picture area, so no empty band under the pages */
.product-grid--shop .product-card--club .product-card__media { aspect-ratio: 1 / .84; padding-top: 40px; }
.product-grid--shop .product-card.is-soon .product-card__media { aspect-ratio: 1 / .98; padding-top: 52px; }
@media (min-width: 900px) { .product-grid--shop .product-card { padding: 16px 12px 22px; } }
/* Desktop: every card's picture area is the same height, so titles, prices and buttons line up across the row */
@media (min-width: 900px) {
  .product-grid--shop .product-card__media { aspect-ratio: 1 / .96; flex: none; }
  .product-grid--shop .product-card--club .product-card__media { aspect-ratio: 1 / .96; padding-top: 40px; }
  .product-grid--shop .product-card.is-soon .product-card__media { aspect-ratio: 1 / .96; padding-top: 44px; }
  .product-grid--shop .product-card__media:has(.card-photo) { padding: 0; }
  .product-grid--shop .product-card__media:has(.card-tablet) { padding: 0; }
}

/* December: the sleigh sticker replaces the "coming soon" drawing (shop card and product page) */
.product-grid--shop .product-card .product-card__media img.card-soon-img { mix-blend-mode: normal; transform: none; border-radius: 0; width: 100%; height: 100%; object-fit: contain; box-shadow: none; filter: none; }
.product-grid--shop .product-card:hover .product-card__media img.card-soon-img { transform: scale(1.03); }
.view__sticker { width: 92%; height: auto; max-height: 92%; object-fit: contain; filter: none; box-shadow: none; }
/* "the cozy details": a title and a line under each icon */
.fact p { margin: 6px auto 0; max-width: 28ch; }
.fact h3 { max-width: 20ch; margin-inline: auto; line-height: 1.2; }

/* "the cozy details": the sample page shows as it is (no white frame or shadow), set at a slight angle */
.details__hero img.details__cover--plain { background: none; padding: 0; transform: rotate(-3deg); max-height: 330px; box-shadow: 0 16px 34px rgba(15,35,65,.16), 0 2px 6px rgba(15,35,65,.08); }   /* a soft shadow, like a printed page */

/* "the cozy details": less space above the heading */
.section.details:not(.details--box) { padding-top: clamp(28px, 3.5vw, 44px); }

/* "the cozy details", scrapbook layout: the four stickers are stuck on the corners of the page, each benefit's words sit beside its sticker
   (scenes and penguin on the left, kindness and color on the right). The stickers share one box size and are scaled to look the same size. */
.details__hero { position: relative; padding: 26px 30px; }
/* stickers: written with img.<class> so they are not caught by the general ".details__hero img" frame style (white background, padding, shadow) */
.details__hero img.details__stk { position: absolute; z-index: 2; width: 112px; height: 94px; max-height: none; padding: 0; background: none; box-shadow: none; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(15,35,65,.18)); }
.details__hero img.details__stk--tl { top: 0; left: 0; transform: rotate(-3deg) scale(.76); transform-origin: 0 0; }
.details__hero img.details__stk--bl { bottom: 0; left: 0; transform: rotate(3deg) scale(1); transform-origin: 0 100%; }
.details__hero img.details__stk--tr { top: 0; right: 0; transform: rotate(3deg) scale(.74); transform-origin: 100% 0; }
.details__hero img.details__stk--br { bottom: 0; right: 0; transform: rotate(-3deg) scale(.7); transform-origin: 100% 100%; }
.details__grid--scrap .fact h3 { margin: 0; }
@media (min-width: 860px) {
  .details__grid--scrap { grid-template-columns: 1fr 1.3fr 1fr; }
  .details__hero { padding: 34px 46px; }
  .details__hero img.details__stk { width: 132px; height: 112px; }
  .fact--l { text-align: right; } .fact--l p { margin-inline: auto 0; }
  .fact--r { text-align: left; } .fact--r p { margin-inline: 0 auto; }
}
@media (max-width: 599px) {
  .details__hero { padding: 22px 14px; }
  .details__hero img.details__stk { width: 84px; height: 72px; }
}

/* "the cozy details" (scrapbook), wide screens: each benefit sits level with its sticker (top pair at the top corners,
   bottom pair at the bottom corners), headings and lines share one edge facing the page, and the headings read a touch larger */
@media (min-width: 860px) {
  .details__grid--scrap .fact h3 { font-size: 19px; max-width: none; }
  .details__grid--scrap .fact p { max-width: 30ch; }
  .details__grid--scrap .fact--l h3, .details__grid--scrap .fact--l p { margin-inline: auto 0; }
  .details__grid--scrap .fact--r h3, .details__grid--scrap .fact--r p { margin-inline: 0 auto; }
  .details__grid--scrap > :nth-child(1), .details__grid--scrap > :nth-child(4) { align-self: start; padding-top: clamp(26px, 2.6vw, 40px); }
  .details__grid--scrap > :nth-child(2), .details__grid--scrap > :nth-child(5) { align-self: end; padding-bottom: clamp(26px, 2.6vw, 40px); }
}
/* Bag: what each product includes, with the club's bonuses on their own line */
.bag-line__meta { line-height: 1.45; }
.bag-line__incl { display: block; margin-top: 6px; padding: 6px 9px; border-radius: 8px; background: var(--sky-bg); color: var(--navy-deep); font-weight: 500; }
.bag-line__note { display: block; margin-top: 4px; font-style: italic; }

/* About: the real desk photo instead of the faded line art */
.story__art--photo { min-height: 0; aspect-ratio: 4 / 3; }
.story__art--photo img { filter: none; mix-blend-mode: normal; opacity: 1; object-position: 50% 74%; }
@media (min-width: 860px) { .story__art--photo { aspect-ratio: auto; min-height: 100%; } }

/* Join the Cozy Club: the product video across the ticket, under the list */
.club-seat__visual { padding: 0 clamp(12px, 4vw, 48px) clamp(24px, 3.5vw, 40px); margin-top: calc(-1 * clamp(4px, 1.5vw, 16px)); }
.club-seat__visual video { display: block; width: 100%; height: auto; aspect-ratio: 1920 / 776; }
@media (max-width: 599px) { .club-seat__visual { padding-inline: 4px; margin-top: 0; } }
@media (max-width: 599px) { .club-seat__visual video { aspect-ratio: 1080 / 1560; } }

/* Cozy Club 16:9 video: replaces the cinema sticker (home ticket, shop card, club page hero) */
.club-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.club-seat__art--video .club-video { max-width: 620px; margin: 0 auto; }
.product-grid--shop .product-card--club .product-card__media { display: flex; align-items: center; justify-content: center; }
.club-card__video { display: block; width: 100%; background: #fff; border-radius: 14px; overflow: hidden; }
.club-hero__video { position: relative; z-index: 1; max-width: 620px; margin: 0 auto; background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 18px 40px rgba(15,35,65,.12); }
.club-hero__art:has(.club-hero__video) .club-hero__burst { top: -26px; left: -14px; right: auto; z-index: 2; }
.club-video.club-video--phone { aspect-ratio: 1080 / 1560; }

/* Cozy Club video, see-through and as big as it can be (replaces the 16:9 version) */
.club-video { aspect-ratio: 1920 / 776; background: none; }
.club-video.club-video--phone { aspect-ratio: 1080 / 1560; }
/* home ticket: words on top in two columns, the video right across the ticket */
@media (min-width: 860px) {
  .club-seat__top--split { grid-template-columns: 1fr 1fr; align-items: end; padding-bottom: clamp(16px, 2vw, 24px); }
  .club-seat__top--split .ticks { margin-top: 0; }
}
.club-seat__visual { margin-top: 0; padding: 0 clamp(8px, 2.5vw, 32px) clamp(20px, 3vw, 32px); }
@media (max-width: 599px) { .club-seat__visual { padding-inline: 4px; } }
/* Cozy Club page hero: words left, offer right, the video across the full width underneath */
.club-hero__video { max-width: none; margin: 0; background: none; border-radius: 0; overflow: visible; box-shadow: none; }
.club-hero__art { overflow: visible; }
@media (max-width: 959px) {
  .club-hero__copy { order: 1; } .club-hero__art { order: 2; } .club-hero__offer { order: 3; }
}
@media (min-width: 960px) {
  .club-hero__grid { align-items: start; }
  .club-hero__art { grid-column: 1 / -1; }
  .club-hero__copy { align-self: center; }
}
.club-hero__art:has(.club-hero__video) .club-hero__burst { top: -8px; left: auto; right: 0; }
/* shop card: no white frame, the video uses the full card width */
.club-card__video { background: none; border-radius: 0; overflow: visible; }
.product-grid--shop .product-card--club .product-card__media,
.product-grid--shop .product-card.product-card--club .product-card__media { aspect-ratio: auto; padding-top: 46px; padding-bottom: 6px; margin-inline: -6px; }
@media (min-width: 900px) {
  .product-grid--shop .product-card.product-card--club .product-card__media { aspect-ratio: 1 / .96; padding-top: 40px; padding-bottom: 0; }
}
@media (max-width: 859px) { .club-seat__top--split { gap: 4px; } }

/* back to the earlier layout: video beside the words (home ticket + Cozy Club hero) */
.club-seat__art--video .club-video { width: 100%; max-width: none; }
@media (max-width: 959px) { .club-hero__copy, .club-hero__art { order: 0; } }
@media (min-width: 960px) {
  .club-hero__grid { align-items: center; }
  .club-hero__art { grid-column: auto; }
}
/* Cozy Club page: give the video more room beside the offer */
@media (min-width: 960px) {
  .club-page .club-hero__grid, .club-hero__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: clamp(28px, 3vw, 48px); }
  .club-hero__video { width: 112%; margin-right: -12%; }
}

/* Cozy Club page hero (variant C + D): words with the video under them on the left, the offer card on the right */
.club-hero--split .club-hero__video { width: auto; margin: clamp(20px, 3vw, 32px) 0 0 -8px; }
.club-hero--split .club-offer { margin-top: 0; max-width: none; }
@media (max-width: 959px) { .club-hero--split .club-offer { margin-top: 4px; } }
@media (min-width: 960px) {
  .club-hero--split .club-hero__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; align-items: center; }
  .club-hero--split .club-hero__copy { align-self: center; }
}
/* Compact video: wide version is 1890 x 900 */
.club-video { aspect-ratio: 1890 / 900; }
.club-video.club-video--phone { aspect-ratio: 1080 / 1560; }
/* phones: the split Cozy Club video uses the full width of the home ticket and the shop card */
@media (max-width: 599px) {
  .club-seat__art--video { margin-inline: -20px; }
  .product-grid--shop .product-card.product-card--club .product-card__media { margin-inline: -10px; padding-top: 44px; }
}
/* announcement bar: messages can be links; only the visible one can be clicked */
.announce__msg { pointer-events: none; white-space: nowrap; }
.announce__msg.is-active { pointer-events: auto; }
.announce__msg a { color: inherit; text-decoration: none; }
.announce__msg a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 400px) { .announce { font-size: 13px; } }
/* new banner photo (4:3): full photo on phones, a wide crop centred on the tablet on bigger screens */
.cozy-banner img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 50%; }
@media (min-width: 600px) { .cozy-banner img { aspect-ratio: 3 / 1; object-position: 50% 74%; } }
@media (min-width: 1200px) { .cozy-banner img { max-height: 640px; width: 100%; } }
.cozy-banner picture { display: block; }
/* bag: the club shows the friends-at-the-cinema sticker */
.bag-line__thumb:has(.bag-line__cinema) { padding: 0; background: none; }
.bag-line__thumb img.bag-line__cinema { mix-blend-mode: normal; }
/* bag: November shows the same tablet as its shop card (the video's first frame in a dark tablet frame) */
.bag-line__thumb:has(.bag-tablet) { padding: 0; background: none; }
.bag-tablet { display: block; width: 100%; background: #1d1e22; border-radius: 9px; padding: 4px; box-shadow: 0 4px 10px rgba(15,35,65,.18); }
.bag-line__thumb .bag-tablet img { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 894; object-fit: cover; border-radius: 5px; mix-blend-mode: normal; }

/* header: account link next to the bag */
.account-btn { color: var(--navy); }