/** Shopify CDN: Minification failed

Line 404:0 Unexpected "}"

**/
/*
  JILZARAH retail — homepage design system (custom, not part of Flex)

  One stylesheet shared by every jilzarah-home-* section. Each section links it with
  stylesheet_tag; the browser loads one copy. Sections pass their editor-chosen
  background in as a CSS custom property on the section element.

  Fonts follow the theme's own settings so the homepage stays in step with the rest of
  the store: the heading font is the serif (Libre Caslon Text), the nav font is the sans
  (Jost) used for eyebrows, labels and buttons, the body font is the body font (Lato).

  Rhythm: sections abut. Each section owns its own vertical padding so the space between
  two blocks is one bottom pad plus the next top pad (48 + 48 on desktop, 32 + 32 on phones).
*/
:root {
  --jz-warm-white: #FBF9F5;
  --jz-ivory: #F5F1EA;
  --jz-ink: #3E2C3A;          /* headings: deep plum-charcoal */
  --jz-text: #4C4249;
  --jz-muted: #6D6064;        /* the theme's own body colour */
  --jz-plum: #4E2B48;         /* buttons + eyebrows */
  --jz-plum-deep: #38193A;
  --jz-hairline: #DDD5CC;
  --jz-serif: "Libre Caslon Text", serif;
  --jz-sans: Jost, sans-serif;
  --jz-body-font: Lato, sans-serif;
  --jz-max: 1280px;
  --jz-gutter: 32px;
  --jz-pad: 48px;
}
@media (max-width: 798px) {
  :root { --jz-gutter: 18px; --jz-pad: 32px; }
}

/* ---------- primitives ---------- */
.jz-section {
  background: var(--jz-field, var(--jz-warm-white));
  color: var(--jz-text);
  overflow-x: clip;
}
.jz-wrap {
  max-width: var(--jz-max);
  margin: 0 auto;
  padding: var(--jz-pad) var(--jz-gutter);
  box-sizing: border-box;
}
.jz-wrap--flush { padding-top: 0; padding-bottom: 0; }

.jz-eyebrow {
  margin: 0 0 12px;
  font-family: var(--jz-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--jz-plum);
}
.jz-h {
  margin: 0 0 14px;
  font-family: var(--jz-serif);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0;
  color: var(--jz-ink);
}
.jz-h em { font-style: italic; }
.jz-h--xl { font-size: clamp(32px, 3.6vw, 46px); line-height: 1.08; }
.jz-h--lg { font-size: clamp(28px, 3vw, 38px); }
.jz-h--md { font-size: clamp(24px, 2.4vw, 32px); }

.jz-body {
  font-family: var(--jz-body-font);
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--jz-text);
}
.jz-body p { margin: 0 0 1em; }
.jz-body p:last-child { margin-bottom: 0; }

.jz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 26px;
  box-sizing: border-box;
  font-family: var(--jz-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--jz-plum);
  border-radius: 2px;
  background: var(--jz-plum);
  color: #fff;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.jz-btn:hover, .jz-btn:focus-visible { background: var(--jz-plum-deep); border-color: var(--jz-plum-deep); color: #fff; }
.jz-btn:focus-visible, .jz-link:focus-visible, .jz-tile:focus-visible, .jz-gateway:focus-visible, .jz-choice:focus-visible, .jz-media-link:focus-visible {
  outline: 2px solid var(--jz-plum);
  outline-offset: 3px;
}

