/* =====================================================================
   Cartin & Gold — Editorial Home design system
   Scope: only pages using template-cartin-home.php (body.cag-editorial-home)
   ===================================================================== */

:root {
  /* Color tokens */
  --cag-black: #0d0c0a;
  --cag-ink: #1a1815;
  --cag-charcoal: #262320;
  --cag-cream: #f5efe4;
  --cag-warm-white: #faf7f1;
  --cag-sand: #e9dfcd;
  --cag-taupe: #8a8177;
  --cag-gold: #b3945c;
  --cag-gold-soft: #cfb684;
  --cag-line: rgba(13, 12, 10, 0.12);
  --cag-line-light: rgba(250, 247, 241, 0.18);

  /* Type */
  --cag-font-display: "Playfair Display", Georgia, serif;
  --cag-font-body: "Open Sans", -apple-system, sans-serif;

  /* Spacing & layout */
  --cag-gutter: clamp(1.25rem, 4vw, 3.5rem);
  --cag-section: clamp(4rem, 10vw, 8.5rem);
  --cag-max: 1360px;

  /* Motion */
  --cag-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cag-dur-fast: 0.35s;
  --cag-dur: 0.7s;
  --cag-dur-slow: 1.1s;
}

body.cag-editorial-home {
  background: var(--cag-warm-white);
  color: var(--cag-ink);
}

/* ---------- Shared primitives ---------- */

.cag-home { overflow-x: clip; }

.cag-wrap {
  max-width: var(--cag-max);
  margin-inline: auto;
  padding-inline: var(--cag-gutter);
}

.cag-home section { padding-block: var(--cag-section); position: relative; }

/* Neutralize theme heading colors inside the editorial page */
.cag-home h1, .cag-home h2, .cag-home h3, .cag-home h4 { color: inherit; }

.cag-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font: 600 0.72rem/1 var(--cag-font-body);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cag-gold);
}
.cag-kicker::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: currentColor;
}

.cag-h2 {
  font: 600 clamp(2rem, 4.4vw, 3.4rem)/1.08 var(--cag-font-display);
  letter-spacing: -0.01em;
  margin: 0.9rem 0 1rem;
  color: inherit;
}

.cag-lede {
  font: 400 clamp(1rem, 1.4vw, 1.15rem)/1.65 var(--cag-font-body);
  max-width: 34rem;
  color: var(--cag-taupe);
}

.cag-btn,
.cag-home .cag-btn.button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.9rem;
  font: 600 0.8rem/1 var(--cag-font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cag-warm-white);
  background: var(--cag-black);
  border: 1px solid var(--cag-black);
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--cag-dur-fast) var(--cag-ease),
    color var(--cag-dur-fast) var(--cag-ease),
    border-color var(--cag-dur-fast) var(--cag-ease),
    transform var(--cag-dur-fast) var(--cag-ease);
}
.cag-btn:hover,
.cag-btn:focus-visible { background: var(--cag-gold); border-color: var(--cag-gold); color: var(--cag-black); }
.cag-btn--ghost { background: transparent; color: var(--cag-black); }
.cag-btn--light { background: var(--cag-cream); border-color: var(--cag-cream); color: var(--cag-black); }
.cag-btn--light:hover { background: var(--cag-gold); border-color: var(--cag-gold); }
.cag-btn--onDark { color: var(--cag-cream); border-color: var(--cag-line-light); background: transparent; }
.cag-btn--onDark:hover { background: var(--cag-cream); color: var(--cag-black); border-color: var(--cag-cream); }

