/** Shopify CDN: Minification failed

Line 24:0 All "@import" rules must come first

**/
/* ============================================================
   CAKI LAWRENCE — BRAND STYLESHEET
   Injected into Horizon theme as a custom asset
   ============================================================ */

/* ── BRAND TOKENS ───────────────────────────────────────────── */
:root {
  --cl-olive:   #5b5a3c;
  --cl-cream:   #f2f5ed;
  --cl-navy:    #364152;
  --cl-plum:    #632c50;
  --cl-brass:   #a9783e;
  --cl-bone:    #eae8df;
  --cl-charcoal:#2a2a24;
  --cl-text:    #3a3830;
}

/* ── FONT IMPORT ────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Playfair+Display+SC:wght@400;700&display=swap');

/* ── GLOBAL OVERRIDES FOR CAKI BRAND SECTIONS ──────────────── */
.cl-section * { box-sizing: border-box; }

/* ── UTILITIES ──────────────────────────────────────────────── */
.cl-label {
  font-family: 'Playfair Display SC', serif;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cl-brass);
  display: block;
  margin-bottom: 1.1rem;
}

.cl-rule {
  width: 40px;
  height: 2px;
  background: var(--cl-brass);
  margin: 0 auto 1.5rem;
}

.cl-rule--left { margin-left: 0; }

/* ── BTN PRIMARY ────────────────────────────────────────────── */
.cl-btn {
  display: inline-block;
  background: var(--cl-brass);
  color: var(--cl-cream);
  font-family: 'Playfair Display SC', serif;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  padding: 16px 34px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.25s, transform 0.2s;
}
.cl-btn:hover { background: #8e6430; transform: translateY(-1px); color: var(--cl-cream); }

/* All-caps hero button variants */
.cl-btn--hero-primary,
.cl-btn--hero-ghost {
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  padding: 16px 32px;
}

.cl-btn--ghost {
  background: transparent;
  border: 1px solid currentColor;
}

.cl-btn--navy {
  background: var(--cl-navy);
}
.cl-btn--navy:hover { background: var(--cl-olive); }

.cl-btn--olive {
  background: var(--cl-olive);
}
.cl-btn--olive:hover { background: #4a4930; }

/* ── ANNOUNCEMENT BAR ───────────────────────────────────────── */
.cl-announcement {
  background: var(--cl-olive);
  color: var(--cl-cream);
  text-align: center;
  padding: 11px 20px;
  font-family: 'Playfair Display SC', serif;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  width: 100%;
}

/* ── HERO SECTION ───────────────────────────────────────────── */
.cl-hero {
  position: relative;
  min-height: 100vh;
  max-height: 960px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  font-family: 'Playfair Display', serif;
}

.cl-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  z-index: 0;
  display: block;
}

.cl-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(30,38,50,0.18) 0%,
    rgba(30,38,50,0.28) 40%,
    rgba(18,24,34,0.82) 100%
  );
}

.cl-hero__content {
  position: relative;
  z-index: 2;
  padding: 0 6vw 9vh;
  max-width: 700px;
}

.cl-hero__eyebrow {
  font-family: 'Playfair Display SC', serif;
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  color: var(--cl-brass);
  display: block;
  margin-bottom: 1.4rem;
}

/* Two-line hero: "The Table Sets" / "the Standard." — no italics */
.cl-hero__title {
  font-size: clamp(2.2rem, 4.2vw, 4rem);
  font-weight: 500;
  color: var(--cl-cream);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 1.4rem;
  font-style: normal;
}

.cl-hero__title em { font-style: normal; color: var(--cl-cream); }

.cl-hero__subtitle {
  font-size: 1rem;
  color: rgba(242,245,237,0.78);
  line-height: 1.65;
  max-width: 460px;
  margin-bottom: 2.8rem;
  font-style: italic;
  letter-spacing: 0.01em;
}

.cl-hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }

/* Both hero buttons — identical solid brass */
.cl-btn--brass {
  background: var(--cl-brass);
  color: var(--cl-cream);
  font-family: 'Playfair Display SC', serif;
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  padding: 16px 32px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background 0.25s, transform 0.2s;
  white-space: nowrap;
}
.cl-btn--brass:hover {
  background: #8e6430;
  transform: translateY(-1px);
  color: var(--cl-cream);
}

.cl-hero__scroll {
  position: absolute;
  bottom: 2.5rem;
  right: 5vw;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.55;
}

.cl-hero__scroll span {
  font-family: 'Playfair Display SC', serif;
  font-size: 0.52rem;
  letter-spacing: 0.16em;
  color: var(--cl-cream);
  writing-mode: vertical-rl;
}

.cl-hero__scroll::after {
  content: '';
  width: 1px;
  height: 48px;
  background: var(--cl-cream);
  display: block;
}

/* ── BRAND STATEMENT ────────────────────────────────────────── */
.cl-statement {
  background: var(--cl-navy);
  padding: 64px 6vw;
  text-align: center;
  font-family: 'Playfair Display', serif;
}

.cl-statement blockquote {
  font-size: clamp(1.25rem, 2.2vw, 1.85rem);
  font-weight: 400;
  color: var(--cl-cream);
  line-height: 1.55;
  max-width: 800px;
  margin: 0 auto;
  font-style: italic;
}

.cl-statement cite {
  display: block;
  margin-top: 1.5rem;
  font-family: 'Playfair Display SC', serif;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: var(--cl-brass);
  font-style: normal;
}

/* ── BELIEFS / THE STANDARD ─────────────────────────────────── */
.cl-beliefs {
  padding: 100px 6vw;
  background: var(--cl-cream);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  font-family: 'Playfair Display', serif;
}

.cl-beliefs__title {
  font-size: clamp(2rem, 3.5vw, 3.1rem);
  font-weight: 500;
  color: var(--cl-navy);
  line-height: 1.15;
  margin-bottom: 1.8rem;
}

.cl-beliefs__title em { font-style: italic; color: var(--cl-olive); }

.cl-beliefs__body {
  font-size: 1.02rem;
  line-height: 1.8;
  color: #5a5748;
  margin-bottom: 1.2rem;
  font-style: italic;
}
/* Plain (non-italic) body variant */
.cl-beliefs__body--plain {
  font-style: normal;
  white-space: pre-line;
}

.cl-beliefs__list {
  list-style: none;
  padding: 0;
  margin: 0 0 2.4rem;
}

.cl-beliefs__list li {
  font-family: 'Playfair Display SC', serif;
  font-size: 0.92rem;
  letter-spacing: 0.11em;
  color: #5a5748;
  padding: 13px 0;
  border-bottom: 1px solid rgba(91,90,60,0.12);
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.cl-beliefs__list li::before {
  content: '';
  width: 5px;
  height: 5px;
  background: #5a5748;
  border-radius: 50%;
  flex-shrink: 0;
}

.cl-beliefs__img-wrap { position: relative; }

.cl-beliefs__img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  display: block;
}

.cl-beliefs__img-caption {
  display: none;
}

/* ── COLLECTION FEATURE ────────────────────────────────────── */
.cl-collection {
  background: var(--cl-olive);
  font-family: 'Playfair Display', serif;
}

.cl-collection__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 620px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Left: full-bleed image column */
.cl-collection__image-col {
  overflow: hidden;
  position: relative;
}

.cl-collection__hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Right: text column — right-justified */
.cl-collection__text-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  text-align: right;
  padding: 72px 7vw 72px 5vw;
}

.cl-collection__text-col .cl-label {
  text-align: right;
}

.cl-collection__text-col .cl-rule--right {
  width: 40px;
  height: 2px;
  background: var(--cl-brass);
  margin: 10px 0 24px auto;
  opacity: 1;
}

.cl-collection__title {
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  font-weight: 500;
  color: var(--cl-cream);
  line-height: 1.15;
  margin-bottom: 2rem;
  font-style: normal;
  font-family: 'Playfair Display', serif;
}
.cl-collection__title em,
.cl-collection__title i { font-style: normal; }

/* body richtext styling — all non-italic */
.cl-collection__body {
  text-align: right;
  max-width: 440px;
}

.cl-collection__body p,
.cl-collection__body em,
.cl-collection__body i {
  color: rgba(242,245,237,0.78);
  font-size: 0.95rem;
  line-height: 1.8;
  margin: 0 0 1.1rem;
  font-style: normal;
}

/* First para "Mahjong is where we begin." — slightly larger, no italics */
.cl-collection__body p:first-child {
  font-size: 1.05rem;
  color: var(--cl-cream);
  font-style: normal;
  margin-bottom: 1.4rem;
}

/* "The Parlor — Grand Resort Edition." line — no italics, brass accent */
.cl-collection__body p:nth-child(2) {
  font-family: 'Playfair Display SC', serif;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  color: var(--cl-brass);
  text-transform: none;
  font-style: normal;
  font-weight: 400;
  margin-bottom: 1.3rem;
  line-height: 1.5;
  text-transform: uppercase;
}

/* Last para "Built to hold the room." */
.cl-collection__body p:last-child {
  font-family: 'Playfair Display', serif;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: rgba(242,245,237,0.78);
  font-style: normal;
  text-transform: none;
  margin-top: 0.6rem;
  margin-bottom: 0;
}

/* Responsive */
@media (max-width: 900px) {
  .cl-collection__inner {
    grid-template-columns: 1fr;
  }
  .cl-collection__image-col {
    height: 360px;
  }
  .cl-collection__text-col {
    padding: 56px 8vw;
    align-items: flex-end;
  }
}

@media (max-width: 600px) {
  .cl-collection__image-col { height: 280px; }
  .cl-collection__text-col { padding: 44px 6vw; }
  .cl-collection__title { font-size: 1.65rem; }
}

/* ── DOCTRINE ───────────────────────────────────────────────── */
.cl-doctrine {
  background: var(--cl-bone);
  padding: 64px 6vw;
  text-align: center;
  font-family: 'Playfair Display', serif;
}

.cl-doctrine__inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* Intro line: "Standards shape the room." */
.cl-doctrine__intro {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 400;
  font-style: italic;
  color: var(--cl-navy);
  line-height: 1.3;
  margin: 0 0 64px;
  letter-spacing: -0.01em;
}

/* Three pillars side-by-side */
.cl-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(91,90,60,0.15);
}

.cl-pillar {
  padding: 52px 36px;
  border-right: 1px solid rgba(91,90,60,0.15);
  text-align: center;
}

.cl-pillar:last-child {
  border-right: none;
}

/* Roman numeral */
.cl-pillar__num {
  font-family: 'Playfair Display SC', serif;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: var(--cl-brass);
  display: block;
  margin-bottom: 1.4rem;
}

/* Pillar heading */
.cl-pillar__title {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--cl-navy);
  margin: 0 0 1.2rem;
  font-family: 'Playfair Display', serif;
  font-style: normal;
}

/* Two body lines */
.cl-pillar__body p {
  font-size: 0.88rem;
  line-height: 1.75;
  color: #6a6558;
  font-style: italic;
  margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .cl-pillars {
    grid-template-columns: 1fr;
    border: 1px solid rgba(91,90,60,0.15);
  }
  .cl-pillar {
    border-right: none;
    border-bottom: 1px solid rgba(91,90,60,0.15);
  }
  .cl-pillar:last-child { border-bottom: none; }
}

/* ── PARLOR SIGNUP ──────────────────────────────────────────── */
.cl-parlor-wrap {
  background: #1a2535;
}

.cl-parlor {
  background: transparent;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1400px;
  margin: 0 auto;
  font-family: 'Playfair Display', serif;
  min-height: 620px;
}

