/* ==========================================================================
   United We Stand LLC — global stylesheet
   Design tokens, layout engine, components. Breakpoint rules live in
   responsive.css. All measurements were taken from the reference site.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --white: #fff;
  --black: #000;
  --accent: hsl(0, 87%, 48%);            /* red highlight (WE, underlines) */
  --accent-safe: hsl(0, 86.94%, 48.04%);  /* text-highlight / status red */
  --light-accent: hsl(0, 0%, 96%);        /* light section background */
  --dark-accent: hsl(202, 100%, 37%);     /* blue section background */

  --font-heading: Verdana, Geneva, sans-serif;
  --font-body: Georgia, serif;

  --site-max: 1400px;
  --gutter: 1.5vw;                 /* page padding */
  --hdr-pad: 1vw;                  /* header vertical padding */
  --grid-gap: 11px;

  /* fluid type unit: (size-1) * unit + 1rem */
  --fu: calc(1.2 * min(1vw, 14px));
  --fs-h1: calc(3 * var(--fu) + 1rem);      /* 4rem  */
  --fs-h2: calc(2 * var(--fu) + 1rem);      /* 3rem  */
  --fs-h3: calc(1.1 * var(--fu) + 1rem);    /* 2.1rem */
  --fs-h4: calc(0.5 * var(--fu) + 1rem);    /* 1.5rem */
  --fs-large: calc(0.5 * var(--fu) + 1rem); /* 1.5rem */
  --fs-body: calc(0.3 * var(--fu) + 1rem);  /* 1.3rem */
  --fs-small: 1rem;
  --fs-meta: calc(-0.24vw + 1rem);          /* 0.8rem meta */
  --fs-btn-primary: calc(0.5 * var(--fu) + 1rem);   /* 1.5rem */
  --fs-btn-secondary: calc(0.2 * var(--fu) + 1rem); /* 1.2rem */
  --fs-title: calc(1 * var(--fu) + 1rem);           /* site title 2rem */

  --container-w: min(var(--site-max), calc(100vw - var(--gutter) * 2));
  --row-h: calc(var(--container-w) * 0.0215);
  /* header height fallback (main.js replaces it with the measured value) */
  --header-h: calc(var(--hdr-pad) * 2 + var(--fs-body) + 2.4 * var(--fs-title));
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-size: 16px; }
body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6em;
  letter-spacing: -0.03em;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; line-height: 1.2em; letter-spacing: 0; margin: 0; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
p, li { margin: 0; line-height: 1.6em; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

#site { display: flex; flex-direction: column; min-height: 100vh; }
main { position: relative; }

/* ---------- Section themes ---------- */
.theme-white { --bg: var(--white); --fg: var(--black); }
.theme-light { --bg: var(--light-accent); --fg: var(--black); }
.theme-dark  { --bg: var(--dark-accent); --fg: var(--white); }

/* ---------- Header ---------- */
.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  color: var(--fg);
  padding: var(--hdr-pad) var(--gutter);
  line-height: 1;
}
.skip-link {
  /* kept in flow (inline) like the reference: it reserves one line above the header */
  position: relative;
  display: inline;
  left: -16000px;
  top: 24px;
  padding: 16px 1.3rem;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-heading);
  font-size: 1rem;
  text-decoration: underline;
  border: 1px solid var(--white);
  line-height: 1;
  z-index: 2;
}
.skip-link:focus { left: 0; }
.site-header__inner { position: relative; display: flex; align-items: center; }
.site-header__desktop { display: flex; align-items: center; width: 100%; }
.site-header__mobile { display: none; align-items: center; width: 100%; }

.nav-title-wrap { display: flex; align-items: center; flex: 1 0 67%; }
.site-nav { flex: 1 0 33%; }
.site-nav__list { display: inline-flex; flex-wrap: wrap; }
.site-nav__item { display: flex; margin-right: 1.7vw; line-height: 1.6em; }
.site-nav__item a,
.header-login { position: relative; display: block; padding: 0.1em 0; line-height: 1.6em; }
.site-nav__item a::after,
.header-login::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.1em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}
.site-nav__item a:hover::after,
.site-nav__item.is-active a::after,
.header-login:hover::after { transform: scaleX(1); }

