/* ============================================================
   Zarf — base + components
   Loads after tokens.css.
   ============================================================ */

/* --- Self-hosted fonts --- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-300.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
  size-adjust: 96%;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  size-adjust: 96%;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  size-adjust: 96%;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* --- Reset (lean) --- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  background: var(--bg-0);
  color: var(--ink-100);
  font-family: var(--ff-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: var(--gold-2);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--gold-3); }
hr { border: 0; border-top: 1px solid var(--ink-line); margin: var(--s-5) 0; }

/* --- Headings --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-display);
  font-weight: 300;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-100);
  margin: 0 0 var(--s-4);
}
h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); font-weight: 400; line-height: var(--lh-snug); }
h4 { font-size: var(--fs-xl);  font-weight: 400; }
h5 { font-size: var(--fs-lg);  font-weight: 500; }
h6 {
  font-family: var(--ff-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-60);
}

/* --- Focus ring (never removed) --- */
:focus { outline: none; }
:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
  border-radius: var(--r-1);
}

/* --- Selection --- */
::selection { background: var(--gold-1); color: var(--bg-0); }

/* --- Container --- */
.zarf-container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.zarf-container--narrow { max-width: var(--container); }

/* --- Eyebrow / Hairline / Caps label --- */
.zarf-eyebrow {
  display: inline-block;
  font-family: var(--ff-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold-2);
  margin: 0 0 var(--s-3);
}
.zarf-hairline {
  display: block;
  width: 64px;
  height: 1px;
  background: var(--gold-1);
  border: 0;
  margin: var(--s-4) 0;
}

/* --- Buttons --- */
.zarf-btn,
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 16px 32px;
  border: 1px solid var(--ink-100);
  background: var(--ink-100);
  color: var(--bg-0);
  font-family: var(--ff-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--r-0);
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.zarf-btn:hover,
.wp-block-button__link:hover {
  background: transparent;
  color: var(--ink-100);
}
.zarf-btn--gold {
  background: transparent;
  color: var(--gold-2);
  border-color: var(--gold-1);
}
.zarf-btn--gold:hover {
  background: var(--gold-foil);
  background-size: 200% 200%;
  color: var(--bg-0);
  border-color: transparent;
  animation: zarf-foil var(--dur-foil) linear infinite;
}
.zarf-btn--ghost {
  background: transparent;
  color: var(--ink-100);
  border-color: var(--ink-line);
}
.zarf-btn--ghost:hover {
  border-color: var(--ink-100);
  background: transparent;
  color: var(--ink-100);
}

/* --- Foil text + foil surface --- */
.zarf-foil {
  background: var(--gold-foil);
  background-size: 200% 200%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: zarf-foil var(--dur-foil) linear infinite;
}
.zarf-foil--surface {
  background: var(--gold-foil);
  background-size: 200% 200%;
  color: var(--bg-0);
  animation: zarf-foil var(--dur-foil) linear infinite;
}
@keyframes zarf-foil {
  0%   { background-position:   0% 50%; }
  100% { background-position: 200% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .zarf-foil, .zarf-foil--surface { animation: none; }
}

/* --- Header (sticky, blur on scroll) --- */
.zarf-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  transition: background var(--dur-base) var(--ease-out);
}
.zarf-header.is-stuck {
  background: rgba(10, 10, 13, 0.72);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ink-line);
}

/* --- Image CLS guard helper (use with --ratio inline style) --- */
.zarf-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ratio, 1 / 1);
  object-fit: cover;
}

/* --- Scroll-reveal hooks (paired with scroll-reveal.js) --- */
[data-zarf-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
  will-change: opacity, transform;
}
[data-zarf-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-zarf-reveal] { opacity: 1; transform: none; }
}

/* --- Skip link (a11y) --- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: var(--s-3) var(--s-4);
  background: var(--ink-100);
  color: var(--bg-0);
  font-family: var(--ff-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.skip-link:focus-visible {
  left: var(--s-3);
  top: var(--s-3);
}

/* --- Print --- */
@media print {
  .zarf-foil, .zarf-foil--surface {
    animation: none;
    background: var(--gold-1);
    color: var(--bg-0);
  }
}

/* ============================================================
   Modules — shared scaffold
   ============================================================ */
.zarf-module {
  position: relative;
  padding-block: clamp(48px, 8vw, 128px);
}
.zarf-module + .zarf-module { padding-top: 0; }