/* Left: full-bleed image */
.cl-parlor__img-wrap {
  position: relative;
  overflow: hidden;
}

.cl-parlor__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Right: text on dark navy */
.cl-parlor__text {
  padding: 72px 7vw 72px 5vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #1a2535;
}

.cl-parlor__text .cl-label {
  color: var(--cl-brass);
}

.cl-parlor__text .cl-rule--left {
  background: var(--cl-brass);
  opacity: 0.7;
}

.cl-parlor__title {
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  font-weight: 500;
  color: #ffffff;
  line-height: 1.12;
  margin-bottom: 1.5rem;
}

.cl-parlor__title em { font-style: italic; color: var(--cl-brass); }

.cl-parlor__body {
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(242,245,237,0.72);
  font-style: italic;
  margin-bottom: 0.6rem;
}

.cl-parlor__benefits {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0 2.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cl-parlor__benefits li {
  font-family: 'Playfair Display SC', serif;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: rgba(242,245,237,0.82);
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.cl-parlor__benefits li::before {
  content: '—';
  color: var(--cl-brass);
}

.cl-parlor__join-label {
  font-family: 'Playfair Display SC', serif;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: rgba(242,245,237,0.5);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  margin-top: 1.4rem;
}

.cl-parlor__form {
  display: flex;
  gap: 0;
  max-width: 340px;
  margin-top: 0;
}

.cl-parlor__input {
  flex: 1;
  border: none;
  background: var(--cl-brass);
  padding: 10px 14px;
  font-family: 'Playfair Display SC', serif;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.65);
  outline: none;
  transition: background 0.2s;
  -webkit-appearance: none;
  min-width: 0;
}

.cl-parlor__input::placeholder {
  color: rgba(255,255,255,0.65);
  font-style: normal;
  font-family: 'Playfair Display SC', serif;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cl-parlor__input:focus {
  background: #8e6430;
  color: #ffffff;
}

.cl-parlor__submit {
  background: #6b4f28;
  color: #ffffff;
  border: none;
  border-left: 1px solid rgba(255,255,255,0.15);
  padding: 10px 14px;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-appearance: none;
  flex-shrink: 0;
  letter-spacing: 0;
}

.cl-parlor__submit:hover {
  background: #4e3a1e;
  color: #ffffff;
}

/* Responsive */
@media (max-width: 900px) {
  .cl-parlor {
    grid-template-columns: 1fr;
  }
  /* Image above text on mobile */
  .cl-parlor__img-wrap {
    display: block !important;
    height: 320px;
    order: -1;
  }
  .cl-parlor__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
  }
  .cl-parlor__text {
    padding: 48px 6vw;
    order: 1;
  }
}

/* ── TESTIMONIALS ───────────────────────────────────────────── */
.cl-testimonials {
  background: var(--cl-cream);
  padding: 100px 6vw;
  font-family: 'Playfair Display', serif;
}

.cl-testimonials__header {
  text-align: center;
  margin-bottom: 56px;
}

.cl-testimonials__title {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 500;
  color: var(--cl-navy);
}

.cl-testimonials__title em { font-style: italic; color: var(--cl-olive); }

.cl-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  max-width: 1400px;
  margin: 0 auto;
}

.cl-review {
  padding: 48px 38px;
  background: var(--cl-navy);
}

.cl-review:nth-child(2) { background: var(--cl-olive); }
.cl-review:nth-child(3) { background: var(--cl-plum); }

.cl-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 1.5rem;
}

.cl-star {
  width: 11px;
  height: 11px;
  background: var(--cl-brass);
  clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}

.cl-review blockquote {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--cl-cream);
  font-style: italic;
  margin-bottom: 1.8rem;
}

.cl-review cite {
  font-family: 'Playfair Display SC', serif;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  color: rgba(242,245,237,0.5);
  font-style: normal;
}

/* ── EDITORIAL GALLERY ──────────────────────────────────────── */
.cl-editorial {
  background: var(--cl-navy);
  padding: 100px 6vw;
  font-family: 'Playfair Display', serif;
}

.cl-editorial__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 52px;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.cl-editorial__hed {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 500;
  color: var(--cl-cream);
  line-height: 1.15;
}

.cl-editorial__hed em { font-style: italic; color: rgba(242,245,237,0.55); }

.cl-editorial__link {
  font-family: 'Playfair Display SC', serif;
  font-size: 0.62rem;
  letter-spacing: 0.17em;
  color: var(--cl-brass);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.cl-editorial__link::after { content: '→'; }

.cl-editorial__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  max-width: 1400px;
  margin: 0 auto;
}

.cl-editorial__cell {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.cl-editorial__cell img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.cl-editorial__cell:hover img { transform: scale(1.04); }

.cl-editorial__cell-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(36,43,55,0.72) 0%, transparent 55%);
  display: flex;
  align-items: flex-end;
  padding: 18px;
  opacity: 0;
  transition: opacity 0.3s;
}

.cl-editorial__cell:hover .cl-editorial__cell-overlay { opacity: 1; }

.cl-editorial__cell-label {
  font-family: 'Playfair Display SC', serif;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  color: var(--cl-cream);
}

/* ── INSTAGRAM STRIP ────────────────────────────────────────── */
.cl-instagram {
  background: var(--cl-cream);
  padding: 80px 0 0;
  font-family: 'Playfair Display', serif;
}

.cl-instagram__header {
  text-align: center;
  padding: 0 6vw;
  margin-bottom: 36px;
}

.cl-instagram__title {
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 500;
  color: var(--cl-navy);
}

.cl-instagram__title em { font-style: italic; }

.cl-instagram__handle {
  font-family: 'Playfair Display SC', serif;
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  color: var(--cl-brass);
  text-decoration: none;
  display: block;
  margin-top: 0.5rem;
  transition: color 0.2s;
}

.cl-instagram__handle:hover { color: var(--cl-olive); }

.cl-instagram__row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
}

.cl-insta-cell {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.cl-insta-cell img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  transition: transform 0.5s, filter 0.3s;
}

.cl-insta-cell:hover img { transform: scale(1.06); filter: brightness(0.72); }

.cl-insta-hover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.cl-insta-cell:hover .cl-insta-hover { opacity: 1; }

.cl-insta-hover span {
  font-family: 'Playfair Display SC', serif;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--cl-cream);
}

/* ── POPUP ──────────────────────────────────────────────────── */
.cl-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(36,43,55,0.76);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}

.cl-popup-overlay.cl-visible {
  opacity: 1;
  pointer-events: all;
}

.cl-popup {
  background: var(--cl-navy);
  max-width: 520px;
  width: 90vw;
  padding: 56px 44px;
  position: relative;
  transform: translateY(20px);
  transition: transform 0.4s;
}

.cl-popup-overlay.cl-visible .cl-popup { transform: translateY(0); }

.cl-popup__close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  color: rgba(242,245,237,0.35);
  font-size: 1.35rem;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
}

.cl-popup__close:hover { color: var(--cl-cream); }

.cl-popup__eyebrow {
  font-family: 'Playfair Display SC', serif;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: var(--cl-brass);
  display: block;
  margin-bottom: 0.9rem;
  text-align: center;
}

.cl-popup h3 {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 500;
  color: var(--cl-cream);
  text-align: center;
  line-height: 1.2;
  margin-bottom: 0.8rem;
}

.cl-popup h3 em { font-style: italic; }

.cl-popup p {
  font-family: 'Playfair Display', serif;
  font-size: 0.88rem;
  color: rgba(242,245,237,0.58);
  text-align: center;
  line-height: 1.7;
  font-style: italic;
  margin-bottom: 1.8rem;
}

.cl-popup__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cl-popup__input {
  background: rgba(242,245,237,0.07);
  border: 1px solid rgba(242,245,237,0.15);
  padding: 14px 18px;
  font-family: 'Playfair Display', serif;
  font-size: 0.88rem;
  color: var(--cl-cream);
  outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
}

.cl-popup__input::placeholder { color: rgba(242,245,237,0.28); font-style: italic; }
.cl-popup__input:focus { border-color: var(--cl-brass); }

.cl-popup__submit {
  background: var(--cl-brass);
  color: var(--cl-cream);
  border: none;
  padding: 16px;
  font-family: 'Playfair Display SC', serif;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  cursor: pointer;
  margin-top: 0.3rem;
  transition: background 0.25s;
}

.cl-popup__submit:hover { background: #8e6430; }

/* Mobile: ensure popup submit button is fully tappable */
@media screen and (max-width: 749px) {
  .cl-popup__submit {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    min-height: 48px;
    cursor: pointer;
  }
}

.cl-popup__dismiss {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 0.9rem;
  font-family: 'Playfair Display', serif;
  font-size: 0.7rem;
  color: rgba(242,245,237,0.22);
  cursor: pointer;
  font-style: italic;
  background: none;
  border: none;
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Beliefs: image above text on mobile */
  .cl-beliefs {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 0 72px;
  }
  .cl-beliefs__img-wrap {
    order: -1;
    width: 100%;
    height: 380px;
    overflow: hidden;
  }
  .cl-beliefs__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    aspect-ratio: unset;
  }
  .cl-beliefs > div:not(.cl-beliefs__img-wrap) {
    padding: 48px 6vw 0;
    order: 1;
  }
  /* Parlor: show image above text on mobile */
  .cl-parlor { grid-template-columns: 1fr; gap: 0; }
  .cl-parlor__img-wrap {
    display: block !important;
    height: 320px;
    order: -1;
  }
  .cl-editorial__grid { grid-template-columns: repeat(2, 1fr); }
  .cl-testimonials__grid { grid-template-columns: 1fr; gap: 2px; }
  .cl-pillars { grid-template-columns: 1fr; }
  .cl-pillar { border-right: none; border-bottom: 1px solid rgba(91,90,60,0.14); }
  .cl-pillar:last-child { border-bottom: none; }
  .cl-instagram__row { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .cl-hero__title { font-size: 2.5rem; }
  .cl-editorial__grid { grid-template-columns: repeat(2, 1fr); }
  .cl-instagram__row { grid-template-columns: repeat(2, 1fr); }
  .cl-editorial__header { flex-direction: column; align-items: flex-start; gap: 1rem; margin-bottom: 36px; }
}

@media (max-width: 480px) {
  .cl-editorial__grid { grid-template-columns: 1fr; }
  .cl-instagram__row { grid-template-columns: repeat(2, 1fr); }
}

/* ── SUPPRESS HORIZON'S DUPLICATE HEADERS ───────────────────── */
/* Horizon renders transparent + sticky + default = triple header.
   We disable transparent mode via header-group.json settings.
   Belt-and-suspenders: hide any extra header renders beyond the first */
.shopify-section-group-header-group > .shopify-section:not(:last-child) > header-component,
.shopify-section-group-header-group > .shopify-section:not(:last-child) .announcement-bar {
  display: none !important;
}
/* Hide any Horizon announcement bar — we have our own in cl-hero */
.shopify-section[id*='announcement'] { display: none !important; }

/* ── HEADER TAGLINE (next to logo, left side) ────────────────── */
.cl-header-tagline {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  margin-left: 16px;
  vertical-align: middle;
  border-left: 1px solid rgba(169,120,62,0.28);
  padding-left: 16px;
}

.cl-header-tagline-name {
  font-family: 'Playfair Display', serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--cl-olive);
  text-transform: uppercase;
  line-height: 1;
  display: block;
}

.cl-header-tagline-sub {
  font-family: 'Playfair Display SC', serif;
  font-size: 0.48rem;
  letter-spacing: 0.22em;
  color: var(--cl-brass);
  white-space: nowrap;
  line-height: 1;
  display: block;
}

