/* ═══════════════════════════════════════════════════════════════
   Pink Box — homepage below the hero
   Same tokens, glass and motion vocabulary as styles.css. The only new
   primitive is --pxs: like --px but width-bound only, because scrolling
   content must not shrink on short windows the way the hero does.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --ks: clamp(0.75rem, 1.0417vw, 1.02rem);
  --pxs: calc(var(--ks) / 16);

  --card: rgba(255, 255, 255, 0.062);
  --card-hi: rgba(255, 255, 255, 0.085);
  --line: rgba(255, 255, 255, 0.12);
  --line-hi: rgba(255, 255, 255, 0.26);
  --gold: #f0c25a;

  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.6l2.5 5.2 5.7.8-4.1 4 1 5.7-5.1-2.7-5.1 2.7 1-5.7-4.1-4 5.7-.8z'/%3E%3C/svg%3E");
}

/* Flat base + fixed ambient glows. The base must be a single colour: the
   hero-to-page handoff below depends on a backdrop that doesn't shift with
   scroll position. */
body {
  /* The hero's atmosphere in the page's own hue. Violet rather than white:
     white over this plum desaturates toward grey and, because every panel is
     a 5.5% white glass, a hazy ground would leave the cards with no edge to
     read against. Fixed, so it behaves like light in the room rather than
     something that scrolls past. */
  background:
    radial-gradient(58% 38% at 88% 8%, rgba(184, 108, 127, 0.19), transparent 68%),
    radial-gradient(52% 34% at 6% 44%, rgba(193, 117, 136, 0.15), transparent 72%),
    radial-gradient(46% 30% at 34% 62%, rgba(158, 112, 216, 0.10), transparent 74%),
    radial-gradient(64% 40% at 78% 84%, rgba(160, 88, 106, 0.18), transparent 70%),
    #342126;
  background-attachment: fixed;
}

/* the single film-grain layer for the whole document, hero included — two
   overlapping grain layers would leave a brightness step wherever they met */
.page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.page { position: relative; z-index: 1; overflow-x: clip; }

/* The page opens in the hero's own plum and only settles into the darker base
   about a screen later — no colour step at the join. Its first stop matches
   .hero__hem's last stop exactly. */
.page::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: calc(1250 * var(--pxs));
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(to bottom,
    #322024 0%,
    #352227 18%,
    rgba(57, 36, 41, 0.72) 44%,
    rgba(57, 36, 41, 0.34) 70%,
    transparent 100%);
}

/* ── hero → page seam ───────────────────────────────────────── */

.seam {
  position: absolute;
  inset-inline: 0;
  /* straddles the join: the hero's last 300px and the page's first 460px, so
     the light peaks exactly on the boundary and fades away in both directions */
  inset-block-start: calc(-300 * var(--pxs));
  height: calc(760 * var(--pxs));
  z-index: -1;              /* over the wash, behind the section content */
  pointer-events: none;
}

.seam__wash {
  position: absolute;
  inset-block: 0;
  inset-inline: -10%;
  /* deliberately NOT screen-blended: .page::after — the backdrop screen would
     blend against — starts at the join, so a blended layer renders differently
     on each side and leaves a hairline. Plain alpha is continuous. */
  background:
    radial-gradient(52% 62% at 72% 39%, rgba(225, 157, 174, 0.30), transparent 70%),
    radial-gradient(46% 56% at 18% 56%, rgba(174, 102, 120, 0.24), transparent 72%);
  animation: breathe 15s ease-in-out infinite;
}

.seam__orb {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}
.seam__orb--a {
  inset-block-start: 22%;
  inset-inline-start: 14%;
  width: calc(380 * var(--pxs));
  height: calc(380 * var(--pxs));
  background: radial-gradient(circle, rgba(228, 160, 177, 0.26), transparent 68%);
  animation: seam-drift-a 24s ease-in-out infinite;
}
.seam__orb--b {
  inset-block-start: 42%;
  inset-inline-end: 6%;
  width: calc(320 * var(--pxs));
  height: calc(320 * var(--pxs));
  background: radial-gradient(circle, rgba(169, 97, 115, 0.24), transparent 70%);
  animation: seam-drift-b 29s ease-in-out infinite;
}

/* the hero's own lavender field, blurred and edge-faded, spilling downward */
.seam__bloom {
  position: absolute;
  inset-block-end: calc(-30 * var(--pxs));
  width: clamp(300px, 44vw, calc(720 * var(--pxs)));
  height: auto;
  opacity: 0.5;
}
.seam__bloom--r { inset-inline-start: calc(-70 * var(--pxs)); }
.seam__bloom--l {
  inset-inline-end: calc(-90 * var(--pxs));
  transform: scaleX(-1);
  opacity: 0.34;
}

