/* ==========================================================================
   shop.css — the Lydd & Yaffa storefront (/shop). Loaded by that page only.
   Extends site.css; defines no color of its own. Every value below is one of
   the Aurora Midnight tokens already declared in site.css :root, so the page
   follows the light/dark switch without a second palette.

   Two rules from Brand Guide v2 are enforced here structurally, not by hand:

   1. ONE coral element per view (§1, the single-accent rule). On this page it
      is .ly-rule, the short rule under the wordmark. Every button is demoted
      to a gold hairline, because the number of buttons on a storefront changes
      with the shop's state (one "tell me when it opens", or three "Reserve —",
      or three "Buy —") and a per-button coral would become two or three.
   2. Gold is a line and a figure, never a field (§1, §9). It appears here as
      hairlines, the meaning label, the numbers, and button borders.

   No green anywhere: the Zaytoun tie is green, and that green lives inside the
   image, never in the page's own furniture. (Never "the photograph" — there are
   no photographs of this product, and this file enforces the label that says so.)

   OWNERSHIP OF THE SHARED CARD RULES. site.css owns .shop-card, .shop-blurb and
   .shop-ship: it styles them for the home-page grid, and this file is loaded
   after it. Everything below that touches those three selectors overrides only
   what genuinely differs on /shop — do not restate a site.css declaration here,
   because equal specificity plus load order is a fragile way to say "the same".
   ========================================================================== */

/* ---------- Page frame ---------- */
.ly-shop{--section:clamp(3.5rem,8vw,6.5rem)}
.ly-shop .section-head{margin-block-end:2rem}
.nav-links a[aria-current="page"]{color:var(--fg)}
.nav-links a[aria-current="page"]::after{transform:scaleX(1)}

/* ---------- Masthead ---------- */
.ly-masthead{padding-block-start:clamp(2.5rem,6vw,4.5rem)}
.ly-masthead .ly-eyebrow{margin-block-end:.9rem}
.ly-masthead h1{font-size:clamp(2.6rem,2rem + 4.4vw,5.5rem);letter-spacing:-.02em}

/* THE one coral element on this page. Do not add a second. */
.ly-rule{
  display:block;inline-size:4.5rem;block-size:3px;border-radius:2px;
  background:var(--coral);margin-block:1.4rem 1.8rem;
}

.ly-lede{
  font-family:var(--font-display);font-weight:700;line-height:1.15;
  font-size:clamp(1.35rem,1.1rem + 1.1vw,2rem);
  max-inline-size:26ch;margin-block-end:1.4rem;text-wrap:balance;
}
.ly-intro{
  font-family:var(--font-prose);font-size:clamp(1.08rem,1rem + .35vw,1.3rem);
  line-height:1.65;max-inline-size:64ch;color:var(--fg);
}
.ly-names{
  font-size:.76rem;letter-spacing:.28em;color:var(--gold-text);
  margin-block-start:2rem;padding-block-start:1rem;
  border-block-start:1px solid var(--line-gold);
  max-inline-size:none;inline-size:fit-content;white-space:nowrap;
}

/* ---------- The collection ---------- */
/* site.css already styles .shop-grid / .shop-card for the home page. The
   storefront card is the same object with more room: a taller image, a blurb,
   and a price-and-action foot pinned to the bottom so three cards of unequal
   text still line up. */