/* Transparent header state (over hero image) */
.header--transparent .cl-header-tagline-name,
.header--inverse .cl-header-tagline-name {
  color: rgba(242,245,237,0.9);
}
.header--transparent .cl-header-tagline-sub,
.header--inverse .cl-header-tagline-sub {
  color: rgba(242,245,237,0.5);
}
.header--transparent .cl-header-tagline,
.header--inverse .cl-header-tagline {
  border-left-color: rgba(242,245,237,0.2);
}

/* Header logo — sized for compact header.
   Horizon uses --size-style-height on .header__column--left to set logo height.
   Override both the img and the container sizing variable. */
/* ── HEADER LOGO — compact, overflow-safe ─────────────────── */
/* Issue 1: constrain logo img to max 44px, never overflow header */
.header__logo-image,
header .header__heading-logo img,
header img[class*="logo"] { 
  height: auto !important;
  max-height: 44px !important;
  width: auto !important;
  max-width: 140px !important;
  display: block !important;
  object-fit: contain !important;
}

/* Override Horizon's .size-style height variable scoped to the header logo column */
.header__column--left .size-style,
.header__column--left a.header-logo,
.header__column--left .spacing-style {
  --size-style-height: 44px !important;
  --size-style-height-mobile: 44px !important;
  height: auto !important;
  max-height: 44px !important;
  min-height: unset !important;
  overflow: visible !important; /* don't clip logo column */
}

/* ── WORDMARK header logo (cl-wordmark-locked.png) ─────────────
   Safe constraints: max 40px height, auto width, no bleed into hero */
.header-logo img,
.header__logo-image,
header .header__heading-logo img,
header img[class*="logo"] {
  height: auto !important;
  max-height: 40px !important;
  width: auto !important;
  max-width: 200px !important; /* wordmark is wide (2.1:1) — allow up to 200px */
  display: block !important;
  object-fit: contain !important;
}

/* ── HEADER 3-COLUMN LAYOUT: logo | nav (centered) | icons ── */
/* header__columns is Horizon's inner grid.
   Override to full-width with auto|1fr|auto so the center fills
   all available space and the nav items center within it. */
.header__columns {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important; /* logo | nav fills | icons */
  align-items: center !important;
  width: 100% !important;           /* stretch to fill the padded row */
  padding-block: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  gap: 0 !important;                /* remove column gap — padding-inline handles spacing */
}

/* Center column: make nav items sit centered */
.header__column--center {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Left column: logo flush-left, fixed width, no shrink */
.header__column--left {
  flex: 0 0 auto !important;
  justify-content: flex-start !important;
  min-width: 0;
}

/* Right column: icons flush-right, fixed width, never shrink or clip */
.header__column--right {
  flex: 0 0 auto !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
  gap: 20px !important;
}

/* Header outer row: full-width flex with side padding — icons never clip */
.header__row,
.header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-inline: 24px !important;  /* 24px L+R safe zone for icons */
  box-sizing: border-box !important;
  width: 100% !important;
  overflow: visible !important;
}

/* Keep header positioned relative with z-index above hero */
header-component,
.header-wrapper {
  position: relative !important;
  z-index: 20 !important;
  overflow: visible !important; /* allow sticky shadow, but logo column hides overflow */
}

@media (max-width: 768px) {
  .cl-header-tagline { display: none; }
}

/* ── SHOPIFY HORIZON HERO BUTTON OVERRIDES ─────────────────── */
/* Force both native hero buttons to be matte brass, side-by-side */
.hero .button,
.hero a.button,
.hero .size-style.button,
.hero [class*="button_explore"],
.hero [class*="button_parlor"],
.hero .size-style[class*="button"] {
  background: var(--cl-brass) !important;
  color: #ffffff !important;
  border: none !important;
  font-family: 'Playfair Display SC', serif !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  padding: 11px 22px !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: background 0.25s !important;
  white-space: nowrap !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.hero .button--secondary,
.hero a.button--secondary,
.hero [class*="button--secondary"],
.hero [class*="button_parlor"] {
  background: var(--cl-brass) !important;
  color: #ffffff !important;
  border: none !important;
  opacity: 0.88;
}

.hero .button:hover,
.hero a.button:hover,
.hero .button--secondary:hover,
.hero a.button--secondary:hover,
.hero [class*="button--secondary"]:hover,
.hero [class*="button_explore"]:hover,
.hero [class*="button_parlor"]:hover {
  background: #8e6430 !important;
  color: #ffffff !important;
  opacity: 1;
}

/* cl-btn-row: the JS-injected flex wrapper */
.cl-btn-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-top: 8px !important;
}

/* ── SCROLL REVEAL ──────────────────────────────────────────── */
.cl-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.cl-reveal.cl-visible { opacity: 1; transform: translateY(0); }
.cl-reveal-d1 { transition-delay: 0.1s; }
.cl-reveal-d2 { transition-delay: 0.2s; }
.cl-reveal-d3 { transition-delay: 0.3s; }

/* ── PARLOR FORM OVERRIDE ─────────────────────────────────── */
/* Compact brass email strip — override any theme interference  */
.cl-parlor__form,
#cl-parlor-form {
  display: flex !important;
  gap: 0 !important;
  max-width: 340px !important;
  margin-top: 0.4rem !important;
}

.cl-parlor__input,
#cl-parlor-form input[type="email"] {
  flex: 1 !important;
  background: var(--cl-brass) !important;
  border: none !important;
  padding: 10px 14px !important;
  font-family: 'Playfair Display SC', serif !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.1em !important;
  color: rgba(255,255,255,0.65) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  min-width: 0 !important;
  -webkit-appearance: none !important;
  height: auto !important;
  line-height: normal !important;
}

.cl-parlor__input::placeholder,
#cl-parlor-form input[type="email"]::placeholder {
  color: rgba(255,255,255,0.65) !important;
  font-style: normal !important;
  text-transform: uppercase !important;
}

.cl-parlor__submit,
#cl-parlor-form button,
#cl-parlor-form [type="submit"] {
  background: #6b4f28 !important;
  color: #ffffff !important;
  border: none !important;
  border-left: 1px solid rgba(255,255,255,0.15) !important;
  padding: 10px 14px !important;
  font-size: 1rem !important;
  font-family: inherit !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  -webkit-appearance: none !important;
  height: auto !important;
  line-height: 1 !important;
  min-height: 0 !important;
  flex-shrink: 0 !important;
}

.cl-parlor__submit:hover,
#cl-parlor-form button:hover,
#cl-parlor-form [type="submit"]:hover {
  background: #4e3a1e !important;
  color: #ffffff !important;
}

/* ── TESTIMONIALS: hidden until we have reviews ─────────────── */
/* TO RE-ENABLE: remove or comment out this one rule             */
.cl-testimonials { display: none !important; }

/* ── INSTAGRAM STRIP: hidden until feed is connected ────────── */
/* TO RE-ENABLE: remove or comment out this one rule             */
.cl-instagram { display: none !important; }

/* ── FOOTER ─────────────────────────────────────────────────── */
.site-footer {
  background: var(--cl-plum) !important;
  color: var(--cl-cream) !important;
  padding: 40px 6vw 24px !important;
  font-family: 'Playfair Display', serif !important;
}
.site-footer__grid {
  display: grid !important;
  grid-template-columns: 1.2fr repeat(3, 1fr) !important;
  gap: 40px !important;
  max-width: 1400px !important;
  margin: 0 auto 28px !important;
  align-items: start !important;
  overflow: visible !important;
}
.site-footer__logo {
  display: flex !important;
  align-items: flex-start !important;
  margin-bottom: 0.75rem !important;
  overflow: visible !important;
  min-width: 0 !important;
}
.site-footer__logo img {
  width: 100px !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  max-width: 100% !important;
  overflow: visible !important;
}
.site-footer__logo-name { display: none !important; }
.site-footer__tagline {
  font-size: 0.72rem !important;
  line-height: 1.6 !important;
  color: rgba(242,245,237,0.45) !important;
  font-style: italic !important;
  max-width: 200px !important;
  margin: 0 !important;
}
.site-footer__col-title {
  font-family: 'Playfair Display SC', serif !important;
  font-size: 0.58rem !important;
  letter-spacing: 0.2em !important;
  color: var(--cl-brass) !important;
  margin-bottom: 0.8rem !important;
  display: block !important;
  text-transform: uppercase !important;
}
.site-footer__col ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.45rem !important;
}
.site-footer__col ul li,
.site-footer__col ul li a {
  font-size: 0.75rem !important;
  color: rgba(242,245,237,0.6) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
  font-style: italic !important;
  font-family: 'Playfair Display', serif !important;
  line-height: 1.4 !important;
}
.site-footer__col ul li a:hover { color: var(--cl-cream) !important; }
.site-footer__bottom {
  max-width: 1400px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 18px !important;
  border-top: 1px solid rgba(242,245,237,0.12) !important;
  font-size: 0.6rem !important;
  color: rgba(242,245,237,0.28) !important;
  font-family: 'Playfair Display SC', serif !important;
  letter-spacing: 0.12em !important;
}
@media (max-width: 768px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
}
@media (max-width: 480px) {
  .site-footer__grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .site-footer__logo img { width: 80px !important; }
}

/* ── Footer: Join the Parlor + Legal ── */
.site-footer__join {
  margin-top: 1.4rem !important;
}
.site-footer__join .site-footer__col-title {
  margin-bottom: 0.4rem !important;
}
.site-footer__join-sub {
  font-family: 'Playfair Display', serif !important;
  font-size: 0.7rem !important;
  font-style: italic !important;
  color: rgba(242,245,237,0.45) !important;
  margin: 0 0 0.6rem !important;
  line-height: 1.5 !important;
}
.site-footer__join-link {
  display: inline-block !important;
  font-family: 'Playfair Display SC', serif !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--cl-cream) !important;
  border: 1px solid rgba(242,245,237,0.3) !important;
  padding: 7px 14px !important;
  text-decoration: none !important;
  transition: border-color 0.2s, color 0.2s !important;
}
.site-footer__join-link:hover {
  border-color: var(--cl-brass) !important;
  color: var(--cl-brass) !important;
}
.site-footer__legal {
  display: flex !important;
  gap: 16px !important;
  align-items: center !important;
}
.site-footer__legal a {
  font-size: 0.6rem !important;
  color: rgba(242,245,237,0.28) !important;
  text-decoration: none !important;
  font-family: 'Playfair Display SC', serif !important;
  letter-spacing: 0.1em !important;
  transition: color 0.2s !important;
}
.site-footer__legal a:hover {
  color: rgba(242,245,237,0.6) !important;
}
.site-footer__ig-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
@media (max-width: 480px) {
  .site-footer__bottom { flex-direction: column; gap: 10px; text-align: center; }
  .site-footer__legal { justify-content: center; flex-wrap: wrap; gap: 12px; }
}



/* ══════════════════════════════════════════════════════════════
   CAKI LAWRENCE — PRODUCT PAGE STYLES
   Overrides Horizon product-information section to match brand
   ══════════════════════════════════════════════════════════════ */

/* ── Page background ─────────────────────────────────────────── */
.template-product main,
.template-product .shopify-section:first-child {
  background: var(--cl-cream) !important;
}

/* ── Product title ───────────────────────────────────────────── */
.product-information h1,
.product-information .product__title,
.product-information [class*="product-title"] {
  font-family: 'Playfair Display', serif !important;
  font-weight: 500 !important;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem) !important;
  color: var(--cl-charcoal) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.15 !important;
  font-style: normal !important;
}

