/*
---
name: components.css
description: Cards, hero, buttons, cart, lightbox — catalog-style.
version: 0.2
date: 2026-05-17
---
*/

/* === Landing page (index.html) — mockup layout ============================ */

/* Hero — two column (copy + model photo).
   Jerry 2026-08-13, TWO CHANGES, both reversing earlier calls:

   (1) BEIGE, not the band brown. The hero now carries the page background so it
   joins the beige section beneath it rather than extending the header band. The
   earlier brown was sampled from the hero photo's own studio backdrop so that
   the `contain` letterboxing would vanish into it; that trick is deliberately
   given up here. The photo's backdrop is a warm grey-brown, so on beige the
   image reads as a distinct rectangle with visible edges. That is the accepted
   cost of matching the section below -- do not "fix" it by reintroducing brown.

   (2) ONE HEIGHT AT EVERY WIDTH. Was 420-520px wide / 340-420 mid / 300-360
   narrow; the wide tier made the top of the laptop view too tall, driven by the
   contain-fitted portrait. The narrow tier's 300-360 is now the only height, so
   the band no longer grows with the viewport. Supersedes the 2026-08-10 call to
   make the model shot bigger by deepening the band.

   Text is inked for a LIGHT background now -- no inversion overrides. */
.lp-hero {
  display: grid; grid-template-columns: 1fr 1.25fr; align-items: stretch;
  background: var(--bg);
  color: var(--ink);
  min-height: 300px; max-height: var(--hero-model-h);
}
.lp-hero-copy {
  padding: 20px 5vw;
  display: flex; flex-direction: column; justify-content: center;
  max-width: 620px;
}
.lp-hero-copy .eyebrow { color: var(--teal); }
.lp-hero-copy h1 {
  font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 400; line-height: 1.12;
  margin: 0 0 10px; letter-spacing: -0.01em;
}
.lp-hero-copy h1 { color: var(--ink); }
.lp-hero-copy h1 em { font-style: italic; color: var(--brass); }
.lp-hero-copy p { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.5; max-width: 440px; margin-bottom: 0; }
/* No button overrides here on purpose: the global .btn--solid / .btn--ghost are
   already inked for a light background, and the inverted cream-on-brown pair
   this block used to carry would now be invisible. */
.lp-hero-visual { position: relative; overflow: hidden; background: var(--bg); }
/* SCALE, don't crop: the photo is a 1400x1830 portrait dropped into a short
   landscape cell, so `cover` would slice out a band across her chest and lose
   the face. `contain` fits the whole frame and letterboxes — and because the
   band colour was sampled from this photo's own backdrop, the letterboxing is
   very nearly invisible. */
.lp-hero-visual .hero-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
}
/* The hero copy and the model shot stay on ONE row at every width and
   orientation — it never stacks. Narrow viewports shrink the TYPE and PADDING;
   the height no longer changes. The min-height/max-height that used to live in
   these two blocks was removed 2026-08-13 when 300-360 became the single height
   for every width -- leaving the 860px tier's 340-420 in place would have made
   mid-width screens TALLER than the laptop view it was meant to shorten. */
@media (max-width: 860px) {
  .lp-hero { grid-template-columns: 1fr 1.1fr; }
  .lp-hero-copy { padding: 16px 5vw; }
  .lp-hero-copy h1 { font-size: clamp(1.1rem, 3.2vw, 1.5rem); margin-bottom: 8px; }
  .lp-hero-copy p { font-size: 0.78rem; }
}
@media (max-width: 700px) {
  .lp-hero-copy { padding: 12px 5vw; }
  .lp-hero-copy p { font-size: 0.72rem; line-height: 1.4; }
}

/* Section head */
.lp-section { padding: var(--space-12) 5vw; }
/* Jerry 2026-08-13: tighten the gap between the model shot and the three
   category tiles. Scoped to the section IMMEDIATELY after the hero rather than
   changed on .lp-section or --space-12 -- both of those set the rhythm for every
   other landing section (and --space-12 is used site-wide), so editing either to
   fix one seam would quietly compress the whole page. Now that the hero is beige
   too, the two areas read as one field and the old 48px reads as a hole. */