.site-title { flex: 1 0 34%; text-align: center; }
.site-title a {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-title);
  line-height: 1.2em;
  display: inline;
}
.header-actions { display: flex; align-items: center; justify-content: flex-end; flex: 1 0 33%; }
.header-login { margin-left: 2.1vw; display: inline-block; }
.header-cart { display: flex; align-items: center; margin-left: 2.1vw; text-align: center; }
.header-cart svg { width: 25px; height: 25px; display: block; }
.header-cart__qty { padding-left: 4.6667px; line-height: 25px; font-size: var(--fs-body); }

/* Mobile header pieces */
.site-header__mobile .site-title { flex: 1 0 calc(100% - 158px); text-align: left; }
.site-header__mobile .site-title a { font-size: var(--fs-body); }
.site-header__mobile .header-actions { flex: 0 0 75px; justify-content: center; }
.site-header__mobile .header-cart { margin-left: 0; }
.burger { flex: 0 0 50px; display: flex; justify-content: flex-end; }
.burger__btn { display: block; position: relative; padding: 1px 6px; width: 47px; height: 37px; }
.burger__box { position: relative; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; }
.burger__line {
  position: absolute; left: 0; top: 17px;
  width: 35px; height: 1px;
  background: currentColor;
  transition: transform 0.3s cubic-bezier(0.2, 0.6, 0.3, 1), width 0.3s cubic-bezier(0.2, 0.6, 0.3, 1);
}
.burger__line--top { transform: translateY(-5.5px); }
.burger__line--bottom { transform: translateY(5.5px); }
.menu-open .burger__line { width: 28px; left: auto; right: 7px; }
.menu-open .burger__line--top { transform: rotate(45deg); }
.menu-open .burger__line--bottom { transform: rotate(-45deg); }

/* Mobile menu overlay */
.menu-overlay {
  position: fixed; inset: 0;
  z-index: 9;
  display: flex; flex-direction: column;
  padding-top: var(--header-h, 112px);
  background: var(--bg);
  color: var(--fg);
  text-align: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.menu-open .menu-overlay { opacity: 1; visibility: visible; transition: opacity 0.35s ease; }
.menu-overlay__nav { flex: 1; display: flex; flex-direction: column; justify-content: center; overflow-y: auto; }
.menu-overlay__item { padding: 0 1.5vw; }
.menu-overlay__item a, .menu-overlay__login {
  display: inline-flex; align-items: center;
  margin: 3vw 5vw;
  font-size: 8.5vw;
  line-height: 1;
  letter-spacing: -0.03em;
}
.menu-overlay__account { margin-bottom: 7vw; }
.menu-overlay__login { line-height: 1.6; letter-spacing: -0.03em; }

/* ---------- Sections ---------- */
.section {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--fg);
}
.section--first { padding-top: var(--header-h, 128px); }
.section__bg { position: absolute; inset: 0; overflow: hidden; background: var(--bg); }
.section__bg img, .section__bg video { width: 100%; height: 100%; object-fit: cover; object-position: var(--focal, 50% 50%); display: block; }
/* hero video: covers the section, sits at 33% opacity over the blue theme colour like the reference */
.section__bg .bg-video { position: absolute; inset: 0; filter: opacity(33%); }
.section__bg .bg-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; background: transparent; }
.section__bg .bg-video video::-webkit-media-controls { display: none !important; }
.bg-video--failed video { background-size: cover; }
.section__overlay { position: absolute; inset: 0; background: var(--bg); opacity: var(--overlay, 0); }
.section__inner {
  position: relative;
  width: 100%;
  padding-top: calc(var(--sh, 0) * 1vmax / 10);
  padding-bottom: calc(var(--sh, 0) * 1vmax / 10);
}
.section--minh { min-height: calc(var(--sh, 0) * 1vh); }

/* ---------- Layout grid (mobile first: 8 columns) ---------- */
.grid {
  --cell: calc((var(--site-max) - var(--grid-gap) * 7) / 8);
  --edge: calc(var(--gutter) - var(--grid-gap));
  display: grid;
  position: relative;
  grid-template-columns: minmax(var(--edge), 1fr) repeat(8, minmax(0, var(--cell))) minmax(var(--edge), 1fr);
  grid-template-rows: repeat(var(--rows-m), minmax(24px, auto));
  gap: var(--grid-gap);
  overflow-x: clip;
}
.block {
  grid-area: var(--gm);
  z-index: var(--z, 0);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: var(--jm, flex-start);
  align-items: var(--am, flex-start);
}
.block > * { width: 100%; }