/* ── Sub-title / product type ────────────────────────────────── */
.product-information .product__vendor,
.product-information .product-type {
  font-family: 'Playfair Display SC', serif !important;
  font-size: 0.58rem !important;
  letter-spacing: 0.22em !important;
  color: var(--cl-brass) !important;
  text-transform: uppercase !important;
}

/* ── Price ───────────────────────────────────────────────────── */
.product-information .price,
.product-information .price__regular,
.product-information [class*="price"] .price-item {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.15rem !important;
  color: var(--cl-charcoal) !important;
  letter-spacing: 0.02em !important;
}

/* ── Variant picker labels ───────────────────────────────────── */
.product-information .variant-picker fieldset legend,
.product-information .variant-picker__option-label,
.product-information label[class*="variant"] {
  font-family: 'Playfair Display SC', serif !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.18em !important;
  color: var(--cl-olive) !important;
  text-transform: uppercase !important;
}

/* ── Variant buttons ─────────────────────────────────────────── */
.product-information .variant-picker__option-value,
.product-information [class*="swatch"],
.product-information fieldset button {
  font-family: 'Playfair Display SC', serif !important;
  font-size: 0.58rem !important;
  letter-spacing: 0.1em !important;
  border-radius: 0 !important;
  border: 1px solid rgba(91,90,60,0.25) !important;
  color: var(--cl-charcoal) !important;
  background: transparent !important;
  transition: all 0.2s !important;
}
.product-information .variant-picker__option-value:hover,
.product-information fieldset button:hover {
  border-color: var(--cl-brass) !important;
  color: var(--cl-brass) !important;
}
.product-information .variant-picker__option-value[aria-checked="true"],
.product-information .variant-picker__option-value.selected,
.product-information fieldset button[aria-pressed="true"] {
  background: var(--cl-charcoal) !important;
  color: var(--cl-cream) !important;
  border-color: var(--cl-charcoal) !important;
}

/* ── Add to cart button ──────────────────────────────────────── */
.product-information .buy-buttons button[name="add"],
.product-information [class*="add-to-cart"] button,
.product-information button.button:not([class*="secondary"]) {
  background: var(--cl-charcoal) !important;
  color: var(--cl-cream) !important;
  font-family: 'Playfair Display SC', serif !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 16px 32px !important;
  transition: background 0.25s !important;
  box-shadow: none !important;
}
.product-information button[name="add"]:hover {
  background: var(--cl-brass) !important;
}

/* ── Product description text ────────────────────────────────── */
.product-information .rte,
.product-information [class*="product-description"],
.product-information .product__description {
  font-family: 'Playfair Display', serif !important;
  font-size: 0.9rem !important;
  line-height: 1.85 !important;
  color: var(--cl-text) !important;
}
.product-information .rte p { margin-bottom: 0.9rem !important; }
.product-information .rte em { font-style: italic !important; color: var(--cl-olive) !important; }
.product-information .rte strong {
  font-family: 'Playfair Display SC', serif !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--cl-charcoal) !important;
  font-weight: 400 !important;
}
.product-information .rte hr {
  border: none !important;
  border-top: 1px solid rgba(91,90,60,0.18) !important;
  margin: 1.4rem 0 !important;
}

/* ── Media gallery ───────────────────────────────────────────── */
.product-information .media-gallery img,
.product-information [class*="media-gallery"] img {
  border-radius: 0 !important;
}

/* ── Shipping note strip ─────────────────────────────────────── */
.cl-product-shipping-note {
  background: var(--cl-bone);
  padding: 12px 6vw;
  text-align: center;
  font-family: 'Playfair Display SC', serif;
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  color: var(--cl-olive);
  text-transform: uppercase;
  border-top: 1px solid rgba(91,90,60,0.1);
}
.cl-product-shipping-note span { color: var(--cl-brass); margin: 0 0.5em; }

