/* ==========================================================================
   Premium layer — "quiet luxury", loaded after style.css on every page except the Apple product pages
   (they keep apple.css). Black Friday's stylesheet loads after this one, so in November its black-and-gold
   accents win where both style the same thing.

   - Warm porcelain pages with a faint paper grain; champagne hairlines instead of grey ones.
   - Product photos in a lit "studio": a soft radial backdrop, the photo's white background blended away
     (mix-blend-mode: multiply), a slow zoom and a gentle lift on hover.
   - Finer type: small-caps labels, aligned figures for prices, champagne italics in headings.
   - Dark buttons that fill with champagne foil on hover (coral is kept for sale prices only).
   ========================================================================== */

:root {
  --paper: #FAF8F4;          /* porcelain */
  --stone: #F3EFE7;
  --stone-2: #E9E3D7;
  --line: #ECE6DA;
  --line-2: #DDD4C3;
  --champagne: #B8935A;
  --champagne-deep: #8A6A35;  /* text on porcelain: 5:1 */
  --foil: linear-gradient(120deg, #A88247 0%, #E6CC95 45%, #B8935A 70%, #EAD7AE 100%);
  --studio: radial-gradient(120% 95% at 50% 18%, #FFFFFF 0%, #F6F2EB 55%, #ECE5D8 100%);
  --lift: 0 1px 1px rgba(60, 42, 12, .04), 0 26px 48px -28px rgba(60, 42, 12, .32);
  --shadow: 0 1px 2px rgba(60, 42, 12, .05), 0 14px 34px -14px rgba(60, 42, 12, .16);
}

/* Paper: porcelain with a very faint grain (an inline SVG noise tile, no extra request) */
body {
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .15 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection { background: #141414; color: #EAD7AE; }
:focus-visible { outline-color: var(--champagne); }

/* ---------- Header and announcement ---------- */
.header { background: rgba(250, 248, 244, .84); }
.header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(184, 147, 90, .7) 22%, #E6CC95 50%, rgba(184, 147, 90, .7) 78%, transparent);
}
.header.is-scrolled { border-color: transparent; box-shadow: 0 12px 30px -24px rgba(60, 42, 12, .35); }
.announce { background: #121110; color: #D9CCB4; }
.announce .dot { background: var(--champagne); }

/* ---------- Type ---------- */
.section__title em, .page-title em, .hero__title em, .footer__title em { color: var(--champagne-deep); }
.section--ink .section__title em, .lpp .section__title em { color: #E6CC95; }
.eyebrow { letter-spacing: .2em; }
.card__price, .pdp__price, .price-table, .lpp-box__plans, .summary { font-variant-numeric: tabular-nums; }

/* ---------- Buttons: ink, filling with champagne foil ---------- */
.btn:not(.btn--ghost):not(.btn--light):not(.btn--wa) { --bg: #141414; --bd: #141414; --hover-bg: var(--foil); --hover-fg: #141414; }
@media (hover: hover) { .btn:not(.btn--ghost):not(.btn--light):not(.btn--wa):hover { border-color: var(--champagne); } }
.btn--ghost { --bd: var(--line-2); }
@media (hover: hover) { .btn--ghost:hover { border-color: #141414; } }
.chip { border-color: var(--line-2); transition: border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast); }
@media (hover: hover) { .chip:not(.is-active):hover { border-color: var(--champagne); color: var(--ink); } }
.chip.is-active { background: #141414; border-color: #141414; }
.chip-icon { background: #141414; color: #E6CC95; }

/* ---------- The studio: product photos on a lit backdrop ---------- */
.card__media, .cat__media, .editorial__media, .lpp-hero__media, .pdp__frame { background: var(--studio); }
.section--stone .card__media { background: radial-gradient(120% 95% at 50% 18%, #FFFFFF 0%, #FCFAF6 60%, #F5F0E7 100%); } /* a brighter studio on the stone bands */
.hero__img, .card__media img, .cat__media img, .lpp-hero__media img, .pdp__frame img, .pdp__thumb img, .price-table__item img { mix-blend-mode: multiply; }
.card__media {
  box-shadow: inset 0 0 0 1px rgba(184, 147, 90, .10);
  transition: transform .7s var(--ease-out), box-shadow .7s var(--ease-out);
}
.card__media img { transition: transform 1.1s var(--ease-out); }
@media (hover: hover) {
  .card:hover .card__media { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(184, 147, 90, .22), var(--lift); }
  .card:hover .card__media img { transform: scale(1.045); }
}
.pdp__thumb { background: var(--studio); }

/* Card text: small-caps label, crisp name, aligned price */
.card__meta { font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #8C8476; }
.card__title { font-weight: 500; letter-spacing: -.005em; }
.card__price > span:first-child { font-weight: 600; }

/* Badges: ink with champagne figures; "new" in foil */
.badge { background: #141414; color: #EAD7AE; letter-spacing: .02em; }
.badge--light { background: var(--foil); color: #141414; }

/* ---------- Category tiles ---------- */
.cat { background: var(--studio); box-shadow: inset 0 0 0 1px rgba(184, 147, 90, .12); transition: transform .7s var(--ease-out), box-shadow .7s var(--ease-out); }
@media (hover: hover) { .cat:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(184, 147, 90, .25), var(--lift); } }
.cat::after { background: var(--champagne); }

/* ---------- Sections, panels and quotes ---------- */
.section--stone { background-color: var(--stone); }
.marquee { background: transparent; border-color: var(--line); }
.quote, .visit__inner, .card-form, .price-table, .review-form .form { border-color: var(--line); box-shadow: var(--shadow); }
.quote blockquote::before { content: "\201C"; display: block; height: .55em; margin-bottom: 4px; font-size: 2.4em; line-height: 1; color: var(--champagne); }
.features { border-color: var(--line); }
.feature + .feature { border-color: var(--line); }
.perks { border-color: var(--line); }
.accordion details { border-color: var(--line); }
.float-card { border-color: rgba(184, 147, 90, .25); box-shadow: var(--lift); }

/* ---------- Footer: deep ink with a champagne line ---------- */
.footer { background: #121110; border-top: 1px solid; border-image: linear-gradient(90deg, transparent, #B8935A 25%, #E6CC95 50%, #B8935A 75%, transparent) 1; }
.footer__bottom { border-color: #2A2722; }

@media (prefers-reduced-motion: reduce) {
  .card__media, .card__media img, .cat { transition: none; }
}