.zarf-section-head { margin-bottom: var(--s-6); }
.zarf-section-head__title {
  font-size: var(--fs-2xl);
  margin: 0 0 var(--s-3);
}
.zarf-hairline--center { margin-inline: auto; }

/* ------------------------------------------------------------
   Module: hero_bottle
   ------------------------------------------------------------ */
.zarf-hero {
  min-height: 92vh;
  min-height: 92svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-block: 0;
}
.zarf-hero__bg {
  position: absolute; inset: 0;
  z-index: 0;
}
.zarf-hero__image {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  will-change: transform;
}
.zarf-hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,13,0.55) 0%, rgba(10,10,13,0.0) 35%, rgba(10,10,13,0.85) 100%);
  pointer-events: none;
}
.zarf-hero__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(48px, 10vh, 128px);
  max-width: 760px;
}
.zarf-hero__title {
  font-size: var(--fs-4xl);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}
.zarf-hero__subtitle {
  font-size: var(--fs-lg);
  font-family: var(--ff-display);
  font-weight: 300;
  color: var(--ink-100);
  max-width: 56ch;
  margin: 0 0 var(--s-5);
  text-wrap: pretty;
}
.zarf-hero__cta { margin-top: var(--s-2); }

/* ------------------------------------------------------------
   Module: trust_strip
   ------------------------------------------------------------ */
.zarf-trust {
  border-block: 1px solid var(--ink-line);
  background: var(--bg-1);
  padding-block: var(--s-5);
}
.zarf-trust__list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s-5);
}
.zarf-trust__item {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-3);
  text-align: center;
}
.zarf-trust__icon {
  width: 28px; height: 28px;
  filter: brightness(0) saturate(100%) invert(82%) sepia(28%) saturate(459%) hue-rotate(2deg) brightness(94%) contrast(85%);
}
.zarf-trust__label {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-100);
}

/* ------------------------------------------------------------
   Module: signature_grid
   ------------------------------------------------------------ */
.zarf-signatures__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  gap: var(--s-5);
}
.zarf-signatures__grid--cols-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.zarf-signatures__grid--cols-4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.zarf-signatures__grid--cols-5 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.zarf-signatures__link {
  display: flex; flex-direction: column;
  gap: var(--s-3);
  color: inherit;
  text-decoration: none;
}
.zarf-signatures__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg-2);
}
.zarf-signatures__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.zarf-signatures__link:hover .zarf-signatures__img,
.zarf-signatures__link:focus-visible .zarf-signatures__img {
  transform: scale(1.04);
}
.zarf-signatures__name {
  font-family: var(--ff-display);
  font-size: var(--fs-lg);
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
}
.zarf-signatures__blurb {
  font-size: var(--fs-sm);
  color: var(--ink-60);
  margin: 0;
  line-height: 1.5;
}
.zarf-signatures__price {
  font-size: var(--fs-sm);
  color: var(--gold-2);
  margin-top: auto;
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------
   Module: ingredients_split
   ------------------------------------------------------------ */
.zarf-split__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  align-items: center;
}
@media (min-width: 768px) {
  .zarf-split__grid { grid-template-columns: 1fr 1fr; gap: var(--s-7); }
  .zarf-split--right .zarf-split__media { order: 2; }
}
.zarf-split__media { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-2); }
.zarf-split__img  { width: 100%; height: 100%; object-fit: cover; }
.zarf-split__title { font-size: var(--fs-2xl); margin: var(--s-3) 0 0; }
.zarf-split__copy  { font-size: var(--fs-md); color: var(--ink-100); max-width: 56ch; margin: var(--s-4) 0; line-height: 1.65; }
.zarf-split__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--s-4);
  margin: 0 0 var(--s-5);
  padding-block: var(--s-4);
  border-block: 1px solid var(--ink-line);
}
.zarf-split__meta dt { font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-60); margin: 0 0 4px; }
.zarf-split__meta dd { font-family: var(--ff-display); font-size: var(--fs-md); margin: 0; color: var(--ink-100); }

/* ------------------------------------------------------------
   Module: lookbook_grid
   ------------------------------------------------------------ */