/* ---------- Text blocks ---------- */
.text h1, .text h2, .text h3, .text h4 { margin: 2rem 0; white-space: pre-wrap; }
.text h2 { line-height: 1.104em; }
.text h3 { line-height: 1.147em; }
.text p { margin: 1rem 0; white-space: pre-wrap; }
.text__inner > :first-child { margin-top: 0; }
.text__inner > :last-child { margin-bottom: 0; }
.text .text-large { font-size: var(--fs-large); }
.text .text-small { font-size: var(--fs-small); }
.text strong { font-weight: 700; }
.text ul { margin: 1em 0; padding-left: 40px; list-style: none; }
.text li { position: relative; }
.text li > p { margin: 0.5em 0; }
.text li > p::before { content: "\2022"; display: inline-block; width: 40px; margin-left: -40px; }
.color-accent { color: var(--accent); }
.color-white { color: var(--white); }

/* highlighted text with a hand-drawn underline (drawn by main.js) */
.text { position: relative; }
.text__shapes { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.text__inner { position: relative; z-index: 1; }
.text-shape { position: absolute; pointer-events: none; }
.text-shape svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.text-shape path {
  fill: none;
  stroke: var(--accent-safe);
  stroke-width: var(--stroke-w, 3.4px);
  stroke-linecap: square;
  stroke-linejoin: bevel;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.19, 1, 0.22, 1) 0.2s;
}
/* text scaled to fill its block width (font-size set by main.js) */
.fit-text { display: block; }
.fit-text__inner { display: inline-block; position: relative; white-space: nowrap; }
.fit-text h1 { font-size: 1em; line-height: 1; margin: 0; white-space: nowrap; }

/* ---------- Buttons ---------- */
.btn {
  --btn-color: var(--fg);
  --btn-inverse: var(--bg);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  padding: 0.66em 1.3rem;
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: 0;
  text-align: center;
  color: var(--btn-color);
  border: 1px solid var(--btn-color);
  background: transparent;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn--primary { font-size: var(--fs-btn-primary); }
.btn--secondary { font-size: var(--fs-btn-secondary); }
.btn:hover { background: var(--btn-color); color: var(--btn-inverse); }
.theme-dark .btn--primary, .theme-dark .btn--secondary { --btn-color: var(--white); --btn-inverse: var(--black); }
.theme-light .btn, .theme-white .btn { --btn-color: var(--black); --btn-inverse: var(--white); }

/* ---------- Image blocks ---------- */
.img-fill { position: relative; margin: 0; width: 100%; height: 100%; overflow: hidden; }
.img-fill a, .img-fill .img-fill__frame { display: block; position: absolute; inset: 0; }
.img-fill img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focal, 50% 50%); }
.img-fill__overlay { position: absolute; inset: 0; background: var(--tint, transparent); }

/* ---------- Marquee ---------- */
.block--marquee { padding: 1.5% 0; background: var(--white); color: var(--black); }
.marquee { position: relative; height: 22px; overflow: hidden; }
.marquee__track { position: absolute; top: 0; left: 0; display: flex; white-space: nowrap; will-change: transform; animation: marquee-scroll var(--marquee-dur, 4.1s) linear infinite; }
.marquee__item { display: flex; align-items: center; margin-right: 48px; font-size: 16px; line-height: 22.4px; letter-spacing: -0.03em; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--marquee-shift, 123px))); } }

