/* ============================================================================
   THE POW PERSON — BASE
   Tokens, reset, type and layout primitives, and the shared components every
   template uses (buttons, editorial link, section header, page header, price,
   badges, drawers). Colour tokens are overridden from the theme settings by an
   inline <style> in layout/theme.liquid.

   Root font-size is 62.5% so 1rem === 10px.
   ========================================================================= */

:root {
  --font-display: "Fredoka", "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", "Archivo Fallback", system-ui, -apple-system, sans-serif;

  --display-weight: 600;
  --display-tracking: -0.01em;
  --display-leading: 0.98;
  --display-transform: none;

  --text-display: clamp(4.26rem, 4.73vw, 6.816rem);
  --text-display-2: clamp(3.92rem, 3.5vw, 5.04rem);
  --text-display-3: clamp(2.6rem, 2.5vw, 3.6rem);
  --text-display-4: 2rem;

  --text-body: 1.4rem;
  --text-body-sm: 1.3rem;
  --text-body-xs: 1.2rem;
  --text-label: 1.2rem;
  --text-eyebrow: 0.9rem;
  --text-card-title: 1.4rem;
  --text-card-title-ag: 1.32rem;
  --text-page-title: 2.214rem;

  --leading-body: 1.3;
  --leading-prose: 1.5;
  --leading-card: 1.285;

  --tracking-card: 0.005em;
  --tracking-card-ag: -0.02em;
  --tracking-heading-ag: -0.03em;
  --tracking-eyebrow: 0.1em;

  --c-bg: 255, 255, 255;
  --c-bg-2: 238, 237, 251;
  --c-bg-3: 226, 224, 248;
  --c-fg: 20, 16, 74;
  --c-fg-2: 90, 86, 131;
  --c-border: 222, 220, 240;
  --c-interface: 226, 224, 248;
  --c-overlay: 20, 16, 74;
  --c-error: 208, 22, 22;
  --c-success: 86, 124, 92;
  --c-sale: 36, 25, 179;
  --c-accent: 36, 25, 179;
  --c-deep: 20, 16, 74;
  --c-sun: 255, 194, 26;
  --c-pop: 242, 52, 43;
  --c-leaf: 30, 155, 59;

  --c-button: var(--c-fg);
  --c-button-text: 255, 255, 255;
  --c-button-secondary: var(--c-bg-2);
  --c-button-secondary-text: var(--c-fg);

  --overlay-alpha: 0.15;
  --hover-opacity: 0.6;

  --radius-button: 999px;
  --radius-card-info: 14px;
  --radius-input: 10px;

  --gutter: 1.2rem;
  --gutter-editorial: 2.5rem;
  --gutter-editorial-lg: 5rem;
  --page-max: 139.6rem;
  --catalog-gutter: 0.4rem;

  --announcement-height: 3rem;
  --header-inner-height: 4.8rem;

  --dur-short: 100ms;
  --dur-default: 300ms;
  --dur-long: 500ms;
  --dur-image: 700ms;

  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-in-out-quint: cubic-bezier(0.602, 0.007, 0.374, 0.995);
  --ease-image: cubic-bezier(0.4, 0, 0.25, 1);

  --transition-image: transform var(--dur-image) var(--ease-image);
  --transition-label: transform 0.4s var(--ease-out-quart) 0.05s, color 0.4s var(--ease-out-quart);

  --z-header: 60;
  --z-drawer: 80;
  --z-modal: 90;
}

/* html[…] outranks the settings-driven :root block injected by the layout. */
html[data-scheme="dark"] {
  --c-bg: 13, 13, 13;
  --c-bg-2: 26, 26, 26;
  --c-bg-3: 34, 34, 34;
  --c-fg: 255, 255, 255;
  --c-fg-2: 150, 150, 150;
  --c-border: 48, 48, 48;
  --c-interface: 40, 40, 40;
  --c-button: 255, 255, 255;
  --c-button-text: 13, 13, 13;
  --c-button-secondary: 34, 34, 34;
  --c-button-secondary-text: 255, 255, 255;
  --c-sale: 255, 82, 82;
}

/* ---- Reset ---------------------------------------------------------------- */

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