.zarf-lookbook__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}
@media (min-width: 1024px) {
  .zarf-lookbook__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
}
.zarf-lookbook__item { margin: 0; overflow: hidden; aspect-ratio: 4 / 5; background: var(--bg-2); position: relative; }
.zarf-lookbook__item--span-2 { grid-column: span 2; aspect-ratio: 16 / 10; }
.zarf-lookbook__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.zarf-lookbook__item:hover .zarf-lookbook__img { transform: scale(1.03); }
.zarf-lookbook__caption {
  position: absolute; left: var(--s-3); bottom: var(--s-3);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-100);
  background: rgba(10,10,13,0.6);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  padding: 6px 10px;
}

/* ------------------------------------------------------------
   Module: perfumer_quote
   ------------------------------------------------------------ */
.zarf-quote { background: var(--bg-1); }
.zarf-quote__figure { margin: 0; text-align: center; }
.zarf-quote__portrait {
  width: 96px; height: 96px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto var(--s-5);
  border: 1px solid var(--ink-line);
}
.zarf-quote__portrait-img { width: 100%; height: 100%; object-fit: cover; }
.zarf-quote__body { margin: 0; position: relative; }
.zarf-quote__mark {
  font-family: var(--ff-display);
  font-size: 6rem;
  line-height: 0.5;
  color: var(--gold-1);
  display: block;
  margin-bottom: var(--s-3);
}
.zarf-quote__text {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: var(--fs-2xl);
  font-style: italic;
  line-height: 1.35;
  color: var(--ink-100);
  margin: 0 0 var(--s-5);
  text-wrap: balance;
}
.zarf-quote__attribution {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-60);
}

/* ------------------------------------------------------------
   Module: sample_cta
   ------------------------------------------------------------ */
.zarf-sample-cta__panel {
  position: relative;
  padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 64px);
  text-align: center;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
    var(--gold-foil) border-box;
  background-size: 100% 100%, 200% 200%;
  animation: zarf-foil var(--dur-foil) linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .zarf-sample-cta__panel { animation: none; }
}
.zarf-sample-cta__title {
  font-size: var(--fs-2xl);
  margin: 0 auto var(--s-4);
  max-width: 22ch;
  text-wrap: balance;
}
.zarf-sample-cta__body {
  font-size: var(--fs-md);
  color: var(--ink-60);
  max-width: 52ch;
  margin: 0 auto var(--s-5);
}

/* ------------------------------------------------------------
   Module: press_strip
   ------------------------------------------------------------ */
.zarf-press { background: var(--bg-1); padding-block: var(--s-6); }
.zarf-press__eyebrow { display: block; text-align: center; margin: 0 0 var(--s-4); color: var(--ink-60); }
.zarf-press__list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--s-5);
  align-items: center;
  justify-items: center;
}
.zarf-press__logo {
  max-height: 40px;
  width: auto;
  filter: grayscale(1) brightness(1.2) contrast(0.7);
  opacity: 0.7;
  transition: opacity var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out);
}
.zarf-press__item:hover .zarf-press__logo { opacity: 1; filter: none; }

/* ------------------------------------------------------------
   Module: timeline
   ------------------------------------------------------------ */
.zarf-timeline__list {
  list-style: none; margin: 0; padding: 0;
  position: relative;
}
.zarf-timeline__list::before {
  content: "";
  position: absolute;
  left: 100px;
  top: 8px; bottom: 8px;
  width: 1px;
  background: var(--ink-line);
}
@media (max-width: 600px) {
  .zarf-timeline__list::before { left: 60px; }
}
.zarf-timeline__item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--s-5);
  padding-block: var(--s-5);
  position: relative;
}
@media (max-width: 600px) {
  .zarf-timeline__item { grid-template-columns: 60px 1fr; gap: var(--s-3); }
}
.zarf-timeline__item::before {
  content: "";
  position: absolute;
  left: 96px; top: calc(50% - 3px);
  width: 8px; height: 8px;
  background: var(--gold-1);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--bg-0);
}
@media (max-width: 600px) {
  .zarf-timeline__item::before { left: 56px; }
}
.zarf-timeline__year {
  font-family: var(--ff-display);
  font-size: var(--fs-xl);
  font-weight: 400;
  font-feature-settings: "lnum" 1;
}
.zarf-timeline__title {
  font-size: var(--fs-lg);
  margin: 0 0 var(--s-2);
  font-weight: 400;
}
.zarf-timeline__copy {
  font-size: var(--fs-md);
  color: var(--ink-60);
  margin: 0;
  line-height: 1.6;
}