.bfly--seam {
  inset-block-start: 33%;
  inset-inline-start: 30%;
  width: calc(58 * var(--pxs));
  opacity: 0.45;
  animation: drift-2 28s ease-in-out infinite;
}

@keyframes seam-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(calc(40 * var(--pxs)), calc(-24 * var(--pxs)), 0); }
}
@keyframes seam-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(calc(-34 * var(--pxs)), calc(20 * var(--pxs)), 0); }
}

.section {
  padding-block: calc(118 * var(--pxs));
  padding-inline: clamp(20px, 8.6vw, calc(132 * var(--pxs)));
  scroll-margin-block-start: calc(24 * var(--pxs));
}
.section__inner { max-width: calc(1272 * var(--pxs)); margin-inline: auto; }

/* Room for the seam decoration to breathe before the first heading — scoped to
   the sibling .seam so it applies only where a hero actually hands over. The
   inner pages have no seam and were inheriting ~134px of dead space. */
.seam ~ main > .section:first-child { padding-block-start: calc(168 * var(--pxs)); }

/* …but that padding is also what an anchor jump lands on, leaving the heading
   most of a screen below the fold — the link reads as "it didn't go there".
   Pull the scroll position past the decorative band so «دسته‌بندی‌های منتخب»
   arrives near the top, with a little air above it. */
.seam ~ main > .section:first-child { scroll-margin-block-start: calc(-134 * var(--pxs)); }

/* ── section header ─────────────────────────────────────────── */

.shead {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(28 * var(--pxs));
  margin-block-end: calc(52 * var(--pxs));
}

/* Each section opens with the same soft bloom the page heads carry, so the
   atmosphere continues down the page instead of stopping below the hero.
   Static and `screen`-blended — an animated full-page fog is what stalled
   the renderer when the grain layer tried it. */
.shead::before {
  content: "";
  position: absolute;
  inset-block-start: -140%;
  inset-inline-start: -10%;
  width: clamp(320px, 46%, 620px);
  height: 380%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(40% 32% at 55% 50%, rgba(211, 135, 154, 0.17), transparent 72%);
  mix-blend-mode: screen;
}

.phead .eyebrow--sm { margin-block-end: calc(7 * var(--pxs)); }

.eyebrow--sm {
  margin: 0 0 calc(14 * var(--pxs));
  font-size: calc(13.5 * var(--pxs));
  animation: none;
}
.eyebrow--sm i:last-child { display: none; }
.eyebrow--sm i { width: calc(26 * var(--pxs)); }

.shead__title {
  margin: 0;
  font-size: calc(42 * var(--pxs));
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.shead__title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--accent) 0 38%, #fceff2 48%, var(--accent) 58% 100%);
  background-size: 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ghostlink {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: calc(9 * var(--pxs));
  padding: calc(12 * var(--pxs)) calc(20 * var(--pxs));
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  backdrop-filter: blur(12px);
  font-size: calc(14.5 * var(--pxs));
  font-weight: 500;
  color: var(--ink-soft);
  transition: color 240ms var(--ease), background-color 260ms var(--ease),
              border-color 260ms var(--ease), transform 260ms var(--ease);
}
.ghostlink svg { width: calc(16 * var(--pxs)); height: calc(16 * var(--pxs)); transition: transform 300ms var(--ease); }
.ghostlink:hover {
  color: #fff;
  background: var(--card-hi);
  border-color: var(--line-hi);
  transform: translateY(calc(-2 * var(--pxs)));
}
.ghostlink:hover svg { transform: translateX(calc(-4 * var(--pxs))); }

/* ── 1 · category cards ─────────────────────────────────────── */

.cats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: calc(232 * var(--pxs));
  gap: calc(20 * var(--pxs));
}
.cat--tall { grid-row: span 2; }
.cat--wide { grid-column: span 2; }

.cat {
  position: relative;
  overflow: hidden;
  display: block;
  border-radius: calc(24 * var(--pxs));
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(117, 67, 79, 0.5), rgba(47, 26, 32, 0.7));
  box-shadow: 0 calc(20 * var(--pxs)) calc(48 * var(--pxs)) rgba(23, 11, 14, 0.4);
  transition: transform 520ms var(--ease), border-color 380ms, box-shadow 480ms var(--ease);
}
.cat:hover {
  transform: translateY(calc(-6 * var(--pxs)));
  border-color: var(--line-hi);
  box-shadow: 0 calc(30 * var(--pxs)) calc(70 * var(--pxs)) rgba(105, 45, 60, 0.5);
}

.cat__media { position: absolute; inset: 0; }
.cat__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease), filter 600ms;
}
.cat:hover .cat__media img { transform: scale(1.07); filter: saturate(1.12); }