html {
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--leading-body);
  color: rgb(var(--c-fg));
  background-color: rgb(var(--c-bg));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body[data-locked="true"] { overflow: hidden; }

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

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }

ul, ol { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: inherit; font-size: inherit; }
p, figure, blockquote, fieldset { margin: 0; }
fieldset { padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }

:focus-visible {
  outline: 0.1rem solid rgb(var(--c-fg));
  outline-offset: 0.2rem;
}

#MainContent:focus { outline: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link:focus {
  position: fixed !important;
  top: 1rem;
  left: 1rem;
  z-index: 100;
  width: auto;
  height: auto;
  clip: auto;
  clip-path: none;
  padding: 1rem 1.6rem;
  background: rgb(var(--c-bg));
  border: 0.1rem solid rgb(var(--c-fg));
}

[hidden] { display: none !important; }

/* ---- Layout primitives ---------------------------------------------------- */

.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.page-width {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter-editorial);
}
@media (min-width: 750px) {
  .page-width { padding-inline: var(--gutter-editorial-lg); }
}

.page-narrow {
  width: 100%;
  max-width: 96rem;
  margin-inline: auto;
  padding-inline: var(--gutter-editorial);
}
@media (min-width: 750px) {
  .page-narrow { padding-inline: var(--gutter-editorial-lg); }
}

/* ---- Type primitives ------------------------------------------------------ */

.display-1, .display-2, .display-3, .display-4 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  line-height: var(--display-leading);
  letter-spacing: var(--display-tracking);
  text-transform: var(--display-transform);
  word-break: break-word;
}
.display-1 { font-size: var(--text-display); }
.display-2 { font-size: var(--text-display-2); }
.display-3 { font-size: var(--text-display-3); }
.display-4 { font-size: var(--text-display-4); line-height: 1.2; }

.eyebrow {
  font-size: var(--text-eyebrow);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: rgb(var(--c-fg-2));
}

.label {
  font-size: var(--text-label);
  font-weight: 500;
  line-height: 1.5;
  text-transform: uppercase;
}

.prose { font-size: var(--text-body); line-height: var(--leading-prose); }
.muted { color: rgb(var(--c-fg-2)); }

/* ---- Rich text ------------------------------------------------------------ */

.rte { line-height: var(--leading-prose); }
.rte > * + * { margin-top: 1.2rem; }
.rte strong { font-weight: 500; }
.rte ul { list-style: none; margin: 0.8rem 0 0; padding: 0; }
.rte li { position: relative; padding-left: 1.4rem; margin-bottom: 0.4rem; }
.rte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 0.4rem;
  height: 0.1rem;
  background: currentColor;
}
.rte a { text-decoration: underline; text-underline-offset: 0.3rem; }
.rte h2, .rte h3 { font-weight: 500; font-size: var(--text-body); text-transform: uppercase; }
.rte img { margin-block: 2.4rem; }

/* ---- Underline-on-hover link --------------------------------------------- */

.link-line { position: relative; display: inline-block; }
.link-line::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.1rem;
  height: 0.1rem;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-default) var(--ease-out-quart);
}
.link-line:hover::after { transform: scaleX(1); transform-origin: left; }

.link-underline {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
  transition: opacity var(--dur-default);
}
.link-underline:hover { opacity: var(--hover-opacity); }

/* ---- Media ---------------------------------------------------------------- */

.media {
  position: relative;
  display: block;
  overflow: hidden;
  background-color: rgb(var(--c-bg-2));
}
.media > img,
.media > video,
.media > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.placeholder-svg { fill: rgba(var(--c-fg), 0.25); background-color: rgb(var(--c-bg-2)); }

/* ============================================================================
   LE SEUIL — the signature reveal
   Every hidden state is gated behind [data-reveal-ready] on <html>, which
   theme.js sets only once its observer runs. If the script fails, the page
   renders in its final state.
   ========================================================================= */

[data-reveal] {
  --seuil-duration: 900ms;
  --seuil-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal-ready] [data-reveal="up"] { overflow: hidden; }
[data-reveal-ready] [data-reveal="up"] > * {
  display: block;
  transform: translate3d(0, 105%, 0);
  transition: transform var(--seuil-duration) var(--seuil-ease) var(--reveal-delay, 0ms);
}
[data-reveal="up"][data-inview="true"] > * { transform: none; }