.cag-home :focus-visible {
  outline: 2px solid var(--cag-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Subtle grain overlay (CSS-only, replaces AI paper texture) */
.cag-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  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.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 1. Header treatment (Woostify header, restyled) ---------- */

/* Header stickiness is handled site-wide in cag-global.css */
body.cag-editorial-home.cag-header-solid .site-header,
body.cag-editorial-home.cag-header-solid #masthead {
  background: rgba(250, 247, 241, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--cag-line);
}
body.cag-editorial-home .site-header a,
body.cag-editorial-home .site-header .woostify-header-total-price {
  color: var(--cag-cream);
}
body.cag-editorial-home .site-header svg { fill: var(--cag-cream); }

/* ---------- 2. Hero ---------- */

.cag-hero {
  min-height: calc(100svh - var(--cag-header-h, 212px));
  display: grid;
  align-items: end;
  color: var(--cag-cream);
  background: var(--cag-black);
  padding-block: 0;
  isolation: isolate;
}
.cag-hero__media,
.cag-hero__media img,
.cag-hero__media picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 20%;
  z-index: -2;
}
.cag-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(13, 12, 10, 0.8) 0%, rgba(13, 12, 10, 0.38) 48%, rgba(13, 12, 10, 0.06) 100%),
    linear-gradient(0deg, rgba(13, 12, 10, 0.6) 0%, rgba(13, 12, 10, 0) 42%),
    linear-gradient(180deg, rgba(13, 12, 10, 0.45) 0%, rgba(13, 12, 10, 0) 22%);
}
.cag-hero__inner {
  width: 100%;
  padding-block: clamp(6rem, 14vh, 9rem) clamp(3rem, 8vh, 5rem);
}
.cag-hero__kicker { color: var(--cag-gold-soft); }
.cag-hero__title {
  font: 600 clamp(2.8rem, 7.2vw, 6.2rem)/1.02 var(--cag-font-display);
  letter-spacing: -0.015em;
  margin: 1.1rem 0 1.2rem;
  max-width: 12ch;
  text-shadow: 0 2px 30px rgba(13, 12, 10, 0.55), 0 1px 4px rgba(13, 12, 10, 0.4);
}
.cag-hero__title em { font-style: italic; color: var(--cag-gold-soft); }
.cag-hero__sub {
  font: 400 clamp(1rem, 1.5vw, 1.2rem)/1.6 var(--cag-font-body);
  color: rgba(245, 239, 228, 0.88);
  max-width: 30rem;
  margin-bottom: 2rem;
  text-shadow: 0 1px 18px rgba(13, 12, 10, 0.5);
}
.cag-hero__ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.cag-hero__scrollcue {
  position: absolute;
  right: var(--cag-gutter);
  bottom: 2.2rem;
  font: 600 0.66rem/1 var(--cag-font-body);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(245, 239, 228, 0.6);
  writing-mode: vertical-rl;
}

/* line-split reveal targets (JS adds spans; without JS text is untouched) */
.cag-split .cag-split__line { display: block; overflow: clip; }
.cag-split .cag-split__inner { display: block; }

/* ---------- 3. Featured showcase ---------- */

.cag-featured { background: var(--cag-warm-white); }
.cag-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(240px, 24vw, 330px);
  gap: 1.4rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 1.5rem var(--cag-gutter) 2rem;
  margin-inline: calc(-1 * var(--cag-gutter));
  scrollbar-width: thin;
  scrollbar-color: var(--cag-gold) transparent;
}
.cag-rail > * { scroll-snap-align: start; }