.lp-hero + .lp-section { padding-top: 1.25rem; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 40px; flex-wrap: wrap; gap: 20px; }
.section-head h2 { font-size: var(--fs-h2); font-weight: 400; border: none; margin: 0; padding: 0; }
.section-head p { color: var(--ink-soft); max-width: 400px; font-size: 0.9rem; margin: 0; }

/* Category grid — 3 tiles with subcategory pills (Collections dropped
   2026-07-28: it was a "coming soon" placeholder occupying prime landing
   real estate; it remains in the top nav). */
.lp-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
/* BASE tile — TITLE, then IMAGE, then text / pills / link. This is the site-wide
   box order (the .card product tiles in site.js follow it too). Shared by
   about.html, art/index.html and products/index.html, which all reuse .lp-cat.
   Do not strip members of this block for a landing-page-only change; scope the
   change to .lp-cat-grid--titles below instead. */
.lp-cat { background: var(--bg); padding: 18px 18px 24px; display: flex; flex-direction: column; text-decoration: none; color: var(--ink); transition: background var(--dur); }
.lp-cat:hover { background: var(--bg-alt); text-decoration: none; }
.lp-cat h3 { font-family: var(--font-display); font-weight: 500; font-size: 1rem; text-align: center; margin: 0 0 12px; }
.lp-cat .ph { aspect-ratio: 1/1; margin-bottom: 14px; overflow: hidden; background: var(--bg-alt); }
.lp-cat .ph img { width: 100%; height: 100%; object-fit: cover; }
/* A cut-out tile shows a PRODUCT, and `cover` crops a product -- on a 4:3 box it
   was slicing the ends off the piece. `contain` fits the whole thing. Black
   because that is how every other cut-out on this site is presented: on cream or
   beige the metal and the page fight each other and the shell goes dull. */
.lp-cat .ph--cutout { background: #0d0d0f; }
.lp-cat .ph--cutout img { object-fit: contain; padding: 8%; }
.lp-cat .desc { font-size: 0.8rem; color: var(--ink-soft); line-height: 1.4; margin-bottom: 12px; }
.subcats { display: flex; flex-wrap: wrap; gap: 6px; flex-grow: 1; align-content: flex-start; margin-bottom: 14px; }
.subcats span { font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); background: var(--bg-alt); border: 1px solid var(--line); padding: 3px 9px; border-radius: 999px; }
.lp-cat .link { font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); border-bottom: 1px solid var(--teal); width: fit-content; padding-bottom: 2px; }

/* LANDING variant — title ABOVE the image and nothing below it. The tile is
   already an <a>, so title and image are one click target. */
.lp-cat-grid--titles .lp-cat { padding: 18px 18px 20px; }
.lp-cat-grid--titles .lp-cat h3 {
  font-size: 1.15rem; letter-spacing: 0.04em; text-transform: uppercase;
  text-align: center; margin: 0 0 14px;
}
/* Jerry's call 2026-08-10: the three category images were competing with the
   hero. Scoped to --titles so about.html, art/ and products/ keep the square
   tile they were designed around. */
.lp-cat-grid--titles .lp-cat .ph {
  margin-bottom: 0;
  aspect-ratio: 4 / 3;
  max-width: 240px;
  margin-inline: auto;
  width: 100%;
}
/* Lorayne's call: the categories stay in ONE horizontal row at every width —
   they never reflow to 2-up or 1-up. Narrow viewports shrink the tile padding
   and title; the image keeps its square and simply gets smaller. Only the
   title and image remain, so there is nothing left to shed. */