[data-reveal-ready] [data-reveal="frame"] {
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--seuil-duration) var(--seuil-ease) var(--reveal-delay, 0ms);
}
[data-reveal="frame"][data-inview="true"] { clip-path: inset(0 0 0 0); }
[data-reveal-ready] [data-reveal="frame"] img,
[data-reveal-ready] [data-reveal="frame"] video {
  transform: scale(1.04);
  transition: transform calc(var(--seuil-duration) + 300ms) var(--seuil-ease) var(--reveal-delay, 0ms);
}
[data-reveal="frame"][data-inview="true"] img,
[data-reveal="frame"][data-inview="true"] video { transform: none; }

[data-reveal-ready] [data-reveal="fade"] {
  opacity: 0;
  transform: translate3d(0, 1.2rem, 0);
  transition:
    opacity var(--seuil-duration) var(--seuil-ease) var(--reveal-delay, 0ms),
    transform var(--seuil-duration) var(--seuil-ease) var(--reveal-delay, 0ms);
}
[data-reveal="fade"][data-inview="true"] { opacity: 1; transform: none; }

@media (max-width: 749px) {
  [data-reveal] { --seuil-duration: 700ms; }
  [data-reveal="frame"] img { transform: none; transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal="fade"] { opacity: 1; transform: none; }
  [data-reveal="up"] > * { transform: none; }
  [data-reveal="frame"] { clip-path: none; }
  [data-reveal="frame"] img { transform: none; }
}

.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ============================================================================
   BUTTON — the label rolls up to a duplicate of itself on hover
   ========================================================================= */

.button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  flex-shrink: 0;
  min-height: 3.2rem;
  border: none;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 500;
  line-height: 1.5;
  text-transform: uppercase;
  border-radius: var(--radius-button);
  transition:
    color 0.45s var(--ease-out-quart),
    background-color 0.45s var(--ease-out-quart),
    border-color 0.45s var(--ease-out-quart);
}
.button__content {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  overflow: hidden;
}
.button__label {
  position: relative;
  display: block;
  transform: translateZ(0);
  transition: var(--transition-label);
}
.button__label::after {
  content: attr(data-label);
  position: absolute;
  inset: 100% auto auto 0;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .button:hover .button__label { transform: translate3d(0, -100%, 0); }
}

.button--primary {
  padding: 0.7rem 2.4rem;
  color: rgb(var(--c-button-text));
  background-color: rgb(var(--c-button));
}
.button--secondary {
  padding: 0.7rem 2.4rem;
  color: rgb(var(--c-button-secondary-text));
  background-color: rgb(var(--c-button-secondary));
}
.button--invert {
  padding: 0.7rem 2.4rem;
  color: rgb(13, 13, 13);
  background-color: rgb(255, 255, 255);
}
@media (min-width: 750px) {
  .button--primary,
  .button--secondary,
  .button--invert { padding: 0.7rem 4rem; }
}
.button--outline {
  padding: 0.6rem 1.2rem;
  color: rgb(var(--c-fg));
  background-color: transparent;
  border: 0.1rem solid rgb(var(--c-fg));
}
.button--editorial {
  width: 100%;
  min-height: 5.2rem;
  padding: 0 3.2rem;
  border-radius: 0;
  color: rgb(var(--c-button-text));
  background-color: rgb(var(--c-button));
  font-size: var(--text-body-sm);
  letter-spacing: 0.02em;
}
.button--editorial:disabled,
.button--editorial[aria-disabled="true"] { background-color: rgba(var(--c-fg), 0.2); opacity: 1; }
.button--text {
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  color: rgb(var(--c-fg));
  text-decoration: underline;
  text-underline-offset: 0.4rem;
  text-decoration-thickness: 0.1rem;
}
.button--text .button__label::after { content: none; }
@media (hover: hover) and (pointer: fine) {
  .button--text:hover { opacity: var(--hover-opacity); }
  .button--text:hover .button__label { transform: none; }
}
.button--block { width: 100%; }

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

.button[aria-busy="true"] .button__label { opacity: 0.4; }

/* ============================================================================
   EDITORIAL LINK — a word, an arrow, and a rule that draws itself
   ========================================================================= */