.jz-link {
  font-family: var(--jz-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--jz-plum);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
.jz-link:hover { color: var(--jz-plum-deep); }

.jz-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Every photo is a responsive image filling its box; the box decides the crop. */
.jz-media { position: relative; overflow: hidden; background: var(--jz-ivory); }
.jz-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* "Show the whole photo": nothing is cropped, and there are no side bars, because the panel
   takes the photo's own proportions instead of the photo being squeezed into the panel's.
   The image is a normal block at its natural ratio and the column grows to fit it; the copy
   beside it stretches to match. If the copy is the taller of the two, --jz-photo-bg fills
   above and below. A very tall photo therefore makes a tall panel: that is the trade for
   never cutting the product, and the editor can pick a wider photo instead.
   (An earlier attempt kept the panel's shape and filled the sides with a blurred copy of the
   photo. It left a visible tonal seam where the blur met the sharp edge. Don't reintroduce it.) */
.jz-media--whole {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--jz-photo-bg, var(--jz-ivory));
}
.jz-media--whole img {
  width: 100%;
  height: auto;
  object-fit: fill;
}

/* Product tile: image + name + price, the whole thing one link to the PDP. */
.jz-tile {
  display: block;
  color: inherit;
  text-decoration: none;
  text-align: center;
}
.jz-tile .jz-media { aspect-ratio: 1 / 1; background: transparent; }
.jz-tile .jz-media img { object-fit: contain; transition: transform .35s ease; }
/* Carded products are shot as a tall card centred in a square with wide empty margins.
   Shopify returns the 89:200 crop already made (see snippets/jilzarah-product-tile.liquid
   for the measurement), so the image arrives the same shape as its box, hugging the card. */
.jz-tile--card .jz-media { aspect-ratio: 89 / 200; }
/* Arched card: trace the silhouette. Horizontal radius = half the width; vertical radius =
   0.45 x width = 20% of an 89:200 box. Square bottom corners, softened 3px. */
.jz-tile--arch .jz-media { border-radius: 50% 50% 3px 3px / 20% 20% 3px 3px; overflow: hidden; }
/* Clip INSIDE the card's edge: 0% white beats a sliver of card lost (Rafael, 2026-09-04).
   The crop already hugs the card to ~0.5% per side; scaling 6% pushes every edge, the arch
   included, well outside the clip. */
.jz-tile--arch .jz-media img { transform: scale(1.06); }
.jz-tile--card .jz-media img { object-fit: cover; }
.jz-tile__meta {
  margin: 12px 0 0;
  font-family: var(--jz-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--jz-ink);
}
.jz-tile__price { margin-left: .5em; color: var(--jz-text); font-weight: 400; }
/* One price for a whole row, printed once, when every product in it costs the same. */
.jz-shared-price {
  margin: 14px 0 0;
  font-family: var(--jz-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--jz-text);
  text-align: center;
}
.jz-tile__soldout { margin-left: .5em; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--jz-muted); }
.jz-empty {
  display: flex; align-items: center; justify-content: center;
  min-height: 120px; padding: 16px;
  font-family: var(--jz-sans); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--jz-muted); border: 1px dashed var(--jz-hairline); box-sizing: border-box;
}

/* ============================================================
   1. Hero — copy + product tiles left, campaign photo right
   ============================================================ */
.jz-hero .jz-wrap { padding-top: 0; padding-bottom: 0; }
.jz-hero__grid {
  display: grid;
  grid-template-columns: 42fr 58fr;
  align-items: stretch;
}
.jz-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 44px 36px 40px;
  background: var(--jz-panel, var(--jz-ivory));
  box-sizing: border-box;
}
.jz-hero__copy .jz-h { max-width: 12em; }
.jz-hero__text { max-width: 26em; margin: 0 auto; }
.jz-hero__actions { margin-top: 22px; }
.jz-hero__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 160px));
  justify-content: center;
  gap: 28px;
  margin-top: 30px;
  width: 100%;
}
.jz-hero__media { position: relative; min-height: 460px; }
.jz-hero__media .jz-media { position: absolute; inset: 0; }
.jz-hero__media .jz-media--whole { position: static; }
/* Flashlight across the whole hero (Rafael, 2026-09-04): ONE continuous photo behind
   everything; the copy panel is a thin translucent tint over part of it, like glass, and the
   light flows under the panel as it does everywhere else. Nothing in the wrap catches the
   pointer except the button and the tiles, so moving over the copy still moves the light. */
