/*
 * lsb.css - the storefront's one stylesheet, from the brand standards
 * (https://claude.ai/artifact/Sun8j7mYxpmC5oPdraHBpS; docs/design.md).
 * Published at /assets/site/lsb.css by tools/build_lsb.py.
 *
 * No inline styles anywhere (the pages' CSP is style-src 'self'); every
 * color is a token below. Prices are gold-text (#7E6128): the site's gold
 * #C5A059 is 2.5:1 on white (agency, 18 Sep 2026).
 */

@font-face { font-family: Trirong; font-weight: 400; font-display: swap; src: url(/assets/fonts/trirong-400-latin.woff2) format("woff2"); }
@font-face { font-family: Trirong; font-weight: 600; font-display: swap; src: url(/assets/fonts/trirong-600-latin.woff2) format("woff2"); }
@font-face { font-family: Trirong; font-weight: 700; font-display: swap; src: url(/assets/fonts/trirong-700-latin.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-weight: 400; font-display: swap; src: url(/assets/fonts/poppins-400-latin.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-weight: 500; font-display: swap; src: url(/assets/fonts/poppins-500-latin.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-weight: 600; font-display: swap; src: url(/assets/fonts/poppins-600-latin.woff2) format("woff2"); }

:root {
  --ink: #111111;
  --ink-product: #1A1A1A;
  --cream: #F5EBDF;
  --white: #FFFFFF;
  --title-band: #F5F5F5;
  --text: #5E5A59;
  --nav-text: #5A5858;
  --muted: #6B6664;
  --espresso: #3A3229;
  --gold: #C5A059;
  --gold-text: #7E6128;
  --bronze: #A6763F;
  --hairline: #E8DCCB;
  --on-dark: #D9CFC3;          /* the lightbox's caption, on its dark scrim */

  --font-display: Trirong, Georgia, "Times New Roman", serif;
  --font-body: Poppins, Arial, Helvetica, sans-serif;

  --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-5: 40px;
  /* THE PAGE'S SIDE MARGIN, the one number for it. The wrap and the strips
     that bleed past it both read this, so a heading and the row under it
     start at the same pixel. Narrower on a phone (below), where every one of
     these is taken off a photograph. */
  --gutter: 16px;
  --space-section: 63px;
  --space-band: 96px;         /* every homepage band, top and bottom (64px on phones) */
  --radius-button: 0px;       /* square buttons (agency, 18 Sep 2026) */
  /* THE PRODUCT CARD IS THE ONE ROUNDED THING (the client, 21 Sep 2026).
     Buttons stay square, above; this is not that decision being reversed,
     it is a panel and not a control. */
  --radius-card: 16px;
  --radius-photo: 11px;
  --card-line: #F0EAE2;       /* the hairline round a card: --hairline, calmed */
  --wrap: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--text); font: 400 16px/1.5 var(--font-body); }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; color: var(--ink); margin: 0; line-height: 1.2; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* HIDDEN MEANS HIDDEN: a class that sets display (grid, flex) would otherwise
   beat the hidden attribute, and a box meant to stay out of sight shows. */
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--space-2); top: var(--space-2); z-index: 50; background: var(--white); padding: var(--space-1) var(--space-2); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.band { padding-block: var(--space-band); }
.band--cream { background: var(--cream); }
@media (max-width: 600px) { :root { --space-band: 64px; --gutter: 12px; } }

/* ------------------------------------------------------------- buttons --- */
.btn { display: inline-block; font: 400 12px/1.2 var(--font-body); letter-spacing: 1.6px; text-transform: uppercase;
  text-decoration: none; padding: 13px 32px; border: 1px solid var(--ink);
  border-radius: 0; color: var(--ink); background: transparent; cursor: pointer; text-align: center; }
.btn:hover { background: var(--ink); color: var(--white); }
.btn--light { border-color: var(--white); color: var(--white); font-size: 13px; }
.btn--light:hover { background: var(--white); color: var(--ink); }
.btn--light:focus-visible { outline-color: var(--white); }
.btn--cream { background: var(--cream); border-color: var(--cream); }
.btn--cream:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* --------------------------------------------------------------- chrome --- */
.bar { background: var(--cream); color: var(--ink); text-align: center; font-size: 13px; padding: 9px var(--space-2); }

.head { background: var(--white); border-bottom: 1px solid var(--hairline); position: sticky; top: 0; z-index: 20; }
/* Logo on the left, the menu centered, search and cart on the right. */
.head__in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 24px; min-height: 86px; }
.head__in > .logo { justify-self: start; }
.logo img { width: 116px; height: auto; }
.head__tools { display: flex; justify-content: flex-end; gap: var(--space-2); align-items: center; }
.icon-link { display: inline-grid; place-items: center; width: 40px; height: 40px; color: var(--ink); text-decoration: none; position: relative; }
.icon-link svg { width: 21px; height: 21px; }
.cart-count { position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; border-radius: 9px; background: var(--ink);
  color: var(--white); font-size: 10px; line-height: 17px; text-align: center; padding: 0 4px; }

.nav > ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; white-space: nowrap; }
.nav a, .nav summary { color: var(--nav-text); text-decoration: none; font: 400 16px var(--font-display); cursor: pointer; }
.nav a:hover, .nav summary:hover { color: var(--ink); }
.nav details { position: relative; }
.nav summary { list-style: none; }
.nav summary::-webkit-details-marker { display: none; }
.nav summary::after { content: " \25BE"; font-size: 11px; }
.nav details > ul { list-style: none; margin: 0; padding: var(--space-1) 0; position: absolute; left: -16px; top: 30px; min-width: 210px;
  background: var(--white); border: 1px solid var(--hairline); z-index: 30; }
.nav details > ul li a { display: block; padding: 7px var(--space-2); font-size: 15px; }
/* Collections: a panel of photos, four across. */
.nav__mega { position: absolute; top: 34px; left: 50%; transform: translateX(-50%); width: 600px; padding: 22px 22px 18px;
  background: var(--white); border: 1px solid var(--hairline); box-shadow: 0 14px 30px rgba(17, 17, 17, .08); z-index: 30; }
.nav__tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 16px; }
.nav__tiles a { display: grid; gap: 8px; text-align: center; font-size: 15px; }
/* CORNERS ONLY (the client, 21 Sep 2026): the tiles in the collections
   dropdown are not cards - they are a menu, and a panel round each one would
   be sixteen panels inside a panel. The radius is enough to belong. */
.nav__tiles img, .nav__blank { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--cream);
  border-radius: var(--radius-photo); transition: opacity .2s; }
.nav__tiles a:hover img { opacity: .85; }
.nav__blank { display: grid; place-items: center; font: 400 30px var(--font-display); color: var(--bronze); }
.nav__all { display: block; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hairline); text-align: center;
  font: 400 12px var(--font-body) !important; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink) !important; }
.nav details > ul li.all a { color: var(--ink); border-top: 1px solid var(--hairline); margin-top: 4px; padding-top: 10px; }

.menu-btn { display: none; width: 40px; height: 40px; place-items: center; border: 0; background: none; padding: 0; cursor: pointer; color: var(--ink); }
.menu-btn svg { width: 24px; height: 24px; }

/* Tablet: the whole menu still fits once Home goes (the logo is the way
   home); logo left, menu between, search and cart right. */
@media (max-width: 1100px) {
  .head__in { grid-template-columns: auto 1fr auto; min-height: 78px; }
  .nav--wide { justify-self: center; }
  .nav--wide .nav__home { display: none; }
  .nav--wide .nav > ul { gap: 20px; }
  .logo img { width: 100px; }
  .head__tools { gap: 4px; }
}
/* Phone: logo left; search, cart and the menu button (the drawer) right. */
@media (max-width: 767px) {
  .head__in { grid-template-columns: 1fr auto auto; column-gap: 4px; min-height: 70px; }
  .logo img { width: 94px; }
  .nav--wide { display: none; }
  .menu-btn { display: grid; order: 3; }
}

/* The footer, white (agency, 21 Sep 2026): ink on white, the ink logo, the
   contact lines each behind their mark, and the boutique's Google map under
   them. "We accept" and the copyright close it, each above a hairline. */
.foot { background: var(--white); color: var(--text); border-top: 1px solid var(--hairline); padding-top: 56px; font-size: 14px; }
.foot a { color: var(--text); text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; }
.foot__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.3fr; gap: 32px; }
.foot h3 { color: var(--ink); font-size: 17px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 14px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot__logo img { width: 190px; margin-bottom: 20px; }
.foot__social { display: flex; gap: 16px; }
.foot__social a { display: inline-grid; place-items: center; width: 24px; height: 24px; color: var(--ink); }
.foot__social a:hover { color: var(--gold-text); text-decoration: none; }
.foot__social svg { width: 22px; height: 22px; }
.foot__contact { gap: 14px; }
.foot__contact li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: start; }
.foot__contact svg { width: 16px; height: 16px; margin-top: 3px; color: var(--ink); }
.foot__map { width: 100%; height: 195px; border: 0; margin-top: 20px; display: block; background: var(--title-band); }
.foot__pay { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
             border-top: 1px solid var(--hairline); margin-top: 48px; padding-top: 22px; }
.foot__pay-label { font-family: var(--font-display); color: var(--ink); font-size: 17px; text-transform: uppercase; letter-spacing: 1px; }
.foot__pay img { width: 480px; max-width: 100%; }   /* the strip shrinks on a phone rather than run off the page */
.foot__legal { border-top: 1px solid var(--hairline); margin-top: 22px; padding-block: 20px; font-size: 12px; text-align: center; }
@media (max-width: 900px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot__grid { grid-template-columns: 1fr; } .foot__pay { justify-content: center; } }

/* ----------------------------------------------------------------- hero --- */
/* THE WORDS SIT LOW, AND ALWAYS ON THE FIRST SCREEN (agency, 20 Sep 2026:
   "can the hero content be lower on the page? must be in the viewable
   area"). They were centered in a hero 80vh tall - and 80vh is the tall
   viewport on a phone, with the browser's bars hidden, so under the bar,
   the header and the browser's own toolbar the hero ran past the fold and
   anything placed low in it would have been cut off. So the hero is 80svh
   (the viewport as it is actually shown) but never taller than the screen
   left under the bar and header - --hero-top, which storefront.js measures,
   with an estimate here until it has - and the words sit at its foot, clear
   of the slide dots. Its bottom edge is on screen, so the words are too. */
.hero { --hero-top: 125px; position: relative; height: min(80svh, calc(100svh - var(--hero-top)));
  min-height: 360px; max-height: 1000px; overflow: hidden; background: var(--ink); }
.hero__slide { position: absolute; inset: 0; display: grid; place-items: end center; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility .8s; }
.hero__slide.is-on { opacity: 1; visibility: visible; }
.hero__slide:first-child { position: relative; height: 100%; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__slide::after { content: ""; position: absolute; inset: 0; background: rgba(17, 17, 17, 0.38); }
/* Low, not on the floor: the foot keeps clear of the dots (18px up, 10px
   tall) and scales a little with the screen. */
.hero__in { position: relative; z-index: 1; text-align: center; max-width: 760px;
  padding: var(--space-5) var(--space-2) clamp(56px, 9svh, 104px); }
.hero h1, .hero .hero__title { color: var(--white); font: 400 62px/1.2 var(--font-display); text-transform: uppercase; margin: 0; max-width: none; }
.hero__arrow { position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--white); background: rgba(17, 17, 17, .25); color: var(--white); font-size: 28px; line-height: 1; cursor: pointer; }
.hero__arrow--prev { left: 18px; } .hero__arrow--next { right: 18px; }
.hero__arrow:focus-visible { outline-color: var(--white); }
.hero__dots { position: absolute; bottom: 18px; left: 0; right: 0; z-index: 2; display: flex; justify-content: center; gap: 10px; }
.hero__dots button { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--white); background: transparent; padding: 0; cursor: pointer; }
.hero__dots button[aria-current="true"] { background: var(--white); }
@media (prefers-reduced-motion: reduce) { .hero__slide { transition: none; } }
.hero p { color: var(--white); font-size: 17px; margin: 18px auto 30px; max-width: 520px; }