.editorial-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding-block: 0.4rem;
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
}
.editorial-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.1rem;
  background-color: currentColor;
  transform-origin: left;
  transition: transform 0.5s var(--ease-out-quart);
}
.editorial-link__arrow { display: block; transition: transform 0.5s var(--ease-out-quart); }
@media (hover: hover) and (pointer: fine) {
  .editorial-link::after { transform: scaleX(0); transform-origin: right; }
  .editorial-link:hover::after { transform: scaleX(1); transform-origin: left; }
  .editorial-link:hover .editorial-link__arrow { transform: translateX(0.4rem); }
}
.editorial-link:focus-visible { outline-offset: 0.6rem; }
.editorial-link--on-image { color: rgb(255, 255, 255); }
@media (hover: hover) and (pointer: fine) {
  .editorial-link--on-image::after {
    transform: scaleX(1);
    transform-origin: left;
    opacity: 0.55;
    transition: opacity 0.4s var(--ease-out-quart), transform 0.5s var(--ease-out-quart);
  }
  .editorial-link--on-image:hover::after { opacity: 1; }
}
@media (max-width: 749px) {
  .editorial-link { padding-block: 0.8rem; min-height: 4.4rem; }
}

/* ============================================================================
   SECTION HEADER — the rail that opens a homepage section
   ========================================================================= */

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding-block: 2rem 1.6rem;
  border-bottom: 0.1rem solid rgb(var(--c-border));
}
.section-header__title {
  font-size: var(--text-eyebrow);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: rgb(var(--c-fg-2));
  white-space: nowrap;
}
.section-header__link {
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.4rem;
  text-decoration-thickness: 0.1rem;
  transition: opacity var(--dur-default);
}
.section-header__link:hover { opacity: var(--hover-opacity); }

/* ============================================================================
   PAGE HEADER — breadcrumb + title for collections and content pages
   ========================================================================= */

.page-header { padding-top: 1.6rem; }
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding-block: 0.8rem;
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: rgb(var(--c-fg-2));
}
.breadcrumb a { transition: color var(--dur-default); }
.breadcrumb a:hover { color: rgb(var(--c-fg)); }
.breadcrumb__sep { opacity: 0.5; }
.page-header__title {
  margin-top: 2rem;
  margin-bottom: 1.2rem;
  font-size: var(--text-page-title);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: var(--tracking-heading-ag);
}
.page-header__description {
  max-width: 56rem;
  margin-bottom: 2.4rem;
  font-size: var(--text-body);
  line-height: var(--leading-prose);
  color: rgb(var(--c-fg-2));
}

/* ============================================================================
   PRICE / BADGES / SWATCHES
   ========================================================================= */

.price { font-size: var(--text-body); font-variant-numeric: tabular-nums; }
.price__compare {
  margin-left: 0.8rem;
  color: rgb(var(--c-fg-2));
  text-decoration: line-through;
}
.price__saving { margin-left: 0.8rem; font-size: var(--text-body-xs); color: rgb(var(--c-sale)); }

.badge {
  display: inline-flex;
  align-items: center;
  height: 2rem;
  padding-inline: 0.8rem;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background-color: rgb(var(--c-fg));
  color: rgb(var(--c-bg));
}
.badge--sold-out { background-color: rgb(117, 117, 117); color: rgb(255, 255, 255); }

.swatch-dot {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border: 0.1rem solid rgba(var(--c-fg), 0.2);
  background: var(--swatch, rgb(var(--c-bg-3)));
}

/* ============================================================================
   FORMS — the underline field used across newsletter, contact and account
   ========================================================================= */

.field { display: flex; flex-direction: column; gap: 0.6rem; }
.field__label {
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: rgb(var(--c-fg-2));
}
.field__input {
  width: 100%;
  padding: 1.2rem 0;
  background: none;
  border: none;
  border-bottom: 0.1rem solid rgb(var(--c-border));
  border-radius: 0;
  outline: none;
  font-size: var(--text-body);
  transition: border-color var(--dur-default);
  resize: vertical;
}
.field__input:focus { border-color: rgb(var(--c-fg)); }
.field__input::placeholder { color: rgb(var(--c-fg-2)); }