/* ---------- Summary carousel (products) ---------- */
.summary { width: 100%; }
.summary__viewport { overflow: hidden; }
.summary__header { display: flex; justify-content: flex-end; height: 15px; }
.summary__pager { display: flex; justify-content: flex-end; width: 50px; }
.summary__arrow { position: relative; width: 16px; height: 16px; margin-bottom: 15px; z-index: 2; display: none; }
.summary__arrow--prev { margin-right: 10px; }
.summary__arrow::before {
  content: ""; position: absolute; top: 3px; left: 5px;
  width: 8px; height: 8px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.summary__arrow--prev::before { left: 7px; transform: rotate(-135deg); }
.summary__arrow[disabled] { opacity: 0.4; cursor: default; }
.summary__list { width: 101%; margin-left: -1%; white-space: nowrap; font-size: 0; transition: transform 0.4s ease; }
.summary__item { display: inline-block; vertical-align: top; width: 33.6667%; padding: 0 1%; margin-bottom: 24px; white-space: normal; font-size: var(--fs-body); }
.summary__thumb { position: relative; display: block; overflow: hidden; padding-bottom: 149.993%; margin-bottom: 15px; }
.summary__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.summary__title { text-align: center; font-size: 20px; line-height: 24px; margin-bottom: 2px; }

/* ---------- Gallery strips ---------- */
.gallery { position: relative; width: 100%; padding: var(--gutter); }
.gallery__strips { position: relative; width: 100%; }
.gallery__item { position: absolute; top: 0; left: 0; margin: 0; overflow: hidden; }
.gallery__item > div { width: 100%; height: 100%; }
.gallery__item img { width: 100%; height: 100%; display: block; }

/* ---------- Forms (contact) ---------- */
.form { display: block; }
.form__row { display: flex; gap: 0 10px; align-items: flex-end; padding: 4px 0 0; margin: 0; border: 0; min-width: 0; }
.form__field { position: relative; display: grid; grid-template-rows: auto auto; margin-bottom: 20px; flex: 1 1 0; }
.form__caption { display: flex; align-items: flex-end; flex-wrap: wrap; column-gap: 0.48em; padding-bottom: 2px; margin-top: 4px; font-size: 1rem; line-height: 1.6em; letter-spacing: -0.03em; }
.form__title { padding-bottom: 4px; font-size: var(--fs-body); line-height: 1.6em; }
.form__title .form__required { font-size: 1rem; opacity: 0.7; margin-left: 0.48em; }
.form__input, .form__textarea {
  width: 100%;
  padding: 5px 10px;
  background: transparent;
  color: var(--fg);
  border: 1px solid color-mix(in srgb, var(--fg) 55%, transparent);
  border-radius: 0;
  font-size: var(--fs-body);
  line-height: 1.6em;
  outline: none;
  transition: border-color 0.2s ease;
}
.form__input:focus, .form__textarea:focus { border-color: var(--fg); }
.form__input::placeholder, .form__textarea::placeholder { color: color-mix(in srgb, var(--fg) 55%, transparent); opacity: 1; }
.form__textarea { min-height: 100px; resize: vertical; display: block; }
.form__option { margin: 6px 0 4px; font-size: 1rem; line-height: 1.6em; letter-spacing: -0.03em; }
.form__option label { display: inline-flex; align-items: center; column-gap: 11px; padding-right: 4px; cursor: pointer; }
.form__check {
  appearance: none; -webkit-appearance: none;
  position: relative; width: 15px; height: 15px; margin: 0;
  border: 1px solid color-mix(in srgb, var(--fg) 55%, transparent);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.form__check::before { content: ""; width: 8.25px; height: 8.25px; background: var(--fg); transform: scale(0); transition: transform 0.15s ease; }
.form__check:checked::before { transform: scale(1); }
.form__submit {
  display: inline-block;
  padding: 16px 1.3rem;
  font-family: var(--font-heading);
  font-size: var(--fs-btn-primary);
  line-height: 1.3;
  color: var(--fg);
  border: 1px solid var(--fg);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.form__submit:hover { background: var(--fg); color: var(--bg); }
.form__success, .form__error { margin-top: 12px; font-size: 1rem; }
.form__error { color: var(--accent-safe); }
.form--sent .form__fields, .form--sent .form__actions { display: none; }

/* ---------- Newsletter ---------- */
.newsletter { text-align: center; container-type: inline-size; }
.newsletter__header { margin: 0 7.5%; }
.newsletter__title { font-size: var(--fs-h3); margin-bottom: 16px; }
.newsletter__desc p { margin: 16px 0; }
.newsletter__body { padding-bottom: 16px; font-size: 0; }
.newsletter__fields { display: inline-block; vertical-align: middle; width: 60%; min-width: 290px; max-width: 100%; margin-top: 16px; padding: 8px 4px; }
.newsletter__input {
  width: 100%;
  padding: 1.4rem 2rem;
  font-size: var(--fs-body);
  line-height: 1.2rem;
  background: var(--white);
  color: var(--black);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0;
  outline: none;
}
.newsletter__input::placeholder { color: rgba(0, 0, 0, 0.3); opacity: 1; }
.newsletter__btn-wrap { display: inline-block; vertical-align: middle; margin-top: 16px; padding: 8px 4px; }
.newsletter__btn {
  display: inline-block;
  padding: 1.4rem 2rem;
  font-family: var(--font-heading);
  font-size: var(--fs-btn-primary);
  line-height: 1.2rem;
  color: var(--black);
  border: 1px solid var(--black);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.newsletter__btn:hover { background: var(--black); color: var(--white); }
.newsletter__footnote { margin-top: 16px; font-size: 1rem; line-height: 1.6em; min-height: 1.6em; }
.newsletter--sent .newsletter__body { display: none; }
/* narrow blocks (under 300px) stack the field and the button */
@container (max-width: 300px) {
  .newsletter__header { margin: 0; }
  .newsletter__desc p { line-height: normal; margin: 0 0 16px; }
  .newsletter__body { padding-bottom: 8px; }
  .newsletter__fields { display: block; width: 100%; min-width: 0; }
  .newsletter__btn-wrap { display: block; margin-top: 8px; }
}

/* ---------- Horizontal rule ---------- */
.block--hr { justify-content: center; }
.block--hr hr { width: 100%; height: 1px; margin: 0.5em 0; border: 0; background: var(--fg); }

/* ---------- Social links placeholder (empty on the reference) ---------- */
.social { display: flex; justify-content: center; gap: 18px; }

/* ---------- Product list ---------- */
.plist { box-sizing: content-box; width: auto; max-width: var(--site-max); margin: 0 auto; padding: 2vh var(--gutter); }
.plist__header { margin-bottom: 10px; }
.plist__title { display: none; text-align: left; }
/* category nav: one flex row, the same gap on both sides of every "|" separator (wraps on narrow tablets) */
.plist__nav { --plist-nav-gap: clamp(10px, 1vw, 16px); margin-bottom: 10px; }
.plist__nav ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px var(--plist-nav-gap); list-style: none; margin: 10px 0; padding: 0; }
.plist__nav li { display: flex; align-items: baseline; gap: var(--plist-nav-gap); }
.plist__nav a { display: block; white-space: nowrap; }
.plist__nav a.is-active { font-weight: 700; }
.plist__nav .sep { opacity: 0.2; }
.plist__nav li:last-child .sep { display: none; }
.plist__select { display: none; }
.plist__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.5vw 2vw; }
.plist-item { position: relative; display: flex; flex-direction: column; justify-content: space-between; }
.plist-item__link { display: flex; flex-direction: column; gap: 1vw; }
.plist-item__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.plist-item__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plist-item__media .img-hover { opacity: 0; transition: opacity 0.3s ease; }
.plist-item__link:hover .img-hover { opacity: 1; }
.plist-item__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: 1vw; text-align: left; }
.plist-item__title { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-h4); line-height: 1.2em; letter-spacing: 0; }
.plist-item__price { margin-top: 8px; font-size: var(--fs-meta); line-height: 1em; letter-spacing: -0.04em; text-transform: uppercase; }
.plist-item__status { color: var(--accent-safe); font-size: var(--fs-meta); text-transform: uppercase; }
.plist-item__buy { margin-top: 8px; }