.cag-card {
  background: #fff;
  border: 1px solid var(--cag-line);
  border-radius: 14px;
  overflow: clip;
  display: flex;
  flex-direction: column;
  transition: transform var(--cag-dur-fast) var(--cag-ease), box-shadow var(--cag-dur-fast) var(--cag-ease);
}
.cag-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -24px rgba(13, 12, 10, 0.28); }
.cag-card__media { display: block; aspect-ratio: 1; overflow: clip; background: var(--cag-cream); }
.cag-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--cag-dur-slow) var(--cag-ease);
}
.cag-card:hover .cag-card__media img { transform: scale(1.05); }
.cag-card__body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.35rem; flex: 1; }
.cag-card__title { font: 600 1rem/1.35 var(--cag-font-body); margin: 0; }
.cag-card__title a { color: var(--cag-ink); text-decoration: none; }
.cag-card__title a:hover { color: var(--cag-gold); }
.cag-card__price { margin: 0; font: 600 0.95rem/1 var(--cag-font-body); color: var(--cag-ink); }
.cag-card__price del { color: var(--cag-taupe); font-weight: 400; margin-right: 0.4rem; }
.cag-card__price ins { text-decoration: none; color: var(--cag-gold); }
.cag-card__variants { margin: 0; font: 400 0.78rem/1 var(--cag-font-body); color: var(--cag-taupe); }
.cag-card__actions { margin-top: auto; padding-top: 0.8rem; display: flex; align-items: center; gap: 0.7rem; }
/* Restyle Woo's native loop buttons inside our cards (keeps AJAX behavior) */
.cag-home .cag-card__actions .button,
.cag-home .cag-card__actions a.added_to_cart {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 1.3rem;
  font: 600 0.72rem/1 var(--cag-font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
  background: var(--cag-black);
  color: var(--cag-warm-white);
  border: 1px solid var(--cag-black);
  text-decoration: none;
  transition: background var(--cag-dur-fast) var(--cag-ease), color var(--cag-dur-fast) var(--cag-ease);
}
.cag-home .cag-card__actions .button:hover,
.cag-home .cag-card__actions .button:focus-visible {
  background: var(--cag-gold);
  border-color: var(--cag-gold);
  color: var(--cag-black);
}
.cag-home .cag-card__actions .button svg { width: 0.9rem; height: 0.9rem; fill: currentColor; }

/* ---------- 4/5. Women / Men collections ---------- */

.cag-collection { background: var(--cag-cream); }
.cag-collection--men { background: var(--cag-black); color: var(--cag-cream); }
.cag-collection--men .cag-lede { color: rgba(245, 239, 228, 0.72); }
.cag-collection__grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
}
.cag-collection__media { grid-column: span 7; border-radius: 18px; overflow: clip; position: relative; }
.cag-collection__media img { width: 100%; height: auto; display: block; }
.cag-collection__copy { grid-column: span 5; }
.cag-collection--men .cag-collection__media { order: 2; }
.cag-collection__cats {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin: 1.4rem 0 1.8rem; padding: 0; list-style: none;
}
.cag-collection__cats a {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font: 600 0.74rem/1 var(--cag-font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  transition: background var(--cag-dur-fast), color var(--cag-dur-fast), border-color var(--cag-dur-fast);
}
.cag-collection__cats a:hover { background: var(--cag-gold); border-color: var(--cag-gold); color: var(--cag-black); }
.cag-collection__products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.3rem;
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
.cag-collection--men .cag-card { background: var(--cag-charcoal); border-color: var(--cag-line-light); }
.cag-collection--men .cag-card__title a { color: var(--cag-cream); }
.cag-collection--men .cag-card__price { color: var(--cag-cream); }

/* ---------- 6. Pinned fashion transition ---------- */

.cag-showcase { background: var(--cag-black); color: var(--cag-cream); padding-block: 0; }
.cag-showcase__stage { min-height: 100svh; display: grid; align-items: center; overflow: clip; }
.cag-showcase__frame {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.cag-showcase__visual { position: relative; aspect-ratio: 4 / 5; max-height: 74svh; border-radius: 18px; overflow: clip; }
.cag-showcase__visual img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.5s var(--cag-ease);
}
.cag-showcase__visual img.is-active { opacity: 1; }
.cag-showcase__index { font: 600 0.8rem/1 var(--cag-font-body); letter-spacing: 0.3em; color: var(--cag-gold-soft); }
.cag-showcase__label { font: 600 clamp(1.9rem, 4vw, 3.2rem)/1.1 var(--cag-font-display); margin: 0.8rem 0; min-height: 2.4em; color: var(--cag-cream); }
.cag-showcase__desc { color: rgba(245, 239, 228, 0.72); max-width: 26rem; min-height: 3.2em; }
.cag-showcase__cta { margin-top: 1.6rem; }
.cag-showcase__progress {
  display: flex; gap: 0.5rem; margin-top: 2.2rem; padding: 0; list-style: none;
}
.cag-showcase__progress li {
  width: 2.6rem; height: 2px; background: var(--cag-line-light); position: relative; overflow: clip;
}
.cag-showcase__progress li::after {
  content: ""; position: absolute; inset: 0; background: var(--cag-gold);
  transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--cag-ease);
}
.cag-showcase__progress li.is-active::after { transform: scaleX(1); }
/* No-JS / reduced-motion fallback: stacked static slides */
.cag-showcase--static .cag-showcase__stage { min-height: 0; padding-block: var(--cag-section); }
.cag-showcase--static .cag-showcase__visual img { position: static; opacity: 1; height: auto; }