.form-message {
  font-size: var(--text-body-sm);
  line-height: var(--leading-prose);
}
.form-message--error { color: rgb(var(--c-error)); }
.form-message--success { color: rgb(var(--c-fg)); }
.form-message ul { margin-top: 0.4rem; }

/* ============================================================================
   DRAWERS — shared by cart, mobile navigation and search
   ========================================================================= */

.overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.overlay[data-open="true"] { opacity: 1; visibility: visible; }

.icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: opacity var(--dur-default);
}
.icon-button:hover { opacity: var(--hover-opacity); }

.icon { display: block; flex-shrink: 0; }

/* ---- Pagination ---------------------------------------------------------- */

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.6rem;
  padding-top: 6.4rem;
  font-size: var(--text-label);
  font-weight: 500;
  text-transform: uppercase;
}
.pagination a:hover { opacity: var(--hover-opacity); }
.pagination [aria-current="page"] { text-decoration: underline; text-underline-offset: 0.4rem; }

/* ---- Editorial label row (home sections) ---- */
.ed-label { display: flex; align-items: baseline; justify-content: space-between; gap: 1.6rem; padding: 4.8rem 1.6rem 1.2rem; font-size: 1.4rem; text-transform: uppercase; }
.ed-label.ed-label h2 { font: inherit; }
.ed-label a:hover { opacity: var(--hover-opacity); }

/* ============================================================================
   THE POW PERSON — brand layer: soft tiles, warm type, pill actions.
   ========================================================================= */
:root { --tile-radius: 2.2rem; --tile-gap: 1.2rem; }
.ed-label.ed-label { padding: 6.4rem 2rem 1.6rem; font-size: 1.5rem; text-transform: none; font-weight: 600; }
.ed-label.ed-label h2 { font-family: var(--font-display); font-size: clamp(2.6rem, 3vw, 4rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.ed-label a { text-decoration: underline; text-underline-offset: 0.4rem; }
.spotlight.spotlight, .looks.looks, .ed-tiles.ed-tiles { gap: var(--tile-gap); padding-inline: var(--tile-gap); }
.spotlight__item, .looks__item, .ed-tiles__item, .image-banner, .look__media, .highlights__feature { border-radius: var(--tile-radius); overflow: hidden; }
.image-banner { margin-inline: var(--tile-gap); }
.card__media, .product__plate { border-radius: 1.6rem; overflow: hidden; }
.spotlight__info h2, .spotlight .display-2 { font-size: clamp(3.2rem, 3.6vw, 5.2rem); }
.looks__bar, .mobile-nav__promo-label { border-radius: 999px; }
.badge { border-radius: 999px; }
.spotlight .spotlight__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 16, 74, 0.55) 0%, rgba(20, 16, 74, 0) 45%); pointer-events: none; }
.spotlight .spotlight__label { position: absolute; left: 2.4rem; right: 2.4rem; bottom: 2.4rem; z-index: 1; font-family: var(--font-display); font-size: clamp(2.8rem, 2.8vw, 4.4rem); font-weight: 600; line-height: 1; letter-spacing: -0.035em; text-transform: none; color: rgb(255, 255, 255); }
section.text-columns { align-items: start; padding: 8rem 2rem; }
section.text-columns h2 { font-family: var(--font-display); font-size: clamp(3.2rem, 4vw, 5.6rem); font-weight: 700; line-height: 0.95; letter-spacing: -0.04em; text-transform: none; }
section.text-columns .rte { font-size: clamp(1.6rem, 1.4vw, 2rem); line-height: 1.45; }
.ticker .ticker__word { font-weight: 700; letter-spacing: -0.04em; color: rgb(var(--c-fg)); }
.info-columns .info-columns__title { font-size: 1.5rem; text-transform: none; font-weight: 700; }
.info-columns .info-columns__text { font-size: 1.5rem; }
.image-banner .image-banner__caption { left: 2.4rem; bottom: 2.4rem; font-family: var(--font-display); font-size: clamp(2.8rem, 3.4vw, 5rem); font-weight: 600; letter-spacing: -0.035em; text-transform: none; color: rgb(255, 255, 255); }
.card .card__title { font-size: 1.5rem; font-weight: 600; }
.image-banner.image-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 16, 74, 0.5) 0%, rgba(20, 16, 74, 0) 40%); pointer-events: none; }