/* ============================================================
   Cart line — sample / discovery credit indicators
   ============================================================ */
.zarf-cart-badge {
  display: inline-flex;
  align-items: center;
  margin-left: var(--s-2);
  padding: 2px 8px;
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1.4;
  border-radius: var(--r-1);
  background: var(--gold-foil);
  background-size: 200% 200%;
  color: var(--bg-0);
  animation: zarf-foil var(--dur-foil) linear infinite;
  vertical-align: middle;
}
@media (prefers-reduced-motion: reduce) {
  .zarf-cart-badge { animation: none; }
}
.zarf-cart-free {
  font-family: var(--ff-display);
  font-size: var(--fs-md);
  font-style: italic;
  color: var(--gold-2);
  letter-spacing: 0.04em;
}
.zarf-cart-qty-fixed {
  display: inline-block;
  min-width: 32px;
  padding: 4px 8px;
  text-align: center;
  border: 1px solid var(--ink-line);
  color: var(--ink-60);
  font-size: var(--fs-sm);
  background: var(--bg-1);
}

/* ============================================================
   PDP — layout polish on top of WooCommerce blocks
   ============================================================ */
.zarf-pdp__columns { align-items: flex-start; }
.zarf-pdp__media .wp-block-woocommerce-product-image-gallery img {
  width: 100%;
  height: auto;
  display: block;
}
.zarf-pdp__body { padding-block: var(--s-3); }

/* WC variation form spacing */
.zarf-pdp__body .variations_form .variations,
.zarf-pdp__body .variations_form table.variations { margin: var(--s-4) 0; }
.zarf-pdp__body .variations_form table.variations td.label label {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-60);
}
.zarf-pdp__body .variations_form select {
  background: var(--bg-1);
  color: var(--ink-100);
  border: 1px solid var(--ink-line);
  padding: 12px 16px;
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  border-radius: 0;
}

/* ============================================================
   Engraving field
   ============================================================ */
.zarf-engraving {
  margin: var(--s-4) 0;
  padding: var(--s-4);
  border: 1px solid var(--ink-line);
  background: var(--bg-1);
}
.zarf-engraving__label {
  display: block;
  margin-bottom: var(--s-3);
}
.zarf-engraving__title {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-family: var(--ff-display);
  font-size: var(--fs-md);
  font-weight: 400;
  color: var(--ink-100);
}
.zarf-engraving__free {
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold-2);
}
.zarf-engraving__hint {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-xs);
  color: var(--ink-60);
}
.zarf-engraving__input {
  display: block;
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-0);
  color: var(--ink-100);
  border: 1px solid var(--ink-line);
  border-radius: 0;
  font-family: var(--ff-display);
  font-size: var(--fs-md);
  letter-spacing: 0.04em;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.zarf-engraving__input:focus {
  outline: 0;
  border-color: var(--gold-1);
}
.zarf-engraving__counter {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--fs-xs);
  color: var(--ink-60);
  text-align: right;
  letter-spacing: 0.05em;
}

/* ============================================================
   Olfactive Pyramid
   ============================================================ */
.zarf-pyramid {
  margin: var(--s-6) 0 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--ink-line);
}
.zarf-pyramid__heading {
  font-family: var(--ff-display);
  font-size: var(--fs-lg);
  font-weight: 400;
  margin: 0 0 var(--s-4);
}
.zarf-pyramid__tier {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--ink-line);
}
.zarf-pyramid__tier:last-child { border-bottom: 0; }
@media (max-width: 480px) {
  .zarf-pyramid__tier { grid-template-columns: 64px 1fr; gap: var(--s-3); }
}
.zarf-pyramid__tier-label {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--gold-2);
  align-self: center;
}
.zarf-pyramid__notes {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.zarf-pyramid__note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--ink-line);
  font-family: var(--ff-display);
  font-size: var(--fs-md);
  color: var(--ink-100);
  background: var(--bg-1);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.zarf-pyramid__note-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}
.zarf-pyramid__note:hover { border-color: var(--gold-1); }
.zarf-pyramid__note-name { letter-spacing: 0.02em; }

