/* ==========================================================================
   Collection Launch — front-page template styles
   Design tokens live as CSS variables so they can be re-tinted per season
   without touching markup. Deliberately avoids rounded "SaaS card" chrome,
   drop shadows and ALL-CAPS eyebrows — flat hairlines + editorial type instead.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  --cl-ink: #1b1b18;
  --cl-bone: #f1eee7;
  --cl-paper: #ffffff;
  --cl-stone: #c9bfaf;
  --cl-accent: #4b5e4a;   /* muted botanical green — used sparingly */
  --cl-badge: #a8402e;    /* low stock / sale badge only */
  --cl-max: 1440px;
  --cl-gutter: clamp(16px, 3vw, 48px);
  --cl-radius: 0px;       /* flat by design */
  --font-display: "Poppins", sans-serif;
  --font-body: "Poppins", sans-serif;
}

.cl-page * { box-sizing: border-box; }

.cl-page {
  color: var(--cl-ink);
  background: var(--cl-paper);
  font-family: var(--font-body);
  line-height: 1.5;
}

.cl-page a { color: inherit; text-decoration: none; }
.cl-page img { max-width: 100%; display: block; }

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

/* ---- Announcement bar ---- */
.cl-announce {
  background: var(--cl-ink);
  color: var(--cl-bone);
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  padding: 10px var(--cl-gutter);
  position: relative;
}
.cl-announce a { border-bottom: 1px solid currentColor; }
.cl-announce__dismiss {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 4px;
}

/* ---- Hero (full-width image, copy overlaid) ---- */
.cl-hero {
  position: relative;
  min-height: min(86vh, 760px);
  overflow: hidden;
}
.cl-hero__media { position: absolute; inset: 0; background: var(--cl-stone); }
.cl-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.cl-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0) 55%);
  pointer-events: none;
}
.cl-hero__copy {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(24px, 4vw, 56px);
  max-width: 640px;
  color: var(--cl-bone);
}
.cl-hero__eyebrow {
  font-size: 0.78rem;
  color: var(--cl-bone);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.9;
}
.cl-hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.05;
  margin: 0 0 20px;
  max-width: 16ch;
}
.cl-hero .cl-cta { border-color: var(--cl-bone); }
.cl-hero .cl-cta:hover { border-color: var(--cl-accent); color: var(--cl-accent); }
.cl-cta {
  display: inline-block;
  width: fit-content;
  border-bottom: 1px solid var(--cl-ink);
  padding-bottom: 3px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.cl-cta:hover { border-color: var(--cl-accent); color: var(--cl-accent); }

/* ---- Section heading ---- */
.cl-section-title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-align: center;
  margin: 0 0 32px;
}
.cl-section { padding: clamp(40px, 6vw, 88px) 0; }
.cl-section--flush { padding-inline: 0; }