/* ---- POW world: stickers, paw trail, peeking cat ----------------------- */
.spotlight .spotlight__item::before { position: absolute; top: 2rem; right: 2rem; z-index: 2; padding: 0.6rem 1.4rem; border-radius: 999px; font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; color: #fff; transform: rotate(-8deg) scale(0); transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; }
.spotlight .spotlight__item:nth-child(1)::before { content: "Wouf !"; background: rgb(var(--c-leaf)); }
.spotlight .spotlight__item:nth-child(2)::before { content: "Ouaf !"; background: rgb(var(--c-pop)); }
.spotlight .spotlight__item:nth-child(3)::before { content: "Miaou !"; background: rgb(var(--c-sun)); color: rgb(var(--c-deep)); }
.spotlight .spotlight__item:hover::before { transform: rotate(-8deg) scale(1); }
.pow-paw { position: fixed; z-index: 9999; width: 2.2rem; height: 2.2rem; color: rgb(var(--c-accent)); opacity: 0.55; pointer-events: none; animation: pow-paw 1.4s ease-out forwards; }
@keyframes pow-paw { 0% { opacity: 0; } 15% { opacity: 0.55; } 100% { opacity: 0; } }
.pow-cat { position: fixed; right: 3.2rem; bottom: -1rem; z-index: 70; width: 11rem; padding: 0; border: none; background: none; cursor: pointer; transform: translateY(100%); transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.pow-cat[data-peek="true"] { transform: translateY(0); }
.pow-cat:hover { transform: translateY(-0.6rem); }
.pow-cat svg { display: block; width: 100%; height: auto; }
.pow-cat__bubble { position: absolute; bottom: 100%; left: 50%; padding: 0.6rem 1.4rem; border-radius: 999px; background: rgb(var(--c-sun)); color: rgb(var(--c-deep)); font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; white-space: nowrap; transform: translateX(-50%) scale(0); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.pow-cat[data-talk="true"] .pow-cat__bubble { transform: translateX(-50%) scale(1); }
.header__pow { display: block; height: 4.4rem; width: auto; }
.header__brand { gap: 1rem; }
@media (max-width: 749px) { .pow-cat { width: 8rem; right: 1.6rem; } }

/* Home opens on a light cover: keep the header in its light state. */
html .template-index .header-wrapper:not([data-scrolled="true"]) .header { color: rgb(var(--c-fg)); background-color: rgba(var(--c-bg), 0.7); border-color: rgba(var(--c-border), 0.8); }
html .template-index .header-wrapper:not([data-scrolled="true"]) .header::before { content: none; }
html .template-index .header-wrapper:not([data-scrolled="true"]) .header__wordmark-img--light { opacity: 0; }
html .template-index .header-wrapper:not([data-scrolled="true"]) .header__wordmark-img--blue { opacity: 1; }

/* ---- Rhythm: one spacing scale for every section ------------------------ */
:root { --space-xs: 0.8rem; --space-s: 1.6rem; --space-m: 2.4rem; --space-l: 4rem; --space-section: clamp(5.6rem, 7vw, 9.6rem); --header-space: 9.6rem; }
@media (max-width: 749px) { :root { --tile-gap: 0.8rem; --tile-radius: 1.8rem; --header-space: 8.8rem; } }
.ed-label.ed-label { align-items: flex-end; padding: var(--space-section) var(--space-m) var(--space-m); }
.ed-label.ed-label h2 { font-size: clamp(2.8rem, 3vw, 4.4rem); }
@media (max-width: 749px) { .ed-label.ed-label { padding-inline: var(--space-s); } }
.spotlight .spotlight__label { left: var(--space-m); right: var(--space-m); bottom: var(--space-m); }
.product-row.product-row { gap: var(--space-m) var(--tile-gap); padding-inline: var(--tile-gap); }
.card .card__info { padding: var(--space-s) var(--space-xs) 0; }
.footer .footer__main { padding-block: var(--space-section) var(--space-l); }
@media (max-width: 749px) { .spotlight .spotlight__item { aspect-ratio: 4 / 3 !important; } .product-row.product-row { gap: var(--space-m) var(--tile-gap); } }
html { overflow-x: clip; } .pow-wave { overflow: clip; }

/* Fond blanc : la couleur reste pour les touches d'émotion. */
.pow-cover.pow-cover { background: rgb(255, 255, 255); border: 0.1rem solid rgb(var(--c-border)); }
.pp-card__media--photo, .tpd-plate, .tpd-plate::after, .card__media { background: rgb(255, 255, 255) !important; }

/* ---- Grilles produits : plus d'air, cartes calmes (rendu boutique) ------- */
.product-row.product-row, .pp-grid.pp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 5.6rem 2.4rem !important; padding: 0 var(--space-m) var(--space-section) !important; }
@media (max-width: 1199px) { .product-row.product-row, .pp-grid.pp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 899px) { .product-row.product-row, .pp-grid.pp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 4rem 1.2rem !important; padding-inline: var(--space-s) !important; } }
.pp-card .pp-card__media { aspect-ratio: 4 / 5; border-radius: 0.6rem; background: #F4F4F4 !important; transform: none !important; }
.pp-card .pp-card__media img { object-fit: contain; padding: 12%; transition: transform 0.8s cubic-bezier(0.4, 0, 0.25, 1); }
.pp-card:hover .pp-card__media img { transform: scale(1.04); }
.pp-card .pp-card__tag { position: static; display: block; order: -1; margin: 1.6rem 0 0.6rem; padding: 0; background: none; font-size: 1.1rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--c-fg-2)); }
.pp-card .pp-card__title { margin-top: 0; font-family: var(--font-body); font-size: 1.5rem; font-weight: 500; line-height: 1.35; color: rgb(var(--c-deep)); }
.pp-card .pp-card__price { margin-top: 0.4rem; font-size: 1.4rem; color: rgb(var(--c-fg-2)); }
.ed-label.ed-label { padding-bottom: var(--space-l); }
.pp-card .pp-card__media img { object-fit: cover !important; padding: 0 !important; }