.cat::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(25, 12, 15, 0.92) 4%, rgba(32, 16, 20, 0.42) 42%, rgba(40, 20, 25, 0.10) 78%),
    radial-gradient(90% 70% at 20% 100%, rgba(164, 86, 106, 0.35), transparent 70%);
  transition: opacity 500ms var(--ease);
}
.cat:hover::after { opacity: 0.86; }

.cat__no {
  position: absolute;
  z-index: 2;
  inset-block-start: calc(18 * var(--pxs));
  inset-inline-start: calc(22 * var(--pxs));
  font-size: calc(13 * var(--pxs));
  font-weight: 600;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, 0.55);
}

.cat__body {
  position: absolute;
  z-index: 2;
  inset-block-end: calc(22 * var(--pxs));
  inset-inline-start: calc(22 * var(--pxs));
  display: grid;
  gap: calc(3 * var(--pxs));
  transition: transform 460ms var(--ease);
}
.cat:hover .cat__body { transform: translateY(calc(-4 * var(--pxs))); }

.cat__name { font-size: calc(23 * var(--pxs)); font-weight: 700; line-height: 1.35; }
.cat--tall .cat__name, .cat--wide .cat__name { font-size: calc(27 * var(--pxs)); }
.cat__meta { font-size: calc(13 * var(--pxs)); font-weight: 300; color: var(--ink-dim); }

.cat__go {
  position: absolute;
  z-index: 2;
  inset-block-end: calc(22 * var(--pxs));
  inset-inline-end: calc(22 * var(--pxs));
  display: grid;
  place-items: center;
  width: calc(42 * var(--pxs));
  height: calc(42 * var(--pxs));
  border-radius: 50%;
  border: 1px solid var(--line-hi);
  background: rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateX(calc(10 * var(--pxs))) scale(0.9);
  transition: opacity 380ms var(--ease), transform 420ms var(--ease), background-color 300ms;
}
.cat__go svg { width: calc(18 * var(--pxs)); height: calc(18 * var(--pxs)); }
.cat:hover .cat__go, .cat:focus-visible .cat__go {
  opacity: 1;
  transform: none;
  background: rgba(213, 145, 162, 0.35);
}

/* ── 2 · product grid ───────────────────────────────────────── */

.pgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(18 * var(--pxs));
}

.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: calc(18 * var(--pxs));
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 calc(16 * var(--pxs)) calc(44 * var(--pxs)) rgba(23, 11, 14, 0.34);
  overflow: hidden;
  transition: transform 420ms var(--ease), border-color 320ms, box-shadow 420ms var(--ease),
              background-color 320ms;
}
.pcard:hover {
  transform: translateY(calc(-7 * var(--pxs)));
  background: var(--card-hi);
  border-color: var(--line-hi);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 calc(28 * var(--pxs)) calc(66 * var(--pxs)) rgba(105, 45, 60, 0.5);
}

.pcard__top { position: relative; }

.pcard__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;   /* packshot cells are 3:4; the trim is pure headroom */
  overflow: hidden;
  background:
    radial-gradient(62% 62% at 50% 44%, rgba(192, 120, 138, 0.30), transparent 72%),
    linear-gradient(180deg, rgba(75, 41, 50, 0.55), rgba(40, 21, 26, 0.55));
}
.pcard__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--ease);
}
.pcard:hover .pcard__media img { transform: scale(1.08) rotate(-1deg); }

/* the packshots are lit on their own magenta studio backdrop, which reads
   as a jarring square against the page's muted plum — multiply a plum tint
   over the photo itself so the backdrop sits in the same palette as .pcard. */
.pcard__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(52, 33, 38, 0.32), rgba(52, 33, 38, 0.58)),
    radial-gradient(62% 62% at 50% 44%, rgba(213, 145, 162, 0.14), transparent 72%);
  mix-blend-mode: multiply;
}