/* THE HERO ARRIVES (agency, 20 Sep 2026: "fade in the background and then
   the content will appear easing up to the position it is right now").
   The photo fades up out of the hero's own dark ground, then the words rise
   the last few pixels into the place they already hold - heading, line,
   button, a beat apart, so it reads as one movement rather than three.

   CSS AND NOTHING ELSE, SO NOTHING IS EVER LEFT HIDDEN: with no script the
   animation simply plays, and it ends where the page already was. The
   script only holds it (.is-waiting) while the photo is still arriving,
   so a slow connection sees the photo fade in rather than pop in after
   the fade has finished without it - and it lets go after a moment
   whatever happens, so the words are never kept waiting on a photo.
   The photo fades up from dark once, on load; after that the carousel's own
   crossfade brings each photo in. Nothing moves for anybody who has asked
   for reduced motion.

   THE WORDS RISE ON EVERY SLIDE (agency, 20 Sep 2026: "every slide"). The
   rise belongs to whichever slide is showing (.is-on), not to the first
   one: taking .is-on away removes the animation, and giving it back starts
   it afresh, which is what makes a slide's words rise each time it comes
   round. After the load's entrance (.is-moving, set by storefront.js on
   the first change) there is no fade from dark to wait for, only the
   0.8s crossfade, so the words come in on that shorter beat. */
@keyframes hero-photo-in { from { opacity: 0; } }
@keyframes hero-words-in { from { opacity: 0; transform: translateY(28px); } }
.hero__slide:first-child .hero__img { animation: hero-photo-in 1.2s ease-out both; }
.hero__slide.is-on .hero__in > * { animation: hero-words-in .9s cubic-bezier(.2, .7, .2, 1) .7s both; }
.hero__slide.is-on .hero__in > :nth-child(2) { animation-delay: .82s; }
.hero__slide.is-on .hero__in > :nth-child(3) { animation-delay: .94s; }
.hero.is-moving .hero__slide.is-on .hero__in > * { animation-delay: .35s; }
.hero.is-moving .hero__slide.is-on .hero__in > :nth-child(2) { animation-delay: .47s; }
.hero.is-moving .hero__slide.is-on .hero__in > :nth-child(3) { animation-delay: .59s; }
.hero.is-waiting .hero__img, .hero.is-waiting .hero__in > * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .hero__slide:first-child .hero__img, .hero__slide.is-on .hero__in > * { animation: none; }
}
/* A phone's bar wraps to two lines, so the estimate is taller until the
   script has measured. */
@media (max-width: 700px) { .hero { --hero-top: 150px; } .hero h1, .hero .hero__title { font-size: 35px; } .hero__arrow { display: none; } }

/* The sitemap page (/sitemap/): every page of the site, grouped. */
/* Columns rather than a grid: the groups are different lengths, and a grid
   row as tall as its tallest group strands the short ones. */
.sitemap { columns: 4 200px; column-gap: 32px; }
.sitemap__group { break-inside: avoid; margin-bottom: 40px; }
.sitemap h2 { font-size: 20px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 14px; }
.sitemap ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sitemap a { color: var(--text); text-decoration: none; }
.sitemap a:hover { color: var(--ink); text-decoration: underline; }
/* Every piece in the catalog (sitemap.js): its own band under the groups,
   flowing its own columns - hundreds of names inside one group's column
   would be a column thousands of pixels tall beside three empty ones. */
.sitemap__all { border-top: 1px solid var(--hairline); margin-top: 8px; padding-top: 40px; }
.sitemap__all h2 { font-size: 20px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 18px; }
.sitemap__all ul { list-style: none; margin: 0; padding: 0; columns: 4 200px; column-gap: 32px; }
.sitemap__all li { margin-bottom: 8px; break-inside: avoid; }
.sitemap__all a { color: var(--text); text-decoration: none; }
.sitemap__all a:hover { color: var(--ink); text-decoration: underline; }

/* -------------------------------------------------------------- marquee --- */
.marquee { overflow: hidden; border-bottom: 1px solid var(--hairline); background: var(--cream); }   /* cream under the hero (agency, 21 Sep 2026) */
.marquee__track { display: flex; width: max-content; gap: 22px; padding: 15px 0; animation: marquee 40s linear infinite;
  font: 600 15px var(--font-display); letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
.marquee__track span { color: var(--espresso); }
.marquee__track .dot { color: var(--bronze); font-weight: 400; }
.marquee__track .hi { color: var(--bronze); font-weight: 700; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ------------------------------------------------------------ headings --- */
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-2); margin-bottom: 48px; }
.sec-title { font-size: 42px; text-transform: capitalize; }
.sec-lede { font-style: italic; margin-top: 6px; }
.band-title { font-size: 34px; text-transform: uppercase; letter-spacing: .5px; }
@media (max-width: 600px) { .sec-title { font-size: 32px; } .band-title { font-size: 27px; } }

/* ------------------------------------------------------------ products --- */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px 28px; }
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); gap: 20px 10px; } }
/* THE CARD IS A PANEL (the client, 21 Sep 2026): white, a hairline round it,
   a soft shadow under it, and the photo inset with a radius of its own. It is
   the shape the boutique's own reference uses, and it is why a product grid
   now wants a plain background behind it - a white card on white reads by its
   border and its shadow, which is the point of the border and the shadow.
   Grid items stretch, so a row of cards is one height whatever the names do;
   the words stay at the top and short cards keep the space below them.

   A COLLECTION AND A BRAND ARE THE SAME PANEL (the client, 21 Sep 2026), so
   the shape is declared once here for both. Somebody walking from
   /collections/ into the grid it leads to should not meet two kinds of card
   on the way; only what is written inside them differs. */
.card, .dir-card { background: var(--white); border: 1px solid var(--card-line);
  border-radius: var(--radius-card); box-shadow: 0 1px 2px rgba(17, 17, 17, .04), 0 6px 18px rgba(17, 17, 17, .05);
  transition: box-shadow .25s ease, border-color .25s ease; }
.card:hover, .dir-card:hover { border-color: #E6DED3;
  box-shadow: 0 2px 4px rgba(17, 17, 17, .05), 0 14px 34px rgba(17, 17, 17, .10); }
@media (prefers-reduced-motion: reduce) { .card, .dir-card { transition: none; } }
.card { text-align: center; display: flex; flex-direction: column; padding: 18px 18px 24px; }
/* THE PADDING COMES BACK IN ON A PHONE. Two cards across 375px, and every
   pixel spent on the panel's inset is taken off the photograph - at the
   desktop's 18px the bag itself would lose a fifth of its width, which is
   the one thing the card is for. The shape is the same; it is drawn tighter. */
@media (max-width: 600px) {
  .card, .dir-card { border-radius: 12px; }
  .card { padding: 9px 9px 16px; }
  .card__photo { border-radius: 8px; }
  .card__name { margin-top: 14px; }
  .card__brand { margin-top: 12px; }
}
.card__media { position: relative; }
.card__photo { position: relative; display: block; aspect-ratio: 4 / 5; background: var(--cream);
  border-radius: var(--radius-photo); overflow: hidden; }  /* portrait (19 Sep) */
.card__text { display: block; text-decoration: none; color: inherit; }
.card__text:hover .card__name { text-decoration: underline; text-underline-offset: 3px; }
/* Add to cart over the bottom of the photo: fades in on hover or focus;
   only where there is a pointer that hovers (a tap opens the product). */
.card__add { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1; display: block; padding: 12px 10px;
  border: 0; background: var(--ink); color: var(--white); font: 400 12px/1.2 var(--font-body); letter-spacing: 1.6px;
  text-transform: uppercase; text-align: center; text-decoration: none; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease, visibility .25s; }
.card__add:hover { background: #2a2a2a; }
.card:hover .card__add, .card__add:focus-visible { opacity: 1; visibility: visible; transform: none; }
.card__add:focus-visible { outline: 2px solid var(--white); outline-offset: -4px; }
@media (hover: none) { .card__add { display: none; } }
.card__bag { display: none; }
@media (hover: none) {
  .card__bag { position: absolute; right: 8px; bottom: 8px; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px;
    padding: 0; border: 0; background: rgba(255, 255, 255, .94); color: var(--ink); box-shadow: 0 2px 8px rgba(17, 17, 17, .12); cursor: pointer; }
  .card__bag svg { width: 19px; height: 19px; }
}
@media (prefers-reduced-motion: reduce) { .card__add { transition: none; transform: none; } }
.card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card:hover .card__photo img { transform: scale(1.03); }
.card__tag { position: absolute; left: 10px; top: 10px; background: var(--white); color: var(--ink); font-size: 11px;
  letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 9px; }
.card__tag--out { background: var(--ink); color: var(--white); }
.card__name { font: 500 18px/1.25 var(--font-display); color: var(--ink-product); margin: 20px 0 6px; }
.card__price { font-size: 17px; color: var(--gold-text); }
.card__price s { color: var(--text); margin-right: 6px; }
.grid__more { text-align: center; margin-top: 48px; }
.grid--loading .card__photo { animation: pulse 1.4s ease-in-out infinite; }
/* A card waiting for its product is a visible box now, so it reserves the
   room a name and a price will take rather than growing under the reader. */
.grid--loading .card::after { content: ""; display: block; height: 70px; }
@keyframes pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .grid--loading .card__photo, .card__photo img { animation: none; transition: none; } }
.grid__empty { grid-column: 1 / -1; text-align: center; color: var(--muted); }

/* ------------------------------------------------------------- strips --- */
/* Full-width rows with no scrollbar: swipe, the arrows, or they move on their
   own (reviews marquee, video row). The heading stays in the page's column. */
.strip { display: flex; gap: var(--space-2); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none; }
.strip::-webkit-scrollbar { display: none; }
.strip > * { flex: 0 0 auto; scroll-snap-align: start; }
@media (hover: hover) and (pointer: fine) { .strip { cursor: grab; } }
.strip.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.strip.is-dragging > * { pointer-events: none; }
.strip--bleed { padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
.strip--gallery img { width: clamp(220px, 22vw, 340px); aspect-ratio: 3 / 4; object-fit: cover; }
/* A photo that opens in the lightbox: a bare button around it. */
.zoom { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; font: inherit; color: inherit; }
.strip .zoom { cursor: inherit; }
@media (hover: hover) and (pointer: fine) { .strip--gallery .zoom img { transition: opacity .2s; } .strip--gallery .zoom:hover img { opacity: .9; } }
.strip--video video { width: clamp(220px, 20vw, 300px); aspect-ratio: 9 / 16; object-fit: cover; background: var(--ink); cursor: pointer; }
.strip-nav { display: flex; gap: var(--space-1); }
.strip-nav button { width: 40px; height: 40px; border: 1px solid var(--ink); border-radius: 50%; background: transparent; cursor: pointer; font-size: 18px; color: var(--ink); }
.strip-nav button:hover { background: var(--ink); color: var(--white); }
.sec-head__tools { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* The reviews marquee: one track, twice the screenshots, moving left forever;
   it stops under the pointer or keyboard focus. */
.marquee-strip { overflow: hidden; padding-block: 24px; }   /* room for a hovered screenshot to grow */
.marquee-strip__track { display: flex; align-items: center; gap: 48px; width: max-content; animation: reviews 90s linear infinite; }
/* As shopluxesuites.com shows them: each screenshot at most 400px wide at
   its own height (tall ones stop at 260px), 48px apart. */
.marquee-strip img { width: auto; height: auto; max-width: 400px; max-height: 260px; border: 1px solid var(--hairline); background: var(--white);
  transition: transform .25s ease, box-shadow .25s ease; }
.marquee-strip .zoom:hover img, .marquee-strip .zoom:focus-visible img { transform: scale(1.12); box-shadow: 0 10px 30px rgba(17, 17, 17, .14); position: relative; z-index: 1; }
.band--reviews { padding-block: calc(var(--space-band) - 24px); }
.marquee-strip:hover .marquee-strip__track, .marquee-strip:focus-within .marquee-strip__track,
.marquee-strip:focus .marquee-strip__track { animation-play-state: paused; }
@keyframes reviews { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 24px)); } }
@media (max-width: 600px) { .marquee-strip img { max-width: 280px; max-height: 200px; } }
@media (prefers-reduced-motion: reduce) {
  .marquee-strip { overflow-x: auto; scrollbar-width: none; }
  .marquee-strip::-webkit-scrollbar { display: none; }
  .marquee-strip__track { animation: none; }
  .strip { scroll-behavior: auto; }
}