/* ---- La vague se prolonge dans le pied de page : même bleu, texte clair --- */
.pow-wave { margin-bottom: -0.2rem; }
.footer { background: rgb(var(--c-accent)); color: rgb(255, 255, 255); border-top: none; }
.footer .footer__title, .footer .footer__menu-link, .footer .footer__contact-link, .footer .footer__field button { color: rgb(255, 255, 255); }
.footer .footer__address, .footer .footer__consent, .footer .footer__field input::placeholder { color: rgba(255, 255, 255, 0.72); }
.footer .footer__field { border-bottom-color: rgba(255, 255, 255, 0.6); }
.footer .footer__field input { color: rgb(255, 255, 255); }
.footer .footer__menu { border-color: rgba(255, 255, 255, 0.18) !important; }
.footer .footer__bottom { background: rgb(var(--c-deep)); border-top: none; }
.footer .footer__bottom-inner { color: rgba(255, 255, 255, 0.7); }

@media (max-width: 989px) { body:has(.tpd-dock[data-visible="true"]) .pow-cat { transform: translateY(120%) !important; } }
/* Carrousel produits */
.pow-carousel { position: relative; padding-bottom: var(--space-section); }
.pow-carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 2.4rem) / 4); gap: 2.4rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--space-m); padding: 0 var(--space-m); scrollbar-width: none; }
.pow-carousel__track::-webkit-scrollbar { display: none; }
.pow-carousel__track > .pp-card { scroll-snap-align: start; }
@media (max-width: 1199px) { .pow-carousel__track { grid-auto-columns: calc((100% - 2 * 2.4rem) / 3); } }
@media (max-width: 899px) { .pow-carousel__track { grid-auto-columns: 72%; gap: 1.2rem; padding-inline: var(--space-s); } }
.pow-carousel__btn { position: absolute; top: 34%; z-index: 2; width: 4.8rem; height: 4.8rem; border: 0.1rem solid rgb(var(--c-border)); border-radius: 50%; background: rgb(255, 255, 255); color: rgb(var(--c-accent)); font-size: 1.8rem; cursor: pointer; box-shadow: 0 0.6rem 2rem rgba(20, 16, 74, 0.08); transition: opacity 0.3s, transform 0.3s; }
.pow-carousel__btn:hover { transform: scale(1.06); }
.pow-carousel__btn[disabled] { opacity: 0; pointer-events: none; }
.pow-carousel__btn--prev { left: 1.6rem; } .pow-carousel__btn--next { right: 1.6rem; }
@media (max-width: 899px) { .pow-carousel__btn { display: none; } }
/* Fond des photos = fond de la photo elle-même */
.pp-card .pp-card__media img, .tpd-plate img { object-fit: contain !important; padding: 8% !important; }
.pp-card .pp-card__price { color: rgb(var(--c-deep)) !important; font-weight: 500; }
.pp-card .pp-card__price s { margin-left: 0.6rem; color: rgb(var(--c-fg-2)); font-weight: 400; }