/* ---------- 7. Cinematic video reveal ---------- */

.cag-film { background: var(--cag-black); color: var(--cag-cream); padding-block: 0; }
.cag-film__stage { min-height: 100svh; display: grid; place-items: center; overflow: clip; }
.cag-film__frame {
  width: min(66vw, 1080px);
  border-radius: 20px;
  overflow: clip;
  position: relative;
  aspect-ratio: 16 / 9;
  box-shadow: 0 40px 120px -40px rgba(0, 0, 0, 0.8);
}
.cag-film__frame video,
.cag-film__frame img.cag-film__poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.cag-film__title {
  position: absolute;
  left: clamp(1.2rem, 4vw, 3rem);
  bottom: clamp(1.2rem, 4vw, 2.6rem);
  z-index: 2;
  font: 600 clamp(1.6rem, 3.6vw, 3rem)/1.1 var(--cag-font-display);
  max-width: 12ch;
  color: var(--cag-cream);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
}
.cag-film__controls {
  position: absolute; right: 1rem; bottom: 1rem; z-index: 3; display: flex; gap: 0.5rem;
}
.cag-media-toggle {
  width: 2.9rem; height: 2.9rem; border-radius: 50%;
  border: 1px solid var(--cag-line-light);
  background: rgba(13, 12, 10, 0.55);
  color: var(--cag-cream);
  display: grid; place-items: center; cursor: pointer;
  transition: background var(--cag-dur-fast);
}
.cag-media-toggle:hover { background: var(--cag-gold); color: var(--cag-black); }

/* ---------- 8. Mugs & blankets ---------- */

.cag-comfort { background: var(--cag-cream); }
.cag-comfort__split {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
.cag-comfort__panel { position: relative; isolation: isolate; border-radius: 18px; overflow: clip; min-height: 420px; display: grid; align-items: end; color: var(--cag-cream); }
.cag-comfort__panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform var(--cag-dur-slow) var(--cag-ease); }
.cag-comfort__panel:hover img { transform: scale(1.04); }
.cag-comfort__panel::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(13,12,10,.66), rgba(13,12,10,0) 55%);
}
.cag-comfort__panel-inner { padding: clamp(1.4rem, 3vw, 2.2rem); }
.cag-comfort__panel h3 { font: 600 clamp(1.5rem, 2.6vw, 2.1rem)/1.15 var(--cag-font-display); margin: 0 0 0.9rem; }
.cag-comfort__products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; margin-top: clamp(2rem, 4vw, 3rem); }

/* ---------- 9. More ways ---------- */

.cag-more { background: var(--cag-warm-white); }
.cag-more__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: clamp(2rem, 4vw, 3rem); }
.cag-more__tile { position: relative; isolation: isolate; border-radius: 16px; overflow: clip; aspect-ratio: 4 / 5; display: grid; align-items: end; color: var(--cag-cream); text-decoration: none; }
.cag-more__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform var(--cag-dur-slow) var(--cag-ease); }
.cag-more__tile:hover img { transform: scale(1.05); }
.cag-more__tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(13,12,10,.6), rgba(13,12,10,0) 50%); }
.cag-more__tile-inner { padding: 1.4rem; }
.cag-more__tile h3 { font: 600 1.35rem/1.2 var(--cag-font-display); margin: 0 0 0.35rem; }
.cag-more__tile span { font: 600 0.72rem/1 var(--cag-font-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--cag-gold-soft); }

/* ---------- 10. Trust ---------- */