/* ------------------------------------------------------------ lightbox --- */
.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(17, 17, 17, .92); }
.lightbox::backdrop { background: rgba(17, 17, 17, .6); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox__fig { margin: 0; display: grid; justify-items: center; gap: 12px; padding: 56px 72px; }
.lightbox__fig img { max-width: min(92vw, 1100px); max-height: 82vh; width: auto; height: auto; background: var(--white); }
.lightbox__count { color: var(--on-dark); font-size: 13px; letter-spacing: 1.5px; }
.lightbox__btn { position: absolute; width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, .5); background: rgba(17, 17, 17, .35);
  color: var(--white); font-size: 30px; line-height: 1; cursor: pointer; }
.lightbox__btn:hover { border-color: var(--white); background: rgba(17, 17, 17, .6); }
.lightbox__btn:focus-visible { outline-color: var(--white); }
.lightbox__close { top: 16px; right: 16px; }
.lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) { .lightbox__fig { padding: 64px 8px; } .lightbox__prev, .lightbox__next { top: auto; bottom: 16px; transform: none; } }

/* ------------------------------------------------------------ indexes --- */
/* /collections/ and /brands/: a card per collection or brand (directory.js). */
.dir-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px 28px; }
.dir-card { display: grid; align-content: start; gap: 4px; text-align: center; text-decoration: none; color: var(--ink);
  padding: 18px 18px 24px; }
.dir-card__photo { aspect-ratio: 1; background: var(--cream); overflow: hidden; margin-bottom: 14px;
  border-radius: var(--radius-photo); }
.dir-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.dir-card:hover .dir-card__photo img { transform: scale(1.03); }
.dir-card__name { font-size: 22px; }
.dir-card:hover .dir-card__name { text-decoration: underline; text-underline-offset: 4px; }
.dir-card__n { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.dir-card--ph .dir-card__photo { animation: pulse 1.4s ease-in-out infinite; }
@media (max-width: 900px) { .dir-grid { grid-template-columns: repeat(3, 1fr); gap: 24px 12px; } }
@media (max-width: 600px) {
  .dir-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 10px; }
  .dir-card { padding: 9px 9px 16px; }
  .dir-card__photo { margin-bottom: 10px; border-radius: 8px; }
  .dir-card__name { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .dir-card--ph .dir-card__photo, .dir-card__photo img { animation: none; transition: none; } }

/* ---------------------------------------------------------- word pages --- */
/* Privacy policy, terms: one readable column. */
.doc { max-width: 780px; font-size: 16px; line-height: 1.75; }
.doc h2 { font-size: 22px; letter-spacing: .3px; margin: 40px 0 12px; }
.doc h2:first-child { margin-top: 0; }
.doc h3 { font-size: 18px; margin: 24px 0 8px; }
.doc p, .doc ul, .doc ol { margin: 0 0 14px; }
.doc li { margin-bottom: 6px; }
.doc a { color: var(--ink); }

/* FAQs: topics on the left (desktop), questions that open in place. */
.faq { display: grid; grid-template-columns: 220px 1fr; gap: 56px; align-items: start; }
.faq__toc { position: sticky; top: 110px; display: grid; gap: 10px; font-size: 14px; }
.faq__toc a { color: var(--text); text-decoration: none; padding-left: 12px; border-left: 2px solid var(--hairline); }
.faq__toc a:hover { color: var(--ink); border-left-color: var(--ink); }
.faq__groups { display: grid; gap: 48px; max-width: 820px; }
.faq__group { scroll-margin-top: 110px; }
.faq__title { font-size: 26px; margin-bottom: 14px; }
.faq__item { border-bottom: 1px solid var(--hairline); }
.faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px;
  padding: 18px 0; font: 400 18px/1.35 var(--font-display); color: var(--ink); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font: 300 24px/1 var(--font-body); color: var(--bronze); }
.faq__item[open] summary::after { content: "\2212"; }
.faq__item .rich { padding: 0 0 18px; max-width: 700px; line-height: 1.75; }
.faq__item .rich p { margin: 0 0 10px; }
.faq__item .rich a { color: var(--ink); }
.faq__more { background: var(--cream); padding: 32px; display: grid; gap: 12px; }
.faq__more h2 { font-size: 24px; }
@media (max-width: 800px) { .faq { grid-template-columns: 1fr; gap: 24px; } .faq__toc { position: static; display: flex; flex-wrap: wrap; } }

/* Contact us: the form, the boutique's card beside it. */
.contact { display: grid; grid-template-columns: 1.5fr 1fr; gap: 56px; align-items: start; }
.cform { display: grid; gap: 18px; }
.cform__title, .cform__done h2, .contact__card h2 { font-size: 26px; }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 6px; font-size: 14px; color: var(--ink); }
.field b { color: var(--bronze); font-weight: 400; }
.field input, .field textarea { font: 15px/1.4 var(--font-body); padding: 12px 14px; border: 1px solid #CFC6BA; border-radius: 0;
  background: var(--white); color: var(--ink); width: 100%; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
.field [aria-invalid="true"] { border-color: #9B1C1C; }
.field__error, .cform__form-error { font-style: normal; font-size: 13px; color: #9B1C1C; }
.cform__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* The consent box: the faintest warm tint, so the form stays light. */
.consent { border: 1px solid #F1E9DE; margin: 0; padding: 18px 20px; background: #FDFAF6; display: grid; gap: 12px; }
.consent legend { padding: 0; font: 400 16px var(--font-display); color: var(--ink); float: left; width: 100%; margin-bottom: 4px; }
.consent__box { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 12.5px; line-height: 1.55; color: var(--text); cursor: pointer; }
.consent__box input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ink); }
.consent__note { font-size: 12px; line-height: 1.55; color: var(--muted); }
.consent__note a { color: var(--ink); }
.cform__send { justify-self: start; min-width: 200px; }
.cform__done { display: grid; gap: 14px; justify-items: start; align-content: start; }
.contact__card { background: var(--cream); padding: 28px 32px 32px; display: grid; gap: 14px; justify-items: start; font-size: 15px; }
.contact__card a:not(.btn) { color: var(--ink); }
.contact__card .visit__hours { justify-items: start; margin: 0; }
@media (max-width: 800px) { .contact, .cform__row { grid-template-columns: 1fr; gap: 24px; } .cform__row { gap: 18px; } }

/* Contact us: the boutique's video beside the form; below, the map over the
   address and hours, and the photos beside them. */
.contact__video { margin: 0; align-self: start; position: sticky; top: 110px; }
.contact__video { justify-self: end; }
.contact__video video { height: min(78vh, 720px); width: auto; max-width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: var(--ink); display: block; }
.visit-band__title { margin-bottom: 32px; }
.visit-band { display: grid; grid-template-columns: 1fr 1.25fr; gap: 24px; align-items: start; }
.visit-band__where { display: grid; gap: 0; background: var(--white); }
.visit-band__map { width: 100%; height: 340px; border: 0; display: block; background: var(--white); }
.visit-band__where .contact__card { background: var(--white); }
.contact__addr { font: 400 20px/1.35 var(--font-display); color: var(--ink); }
.visit-band__photos { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; height: 100%; min-height: 640px; }
.visit-band__photo { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; overflow: hidden; }
.visit-band__photo:first-child { grid-row: 1 / 3; }
.visit-band__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.visit-band__photo:hover img { transform: scale(1.02); }
@media (max-width: 900px) {
  .contact__video { position: static; justify-self: center; }
  .contact__video video { height: auto; width: min(100%, 380px); }
  .visit-band { grid-template-columns: 1fr; }
  .visit-band__photos { min-height: 520px; }
}
@media (max-width: 560px) { .visit-band__photos { min-height: 420px; gap: 10px; } }

/* ---------------------------------------------------------------- visit --- */
.visit-split { display: grid; grid-template-columns: 2fr 1fr; align-items: center; }
.visit-split__photo { width: 100%; height: 74vh; min-height: 520px; max-height: 860px; object-fit: cover; }   /* the live page: 74vh */
.visit { padding: var(--space-band) clamp(24px, 4vw, 64px); }
@media (max-width: 900px) {
  .visit-split { grid-template-columns: 1fr; }
  .visit-split__photo { min-height: 0; height: 60vh; }
  .visit { padding: var(--space-band) var(--space-2); }
}
.visit__hours { list-style: none; padding: 0; margin: 16px 0 26px; display: grid; gap: 4px; }
.visit__hours b { display: inline-block; min-width: 110px; font-weight: 500; color: var(--ink); }


/* -------------------------------------------------------------- closing --- */
/* The live page's last band: a photo under a dark tint, the white logo,
   heading, copy and the cream button centered on it. */
.closing-band { position: relative; overflow: hidden; background: var(--ink); text-align: center; }
.closing-band__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.closing-band::after { content: ""; position: absolute; inset: 0; background: rgba(17, 17, 17, 0.55); }
.closing-band__in { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; padding: 136px var(--space-2); }
.closing-band__logo { width: 260px; margin: 0 auto 18px; }
.closing-band h3 { color: var(--white); font-size: 34px; text-transform: uppercase; margin-bottom: 16px; }
.closing-band p { color: var(--white); margin-bottom: 28px; }

/* ----------------------------------------------------------------- gate --- */
.gate { min-height: 100vh; background: var(--cream); display: grid; place-items: center; padding: var(--space-5) var(--space-2); }
.gate__card { background: var(--white); width: 100%; max-width: 440px; padding: 44px 36px; text-align: center; }
.gate__card img { width: 150px; margin: 0 auto 26px; }
.gate h1 { font-size: 26px; text-transform: uppercase; margin-bottom: 10px; }
.gate form { display: grid; gap: 14px; margin-top: 26px; text-align: left; }
.gate label { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); }
.gate input { font: 16px var(--font-body); padding: 13px 14px; border: 1px solid var(--ink); border-radius: 0; width: 100%; }
.gate .btn { width: 100%; }
.gate__err { color: #9b1c1c; font-size: 14px; }
/* Without the password: the sign-up (signup.js), or an email without script. */
.gate__new { margin-top: 18px; font-size: 14px; }
.gate__new a { color: var(--ink); font-weight: 500; }
.gate__visit { margin-top: 26px; font-size: 14px; }
.gate__social { display: flex; justify-content: center; gap: 14px; margin-top: 14px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; }
.gate__social a { color: var(--ink); text-decoration: none; }
.gate { grid-template-rows: 1fr auto; }
.gate__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 22px; font-size: 13px; }
.gate__links a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------- shared bits --- */
.btn--solid { background: var(--ink); color: var(--white); }
.btn--solid:hover { background: #2a2a2a; color: var(--white); }
.btn--solid:disabled, .btn:disabled, .btn.is-disabled { opacity: .45; cursor: not-allowed; }
.title-band { background: var(--title-band); padding-block: 44px; }
.title-band .sec-title { text-transform: none; }
/* A page's hero (templates/_macros.html hero): its photo under a shade,
   darker on the left where the words are, so they can be white. */
.title-band--photo { position: relative; overflow: hidden; background: #1d1b1f; padding-block: 64px 84px; }
.title-band__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.title-band--photo::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(17, 17, 17, .72), rgba(17, 17, 17, .38) 55%, rgba(17, 17, 17, .18)); }
.title-band--photo > .wrap { position: relative; z-index: 2; }
@media (max-width: 600px) { .title-band--photo { padding-block: 44px 56px; }
  .title-band--photo::before { background: rgba(17, 17, 17, .55); } }
.title-band--photo .sec-title, .title-band--photo .sec-lede { color: var(--white); }
.title-band--photo .sec-lede { opacity: .9; }
/* BREADCRUMBS: one look everywhere (templates/_macros.html). */
.crumbs { font-size: 13px; color: var(--muted); padding-block: 18px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: #B8AE9F; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); }
.title-band .crumbs { padding-block: 0 18px; }
.title-band--photo .crumbs, .title-band--photo .crumbs a, .title-band--photo .crumbs [aria-current] { color: rgba(255, 255, 255, .85); }
.title-band--photo .crumbs a:hover { color: var(--white); }
.title-band--photo .crumbs li + li::before { color: rgba(255, 255, 255, .5); }
.card__brand { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-top: 18px; }
.card__brand + .card__name { margin-top: 2px; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--ink); }
.stepper button { width: 32px; height: 32px; border: 0; background: transparent; font-size: 17px; cursor: pointer; color: var(--ink); }
.stepper button:disabled { color: #bbb; cursor: not-allowed; }
.stepper__n { min-width: 28px; text-align: center; font-size: 15px; color: var(--ink); }
.stepper--lg button { width: 44px; height: 50px; }
.rich p { margin: 0 0 12px; } .rich ul, .rich ol { margin: 0 0 12px; padding-left: 20px; }
.rich h2, .rich h3, .rich h4 { font-size: 20px; margin: 18px 0 8px; } .rich a { color: var(--ink); }
.rich img { margin: 12px 0; }
html.drawer-open { overflow: hidden; }
/* THE CHAT BUBBLE STEPS ASIDE while a drawer, the sign-up popup or the
 * gate's page popup has the screen (LeadConnector's <chat-widget>,
 * base.html; 24 Sep 2026). On a phone the cart drawer is the full width, and
 * the bubble sat on its footer, over the pay-later badges; under the page
 * popup it would be a bubble nothing can press. It comes back, as it was,
 * when they close. The lightbox needs nothing: it is drawn above everything. */
html.drawer-open chat-widget, html.pop-open chat-widget, html.pagepop-open chat-widget { display: none !important; }

/* ------------------------------------------------- the sign-up popup ---
 * signup.js. Centred on a desktop, a sheet from the foot of a phone - a
 * centred box on a phone is the shape people mean when they say they hate
 * popups, because the close button ends up somewhere the thumb is not.
 */
html.pop-open { overflow: hidden; }
.pop { position: fixed; inset: 0; z-index: 110; }
.pop__scrim { position: absolute; inset: 0; background: rgba(17, 17, 17, .5); opacity: 0; transition: opacity .25s ease; }
.pop.is-open .pop__scrim { opacity: 1; }
.pop__panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -46%); opacity: 0;
  width: min(430px, calc(100% - 32px)); max-height: calc(100dvh - 40px); overflow-y: auto;
  background: var(--white); border: 1px solid var(--hairline); padding: 32px 28px 26px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .18); transition: transform .25s ease, opacity .25s ease; }