/* Intensity dots — render as ::before content */
.zarf-pyramid__dots {
  display: inline-flex;
  gap: 3px;
}
.zarf-pyramid__dots::before,
.zarf-pyramid__dots::after,
.zarf-pyramid__note .zarf-pyramid__dots {
  /* Pure pseudo-element approach gets messy; use box-shadow instead. */
}
/* Three-dot row, we paint dots via radial-gradient on a fixed-width pseudo. */
.zarf-pyramid__dots {
  width: 28px;
  height: 6px;
  background-image:
    radial-gradient(circle at 4px 3px, var(--ink-line) 2px, transparent 2.5px),
    radial-gradient(circle at 14px 3px, var(--ink-line) 2px, transparent 2.5px),
    radial-gradient(circle at 24px 3px, var(--ink-line) 2px, transparent 2.5px),
    radial-gradient(circle at 32px 3px, var(--ink-line) 2px, transparent 2.5px);
  background-repeat: no-repeat;
}
.zarf-pyramid__note--whisper .zarf-pyramid__dots {
  background-image:
    radial-gradient(circle at 4px 3px, var(--gold-2) 2px, transparent 2.5px),
    radial-gradient(circle at 14px 3px, var(--ink-line) 2px, transparent 2.5px),
    radial-gradient(circle at 24px 3px, var(--ink-line) 2px, transparent 2.5px),
    radial-gradient(circle at 32px 3px, var(--ink-line) 2px, transparent 2.5px);
}
.zarf-pyramid__note--soft .zarf-pyramid__dots {
  background-image:
    radial-gradient(circle at 4px 3px, var(--gold-2) 2px, transparent 2.5px),
    radial-gradient(circle at 14px 3px, var(--gold-2) 2px, transparent 2.5px),
    radial-gradient(circle at 24px 3px, var(--ink-line) 2px, transparent 2.5px),
    radial-gradient(circle at 32px 3px, var(--ink-line) 2px, transparent 2.5px);
}
.zarf-pyramid__note--present .zarf-pyramid__dots {
  background-image:
    radial-gradient(circle at 4px 3px, var(--gold-2) 2px, transparent 2.5px),
    radial-gradient(circle at 14px 3px, var(--gold-2) 2px, transparent 2.5px),
    radial-gradient(circle at 24px 3px, var(--gold-2) 2px, transparent 2.5px),
    radial-gradient(circle at 32px 3px, var(--ink-line) 2px, transparent 2.5px);
}
.zarf-pyramid__note--bold .zarf-pyramid__dots {
  background-image:
    radial-gradient(circle at 4px 3px, var(--gold-2) 2px, transparent 2.5px),
    radial-gradient(circle at 14px 3px, var(--gold-2) 2px, transparent 2.5px),
    radial-gradient(circle at 24px 3px, var(--gold-2) 2px, transparent 2.5px),
    radial-gradient(circle at 32px 3px, var(--gold-2) 2px, transparent 2.5px);
}

/* ============================================================
   Product Meta Rail
   ============================================================ */
.zarf-meta-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s-4);
  margin: var(--s-4) 0 var(--s-5);
  padding: var(--s-4) 0;
  border-block: 1px solid var(--ink-line);
}
.zarf-meta-rail__item dt {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-60);
  margin: 0 0 4px;
}
.zarf-meta-rail__item dd {
  font-family: var(--ff-display);
  font-size: var(--fs-md);
  color: var(--ink-100);
  margin: 0;
}

/* ============================================================
   Sticky Add-to-Bag — mobile only
   ============================================================ */
.zarf-sticky-atc {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  background: rgba(10, 10, 13, 0.92);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-top: 1px solid var(--ink-line);
  transform: translateY(100%);
  transition: transform var(--dur-base) var(--ease-out);
}
.zarf-sticky-atc.is-visible {
  transform: translateY(0);
}
@media (max-width: 768px) {
  .zarf-sticky-atc { display: block; }
}
.zarf-sticky-atc__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--gutter);
  max-width: var(--container-w);
  margin-inline: auto;
}
.zarf-sticky-atc__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.zarf-sticky-atc__name {
  font-family: var(--ff-display);
  font-size: var(--fs-md);
  color: var(--ink-100);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zarf-sticky-atc__price {
  font-size: var(--fs-sm);
  color: var(--gold-2);
}
.zarf-sticky-atc__cta { flex-shrink: 0; padding: 12px 20px; }

/* ============================================================
   Cross-sells heading
   ============================================================ */
.zarf-pdp__cross-sells h2 {
  font-size: var(--fs-2xl);
  margin-bottom: var(--s-5);
}