@media (max-width: 900px) {
  .lp-section { padding: var(--space-8) 3vw; }
  .lp-cat { padding: 16px 12px 20px; }
  .lp-cat h3 { font-size: 0.9rem; }
  .lp-cat .desc { font-size: 0.72rem; margin-bottom: 10px; }
  .subcats { gap: 4px; margin-bottom: 10px; }
  .subcats span { font-size: 0.56rem; padding: 2px 7px; }
  .lp-cat .link { font-size: 0.6rem; }
  .lp-cat-grid--titles .lp-cat { padding: 14px 12px 16px; }
  .lp-cat-grid--titles .lp-cat h3 { font-size: 0.95rem; margin-bottom: 10px; }
}
@media (max-width: 620px) {
  .lp-section { padding: var(--space-6) 2vw; }
  .lp-cat { padding: 12px 8px 16px; }
  .lp-cat h3 { font-size: 0.8rem; margin-bottom: 4px; }
  .subcats { display: none; }
  .lp-cat .desc { font-size: 0.66rem; line-height: 1.35; }
  .lp-cat-grid--titles .lp-cat { padding: 10px 8px 12px; }
  .lp-cat-grid--titles .lp-cat h3 { font-size: 0.78rem; letter-spacing: 0.02em; margin-bottom: 7px; }
}
@media (max-width: 460px) {
  .lp-cat .desc { display: none; }
  .lp-cat .link { font-size: 0.55rem; letter-spacing: 0.04em; }
  .lp-cat-grid--titles .lp-cat h3 { font-size: 0.66rem; letter-spacing: 0; margin-bottom: 5px; }
}

/* Collection showcase — three panels, middle dark */
.showcase { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 1px; background: var(--line); }
.showcase .panel { background: var(--bg); padding: 38px 30px; display: flex; flex-direction: column; }
.showcase .panel.dark { background: var(--teal-deep); color: var(--bg-alt); }
.showcase .panel.dark .eyebrow { color: var(--teal-bright); }
.showcase .panel .ph { margin-bottom: 22px; aspect-ratio: 1/1; overflow: hidden; background: var(--bg-alt); }
.showcase .panel .ph img { width: 100%; height: 100%; object-fit: cover; }
.showcase .panel h3 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 400; margin: 8px 0 10px; color: inherit; }
.showcase .panel p { font-size: 0.85rem; line-height: 1.55; opacity: 0.82; margin-bottom: 20px; }
.showcase .panel .link { margin-top: auto; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); border-bottom: 1px solid var(--teal); width: fit-content; padding-bottom: 2px; }
.showcase .panel.dark .link { color: var(--teal-bright); border-color: var(--teal-bright); }
/* Never reflows — three panels stay side by side, shrinking instead. */
@media (max-width: 900px) {
  .showcase .panel { padding: 22px 16px; }
  .showcase .panel .ph { margin-bottom: 14px; }
  .showcase .panel h3 { font-size: 1.05rem; margin: 6px 0 8px; }
  .showcase .panel p { font-size: 0.75rem; line-height: 1.45; margin-bottom: 14px; }
  .showcase .panel .link { font-size: 0.62rem; }
}
@media (max-width: 620px) {
  .showcase .panel { padding: 14px 10px; }
  .showcase .panel h3 { font-size: 0.9rem; }
  .showcase .panel p { display: none; }
  .showcase .panel .link { font-size: 0.56rem; letter-spacing: 0.04em; }
}

/* Values strip */
.values { background: var(--bg-alt); padding: 56px 5vw; display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; text-align: center; }
.value h4 { font-family: var(--font-display); font-size: 0.85rem; font-weight: 500; margin: 12px 0 8px; }
.value p { font-size: 0.78rem; color: var(--ink-soft); line-height: 1.4; margin: 0; }
.value svg { width: 26px; height: 26px; margin: 0 auto; stroke: var(--teal-deep); fill: none; }
/* Never reflows — all five values stay on one row, shrinking instead. */
@media (max-width: 900px) {
  .values { padding: 40px 3vw; gap: 14px; }
  .value h4 { font-size: 0.75rem; margin: 10px 0 6px; }
  .value p { font-size: 0.68rem; line-height: 1.35; }
  .value svg { width: 22px; height: 22px; }
}
@media (max-width: 620px) {
  .values { padding: 28px 2vw; gap: 8px; }
  .value h4 { font-size: 0.66rem; margin: 8px 0 0; }
  .value p { display: none; }
  .value svg { width: 20px; height: 20px; }
}

/* Story band */
/* A compact closing band, not a full section — target height ~300px. Like the
   other landing bands it stays 2-up at every width and shrinks rather than
   stacking, so it never reflows out from under the fold. */