.pop.is-open .pop__panel { transform: translate(-50%, -50%); opacity: 1; }
.pop__close { position: absolute; top: 6px; right: 8px; width: 40px; height: 40px; border: 0;
  background: transparent; font-size: 28px; line-height: 1; cursor: pointer; color: var(--muted); }
.pop__close:hover { color: var(--ink); }
.pop__eyebrow { margin: 0 0 6px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--bronze); }
.pop__panel h2 { margin: 0 0 10px; font: 400 26px/1.25 var(--font-display); color: var(--ink); }
.pop__lede { margin: 0 0 18px; font-size: 14px; line-height: 1.6; }
.pop__form { display: grid; gap: 12px; }
.pop__field { display: grid; gap: 5px; font-size: 13px; color: var(--ink); }
.pop__field i { font-style: normal; color: var(--muted); font-size: 12px; }
.pop__field input, .pop__phone select { font: inherit; font-size: 15px; padding: 11px 12px;
  border: 1px solid var(--hairline); background: var(--white); color: var(--ink); border-radius: 0; }
.pop__field input:focus-visible, .pop__phone select:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.pop__phone { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 8px; }
.pop__check { display: grid; grid-template-columns: 20px 1fr; gap: 10px; margin-top: 4px;
  font-size: 11.5px; line-height: 1.55; color: var(--muted); cursor: pointer; }
.pop__check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ink); }
.pop__fine { margin: 0; font-size: 11.5px; line-height: 1.55; color: var(--muted); }
.pop__fine a { color: var(--ink); }
.pop__err { font-style: normal; font-size: 12.5px; color: #9B1C1C; }
.pop__err--form { margin-top: 2px; }
.pop__go { width: 100%; margin-top: 4px; }
/* The honeypot: off-screen rather than display:none, which some robots skip. */
.pop__pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pop__code { margin: 0 0 14px; padding: 14px; border: 1px dashed var(--gold); background: var(--cream);
  font: 500 24px/1.2 var(--font-body); letter-spacing: .1em; text-align: center; color: var(--ink);
  overflow-wrap: anywhere; }
.pop__fine--done { margin-bottom: 14px; }
/* The address the email went to, repeated back: a typo is the commonest
   reason nothing arrives, and this is where it can be seen. */
.pop__to { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.pop__again { margin: 12px 0 0; text-align: center; }
/* THE PASSWORD, ON THE THANK-YOU SCREEN (Phase 4, 24 Sep 2026): large, spaced,
   in a box, and selected whole with one tap - it is the one thing on it to read. */
.pop__pass { margin: 6px 0 18px; padding: 16px 12px; text-align: center; border: 1px solid var(--hairline);
             background: var(--cream); }
.pop__pass b { font-family: var(--font-display); font-size: 30px; font-weight: 600; color: var(--ink); letter-spacing: 3px; user-select: all; overflow-wrap: anywhere; }
.pop__lede--in { margin-top: 18px; }
.pop__link { border: 0; background: none; padding: 4px; font: inherit; font-size: 13px; color: var(--ink);
  text-decoration: underline; cursor: pointer; }
@media (max-width: 560px) {
  .pop__panel { left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-height: 92dvh;
    transform: translateY(14px); padding: 28px 20px 22px; }
  .pop.is-open .pop__panel { transform: none; }
  .pop__panel h2 { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .pop__scrim, .pop__panel { transition: none; }
}

/* ------------------------------------------------ a page, in a popup ---
 * pagepop.js: on the gate, FAQs, Contact us and the legal pages open over
 * it (24 Sep 2026). A box on a desktop, a sheet from the foot of a phone, as
 * the sign-up is. The head stays put and the page scrolls under it; a short
 * page (the accessibility statement) gets a shorter box. The pages' own
 * parts are fitted to it: one column, the FAQs' topics as a row, and the
 * space a full page's bands have made smaller.
 */
html.pagepop-open { overflow: hidden; }
/* fit-content, not auto: an open modal <dialog> is pinned to the top and the
   foot of the screen, and auto would stretch it between them. */
.pagepop { width: min(880px, calc(100vw - 48px)); height: fit-content; min-height: min(420px, 80dvh);
  max-width: none; max-height: min(88dvh, 940px);
  margin: auto; padding: 0; border: 1px solid var(--hairline); background: var(--white); color: var(--text);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .18); overflow: hidden; }
.pagepop[open] { display: flex; flex-direction: column; animation: pagepop-in .22s ease; }
.pagepop::backdrop { background: rgba(17, 17, 17, .5); }
@keyframes pagepop-in { from { opacity: 0; transform: translateY(12px); } }
.pagepop__head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 22px 16px 16px 28px; border-bottom: 1px solid var(--hairline); }
.pagepop__title { margin: 0; font: 400 26px/1.25 var(--font-display); color: var(--ink); }
.pagepop__title:focus { outline: none; }
.pagepop__lede { margin: 6px 0 0; font-size: 13px; font-style: italic; color: var(--muted); }
.pagepop__close { flex: none; width: 40px; height: 40px; margin: -8px 0 0; border: 0; background: transparent;
  font-size: 28px; line-height: 1; cursor: pointer; color: var(--muted); }
.pagepop__close:hover { color: var(--ink); }
.pagepop__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.pagepop__wait { margin: 0; padding: 28px; color: var(--muted); }
.pagepop .band { padding-block: 28px; }
.pagepop .wrap { padding-inline: 28px; }
.pagepop .faq, .pagepop .contact, .pagepop .visit-band { grid-template-columns: 1fr; gap: 28px; }
.pagepop .faq__toc { position: static; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.pagepop .faq__group { scroll-margin-top: 12px; }
.pagepop .visit-band__photos { min-height: 420px; }
@media (max-width: 560px) {
  .pagepop { width: 100%; min-height: 50dvh; max-height: 92dvh; margin: auto 0 0; border: 0;
    border-top: 1px solid var(--hairline); }
  .pagepop__head { padding: 18px 8px 12px 16px; }
  .pagepop__title { font-size: 22px; }
  .pagepop .wrap { padding-inline: 16px; }
  .pagepop .visit-band__photos { min-height: 320px; }
}
@media (prefers-reduced-motion: reduce) { .pagepop[open] { animation: none; } }

/* --------------------------------------------------------------- drawer --- */
.drawer { position: fixed; inset: 0; z-index: 100; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(17, 17, 17, .45); opacity: 0; transition: opacity .25s ease; }
.drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: var(--white);
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform .25s ease; box-shadow: -8px 0 30px rgba(0, 0, 0, .12); }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--hairline); }
.drawer__head h2 { font-size: 22px; }
.drawer__close { width: 40px; height: 40px; border: 0; background: transparent; font-size: 30px; line-height: 1; cursor: pointer; color: var(--ink); }
.drawer__lines { list-style: none; margin: 0; padding: 0 20px; flex: 1; overflow-y: auto; }
.drawer__empty { text-align: center; padding: 60px 0; display: grid; gap: 18px; justify-items: center; }
.line { display: grid; grid-template-columns: 88px 1fr auto; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--hairline); }
/* SMALLER IN THE BAG (the client, 21 Sep 2026). A bag is read as a list -
   what is in it and what it comes to - and an 88px photograph per line pushed
   the total off a phone's screen. 64px still says which piece it is. */
.line__photo { display: block; width: 64px; height: 64px; background: var(--cream);
  border-radius: 8px; overflow: hidden; }
.line__photo img { width: 64px; height: 64px; object-fit: cover; }
.line__name { font: 500 16px/1.3 var(--font-display); color: var(--ink); text-decoration: none; }
.line__meta { font-size: 13px; color: var(--muted); margin-top: 3px; }
.line__problem { font-size: 13px; color: #9B1C1C; margin-top: 4px; }
.line__row { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.line__remove { border: 0; background: none; padding: 0; font-size: 13px; color: var(--muted); text-decoration: underline; cursor: pointer; }
.line__price { font-size: 15px; color: var(--ink); white-space: nowrap; }
.drawer__foot { border-top: 1px solid var(--hairline); padding: 18px 20px 22px; display: grid; gap: 10px; }
.drawer__sub { display: flex; justify-content: space-between; font-size: 17px; color: var(--ink); font-weight: 500; }
.drawer__note, .drawer__pay { font-size: 13px; color: var(--muted); }
.drawer__pay { text-align: center; }
.drawer__go { width: 100%; }
.drawer__keep { border: 0; background: none; font: 14px var(--font-body); color: var(--ink); text-decoration: underline; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .drawer__panel, .drawer__scrim { transition: none; } }

/* ------------------------------------------------------- product search --- */
.search-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-bottom: 1px solid var(--hairline);
  box-shadow: 0 18px 30px rgba(17, 17, 17, .08); padding-block: 22px 26px; }
.search-panel__form { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--ink); padding-bottom: 8px; }
.search-panel__form svg { width: 22px; height: 22px; flex: none; color: var(--ink); }
.search-panel__form input { flex: 1; min-width: 0; border: 0; outline: 0; font: 400 22px var(--font-display); color: var(--ink); background: none; padding: 6px 0; }
.search-panel__form input::-webkit-search-cancel-button { display: none; }
.search-panel__close { width: 40px; height: 40px; border: 0; background: none; font-size: 28px; line-height: 1; cursor: pointer; color: var(--ink); }
.search-panel__results:empty { display: none; }
.search-panel__results { margin-top: 18px; }
.sresults { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 32px; }
.sresult { display: grid; grid-template-columns: 60px 1fr auto; gap: 14px; align-items: center; text-decoration: none; color: var(--ink); padding: 6px 0; }
.sresult img, .sresult__ph { width: 60px; height: 60px; object-fit: cover; background: var(--cream); }
.sresult__name { font: 400 16px/1.25 var(--font-display); }
.sresult__brand { display: block; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.sresult__price { font-size: 14px; color: var(--gold-text); white-space: nowrap; }
.sresult:hover .sresult__name { text-decoration: underline; }
.search-panel__all { display: inline-block; margin-top: 18px; font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink); }
.search-panel__note { color: var(--muted); font-size: 14px; }
@media (max-width: 767px) {
  .sresults { grid-template-columns: 1fr; }
  .search-panel__form input { font-size: 19px; }
  .search-panel { max-height: calc(100vh - 80px); overflow-y: auto; }
}