.ly-grid{gap:clamp(1.25rem,2.5vw,2rem)}
@media (min-width:640px) and (max-width:899px){.ly-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.ly-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Flex column rather than the home page's grid: the number of children changes
   with the shop's state and with whether an image is publishable, and a flex
   column keeps the actions on a line across three cards of unequal text. */
.ly-shop .shop-card{
  display:flex;flex-direction:column;align-items:stretch;
  padding:clamp(1rem,2vw,1.5rem);
  gap:.55rem;
}
/* DORMANT while the grid is image-free. No card renders a <picture> today: every
   items[].alt in shop.json is empty and js/shop.js refuses to publish an image
   without alt text written for that image. These rules and the render tag below
   are kept intact so that restoring images is a data edit, not a CSS rewrite. */
.ly-shop .shop-card picture{position:relative;display:block;margin-block-end:.35rem}
.ly-shop .shop-card img{aspect-ratio:4/5;background:var(--night-floor)}

/* The render tag. It is tied to [data-shop-note]: js/shop.js hides that note the
   moment the images stop being renders, and the tag goes with it. Where :has()
   is unsupported the tag simply never appears — the failure direction is a
   missing duplicate label, never a render that reads as a photograph, because
   the alt text and the visible note carry the same statement. */
.ly-collection:has([data-shop-note]:not([hidden])) .shop-card picture::after{
  content:"AI render";
  position:absolute;inset-block-end:.6rem;inset-inline-end:.6rem;
  font-family:var(--font-label);font-weight:600;font-size:.6rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-text);background:rgba(17,10,34,.78);
  border:1px solid var(--line-gold);border-radius:999px;
  padding:.3rem .6rem;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
:root[data-scheme="light"] .ly-collection:has([data-shop-note]:not([hidden])) .shop-card picture::after{
  background:rgba(251,247,240,.86);
}

.ly-shop .shop-card h3{font-size:clamp(1.3rem,1.1rem + .7vw,1.6rem);margin-block-start:.1rem}
.ly-shop .shop-card .meaning{align-self:flex-start}
/* The blurb takes the slack, so the action sits on one line across the row.
   Overrides only: site.css already sets color, margin and measure. */
.ly-shop .shop-blurb{
  flex:1 1 auto;
  font-family:var(--font-prose);font-size:1.02rem;line-height:1.55;
}
/* The price travels inside the action label, written by js/shop.js from
   shop.json. Nothing here assumes a price exists. */
.ly-shop .shop-card .btn{align-self:flex-start;justify-self:start;margin-block-start:.8rem}
/* Overrides only: site.css sets the mono family, size and letter-spacing. On the
   storefront the ship expectation sits under a button and is gold, not muted —
   it is a disclosure, not a caption. */
.ly-shop .shop-ship{
  color:var(--gold-text);
  margin-block-start:.5rem;
}

/* Every button on this page is a gold hairline; see the coral note at the top. */
.ly-shop .btn-primary{
  background:transparent;color:var(--gold-text);
  border-color:var(--line-gold);box-shadow:none;
}
.ly-shop .btn-primary:hover{
  background:var(--gold);color:var(--ink-plum);
  border-color:var(--gold);box-shadow:none;
}
:root[data-scheme="light"] .ly-shop .btn-primary{color:var(--gold-deep);border-color:rgba(140,95,0,.5)}
:root[data-scheme="light"] .ly-shop .btn-primary:hover{background:var(--gold-deep);color:var(--ivory);border-color:var(--gold-deep)}

.ly-shop .shop-disclosure{
  font-family:var(--font-prose);font-size:1.05rem;line-height:1.6;
  max-inline-size:70ch;margin-block-end:1.75rem;
  padding-inline-start:1rem;border-inline-start:2px solid var(--line-gold);
}
.ly-shop .shop-disclosure[hidden]{display:none}
.ly-shop .shop-note{margin-block-start:1.1rem;font-size:.8rem}
.ly-shop .shop-note[hidden]{display:none}
.ly-shop .shop-actions{margin-block-start:1.6rem}
.ly-shop .shop-actions .fine{max-inline-size:52ch;font-size:.85rem}

/* Render disclosure. Set as a note of record, not an apology: gold hairline,
   label type, same measure as the rest of the page. */
.ly-render{
  margin-block-start:clamp(2.25rem,5vw,3.5rem);
  padding:clamp(1.1rem,2.5vw,1.6rem) clamp(1.1rem,2.5vw,1.75rem);
  border:1px solid var(--line);border-block-start:1px solid var(--line-gold);
  border-radius:var(--radius);background:var(--card);
  max-inline-size:74ch;
}
.ly-render h3{margin-block-end:.9rem}
.ly-render p{font-family:var(--font-prose);font-size:1.04rem;line-height:1.6;color:var(--fg-2);max-inline-size:none}
.ly-render p:last-child{margin-block-end:0}

/* ---------- The meaning ---------- */
/* Given room. One column, generous leading, a gold hairline at the head and
   nothing else in the section competing for the eye. */
.ly-meaning .wrap{max-inline-size:min(100% - 2*var(--gutter),58rem)}
.ly-quote{
  margin:2rem 0 0;padding-inline-start:clamp(1rem,3vw,2.25rem);
  border-inline-start:2px solid var(--line-gold);
}
.ly-quote p{
  font-family:var(--font-prose);font-weight:500;
  font-size:clamp(1.25rem,1.05rem + 1vw,1.75rem);
  line-height:1.62;max-inline-size:52ch;margin-block-end:1.1rem;
  text-wrap:pretty;
}
.ly-quote footer{
  font-family:var(--font-label);font-weight:600;font-size:.74rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2);
}
.ly-quote cite{font-style:normal}
.ly-quote-note{
  margin-block-start:1.75rem;font-size:.9rem;color:var(--fg-2);
  font-family:var(--font-label);letter-spacing:.02em;
}