.pp-card .pp-card__media img, .tpd-plate img { mix-blend-mode: darken; }
/* overflow-x: hidden on body turns it into a scroll container and breaks every position: sticky (gallery, info column, header). clip trims the overflow without that side effect. */
body { overflow-x: clip; }
/* Cartes produits : la photo remplit toute la carte, au format 4:5 des visuels fournisseur —
   plus de marge intérieure, donc plus de cadre décalé. */
.pp-card .pp-card__media { aspect-ratio: 4 / 5 !important; }
.pp-card .pp-card__media img { object-fit: cover !important; padding: 0 !important; mix-blend-mode: normal !important; }
.tpd-plate img { object-fit: cover !important; padding: 0 !important; mix-blend-mode: normal !important; }

/* ===================== Corrections mobile ===================== */
@media (max-width: 749px) {
  /* Pages : le contenu commence juste sous le header, sans trou */
  .template-page main { padding-top: calc(var(--header-space) + 0.4rem) !important; }
  .pp-head { padding-top: var(--space-s) !important; }
  .pg { padding-top: var(--space-s) !important; }
  /* « Pour qui ? » : photo en haut, texte dessous, rien ne déborde */
  .pow-who__item { grid-template-columns: 1fr !important; min-height: 0 !important; }
  .pow-who__photo { order: -2; height: 20rem; margin: 0.8rem 0.8rem 0 !important; }
  .pow-who__copy { order: 0 !important; padding: var(--space-m) var(--space-m) var(--space-m) !important; }
  .pow-who__sticker { top: 1.6rem !important; left: 1.6rem !important; z-index: 2; }
  .pow-who__name { font-size: 5.2rem !important; }
  /* Moins de vide entre les blocs et avant la vague */
  .pow-carousel { padding-bottom: var(--space-l) !important; }
  .pow-wave { margin-top: var(--space-m) !important; }
  .ed-label.ed-label { padding-top: var(--space-l) !important; padding-bottom: var(--space-m) !important; }
  /* Bannière : le chien bien centré */
  .pow-cover__dog { width: 86vw !important; margin-inline: auto; }
  .pow-cover__sticker--a { left: 0 !important; }
  .pow-cover__sticker--b { right: 0 !important; }
  /* Fourrure du bas : marge pour que le texte ne soit jamais coupé */
  .footer__wordmark { padding-inline: 2.4rem !important; }
}
/* Cadre fin bleu sur les photos produits (comme sur les posts) */
.pp-card .pp-card__media { border: 0.1rem solid rgb(var(--c-accent)) !important; border-radius: 0 !important; box-shadow: 0 0.6rem 2.4rem rgba(20, 16, 74, 0.06); }
@media (min-width: 990px) {
  .tpd-plate, .tpd-plate:first-child, .tpd-plate:nth-child(2) { border-radius: 0 !important; }
  .tpd-plate:first-child, .tpd-plate:nth-child(2) { outline: 0.1rem solid rgb(var(--c-accent)); outline-offset: -0.1rem; }
  .tpd-plate:not(:first-child):not(:nth-child(2))::after { border-radius: 0 !important; }
  .tpd-plate:not(:first-child):not(:nth-child(2)) img { border-radius: 0 !important; outline: 0.1rem solid rgb(var(--c-accent)); outline-offset: -0.1rem; }
  .tpd-gallery .tpd-rail { gap: 0.8rem 0; }
}
@media (max-width: 989px) { .tpd-plate { outline: 0.1rem solid rgb(var(--c-accent)); outline-offset: -0.1rem; } }
.cart-line img { border: 0.1rem solid rgb(var(--c-accent)); border-radius: 0 !important; }