/* ---------------------------------------------------------- menu drawer --- */
.drawer--menu .drawer__panel { width: min(360px, 88vw); }
.mdrawer__head { display: flex; justify-content: space-between; align-items: center; padding: 14px 12px 14px 20px; background: var(--cream); }
.mdrawer__logo img { width: 92px; height: auto; }
.mdrawer__list { list-style: none; margin: 0; padding: 8px 0; flex: 1; overflow-y: auto; }
.mdrawer__list > li { border-bottom: 1px solid var(--hairline); }
.mdrawer__link { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 17px 20px; border: 0; background: none;
  font: 400 13px/1.2 var(--font-body); letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink); text-decoration: none; text-align: left; cursor: pointer; }
.mdrawer__acc::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease; }
.mdrawer__acc[aria-expanded="true"] { background: #FAF6F0; }
.mdrawer__acc[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, -2px); }
.mdrawer__sub { padding: 6px 20px 20px; background: #FAF6F0; }
/* Collections: three across; each photo about 95px square on a phone. */
.mdrawer__tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; }
.mdrawer__tiles a { display: grid; gap: 6px; text-decoration: none; color: var(--ink); font: 400 14px/1.2 var(--font-display); text-align: center; }
.mdrawer__tiles img, .mdrawer__blank { width: 100%; aspect-ratio: 1; object-fit: cover;
  background: var(--cream); border-radius: 8px; }
.mdrawer__blank { display: grid; place-items: center; font: 400 30px var(--font-display); color: var(--bronze); }
.mdrawer__names { list-style: none; margin: 0; padding: 0; display: grid; }
.mdrawer__names a { display: block; padding: 9px 0; font: 400 16px var(--font-display); color: var(--ink); text-decoration: none; }
.mdrawer__all { display: block; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hairline); text-align: center;
  font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink); }
.mdrawer__foot { display: grid; gap: 6px; padding: 18px 20px 22px; border-top: 1px solid var(--hairline); font-size: 14px; }
.mdrawer__foot > a { color: var(--ink); text-decoration: none; }
.mdrawer__social { display: flex; gap: 8px; margin-top: 8px; }
.mdrawer__social a { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--hairline); color: var(--ink); }
.mdrawer__social svg { width: 18px; height: 18px; }

/* ----------------------------------------------------------------- shop --- */
.shop__body { display: grid; grid-template-columns: 220px 1fr; gap: 40px; padding-block: 36px var(--space-section); }
.filters__box { border-bottom: 1px solid var(--hairline); padding-bottom: 14px; margin-bottom: 14px; }
.filters__box summary { font: 400 18px var(--font-display); color: var(--ink); cursor: pointer; padding: 6px 0; }
.filters ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
/* Long lists show their first ten, then "Show all" - no scroll box. */
.filters ul:not(.is-all) .is-extra { display: none; }
.filters__more { border: 0; background: none; padding: 6px 0 0; font: 13px var(--font-body); color: var(--ink); text-decoration: underline; cursor: pointer; }
.filters a { display: flex; justify-content: space-between; gap: 8px; color: var(--text); text-decoration: none; font-size: 14px; padding: 3px 0; }
.filters a:hover, .filters a.is-on { color: var(--ink); font-weight: 500; }
.filters__n { color: var(--muted); font-size: 12px; }
/* THE FILTERS ARE A DRAWER ON A PHONE (shop.js turns them into one). Until
   it does they are a plain block - the column beside the grid on a desktop,
   the two lists in the page on a phone - so the page works with no script at
   all. The head and the scrim belong to the drawer and are not drawn before
   there is one. */
.shop__filters-scrim, .filters__head { display: none; }
.shop__filters.is-drawer { position: fixed; inset: 0; z-index: 100; }
.shop__filters.is-drawer .shop__filters-scrim { display: block; position: absolute; inset: 0;
  background: rgba(17, 17, 17, .45); opacity: 0; transition: opacity .25s ease; }
.shop__filters.is-drawer.is-open .shop__filters-scrim { opacity: 1; }
.shop__filters.is-drawer .filters { position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 86vw);
  display: flex; flex-direction: column; overflow-y: auto; background: var(--white); padding: 0 20px 24px;
  box-shadow: -8px 0 28px rgba(17, 17, 17, .12); transform: translateX(100%); transition: transform .25s ease; }
.shop__filters.is-drawer.is-open .filters { transform: none; }
/* The title and the X stay put while the collections scroll under them. */
.shop__filters.is-drawer .filters__head { display: flex; justify-content: space-between; align-items: center;
  position: sticky; top: 0; z-index: 1; background: var(--white); padding: 12px 0 10px;
  border-bottom: 1px solid var(--hairline); }
.shop__filters.is-drawer .filters__box { margin-bottom: 14px; }
.filters__title { font-size: 22px; }
/* The count sits between the title and the x, and gives way before either. */
.filters__count { font-size: 13px; color: var(--muted); margin-left: auto; margin-right: 10px; }
@media (prefers-reduced-motion: reduce) {
  .shop__filters.is-drawer .filters, .shop__filters.is-drawer .shop__filters-scrim { transition: none; }
}
/* The button that opens it, in the bar over the grid. Hidden in the markup:
   shop.js shows it only once there is a drawer for it to open. */
.shop__filter { border: 1px solid var(--ink); background: var(--white); color: var(--ink); cursor: pointer;
  font: 400 12px/1.2 var(--font-body); letter-spacing: 1.6px; text-transform: uppercase; padding: 11px 16px;
  max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop__filter:hover { background: var(--ink); color: var(--white); }
/* The × beside it, once a collection is on. Square, the button's own height,
   and a link so it resets whether or not the script is running. */
.shop__reset { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto;
  border: 1px solid var(--hairline); color: var(--ink); text-decoration: none; font: 300 20px/1 var(--font-body); }
.shop__reset:hover { border-color: var(--ink); background: var(--ink); color: var(--white); }
.shop__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 24px;
  justify-content: flex-start; }
.shop__sort { margin-left: auto; }
.shop__count { font-size: 14px; color: var(--muted); }
.shop__query b { color: var(--ink); font-weight: 500; }
.shop__query a { margin-left: 10px; color: var(--ink); }
.shop__sort { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.shop__sort select { font: 14px var(--font-body); padding: 10px; border: 1px solid var(--ink); border-radius: 0; background: var(--white); }
.shop .grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .shop__body { grid-template-columns: 1fr; gap: 16px; padding-block: 20px var(--space-section); }
  /* No script, no drawer: the two lists side by side, as before. */
  .filters { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .filters__box { margin: 0; } .filters__box:not([open]) ul { display: none; }
  .shop .grid { grid-template-columns: repeat(2, 1fr); }
  .shop__bar { gap: 10px; margin-bottom: 16px; }
  .shop__sort select { padding: 9px 8px; }
}
@media (max-width: 600px) {
  /* THE WORD "SORT" GOES, not the label. Filter, the count and the sort box
     come to more than 375px with it, and the bar takes two lines - which is
     the room the drawer was meant to give back. The <label> still names the
     control for a screen reader, and a box reading "Newest" says what it is. */
  .shop__sort > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .shop__sort select { max-width: 150px; }
  .shop__bar { gap: 8px; }
  .shop__reset { width: 34px; height: 34px; }
  /* WITH A COLLECTION ON, THE COUNT GIVES WAY. The name, the ×, the count
     and the sort box do not fit across 375px, and the count is the one thing
     of the four already said elsewhere - the heading over the page is the
     collection's name, and the drawer puts the number beside every one. */
  .shop__bar.has-filter .shop__count { display: none; }
}

/* -------------------------------------------------------------- product --- */
.pd { padding-bottom: var(--space-band); }
.pd__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; }
.pd__gallery { position: sticky; top: 104px; }
/* 4:5 is tall: on a wide screen the photo and its thumbnails are kept
   within the window (sticky at 104px, thumbnails 102px below), narrower
   rather than cut off. */
@media (min-width: 801px) { .pd__grid { grid-template-columns: minmax(0, min(52%, calc((100vh - 230px) * .8))) minmax(0, 1fr); } }
.pd__stage { position: relative; }
/* The enlarge mark: a square with four corner arrows, bottom left; a click
   anywhere on the photo opens the lightbox. */
.pd__zoom { position: absolute; left: 28px; bottom: 28px; width: 48px; height: 48px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .95); border: 1px solid var(--hairline); border-radius: 8px;
  color: var(--ink); pointer-events: none; }
.pd__zoom svg { width: 20px; height: 20px; }
.pd-slide.zoom { padding: 0; border: 0; background: none; cursor: zoom-in; }
/* THE PHOTOGRAPH IS A CARD, as the ones in every grid are (the client,
   21 Sep 2026) - white panel, hairline, soft shadow, the picture inset with
   a radius of its own. WITHOUT THE WORDS: a card in a grid carries a name
   and a price because it is one of twenty and has to say which; this one is
   the page, and the name is beside it in letters three times the size.
   Repeating it under the photograph would be the page saying it twice. */
.pd__main { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  background: var(--white); aspect-ratio: 4 / 5;                /* portrait, as the cards (19 Sep) */
  border: 1px solid var(--card-line); border-radius: var(--radius-card); padding: 14px;
  box-shadow: 0 1px 2px rgba(17, 17, 17, .04), 0 6px 18px rgba(17, 17, 17, .05); }
.pd__main::-webkit-scrollbar { display: none; }
.pd-slide { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 4 / 5;
  border-radius: var(--radius-photo); overflow: hidden; background: var(--cream); }
.pd-slide img { width: 100%; height: 100%; object-fit: cover; }
/* The thumbnails are the same panel, smaller: it is the same kind of thing,
   so it is the same shape. The chosen one is marked on the panel's edge
   rather than on the picture, so nothing shifts as it is chosen. */