.jz-hero--stage { position: relative; }
.jz-hero__stage { position: absolute; inset: 0; z-index: 0; }
.jz-hero--stage .jz-wrap { position: relative; z-index: 1; pointer-events: none; }
.jz-hero--stage .jz-hero__copy { pointer-events: none; background: rgba(50, 29, 39, 0.58); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); text-shadow: 0 1px 12px rgba(20, 8, 14, 0.55); }
.jz-hero--stage .jz-hero__copy .jz-btn, .jz-hero--stage .jz-hero__copy .jz-tile { pointer-events: auto; }
.jz-hero--stage .jz-hero__media { pointer-events: none; }
@media (min-width: 799px) {
  .jz-hero--stage .jz-hero__copy { margin: 40px 0; }
  /* The photo's subject is dead centre. Rather than hide the photo behind the panel, the
     stage runs 28% PAST the right edge (clipped by the section), which slides the subject to
     ~64% of the band, clear of the copy column (which ends at ~41%). The photo still runs
     under the panel, so the tint reads as an overlay of the same image. */
  .jz-hero__stage { right: -28%; }
  .jz-hero__stage .jz-fl { --jz-fl-x: 50%; --jz-fl-y: 46%; }
}

/* Dark panel tone: seasonal. Cream type, orange button (the plum one would vanish), and the
   card-crop product photos — shot on white — sit on a white mount so they read as intended
   rather than as loose white rectangles. */