/* ── Product details below-fold section ─────────────────────── */
.cl-product-details {
  background: var(--cl-navy);
  color: var(--cl-cream);
  padding: 72px 6vw;
  font-family: 'Playfair Display', serif;
}
.cl-product-details__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 48px;
}
.cl-product-details__col-title {
  font-family: 'Playfair Display SC', serif;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: var(--cl-brass);
  text-transform: uppercase;
  display: block;
  margin-bottom: 1.2rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid rgba(242,245,237,0.12);
}
.cl-product-details__col p,
.cl-product-details__col li {
  font-size: 0.85rem;
  line-height: 1.8;
  color: rgba(242,245,237,0.72);
}
.cl-product-details__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cl-product-details__col ul li::before {
  content: '—';
  color: var(--cl-brass);
  margin-right: 0.6em;
}
.cl-product-details__embroidery {
  grid-column: 1 / -1;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(169,120,62,0.2);
  padding: 28px 32px;
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.cl-product-details__embroidery-title {
  font-family: 'Playfair Display SC', serif;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: var(--cl-brass);
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.5rem;
  white-space: nowrap;
}
.cl-product-details__embroidery p {
  font-size: 0.82rem;
  line-height: 1.75;
  color: rgba(242,245,237,0.65);
  font-style: italic;
  margin: 0;
}
.cl-product-details__embroidery-options {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.6rem;
}
.cl-product-details__embroidery-options span {
  font-family: 'Playfair Display SC', serif;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  color: rgba(242,245,237,0.5);
  font-style: normal;
}
@media (max-width: 768px) {
  .cl-product-details__inner { grid-template-columns: 1fr; gap: 32px; }
  .cl-product-details__embroidery { flex-direction: column; }
}

/* ══════════════════════════════════════════════════════════════
   PRODUCT PAGE — The Parlor Roll specific overrides
   ══════════════════════════════════════════════════════════════ */

/* ── IMAGE GALLERY: contain + white bg, thumbnails below ───── */
/* Force white background on all product media containers */
.product-information .media-gallery,
.product-information .media-gallery__main,
.product-information .media,
.product-information .media-gallery__item,
.product-information [class*="media-gallery"],
.product-information .media-gallery__viewport,
product-information .media,
[data-section-type="product-information"] .media {
  background-color: #ffffff !important;
  background: #ffffff !important;
}

/* Force contain on all product images — NO cropping */
.product-information .media img,
.product-information .media-gallery img,
.product-information [class*="media-gallery"] img,
.product-information .media__item img,
.product-information .placeholder img,
product-information img {
  object-fit: contain !important;
  object-position: center center !important;
  background-color: #ffffff !important;
}

/* Remove overflow:hidden that causes cropping */
.product-information .media,
.product-information .media-gallery__item,
.product-information [class*="media-gallery__"] {
  overflow: visible !important;
}

/* No box shadow on media container */
.product-information .media,
.product-information .media-gallery {
  box-shadow: none !important;
  border: none !important;
}

/* Thumbnail strip — bottom, horizontal row */
.product-information .media-gallery__thumbnails,
.product-information [class*="thumbnails"],
.product-information .media-gallery__navigation {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  gap: 8px !important;
  margin-top: 8px !important;
  margin-left: 0 !important;
  justify-content: flex-start !important;
  scrollbar-width: thin;
}

/* Individual thumbnails */
.product-information .media-gallery__thumbnail,
.product-information [class*="thumbnail__item"],
.product-information .media-gallery__thumbnail-item {
  background-color: #ffffff !important;
  border: 1.5px solid rgba(42,42,36,0.1) !important;
  border-radius: 2px !important;
  flex-shrink: 0 !important;
}
.product-information .media-gallery__thumbnail.is-active,
.product-information .media-gallery__thumbnail[aria-selected="true"],
.product-information [class*="thumbnail__item"].is-active {
  border-color: #a9783e !important;
  outline: none !important;
  box-shadow: none !important;
}
.product-information .media-gallery__thumbnail img,
.product-information [class*="thumbnail"] img {
  object-fit: contain !important;
  background: #ffffff !important;
}

/* Arrow navigation */
.product-information .media-gallery__arrow,
.product-information [class*="media-gallery__nav"],
.product-information .slideshow__arrow {
  background: rgba(242,245,237,0.9) !important;
  border: 1px solid rgba(42,42,36,0.12) !important;
  color: #2a2a24 !important;
  border-radius: 50% !important;
}
.product-information .media-gallery__arrow:hover,
.product-information [class*="media-gallery__nav"]:hover {
  background: #a9783e !important;
  color: #ffffff !important;
  border-color: #a9783e !important;
}

/* Remove aspect-ratio forced crop on the main viewport */
.product-information .media-gallery__main,
.product-information .media-gallery__viewport {
  aspect-ratio: unset !important;
  height: auto !important;
}

/* ── COLOR SWATCHES — exact hex values, no distortion ──────── */
/* Target Horizon's swatch elements */
.variant-picker__option--color .variant-picker__option-value,
.variant-picker__option--color [class*="swatch"],
.variant-picker [class*="color-swatch"],
.variant-swatch,
[class*="variant-picker__swatch"] {
  border-radius: 50% !important;
  width: 28px !important;
  height: 28px !important;
  border: 1.5px solid rgba(42,42,36,0.12) !important;
  box-shadow: none !important;
  filter: none !important;
  transition: border-color 0.15s !important;
  background-image: none !important;
}

/* Selected swatch state — subtle dark outline only, no glow */
.variant-picker__option--color .variant-picker__option-value.is-active,
.variant-picker__option--color [class*="swatch"].is-active,
.variant-picker [class*="color-swatch"].is-selected,
[class*="variant-picker__swatch"].is-active,
[class*="variant-picker__swatch"][aria-pressed="true"],
.variant-picker__option-value[aria-selected="true"] {
  border: 1.5px solid #2a2a24 !important;
  outline: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Exact hex color overrides — each color by name */
[data-value="Aqua"] .variant-swatch,
[data-option-value="Aqua"],
.variant-picker__option-value[data-value="Aqua"] { background-color: #abdcf4 !important; }

[data-value="Fuchsia"] .variant-swatch,
[data-option-value="Fuchsia"],
.variant-picker__option-value[data-value="Fuchsia"] { background-color: #bb52be !important; }

/* Green swatch — scoped to CL custom + Horizon native picker */
[data-value="Green"] .variant-swatch,
[data-option-value="Green"],
.variant-picker__option-value[data-value="Green"] { background-color: #3ca1bc !important; }

[data-value="Mint"] .variant-swatch,
[data-option-value="Mint"],
.variant-picker__option-value[data-value="Mint"] { background-color: #a9e4d6 !important; }

[data-value="Navy"] .variant-swatch,
[data-option-value="Navy"],
.variant-picker__option-value[data-value="Navy"] { background-color: #151C3A !important; }

[data-value="Natural"] .variant-swatch,
[data-option-value="Natural"],
.variant-picker__option-value[data-value="Natural"],
.cl-product-section .cl-swatch[data-color="natural"],
.cl-product-section .cl-swatch[data-option-value="Natural"] { background-color: #E6D9C9 !important; }

[data-value="White"] .variant-swatch,
[data-option-value="White"],
.variant-picker__option-value[data-value="White"],
.cl-product-section .cl-swatch[data-color="white"],
.cl-product-section .cl-swatch[data-option-value="White"] {
  background-color: #F5F5F5 !important;
  border-color: rgba(42,42,36,0.2) !important; /* slightly stronger border so white shows on light bg */
}

[data-value="Peach"] .variant-swatch,
[data-option-value="Peach"],
.variant-picker__option-value[data-value="Peach"] { background-color: #ea9fb1 !important; }

[data-value="Black"] .variant-swatch,
[data-option-value="Black"],
.variant-picker__option-value[data-value="Black"] {
  background-color: #1a1a1a !important;
  border-color: rgba(42,42,36,0.35) !important; /* slightly stronger border so black reads on light bg */
}

/* Force show_swatches on Color option via CSS (Horizon uses buttons as fallback) */
/* Style variant buttons for Color to look like swatches */
.variant-picker__option[data-option-name="Color"] .variant-picker__option-values {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.variant-picker__option[data-option-name="Color"] .variant-picker__option-value {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  font-size: 0 !important;     /* hide text, show color only */
  min-width: unset !important;
  border: 1.5px solid rgba(42,42,36,0.12) !important;
  position: relative !important;
}
/* Show color name tooltip on hover */
.variant-picker__option[data-option-name="Color"] .variant-picker__option-value::after {
  content: attr(data-value);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #2a2a24;
  color: #f2f5ed;
  font-family: 'Playfair Display SC', serif;
  font-size: 0.42rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 8px;
  white-space: nowrap;
  border-radius: 1px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  font-size: 9px;
}
.variant-picker__option[data-option-name="Color"] .variant-picker__option-value:hover::after {
  opacity: 1;
}

/* F: Green swatch hard override — scoped, high specificity */
/* 1. CL custom button-swatch (data-color / data-option-value) */
.cl-product-section .cl-swatch[data-color="green"],
.cl-product-section .cl-swatch[data-option-value="Green"] {
  background-color: #3ca1bc !important;
  background: #3ca1bc !important;
}

/* 2. Horizon native radio+label swatch (Task F — explicit requirement) */
.product-form input[type="radio"][value="Green"] + label {
  background-color: #3ca1bc !important;
}

/* 3. Horizon .swatch span — override the --swatch-background CSS variable */
.variant-option__swatch:has(input[value="Green"]) .swatch,
.variant-option__button-label--has-swatch:has(input[value="Green"]) .swatch {
  --swatch-background: #3ca1bc !important;
  background: #3ca1bc !important;
}

/* 4. Remove any theme default 'green' color token that could override */
/* Horizon's --color-swatch-green or similar token reset */
[data-value="Green"] { --swatch-background: #3ca1bc !important; }

/* ── PARLOR ROLL — New Colorway Swatches ─────────────────────────────────
   Conservatory  #6b4a36  (deep brown)
   Colonel Mustard #243a5e (navy)
   Greenhouse    #6c714b  (olive)
   Professor Plum #6a2e4d (plum)
   ─────────────────────────────────────────────────────────────────────── */

/* Conservatory — deep brown */
[data-value="Conservatory"] .variant-swatch,
[data-option-value="Conservatory"],
.variant-picker__option-value[data-value="Conservatory"],
.variant-option__swatch:has(input[value="Conservatory"]) .swatch,
.variant-option__button-label--has-swatch:has(input[value="Conservatory"]) .swatch,
.variant-option__button-label:has(input[value="Conservatory"]) .swatch {
  --swatch-background: #6b4a36 !important;
  background: #6b4a36 !important;
  background-color: #6b4a36 !important;
}
[data-value="Conservatory"] { --swatch-background: #6b4a36 !important; }

/* Colonel Mustard — navy */
[data-value="Colonel Mustard"] .variant-swatch,
[data-option-value="Colonel Mustard"],
.variant-picker__option-value[data-value="Colonel Mustard"],
.variant-option__swatch:has(input[value="Colonel Mustard"]) .swatch,
.variant-option__button-label--has-swatch:has(input[value="Colonel Mustard"]) .swatch,
.variant-option__button-label:has(input[value="Colonel Mustard"]) .swatch {
  --swatch-background: #243a5e !important;
  background: #243a5e !important;
  background-color: #243a5e !important;
}
[data-value="Colonel Mustard"] { --swatch-background: #243a5e !important; }

/* Greenhouse — olive */
[data-value="Greenhouse"] .variant-swatch,
[data-option-value="Greenhouse"],
.variant-picker__option-value[data-value="Greenhouse"],
.variant-option__swatch:has(input[value="Greenhouse"]) .swatch,
.variant-option__button-label--has-swatch:has(input[value="Greenhouse"]) .swatch,
.variant-option__button-label:has(input[value="Greenhouse"]) .swatch {
  --swatch-background: #6c714b !important;
  background: #6c714b !important;
  background-color: #6c714b !important;
}
[data-value="Greenhouse"] { --swatch-background: #6c714b !important; }

/* Professor Plum — plum */
[data-value="Professor Plum"] .variant-swatch,
[data-option-value="Professor Plum"],
.variant-picker__option-value[data-value="Professor Plum"],
.variant-option__swatch:has(input[value="Professor Plum"]) .swatch,
.variant-option__button-label--has-swatch:has(input[value="Professor Plum"]) .swatch,
.variant-option__button-label:has(input[value="Professor Plum"]) .swatch {
  --swatch-background: #6a2e4d !important;
  background: #6a2e4d !important;
  background-color: #6a2e4d !important;
}
[data-value="Professor Plum"] { --swatch-background: #6a2e4d !important; }



/* ══════════════════════════════════════════════════════════════════════════
   CL Cart Page — global overrides scoped to .cl-cart-section
   Hides Horizon's express payment buttons site-wide on /cart
   ══════════════════════════════════════════════════════════════════════════ */

/* ── CL Cart Page — suppress any Horizon cart section remnants ────────── */
.cl-cart-section .main-cart,
.cl-cart-section .cart-page,
.cl-cart-section [class*="cart-summary__inner"],
.cl-cart-section [class*="additional-checkout"] { display: none !important; }

/* ── Express payment buttons — hide globally on cart page ─────────────── */
.template-cart .shopify-payment-button,
.template-cart .shopify-payment-button__button,
.template-cart .shopify-payment-button__more-options,
.template-cart additional-checkout-buttons,
.template-cart .additional-checkout-buttons,
.template-cart [data-shopify="payment-button"] { display: none !important; }


/* ══════════════════════════════════════════════════════════════════════════
   CAKI LAWRENCE — COLLECTION PAGES
   Luxury Minimal Collection UI
   Scope: [data-template="collection"] on #MainContent — collection pages only.
   Does NOT affect header, footer, cart, product pages, or global tokens.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── SCOPE ALIAS: shorthand for all rules below ──────────────────────────
   Selector root: [data-template="collection"]
   Every rule below is scoped via this attribute on #MainContent.
   ─────────────────────────────────────────────────────────────────────── */

/* ── A) HIDE UTILITY UI ─────────────────────────────────────────────────── */
[data-template="collection"] .facets.facets--horizontal,
[data-template="collection"] .facets-block-wrapper,
[data-template="collection"] .facets-block-wrapper--horizontal,
[data-template="collection"] .facets-block-wrapper--vertical,
[data-template="collection"] .facets-drawer__filters,
[data-template="collection"] .facets--drawer,
[data-template="collection"] .facets-mobile-wrapper,
[data-template="collection"] .facets-controls-wrapper,
[data-template="collection"] .facets-mobile-wrapper.facets-controls-wrapper,
[data-template="collection"] sorting-filter-component,
[data-template="collection"] .sorting-filter,
[data-template="collection"] .sorting-filter__container,
[data-template="collection"] .column-options-wrapper,
[data-template="collection"] .column-options,
[data-template="collection"] .column-picker,
[data-template="collection"] .products-count-wrapper,
[data-template="collection"] [data-testid="products-count"],
[data-template="collection"] .skip-to-content-link,
[data-template="collection"] .facets-toggle,
[data-template="collection"] .facets-toggle__wrapper,
[data-template="collection"] .facets-horizontal-remove,
[data-template="collection"] .facets__drawer-actions,
[data-template="collection"] .facets__see-results,
[data-template="collection"] .facets__clear-all,
[data-template="collection"] .facets-remove {
  display: none !important;
}

/* ── B) HIDE QUICK ADD / ADD-TO-CART ON COLLECTION CARDS ───────────────── */
[data-template="collection"] quick-add-component,
[data-template="collection"] .quick-add,
[data-template="collection"] .quick-add__button,
[data-template="collection"] .quick-add__button--add,
[data-template="collection"] .quick-add__button--choose,
[data-template="collection"] .add-to-cart-button,
[data-template="collection"] quick-add-modal {
  display: none !important;
}

/* Nullify the CSS variable that reserves space for quick-add */
[data-template="collection"] .product-card__content {
  --quick-add-display: none !important;
}

/* ── C) GRID LAYOUT — 3-up desktop, 2-up tablet, 2-up mobile ──────────── */
[data-template="collection"] .product-grid,
[data-template="collection"] #ResultsList .product-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 48px 40px !important;
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 1300px !important;
}

/* Override Horizon's inline CSS variable columns */
[data-template="collection"] .product-grid {
  --product-grid-columns-desktop: repeat(3, minmax(0, 1fr)) !important;
  --mobile-columns: 2 !important;
}

@media (max-width: 899px) {
  [data-template="collection"] .product-grid,
  [data-template="collection"] #ResultsList .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px 20px !important;
    max-width: 100% !important;
  }
}

@media (max-width: 479px) {
  [data-template="collection"] .product-grid,
  [data-template="collection"] #ResultsList .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px 12px !important;
  }
}

/* ── C) CARD CLEANUP — no borders, no shadows, transparent bg ───────────── */
[data-template="collection"] .card,
[data-template="collection"] .card-wrapper,
[data-template="collection"] product-card,
[data-template="collection"] .product-card,
[data-template="collection"] .product-card__content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ── C) IMAGES — uniform square container, full image visible ──────────── */
/*
  Permanent structural fix for all collection product cards.

  PROBLEM: Horizon sets --gallery-aspect-ratio via inline style on .card-gallery
  based on product.featured_media.preview_image.aspect_ratio. The Carryall's
  hero image is portrait (ratio ≈ 0.747), giving a non-square frame.
  Horizon's compiled styles.css rule:
    .product-media { aspect-ratio: var(--gallery-aspect-ratio, var(--ratio)); }
  Both --gallery-aspect-ratio and --ratio are set inline, so they win the cascade.

  SOLUTION (three-layer defense):
  Layer 1 (Liquid): card-gallery.liquid now injects ratio='1' when
    request.path contains '/collections/all', so the inline style is 1 from
    the server-side render. This is the permanent fix.
  Layer 2 (CSS): aspect-ratio: 1/1 !important on .card-gallery. Because
    Horizon's rule uses var(--gallery-aspect-ratio,...) and we set the custom
    prop in Liquid to 1, this !important rule is a belt-and-suspenders guard
    for cached pages.
  Layer 3 (JS): caki-lawrence.js sets el.style.aspectRatio='1 / 1' inline on
    load + DOMContentLoaded + timeouts + MutationObserver, catching any cached
    pages still serving old HTML with ratio ≠ 1.
*/

/* Square container — all three elements in Horizon's card hierarchy */
[data-template="collection"] .card-gallery,
[data-template="collection"] .card__media {
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  width: 100% !important;
  background-color: transparent !important;
}

/* Slideshow fills the square container completely */
[data-template="collection"] .card-gallery slideshow-component,
[data-template="collection"] .card-gallery .slideshow-component,
[data-template="collection"] .card-gallery .slideshow-slides,
[data-template="collection"] .card-gallery slideshow-slides {
  height: 100% !important;
  width: 100% !important;
}

/* Each slide fills the square */
[data-template="collection"] .card-gallery .product-media-container,
[data-template="collection"] .card-gallery slideshow-slide {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: unset !important;
}

/* product-media: the actual Horizon aspect-ratio target — force 1:1 */
[data-template="collection"] .card-gallery .product-media {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  background-color: transparent !important;
}

/* Images: contain (no crop), centred, no padding — fill square frame cleanly */
[data-template="collection"] .card-gallery img,
[data-template="collection"] .card__media img,
[data-template="collection"] product-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* ── ARROW VISIBILITY AND CLICK-ABILITY ──────────────────────────────────── */
/*
  The entire slideshow is wrapped in <a class="contents"> (the product link).
  Horizon renders slideshow-arrows INSIDE that <a>.
  On click, the <a> link can intercept events before the button receives them.
  Fix: raise arrows above the link layer with z-index and restore pointer-events.
  The JS also calls e.stopPropagation() on arrow button clicks.
*/
[data-template="collection"] .card-gallery slideshow-arrows,
[data-template="collection"] .card-gallery .slideshow-arrows {
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

[data-template="collection"] .card-gallery .slideshow-control,
[data-template="collection"] .card-gallery slideshow-arrows button {
  position: relative;
  z-index: 10;
  pointer-events: auto;
  cursor: pointer;
}

/* Hide arrows on small mobile (< 480px) where swipe is the primary gesture */
@media (max-width: 479px) {
  [data-template="collection"] .card-gallery slideshow-arrows,
  [data-template="collection"] .card-gallery .slideshow-arrows {
    display: none !important;
  }
}

/* ── C) TITLE TYPOGRAPHY ─────────────────────────────────────────────────── */
/*
  Horizon card structure (SSR):
    product-card__content  (flex-column, padding: 0)
      └── card-gallery           ← image container, 100% card width, no padding
            └── img              ← padding: 0  →  image fills square frame edge-to-edge
      └── <a.contents>           ← display:contents (no box — padding does nothing)
            └── div.text-block.rte  ← spacing-style reads --padding-inline-start
                  style="--padding-inline-start:0px"  ← inline CSS var, wins cascade
                  └── <p>The Parlor Carryall</p>  ← NO inline style ✓
      └── product-price           ← spacing-style, inline --padding-inline-start:0px
            └── div[priceContainer]
                  └── span.price  ← NO inline style ✓

  Strategy: CSS custom properties set via inline style are not reliably overridden
  by !important in author stylesheets across all browsers (custom property cascade
  differs from regular properties). Instead, we bypass the spacing-style variable
  system entirely by applying margin-inline-start on the INNER elements (<p> and
  .price span) which carry no inline CSS variable declarations. These elements are
  plain HTML with no competing inline styles.

  margin-inline-start: 0 on <p> → title sits at the left edge of the card
  margin-inline-start: 0 on .price → price is flush with the title
  img padding: 0 → image fills the square frame edge-to-edge
  All three percentages reference the same containing block → edges align exactly.
*/

/* Wrapper typography — font size/weight/spacing only, NO padding/margin-start */
[data-template="collection"] product-card .text-block,
[data-template="collection"] product-card .rte,
[data-template="collection"] .card__heading,
[data-template="collection"] .product-card__title,
[data-template="collection"] product-card product-title {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 400;
  text-align: left !important;
  /* Reset any padding from our previous rules — let margin on inner <p> do the work */
  padding-inline-start: 0 !important;
  padding-inline-end: 0 !important;
}

/* Title alignment: flush left — matches image (no padding on image) */
[data-template="collection"] product-card .rte p,
[data-template="collection"] product-card .text-block p {
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
  margin-top: 0;
  margin-bottom: 0;
}

/* ── C) PRICE TYPOGRAPHY ─────────────────────────────────────────────────── */
/* Wrapper: typography only */
[data-template="collection"] product-card product-price {
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.75;
  text-align: left !important;
  /* Reset padding — let margin on inner .price span do the alignment */
  padding-inline-start: 0 !important;
}

/* Price alignment: flush left — matches title */
[data-template="collection"] product-card product-price .price,
[data-template="collection"] product-card product-price span.price {
  display: block !important;
  margin-inline-start: 0 !important;
}

/* Legacy selectors (fallback for non-web-component rendering) */
[data-template="collection"] .product-card__price,
[data-template="collection"] product-card .price:not(product-price .price) {
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.75;
  text-align: left !important;
  margin-inline-start: 0 !important;
}

/* ── C) COLLECTION DESCRIPTION ───────────────────────────────────────────── */
/* Scope to collection header/description area only — NOT product cards */
[data-template="collection"] .collection-hero__description,
[data-template="collection"] .collection-description,
[data-template="collection"] .collection-hero__description p,
[data-template="collection"] .collection-description p {
  max-width: 560px;
  line-height: 1.6;
  margin-top: 10px;
  opacity: 0.85;
  font-weight: 400;
}

/* ── D) EMPTY STATE ── .cl-collection-empty rendered by product-grid.liquid ─ */
.cl-collection-empty {
  padding-block: 80px;
  text-align: center;
}

.cl-collection-empty__message {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(42, 42, 36, 0.5);
  letter-spacing: 0.04em;
  max-width: 460px;
  margin: 0 auto;
}


/* ══════════════════════════════════════════════════════════════════════════
   CAKI LAWRENCE — COLLECTION PAGE ADDITIONS v2
   B) Editorial intro · C) Luxury hover · D) Enter the Parlor guard
   ══════════════════════════════════════════════════════════════════════════ */

/* ── B) EDITORIAL INTRO LINE — .cl-collection-intro ──────────────────────
   Rendered only on /collections/all via collection.json Liquid conditional.
   Targets the <p class="cl-collection-intro"> we inject.
   ─────────────────────────────────────────────────────────────────────── */
[data-template="collection"] .cl-collection-intro,
[data-template="collection"] .collection-hero__description,
[data-template="collection"] .collection-description {
  max-width: 520px;
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: #5c5a55;
  opacity: 1;
  font-weight: 400;
}

/* Strip any default <p> margin the theme injects inside the text block */
[data-template="collection"] .cl-collection-intro {
  margin-block: 0;
  padding-block: 0;
}

/* ── C) LUXURY HOVER — images + title cue ────────────────────────────────
   Scoped to collection pages only. No buttons appear (quick add stays hidden).
   ─────────────────────────────────────────────────────────────────────── */
[data-template="collection"] .card__media img,
[data-template="collection"] .product-card img {
  transition: transform 220ms ease, opacity 220ms ease;
  transform: translateZ(0);
}

@media (hover: hover) and (pointer: fine) {
  [data-template="collection"] .card-wrapper:hover .card__media img,
  [data-template="collection"] .product-card:hover img {
    transform: scale(1.015);
    opacity: 0.96;
  }
}

[data-template="collection"] .card__heading,
[data-template="collection"] .product-card__title {
  transition: opacity 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  [data-template="collection"] .card-wrapper:hover .card__heading,
  [data-template="collection"] .product-card:hover .product-card__title {
    opacity: 0.85;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

/* ── D) ENTER THE PARLOR — belt-and-suspenders hide ─────────────────────
   The footer_m9NzUG section is already display:none via Horizon's own rules.
   This rule provides explicit redundancy scoped to collection pages.
   ─────────────────────────────────────────────────────────────────────── */
[data-template="collection"] #shopify-section-sections--19512978178113__footer_m9NzUG {
  display: none !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   CAKI LAWRENCE — COLLECTION PAGE ADDITIONS v3
   E) Hero spacing · F) Popup CSS guard
   ══════════════════════════════════════════════════════════════════════════ */

/* ── E) HERO SPACING — .cl-collection-header inside main-collection.liquid ──
   Scoped to [data-template="collection"] so it never touches other templates.
   ─────────────────────────────────────────────────────────────────────── */
[data-template="collection"] .cl-collection-header--all {
  padding-top: 56px;
  padding-bottom: 24px;
  /* Horizontal padding follows the page-width container from the parent section */
}

/* Reduce gap between header block and product grid */
[data-template="collection"] .cl-collection-header--all + .section-background,
[data-template="collection"] .cl-collection-header--all + results-list,
[data-template="collection"] .cl-collection-header--all ~ results-list {
  margin-top: 12px;
}

/* Ensure description (intro) respects the requested sizing */
[data-template="collection"] .cl-collection-header--all .cl-collection-intro {
  max-width: 520px;
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: #5c5a55;
  opacity: 1;
  font-weight: 400;
}

@media screen and (max-width: 749px) {
  [data-template="collection"] .cl-collection-header--all {
    padding-top: 40px;
    padding-bottom: 18px;
  }
}

/* ── F) POPUP CSS GUARD — belt-and-suspenders; JS guard is primary ───────
   Even if JS fires, keep popup invisible while on any /collections/* page.
   This is a CSS-only fallback. The JS guard is the primary suppressor.
   ─────────────────────────────────────────────────────────────────────── */
[data-template="collection"] #clParlorPopup {
  display: none !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   CAKI LAWRENCE — COLLECTION HERO ALIGNMENT v4
   Problem: .cl-collection-header--all is a sibling of results-list.section,
   not a child of it — so Horizon's ".section > * { grid-column: 2 }" rule
   does NOT apply, leaving the hero flush-left while the product grid is
   inset by --page-margin (40px desktop / 16px mobile).
   Fix: mirror the .section column 2 inset on the hero using --page-margin.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Outer wrapper: full-width, inherits --page-margin from .section ─────
   The shopify-section div is NOT a .section, so we pull --page-margin from
   the nearest ancestor that has it (body/html via theme-styles-variables).
   Using padding-inline with the same var perfectly mirrors col-2 placement. */
[data-template="collection"] .cl-collection-header--all {
  /* Full viewport width — same as the .section element beside it */
  width: 100%;
  box-sizing: border-box;
  /* Apply same side gutters as Horizon's grid column 2:
     --page-margin resolves to 40px desktop, 16px mobile (set in theme-styles-variables) */
  padding-inline: var(--page-margin, 40px);
}

/* ── Inner content: constrain to the same max-width as the grid content ──
   Horizon's ".section" uses:
     grid-template-columns: <margin> <central-column-width> <margin>
   where central-column-width = min(--page-width - margin*2, 100% - margin*2)
   = min(1440px, 100% - 80px)  →  1200px at viewport 1280px.
   We replicate this with max-width + auto margins. */
[data-template="collection"] .cl-collection-header--all .cl-collection-header__inner {
  max-width: calc(var(--page-width, calc(90rem + 80px)) - var(--page-margin, 40px) * 2);
  margin-inline: auto;
}

/* ── Remove any conflicting padding we set in earlier passes ─────────────
   v3 set padding-top/bottom on --all; keep those, only add inline here. */
/* (already handled above — padding-inline is additive, not conflicting) */


/* ── Mobile fix: below 750px results-list is display:block and collection-wrapper
   is full-width (left:0). Zero out the hero's padding-inline to match. ── */
@media screen and (max-width: 749px) {
  [data-template="collection"] .cl-collection-header--all {
    padding-inline: 0;
  }
}

/* ── Coming Soon button state ──────────────────────────── */
.cl-atc--coming-soon {
  background: #c9c5bc !important;
  color: #6b6860 !important;
  cursor: default !important;
  letter-spacing: 0.12em;
  opacity: 1 !important;
  pointer-events: none;
}

.cl-coming-soon-note {
  font-style: italic;
  color: #8a8880;
}

.cl-notify-link {
  color: #8a7c5e;
  text-decoration: underline;
  text-underline-offset: 2px;
  /* Reset <button> defaults so it looks like an inline link */
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  display: inline;
  vertical-align: baseline;
}
.cl-notify-link:hover {
  color: #6b5e42;
}

/* ── Pattern swatches (square, image-based) ─────────────── */
.cl-swatches--pattern { gap: 8px; }
.cl-swatch--pattern {
  width: 36px;
  height: 36px;
  border-radius: 3px !important;
  border: 1.5px solid rgba(42,42,36,0.14) !important;
  background-color: #e8e2d9;
  overflow: hidden;
}
.cl-swatch--pattern.selected {
  box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px rgba(42,42,36,0.55) !important;
  transform: scale(1.05);
}

/* Natural / White / Navy swatch hex overrides (Parlor Traveler) */
.cl-product-section .cl-swatch[data-color="natural"] { background: #E6D9C9; }
.cl-product-section .cl-swatch[data-color="white"]   { background: #F5F5F5; }
.cl-product-section .cl-swatch[data-color="navy"]    { background: #151C3A; }
.cl-product-section .cl-swatch[data-color="black"]   { background: #1a1a1a; border-color: rgba(42,42,36,0.35) !important; }


/* ══════════════════════════════════════════════════════════════
   CAKI LAWRENCE — SITE REFINEMENT v2
   Header spacing · Nav spacing · Section gaps · Typography polish
   ══════════════════════════════════════════════════════════════ */

/* ── HEADER VERTICAL PADDING ────────────────────────────────── */
/* 13px top/bottom on the main header row only — slim, non-dominant */
.header-row,
header-component .header-row,
.header__row--top {
  padding-block: 13px !important;
  min-height: unset !important;
}

/* Collapse the empty navigation-bar row (no nav content in it) */
.header__navigation-bar-row {
  padding-block: 0 !important;
  min-height: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Fallback: direct header element padding */
header.header,
.header-wrapper > .header {
  padding-block: 13px !important;
}

/* ── HEADER DIVIDER — softer bottom border ──────────────────── */
.section-wrapper.sticky-header::after,
.header-wrapper::after,
header-component::after {
  opacity: 0.18 !important;
}
/* Horizon uses --header-border-opacity CSS var on some versions */
header-component {
  --header-border-opacity: 0.18 !important;
}

/* ── NAV ITEM SPACING + LETTER-SPACING ───────────────────── */
.menu-list__link {
  letter-spacing: 0.10em !important;
  padding-inline: 13px !important; /* ~26px total gap between items */
}

/* ── NAV HOVER INTERACTION ────────────────────────────────── */
.menu-list__link {
  transition: color 200ms ease, opacity 200ms ease !important;
}
.menu-list__link:hover .menu-list__link-title {
  color: #a9783e !important;
  opacity: 1 !important;
}
.menu-list__link:hover {
  opacity: 0.9 !important;
}

/* ── ICON ROW SPACING ─────────────────────────────────────── */
/* Search, account, cart — 26px gap */
.header-actions,
.header__actions,
header-component .icon-list,
.header__icons {
  gap: 26px !important;
  column-gap: 26px !important;
}

/* ── SECTION VERTICAL SPACING ────────────────────────────── */
/* NOTE: No global section padding overrides. Each CL section
   has its own padding defined individually above. */
/* (Global override block removed — was causing 115px padding on all .cl-section) */

/* ── TYPOGRAPHY POLISH ────────────────────────────────────── */
/* Line-height improvements — scoped to CL sections only, not global */
.cl-section h1, .cl-section h2, .cl-section h3,
.cl-hero__title, .cl-standard__title, .cl-doctrine__title,
.cl-statement blockquote {
  line-height: 1.28;
}

.cl-section h4, .cl-section h5, .cl-section h6 {
  line-height: 1.35;
}

/* Body text in CL sections only */
.cl-section p,
.cl-section li,
.cl-footer p,
.cl-footer li {
  line-height: 1.68;
}

/* ── HIDE BROKEN SHOPIFY FOOTER ──────────────────────────── */
/* The footer-group.json now renders cl-footer.liquid exclusively.
   Suppress any residual Horizon footer blocks that may still render. */
.shopify-section-group-footer-group .footer-content,
.shopify-section-group-footer-group .footer-utilities {
  display: none !important;
}

/* Ensure our custom footer section shows */
.shopify-section-group-footer-group .cl-footer {
  display: block !important;
}

/* ── COLLECTION PAGE SPACING ─────────────────────────────────────────────
   Scoped strictly to [data-template="collection"] so no other page layout
   is affected. Removes the old unscoped !important override that was
   fighting the v3/v4 hero-alignment rules.
   ─────────────────────────────────────────────────────────────────────── */

/* /collections/all — keep the v4 padding (56px top / 24px bottom desktop) */
[data-template="collection"] .cl-collection-header--all {
  padding-top: 56px;
  padding-bottom: 24px;
}

/* Subcollection pages — matching vertical rhythm */
[data-template="collection"] .cl-collection-header--sub {
  padding-top: 56px;
  padding-bottom: 24px;
  padding-inline: var(--page-margin, 40px);
  width: 100%;
  box-sizing: border-box;
}

[data-template="collection"] .cl-collection-header--sub .cl-collection-header__inner {
  max-width: calc(var(--page-width, calc(90rem + 80px)) - var(--page-margin, 40px) * 2);
  margin-inline: auto;
}

[data-template="collection"] .cl-collection-header--sub .collection-description,
[data-template="collection"] .cl-collection-header--sub .cl-collection-intro {
  max-width: 520px;
  margin-top: 14px;
  margin-bottom: 0;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: #5c5a55;
  font-weight: 400;
}

[data-template="collection"] .cl-collection-header--sub .collection-description p {
  margin-top: 0;
  margin-bottom: 0;
}

@media screen and (max-width: 749px) {
  [data-template="collection"] .cl-collection-header--all,
  [data-template="collection"] .cl-collection-header--sub {
    padding-top: 40px;
    padding-bottom: 18px;
    padding-inline: var(--page-margin, 16px);
  }
}

/* ── PRODUCT PAGE SECTION PADDING ────────────────────────── */
.cl-pd {
  padding-top: clamp(64px, 6vw, 100px) !important;
  padding-bottom: clamp(64px, 6vw, 100px) !important;
}



/* ── HERO HEADLINE COLOR ──────────────────────────────────────
   Scoped strictly to hero/slideshow — never global h1 styles.
   Must be white over the dark hero image. */
.cl-hero__title,
.cl-hero__title * {
  color: #ffffff !important;
}
.cl-hero__title em { color: var(--cl-cream, #f2f5ed) !important; }
.cl-hero__subtitle { color: rgba(242,245,237,0.82) !important; }

/* Horizon slideshow title override */
.hero__content h1,
.hero__content h2,
.slideshow__content h1,
.slideshow__content h2,
.layered-slideshow__content h1,
.layered-slideshow__content h2 {
  color: #ffffff !important;
}

/* ── HERO SUBHEADLINE — force white, scoped to hero/slideshow only ──
   Horizon text-block sets --color:#ffffff on the div wrapper but <p> children
   inherit body color (rgb 63,58,54). Force white on p and em inside hero. */
.hero__content .text-block p,
.hero__content .text-block p em,
.slideshow__content .text-block p,
.slideshow__content .text-block p em,
.layered-slideshow__content .text-block p,
.layered-slideshow__content .text-block p em,
[class*="slideshow"] .text-block p,
[class*="slideshow"] .text-block p em,
[class*="hero"] .text-block p,
[class*="hero"] .text-block p em {
  color: #ffffff !important;
  opacity: 0.9;
}

/* Also catch inline-styled text-block containers with --color:#ffffff */
.text-block[style*="--color: #ffffff"] p,
.text-block[style*="--color:#ffffff"] p,
.text-block[style*="--color: #ffffff"] p em,
.text-block[style*="--color:#ffffff"] p em {
  color: #ffffff !important;
  opacity: 0.9;
}

/* ── FOOTER: styles now live in sections/cl-footer.liquid ──── */
/* Only keep Horizon suppression rules here */
.site-footer { display: none !important; }

/* ── FOOTER LOGO OVERRIDE (global fallback — beats CDN-cached section HTML)
   Logo is an <img class="cl-footer__logo footer-logo"> inside .cl-footer
   Natural image: 1024×963 px (≈1:1 circle). Target display size: 80px tall.
   NOTE: inline style="height:80px!important" is also on the img in the liquid;
         this CSS ensures the size holds even if a stale cached version loads. */
footer.cl-footer img.cl-footer__logo,
footer.cl-footer img.footer-logo,
footer.cl-footer .cl-footer__logo-link img,
.cl-footer__logo,
.footer-logo {
  height: 80px !important;
  width: auto !important;
  max-height: none !important;
  max-width: none !important;
  display: block !important;
  object-fit: contain !important;
}

/* Wrapper — must not constrain the image */
footer.cl-footer .cl-footer__logo-link {
  max-height: none !important;
  max-width: none !important;
  overflow: visible !important;
}

/* Footer outer padding — keep compact */
footer.cl-footer {
  padding-top: 32px !important;
  padding-bottom: 24px !important;
}

/* Copyright row spacing */
footer.cl-footer .cl-footer__bottom {
  margin-top: 18px !important;
  padding-top: 12px !important;
}

/* ── CL NAV DROPDOWN — Desktop Collection submenu ──────────────
   Styles for the custom cl-dropdown built in blocks/_header-menu.liquid.
   The dropdown is an absolutely-positioned panel that appears on hover
   of .cl-has-submenu. Without these rules the <ul> renders as a visible
   bulleted list inside the header.
   cl-v:NAV-DROPDOWN-V1 */

/* Position anchor: the parent li must be relative */
.menu-list__list-item.cl-has-submenu {
  position: relative !important;
}

/* The dropdown panel: hidden by default, shown on hover */
.cl-dropdown {
  display: none;
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: var(--layer-header-menu, 300) !important;
  background: var(--color-background, #faf9f7) !important;
  padding: 16px 20px !important;
  min-width: 160px !important;
  box-shadow: 0 4px 16px rgba(58, 56, 48, 0.08) !important;
}

/* Show on hover of the parent li */
.menu-list__list-item.cl-has-submenu:hover .cl-dropdown,
.menu-list__list-item.cl-has-submenu:focus-within .cl-dropdown {
  display: block !important;
}

/* Reset list styles — critical: prevents bullet list rendering */
.cl-dropdown__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* Each dropdown link */
.cl-dropdown__link {
  font-family: 'Playfair Display SC', serif !important;
  font-size: 0.58rem !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--cl-olive, #5b5a3c) !important;
  text-decoration: none !important;
  display: block !important;
  white-space: nowrap !important;
  transition: color 0.15s ease !important;
}

.cl-dropdown__link:hover,
.cl-dropdown__link--active {
  color: var(--cl-text, #3a3830) !important;
}

/* Mobile submenu — hidden by default in the drawer, shown when
   the parent item is expanded (handled by the drawer component) */
.cl-mob-submenu {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 0 0 1rem !important;
}

.cl-mob-sublink {
  font-family: 'Playfair Display SC', serif !important;
  font-size: 0.58rem !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--cl-olive, #5b5a3c) !important;
  text-decoration: none !important;
  display: block !important;
  padding: 6px 0 !important;
}

/* ── PRIVACY PAGE — Editorial Typography ──────────────────────
   These rules must live here (last file loaded) to win the cascade.
   Horizon's body gets font-size: var(--font-paragraph--size)=18px from base.css
   We override by directly targeting the policy container paragraphs.
   Body copy reduced to 13px for a refined, luxury editorial feel.
   cl-v:POLICY-TYPO-V2 */
.shopify-policy__container p,
.shopify-policy__container li {
  font-size: 13px !important;
  line-height: 1.75 !important;
  color: var(--cl-text, #3a3830) !important;
  letter-spacing: 0.015em !important;
  margin-bottom: 10px !important;
}

.shopify-policy__container ul,
.shopify-policy__container ol {
  padding-left: 1.4em !important;
  margin-bottom: 10px !important;
}

.shopify-policy__container {
  max-width: 640px !important;
  margin-inline: auto !important;
  font-size: 13px !important;
}

/* Page-level title (h1 rendered by the template "page" block) */
[data-template="policy"] h1,
.shopify-policy__container h1 {
  font-family: 'Playfair Display SC', serif !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  color: var(--cl-text, #3a3830) !important;
  margin-bottom: 32px !important;
}

.shopify-policy__container h2 {
  font-family: 'Playfair Display SC', serif !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  color: var(--cl-olive, #5b5a3c) !important;
  font-weight: 400 !important;
  margin: 28px 0 10px !important;
}

/* Contact link styling */
.shopify-policy__container a {
  color: var(--cl-text, #3a3830) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-decoration-color: var(--cl-olive, #5b5a3c) !important;
}

/* ── DOM-REBUILD GALLERY (cl-v:DOM-REBUILD-V1) ─────────────────
   These rules style the custom gallery built by caki-lawrence.js
   rebuildGallery(). They supplement the inline styles in the JS
   injectStyles() function and the block's {% stylesheet %} rules.
   Having them here ensures they load immediately from the CSS file
   (before JS runs) so there is no flash of unstyled content.
   ──────────────────────────────────────────────────────────────── */

/* Outer gallery: force 1:1 on collection page regardless of Liquid output */
[data-template="collection"] .card-gallery {
  aspect-ratio: 1 / 1 !important;
  overflow: visible !important;
}

/* JS-built wrapper: position:relative square frame, clips to boundary */
.cl-wrap {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #faf9f7;
}

/* Full-area transparent link — sits at z-index 0, below arrows */
.cl-link {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}

/* Scroll-snap track */
.cl-track {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: row;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cl-track::-webkit-scrollbar { display: none; }

/* Slide: full-width 100% height square cell */
.cl-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  overflow: hidden;
  display: block;
}

/* Images: contain, no crop, no padding — fill square frame cleanly */
.cl-slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block;
  padding: 0;
  box-sizing: border-box;
}

/* Arrow buttons — z-index 2 sits ABOVE the .cl-link at z-index 0 */
.cl-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: rgba(255, 255, 255, 0.85);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  transition: background 0.18s ease, opacity 0.18s ease;
  opacity: 0.72;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
}
.cl-arrow:hover,
.cl-arrow:focus-visible {
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  outline: none;
}
.cl-arrow svg {
  width: 14px;
  height: 14px;
  display: block;
  color: #2a2a24;
  flex-shrink: 0;
}
.cl-arrow--prev { left: 8px; }
.cl-arrow--next { right: 8px; }

/* Fade arrows in on hover — desktop only */
@media (hover: hover) and (pointer: fine) {
  .cl-arrow { opacity: 0; }
  .cl-wrap:hover .cl-arrow { opacity: 0.75; }
  .cl-wrap:hover .cl-arrow:hover { opacity: 1; }
}

/* Show collection card arrows on mobile (480px–749px); hide only on very small screens */
@media (max-width: 479px) {
  .cl-arrow { display: none; }
}

/* On touch devices (mobile 480–749px): always show collection arrows */
@media (hover: none) and (max-width: 749px) and (min-width: 480px) {
  .cl-arrow {
    opacity: 0.82 !important;
    display: flex !important;
  }
  .cl-wrap:hover .cl-arrow { opacity: 0.82 !important; }
}

/* Collection .cl-track: enable native touch scroll-snap */
@media screen and (max-width: 749px) {
  .cl-track {
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scroll-snap-type: x mandatory;
  }
}

/* Also style the Liquid-block version of the wrapper */
.cl-card-gallery-wrap {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #faf9f7;
}
.cl-card-gallery-wrap .cl-card-link {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}
.cl-card-gallery-wrap .cl-arrow {
  /* Same as above, inherits from .cl-arrow */
  position: absolute;
  z-index: 2;
  pointer-events: auto;
}



/* ============================================================
   MOBILE-ONLY FIXES  (max-width: 749px)
   Scope: mobile nav drawer styling, product swipe, cart checkout
   DO NOT apply to desktop.
   ============================================================ */

/* ── 1. MOBILE DRAWER — Nav item typography & spacing ─────────── */
@media screen and (max-width: 749px) {
  /* Ensure the drawer open/close animation works on all mobile browsers */
  .menu-drawer-container[open] .menu-drawer {
    visibility: visible;
  }

  /* Nav list items in the CL mobile drawer */
  .menu-drawer__menu .menu-drawer__list-item--flat {
    display: block;
    padding: 0;
    border-bottom: 1px solid rgba(42,42,36,0.07);
  }
  .menu-drawer__menu .menu-drawer__list-item--flat:last-child {
    border-bottom: none;
  }

  /* Nav links */
  .menu-drawer__menu-item {
    display: block;
    font-family: var(--font-body--family, 'Playfair Display', serif);
    font-size: 1.1rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-foreground, #2a2a24);
    text-decoration: none;
    padding: 18px 24px;
    line-height: 1.2;
    transition: opacity 0.15s;
  }
  .menu-drawer__menu-item:hover,
  .menu-drawer__menu-item:focus {
    opacity: 0.6;
    outline: none;
  }
  .menu-drawer__menu-item--active {
    opacity: 0.5;
  }
}

/* ── 2. PRODUCT PAGE — Enable swipe on gallery main image ─────── */
/* The CL product gallery uses a single-image swap JS model.
   Swipe is handled by caki-lawrence.js (touchstart/touchend).
   This CSS ensures the touch target is correctly sized and
   touch-action allows horizontal swipes without scroll conflicts. */
@media screen and (max-width: 749px) {
  .cl-gallery__main {
    touch-action: pan-y pinch-zoom;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
  }
  .cl-gallery__main:active {
    cursor: grabbing;
  }

  /* Always show arrows on mobile (hover not available) */
  .cl-gallery__arrow {
    opacity: 0.72 !important;
  }
  .cl-gallery__arrow--prev {
    left: 8px;
  }
  .cl-gallery__arrow--next {
    right: 8px;
  }
}

/* ── 3. MOBILE — Cart checkout, gallery, product arrows, signup ── */
@media screen and (max-width: 749px) {

  /* ── Cart checkout button: minimum tap target, no hover-transforms ───── */
  .cl-cart-page .cl-checkout-btn {
    min-height: 52px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    transform: none !important;        /* no translateY on hover — prevents tap offset */
    transition: opacity 0.15s !important;
  }
  .cl-cart-page .cl-checkout-btn:active {
    opacity: 0.85;
  }

  /* ── Ensure popup overlay never covers the cart on mobile ──────────────
     The overlay is position:fixed; z-index:9999. On cart page we forcibly
     hide it because it is never intentionally shown there. The correct
     selector is #MainContent[data-template="cart"] .cl-popup-overlay
     because data-template is set on <main id="MainContent"> in theme.liquid.
  ──────────────────────────────────────────────────────────────────────── */
  #MainContent[data-template="cart"] .cl-popup-overlay {
    display: none !important;
    pointer-events: none !important;
  }

  /* ── Gallery swipe on product page ──────────────────────────────────── */
  .cl-gallery__main {
    touch-action: pan-x pinch-zoom;
    -webkit-user-select: none;
    user-select: none;
  }

  /* ── Always show product page arrows on mobile ───────────────────────── */
  .cl-gallery__arrow {
    opacity: 0.82 !important;
    pointer-events: auto !important;
  }

  /* ── Mobile signup consistency: matte-brass submit buttons ──────────── */
  .cl-popup__submit,
  button[class*="signup"],
  .newsletter-form__button,
  .email-signup-button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    min-height: 48px;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   CL INFO PAGES — Shipping / Returns / Terms
   Shared styles for all cl-info-page sections.
   Matches site brand palette: warm neutral bg, plum accents, brass headings.
   ══════════════════════════════════════════════════════════════════════════ */

.cl-info-page {
  background: #f2f5ed;
  min-height: 60vh;
}

.cl-info-page__inner {
  max-width: 720px;
  margin-inline: auto;
  padding: clamp(64px, 9vw, 104px) clamp(24px, 5vw, 48px) clamp(64px, 9vw, 96px);
}

/* ── Page header ──────────────────────────────────────────────────────── */
.cl-info-page__header {
  margin-bottom: clamp(40px, 6vw, 64px);
  border-bottom: 1px solid rgba(42, 42, 36, 0.10);
  padding-bottom: 32px;
}

.cl-info-page__eyebrow {
  font-family: 'Playfair Display SC', serif;
  font-size: 0.60rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #9c7a47;
  margin: 0 0 16px;
  font-weight: 400;
}

.cl-info-page__title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 400;
  line-height: 1.18;
  color: #364152;
  margin: 0 0 10px;
}

.cl-info-page__updated {
  font-family: var(--font-body--family, Georgia, serif);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(54, 65, 82, 0.48);
  margin: 0;
  font-style: italic;
}

/* ── Sections ─────────────────────────────────────────────────────────── */
.cl-info-section {
  margin-bottom: clamp(32px, 5vw, 48px);
}

.cl-info-section:last-child {
  margin-bottom: 0;
}

.cl-info-section__heading {
  font-family: 'Playfair Display SC', serif;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #632c50;
  font-weight: 400;
  margin: 0 0 14px;
}

.cl-info-section p,
.cl-info-section li {
  font-family: var(--font-body--family, Georgia, serif);
  font-size: 0.92rem;
  line-height: 1.75;
  color: rgba(54, 65, 82, 0.82);
  letter-spacing: 0.01em;
}

.cl-info-section p + p {
  margin-top: 14px;
}

.cl-info-section p {
  margin: 0 0 14px;
}

.cl-info-section p:last-child {
  margin-bottom: 0;
}

/* ── Lists ────────────────────────────────────────────────────────────── */
.cl-info-list {
  padding-left: 1.4em;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cl-info-list--ordered {
  list-style: decimal;
}

.cl-info-list:not(.cl-info-list--ordered) {
  list-style: disc;
}

/* ── Table ────────────────────────────────────────────────────────────── */
.cl-info-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 14px;
  font-family: var(--font-body--family, Georgia, serif);
  font-size: 0.88rem;
}

.cl-info-table th {
  font-family: 'Playfair Display SC', serif;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9c7a47;
  font-weight: 400;
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid rgba(42, 42, 36, 0.14);
  text-align: left;
}

.cl-info-table td {
  padding: 11px 14px 11px 0;
  border-bottom: 1px solid rgba(42, 42, 36, 0.07);
  color: rgba(54, 65, 82, 0.80);
  vertical-align: top;
}

.cl-info-table tr:last-child td {
  border-bottom: none;
}

/* ── Note ─────────────────────────────────────────────────────────────── */
.cl-info-note {
  font-size: 0.80rem !important;
  color: rgba(54, 65, 82, 0.60) !important;
  font-style: italic;
}

/* ── Links ────────────────────────────────────────────────────────────── */
.cl-info-link {
  color: #632c50;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(99, 44, 80, 0.40);
  transition: color 0.15s, text-decoration-color 0.15s;
}

.cl-info-link:hover {
  color: #4a1f3a;
  text-decoration-color: rgba(99, 44, 80, 0.80);
}