.pd__thumbs { display: flex; gap: 10px; margin-top: 14px; overflow-x: auto; padding: 2px; }
.pd-thumb { flex: 0 0 92px; height: 115px; padding: 6px; cursor: pointer;
  background: var(--white); border: 1px solid var(--card-line); border-radius: 10px;
  box-shadow: 0 1px 2px rgba(17, 17, 17, .04);
  transition: border-color .2s ease, box-shadow .2s ease; }
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; background: var(--cream); }
.pd-thumb:hover { border-color: #E6DED3; }
.pd-thumb.is-on { border-color: var(--ink); box-shadow: 0 2px 6px rgba(17, 17, 17, .10); }
@media (prefers-reduced-motion: reduce) { .pd-thumb { transition: none; } }
.pd__brand { display: inline-block; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); text-decoration: none; margin-bottom: 8px; }
.pd__title { font-size: 34px; }
.pd__price { font-size: 22px; color: var(--gold-text); margin: 12px 0 16px; }
.pd__price s { color: var(--text); font-size: 18px; margin-right: 10px; }
.pd__pre { background: var(--cream); color: var(--espresso); padding: 10px 14px; font-size: 14px; margin-bottom: 16px; }
.pd__short { margin-bottom: 20px; }
.pd__label { font-size: 14px; color: var(--ink); margin-bottom: 10px; }
.pd__size-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.pd-size { min-width: 52px; padding: 11px 14px; border: 1px solid var(--hairline); background: var(--white); font: 15px var(--font-body); color: var(--ink); cursor: pointer; }
.pd-size:hover { border-color: var(--ink); }
.pd-size[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--white); }
.pd-size.is-out { color: #aaa; text-decoration: line-through; cursor: not-allowed; }
.pd__buy { display: flex; gap: 12px; align-items: stretch; }
.pd__add { flex: 1; }
.pd__error { color: #9B1C1C; font-size: 14px; margin-top: 10px; }
.pd__stock { color: var(--bronze); font-size: 14px; font-weight: 600; margin-top: 10px; min-height: 1em; }
/* Pay later: the three services' official marks, one height, each edged with
   a 1px stroke (agency, 18 Sep 2026) - drawn around the mark, never in it:
   the pill and the badge keep their own shapes, and Affirm, which has no
   badge, gets a white one. */
.paylater { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-top: 12px; }
.paylater__lead { margin-right: 2px; }
.paylater__marks { display: flex; align-items: center; gap: 8px; }
.pl { width: auto; display: block; box-sizing: content-box; border: 1px solid #CFC6BA; }
.pl--afterpay { height: 26px; border-radius: 999px; }
.pl[hidden] { display: none; }
.pl--klarna { height: 26px; border-radius: 3px; }
.pl--affirm { height: 16px; padding: 5px 9px; border-radius: 3px; background: var(--white); }
.drawer__foot .paylater { justify-content: center; margin-top: 0; }
/* Details (the description) and the cream box of notes, in the right column. */
.pd__details { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--hairline); }
.pd__details h2 { font-size: 22px; margin-bottom: 12px; }
.pd__details .rich { font-size: 15px; line-height: 1.75; }
.pd__details .rich p { margin: 0 0 12px; }
.pd__details .rich h3, .pd__details .rich h4 { font-size: 18px; margin: 18px 0 6px; }
.pd__notes { margin-top: 24px; background: var(--cream); padding: 24px 26px; display: grid; gap: 18px; font-size: 14px; }
.pd__notes h3 { font-size: 17px; margin-bottom: 4px; }
.pd__notes a { color: var(--ink); }
.pd__pre-note { color: var(--ink); line-height: 1.6; }
/* The particulars: label and value in two columns, hairlines between. */
.pd__meta { margin: 20px 0 0; display: grid; grid-template-columns: max-content 1fr; font-size: 14px; }
.pd__meta dt, .pd__meta dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.pd__meta dt { padding-right: 24px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.4px; font-size: 11px; line-height: 21px; }
.pd__meta dd { color: var(--ink); }
.pd__meta a { color: var(--ink); }
/* You may also like: cream, a quieter heading with room under it. */
.pd-more__title { font-size: 26px; margin-bottom: 40px; }
.pd__short p { margin: 0 0 8px; }
.pd-missing { text-align: center; padding: 90px 0; display: grid; gap: 16px; justify-items: center; }
.pd.is-loading .pd__info { opacity: .6; }
@media (max-width: 800px) {
  .pd__grid { grid-template-columns: 1fr; gap: 24px; } .pd__title { font-size: 28px; }
  .pd__gallery { position: static; }
  .pd-more__title { font-size: 22px; margin-bottom: 28px; }
}

/* ------------------------------------------------------------- checkout --- */
.co-head { display: flex; justify-content: center; align-items: center; position: relative; padding: 18px var(--space-2); border-bottom: 1px solid var(--hairline); }
.co-head .logo img { width: 110px; }
/* ONE WAY BACK, and it is the bag. The breadcrumb that used to sit above the
   form offered three (Home, Cart, and itself) from a page whose whole job is
   to be finished. */
.co-head__back { position: absolute; left: var(--space-2); display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.co-head__back:hover { color: var(--ink); }
.co-foot { display: flex; gap: 18px; justify-content: center; padding: 26px var(--space-2); font-size: 13px; border-top: 1px solid var(--hairline); }
.co-foot a { color: var(--muted); }
/* FIFTY-FIFTY FROM THE MIDDLE, as Shopify's checkout is laid out
   (docs/checkout-plan.md, phase 1 item 1; built 20 Sep 2026).

   IT WAS `1fr | 440px`, which is not a split: the summary took a fixed
   440px off the right and the form took everything else, so the wider the
   screen the further left the form's content sat inside its own column.
   Measured at 1440px it left 345px empty on the left and 15px on the right
   - the whole page visibly shoved to one side, and getting worse with
   width. The plan measured the same thing on 19 Sep and called it
   "lopsided"; the agency called it skewed, which is the same word.

   Two halves now. The form hugs the centre line from the left and the
   summary from the right, each with its own max width, so the two columns
   meet in the middle of the window at any size and the tint still runs to
   the right edge. */
.co__body { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 140px); }
.co__form { padding: 22px clamp(16px, 4vw, 56px) 48px; max-width: 620px; justify-self: end; width: 100%; }
.co__summary { background: #FAF8F5; border-left: 1px solid var(--hairline);
  padding: 40px clamp(16px, 3vw, 44px); }
/* The tint fills its half; the content inside it stops at a readable width
   and stays beside the form rather than drifting to the far edge. */
.co__summary > * { max-width: 460px; }
/* STICKY on a wide screen: the bag and the total stay beside the form all
   the way down it. A bag taller than the window scrolls inside itself, so
   the total at its foot is never out of reach. */
.co__summary-in { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; }
.co__step { margin-bottom: 30px; }
.co__step h2 { font: 400 22px var(--font-display); margin-bottom: 12px; }
.co__hint { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.co__pay { width: 100%; padding-block: 18px; font-size: 16px; }
/* What is still missing, when Pay is pressed too soon (checkout.js). */
.co__need { margin: 0 0 10px; font-size: 14px; color: #9B1C1C; }
.co__need[hidden] { display: none; }
.co__legal { font-size: 12px; color: var(--muted); margin-top: 14px; }
.co__message { background: #FDECEC; color: #7A1616; padding: 12px 14px; font-size: 14px; margin-bottom: 18px; }
/* What went wrong, then what to do about it (checkout.js `say`). The second
   line is smaller but the same ink: it is the half that tells somebody
   whether to reach for another card or call their bank. */
.co__message-what { display: block; font-weight: 500; }
.co__message-next { display: block; margin-top: 5px; font-size: 13px; }
.co__problems { border: 1px solid #9B1C1C; padding: 16px; margin-bottom: 20px; display: grid; gap: 10px; }
.co__problems ul { margin: 0; padding-left: 18px; }
/* Mend the cart, or go back to it: the mend leads, so it is the solid one. */
.co__fixes { display: flex; flex-wrap: wrap; gap: 10px; }
.btn--quiet { background: none; border-color: var(--hairline); }
.co__redirect { padding: 40px 0; text-align: center; color: var(--muted); }
.co__empty { text-align: center; padding: 90px var(--space-2); display: grid; gap: 16px; justify-items: center; }
.co-methods { display: grid; border: 1px solid #CFC6BA; }
.co-method { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; cursor: pointer; font-size: 15px; }
.co-method + .co-method { border-top: 1px solid #CFC6BA; }
.co-method input { accent-color: var(--ink); width: 18px; height: 18px; margin: 0; }
.co-method__note { display: block; font-size: 12px; color: var(--muted); }
.co-method__price { font-weight: 500; color: var(--ink); }
.co-methods .co__hint { padding: 14px 16px; margin: 0; }
.co-items { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 14px; }
.co-item { display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: center; }
.co-item__photo { position: relative; width: 52px; height: 52px; border: 1px solid var(--hairline);
  border-radius: 8px; background: var(--white); overflow: hidden; }
.co-item__photo img { width: 100%; height: 100%; object-fit: cover; }
.co-item__qty { position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--muted);
  color: var(--white); font-size: 11px; line-height: 20px; text-align: center; padding: 0 5px; }
.co-item__name { font-size: 14px; color: var(--ink); font-weight: 500; }
.co-item__meta { font-size: 12px; color: var(--muted); }
.co-item__price { font-size: 14px; color: var(--ink); }
.co-code { display: flex; gap: 10px; }
.co-code input { flex: 1; min-width: 0; font: 15px var(--font-body); padding: 12px 14px; border: 1px solid #CFC6BA; border-radius: 0; background: var(--white); }
.co-code .btn { padding-inline: 22px; }
.co-code__msg { font-size: 13px; color: var(--muted); min-height: 18px; margin: 6px 0 12px; }
.co-rows { display: grid; gap: 8px; font-size: 14px; }
.co-row { display: flex; justify-content: space-between; gap: 12px; color: var(--text); }
.co-row--discount span:first-child { display: flex; gap: 8px; align-items: center; }
.co-row--total { font-size: 18px; color: var(--ink); margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.co-row--total small { font-size: 12px; color: var(--muted); }
.co-link { border: 0; background: none; padding: 0; color: var(--muted); text-decoration: underline; font-size: 12px; cursor: pointer; }

/* The wallets, above the form. Hidden by [hidden] until Stripe says a button
   will draw, so the rule never sits above an empty box. */
.co-express { margin-bottom: 26px; }
.co-express[hidden] { display: none; }

/* The hold's countdown (checkout.js). Cream and quiet while there is time;
   the clock turns bronze in the last two minutes; when it ends, the panel
   says so plainly and offers to hold the pieces again. */
.co-hold { margin-bottom: 22px; padding: 12px 14px; background: var(--cream); border: 1px solid var(--hairline); }
.co-hold[hidden] { display: none; }
.co-hold__now { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); }
.co-hold__now svg { flex: none; color: var(--bronze); }
.co-hold__clock { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .02em; }
.co-hold.is-low .co-hold__clock { color: var(--bronze); }
.co-hold__over { display: grid; gap: 10px; }
.co-hold__over[hidden] { display: none; }
.co-hold__over p { margin: 0; font-size: 14px; color: var(--ink); }
.co-hold.is-over .co-hold__now { display: none; }
.co-hold.is-over { border-color: var(--bronze); }
/* "Pay in full, or over time with Klarna or Affirm." (checkout.html) */
.co-paylater { margin: -6px 0 12px; font-size: 13px; color: var(--text); }
/* "Filled in from your last visit. Not you? ..." (checkout.js, WHAT THEY TYPED) */
.co-me { margin: -4px 0 12px; font-size: 13px; color: var(--muted); }
.co-me[hidden] { display: none; }
/* "If you leave before paying, we may send one email ..." (recovery.py) */
.co-remind { margin: 8px 0 0; }
/* The store's own phone box, optional, under Stripe's email (checkout.js). */
.co-phone { margin-top: 12px; }
.co-phone__why { margin: 6px 0 0; }
/* The newsletter box under it (checkout.js; signup.from_checkout). */
.co-news { margin-top: 12px; }
.co-news[hidden] { display: none; }
.co-express__or { display: flex; align-items: center; gap: 14px; margin-top: 22px; font-size: 12.5px; color: var(--muted); }
.co-express__or::before, .co-express__or::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }

/* THE CARD FIELDS, ENCLOSED. Baymard: a payment form is judged secure by
   whether it looks like a separate, enclosed thing; one padlock inside it
   reads as confident where a row of badges reads as protesting too much. */
.co-card { border: 1px solid #CFC6BA; background: var(--white); }
.co-card__head { display: flex; align-items: center; gap: 7px; padding: 11px 16px; border-bottom: 1px solid var(--hairline);
  background: #FAF8F5; font-size: 12.5px; color: var(--muted); }
.co-card__head svg { flex: none; color: var(--ink); }
.co-card > div { padding: 16px; }
.co__final { font-size: 13px; color: var(--text); margin: 22px 0 14px; }
.co__final a { color: var(--ink); }
/* The email is 26 characters and the phone will not break: on a 375 px
   screen the line runs off the edge without this. */
.co__ask { font-size: 12.5px; color: var(--muted); margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hairline); overflow-wrap: anywhere; }
.co__ask a { color: var(--ink); }
.co-preorder { font-size: 13px; line-height: 1.5; color: var(--text); margin-top: 10px; }

/* The discount box, shut. An open one sends people off hunting for a code
   they have not got, and not all of them come back (Baymard). */
.co-code__wrap { margin-bottom: 18px; border-bottom: 1px solid var(--hairline); padding-bottom: 14px; }
.co-code__wrap > summary { cursor: pointer; font-size: 13.5px; color: var(--ink); list-style: none; display: flex; align-items: center; gap: 7px; }
.co-code__wrap > summary::-webkit-details-marker { display: none; }
.co-code__wrap > summary::before { content: "+"; font-size: 15px; color: var(--muted); }
.co-code__wrap[open] > summary { margin-bottom: 12px; }
.co-code__wrap[open] > summary::before { content: "\2212"; }

.co__toggle { display: none; }
.co-bar { display: none; }
@media (max-width: 900px) {
  .co__body { grid-template-columns: 1fr; }
  .co__toggle { display: flex; justify-content: space-between; width: 100%; padding: 16px var(--space-2); border: 0; border-bottom: 1px solid var(--hairline);
    background: #FAF8F5; font: 15px var(--font-body); color: var(--ink); cursor: pointer; order: -2; }
  .co__summary { order: -1; display: none; border-left: 0; border-bottom: 1px solid var(--hairline); padding: 22px var(--space-2); }
  .co__summary-in { position: static; max-height: none; overflow: visible; }
  .co.summary-open .co__summary { display: block; }
  .co__form { justify-self: stretch; max-width: none; padding-inline: var(--space-2); }
  .co__toggle-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .co__thumbs { display: flex; }
  .co__thumbs img { width: 30px; height: 30px; object-fit: cover; border: 1px solid var(--hairline); background: var(--white); }
  .co__thumbs img + img { margin-left: -8px; }
  .co.summary-open .co__thumbs { display: none; }

  /* PINNED. On a phone the payment section starts below the first screen and
     Pay is about a screen and a half down; this keeps the total and the
     button within a thumb the whole way. The in-form button stays where it
     belongs for anyone who scrolls to the end. */
  .co-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; gap: 14px; align-items: center;
    padding: 10px var(--space-2) calc(10px + env(safe-area-inset-bottom)); background: var(--white);
    border-top: 1px solid var(--hairline); box-shadow: 0 -2px 14px rgba(0, 0, 0, .07); }
  .co-bar[hidden] { display: none; }
  .co-bar__total { font-size: 13px; color: var(--muted); white-space: nowrap; }
  .co-bar__total b { display: block; font-size: 17px; color: var(--ink); }
  .co-bar .btn { flex: 1; padding-block: 14px; }
  /* ONE PAY BUTTON ON A PHONE, and it is the pinned one. Two of them a
     thumb apart, saying the same thing, is a question the customer has to
     answer before paying. */
  .co__pay { display: none; }
  .co__final { margin-bottom: 0; }
  /* Room for the bar, so it never covers the last line of the page. */
  .co-foot { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* ------------------------------------------------------------- thank you --- */
.done { max-width: 620px; text-align: center; padding-block: 90px; }
.done > div { display: grid; gap: 16px; justify-items: center; }
.done h1 { font-size: 34px; }

/* THE ORDER ON THE THANK-YOU PAGE (20 Sep 2026), as WooCommerce's
   order-received page has it. Centred like the thanks above it, but the
   order itself is a document and reads left: a column of prices you cannot
   run your eye down is not a receipt. */
.done__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px 24px; width: 100%; margin: 26px 0 8px; padding: 18px 20px;
  text-align: left; background: var(--sand, #F7F3EE); }
.done__facts div { display: grid; gap: 2px; }
.done__facts dt { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .62; }
.done__facts dd { margin: 0; font-weight: 600; }
.done__h2 { width: 100%; margin: 22px 0 0; text-align: left; font-size: 18px; }
.done__items { width: 100%; border-collapse: collapse; text-align: left; }
.done__items th, .done__items td { padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,.10);
  font-weight: 400; vertical-align: middle; }
.done__items tbody th { display: flex; align-items: center; gap: 12px; }
.done__items img { width: 56px; height: 56px; object-fit: cover; flex: none; }
.done__items td { text-align: right; white-space: nowrap; }
.done__items tfoot th { text-align: left; opacity: .72; }
.done__pre { display: block; font-style: normal; font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; opacity: .62; }
.done__items .done__total th, .done__items .done__total td { font-weight: 600; border-bottom: 0;
  padding-top: 14px; }
.done__where { width: 100%; text-align: left; }
.done__where address { font-style: normal; line-height: 1.6; margin-top: 6px; }
@media (max-width: 560px) {
  .done__items img { width: 44px; height: 44px; }
}

/* Handing off to Stripe's hosted page (no publishable key): only the message. */
.co--redirect .co__summary, .co--redirect .co__toggle, .co--redirect .co-bar,
.co--blocked .co__summary, .co--blocked .co__toggle, .co--blocked .co-bar { display: none !important; }
.co--redirect .co__body, .co--blocked .co__body { grid-template-columns: 1fr; min-height: 50vh; }
.co--redirect .co__form, .co--blocked .co__form { justify-self: center; max-width: 560px; }
.co__redirect { padding: 80px 0; text-align: center; color: var(--muted); display: grid; gap: 18px; justify-items: center; }
.co__spinner { width: 28px; height: 28px; border: 2px solid var(--hairline); border-top-color: var(--ink); border-radius: 50%; animation: co-spin .8s linear infinite; }
@keyframes co-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .co__spinner { animation: none; } }

/* ----------------------------------------------------------- my account --- */
/* My Account (account.html, account.js): sign in by code; the dashboard,
   orders and one order, with a side menu on wide screens. Square, like the
   rest of the site; cream for the boxes. */
.acct-band { padding-block: 32px 36px; }
.acct { padding-block: 48px 96px; }
.acct-wait { color: var(--muted); }
.acct-error { color: #9B1C1C; }
.acct-muted { color: var(--muted); font-size: 14px; }
.acct-fine { font-size: 13px; color: var(--muted); line-height: 1.6; }
.acct-link { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); text-decoration: underline; cursor: pointer; }
.acct-card { background: var(--cream); padding: 32px; display: grid; gap: 16px; }
.acct-card h2 { font-size: 26px; }
.acct-card .btn { justify-self: start; min-width: 200px; }
.field input.acct-code { font-size: 22px; letter-spacing: 6px; }
/* Signed out: the form on white, what an account gives on cream, side by
   side in one bordered card; stacked on a phone. */
.acct-signin { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); max-width: 940px; margin-inline: auto;
  border: 1px solid var(--hairline); background: var(--white); }
.acct-signin__form { padding: 48px 52px; }
.acct-signin__form form { display: grid; gap: 18px; }
.acct-signin__form .eyebrow { margin: 0; color: var(--bronze); }
.acct-signin__form h2 { font-size: 32px; line-height: 1.15; }
.acct-signin__lead { margin: 0; color: var(--text); line-height: 1.6; }
.acct-signin__lead .acct-link { margin-left: 6px; font-size: 14px; }
.acct-wide { width: 100%; padding-block: 15px; }
.acct-code-field input.acct-code { font: 500 28px/1 var(--font-body); letter-spacing: 14px; text-align: center; padding: 16px 14px 16px 28px; }
.acct-code-field input.acct-code::placeholder { color: #D9D0C3; }
.acct-link:disabled { color: var(--muted); text-decoration: none; cursor: default; }
.acct-signin__why { background: var(--cream); padding: 48px 44px; display: grid; align-content: center; gap: 22px; }
.acct-signin__why h3 { font-size: 24px; }
.acct-why { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.acct-why li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; font-size: 14px; line-height: 1.5; color: var(--text); }
.acct-why .acct-icon { width: 40px; height: 40px; padding: 9px; background: var(--white); border-radius: 50%; color: var(--ink); }
.acct-why b { display: block; font-weight: 600; color: var(--ink); font-size: 15px; }
.acct-icon { width: 20px; height: 20px; flex: none; }

/* Signed in: who, and the menu, down the left; the page on the right. */
.acct-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 48px; align-items: start; }
.acct-side { position: sticky; top: 110px; display: grid; gap: 18px; }
/* The hero (option A, 19 Sep): cream, the page's name, and whose account
   it is on the right - a black initial, the name and the email. */
.acct-band { background: var(--cream); padding-block: 40px 48px; }
.acct-band__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.acct-band__top .crumbs { padding-bottom: 18px; }
/* Staff signed in to the admin too (account.js): the way back, top right. */
.acct-admin { display: inline-flex; gap: 8px; align-items: center; flex: none; padding: 7px 14px; border: 1px solid var(--ink);
  color: var(--ink); background: var(--white); font-size: 13px; letter-spacing: 1px; text-transform: uppercase;
  text-decoration: none; }
.acct-admin:hover { background: var(--ink); color: var(--white); }
.acct-admin .acct-icon { width: 16px; height: 16px; }
.acct-admin[hidden] { display: none; }
.acct-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.acct-hero__words { display: grid; gap: 10px; min-width: 0; }
.acct-hero__eyebrow { margin: 0; color: var(--bronze); }
.acct-hero .sec-title { margin: 0; }
.acct-hero__sub { margin: 0; color: var(--text); font-size: 15px; }
.acct-me { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center; max-width: 320px;
  padding-left: 24px; border-left: 1px solid #E3D5C3; }
.acct-me__initial { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ink);
  color: var(--white); font: 400 26px/1 var(--font-display); }
.acct-me__words { display: grid; min-width: 0; }
.acct-me__words b { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-me__words span { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-nav { display: grid; }
.acct-nav a { display: flex; gap: 12px; align-items: center; padding: 12px 14px; color: var(--text); text-decoration: none;
  font-size: 15px; border-left: 2px solid transparent; }
.acct-nav a:hover { color: var(--ink); background: #FBF7F1; }
.acct-nav a[aria-current] { color: var(--ink); font-weight: 600; border-left-color: var(--ink); background: #FBF7F1; }
.acct-nav__out { margin-top: 8px; border-top: 1px solid var(--hairline); padding-top: 16px !important; }
.acct-main { display: grid; gap: 28px; min-width: 0; }
.acct-short { display: none; }

/* The dashboard. */
.acct-dash { display: grid; gap: 28px; }
.acct-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.acct-tile { display: grid; gap: 6px; padding: 22px; border: 1px solid var(--hairline); color: var(--ink); text-decoration: none;
  background: var(--white); transition: border-color .15s ease; }
.acct-tile:hover { border-color: var(--ink); }
.acct-tile .acct-icon { width: 22px; height: 22px; color: var(--bronze); }
.acct-tile b { font: 400 34px/1.1 var(--font-display); margin-top: 6px; }
.acct-tile span { font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.acct-panel { border: 1px solid var(--hairline); padding: 24px 26px; display: grid; gap: 16px; align-content: start; background: var(--white); }
.acct-panel h2 { font-size: 22px; }
.acct-panel p { margin: 0; line-height: 1.6; }
.acct-panel--cream { background: var(--cream); border-color: var(--cream); }
.acct-panel__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.acct-more { justify-self: start; font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink); }
.acct-latest { display: grid; gap: 18px; color: var(--ink); text-decoration: none; }
.acct-latest:hover .acct-latest__id b { text-decoration: underline; text-underline-offset: 3px; }
.acct-latest__top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.acct-latest__id { display: grid; gap: 2px; }
.acct-latest__total { font-weight: 600; font-size: 17px; }
.acct-thumbs { display: flex; gap: 10px; }
.acct-thumbs img { width: 64px; height: 64px; object-fit: cover; background: var(--cream); border-radius: 8px; }
/* The latest order's progress: three steps on a line. */
.acct-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); counter-reset: step; }
.acct-steps li { position: relative; padding-top: 22px; font-size: 13px; color: var(--muted); }
.acct-steps li::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--hairline); }
.acct-steps li::after { content: ""; position: absolute; left: 0; top: 1px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--hairline); }
.acct-steps li.is-done, .acct-steps li.is-now { color: var(--ink); }
.acct-steps li.is-done::before { background: var(--ink); }
.acct-steps li.is-done::after { background: var(--ink); border-color: var(--ink); }
.acct-steps li.is-now::after { border-color: var(--ink); background: var(--bronze); }
.acct-steps li.is-now { font-weight: 600; }
.acct-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.acct-hours { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.acct-hours li { display: flex; justify-content: space-between; gap: 12px; }
.acct-hours li span:first-child { color: var(--muted); }
.acct-empty { justify-items: start; }
.acct-orders { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.acct-ocard { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 16px;
  border: 1px solid var(--hairline); color: var(--ink); text-decoration: none; background: var(--white); }
.acct-ocard:hover { border-color: var(--ink); }
/* SMALLER, AND ROUNDED, AS THE BAG IS (the client, 21 Sep 2026). These are
   lists - an order and what was in it - and a list is read down. A grid of
   pieces to browse is a different thing and keeps its cards. */
.acct-ocard__pic { width: 52px; height: 52px; background: var(--cream); overflow: hidden; border-radius: 8px; }
.acct-ocard__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acct-ocard__words { display: grid; gap: 4px; min-width: 0; }
.acct-ocard__end { display: grid; gap: 6px; justify-items: end; }
.acct-ocard__total { font-weight: 600; }
.acct-pill { display: inline-block; font-size: 12px; letter-spacing: .5px; padding: 4px 10px; border: 1px solid var(--hairline); color: var(--ink); background: var(--white); white-space: nowrap; }
.acct-pill--open { border-color: var(--bronze); color: var(--gold-text); }
.acct-pill--done { background: var(--ink); border-color: var(--ink); color: var(--white); }
.acct-pill--closed { color: var(--muted); }
.acct-order { display: grid; gap: 24px; }
.acct-order__head { display: grid; gap: 6px; }
.acct-order__head p { margin: 0; }
.acct-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.acct-ask { max-width: 620px; }
.acct-ask__row { display: flex; gap: 18px; align-items: center; }
.acct-sent { background: var(--cream); padding: 16px 20px; margin: 0; }
.acct-block h2, .acct-addr__box h2 { font-size: 20px; margin-bottom: 12px; }
.acct-items { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.acct-item { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 0;
  border-bottom: 1px solid var(--hairline); }
.acct-item__pic { width: 56px; height: 56px; background: var(--cream); overflow: hidden; display: block; border-radius: 8px; }
.acct-item__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acct-item__words { display: grid; gap: 4px; min-width: 0; }
.acct-item__title { color: var(--ink); text-decoration: none; }
a.acct-item__title:hover { text-decoration: underline; }
.acct-totals { margin: 16px 0 0 auto; border-collapse: collapse; min-width: min(100%, 320px); font-size: 15px; }
.acct-totals th { text-align: left; font-weight: 400; color: var(--text); padding: 5px 24px 5px 0; }
.acct-totals td { text-align: right; padding: 5px 0; }
.acct-totals .is-strong th, .acct-totals .is-strong td { font-weight: 600; color: var(--ink); border-top: 1px solid var(--hairline); padding-top: 10px; }
.acct-addr { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.acct-addr__box { background: var(--cream); padding: 22px 24px; }
.acct-addr__box p { margin: 0; line-height: 1.6; }
.acct-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.acct-notes p { margin: 4px 0 0; white-space: pre-line; }
.acct-print-only { display: none; }
.field select { font: 15px/1.4 var(--font-body); padding: 12px 14px; border: 1px solid #CFC6BA; border-radius: 0;
  background: var(--white); color: var(--ink); width: 100%; }
.field select:focus { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
.acct-book { display: grid; gap: 20px; }
.acct-book p { margin: 0; }
.acct-book__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.acct-addrcard { border: 1px solid var(--hairline); padding: 20px 22px; display: grid; gap: 12px; align-content: start; background: var(--white); }
.acct-addrcard.is-default { border-color: var(--ink); }
.acct-addrcard .acct-pill { justify-self: start; }
.acct-addrcard p { margin: 0; line-height: 1.6; }
.acct-addrcard__tools { display: flex; flex-wrap: wrap; gap: 14px; font-size: 14px; }
.acct-addr-form { max-width: 620px; }
.acct-addr-form__row { display: grid; grid-template-columns: 1.3fr 1fr 0.8fr; gap: 14px; }
/* Google's address suggestions under the street box (account.js; places.py):
   over the fields below it rather than pushing them down, one tap each. The
   foot is Google's attribution in the form its policy sets for text - Roboto
   (or the nearest), 12px, weight 400, #5E5E5E. */
.acct-street { position: relative; }
.acct-suggest { position: absolute; left: 0; right: 0; top: 100%; margin-top: 2px; z-index: 25;
  background: var(--white); border: 1px solid var(--ink); box-shadow: 0 14px 30px rgba(17, 17, 17, .12); }
.acct-suggest[hidden] { display: none; }
.acct-suggest__list { list-style: none; margin: 0; padding: 4px 0; }
.acct-suggest__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 11px 14px;
  cursor: pointer; font-size: 15px; line-height: 1.35; color: var(--ink); }
.acct-suggest__item[aria-selected="true"], .acct-suggest__item:hover { background: var(--cream); }
.acct-suggest__main { font-weight: 500; }
.acct-suggest__rest { font-size: 13px; color: var(--muted); }
.acct-suggest__credit { margin: 0; padding: 6px 14px 8px; text-align: right;
  font: 400 12px/1.3 Roboto, Arial, Helvetica, sans-serif; color: #5E5E5E; }
.co-save { margin-top: 12px; font-size: 14px; }
@media (max-width: 600px) { .acct-addr-form__row { grid-template-columns: 1fr 1fr; } .acct-addr-form__row > :first-child { grid-column: 1 / -1; } }
@media (max-width: 800px) {
  .acct-grid { grid-template-columns: 1fr; gap: 24px; }
  .acct-side { position: static; gap: 14px; }
  .acct-band { padding-block: 28px 32px; }
  .acct-hero { flex-direction: column; align-items: stretch; gap: 20px; }
  .acct-me { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; max-width: none; padding: 16px 0 0; border-left: 0;
    border-top: 1px solid #E3D5C3; }
  .acct-me__initial { width: 44px; height: 44px; font-size: 21px; }
  .acct-signin { grid-template-columns: 1fr; }
  .acct-signin__form { padding: 32px 22px; }
  .acct-signin__form h2 { font-size: 27px; }
  .acct-signin__why { padding: 28px 22px; }
  .acct-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .acct-tile { padding: 14px 12px; }
  .acct-tile b { font-size: 26px; }
  .acct-tile span { font-size: 11px; letter-spacing: .8px; }
  .acct-pair { grid-template-columns: 1fr; }
  .acct-panel { padding: 20px 18px; }
  .acct-thumbs img { width: 52px; height: 52px; }
  .acct-nav { position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; border-top: 0;
    border-bottom: 1px solid var(--hairline); }
  .acct-nav a { justify-content: center; padding: 9px 6px; border: 1px solid var(--hairline); font-size: 13px; gap: 6px;
    background: var(--white); white-space: nowrap; }
  .acct-long { display: none; }
  .acct-short { display: inline; }
  .acct-nav a[aria-current] { background: var(--ink); color: var(--white); border-color: var(--ink); }
  .acct-nav .acct-icon { width: 17px; height: 17px; }
  .acct-nav__out { margin-top: 0; padding-top: 9px !important; }
  .acct-card { padding: 24px 20px; }
  .acct-ocard { grid-template-columns: 52px minmax(0, 1fr); }
  .acct-ocard__pic { width: 52px; height: 52px; }
  .acct-ocard__end { grid-column: 2; justify-items: start; grid-auto-flow: column; justify-content: space-between; align-items: center; }
  .acct-item { grid-template-columns: 56px minmax(0, 1fr); }
  .acct-item__pic { width: 56px; height: 56px; }
  .acct-item__price { grid-column: 2; }
  .acct-actions .btn { flex: 1 1 calc(50% - 6px); padding-inline: 12px; }
}
/* Print a receipt: the order alone, in black on white. */
@media print {
  .bar, .head, .foot, .drawer, .skip, .acct-band .crumbs, .acct-nav, .acct-actions, .acct-ask, .acct-sent,
  [data-again-note], [data-menu-drawer], .search-panel { display: none !important; }
  .acct-band, .acct { padding-block: 12px; background: none; }
  .acct-grid { display: block; }
  .acct-addr__box, .acct-pill { background: none; border: 1px solid #999; color: #000; }
  /* A card's shadow prints as a smear of toner; the border says the same thing. */
  .card, .dir-card { box-shadow: none; border-color: #999; }
  .acct-print-only { display: block; margin-top: 24px; }
  a { color: #000; text-decoration: none; }
}
.acct-details { display: grid; gap: 24px; max-width: 680px; }
.acct-details .acct-card .btn, .acct-offer .btn { min-width: 0; }
.acct-details form { display: grid; gap: 16px; }
.acct-offer { margin-bottom: 24px; }
/* A mobile number with its country code (_macros.html phone_field). */
.phone-field__row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); }
.phone-field__row select { border-right: 0; background-color: var(--white); }
.phone-field__row input { min-width: 0; }
.phone-field__hint { font-size: 12.5px; color: var(--muted); }
/* The newsletter topics: each a box, its name in bold above the words. */
.acct-topics { display: grid; gap: 14px; }
.acct-topic { font-size: 14px; }
.acct-topic__name { display: block; font-weight: 600; color: var(--ink); font-size: 15px; margin-bottom: 2px; }
.acct-thanks { margin-bottom: 24px; border-left: 3px solid var(--bronze); }
.acct-thanks:focus { outline: none; }
.acct-thanks h2 { font-size: 24px; }
.acct-thanks p { margin: 0; }
.acct-newsletters { display: grid; gap: 24px; max-width: 680px; }
.acct-newsletters .acct-card p { margin: 0; }
.acct-saved { font-size: 14px; color: var(--ink); }
/* My Account > Wishlist, signed out. */
.acct-guest-wish { display: grid; gap: 28px; }
.acct-guest-wish__ask { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; }
.acct-guest-wish__ask p { margin: 6px 0 0; }
@media (max-width: 700px) { .acct-guest-wish__ask { grid-template-columns: 1fr; } }
/* The first heart while signed out (wishlist.js): a note at the bottom. */
.wish-toast { position: fixed; left: 50%; bottom: 20px; z-index: 60; width: min(440px, calc(100vw - 32px));
  display: grid; grid-template-columns: 28px minmax(0, 1fr) 24px; gap: 4px 12px; align-items: start;
  padding: 16px 16px 16px 18px; background: var(--ink); color: var(--white); box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.wish-toast.is-open { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.wish-toast:empty { display: none; }
.wish-toast__heart svg { width: 24px; height: 24px; fill: var(--white); }
.wish-toast p { margin: 0; font-size: 14px; line-height: 1.5; }
.wish-toast p b { font-weight: 600; display: block; }
.wish-toast__links { grid-column: 2; display: flex; gap: 18px; margin-top: 6px; }
.wish-toast__links a { color: var(--white); font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase;
  text-underline-offset: 3px; }
.wish-toast__close { grid-column: 3; grid-row: 1; border: 0; background: none; color: var(--white); font-size: 22px;
  line-height: 1; cursor: pointer; padding: 0; opacity: .8; }
.wish-toast__close:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .wish-toast { transition: none; } }

/* ------------------------------------------------------------- wishlist --- */
/* The heart (wishlist.js): on every card, in the photo's top corner, and
   beside Add to cart. Filled when saved. Square, like the card's bag. */
.wish { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 0;
  background: rgba(255, 255, 255, .94); color: var(--ink); cursor: pointer; box-shadow: 0 2px 8px rgba(17, 17, 17, .12); }
.wish svg { width: 19px; height: 19px; fill: none; transition: transform .15s ease; }
.wish[aria-pressed="true"] svg { fill: currentColor; }
.wish:hover svg { transform: scale(1.08); }
.wish:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.card__wish { position: absolute; top: 8px; right: 8px; z-index: 2; }
.pd__wish { width: 54px; height: auto; align-self: stretch; border: 1px solid var(--ink); box-shadow: none; background: var(--white); }
.pd__wish svg { width: 21px; height: 21px; }
@media (prefers-reduced-motion: reduce) { .wish svg { transition: none; } }
.acct-wish { display: grid; gap: 32px; }
.acct-wish .grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .acct-wish .grid { grid-template-columns: repeat(2, 1fr); } }
.acct-share { max-width: 620px; }
.acct-share__link { display: flex; gap: 10px; }
.acct-share__link input { flex: 1; min-width: 0; font: 14px var(--font-body); padding: 11px 12px; border: 1px solid #CFC6BA; background: var(--white); }
.shared-empty { text-align: center; display: grid; gap: 16px; justify-items: center; padding-block: 24px; }