.jz-hero--dark .jz-hero__copy { color: #F4DFD0; }
.jz-hero--dark .jz-eyebrow { color: #F1C8A0; }
.jz-hero--dark .jz-h { color: #FFF2DF; }
.jz-hero--dark .jz-body { color: #F4DFD0; }
.jz-hero--dark .jz-btn { background: #F18449; border-color: #F18449; color: #24131A; }
.jz-hero--dark .jz-btn:hover, .jz-hero--dark .jz-btn:focus-visible { background: #FFF2DF; border-color: #FFF2DF; color: #24131A; }
.jz-hero--dark .jz-btn:focus-visible { outline-color: #D3DF8E; }
/* On a dark panel the cards sit flat: no border, no lift, no white anywhere. */
.jz-hero--dark .jz-tile .jz-media { background: transparent; box-shadow: none; }
.jz-hero--dark .jz-tile--card:not(.jz-tile--arch) .jz-media { border-radius: 6px; overflow: hidden; }
.jz-hero--dark .jz-tile__meta, .jz-hero--dark .jz-tile__name { color: #FFF2DF; }
.jz-hero--dark .jz-tile__price { color: #F4DFD0; }
.jz-hero--dark .jz-tile__soldout { color: #E0C9C4; }
.jz-hero--dark .jz-tile:focus-visible { outline-color: #D3DF8E; }

@media (max-width: 798px) {
  .jz-hero .jz-wrap { padding-left: 0; padding-right: 0; }
  .jz-hero__grid { grid-template-columns: 1fr; }
  .jz-hero__copy { padding: 36px var(--jz-gutter) 32px; }
  .jz-hero__media { order: -1; min-height: 0; }
  .jz-hero__media .jz-media { position: static; aspect-ratio: 4 / 3; }
  /* whole-hero flashlight: the media column is an empty window onto the stage; give it a
     height, and let the stage run full width behind it (no desktop offset on phones) */
  /* The window and the stage get an EXPLICIT height (4:3 of the viewport). Sized by
     aspect-ratio alone, Safari collapsed the empty window to nothing and drew the copy over
     the photo, so on iPhones the flashlight had nothing to show (Rafael, 2026-09-05). */
  .jz-hero--stage .jz-hero__media { aspect-ratio: auto; height: 75vw; min-height: 75vw; }
  .jz-hero--stage .jz-hero__copy { margin: 0; background: #321D27; -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* …and the stage is only that window, so the product is not lost behind the copy panel */
  .jz-hero__stage { inset: 0 0 auto 0; height: 75vw; aspect-ratio: auto; }
  .jz-hero__stage .jz-fl { --jz-fl-base: 0.46; } /* a little brighter: you can tell it is a photo before you touch it */
  .jz-hero__media .jz-media--flashlight { display: block; position: relative; inset: auto; height: 75vw; }
  .jz-hero__tiles { gap: 18px; grid-template-columns: repeat(2, minmax(120px, 160px)); }
}

/* ============================================================
   2. Gateways — three compact collection doors
   ============================================================ */
.jz-gateways__head { text-align: center; margin-bottom: 28px; }
.jz-gateways__head .jz-h { margin-bottom: 0; }
.jz-gateways__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.jz-gateway {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  background: var(--jz-ivory);
}
.jz-gateway .jz-media { aspect-ratio: 6 / 5; }
.jz-gateway .jz-media img { transition: transform .5s ease; object-position: var(--jz-focus, 50% 40%); }
.jz-gateway:hover .jz-media img { transform: scale(1.03); }
.jz-gateway__body {
  padding: 22px 18px 24px;
  text-align: center;
}
.jz-gateway__title {
  margin: 0 0 6px;
  font-family: var(--jz-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--jz-ink);
}
.jz-gateway__sub {
  margin: 0 0 14px;
  font-family: var(--jz-body-font);
  font-size: 15px;
  color: var(--jz-text);
}
@media (max-width: 798px) {
  .jz-gateways__grid { grid-template-columns: 1fr; gap: 12px; }
  .jz-gateway { flex-direction: row; align-items: stretch; }
  .jz-gateway .jz-media { flex: 0 0 38%; aspect-ratio: auto; min-height: 128px; }
  .jz-gateway__body { flex: 1; text-align: left; padding: 16px 16px; display: flex; flex-direction: column; justify-content: center; }
  .jz-gateway__sub { margin-bottom: 10px; }
}

/* ============================================================
   3. People We Love — floral editorial split
   ============================================================ */
.jz-people .jz-wrap { padding-top: 0; padding-bottom: 0; }
.jz-people__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.jz-people__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 64px 48px;
  box-sizing: border-box;
  background: var(--jz-panel, var(--jz-ivory));
  isolation: isolate;
}
.jz-people__floral {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  /* The frame artwork is SQUARE (bouquet down the left edge, spray down the right, clear
     middle) and the copy panel is square (the photo is cropped 1:1), so it is drawn once,
     edge to edge, exactly as the approved concept. Rafael, 2026-09-04/05: the first export was
     a landscape strip and every attempt to fit it was a compromise; the square export made
     all of that go away. Lives in Shopify Files, chosen in the section's "Different artwork". */
  background-size: 100% 100%;
  background-position: center;
}

.jz-people__inner {
  position: relative;
  z-index: 1;
  max-width: 30em;
}
.jz-people__copy .jz-h { max-width: 13em; margin-left: auto; margin-right: auto; }
/* Desktop: everything in the copy panel is sized in CONTAINER units (cqw = 1% of the panel's
   width), so the words and the flowers keep the proportions of the approved concept whatever
   the visitor's browser zoom or font size. Rafael's screenshot (2026-09-04) showed the text
   ~15% larger than my renders and reaching the bouquet; px/em sizes drift with zoom, cqw does
   not. The copy sits right of centre so the bouquet on the left stops short of it. */
@media (min-width: 799px) {
  /* Type scale for the panel (1cqw = 1% of the panel width; 608px at 1440, so 1cqw ≈ 6px):
       eyebrow 2.4  <  button 2.5  <  body 3.3  <  choices 3.6  <  headline 7.2
     Each tier is a clear step from the next so the eye reads label → headline → line →
     choices → action (Rafael, 2026-09-05: "proper proportion and hierarchy"). */
  .jz-people__copy { container-type: inline-size; padding: 6cqw 4cqw; }
  .jz-people__inner { width: 68cqw; max-width: none; margin-left: auto; margin-right: auto; }
  .jz-people__copy .jz-eyebrow { font-size: 2.4cqw; font-weight: 600; letter-spacing: .22em; margin-bottom: 3cqw; }
  .jz-people__copy .jz-h { font-size: 7.2cqw; line-height: 1.04; letter-spacing: -.015em; max-width: 9.4em; margin-bottom: 3.4cqw; }
  .jz-people__copy .jz-body { font-size: 3.3cqw; line-height: 1.5; max-width: 19em; margin: 0 auto 5cqw; }
  .jz-people__copy .jz-choice { padding: 0 3.6cqw; }
  .jz-people__copy .jz-choice__name { font-size: 3.6cqw; }
  .jz-people__copy .jz-btn { font-size: 2.5cqw; letter-spacing: .16em; padding: 3cqw 6.4cqw; }
  .jz-people__actions { margin-top: 6cqw; }
}
}
.jz-people__copy .jz-body { max-width: 24em; margin-left: auto; margin-right: auto; }
.jz-choices {
  display: flex;
  justify-content: center;
  margin: 24px 0 0;
  flex-wrap: wrap;
  padding: 0;
  list-style: none;
}
.jz-choices li { display: flex; }
.jz-choices li + li::before {
  content: "";
  width: 1px;
  align-self: stretch;
  margin: 4px 0;
  background: var(--jz-ink);
  opacity: .35;
}
.jz-choice {
  display: block;
  padding: 0 22px;
  color: inherit;
  text-decoration: none;
  text-align: center;
}
.jz-choice__name {
  display: block;
  font-family: var(--jz-serif);
  font-size: 17px;
  color: var(--jz-ink);
}
.jz-choice__price {
  display: block;
  margin-top: 4px;
  font-family: var(--jz-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--jz-text);
}
.jz-choice:hover .jz-choice__name { text-decoration: underline; text-underline-offset: 4px; }
.jz-people__actions { margin-top: 24px; }
.jz-people .jz-shared-price { margin-top: 10px; }
.jz-people__media { position: relative; aspect-ratio: 1; }
.jz-people__media .jz-media { position: absolute; inset: 0; }
/* whole-photo mode opts out of the absolute fill so the column grows to the photo */
.jz-people__media .jz-media--whole { position: static; }
@media (max-width: 798px) {
  .jz-people .jz-wrap { padding-left: 0; padding-right: 0; }
  .jz-people__grid { grid-template-columns: 1fr; }
  .jz-people__copy { container-type: inline-size; padding: 15cqw 6cqw 14cqw; }
  .jz-people__inner { width: 80cqw; max-width: none; margin: 0 auto; }
  .jz-people__copy .jz-eyebrow { font-size: 3cqw; letter-spacing: .2em; margin-bottom: 4.4cqw; }
  .jz-people__copy .jz-h { font-size: 8.2cqw; line-height: 1.06; max-width: 9.4em; margin: 0 auto 4.8cqw; }
  .jz-people__copy .jz-body { font-size: 4.2cqw; line-height: 1.45; max-width: 17em; margin: 0 auto 6.5cqw; }
  .jz-people__copy .jz-choice { padding: 0 3.6cqw; }
  .jz-people__copy .jz-choice__name { font-size: 4.6cqw; }
  .jz-people__copy .jz-btn { font-size: 3.4cqw; padding: 3.8cqw 8cqw; }
  .jz-people__actions { margin-top: 7.5cqw; }
  .jz-people__floral {
    /* phones: the whole frame, cover-fit and faint; its clear middle sits under the copy */
    background-size: cover;
    background-position: center;
    opacity: .55;
  }
  .jz-people__media { min-height: 0; }
  .jz-people__media .jz-media { position: static; aspect-ratio: 1; }
  .jz-choice { padding: 0 12px; }
  .jz-choice__name { font-size: 15px; }
}

/* ============================================================
   4. Capsule — one editorial photo + a three-product shelf
   ============================================================ */
.jz-capsule__head { text-align: center; margin-bottom: 28px; }
.jz-capsule__head .jz-h { margin-bottom: 0; }
.jz-capsule__grid {
  display: grid;
  grid-template-columns: 46fr 54fr;
  gap: 28px;
  align-items: stretch;
}
.jz-capsule__feature { position: relative; min-height: 380px; }
.jz-capsule__feature .jz-media { position: absolute; inset: 0; }
.jz-capsule__feature .jz-media--whole { position: static; }
.jz-capsule__shelf {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
}
.jz-capsule__tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-content: start;
}
.jz-capsule__actions { text-align: center; }
.jz-capsule .jz-shared-price { margin-top: 12px; }
@media (max-width: 798px) {
  .jz-capsule__grid { grid-template-columns: 1fr; gap: 24px; }
  .jz-capsule__feature { min-height: 0; }
  .jz-capsule__feature .jz-media { position: static; aspect-ratio: 1 / 1; }
  .jz-capsule__tiles { gap: 10px; }
  .jz-tile__meta { font-size: 12px; }
}