/* ---- Product rail ---- */
.cl-rail {
  display: flex;
  align-items: flex-start;
  gap: clamp(12px, 2vw, 20px);
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  background: transparent;
  padding-inline: var(--cl-gutter);
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.cl-rail::-webkit-scrollbar { display: none; }
.cl-product {
  scroll-snap-align: start;
  background: var(--cl-paper);
  flex: 0 0 clamp(240px, 30vw, 420px);
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 0;
  overflow: visible !important;
}
.cl-product__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--cl-paper);
  color: var(--cl-badge);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  z-index: 2;
}
.cl-product__img {
  aspect-ratio: 3/4;
  overflow: hidden;
  flex: 0 0 auto !important;
}
.cl-product__img img { width: 100%; height: 100%; object-fit: cover; }
.cl-product__meta {
  padding: 14px 16px 22px;
  flex: 1 0 auto !important;
  display: block !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
.cl-product__name {
  font-size: 0.92rem;
  line-height: 1.3 !important;
  margin: 0 0 6px;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: var(--cl-ink) !important;
}
.cl-product__name a { color: var(--cl-ink) !important; }
.cl-product__price {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: var(--cl-ink) !important;
}
.cl-product__price .woocommerce-Price-amount { color: var(--cl-ink) !important; }
.cl-product__price del { color: #888 !important; opacity: 0.7; }
.cl-product__price ins { text-decoration: none; color: var(--cl-badge) !important; }
/* Rail arrows — overlaid on the middle of the product images, not a
   separate bar underneath the rail. */
.cl-rail-wrap { position: relative; }
.cl-rail-arrow {
  position: absolute;
  top: 40%; /* centers on the product image, not the taller card incl. name/price */
  transform: translateY(-50%);
  z-index: 3;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: var(--cl-ink);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.cl-rail-arrow:hover { background: var(--cl-paper); }
.cl-rail-arrow--prev { left: 12px; }
.cl-rail-arrow--next { right: 12px; }
@media (max-width: 640px) {
  .cl-rail-arrow { width: 32px; height: 32px; font-size: 0.95rem; }
  .cl-rail-arrow--prev { left: 8px; }
  .cl-rail-arrow--next { right: 8px; }
}

/* ---- Editorial split — auto layout based on how many images are set.
   Default (2 or more, wraps in pairs) is the side-by-side split; a single
   image gets the full container width with a wider, banner-like crop
   instead of the tall portrait ratio used for the 2-up layout. ---- */
.cl-editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--cl-stone);
}
@media (max-width: 720px) { .cl-editorial { grid-template-columns: 1fr; } }
.cl-editorial--count-1 { grid-template-columns: 1fr; }
.cl-editorial--count-1 .cl-editorial__img { aspect-ratio: 16/9; }
.cl-editorial__item { background: var(--cl-paper); text-align: center; }
.cl-editorial__img { aspect-ratio: 4/5; overflow: hidden; }
.cl-editorial__img img { width: 100%; height: 100%; object-fit: cover; }
.cl-editorial__caption { padding: 18px 0 30px; }
.cl-editorial__caption h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; margin: 0 0 8px; }

/* ---- Campaign banner ---- */
.cl-campaign {
  position: relative;
  min-height: min(70vh, 640px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  color: var(--cl-bone);
}
.cl-campaign img, .cl-campaign video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
  background: var(--cl-stone);
}
.cl-campaign::after {
  content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.28); z-index: 1;
}
.cl-campaign__copy { position: relative; z-index: 2; max-width: 640px; padding: 0 20px; }
.cl-campaign h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 18px; }
.cl-campaign .cl-cta { border-color: var(--cl-bone); margin-inline: auto; }

/* ---- FAQ (also carries FAQPage schema in the template) ----
   Placement, arrangement, fonts and colors come from Settings → Collection
   Launch → FAQ, as --cl-faq-* variables set inline on the <section>. Every
   var() falls back to the original look. ---- */
.cl-faq-section { background: var(--cl-faq-bg, transparent); }
.cl-faq-section .cl-section-title {
  text-align: var(--cl-faq-title-align, center);
  font-family: var(--cl-faq-title-font, var(--font-body));
  font-size: var(--cl-faq-title-size, 0.85rem);
  font-weight: var(--cl-faq-title-weight, 500);
  text-transform: var(--cl-faq-title-transform, uppercase);
  color: var(--cl-faq-title-color, var(--cl-ink));
}
.cl-faq {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  column-gap: clamp(24px, 4vw, 56px);
  max-width: var(--cl-faq-width, 780px);
  margin-inline: auto;
  text-align: var(--cl-faq-text-align, left);
}
.cl-faq--align-left   { margin-inline: 0 auto; }
.cl-faq--align-center { margin-inline: auto; }
.cl-faq--align-right  { margin-inline: auto 0; }
.cl-faq--cols-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) { .cl-faq--cols-2 { grid-template-columns: 1fr; } }