/* select (variants / categories) */
.select-wrap { position: relative; display: flex; align-items: center; width: 100%; }
.select-wrap select {
  appearance: none; -webkit-appearance: none;
  width: 100%; min-height: 55px; height: 55px;
  padding: 0 42px 0 16px;
  font-size: 16px; letter-spacing: -0.03em;
  color: var(--black);
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.55);
  border-radius: 0;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.select-wrap select:focus { border-color: var(--black); }
.select-wrap select.is-placeholder { color: rgba(0, 0, 0, 0.55); }
.select-wrap svg { position: absolute; right: 12px; top: 50%; width: 18px; height: 12px; margin-top: -6px; pointer-events: none; fill: currentColor; }
.variant { margin: 0 0 8px; padding: 0; border: 0; min-width: 0; }
.variant__title { margin-bottom: 6px; }

/* add to cart / view options buttons */
.buy-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 55px;
  padding: 0 1.2rem;
  font-family: var(--font-heading);
  font-size: var(--fs-btn-primary);
  line-height: 1.2em;
  color: var(--black);
  border: 1px solid var(--black);
  background: transparent;
  text-align: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.buy-btn__label { font-size: min(1em, 22px); }
.buy-btn:hover { background: var(--black); color: var(--white); }
.buy-btn.is-added .buy-btn__label { visibility: hidden; }
.buy-btn__added { display: none; font-size: min(1em, 22px); }
.buy-btn.is-added { position: relative; }
.buy-btn.is-added .buy-btn__added { display: block; position: absolute; left: 0; right: 0; }