.story {
  background: var(--teal-deep); color: var(--bg-alt);
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 300px; max-height: 340px;
}
.story-copy { padding: 24px 5vw; display: flex; flex-direction: column; justify-content: center; }
.story-copy .eyebrow { color: var(--teal-bright); }
/* Type here is deliberately identical to the hero band's — same clamp, same
   line-height, same body size — so the two bands that bracket the page read as
   a matched pair. Change one and change the other. */
.story-copy h2 { font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 400; margin: 0 0 10px; line-height: 1.12; border: none; padding: 0; color: var(--bg-alt); }
.story-copy p { max-width: 440px; opacity: 0.85; line-height: 1.5; margin-bottom: 16px; font-size: 0.85rem; }
/* Ghost on the teal band: transparent body, visible border, cream label. The
   global .btn--ghost is inked for a LIGHT background, so it needs inverting
   here the same way the hero's does. */
.story-copy .btn { font-size: 0.72rem; padding: 0.45rem 0.95rem; align-self: flex-start; }
.story-copy .btn--ghost {
  background: transparent;
  color: var(--bg-alt);
  border-color: rgba(243,238,228,0.55);
}
.story-copy .btn--ghost:hover {
  background: var(--bg-alt);
  color: var(--teal-deep);
  border-color: var(--bg-alt);
}
/* The story cell pairs the two halves of the business side by side: an original
   painting, and a finished piece drawn from the same botanical vocabulary. The
   lotus is a cut-out PNG, so it sits directly on the teal band with no frame —
   the painting is the only rectangle, which keeps the pair from reading as two
   competing photos. The painting is deliberately the smaller of the two. */
.story-pair {
  display: flex; align-items: center; justify-content: center;
  gap: 5%; padding: 22px 5% ; overflow: hidden;
}
.story-art, .story-piece { margin: 0; display: flex; align-items: center; }
/* Both images share one height cap so the pair sits on a common baseline; their
   aspect ratios differ, so equal height still means unequal width. */
.story-art img,
.story-piece img {
  max-height: 190px; max-width: 100%; width: auto; height: auto;
  object-fit: contain;
}
.story-piece img { filter: drop-shadow(0 10px 20px rgba(0,0,0,0.42)); }
/* Shrink tiers mirror the hero's exactly — see .lp-hero-copy above. If one set
   changes, change the other or the two bands stop matching. */
@media (max-width: 860px) {
  .story-copy { padding: 16px 5vw; }
  .story-copy h2 { font-size: clamp(1.1rem, 3.2vw, 1.5rem); margin-bottom: 8px; }
  .story-copy p { font-size: 0.78rem; }
}
@media (max-width: 700px) {
  .story { min-height: 240px; }
  .story-copy { padding: 12px 5vw; }
  .story-copy p { font-size: 0.72rem; line-height: 1.4; }
}

/* Newsletter + social (footer) */
.newsletter-row { display: flex; max-width: 340px; border: 1px solid var(--ink); }
.newsletter-row input { flex-grow: 1; border: none; background: transparent; padding: 11px 13px; font-size: 0.85rem; font-family: inherit; color: var(--ink); }
.newsletter-row button { background: var(--teal-deep); color: #fff; border: none; padding: 0 18px; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.social-row { display: flex; gap: 12px; margin-top: 16px; }
.social-row a { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; color: var(--ink-soft); }
.social-row a:hover { border-color: var(--teal); color: var(--teal); text-decoration: none; }

/* === Buttons === */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--teal-deep);
  background: #ffffff;
  color: var(--teal-deep);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--dur) var(--ease);
}
.btn:hover { background: var(--teal-deep); color: #fff; text-decoration: none; }
.btn--solid {
  background: var(--teal-deep); color: var(--band-ink); border-color: var(--teal-deep);
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; padding: 0.85rem 1.5rem;
}
.btn--solid:hover { background: var(--teal); border-color: var(--teal); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--bg); }

/* === Category cards (homepage + jewelry landing) === */
.cat-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-6);
  display: block;
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--dur), transform var(--dur);
}
.cat-card:hover { border-color: var(--turquoise); transform: translateY(-2px); text-decoration: none; }
.cat-card h3 { margin-top: 0; }
.cat-card p { color: var(--mute); margin: 0; }
.cat-card-img {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: var(--space-3);
}