.pcard__badge {
  position: absolute;
  z-index: 2;
  inset-block-start: calc(14 * var(--pxs));
  inset-inline-start: calc(14 * var(--pxs));
  padding: calc(5 * var(--pxs)) calc(11 * var(--pxs));
  border-radius: 999px;
  font-size: calc(12 * var(--pxs));
  font-weight: 700;
  background: linear-gradient(180deg, #cd768c, #984a5e);
  box-shadow: 0 calc(6 * var(--pxs)) calc(18 * var(--pxs)) rgba(134, 60, 78, 0.55);
}
.pcard__badge--new { background: linear-gradient(180deg, #f6cbd6, #da92a4); color: #391b22; }

.pcard__wish {
  position: absolute;
  z-index: 2;
  inset-block-start: calc(12 * var(--pxs));
  inset-inline-end: calc(12 * var(--pxs));
  display: grid;
  place-items: center;
  width: calc(34 * var(--pxs));
  height: calc(34 * var(--pxs));
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(36, 20, 24, 0.72);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transform: translateY(calc(-6 * var(--pxs)));
  transition: opacity 320ms var(--ease), transform 320ms var(--ease), color 240ms, background-color 240ms;
}
.pcard__wish svg { width: calc(17 * var(--pxs)); height: calc(17 * var(--pxs)); }
.pcard:hover .pcard__wish, .pcard__wish:focus-visible { opacity: 1; transform: none; }
.pcard__wish:hover { background: rgba(255, 255, 255, 0.16); }
.pcard__wish.is-on { color: #ff7aa8; }
.pcard__wish.is-on svg { fill: currentColor; }

.pcard__cart {
  position: absolute;
  z-index: 2;
  inset-inline: calc(14 * var(--pxs));
  inset-block-end: calc(14 * var(--pxs));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(9 * var(--pxs));
  height: calc(40 * var(--pxs));
  border-radius: calc(12 * var(--pxs));
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(to left, rgba(120, 72, 84, 0.97), rgba(90, 50, 60, 0.95));
  color: #fff;
  font-family: inherit;
  font-size: calc(13.5 * var(--pxs));
  font-weight: 600;
  cursor: pointer;
  opacity: 0;
  transform: translateY(calc(16 * var(--pxs)));
  transition: opacity 340ms var(--ease), transform 380ms var(--ease), box-shadow 300ms;
}
.pcard__cart svg { width: calc(17 * var(--pxs)); height: calc(17 * var(--pxs)); }
.pcard:hover .pcard__cart, .pcard__cart:focus-visible { opacity: 1; transform: none; }
.pcard__cart:hover { box-shadow: 0 calc(10 * var(--pxs)) calc(26 * var(--pxs)) rgba(162, 78, 99, 0.55); }
.pcard__cart:active { transform: scale(0.975); }
.pcard__cart.is-done {
  background: linear-gradient(to left, rgba(86, 150, 110, 0.95), rgba(52, 110, 82, 0.92));
  opacity: 1;
  transform: none;
}

.pcard__body {
  display: grid;
  gap: calc(5 * var(--pxs));
  padding: calc(14 * var(--pxs)) calc(14 * var(--pxs)) calc(16 * var(--pxs));
}
.pcard__cat { margin: 0; font-size: calc(11.5 * var(--pxs)); font-weight: 400; color: var(--accent); letter-spacing: .02em; }
.pcard__name {
  margin: 0;
  font-size: calc(14.5 * var(--pxs));
  font-weight: 600;
  line-height: 1.55;
  min-height: calc(2 * 1.55em);
}
.pcard__name a { transition: color 220ms var(--ease); }
.pcard__name a:hover { color: var(--accent-hi); }

.pcard__rate { display: flex; align-items: center; gap: calc(8 * var(--pxs)); font-size: calc(12.5 * var(--pxs)); }
.pcard__rate b { font-weight: 600; }
.pcard__rate span:last-child { color: var(--ink-dim); font-weight: 300; }

.stars {
  position: relative;
  display: inline-block;
  width: calc(66 * var(--pxs));
  height: calc(12.5 * var(--pxs));
  background: rgba(255, 255, 255, 0.22);
  -webkit-mask: var(--star) repeat-x; mask: var(--star) repeat-x;
  -webkit-mask-size: 20% 100%; mask-size: 20% 100%;
}
.stars i {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  background: var(--gold);
  -webkit-mask: var(--star) repeat-x; mask: var(--star) repeat-x;
  -webkit-mask-size: calc(66 * var(--pxs) / 5) 100%; mask-size: calc(66 * var(--pxs) / 5) 100%;
}

.pcard__price {
  margin: calc(3 * var(--pxs)) 0 0;
  display: flex;
  align-items: baseline;
  gap: calc(8 * var(--pxs));
  font-variant-numeric: tabular-nums;
}
.pcard__price strong { font-size: calc(16 * var(--pxs)); font-weight: 700; }
.pcard__price s { font-size: calc(13 * var(--pxs)); font-weight: 300; color: rgba(255, 255, 255, 0.42); }
.pcard__price span { font-size: calc(12.5 * var(--pxs)); font-weight: 300; color: var(--ink-dim); }

/* ── 3 · campaign banner ────────────────────────────────────── */

.promo {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: calc(520 * var(--pxs));
  display: grid;
  align-items: center;
  border-block: 1px solid rgba(255, 255, 255, 0.07);
}

.promo__media { position: absolute; inset: 0; z-index: -1; }
.promo__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 22% 45%;
  transform: scale(1.03);
  animation: promo-drift 26s ease-in-out infinite alternate;
}
.promo__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to left, rgba(32, 16, 20, 0.94) 30%, rgba(36, 18, 22, 0.62) 58%, rgba(38, 19, 24, 0.18) 88%),
    linear-gradient(to top, rgba(27, 14, 17, 0.6), transparent 46%);
}
.promo__glow {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(40% 46% at 74% 42%, rgba(217, 147, 164, 0.20), transparent 70%),
    radial-gradient(46% 50% at 18% 66%, rgba(174, 131, 227, 0.16), transparent 72%);
  mix-blend-mode: screen;
  animation: breathe 12s ease-in-out infinite;
}

.promo__inner {
  width: 100%;
  padding-block: calc(74 * var(--pxs));
  padding-inline: clamp(20px, 8.6vw, calc(132 * var(--pxs)));
}
.promo__card {
  max-width: calc(1272 * var(--pxs));
  margin-inline: auto;
}
.promo__card > * { max-width: calc(520 * var(--pxs)); }

.promo__title {
  margin: 0 0 calc(18 * var(--pxs));
  font-size: calc(56 * var(--pxs));
  font-weight: 800;
  line-height: 1.24;
  letter-spacing: -0.01em;
  text-shadow: 0 calc(6 * var(--pxs)) calc(30 * var(--pxs)) rgba(34, 14, 19, 0.55);
}
.promo__title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--accent-2) 0 38%, #fceff2 48%, var(--accent-2) 58% 100%);
  background-size: 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 7s 1s ease-in-out infinite;
}