/* ---------- Product detail ---------- */
.pdp { display: flex; width: 100%; }
.pdp__gallery { width: 50%; }
.pdp__stage { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.pdp__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.35s ease; }
.pdp__slide.is-active { opacity: 1; z-index: 2; }
.pdp__slide img { width: 100%; height: 100%; object-fit: cover; }
.pdp__arrow {
  position: absolute; top: 50%; z-index: 3;
  width: 65px; height: 65px; margin-top: -32.5px;
  padding: 24px;
  background: var(--white); color: var(--black);
  display: flex; align-items: center; justify-content: center;
}
.pdp__arrow--prev { left: 0; }
.pdp__arrow--next { right: 0; }
.pdp__arrow span { display: block; width: 16px; height: 16px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; }
.pdp__arrow--prev span { transform: rotate(-135deg); margin-left: 6px; }
.pdp__arrow--next span { transform: rotate(45deg); margin-right: 6px; }
.pdp__indicator { display: none; position: absolute; top: 16px; right: 16px; z-index: 3; font-size: 12px; line-height: 1.6em; }
.pdp__content { width: 50%; display: flex; flex-direction: column; gap: 22px; padding: 22px 32px; }
.pdp__crumbs { display: flex; align-items: center; gap: 8px; }
.pdp__meta { display: flex; flex-direction: column; gap: 11px; }
.pdp__title { font-size: var(--fs-h1); }
.pdp__price { margin-bottom: 5px; }
.pdp__desc { margin-bottom: 5px; }
.pdp__variants { display: flex; flex-direction: column; }
.pdp__buy { display: flex; align-items: flex-end; gap: 6px; }
.pdp__controls { display: flex; gap: 11px; width: 100%; }
.qty { flex: 3 0 auto; width: 148.84px; }
.qty__box {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 55px; height: 55px; padding: 0 11.9px;
  border: 1px solid rgba(0, 0, 0, 0.55);
}
.qty__btn { display: flex; width: 17px; height: 17px; }
.qty__btn svg { width: 17px; height: 17px; fill: currentColor; }
.qty__btn[disabled] { opacity: 0.3; cursor: default; }
.qty__input { width: 46px; height: 27px; padding: 0; text-align: center; font-size: 16px; line-height: 27px; border: 0; background: transparent; -moz-appearance: textfield; }
.qty__input::-webkit-outer-spin-button, .qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pdp__add { flex: 10 0 auto; width: 0; }
.pdp .buy-btn { padding: 0 20px; }

/* ---------- Cart ---------- */
.cart-page { width: 100%; max-width: var(--site-max); margin: 0 auto; padding: var(--header-h, 128px) 1.5vw 1.5vw; }
.cart-page__inner { padding-top: 1.5vw; }
.cart-page__title { font-family: var(--font-heading); font-weight: 500; font-size: 24px; line-height: 24px; letter-spacing: 0; margin: 0 0 27px; }
.cart-page__empty { font-size: 16px; line-height: 22px; margin: 0 0 22px; }
.cart-page__continue {
  display: inline-block;
  padding: 16px 1.3rem;
  font-family: var(--font-heading);
  font-size: var(--fs-btn-secondary);
  line-height: 1.2em;
  border: 1px solid var(--black);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.cart-page__continue:hover { background: var(--black); color: var(--white); }

/* ---------- Footer ---------- */
.site-footer { position: relative; }

/* ---------- Scroll animations ---------- */
.anim { opacity: 0; /*transform: translateY(2vh);*/ transition: opacity 0.65s cubic-bezier(0.19, 1, 0.22, 1), transform 0.65s cubic-bezier(0.19, 1, 0.22, 1); transition-delay: var(--delay, 0s); }
.anim.is-in { opacity: 1; transform: none; }
.anim--fade { transform: none; }
.no-anim .anim { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .anim { opacity: 1; transform: none; transition: none; }
  .marquee__track { animation: none; }
}