/* === Product card === */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--dur);
}
.card:hover { border-color: var(--turquoise); }
.card a.image-link {
  display: block;
  background: var(--turquoise-pale);
  text-decoration: none;
}
.card a.image-link:hover { text-decoration: none; }
.card img {
  width: 100%;
  height: auto;
  display: block;
}
.card .placeholder {
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mute);
  font-size: 0.85rem;
  background: var(--bg-alt);
  padding: 1rem;
  text-align: center;
}
.card .body { padding: 0.55rem 0.75rem; font-size: 0.9rem; }
/* Title sits ABOVE the image now, so it carries its own padding rather than
   inheriting .body's. Centred to match the .lp-cat tiles. */
.card .name {
  font-weight: 600; color: var(--ink);
  padding: 0.55rem 0.75rem 0.5rem;
  text-align: center;
  line-height: 1.25;
}
.card .name a { color: inherit; text-decoration: none; }
.card .name a:hover { color: var(--turquoise-dark); }
.card .material { color: var(--mute); font-size: 0.85rem; }
.card .price { color: var(--turquoise-dark); font-weight: 600; }
.card .price-strike { color: var(--mute); text-decoration: line-through; margin-right: .4rem; font-weight: normal; }
.card .price-row { display:flex; align-items:center; justify-content: space-between; margin-top: 0.4rem; gap: 0.5rem; }
.card .btn { padding: 0.2rem 0.6rem; font-size: 0.82rem; }

/* === Toolbar (sort/filter) === */
.toolbar {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-4) 0;
}
.toolbar select {
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: var(--radius-sm);
}

/* === Design group (by-design page) === */
.design-group { margin-bottom: var(--space-8); }
.design-group h3 .virtue { font-weight: normal; font-style: italic; color: var(--mute); }
.design-group .gemstones { color: var(--mute); font-size: 0.9rem; margin: -0.25rem 0 0.5rem; }
.design-group .story {
  font-size: 0.95rem;
  max-width: 60ch;
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--turquoise-pale);
  border-left: 3px solid var(--turquoise);
  border-radius: 3px;
}

/* === Section nav (between flag strings) === */
.section-nav {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin: var(--space-6) 0;
  padding: 0.5rem 0.75rem;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 0.95rem;
}

/* === Product detail === */
.detail {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  margin-top: var(--space-6);
}
@media (min-width: 760px) {
  .detail { grid-template-columns: 1.1fr 1fr; }
}
.detail__hero {
  background: var(--turquoise-pale);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  padding: var(--space-4);
}
.detail__hero img { width: 100%; height: auto; cursor: zoom-in; }
.detail__hero .placeholder {
  height: 280px;
  display: flex; align-items: center; justify-content: center;
  color: var(--mute);
}
.detail__thumbs { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.5rem; }
.detail__thumb {
  width: 64px; height: 64px; padding: 3px;
  background: #fff; border: 1px solid var(--line); border-radius: 4px;
  cursor: pointer; overflow: hidden;
}
.detail__thumb img { width: 100%; height: 100%; object-fit: cover; }
.detail__thumb.is-active { border-color: var(--turquoise-dark); }