.cag-trust { background: var(--cag-black); color: var(--cag-cream); }
.cag-trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; margin-top: clamp(2rem, 4vw, 3rem); }
.cag-trust__item { border: 1px solid var(--cag-line-light); border-radius: 16px; padding: 1.6rem 1.4rem; }
.cag-trust__item svg { width: 2rem; height: 2rem; stroke: var(--cag-gold-soft); margin-bottom: 1rem; }
.cag-trust__item h3 { font: 600 1.05rem/1.3 var(--cag-font-body); margin: 0 0 0.5rem; }
.cag-trust__item p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: rgba(245, 239, 228, 0.68); }

/* ---------- 11. Selected products ---------- */

.cag-selected { background: var(--cag-warm-white); }
.cag-selected__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; margin-top: clamp(2rem, 4vw, 3rem); }

/* ---------- 12. Advertisement ---------- */

.cag-ad { background: var(--cag-charcoal); color: var(--cag-cream); }
.cag-ad__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.cag-ad__frame {
  position: relative;
  width: min(360px, 78vw);
  aspect-ratio: 9 / 16;
  margin-inline: auto;
  border-radius: 26px;
  overflow: clip;
  box-shadow: 0 40px 90px -35px rgba(0, 0, 0, 0.75);
  border: 1px solid var(--cag-line-light);
}
.cag-ad__frame video, .cag-ad__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- 13. Final CTA ---------- */

.cag-final { background: var(--cag-cream); text-align: center; }
.cag-final .cag-h2 { font-size: clamp(2.3rem, 5.4vw, 4.2rem); max-width: 16ch; margin-inline: auto; }
.cag-final__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; margin-top: 2.2rem; }

/* ---------- Reveal system (JS adds .cag-io; visible by default) ---------- */

html.cag-js .cag-reveal { opacity: 0; transform: translateY(28px); }
html.cag-js .cag-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--cag-dur) var(--cag-ease), transform var(--cag-dur) var(--cag-ease);
}

/* ---------- Custom cursor (fine pointers only) ---------- */

.cag-cursor {
  position: fixed; top: 0; left: 0; z-index: 9999;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--cag-gold);
  pointer-events: none;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  transition: width 0.25s var(--cag-ease), height 0.25s var(--cag-ease), opacity 0.25s;
  opacity: 0;
}
.cag-cursor.is-on { opacity: 1; }
.cag-cursor.is-hover { width: 44px; height: 44px; }
@media (hover: none), (pointer: coarse) { .cag-cursor { display: none !important; } }

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .cag-collection__grid { grid-template-columns: 1fr; }
  .cag-collection__media, .cag-collection__copy { grid-column: 1 / -1; }
  .cag-collection--men .cag-collection__media { order: 0; }
  .cag-collection__products, .cag-selected__grid, .cag-trust__grid { grid-template-columns: repeat(2, 1fr); }
  .cag-comfort__products { grid-template-columns: repeat(2, 1fr); }
  .cag-showcase__frame { grid-template-columns: 1fr; gap: 1.2rem; }
  .cag-showcase__visual { max-height: 52svh; aspect-ratio: 3 / 4; }
  .cag-film__frame { width: 86vw; }
  .cag-ad__grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .cag-comfort__split, .cag-more__grid { grid-template-columns: 1fr; }
  .cag-comfort__panel { min-height: 320px; }
  .cag-collection__products, .cag-selected__grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
  .cag-trust__grid { grid-template-columns: 1fr; }
  .cag-hero__media img { object-position: 74% 22%; }
  /* On narrow screens the whole frame is "left of the model": use a bottom scrim only */
  .cag-hero__scrim {
    background:
      linear-gradient(0deg, rgba(13, 12, 10, 0.78) 0%, rgba(13, 12, 10, 0.12) 55%, rgba(13, 12, 10, 0.3) 100%);
  }
  .cag-card__body { padding: 0.85rem 0.9rem 1rem; }
  .cag-rail { grid-auto-columns: 72vw; }
}