.promo__text {
  margin: 0 0 calc(30 * var(--pxs));
  font-size: calc(17.5 * var(--pxs));
  font-weight: 300;
  line-height: 2.05;
  color: var(--ink-soft);
}

.promo__meta {
  display: flex;
  gap: calc(14 * var(--pxs));
  margin-block-end: calc(34 * var(--pxs));
  max-width: none;
}
.promo__meta span {
  display: grid;
  gap: calc(2 * var(--pxs));
  padding: calc(12 * var(--pxs)) calc(20 * var(--pxs));
  border-radius: calc(16 * var(--pxs));
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(14px);
  font-size: calc(12.5 * var(--pxs));
  font-weight: 300;
  color: var(--ink-dim);
  transition: transform 320ms var(--ease), background-color 300ms;
}
.promo__meta span:hover { transform: translateY(calc(-4 * var(--pxs))); background: var(--card-hi); }
.promo__meta b { font-size: calc(19 * var(--pxs)); font-weight: 700; color: #fff; }

/* ── 4 · carousel ───────────────────────────────────────────── */

.carousel__nav { display: flex; gap: calc(10 * var(--pxs)); flex: none; }

.cbtn {
  display: grid;
  place-items: center;
  width: calc(48 * var(--pxs));
  height: calc(48 * var(--pxs));
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  backdrop-filter: blur(12px);
  color: #fff;
  cursor: pointer;
  transition: transform 260ms var(--ease), background-color 260ms, border-color 260ms, opacity 260ms;
}
.cbtn svg { width: calc(19 * var(--pxs)); height: calc(19 * var(--pxs)); }
.cbtn:hover { background: var(--card-hi); border-color: var(--line-hi); transform: translateY(calc(-2 * var(--pxs))); }
.cbtn:active { transform: scale(0.94); }
.cbtn[disabled] { opacity: 0.32; cursor: default; transform: none; }

.carousel { position: relative; }

.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(238 * var(--pxs));
  gap: calc(22 * var(--pxs));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-block-end: calc(6 * var(--pxs));
  /* let card shadows breathe without being clipped */
  margin-inline: calc(-14 * var(--pxs));
  padding-inline: calc(14 * var(--pxs));
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { scroll-snap-align: start; }
.carousel__track:focus-visible { outline-offset: 6px; }

.carousel__bar {
  position: relative;
  height: 2px;
  margin-block-start: calc(26 * var(--pxs));
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.10);
  overflow: hidden;
}
.carousel__bar i {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 28%;
  border-radius: 2px;
  background: linear-gradient(to left, var(--accent), var(--accent-hi));
  transition: transform 160ms linear;
}

/* ── footer ─────────────────────────────────────────────────── */