.detail__price {
  font-family: var(--font-display);
  color: var(--turquoise-dark);
  font-size: 1.6rem;
  margin: var(--space-3) 0;
}
.detail__price-strike { color: var(--mute); text-decoration: line-through; font-size: 1.1rem; margin-right: 0.5rem; }
.detail__virtue { color: var(--mute); font-style: italic; margin-top: -0.5rem; margin-bottom: var(--space-3); }
.detail__meta { color: var(--mute); font-size: 0.9rem; }
.detail__story {
  background: var(--turquoise-pale);
  border-left: 3px solid var(--turquoise);
  padding: 0.6rem 0.9rem;
  border-radius: 3px;
  margin: var(--space-4) 0;
  max-width: 60ch;
}
.detail__cross-sell {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

/* === Toast === */
.toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--turquoise-dark);
  color: #fff;
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  transition: opacity var(--dur), transform var(--dur);
  z-index: 100;
  font-size: 0.9rem;
  pointer-events: none;
}
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* === Cart drawer === */
.cart-drawer {
  position: fixed; top: 0; right: 0;
  width: min(380px, 90vw); height: 100vh;
  background: #fff;
  border-left: 1px solid var(--line);
  box-shadow: -4px 0 18px rgba(0,0,0,0.07);
  transform: translateX(100%);
  transition: transform var(--dur);
  z-index: 90;
  display: flex; flex-direction: column;
}
.cart-drawer.is-open { transform: translateX(0); }
.cart-drawer__header {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-4) var(--space-6);
  background: var(--turquoise-dark);
  color: #fff;
}
.cart-drawer__header h3 { color: #fff; margin: 0; font-family: var(--font-display); }
.cart-drawer__close {
  background: none; border: none; color: #fff;
  font-size: 1.6rem; cursor: pointer; line-height: 1;
}
.cart-drawer__body { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-6); }
.cart-drawer__empty { text-align: center; color: var(--mute); padding: var(--space-12) 0; }
.cart-overlay {
  position: fixed; inset: 0;
  background: rgba(11,32,37,0.45);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur);
  z-index: 80;
}
.cart-overlay.is-visible { opacity: 1; pointer-events: auto; }

/* === Lightbox === */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(11,32,37,0.92);
  display: none;
  align-items: center; justify-content: center;
  padding: var(--space-6);
  z-index: 200;
  cursor: zoom-out;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* === Wholesale === */
.wholesale-form {
  max-width: 420px;
  margin: var(--space-8) auto;
  padding: var(--space-6);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.wholesale-form label { display: block; margin: var(--space-3) 0 0.25rem; font-size: 0.9rem; color: var(--mute); }
.wholesale-form input {
  width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1rem;
}
.wholesale-form input:focus { outline: 2px solid var(--turquoise-pale); border-color: var(--turquoise); }
.wholesale-form .btn { margin-top: var(--space-4); width: 100%; }
.wholesale-form__error { color: #b14444; font-size: 0.9rem; margin-top: 0.5rem; }
.wholesale-banner {
  background: var(--turquoise);
  color: #fff;
  text-align: center;
  padding: 0.4rem;
  font-size: 0.9rem;
}

/* === Need-asset placeholder === */
.need-asset {
  background: repeating-linear-gradient(45deg, #f7f9fa, #f7f9fa 10px, var(--turquoise-pale) 10px, var(--turquoise-pale) 20px);
  border: 2px dashed var(--turquoise);
  color: var(--turquoise-dark);
  font-size: 0.95rem;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-6); text-align: center;
  min-height: 140px;
  border-radius: var(--radius);
}

/* === Featured row on home === */
.featured-row { margin-top: var(--space-8); }

/* === Original Art gallery === */
.art-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0;
}
.art-tile {
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--dur), transform var(--dur);
}
.art-tile:hover { border-color: var(--turquoise); transform: translateY(-2px); }
.art-tile a { display: block; }
/* Artwork is never cropped: `contain` letterboxes odd aspect ratios (tall
   mermaids, panoramic beaches) instead of slicing the composition. */
.art-tile img {
  width: 100%; height: 240px;
  object-fit: contain;
  background: var(--cream-deep, #f3ece1);
  cursor: zoom-in;
}

/* Original art: division sections + titled tiles (work-oriented art data) */
.art-division { margin-bottom: 2.5rem; }
.art-division > h2 {
  font-family: 'Shrikhand', cursive;
  color: var(--turquoise-deep, var(--turquoise));
  font-size: 1.25rem;
  margin: 0 0 .9rem;
  padding-bottom: .35rem;
  border-bottom: 2px solid var(--turquoise);
}
.art-tile figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  padding: .55rem .7rem;
}
.art-tile__title { font-weight: 600; }
.art-tile__price { color: var(--turquoise-deep, var(--turquoise)); white-space: nowrap; }
.art-tile .placeholder {
  height: 240px; display: flex; align-items: center; justify-content: center;
  font-size: .85rem; opacity: .6;
}