.cl-faq details { padding: 16px 0; }
.cl-faq--lines details { border-top: 1px solid var(--cl-faq-line, var(--cl-stone)); }
.cl-faq--lines details:last-child { border-bottom: 1px solid var(--cl-faq-line, var(--cl-stone)); }
@media (min-width: 721px) {
  /* two columns: the last item of each column closes with a line */
  .cl-faq--lines.cl-faq--cols-2 details:nth-last-child(2) { border-bottom: 1px solid var(--cl-faq-line, var(--cl-stone)); }
}
.cl-faq--boxed { row-gap: 12px; }
.cl-faq--boxed details { border: 1px solid var(--cl-faq-line, var(--cl-stone)); padding: 16px 20px; }
.cl-faq--plain details { padding: 12px 0; }

.cl-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--cl-faq-q-font, var(--font-display));
  font-size: var(--cl-faq-q-size, 1.05rem);
  color: var(--cl-faq-q-color, var(--cl-ink));
}
.cl-faq summary::-webkit-details-marker { display: none; }
.cl-faq--align-center summary { justify-content: center; }
.cl-faq--align-right summary  { flex-direction: row-reverse; }

.cl-faq summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--cl-faq-accent, currentColor);
  font-size: 1.25em;
  line-height: 1;
}
.cl-faq details[open] summary::after { content: "\2212"; }
.cl-faq--marker-chevron summary::after,
.cl-faq--marker-chevron details[open] summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-right: 1.5px solid;
  border-bottom: 1.5px solid;
  transform: rotate(45deg);
}
.cl-faq--marker-chevron details[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.cl-faq--marker-none summary::after { display: none; }

.cl-faq p {
  margin: 12px 0 0;
  color: var(--cl-faq-a-color, #444);
  font-family: var(--cl-faq-a-font, var(--font-body));
  font-size: var(--cl-faq-a-size, 1rem);
}

/* ---- Social grid ---- */
.cl-social { text-align: center; }
.cl-social__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--cl-stone);
}
@media (max-width: 720px) { .cl-social__grid { grid-template-columns: repeat(2, 1fr); } }
.cl-social__grid a { display: block; aspect-ratio: 3/4; overflow: hidden; background: var(--cl-bone); }
.cl-social__grid img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Custom "post detail" lightbox — no Instagram iframe, so no header
   strip to hide and no mismatched embed heights leaving blank gaps. ---- */