.foot {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: calc(96 * var(--pxs)) calc(34 * var(--pxs));
  padding-inline: clamp(20px, 8.6vw, calc(132 * var(--pxs)));
  border-block-start: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(40, 21, 26, 0.6), rgba(27, 14, 17, 0.92));
}
.foot__glow {
  position: absolute;
  inset-block-start: -34%;
  inset-inline: -10%;
  height: 70%;
  z-index: -1;
  background: radial-gradient(46% 60% at 76% 60%, rgba(193, 117, 136, 0.20), transparent 72%);
  mix-blend-mode: screen;
  animation: breathe 14s ease-in-out infinite;
}
.foot__inner { max-width: calc(1272 * var(--pxs)); margin-inline: auto; }

/* newsletter ------------------------------------------------- */

.news {
  display: grid;
  grid-template-columns: 1fr minmax(calc(360 * var(--pxs)), 44%);
  align-items: center;
  gap: calc(46 * var(--pxs));
  padding: calc(42 * var(--pxs)) calc(46 * var(--pxs));
  border-radius: calc(26 * var(--pxs));
  border: 1px solid var(--line);
  background:
    radial-gradient(70% 130% at 88% 0%, rgba(193, 117, 136, 0.20), transparent 68%),
    rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(18px) saturate(120%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 calc(24 * var(--pxs)) calc(64 * var(--pxs)) rgba(23, 11, 14, 0.42);
}

.news__title {
  margin: 0 0 calc(12 * var(--pxs));
  font-size: calc(34 * var(--pxs));
  font-weight: 800;
  line-height: 1.34;
  letter-spacing: -0.01em;
}
.news__title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--accent) 0 38%, #fceff2 48%, var(--accent) 58% 100%);
  background-size: 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 8s 2s ease-in-out infinite;
}
.news__text {
  margin: 0;
  max-width: calc(420 * var(--pxs));
  font-size: calc(15.5 * var(--pxs));
  font-weight: 300;
  line-height: 1.95;
  color: var(--ink-soft);
}

.news__label {
  display: block;
  margin-block-end: calc(9 * var(--pxs));
  font-size: calc(13 * var(--pxs));
  font-weight: 500;
  color: var(--ink-soft);
}
.news__row { display: flex; gap: calc(10 * var(--pxs)); }