/* Collections: coming-soon theme list */
.collection-preview { margin-top: var(--space-6); }
.collection-preview > h2 {
  font-family: 'Shrikhand', cursive;
  color: var(--turquoise-deep, var(--turquoise));
  font-size: 1.15rem;
  margin: 0 0 .9rem;
}
.collection-list { margin: 0; }
.collection-list dt {
  font-weight: 600;
  color: var(--turquoise-deep, var(--turquoise));
  margin-top: 1rem;
}
.collection-list dd {
  margin: .25rem 0 0;
  padding-left: 0;
  max-width: 62ch;
}

/* Flag string detail: the full string, then its seven flags (not linked --
   a string is one $30 set, there is no per-flag product) */
.string-full { margin: 0 0 2rem; }
.string-full img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--turquoise); border-radius: 4px; cursor: zoom-in;
}
.string-full figcaption {
  margin-top: .5rem; text-align: center; font-size: .95rem;
}
.flag-rows { display: flex; flex-direction: column; gap: 1.75rem; }
.flag-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 1.25rem;
  align-items: start;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--line, #e2dacd);
}
.flag-row:last-child { border-bottom: none; padding-bottom: 0; }
.flag-row img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: contain;
  background: var(--cream-deep, #f3ece1);
  border: 1px solid var(--line, #e2dacd); border-radius: 4px;
  cursor: zoom-in;
  transition: border-color var(--dur, .2s);
}
.flag-row img:hover { border-color: var(--teal, #2e7d74); }
.flag-row__text h3 {
  font-family: 'Shrikhand', cursive;
  color: var(--teal-deep, #2e7d74);
  font-size: 1.1rem; margin: 0 0 .5rem;
}
.flag-row__text p { margin: 0; line-height: 1.6; max-width: 60ch; }
@media (max-width: 560px) {
  .flag-row { grid-template-columns: 1fr; }
  .flag-row img { max-width: 220px; }
}

/* Care guide list */
.care-list { margin: 0 0 1.25rem; padding-left: 1.1rem; max-width: 62ch; }
.care-list li { margin-bottom: .6rem; line-height: 1.55; }

/* Products: line cards showing the full range at a glance */
.line-cards { margin-top: var(--space-12, 3rem); }
.line-cards > h2 {
  font-family: 'Shrikhand', cursive;
  color: var(--teal-deep, #2e7d74);
  font-size: 1.15rem; margin: 0 0 1rem;
}
.line-cards figure { margin: 0 0 2rem; }
.line-cards img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line, #e2dacd); border-radius: 4px;
}
.line-cards figcaption {
  margin-top: .5rem; font-size: .9rem; color: var(--ink-soft, #6b6355);
}

/* Flag chart: all three strings at a glance, above the string cards */
.flag-chart { margin: 0 0 var(--space-6, 1.5rem); }
.flag-chart img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line, #e2dacd); border-radius: 4px;
}

/* Category tile that must show the whole image (charts, line art) rather
   than fill the square. Opt-in so the photo tiles keep their edge-to-edge crop. */
.lp-cat .ph--contain { display: flex; align-items: center; justify-content: center; }
.lp-cat .ph--contain img { width: 100%; height: auto; max-height: 100%; object-fit: contain; }

/* === Site footer =========================================================
   Two candidate bottom banners shown together so Lorayne can point at one.
   Both sit on brown and use the light wordmark (white "Lorayne" + gold
   "Designs"), which is the only one of the two logo files legible on a dark
   band -- the other is black-on-white and is kept for light backgrounds.
   Once she picks, the winner moves into renderFooter() in site.js and this
   block plus the option labels come out.                                    */

.ld-footer { padding: 40px 5vw 0; }
.ld-footer a { color: inherit; text-decoration: none; }
.ld-footer a:hover { text-decoration: underline; }
.ld-footer h5 {
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  margin: 0 0 12px; font-weight: 500;
}
.ld-footer .logo-mark { max-width: 260px; width: 100%; height: auto; display: block; }
.ld-footer .legal {
  margin-top: 28px; padding: 16px 0 22px;
  font-size: 0.72rem; letter-spacing: 0.03em;
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.ld-footer .sub-row { display: flex; max-width: 330px; }
.ld-footer .sub-row input {
  flex-grow: 1; border: none; padding: 10px 12px; font-size: 0.82rem;
  font-family: inherit; background: rgba(255,255,255,0.93); color: var(--ink);
}
.ld-footer .sub-row button {
  border: none; padding: 0 16px; cursor: pointer;
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--teal); color: #fff; font-family: inherit;
}
.ld-footer .socials { display: flex; gap: 10px; }
.ld-footer .socials a {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.74rem; border: 1px solid currentColor; opacity: 0.85;
}
.ld-footer .socials a:hover { opacity: 1; text-decoration: none; }

.ld-footer { background: var(--band-bg-deep); color: #EFE7DA; }
.ld-footer h5 { color: var(--band-gold); }
.ld-footer .cols {
  display: grid; grid-template-columns: 1.3fr 0.9fr 1fr;
  gap: 5%; align-items: start;
}
.ld-footer p { font-size: 0.8rem; line-height: 1.55; opacity: 0.82; margin: 0 0 14px; max-width: 300px; }
.ld-footer .brandcell { display: flex; justify-content: flex-end; align-items: center; }
.ld-footer .legal {
  border-top: 1px solid rgba(239,231,218,0.18);
  justify-content: center; text-align: center; opacity: 0.72;
}


/* ===================================================================
   Design page (jewelry/design.html) — the Style D layout on the site.
   Hero of the piece worn, then a stage: one large photograph with
   thumbnails grouped by piece and metal that swap it.
   =================================================================== */
.design-hero{display:grid;gap:1.5rem;grid-template-columns:1fr;align-items:center;margin-bottom:2rem}
@media (min-width:820px){.design-hero{grid-template-columns:1fr 1fr}}
.design-hero h1{margin:0 0 .4rem}
.design-hero__fig{margin:0;border-radius:4px;overflow:hidden;background:#000}
.design-hero__fig img{width:100%;height:clamp(280px,40vh,460px);object-fit:cover;display:block}
.virtue-line{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
             color:var(--turquoise-dark);margin:0 0 .6rem;font-weight:600}

.design-stage{display:grid;gap:1.2rem;grid-template-columns:1fr}
@media (min-width:900px){.design-stage{grid-template-columns:1.3fr 1fr;align-items:start}}
.design-big{margin:0;background:#000;border-radius:4px;overflow:hidden;position:relative}
.design-big img{width:100%;height:clamp(300px,44vw,520px);object-fit:contain;display:block;background:#000}
.design-big figcaption{position:absolute;left:0;right:0;bottom:0;padding:.5rem .75rem;
  background:linear-gradient(0deg,rgba(0,0,0,.72),transparent);color:#fff;font-size:.8rem}

.design-thumbs{display:grid;gap:.9rem}
/* Many photographs -> one horizontal strip. The scrollbar stays visible on
   purpose; hiding it hides that there is more to see. */
.design-thumbs.is-scroller{display:flex;gap:1.1rem;overflow-x:auto;overflow-y:hidden;
  padding-bottom:.5rem;scroll-snap-type:x proximity}
.design-thumbs.is-scroller .tgroup{flex:0 0 auto;scroll-snap-align:start}
.design-thumbs.is-scroller .trow{flex-wrap:nowrap}
.tgroup h3{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
           color:var(--turquoise-dark);margin:0 0 .35rem;font-weight:600}
.trow{display:flex;flex-wrap:wrap;gap:.4rem}
.trow button{padding:0;border:1px solid var(--line);background:#000;border-radius:3px;
  cursor:pointer;width:72px;height:72px;overflow:hidden;line-height:0}
.trow button img{width:100%;height:100%;object-fit:contain;display:block}
.trow button[aria-pressed="true"]{outline:2px solid var(--turquoise-dark);outline-offset:1px}

/* Gaps in her material, shown rather than papered over. */
.ask{border:1px dashed var(--line);background:rgba(0,0,0,.03);border-radius:4px;
     padding:.7rem .85rem;font-size:.82rem;margin:0 0 1rem}
.ask b{display:block;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.2rem}

.plain{list-style:none;margin:0 0 1.2rem;padding:0}
.plain li{padding:.35rem 0;border-bottom:1px solid var(--line)}
.design-card .virtue{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
                     color:var(--turquoise-dark);font-weight:600;margin-bottom:.2rem}