/* ---------- Ordering ---------- */
.ly-terms{display:grid;gap:1px;margin:0;padding:0;background:var(--line);
  border:1px solid var(--line);border-block-start:1px solid var(--line-gold);
  border-radius:var(--radius);overflow:hidden}
@media (min-width:720px){.ly-terms{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ly-term{background:var(--glass);padding:clamp(1rem,2.2vw,1.5rem);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.ly-term dt{
  font-family:var(--font-label);font-weight:600;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text);
  margin-block-end:.55rem;
}
.ly-term dd{margin:0;font-family:var(--font-prose);font-size:1.04rem;line-height:1.55;color:var(--fg)}

.ly-policies{
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-block-start:1.6rem;
  max-inline-size:none;font-family:var(--font-label);font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;
}
.ly-policies a{
  text-decoration:none;color:var(--fg-2);
  border-block-end:1px solid var(--line-gold);
  padding-block:.5rem;min-block-size:44px;display:inline-flex;align-items:center;
}
.ly-policies a:hover{color:var(--fg);border-block-end-color:var(--gold)}

/* ---------- The seller ---------- */
/* The block Stripe underwriting looks for: legal name, address, a contact
   route, in one place, set as evidence rather than as small print. */
.ly-idcard{
  padding:clamp(1.25rem,3vw,2rem);
  border:1px solid var(--line);border-block-start:1px solid var(--line-gold);
  border-radius:var(--radius);background:var(--glass);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 var(--glass-edge);
  max-inline-size:64rem;
}
.ly-legal-name{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.5rem,1.2rem + 1.2vw,2.2rem);line-height:1.1;margin-block-end:.4rem;
}
.ly-legal-sub{color:var(--fg-2);margin-block-end:1.4rem}
.ly-address{
  font-family:var(--font-mono);font-size:.92rem;line-height:1.9;font-style:normal;
  color:var(--fg);padding-block:1.1rem;
  border-block:1px solid var(--line-gold);margin-block-end:1.4rem;
}
.ly-address a{color:var(--gold-text);text-decoration-color:var(--line-gold)}
.ly-seller-note{font-family:var(--font-prose);font-size:1.05rem;line-height:1.6;color:var(--fg-2);max-inline-size:66ch}
.ly-seller-note:last-child{margin-block-end:0}

/* ---------- Footer identity line ---------- */
.ly-shop ~ .footer .licensing a{color:var(--fg-2);text-decoration-color:var(--line-gold)}
.ly-shop ~ .footer .licensing a:hover{color:var(--fg)}

/* ---------- Focus ---------- */
/* site.css already draws a 2px cyan ring on :focus-visible. These two keep it
   from being clipped by the card and the pill. */
.ly-shop .shop-card a:focus-visible,
.ly-policies a:focus-visible,
.ly-address a:focus-visible{outline-offset:4px}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion:reduce){
  .ly-shop .shop-card{transition:none}
  .ly-shop .shop-card:hover{transform:none}
}