.news__input {
  flex: 1;
  min-width: 0;
  height: calc(54 * var(--pxs));
  padding-inline: calc(18 * var(--pxs));
  border-radius: calc(15 * var(--pxs));
  border: 1px solid var(--line);
  background: rgba(27, 14, 17, 0.42);
  color: #fff;
  font-family: inherit;
  font-size: calc(15 * var(--pxs));
  /* the value is always latin, but it should still hug the RTL edge */
  direction: ltr;
  text-align: right;
  transition: border-color 240ms var(--ease), background-color 240ms, box-shadow 240ms;
}
.news__input::placeholder { color: rgba(255, 255, 255, 0.34); }
.news__input:hover { border-color: rgba(255, 255, 255, 0.2); }
.news__input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(36, 20, 24, 0.6);
  box-shadow: 0 0 0 calc(3 * var(--pxs)) rgba(213, 145, 162, 0.18);
}
.news__input[aria-invalid="true"] { border-color: #e2718f; }
.news__input[aria-invalid="true"]:focus { box-shadow: 0 0 0 calc(3 * var(--pxs)) rgba(226, 113, 143, 0.22); }

.btn--sm {
  width: auto;
  height: calc(54 * var(--pxs));
  padding-inline: calc(24 * var(--pxs));
  border-radius: calc(15 * var(--pxs));
  font-size: calc(15.5 * var(--pxs));
  gap: calc(10 * var(--pxs));
  flex: none;
  cursor: pointer;
  font-family: inherit;
  color: #fff;
}
.btn--sm .btn__arrow { width: calc(17 * var(--pxs)); height: calc(17 * var(--pxs)); }

.news__hint {
  margin: calc(11 * var(--pxs)) 0 0;
  font-size: calc(12.5 * var(--pxs));
  font-weight: 300;
  color: var(--ink-dim);
  transition: color 240ms;
}
.news__hint.is-bad { color: #f0a0b4; }
.news__hint.is-good { color: #8ddcae; }

/* columns ---------------------------------------------------- */

.foot__grid {
  display: grid;
  grid-template-columns: 1.7fr repeat(3, 1fr) 1.3fr;
  gap: calc(40 * var(--pxs));
  padding-block: calc(74 * var(--pxs)) calc(56 * var(--pxs));
}

.brand--foot { margin-block-end: calc(22 * var(--pxs)); }
.brand--foot .brand__mark { width: calc(56 * var(--pxs)); height: calc(56 * var(--pxs)); font-size: calc(21 * var(--pxs)); }
.brand--foot .brand__name { font-size: calc(20 * var(--pxs)); }
.brand--foot .brand__tag { font-size: calc(11 * var(--pxs)); }

.foot__about {
  margin: 0 0 calc(26 * var(--pxs));
  max-width: calc(320 * var(--pxs));
  font-size: calc(14 * var(--pxs));
  font-weight: 300;
  line-height: 2;
  color: var(--ink-dim);
}

.social { display: flex; gap: calc(10 * var(--pxs)); }
.social a {
  display: grid;
  place-items: center;
  width: calc(44 * var(--pxs));
  height: calc(44 * var(--pxs));
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  backdrop-filter: blur(12px);
  color: var(--ink-soft);
  transition: transform 300ms var(--ease), color 240ms, border-color 260ms,
              background-color 260ms, box-shadow 320ms var(--ease);
}
.social svg { width: calc(19 * var(--pxs)); height: calc(19 * var(--pxs)); }
.social a:hover {
  transform: translateY(calc(-4 * var(--pxs)));
  color: #fff;
  border-color: rgba(234, 180, 193, 0.6);
  background: rgba(213, 145, 162, 0.22);
  box-shadow: 0 calc(10 * var(--pxs)) calc(26 * var(--pxs)) rgba(162, 78, 99, 0.45);
}

.foot__h {
  margin: 0 0 calc(20 * var(--pxs));
  font-size: calc(15.5 * var(--pxs));
  font-weight: 600;
}
.foot__col ul { display: grid; gap: calc(13 * var(--pxs)); }
.foot__col a, .foot__contact span {
  font-size: calc(14 * var(--pxs));
  font-weight: 300;
  color: var(--ink-dim);
  transition: color 220ms var(--ease);
}
.foot__col a { position: relative; }
.foot__col a:hover { color: #fff; }
.foot__col > ul > li > a::before {
  content: "";
  position: absolute;
  inset-block-end: calc(-3 * var(--pxs));
  inset-inline-start: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 300ms var(--ease);
}
.foot__col > ul > li > a:hover::before { width: 100%; }

.foot__contact ul { gap: calc(15 * var(--pxs)); }
.foot__contact li {
  display: flex;
  align-items: flex-start;
  gap: calc(10 * var(--pxs));
  line-height: 1.8;
}
.foot__contact svg {
  flex: none;
  width: calc(17 * var(--pxs));
  height: calc(17 * var(--pxs));
  margin-block-start: calc(3 * var(--pxs));
  color: var(--accent);
}
.foot__contact a { font-size: calc(14 * var(--pxs)); font-weight: 300; color: var(--ink-dim); transition: color 220ms; }
.foot__contact a:hover { color: #fff; }

/* trust chips ------------------------------------------------ */

.trust {
  display: flex;
  flex-wrap: wrap;
  gap: calc(12 * var(--pxs));
  padding-block-end: calc(30 * var(--pxs));
  border-block-end: 1px solid rgba(255, 255, 255, 0.07);
}
.trust li {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--pxs));
  padding: calc(11 * var(--pxs)) calc(18 * var(--pxs));
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(12px);
  font-size: calc(13 * var(--pxs));
  font-weight: 300;
  color: var(--ink-soft);
  transition: transform 300ms var(--ease), background-color 260ms, border-color 260ms;
}
.trust li:hover { transform: translateY(calc(-3 * var(--pxs))); background: var(--card-hi); border-color: var(--line-hi); }
.trust svg { width: calc(17 * var(--pxs)); height: calc(17 * var(--pxs)); color: var(--accent); }

/* bottom bar ------------------------------------------------- */

.foot__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: calc(14 * var(--pxs));
  padding-block-start: calc(26 * var(--pxs));
}
.foot__copy { margin: 0; font-size: calc(13 * var(--pxs)); font-weight: 300; color: var(--ink-dim); }
.foot__legal { display: flex; gap: calc(22 * var(--pxs)); }
.foot__legal a { font-size: calc(13 * var(--pxs)); font-weight: 300; color: var(--ink-dim); transition: color 220ms; }
.foot__legal a:hover { color: #fff; }

/* ── scroll reveal ──────────────────────────────────────────── */

/* scoped to .js so a missing or broken script can never leave content
   invisible — without it, one thrown error blanks a whole section */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(calc(30 * var(--pxs)));
  transition: opacity 760ms var(--ease-out), transform 860ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@keyframes promo-drift {
  from { transform: scale(1.03) translate3d(0, 0, 0); }
  to   { transform: scale(1.09) translate3d(calc(-18 * var(--pxs)), calc(-10 * var(--pxs)), 0); }
}

/* ── responsive ─────────────────────────────────────────────── */

@media (max-width: 1180px) {
  .cats { grid-template-columns: repeat(3, 1fr); }
  .cat--wide { grid-column: span 1; }
  .pgrid { grid-template-columns: repeat(3, 1fr); }

  .news { grid-template-columns: 1fr; gap: calc(28 * var(--pxs)); }
  .foot__grid { grid-template-columns: 1.6fr repeat(2, 1fr); row-gap: calc(46 * var(--pxs)); }
  .foot__contact { grid-column: 2 / -1; }
}

@media (max-width: 900px) {
  :root { --ks: clamp(0.86rem, 2vw, 1.02rem); }

  .section { padding-block: calc(84 * var(--pxs)); }
  .seam ~ main > .section:first-child { padding-block-start: calc(110 * var(--pxs)); }

  .seam { inset-block-start: calc(-90 * var(--pxs)); height: calc(420 * var(--pxs)); }
  .seam__orb--a { width: calc(280 * var(--pxs)); height: calc(280 * var(--pxs)); }
  .seam__orb--b { width: calc(240 * var(--pxs)); height: calc(240 * var(--pxs)); }
  .seam__bloom { width: 68vw; opacity: 0.4; }
  .bfly--seam { display: none; }
  .shead { margin-block-end: calc(34 * var(--pxs)); }
  .shead__title { font-size: calc(34 * var(--pxs)); }

  .cats { grid-template-columns: repeat(2, 1fr); grid-auto-rows: calc(204 * var(--pxs)); }
  .cat--tall { grid-row: span 1; }
  .cat--tall .cat__name, .cat--wide .cat__name { font-size: calc(23 * var(--pxs)); }

  .pgrid { grid-template-columns: repeat(2, 1fr); gap: calc(16 * var(--pxs)); }
  .pcard__cart, .pcard__wish { opacity: 1; transform: none; }
  .pcard__name { font-size: calc(15 * var(--pxs)); }

  .promo { min-height: calc(600 * var(--pxs)); }
  .promo__media img { object-position: 40% 30%; }
  .promo__scrim {
    background:
      linear-gradient(to top, rgba(31, 15, 19, 0.96) 42%, rgba(34, 17, 21, 0.55) 70%, transparent 92%);
  }
  .promo { align-items: end; }
  .promo__title { font-size: calc(40 * var(--pxs)); }
  .promo__meta { flex-wrap: wrap; gap: calc(10 * var(--pxs)); }
  .promo__meta span { padding: calc(10 * var(--pxs)) calc(15 * var(--pxs)); }

  .carousel__track { grid-auto-columns: calc(236 * var(--pxs)); }

  .foot { padding-block: calc(66 * var(--pxs)) calc(26 * var(--pxs)); }
  .news { padding: calc(30 * var(--pxs)) calc(24 * var(--pxs)); }
  .news__title { font-size: calc(28 * var(--pxs)); }
  .foot__grid { grid-template-columns: repeat(2, 1fr); padding-block: calc(52 * var(--pxs)) calc(40 * var(--pxs)); }
  .foot__brand { grid-column: 1 / -1; }
  .foot__contact { grid-column: 1 / -1; }
  .foot__about { max-width: none; }
}

@media (max-width: 560px) {
  .ghostlink { display: none; }
  .cats { grid-template-columns: 1fr; grid-auto-rows: calc(190 * var(--pxs)); }
  .pgrid { grid-template-columns: 1fr; }
  .pcard { flex-direction: row; align-items: stretch; }
  .pcard__top { flex: none; width: 42%; }
  .pcard__media { height: 100%; aspect-ratio: auto; }
  .pcard__cart { inset-inline: calc(10 * var(--pxs)); font-size: calc(13 * var(--pxs)); }
  .pcard__body { flex: 1; align-content: center; }
  /* ...but a horizontal carousel slide must stay a portrait card */
  .carousel__track .pcard { flex-direction: column; }
  .carousel__track .pcard__top { width: auto; }
  .carousel__track .pcard__media { height: auto; aspect-ratio: 3 / 4; }
  .carousel__track .pcard__body { align-content: start; }
  /* on a row card the wide button would swallow the packshot — go icon-only */
  .pcard__cart {
    inset-inline-start: auto;
    inset-inline-end: calc(10 * var(--pxs));
    width: calc(44 * var(--pxs));
    height: calc(44 * var(--pxs));
    border-radius: 50%;
    gap: 0;
    font-size: 0;
  }
  .pcard__cart svg { width: calc(19 * var(--pxs)); height: calc(19 * var(--pxs)); }
  .carousel__track { grid-auto-columns: 74%; }

  .news__row { flex-direction: column; }
  .btn--sm { width: 100%; }
  .foot__grid { grid-template-columns: 1fr; }
  .foot__bar { justify-content: center; text-align: center; }
  .foot__legal { justify-content: center; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .promo__media img { animation: none; }
  .carousel__track { scroll-behavior: auto; }
}