/* ---------- Mobile: tighten vertical rhythm, remove empty space ---------- */

@media (max-width: 767px) {
  /* Shorter section padding so sections don't feel sparse */
  .cag-home section { padding-block: clamp(2.25rem, 8vw, 3.25rem); }

  /* The pinned-style sections no longer force a full screen of height —
     they shrink-wrap their (small) content instead of leaving big gaps. */
  .cag-showcase__stage,
  .cag-film__stage {
    min-height: 0;
    padding-block: clamp(2.25rem, 8vw, 3.25rem);
  }
  .cag-showcase, .cag-film { padding-block: 0; }

  /* Showcase image sized to content, copy stacked directly under it */
  .cag-showcase__visual { max-height: none; aspect-ratio: 4 / 5; }
  .cag-showcase__frame { gap: 1.1rem; }
  .cag-showcase__label { min-height: 0; margin: 0.4rem 0; }
  .cag-showcase__desc { min-height: 0; }
  .cag-showcase__progress { margin-top: 1.2rem; }

  /* Film: a taller frame that actually fills the width, no black margins */
  .cag-film__frame { width: 100%; aspect-ratio: 3 / 4; border-radius: 14px; }
  .cag-film__title { font-size: clamp(1.5rem, 7vw, 2.2rem); }

  /* Comfort / more tiles a touch shorter */
  .cag-comfort__panel { min-height: 260px; }

  /* Ad frame not too tall on small screens */
  .cag-ad__frame { width: min(300px, 72vw); }

  /* Product rows become swipeable carousels — same feel as Featured Fashion,
     so every product section scrolls sideways instead of stacking tall. */
  .cag-collection__products,
  .cag-comfort__products,
  .cag-selected__grid {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 64vw;
    gap: 0.9rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--cag-gold) transparent;
    /* bleed to the screen edges so a card peeks in from the right = "swipe me" */
    margin-inline: calc(-1 * var(--cag-gutter));
    padding: 0.25rem var(--cag-gutter) 1rem;
  }
  .cag-collection__products > *,
  .cag-comfort__products > *,
  .cag-selected__grid > * {
    scroll-snap-align: start;
  }
}

/* ---------- Woostify chrome overrides (editorial home only) ---------- */

/* Full-bleed the template content; sections manage their own gutters via .cag-wrap */
body.cag-editorial-home .site-content {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100%;
}
body.cag-editorial-home .site-content .woostify-container {
  max-width: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

/* Header bands: always solid black, on load and while scrolling */
body.cag-editorial-home .site-header .site-header-inner,
body.cag-editorial-home .site-header .header-content-bottom {
  background-color: var(--cag-black) !important;
}
/* Replace template red accents with refined gold */
body.cag-editorial-home .site-header .theme-item-count,
body.cag-editorial-home .site-header .shop-cart-count,
body.cag-editorial-home .site-header .wishlist-item-count {
  background-color: var(--cag-gold) !important;
  color: var(--cag-black) !important;
}
body.cag-editorial-home .site-header .header-content-bottom .woostify-header-total-price,
body.cag-editorial-home .site-header .header-content-bottom a,
body.cag-editorial-home .site-header .header-content-bottom span {
  color: var(--cag-cream);
}
/* Dropdown panels have light backgrounds — keep their text dark and readable */
body.cag-editorial-home .site-header .site-vertical-menu a,
body.cag-editorial-home .site-header .site-vertical-menu .menu-item-text,
body.cag-editorial-home .site-header .site-vertical-menu span,
body.cag-editorial-home .site-header .sub-menu a,
body.cag-editorial-home .site-header .sub-menu .menu-item-text,
body.cag-editorial-home .site-header .sub-menu span,
body.cag-editorial-home .site-header .toggle-vertical-menu-wrapper button,
body.cag-editorial-home .site-header .toggle-vertical-menu-wrapper span {
  color: var(--cag-ink) !important;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .cag-home *, .cag-home *::before, .cag-home *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
  html.cag-js .cag-reveal { opacity: 1; transform: none; }
  .cag-cursor { display: none !important; }
}