.cl-ig-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.cl-ig-modal[hidden] { display: none; }
.cl-ig-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.cl-ig-modal__panel {
  position: relative;
  z-index: 1;
  background: var(--cl-paper);
  max-width: 420px;
  width: 92%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 16px;
  text-align: center;
}
.cl-ig-modal__close {
  position: absolute;
  top: 6px;
  right: 10px;
  background: none;
  border: 0;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.cl-ig-modal__img { width: 100%; height: auto; max-height: 70vh; object-fit: contain; margin-bottom: 14px; }
.cl-ig-modal__caption { font-size: 0.9rem; margin: 0 0 16px; text-align: left; }
.cl-ig-modal__link { margin-inline: auto; }

@media (prefers-reduced-motion: reduce) {
  .cl-page * { scroll-behavior: auto !important; transition: none !important; }
}

:focus-visible { outline: 2px solid var(--cl-accent); outline-offset: 2px; }

/* ---- Hide the theme's shared site footer ONLY on this template ----------
   Nothing here edits the real footer file, so every other page on the
   site keeps it exactly as-is. WordPress auto-adds a body class for the
   template ("page-template-page-collection-launch-php"); if your theme's
   footer wrapper isn't one of the selectors below, view-source and swap
   in the actual id/class Flatsome uses for its <footer>. ------------------- */
body.cl-launch-page #footer,
body.cl-launch-page footer.footer,
body.cl-launch-page .footer-wrapper,
body.page-template-page-collection-launch-php #footer,
body.page-template-page-collection-launch-php footer.footer,
body.page-template-page-collection-launch-php .footer-wrapper {
  display: none !important;
}

/* ---- This page's own footer (light, matches the Emilia Wickstead reference) ----
   Placement, fonts and colors come from Settings → Collection Launch → Footer,
   as --cl-ft-* variables set inline on the <footer>. Every var() falls back
   to the original look. ---- */
.cl-custom-footer {
  background: var(--cl-ft-bg, var(--cl-paper));
  color: var(--cl-ft-link, var(--cl-ink));
  padding: clamp(32px, 5vw, 64px) 0 20px;
}
.cl-custom-footer a:hover { color: var(--cl-ft-hover, var(--cl-accent)); }

.cl-custom-footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cl-ft-gap, 32px);
  padding-bottom: clamp(28px, 4vw, 48px);
  --cl-ft-col-flex: 1 1 160px;               /* "spread": columns share the full width */
}
.cl-custom-footer__top--start  { justify-content: flex-start; --cl-ft-col-flex: 0 1 220px; }
.cl-custom-footer__top--center { justify-content: center;     --cl-ft-col-flex: 0 1 220px; }
.cl-custom-footer__top--end    { justify-content: flex-end;   --cl-ft-col-flex: 0 1 220px; }
.cl-custom-footer__col {
  flex: var(--cl-ft-col-flex);
  min-width: 0;
  text-align: var(--cl-ft-text-align, left);
}
.cl-custom-footer__col h4 {
  font-family: var(--cl-ft-heading-font, var(--font-body));
  font-size: var(--cl-ft-heading-size, 0.72rem);
  font-weight: var(--cl-ft-heading-weight, 500);
  text-transform: var(--cl-ft-heading-transform, uppercase);
  color: var(--cl-ft-heading, var(--cl-ink));
  letter-spacing: 0.08em;
  margin: 0 0 16px;
}
.cl-custom-footer__col ul { list-style: none; margin: 0; padding: 0; }
.cl-custom-footer__col li {
  margin-bottom: 10px;
  font-family: var(--cl-ft-link-font, var(--font-body));
  font-size: var(--cl-ft-link-size, 0.78rem);
  text-transform: var(--cl-ft-link-transform, uppercase);
  letter-spacing: 0.05em;
  color: var(--cl-ft-link, var(--cl-ink));
}
.cl-custom-footer__col a {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.cl-custom-footer__social {
  display: flex;
  justify-content: var(--cl-ft-social-justify, flex-start);
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--cl-ft-line, var(--cl-stone));
}
.cl-custom-footer__social a {
  display: inline-flex;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}
.cl-custom-footer__social svg {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px;
  max-height: 18px;
  flex-shrink: 0;
  fill: var(--cl-ft-link, var(--cl-ink));
}
.cl-custom-footer__social a:hover svg { fill: var(--cl-ft-hover, var(--cl-accent)); }

.cl-custom-footer__bottom {
  border-top: 1px solid var(--cl-ft-line, var(--cl-stone));
  padding-top: 18px;
  display: flex;
  justify-content: var(--cl-ft-bottom-justify, space-between);
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--cl-ft-bottom, #666);
}
.cl-custom-footer__payments { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-custom-footer__payments span {
  border: 1px solid var(--cl-ft-line, var(--cl-stone));
  padding: 3px 8px;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

/* ---- Footer: mobile sizing (columns stack, whatever the desktop arrangement) ---- */
@media (max-width: 720px) {
  .cl-custom-footer__top { flex-direction: column; }
  .cl-custom-footer__col { flex: 0 0 auto; }
}
@media (max-width: 640px) {
  .cl-custom-footer { padding: 28px 0 16px; }
  .cl-custom-footer__top { gap: calc(var(--cl-ft-gap, 32px) * 0.7); padding-bottom: 22px; }
  .cl-custom-footer__col h4 { font-size: calc(var(--cl-ft-heading-size, 0.72rem) * 0.94); margin-bottom: 10px; }
  .cl-custom-footer__col li { font-size: calc(var(--cl-ft-link-size, 0.78rem) * 0.92); margin-bottom: 7px; }
  .cl-custom-footer__social { gap: 14px; padding: 14px 0; }
  .cl-custom-footer__social a,
  .cl-custom-footer__social svg { width: 15px !important; height: 15px !important; max-width: 15px; max-height: 15px; }
  .cl-custom-footer__bottom { font-size: 0.66rem; padding-top: 14px; }
  .cl-custom-footer__payments span { padding: 2px 6px; font-size: 0.6rem; }
}