:root{
    --white:#ffffff;
    --linen:#faf6f0;
    --linen-deep:#f1e9dd;
    --blush:#f7e2e0;
    --strip-fade:linear-gradient(180deg, rgba(247,226,224,1) 0, rgba(247,226,224,0.75) 35%, rgba(247,226,224,0) 100%);   /* the header's pink top edge melting away (on phones, from the iPhone's status strip) */
    --blush-deep:#e9b9ba;
    --blush-line:#d99a9c;
    --wood-dark:#d9cdb4;
    --iron:#332d28;
    --ink:#2a2420;
    --ink-soft:#6b5f52;
    --line:rgba(42,36,32,0.12);
    --shadow:rgba(42,36,32,0.22);
    /* Sales: one deeper rose that reads clearly against the blush palette. */
    --sale:#b23a48;
    --sale-hot:#d62839;   /* "Only 1 left": brighter, to read as urgent */
    /* Every photo hover (category tiles, product cards, panels): one
       duration and curve, so a fade and a zoom read as one move. */
    --ease-out:cubic-bezier(.2,.7,.2,1);   /* the site's curve: things settle into place */
    --hover-move:.9s var(--ease-out);
    --error:#a24a4a;   /* form errors and warnings */
    /* Every font-family declaration site-wide reads through these two
       tokens instead of hardcoding the actual family names directly, so
       the whole typeface pairing can be swapped with one override here
       (and the matching Google Fonts <link> on every page) instead of
       touching every individual selector. Serif is Playfair Display: the
       client first chose Bodoni Moda, but its hairlines were too thin to
       read at heading sizes; Playfair keeps the boutique didone feel with
       sturdier strokes and a larger x-height. */
    --font-serif:'Playfair Display', serif;
    --font-sans:'Jost', sans-serif;
  }
  *{ margin:0; padding:0; box-sizing:border-box; }
  /* The whole site is sized in rem off this root, which is 16px up to a
     1440px-wide window and grows in proportion beyond it -- so zooming the
     browser out (a wider window in CSS px) keeps pictures, text and buttons
     the same size on screen instead of shrinking into dead space. New styles:
     size in rem / vw / %, never fixed px (1-2px hairlines excepted). */
  /* Type and spacing hold steady on big monitors: the root size used to grow with the window
     (font-size:max(100%, calc(100vw / 90))) above ~1440px, which scaled every rem. Photo areas
     that should keep growing are sized from the window width instead (see look.css). */
  /* Touch screens: no grey box over links and buttons under a finger, and
     holding one doesn't bring up iPhone's link preview (the outline drawn
     around it) or select its text. Instead it lifts forward a little while
     pressed. Keyboard focus rings stay. */
  html{ scroll-behavior:smooth; font-size:100%; -webkit-tap-highlight-color:transparent; }
  @media (hover:none){
    :where(a, button){ -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
    :where(a, button):active{ transform:scale(1.03); transition:transform .15s ease; }
  }
  body{ background:var(--white); color:var(--ink); font-family:var(--font-sans); -webkit-font-smoothing:antialiased; overflow-x:clip; }
  button, input, select, textarea{ font-family:inherit; }
  /* No sideways pull on phones: clip (not a scroll container, so sticky still works) on html too,
     and no rubber-band. Pinch-zoom panning is untouched (no touch-action). */
  html{ overflow-x:hidden; overflow-x:clip; overscroll-behavior-x:none; }
  /* iPhone Safari zooms the page in on any text box under 16px when it's
     tapped (and leaves it zoomed): touch screens get 16px boxes everywhere. */
  @media (pointer:coarse){ input, select, textarea{ font-size:max(1rem, 16px) !important; } }
  /* Every heading is the serif by default. Before this, only headings
     that happened to carry .slab (or their own font-family) got it --
     section titles like "Shop by Collection" or "Visit the Shop" fell
     back to body's Jost, so the site mixed two heading typefaces. */
  h1, h2, h3, h4{ font-family:var(--font-serif); font-weight:400; }
  .slab{ font-family:var(--font-serif); font-weight:500; letter-spacing:0; }
  a{ color:inherit; text-decoration:none; }
  img{ max-width:100%; display:block; }
  .wrap{ max-width:77.5rem; margin:0 auto; padding:0 2.5rem; position:relative; }
  .eyebrow{ font-size:0.72rem; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--blush-line); }

  .reveal{ opacity:0; transform:translateY(1.625rem); transition:opacity .8s ease, transform .8s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }

  /* ---------------- header ---------------- */
  header{ position:fixed; top:0; left:0; right:0; z-index:80; border-bottom:1px solid var(--line); transition:transform .35s ease, border-color .35s ease; }
  /* The frosted glass is a layer behind the header, not the header itself:
     a blurred header would stop the frosted menus inside it (the Shop menu,
     the search's results) from blurring the page below it. */
  header::after{ content:""; position:absolute; inset:0; z-index:-2; pointer-events:none; background:rgba(255,255,255,0.62); -webkit-backdrop-filter:blur(0.625rem); backdrop-filter:blur(0.625rem); transition:opacity .35s ease; }
  /* The header's top edge starts in the page's pink and melts away below
     it: into the frosted glass once scrolled, and into the clear header
     over the page at the very top. On phones this also meets iPhone
     Safari's (iOS 26 on) strip behind the clock and notch, which it fills
     with the page's pink -- it can't take a colour from see-through glass --
     so the strip never ends in a line. Phones and tablets only (a touch
     screen as the main pointer, whatever the width); computers don't have
     the strip, so their header has no pink. */
  @media (pointer:coarse){
    header::before{ content:""; position:absolute; top:0; left:0; right:0; height:75%; z-index:-1; pointer-events:none; background:var(--strip-fade); transition:transform .35s ease; }
  }
  @media(max-width:640px) and (pointer:coarse){
    /* While the header slides away the fade stays where it is (133.333% of
       its own 75% height = the header's full height), so the strip still
       melts into the page instead of meeting the white glass in a line. */
    header.nav-hidden::before{ transform:translateY(133.333%); }
    /* The filter panel runs up to the top of the screen too. */
    .filter-panel::before{ content:""; position:absolute; top:0; left:0; right:0; height:4.25rem; z-index:-1; pointer-events:none; background:var(--strip-fade); }
  }
  header.nav-hidden{ transform:translateY(-100%); }
  /* Fully see-through only at the very top of the page (scrollY<=0) --
     initScrollHideNav (site.js) toggles this each scroll frame. Every
     page's <header> carries the class in its markup, so the first paint
     is already see-through -- site.js only runs after the scripts at the
     foot of the page load, and setting it from there showed the frosted
     header first and then faded it out. Everywhere else the header stays
     exactly as it already was (translucent white + blur). */
  header.nav-at-top{ border-bottom-color:transparent; }
  header.nav-at-top::after{ opacity:0; }
  /* Over a dark photo, while the header is see-through, its pieces turn
     light (site.js initNavTone marks them .on-dark). */
  header .logo-img, header nav > ul > li > a, header .nav-toggle{ transition:color .35s ease, filter .35s ease; }
  header.nav-at-top .logo.on-dark .logo-img{ filter:brightness(0) invert(1); }
  header.nav-at-top :is(.nav-search-btn, .cart-fab, .nav-toggle).on-dark{ color:#fff; }
  @media(min-width:901px){ header.nav-at-top nav > ul > li > a.on-dark{ color:#fff; } }
  .nav-inner{ max-width:77.5rem; margin:0 auto; padding:0.875rem 2.5rem; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }
  /* 1fr | auto | 1fr keeps the links dead-centre on the page whatever the logo's width. */
  .nav-inner > .logo{ justify-self:start; }
  .nav-inner > .nav-toggle{ grid-column:3; justify-self:end; }
  .logo{ font-family:var(--font-serif); font-weight:600; font-size:1.3rem; letter-spacing:0.01em; display:flex; align-items:center; }
  .logo em{ font-style:italic; color:var(--blush-line); font-weight:400; }
  .logo-img{ height:5rem; width:auto; display:block; }
  @media(max-width:640px){ .logo-img{ height:3.75rem; } }
  nav ul{ list-style:none; display:flex; gap:2.25rem; }
  nav a{ font-size:0.78rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; position:relative; padding-bottom:0.25rem; }
  nav a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--blush-deep); transition:width .3s ease; }
  @media (hover:hover){ nav a:hover::after{ width:100%; } }
  /* color: iPhone Safari colours a button's text blue unless told otherwise. */
  .nav-toggle{ display:none; background:none; border:none; font-size:1.4rem; color:var(--ink); -webkit-appearance:none; appearance:none; cursor:pointer; position:relative; z-index:90; }
  /* Phone menu's Shop dropdown (site.js initNavShopDropdown / initNavExpanders):
     only on phones; desktop keeps its hover dropdown. */
  .nav-expand, .nav-msub{ display:none; }

  /* "Shop" nav dropdown (desktop only -- see initNavShopDropdown in
     site.js) -- every category one hover+click away from anywhere on
     the site, instead of only reachable by landing on shop.html and
     scrolling to the picker. Hidden with opacity/visibility (not
     display) so the fade can transition, with a short visibility delay
     on the way out so it doesn't visibly snap shut mid-fade. */
  .nav-has-dropdown{ position:relative; }
  /* Looks like the search's results list (.nav-search .shop-search-pop): a
     frosted, rounded card with no outline, rows that round-highlight pink. */
  .nav-dropdown{ position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(0.75rem); min-width:12.5rem; background:rgba(255,255,255,0.8); -webkit-backdrop-filter:blur(1.125rem) saturate(1.4); backdrop-filter:blur(1.125rem) saturate(1.4); border:none; border-radius:1.25rem; box-shadow:0 1.25rem 2.5rem -1rem rgba(42,36,32,0.38), 0 0.125rem 0.375rem rgba(42,36,32,0.06); padding:0.5rem; opacity:0; visibility:hidden; transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s; z-index:90; }
  /* Bridges the gap down to the card so the hover holds on the way. */
  .nav-dropdown::before{ content:""; position:absolute; left:0; right:0; bottom:100%; height:0.75rem; }
  .nav-has-dropdown:hover .nav-dropdown, .nav-has-dropdown:focus-within .nav-dropdown{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0.5rem); transition:opacity .2s ease, transform .2s ease; }
  .nav-dropdown a{ display:block; padding:0.5625rem 0.875rem; border-radius:0.75rem; font-family:var(--font-sans); font-weight:500; font-size:0.9rem; text-transform:none; letter-spacing:0; white-space:nowrap; position:static; transition:background .15s ease, color .15s ease; }
  .nav-dropdown a::after{ display:none; }
  .nav-dropdown a:focus-visible{ background:rgba(217,154,156,0.25); outline:none; }
  @media (hover:hover){ .nav-dropdown a:hover{ background:rgba(217,154,156,0.25); color:var(--ink); } }

  @media(max-width:900px){
    /* The phone menu looks like the search's results list (.nav-search
       .shop-search-pop): a frosted, rounded card with no outline or rules,
       rows that round-highlight pink. */
    nav ul{ display:none; flex-direction:column; gap:0; position:absolute; top:calc(100% + 0.25rem); left:0.75rem; right:0.75rem; background:rgba(255,255,255,0.8); -webkit-backdrop-filter:blur(1.125rem) saturate(1.4); backdrop-filter:blur(1.125rem) saturate(1.4); border:none; border-radius:1.25rem; box-shadow:0 1.25rem 2.5rem -1rem rgba(42,36,32,0.38), 0 0.125rem 0.375rem rgba(42,36,32,0.06); padding:0.5rem; }
    nav.nav-open ul{ display:flex; animation:navMenuIn .2s ease; }
    nav a{ display:block; padding:0.8125rem 0.875rem; border-radius:0.75rem; -webkit-tap-highlight-color:transparent; transition:background .15s ease; }
    nav ul a:active, nav ul a:focus-visible{ background:rgba(217,154,156,0.25); outline:none; }
    nav a::after{ display:none; }
    nav ul{ max-height:calc(100dvh - 6rem); overflow-y:auto; }
    nav li.nav-has-dropdown{ display:flex; flex-wrap:wrap; align-items:center; }
    nav li.nav-has-dropdown > a{ flex:1; }
    .nav-expand{ display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:2.75rem; height:2.75rem; padding:0; border:none; border-radius:0.75rem; background:none; color:var(--ink); cursor:pointer; -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent; }
    .nav-expand:active{ background:rgba(217,154,156,0.25); }
    .nav-expand svg{ width:1.1rem; height:1.1rem; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s ease; }
    .nav-expand[aria-expanded="true"] svg{ transform:rotate(180deg); }
    .nav-msub.is-open{ display:block; flex-basis:100%; padding:0 0 0.25rem 0.75rem; }
    .nav-msub a{ padding:0.5625rem 0.875rem; font-family:var(--font-sans); font-weight:500; font-size:0.98rem; text-transform:none; letter-spacing:0.01em; }
    .nav-msub .nav-msub a{ font-size:0.92rem; color:var(--ink-soft); }
    .nav-mrow{ display:flex; align-items:center; }
    .nav-mrow > a{ flex:1; }
    .nav-toggle{ display:block; padding:0.5rem 0.75rem; margin-right:-0.75rem; }   /* a finger-sized target */
    /* shop.html's own picker is one scroll away already on mobile --
       not worth nesting another accordion inside the hamburger menu. */
    .nav-dropdown{ display:none; }
  }

  /* ---------------- hero ---------------- */
  .hero{ position:relative; height:100vh; height:100svh; min-height:35rem; overflow:hidden; background:var(--iron); }

  .slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.4s ease; background-size:cover; background-position:center; }
  .slide.active{ opacity:1; }
  /* A light wash at the top only, so the dark nav reads over the slide; the photo itself stays true. */
  .slide::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,250,248,0.6) 0, rgba(255,250,248,0) 24%); }

  .hero-copy{ position:absolute; z-index:4; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; pointer-events:none; }
  .hero-copy h1{ color:var(--white); font-weight:500; font-size:clamp(2.6rem,7vw,4.6rem); line-height:1.05; text-shadow:0 0.25rem 1.5rem rgba(0,0,0,0.35); letter-spacing:0.01em; }
  /* The signage logo floats just above the champagne flutes in the hero photo
     (mbs-hero-backdrop.webp, 1672 x 941). The photo is drawn with
     background-size:cover, so where things in it land on screen is worked
     out from the hero's own size (container units on .hero-copy, which fills
     the hero): the photo's drawn height is the larger of the hero's height
     and its width x 941/1672. The flutes' rims are at 415px down the 941px
     photo; the logo's box ends at 410px (--bd-logo-foot: 6.4% of that height
     above the photo's centre), which puts the lettering just over the rims.
     The counter top (--bd-counter) is 4.7% below the centre (515px), where
     the Shop button hangs from. Its size follows the photo too: --bd-logo (img height as a share of
     the photo's drawn height) puts the lettering's left and right edges on
     the double gold lines where the centre mirror meets the side mirrors
     (x 710 and 950 of 1672). Those mirrors sit 6px left of the photo's
     centre, so --bd-logo-shift (a share of the drawn height) nudges the logo
     left to match. It also stays
     within the room between the nav (--hero-nav-room) and its foot, and
     never wider than 74% of the screen. A different hero photo in the Site
     Editor: update --bd-shape, --bd-counter, --bd-logo, --bd-logo-foot and
     --bd-logo-shift to match it.
     A soft oval glow behind keeps the dark lettering readable. */
  .hero-copy{ container-type:size; --bd-shape:calc(941 / 1672); --bd-counter:0.047; --bd-logo:0.188; --bd-logo-foot:-0.064; --bd-logo-shift:0.0066; --hero-nav-room:7.25rem; }
  .hero-copy .hero-logo{ position:absolute; left:50%; width:max-content; margin:0; text-shadow:none;
    --bd-h:max(100cqh, 100cqw * var(--bd-shape));
    transform:translateX(calc(-50% - var(--bd-h) * var(--bd-logo-shift)));
    --foot:calc(50cqh + var(--bd-h) * var(--bd-logo-foot));
    bottom:calc(100cqh - var(--foot)); }
  .hero-copy .hero-logo::before{ content:""; position:absolute; inset:-18% -14% -6%; z-index:-1; border-radius:50%;
    background:radial-gradient(closest-side, rgba(255,250,248,0.7) 0%, rgba(255,250,248,0.5) 55%, rgba(255,250,248,0) 100%); }
  .hero-copy .hero-logo img{ display:block; width:auto; max-width:none; height:min(calc(var(--bd-h) * var(--bd-logo)), calc((var(--foot) - var(--hero-nav-room)) * 0.84), calc(74cqw * 1289 / 1800)); }
  /* Shop: a clear, outlined button just below the counter the logo stands
     on (same --counter sum as the logo), in the logo's dark ink. A faint
     frost behind it keeps the word clean over the carved sideboard. Hidden
     until index.html's door script adds .is-in, then it fades up. */
  .hero-copy .hero-shop{ position:absolute; left:50%; z-index:1; pointer-events:auto;
    --bd-h:max(100cqh, 100cqw * var(--bd-shape));
    --counter:calc(50cqh + var(--bd-h) * var(--bd-counter));
    top:calc(var(--counter) + clamp(2.25rem, 6cqh, 4rem));
    padding:1.15rem 3.35rem; border:1px solid var(--ink); background:rgba(255,250,248,0.16); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
    font-family:var(--font-sans); font-size:0.95rem; font-weight:600; letter-spacing:0.3em; text-transform:uppercase; color:var(--ink); text-indent:0.3em;
    opacity:0; visibility:hidden; transform:translate(-50%, 0.75rem);
    transition:opacity 1.1s ease, transform 1.1s var(--ease-out), visibility 0s linear 1.1s, background-color .3s ease, color .3s ease; }
  .hero-copy .hero-shop.is-in{ opacity:1; visibility:visible; transform:translate(-50%, 0); transition:opacity 1.1s ease, transform 1.1s var(--ease-out), visibility 0s, background-color .3s ease, color .3s ease; }
  .hero-copy .hero-shop:focus-visible{ background-color:var(--ink); color:var(--white); }
  @media (hover:hover){ .hero-copy .hero-shop:hover{ background-color:var(--ink); color:var(--white); } }
  @media (prefers-reduced-motion: reduce){ .hero-copy .hero-shop{ transform:translate(-50%, 0); } }
  /* Safari before 16 (older Macs) has no container units: the cq sums
     above come out invalid there, and the logo drew at its full 1800px.
     The hero is always the full screen width and max(100vh, 35rem) tall
     (its min-height), so the same sums in screen units stand in. Keep in
     step with the rules above. */
  @supports not (width: 1cqw){
    .hero-copy{ --hh:max(100vh, 35rem); }
    .hero-copy .hero-logo{
      --bd-h:max(var(--hh), 100vw * var(--bd-shape));
      --foot:calc(var(--hh) / 2 + var(--bd-h) * var(--bd-logo-foot));
      bottom:calc(var(--hh) - var(--foot)); }
    .hero-copy .hero-logo img{ height:min(calc(var(--bd-h) * var(--bd-logo)), calc((var(--foot) - var(--hero-nav-room)) * 0.84), calc(74vw * 1289 / 1800)); }
    .hero-copy .hero-shop{
      --bd-h:max(var(--hh), 100vw * var(--bd-shape));
      --counter:calc(var(--hh) / 2 + var(--bd-h) * var(--bd-counter));
      top:calc(var(--counter) + clamp(2.25rem, calc(var(--hh) * 0.06), 4rem)); }
  }

  /* ---------- Hero door intro ----------
     Two French doors covering the entire viewport -- fixed, and above
     the fixed header (z-index 80) -- then parting slowly for a
     reveal of the hero. Each panel shows the same photo at
     200% of its width anchored to its outer edge, so the halves always
     meet at the seam (see index.html). Once open, visibility flips to
     hidden after the slide finishes so nothing lingers off-screen. */
  .door-intro{ position:fixed; inset:0; z-index:100; display:flex; }
  .door-panel{ flex:0 0 50%; height:100%; overflow:hidden; position:relative; box-shadow:0 0 3.75rem rgba(0,0,0,0.35); transition:transform 3.2s cubic-bezier(0.7,0,0.25,1); will-change:transform; }
  .door-panel .door-photo{ position:absolute; top:0; width:200%; max-width:none; height:100%; object-fit:cover; object-position:50% 50%; background-size:cover; background-position:50% 50%; }
  /* Once per visit (index.html's head script). */
  .no-doors .door-intro{ display:none; }
  .door-left .door-photo{ left:0; }
  .door-right .door-photo{ right:0; }
  .door-intro.doors-open .door-left{ transform:translateX(-105%); }
  .door-intro.doors-open .door-right{ transform:translateX(105%); }
  .door-intro.doors-open{ pointer-events:none; visibility:hidden; transition:visibility 0s linear 3.2s; }
  @media (prefers-reduced-motion: reduce){
    .door-panel{ transition:none; }
    .door-intro.doors-open{ transition:none; }
  }

  /* Hover is a fill that sweeps in from the left (a background-image
     layer growing over the button's own background-color), not a flat
     colour swap. --sweep picks the fill colour per variant. Variants must
     set background-COLOR, never the background shorthand -- the shorthand
     resets background-image and silently kills the sweep. */
  .btn{ display:inline-block; padding:1.25rem 3rem; font-size:0.84rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; border-radius:2px; border:1px solid var(--white); cursor:pointer;
    background-color:transparent; background-image:linear-gradient(var(--sweep, var(--ink)), var(--sweep, var(--ink))); background-repeat:no-repeat; background-position:0 0; background-size:0% 100%;
    transition:background-size .5s var(--ease-out), color .35s ease, border-color .35s ease; }
  .btn:focus-visible{ background-size:100% 100%; color:var(--white); }
  @media (hover:hover){ .btn:hover{ background-size:100% 100%; color:var(--white); } }
  .btn-solid{ background-color:var(--white); color:var(--ink); --sweep:var(--ink); }
  .btn-solid:focus-visible{ border-color:var(--ink); }
  @media (hover:hover){ .btn-solid:hover{ border-color:var(--ink); } }
  /* Dark buttons on light backgrounds (Add to Cart, Checkout, Get
     Directions...) -- used to be inline style="background:var(--ink)",
     which also beat every :hover rule, so they had no hover at all. */
  .btn-ink{ background-color:var(--ink); border-color:var(--ink); color:var(--white); --sweep:var(--white); }
  .btn-ink:focus-visible{ color:var(--ink); }
  @media (hover:hover){ .btn-ink:hover{ color:var(--ink); } }
  .btn-line{ background-color:var(--white); border-color:var(--line); color:var(--ink-soft); --sweep:var(--ink); }
  .btn-line:focus-visible{ border-color:var(--ink); }
  @media (hover:hover){ .btn-line:hover{ border-color:var(--ink); } }
  .btn:disabled{ background-size:0% 100%; cursor:not-allowed; }
  @media (hover:hover){ .btn:disabled:hover{ background-size:0% 100%; cursor:not-allowed; } }

  .ribbon-band{ position:relative; padding:3.75rem 2.5rem; text-align:left; }
  /* Left, not centered -- a boutique editorial header reads as
     "here's what this section is," anchored at the same left edge the
     content below it starts from, not floating centered above it. Kept
     the 640px cap (still a real paragraph under some of these) but
     dropped the auto-centering margin so it sits flush left instead. */
  .ribbon-inner{ max-width:40rem; margin:0; }
  .ribbon-inner .eyebrow{ display:block; margin-bottom:0.625rem; color:var(--blush-line); }
  .ribbon-heading{ font-size:clamp(1.9rem,3.4vw,2.7rem); font-weight:400; color:var(--ink); opacity:1; transform:translateY(0); }
  .ribbon-heading em{ font-style:italic; color:var(--blush-line); }
  /* A section header used site-wide (.ribbon-band) has no background of
     its own -- it inherits whatever the page is sitting on. A thin
     centered rule under the heading is the one recurring device that
     marks "a new section starts here" without needing a hard color
     block between every section, so pages built from several of these
     in a row (shop.html) read as distinct rooms, not one long scroll. */
  .ribbon-band.section-head::after{ content:""; display:block; width:3.375rem; height:1px; margin:1.25rem 0 0; background:var(--blush-line); opacity:0.55; }

  /* ---------------- shop landing: "New Arrivals" horizontal scroll -------
     A real scroll container, not an auto-playing marquee -- these are
     live products people click into, so browsing them has to stay under
     the visitor's own control. A full-bleed band behind it (this div has
     no max-width of its own, so the background already runs edge to
     edge) is the one deliberately different-colored moment on an
     otherwise all-pink page. First tried near-black, then a dark
     wine/rose gradient -- both read as a different site. This is the
     same --blush the homepage's own "Visit the Shop" band already uses
     (.visit below), so it's recognizably THIS site's pink, just called
     out as its own section rather than another neutral stretch of page.
     Card text stays the normal dark ink (no light-text override needed
     now that the band itself is light again). initDragScroll (site.js)
     adds mouse grab-and-throw with momentum on top of the native
     overflow-x:auto scrolling touch/trackpad already get for free. */
  .h-scroll-wrap{
    background:linear-gradient(165deg, var(--blush) 0%, var(--blush-deep) 100%);
    overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
    padding:3.125rem 2.5rem 3.75rem;
    cursor:grab; -webkit-user-select:none; user-select:none;
  }
  .h-scroll-wrap.dragging{ cursor:grabbing; scroll-behavior:auto; }
  /* Belt-and-suspenders alongside initDragScroll's draggable=false/dragstart
     handling (site.js) -- this is the CSS-only way to say "don't start a
     native image drag from here," Safari/older engines included. */
  .h-scroll-track img{ -webkit-user-drag:none; }
  .h-scroll-track{ display:flex; align-items:flex-start; gap:1.625rem; width:max-content; }
  /* Same row height for every card, width following each photo's own
     ratio instead of the other way around (the masonry grids above fix
     WIDTH and let height vary; a horizontal scroll reads better the
     other way -- a level, even row instead of a jagged skyline). The
     photo box sizes to fit its photo (display:inline-block, no width of
     its own) instead of stretching to a fixed card width. */
  .h-scroll-track .gallery-card{ flex:0 0 auto; margin-bottom:0; pointer-events:auto; }
  /* Smaller than before, especially on mobile -- more cards fit in one
     screen's width, which both reads as more full and, on a horizontal
     scroller, signals "there's more, keep going" better than one giant
     card at a time did. Selector is .h-scroll-wrap .h-scroll-track
     .g-frame (3 classes), not just .h-scroll-track .g-frame (2) --
     .gallery-card .g-frame's own generic mobile sizing further down
     this file (also 2 classes) was tying on specificity and winning on
     source order at <=560px, silently overriding the smaller mobile
     height below with its own 190px. */
  .h-scroll-wrap .h-scroll-track .g-frame{ height:clamp(10rem, 22vh, 14.375rem); }
  .h-scroll-track .g-img{ width:auto; height:100%; display:block; }
  .h-scroll-track .g-body{ max-width:15rem; }
  @media(max-width:640px){
    .h-scroll-track{ gap:0.875rem; }
    .h-scroll-wrap .h-scroll-track .g-frame{ height:7.375rem; }
    .h-scroll-track .g-body{ max-width:9.375rem; }
  }

  /* ---------------- page background ----------------
     One flat blush (the same --blush as the shop hero's "Shop Our
     Featured Items" label) behind every page; the section bands that
     used to paint their own white/linen panels are transparent so it
     reads through the whole page. --ink-soft / --blush-line are
     darkened so body copy and eyebrow labels keep their contrast on the
     pink instead of washing out. */
  body{ background:var(--blush); --ink-soft:#4a3a37; --blush-line:#b5525c; }
  body :is(.insta-section, .page-hero){ background:transparent; }
  /* The darker foot of the page (site.js initDeepBottom measures where it
     starts): the page pink deepens to the Instagram band's rose across the
     last section and stays deep through the footer. That last section's own
     band, if it has one, steps aside so the two don't fight. The footer's
     rose accent is darkened to stay readable on the deeper pink. */
  html.deep-bottom body{ background-color:var(--blush); background-image:var(--page-fade); background-repeat:no-repeat; }
  html.deep-bottom .hm-band.page-last, html.deep-bottom #shopLandingBottom.page-last .h-scroll-wrap{ background:none; }
  html.deep-bottom footer{ --blush-line:#62202b; --ink-soft:#2e2220; }
  /* While the footer waits for the page's content (content-pending, the
     shop's results waiting for photos, the shop hero's placeholder) it sits
     near the top of a still-empty page, and the fade measured from it would
     wash the whole screen rose -- as if the footer were at the top. The fade
     waits with it. */
  html.deep-bottom:is(.content-pending, :has(#shopGrid.sv-wait), .shop-landing-view:has(#svRoot.sv-hold)) body{ background-image:none; }
  /* Home: the Instagram strip sits on the plain page pink, no band of its own. */
  body.bg-home #instagram.hm-band{ background:none; }
  /* ---------------- footer ---------------- */
  footer{ padding:4rem 2.5rem 2.5rem; }
  /* The gilded ornament that used to run across the top of the footer
     (footer-trim.svg) was removed 2026-10-13; the small cart still draws
     it (.cart-trim below). */
  .foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2.5rem; margin-bottom:3.5rem; }
  @media(max-width:860px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
  /* Phones: two columns -- the brand and the newsletter across the top and
     bottom, the two link lists side by side between them. */
  .foot-logo{ display:block; height:4.5rem; width:auto; margin-bottom:1rem; }
  footer p.tag-line{ color:var(--ink-soft); font-size:1rem; max-width:16rem; line-height:1.6; }
  .foot-col h5{ font-size:0.8rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--blush-line); margin-bottom:1rem; }
  .foot-col ul{ list-style:none; display:flex; flex-direction:column; gap:0.625rem; }
  .foot-col a{ font-size:1rem; color:var(--ink-soft); background-image:linear-gradient(currentColor, currentColor); background-repeat:no-repeat; background-position:0 100%; background-size:0% 1px; padding-bottom:2px; transition:color .2s ease, background-size .4s var(--ease-out); }
  @media (hover:hover){ .foot-col a:hover{ color:var(--ink); background-size:100% 1px; } }
  .foot-social{ display:flex; gap:0.875rem; margin-top:1rem; }
  .foot-social a{ width:2.25rem; height:2.25rem; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.8rem; }
  @media (hover:hover){ .foot-social a:hover{ background:var(--blush); border-color:var(--blush-deep); } }
  .newsletter-form{ display:flex; border-bottom:1px solid var(--ink); padding-bottom:0.5rem; margin-top:0.5rem; transition:border-color .2s ease, box-shadow .2s ease; }
  .newsletter-form:focus-within{ border-bottom-color:var(--blush-line); box-shadow:0 1px 0 var(--blush-line); }
  .newsletter-form input{ flex:1; background:none; border:none; font-family:var(--font-sans); font-size:1rem; color:var(--ink); outline:none; }
  .newsletter-form button{ background:none; border:none; font-weight:700; font-size:0.82rem; letter-spacing:0.06em; text-transform:uppercase; cursor:pointer; color:var(--blush-line); }
  .foot-bottom{ border-top:1px solid var(--line); padding-top:1.625rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.75rem; font-size:0.86rem; color:var(--ink-soft); }
  @media(max-width:560px){ footer{ padding:2.75rem 0 2rem; } .foot-col ul{ gap:0.125rem; } .foot-col a{ display:inline-block; padding:0.4375rem 0 0.4375rem; } footer .foot-logo{ height:3.75rem; } footer .wrap{ padding:0 1.5rem; } .foot-grid{ gap:2.25rem 1.5rem; } .foot-grid > :first-child, .foot-grid > :last-child{ grid-column:1 / -1; } }

/* The small uppercase underlined link ("Browse the shop" in an empty
   wishlist): here too, for the pages that don't load look.css. */
.sv-link{ font-size:0.76rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; padding-bottom:0.2rem;
  background-image:linear-gradient(currentColor,currentColor); background-repeat:no-repeat; background-position:0 100%; background-size:100% 1px; transition:color .2s ease, background-size .4s var(--ease-out); }
@media (hover:hover){ .sv-link:hover{ color:var(--blush-line); background-size:0% 1px; } }

/* =================================================================
   CAROUSEL NAV CONTROLS (reused by the shop product-detail carousel)
   ================================================================= */
.mega-nav{ position:absolute; z-index:3; top:50%; transform:translateY(-50%); width:3rem; height:3rem; border-radius:50%; border:0;
  background:rgba(255,255,255,0.88); box-shadow:0 0.25rem 0.75rem -0.375rem var(--shadow); color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .25s ease; font-size:1.1rem; }
@media (hover:hover){ .mega-nav:hover{ background:var(--white); } }
.mega-prev{ left:1.25rem; } .mega-next{ right:1.25rem; }
.mega-dots{ position:absolute; z-index:3; right:1.5rem; bottom:1.5rem; display:flex; gap:0.5rem; }
.mega-dots .dot{ width:0.4375rem; height:0.4375rem; border-radius:50%; background:rgba(255,255,255,0.6); box-shadow:0 0 0 1px rgba(42,36,32,0.35); cursor:pointer; transition:background .2s ease, transform .2s ease; }
.mega-dots .dot.active{ background:var(--white); transform:scale(1.3); }

/* =================================================================
   SIMPLE SUB-PAGE HERO (shop / services / contact / gallery)
   ================================================================= */
.page-hero{ padding:11.875rem 2.5rem 5.625rem; background:var(--linen); text-align:center; }
@media(max-width:560px){ .page-hero{ padding:8.5rem 1.5rem 3rem; } }
.page-hero h1{ font-size:clamp(2.2rem,5vw,3.4rem); margin-top:0.625rem; }
.page-hero p{ color:var(--ink-soft); max-width:35rem; margin:1rem auto 0; line-height:1.7; }
.breadcrumb{ font-size:0.76rem; color:var(--ink-soft); margin-top:0.375rem; }
.breadcrumb a{ color:var(--blush-line); font-weight:600; }

/* =================================================================
   GALLERY PAGE + ADMIN MANAGE PANEL
   ================================================================= */
.switch{ position:relative; width:2.625rem; height:1.5rem; }
.switch input{ opacity:0; width:0; height:0; }

/* Same-height, varying-width "justified-ish" row layout, not a fixed
   grid or column-based masonry: every card's frame is pinned to the
   same HEIGHT and its WIDTH follows the photo's own aspect ratio, so a
   landscape piece reads wider and a portrait piece reads narrower in
   the same row instead of the row itself resizing per item. A product
   photo still never gets cropped (no background-size:cover) or
   letterboxed (no fixed-ratio box it doesn't fill) -- same principle as
   the masonry version before it, just the OTHER dimension held fixed.
   display:flex + flex-wrap replaces CSS multi-column here: columns can
   only fix width and vary height, never the other way around. Rows
   aren't pixel-perfect edge-to-edge (that needs JS to rescale each row
   to fit exactly) -- a little leftover space at the end of a row is the
   trade-off for a pure-CSS version of this. */
.gallery-grid{ max-width:min(96vw, 150rem); margin:0 auto; padding:0.625rem 2.5rem 7.5rem; display:flex; flex-wrap:wrap; align-items:flex-start; gap:1.625rem; }
/* One hover language for every product card on the site (results grid,
   New Arrivals rail) -- it used to only exist on .gallery-grid, so New
   Arrivals cards didn't react at all. A card with a second photo
   cross-fades to it (.has-alt, the usual boutique "see it from another
   angle" move); one without zooms its single photo slowly instead. */
.gallery-card{ display:block; scroll-margin-top:11.25rem; transition:transform .45s var(--ease-out); }
.gallery-card .g-frame{
  position:relative; display:inline-block; height:clamp(11.25rem, 28vh, 17.5rem); overflow:hidden; border-radius:0.1875rem;
  background:var(--white);
  box-shadow:0 0.625rem 1.25rem -0.75rem rgba(42,36,32,0.3); transition:box-shadow .45s ease;
}
@media(max-width:900px){ .gallery-card .g-frame{ height:14.375rem; } }
@media(max-width:560px){ .gallery-card .g-frame{ height:11.875rem; } }
.gallery-card.highlight .g-frame{ box-shadow:0 0 0 0.25rem var(--blush); }
.gallery-card .g-img{ width:auto; height:100%; display:block; transition:transform var(--hover-move); }
/* Not quite 0: at 0 the browser can leave the second photo undrawn until
   the first hover, and the fade then starts with a hitch. */
.gallery-card .g-img-alt{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.01; transition:opacity var(--hover-move); pointer-events:none; }
.gallery-card .g-title{ background-image:linear-gradient(currentColor, currentColor); background-repeat:no-repeat; background-position:0 100%; background-size:0% 1px; padding-bottom:2px; transition:background-size .45s var(--ease-out); }
/* Only on devices that really hover -- on touch, :hover sticks after a
   tap and would leave the card lifted/zoomed. */
@media (hover:hover){
  .gallery-card:hover{ transform:translateY(-0.3125rem); }
  .gallery-card:hover .g-frame{ box-shadow:0 1.375rem 2.375rem -1rem rgba(42,36,32,0.42); }
  .gallery-card:not(.has-alt):hover .g-img{ transform:scale(1.06); }
  .gallery-card:hover .g-img-alt{ opacity:1; }
  .gallery-card:hover .g-title{ background-size:100% 1px; }
}
/* Phones: the results grid becomes a clean two-up grid (the standard
   boutique mobile layout) instead of same-height rows -- at phone width
   those rows fit one card each and left the rest of the row empty.
   Photos crop to a shared 4:5 frame here; wider screens use the justified
   rows in look.css (body.new-look #shopGrid), each photo at its own ratio. */
@media(max-width:640px){
  #shopGrid.gallery-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1.625rem 0.875rem; padding:0.375rem 1.25rem 5.625rem; }
  #shopGrid .gallery-card .g-frame{ display:block; width:100%; height:auto; aspect-ratio:4/5; }
  #shopGrid .gallery-card .g-img{ width:100%; height:100%; object-fit:cover; }
  #shopGrid .gallery-card .g-img.no-img{ aspect-ratio:auto; }
  #shopGrid .gallery-card .g-body{ padding:0.75rem 2px 2px; }
  #shopGrid .gallery-card h4{ font-size:0.95rem; }
  #shopGrid .shop-empty{ grid-column:1 / -1; }
  /* Narrow cards: the round + moves to the bottom corner so it can't
     collide with a top-left Seasonal/Sold tag. */
  .gallery-card .quick-add-btn{ top:auto; bottom:0.625rem; right:0.625rem; }
}
/* A product with no photo yet (freshly added, image still uploading —
   see DefaultProducts.tsx) reads as broken with a blank frame on the
   page's own white background; this gives it a soft, clearly-
   intentional placeholder instead, and — unlike a real photo — needs its
   own fixed ratio since there's no natural image size to size the frame
   from. cardHtml() renders this div instead of an <img> only when there's
   genuinely no image to show. */
.gallery-card .g-img.no-img{ aspect-ratio:4/3; width:auto; background-color:var(--linen); display:flex; align-items:center; justify-content:center; }
.gallery-card .g-img.no-img .no-img-label{ font-family:var(--font-sans); font-size:0.72rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); }
/* width:0 + min-width:100% (not just width:100%, which is circular here)
   -- .gallery-card is a flex item sized by fit-content/max-content of ITS
   OWN children, and a long description's un-wrapped max-content width can
   be wider than the frame, which was silently widening the whole card
   (and, since it's centered, throwing the text off-center from the
   frame above it: it was centered in ITS OWN too-wide box, not the
   frame's box). width:0 stops g-body's text from contributing to that
   max-content calculation at all; min-width:100% then lets it re-expand
   to whatever the card's real (frame-driven) width ends up being. */
.gallery-card .g-body{ width:0; min-width:100%; box-sizing:border-box; padding:1rem 0.375rem 2px; text-align:center; }
.gallery-card h4{ font-family:var(--font-serif); font-weight:500; font-size:1.02rem; margin-bottom:0.3125rem; }
.gallery-card p{ color:var(--ink-soft); font-size:0.8rem; line-height:1.5; }
.gallery-card .g-price{ color:var(--ink); font-weight:600; font-size:0.86rem; margin-top:0.4375rem; }
.gallery-empty{ text-align:center; color:var(--ink-soft); padding:3.75rem 1.25rem; grid-column:1/-1; }

/* ---------- Shop breadcrumb ----------
   Top-left of the shop page, above the search/filters row. Populated by
   renderBreadcrumb() in site.js from both the category-filtered list view
   and the single-product detail view -- empty (and collapsed via :empty)
   on the unfiltered "All" list, since there's nothing to backtrack from
   there. */
.shop-breadcrumb{ padding:1.125rem 2.5rem 0; font-size:0.8rem; color:var(--ink-soft); display:flex; align-items:center; gap:0.375rem; white-space:nowrap; overflow:hidden; }
.shop-breadcrumb > *{ flex:0 0 auto; }   /* one line: the current page's name gives way with an ellipsis */
.shop-breadcrumb:empty{ display:none; }
/* The hero is hidden (display:none) in every state where the breadcrumb
   has content — inside a category, or on a product's detail page (see
   render() in site.js and initShopPage) — which makes this the first
   visible thing on the page in exactly those states. header{} is
   position:fixed, so without its own clearance this sits right under it
   with only its bottom edge peeking out. :not(:empty) tracks that state
   for free, since the breadcrumb is never populated while the hero is
   showing. */
.shop-breadcrumb:not(:empty){ padding-top:7.5rem; }
@media(max-width:640px){ .shop-breadcrumb:not(:empty){ padding-top:6.25rem; } }
.shop-breadcrumb a{ color:var(--blush-line); font-weight:600; background-image:linear-gradient(currentColor, currentColor); background-repeat:no-repeat; background-position:0 100%; background-size:0% 1px; padding-bottom:2px; transition:background-size .4s var(--ease-out); }
@media (hover:hover){ .shop-breadcrumb a:hover{ background-size:100% 1px; } }
.shop-breadcrumb .crumb-current{ color:var(--ink); font-weight:600; flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.shop-breadcrumb .crumb-sep{ opacity:0.5; }

/* ---------- Shop toolbar: search + Filter & Sort + count ----------
   Injected into #shopFilters by renderShopGrid() in site.js. Left-aligned
   to match the section headers. The search is an underline field (not a
   pill) whose underline draws in, in blush, on focus. */
/* Full width on the same 40px gutter as the section headers, collection
   tiles and New Arrivals rail, so everything on the shop page shares
   one left edge (a centered 1240px box put the toolbar ~170px to the
   right of the heading right below it on a wide screen). */
.shop-filters{ padding:1.625rem 2.5rem 0.875rem; }
#shopGrid.gallery-grid{ max-width:none; }
.shop-toolbar{ display:flex; align-items:flex-end; justify-content:flex-end; gap:1.25rem 1.75rem; flex-wrap:wrap; }
.shop-search-field{ position:relative; flex:1 1 20rem; max-width:30rem; display:flex; align-items:center; gap:0.75rem; padding:0 2px 0.5rem; border-bottom:1px solid rgba(42,36,32,0.28); cursor:text; }
.shop-search-field::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--blush-line); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease-out); }
.shop-search-field:focus-within::after{ transform:scaleX(1); }
.shop-search-icon{ width:1.125rem; height:1.125rem; flex:0 0 auto; fill:none; stroke:var(--ink-soft); stroke-width:1.4; stroke-linecap:round; transition:stroke .25s ease; }
.shop-search-field:focus-within .shop-search-icon{ stroke:var(--blush-line); }
.shop-search{ flex:1; min-width:0; border:none; background:transparent; padding:0.375rem 0; font-family:var(--font-serif); font-style:italic; font-size:1.2rem; color:var(--ink); outline:none; }
.shop-search::placeholder{ color:var(--ink-soft); opacity:0.75; }
.shop-search:focus-visible{ outline:none; }
.shop-search-go{ display:flex; flex:0 0 auto; padding:0; border:none; background:none; cursor:pointer; }
.shop-search-go:focus-visible{ outline:1px solid var(--blush-line); outline-offset:3px; }
/* Live matches under the search box while typing (site.js popHtml). */
.shop-search-pop{ position:absolute; left:0; right:0; top:calc(100% + 0.5rem); z-index:30; padding:0.375rem; border:1px solid rgba(42,36,32,0.14); border-radius:0.5rem; background:var(--white); box-shadow:0 1.25rem 2.5rem -1rem var(--shadow); cursor:default; }
.pop-item{ display:grid; grid-template-columns:2.75rem 1fr; align-items:center; gap:0.75rem; padding:0.375rem 0.5rem; border-radius:0.375rem; color:var(--ink); text-decoration:none; }
.pop-item:focus-visible{ background:rgba(217,154,156,0.25); outline:none; }
@media (hover:hover){ .pop-item:hover{ background:rgba(217,154,156,0.25); outline:none; } }
.pop-item img, .pop-noimg{ width:2.75rem; height:2.75rem; object-fit:cover; border-radius:0.25rem; background:var(--linen-deep); }
.pop-name{ font-family:var(--font-serif); font-size:0.98rem; line-height:1.25; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.pop-all, .pop-fix{ display:block; width:100%; margin-top:0.25rem; padding:0.625rem 0.5rem; border:none; border-top:1px solid rgba(42,36,32,0.1); background:none; cursor:pointer; font-family:var(--font-sans); font-size:0.72rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--blush-line); text-align:center; }
.pop-fix{ border-top:none; margin-top:0; font-family:var(--font-serif); font-size:1.05rem; font-weight:400; letter-spacing:0; text-transform:none; color:var(--ink-soft); }
.pop-fix em{ color:var(--ink); background:linear-gradient(var(--blush-line), var(--blush-line)) 0 100%/100% 1px no-repeat; }
@media (hover:hover){ .pop-all:hover, .pop-fix:hover{ color:var(--ink); } }
.pop-empty{ padding:0.75rem 0.5rem; text-align:center; font-size:0.88rem; color:var(--ink-soft); }
/* Load more under the results grid (site.js SHOP_PAGE). */
.shop-more{ text-align:center; padding:0 1.25rem 6rem; margin-top:-4rem; }
.shop-more:empty{ display:none; }
.shop-more-count{ margin-bottom:1rem; font-size:0.74rem; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-soft); }
.shop-toolbar-end{ display:flex; align-items:center; gap:1.375rem; padding-bottom:0.375rem; }
.shop-count{ font-size:0.74rem; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-soft); white-space:nowrap; }
.shop-count-link{ background:none; border:none; padding:0 0 2px; cursor:pointer; font:inherit; letter-spacing:inherit; text-transform:inherit; color:var(--ink);
  background-image:linear-gradient(currentColor, currentColor); background-repeat:no-repeat; background-position:0 100%; background-size:100% 1px; transition:color .2s ease, background-size .4s var(--ease-out); }
@media (hover:hover){ .shop-count-link:hover{ color:var(--blush-line); background-size:0% 1px; } }
.shop-filter-btn{ display:inline-flex; align-items:center; gap:0.625rem; background-color:transparent; border:1px solid rgba(42,36,32,0.3); border-radius:2px; padding:0.6875rem 1.125rem; font-family:var(--font-sans); font-size:0.74rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink); cursor:pointer; white-space:nowrap;
  background-image:linear-gradient(var(--ink), var(--ink)); background-repeat:no-repeat; background-size:0% 100%; transition:background-size .45s var(--ease-out), color .3s ease, border-color .3s ease; }
.shop-filter-btn[aria-expanded="true"]{ background-size:100% 100%; color:var(--white); border-color:var(--ink); }
@media (hover:hover){ .shop-filter-btn:hover{ background-size:100% 100%; color:var(--white); border-color:var(--ink); } }
.shop-filter-btn svg{ width:1rem; height:1rem; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; }
.shop-filter-badge{ min-width:1.1875rem; height:1.1875rem; border-radius:0.625rem; background:var(--blush-line); color:var(--white); font-size:0.66rem; letter-spacing:0; display:inline-flex; align-items:center; justify-content:center; padding:0 0.375rem; }
.shop-filter-badge[hidden]{ display:none; }
/* Active filters as removable chips under the toolbar. */
.shop-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:0.625rem; margin-top:1.125rem; }
.shop-chips:empty{ display:none; }
/* A chosen category's subcategories: one quiet line of names in the site's
   serif italic, the chosen one in ink on a rose pill, counts as small
   gold figures. One line always: on phones it scrolls sideways, fading out
   at the right edge to show there's more. */
.shop-subcats{ display:flex; gap:0.375rem; margin-top:0.875rem; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.shop-subcats::-webkit-scrollbar{ display:none; }
.shop-subcats[hidden]{ display:none; }
.shop-subcat{ flex:0 0 auto; padding:0.3rem 0.85rem 0.35rem; border:none; border-radius:999px; background:none; font-family:var(--font-serif); font-style:italic; font-size:1.05rem; color:var(--ink-soft); white-space:nowrap; cursor:pointer; transition:color .2s ease, background-color .25s ease; }
.shop-subcat span{ margin-left:0.2rem; vertical-align:super; font-family:var(--font-sans); font-style:normal; font-size:0.6rem; font-weight:600; letter-spacing:0.06em; color:var(--gold, var(--ink-soft)); }
/* Only on devices that really hover: on touch, :hover sticks to whichever
   pill ends up under the finger after the tap re-draws the line. */
@media (hover:hover){ .shop-subcat:hover{ color:var(--ink); background-color:rgba(233,185,186,0.4); } }
.shop-subcat[aria-pressed="true"]{ color:var(--ink); background-color:var(--blush-deep); }
.shop-subcat[aria-pressed="true"] span{ color:var(--ink); }
.shop-chip{ display:inline-flex; align-items:center; gap:0.5625rem; background:var(--white); border:1px solid var(--line); border-radius:2px; padding:0.4375rem 0.75rem; font-family:var(--font-sans); font-size:0.8rem; color:var(--ink); cursor:pointer; transition:border-color .2s ease, background-color .2s ease; }
@media (hover:hover){ .shop-chip:hover{ border-color:var(--ink); background:var(--linen); } }
.shop-chip svg{ width:0.5625rem; height:0.5625rem; fill:none; stroke:currentColor; stroke-width:1.6; transition:transform .25s ease; }
@media (hover:hover){ .shop-chip:hover svg{ transform:rotate(90deg); } }
.shop-chip-clear{ background:none; border:none; padding:0 0 2px; margin-left:0.25rem; cursor:pointer; font-family:var(--font-sans); font-size:0.72rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--blush-line);
  background-image:linear-gradient(currentColor, currentColor); background-repeat:no-repeat; background-position:0 100%; background-size:0% 1px; transition:background-size .4s var(--ease-out); }
@media (hover:hover){ .shop-chip-clear:hover{ background-size:100% 1px; } }
@media(max-width:640px){
  .shop-filters{ padding:1.125rem 1.25rem 0.5rem; }
  .shop-search-field{ max-width:none; flex-basis:100%; }
  .shop-toolbar-end{ width:100%; justify-content:space-between; }
  /* Results: search and the filter button share one row (the button as an
     icon with its badge), and the piece count steps aside -- "Showing 24 of
     69" sits under the grid -- so the first row of pieces is in view. The
     landing keeps its "View all" link. */
  .shop-filters:not(:has(.shop-count-link)) .shop-toolbar{ flex-wrap:nowrap; align-items:center; gap:0.875rem; }
  .shop-filters:not(:has(.shop-count-link)) .shop-search-field{ flex:1 1 auto; min-width:0; }
  .shop-filters:not(:has(.shop-count-link)) .shop-toolbar-end{ width:auto; padding-bottom:0.375rem; }
  .shop-filters:not(:has(.shop-count-link)) .shop-count{ display:none; }
  .shop-filters:not(:has(.shop-count-link)) .shop-filter-btn{ gap:0.375rem; padding:0.625rem 0.75rem; }
  .shop-filters:not(:has(.shop-count-link)) .shop-filter-btn > span:not(.shop-filter-badge){ display:none; }
  .shop-subcats{ gap:0.25rem; -webkit-mask-image:linear-gradient(90deg, #000 82%, transparent); mask-image:linear-gradient(90deg, #000 82%, transparent); }
}

/* Empty results: say what happened and give the one way out. */
.shop-empty{ width:100%; text-align:center; padding:4.375rem 1.25rem 2.5rem; }
.shop-empty-title{ font-family:var(--font-serif); font-size:1.6rem; color:var(--ink); margin-bottom:0.625rem; }
.shop-empty-sub{ color:var(--ink-soft); font-size:0.95rem; margin-bottom:1.625rem; }
/* "Did you mean ...?" above search results (site.js suggestHtml). */
.shop-suggest{ grid-column:1 / -1; flex:0 0 100%; width:100%; text-align:center; padding:1.5rem 1.25rem 0.5rem; }
.shop-suggest-none{ font-family:var(--font-serif); font-size:1.6rem; color:var(--ink); margin-bottom:0.5rem; }
.shop-suggest-ask{ font-family:var(--font-serif); font-style:italic; font-size:1.25rem; color:var(--ink-soft); }
.shop-suggest-sub{ margin-top:0.625rem; font-size:0.74rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--blush-line); }
.shop-suggest-link{ background:linear-gradient(var(--blush-line), var(--blush-line)) 0 100%/100% 1px no-repeat; border:none; padding:0 0 1px; cursor:pointer; font:inherit; font-style:normal; color:var(--ink); transition:color .2s ease; }
.shop-suggest-link:focus-visible{ color:var(--blush-line); }
@media (hover:hover){ .shop-suggest-link:hover{ color:var(--blush-line); } }

/* ---------- Filter & Sort side panel ----------
   Slides in from the right over a scrim. Choices edit a draft; the
   footer's "Show N pieces" button applies them (with a live count), so
   a shopper can see how many pieces a combination leaves before
   committing to it. Hidden with transform+visibility, not display, so
   it can animate both ways. */
.filter-scrim{ position:fixed; inset:0; z-index:120; background:rgba(42,36,32,0.38); opacity:0; visibility:hidden; transition:opacity .4s ease, visibility 0s linear .4s; }
.filter-scrim.open{ opacity:1; visibility:visible; transition:opacity .4s ease; }
.filter-panel{ position:fixed; top:0; right:0; bottom:0; z-index:121; width:min(26.25rem, 100vw); background:var(--white); display:flex; flex-direction:column; box-shadow:-1.5rem 0 3.75rem -1.875rem rgba(42,36,32,0.45);
  transform:translateX(100%); visibility:hidden; transition:transform .5s var(--ease-out), visibility 0s linear .5s; }
.filter-panel.open{ transform:translateX(0); visibility:visible; transition:transform .5s var(--ease-out); }
.filter-head{ display:flex; align-items:center; justify-content:space-between; padding:1.625rem 1.75rem 1.25rem; border-bottom:1px solid var(--line); }
.filter-head h2{ font-size:1.7rem; font-weight:400; }
.filter-close{ width:2.5rem; height:2.5rem; border:none; background:none; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background-color .2s ease; }
@media (hover:hover){ .filter-close:hover{ background:var(--linen); } }
.filter-close svg{ width:1.125rem; height:1.125rem; fill:none; stroke:var(--ink); stroke-width:1.4; stroke-linecap:round; transition:transform .3s ease; }
@media (hover:hover){ .filter-close:hover svg{ transform:rotate(90deg); } }
.filter-body{ flex:1; overflow-y:auto; padding:0.375rem 1.75rem 1.5rem; }
.filter-group{ border:none; margin:0; padding:1.375rem 0 1rem; border-bottom:1px solid var(--line); min-width:0; }
.filter-group:last-child{ border-bottom:none; }
.filter-group[hidden]{ display:none; }
.filter-group legend{ float:left; width:100%; padding:0; margin-bottom:0.75rem; font-family:var(--font-sans); font-size:0.72rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--blush-line); }
.filter-group legend + *{ clear:both; }
.filter-opt{ display:flex; align-items:center; gap:0.75rem; padding:0.5rem 0; cursor:pointer; font-size:0.95rem; color:var(--ink); }
.filter-opt input{ appearance:none; -webkit-appearance:none; margin:0; flex:0 0 auto; width:1rem; height:1rem; border:1px solid rgba(42,36,32,0.4); border-radius:50%; display:grid; place-content:center; cursor:pointer; transition:border-color .2s ease; }
.filter-opt input[type="checkbox"]{ border-radius:2px; }
.filter-opt input::before{ content:""; width:0.5rem; height:0.5rem; border-radius:50%; background:var(--ink); transform:scale(0); transition:transform .22s var(--ease-out); }
.filter-opt input[type="checkbox"]::before{ width:0.625rem; height:0.625rem; border-radius:0; clip-path:polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
.filter-opt input:checked::before{ transform:scale(1); }
@media (hover:hover){ .filter-opt:hover input{ border-color:var(--ink); } }
.filter-opt-label{ flex:1; transition:color .2s ease; }
@media (hover:hover){ .filter-opt:hover .filter-opt-label{ color:var(--blush-line); } }
/* The chosen option switches to the serif italic -- a quiet, boutique
   way to say "selected" beside the filled radio. */
.filter-opt input:checked + .filter-opt-label{ font-family:var(--font-serif); font-style:italic; }
.filter-opt-count{ font-size:0.78rem; color:var(--ink-soft); }
.filter-foot{ display:flex; align-items:center; gap:1.125rem; padding:1.125rem 1.75rem 1.5rem; border-top:1px solid var(--line); }
.filter-clear{ background:none; border:none; padding:0 0 2px; cursor:pointer; font-family:var(--font-sans); font-size:0.74rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft); white-space:nowrap;
  background-image:linear-gradient(currentColor, currentColor); background-repeat:no-repeat; background-position:0 100%; background-size:0% 1px; transition:color .2s ease, background-size .4s var(--ease-out); }
@media (hover:hover){ .filter-clear:hover{ color:var(--ink); background-size:100% 1px; } }
.filter-apply{ flex:1; padding:1.0625rem 1.25rem; text-align:center; }
html.filter-lock, html.filter-lock body{ overflow:hidden; }
/* Same under the open cart: a short cart list can't scroll, so a swipe on it
   scrolled the page behind instead, Safari's address bar slid in and out,
   and Checkout jumped up and down with it. */
html:has(#mbsCartRoot.cart-open), html:has(#mbsCartRoot.cart-open) body{ overflow:hidden; }
.admin-field{ margin-bottom:1.125rem; }
.admin-field label{ display:block; font-size:0.72rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:0.5rem; }
.admin-field input:not([type="file"]):not([type="checkbox"]):not([type="radio"]), .admin-field textarea{ width:100%; border:1px solid var(--line); border-radius:0.3125rem; padding:0.6875rem 0.875rem; font-family:var(--font-sans); font-size:0.9rem; color:var(--ink); }
.admin-field textarea{ resize:vertical; min-height:4.375rem; }
.admin-field input[type="file"]{ font-size:0.82rem; }

/* =================================================================
   CONTACT / SERVICES PAGE
   ================================================================= */
.order-number-line{ margin-top:1rem; font-weight:600; color:var(--ink); }
.simple-section{ padding:0 2.5rem 8.75rem; max-width:56.25rem; margin:0 auto; }
.simple-section h2{ font-size:clamp(1.8rem,3vw,2.4rem); font-weight:400; margin-bottom:1.375rem; }
.simple-section p{ color:var(--ink-soft); line-height:1.75; margin-bottom:1.125rem; }
/* Privacy & Cookies (privacy.html): readable prose, a summary box, the
   browser-storage table (scrolls sideways on phones), and the map switch. */
.legal{ max-width:46rem; padding-top:3.5rem; }
.legal h2{ font-size:clamp(1.4rem,2.4vw,1.8rem); margin:3rem 0 1rem; scroll-margin-top:7rem; }
.legal h3{ font-size:1.15rem; margin:2rem 0 0.75rem; scroll-margin-top:7rem; }
.legal ul{ margin:0 0 1.125rem 1.25rem; color:var(--ink-soft); line-height:1.75; }
.legal li{ margin-bottom:0.5rem; }
.legal a{ color:var(--ink); text-decoration:underline; text-underline-offset:0.2em; }
.legal code{ font-size:0.82em; padding:0.05rem 0.3rem; border-radius:0.2rem; background:var(--linen); overflow-wrap:anywhere; }
.legal-dates{ font-size:0.8rem; letter-spacing:0.06em; }
.legal-summary{ margin:1.5rem 0 2.5rem; padding:1.5rem 1.75rem 0.5rem; background:var(--linen); border:1px solid var(--line); }
.legal-summary h2{ margin:0 0 0.75rem; font-size:1.2rem; }
.legal-table-wrap{ overflow-x:auto; margin:0 0 1.125rem; border:1px solid var(--line); }
.legal-table{ width:100%; min-width:34rem; border-collapse:collapse; font-size:0.86rem; line-height:1.55; }
.legal-table th, .legal-table td{ padding:0.75rem 0.875rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); color:var(--ink-soft); }
.legal-table th{ background:var(--linen); color:var(--ink); font-size:0.72rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; }
.legal-table tr:last-child td{ border-bottom:none; }
.legal-choice{ display:flex; align-items:center; justify-content:space-between; gap:1rem 1.5rem; flex-wrap:wrap; margin:0 0 1.25rem; padding:1.25rem 1.5rem; border:1px solid var(--line); background:var(--white); }
.legal-choice p{ margin:0; }
.legal-choice-name{ font-weight:600; color:var(--ink) !important; }
.legal-choice-state{ font-size:0.88rem; }
.legal-choice-btn{ padding:0.75rem 1.5rem; }
/* Phones: one card per item instead of a sideways-scrolling table. */
@media(max-width:640px){
  .legal-table{ min-width:0; }
  .legal-table thead{ display:none; }
  .legal-table tr{ display:block; padding:0.875rem 1rem; border-bottom:1px solid var(--line); }
  .legal-table tr:last-child{ border-bottom:none; }
  .legal-table td{ display:block; padding:0.15rem 0; border:none; }
  .legal-table td:last-child::before{ content:"Stays: "; font-weight:600; color:var(--ink); }
}

/* The note under the wishlist's email box: what the email is used for. */
.wish-note{ margin:0; font-size:0.74rem; line-height:1.5; color:var(--ink-soft); }
.wish-note a{ color:inherit; text-decoration:underline; }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:3.75rem; }
@media(max-width:800px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-form .admin-field{ margin-bottom:1.25rem; }
.contact-form button{ width:100%; padding:0.9375rem 0; border-radius:0.1875rem; border:1px solid var(--ink); background:var(--ink); color:var(--white); font-weight:700; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; cursor:pointer; }
@media (hover:hover){ .contact-form button:hover{ background:var(--white); color:var(--ink); border-color:var(--ink); } }
.contact-info-item{ display:flex; gap:1rem; margin-bottom:1.375rem; }
.contact-info-item .k{ font-weight:700; font-size:0.74rem; letter-spacing:0.08em; text-transform:uppercase; min-width:5.625rem; }

/* =================================================================
   INSTAGRAM GALLERY
   ================================================================= */

.insta-tile{ position:relative; display:block; width:100%; aspect-ratio:1/1; border-radius:0.1875rem; overflow:hidden; box-shadow:0 1rem 2rem var(--shadow); transition:transform .35s ease, box-shadow .35s ease; }
.insta-tile:nth-child(odd){ transform:translateY(-0.875rem) rotate(1.4deg); }
.insta-tile:nth-child(even){ transform:translateY(1.125rem) rotate(-1.4deg); }
@media (hover:hover){ .insta-tile:hover{ transform:translateY(0) rotate(0deg) scale(1.05); z-index:2; box-shadow:0 1.25rem 2.5rem var(--shadow); } }
.insta-bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.insta-tile .insta-icon{ position:absolute; right:0.75rem; bottom:0.75rem; width:1.875rem; height:1.875rem; border-radius:50%; background:rgba(255,255,255,0.92); color:var(--ink); display:flex; align-items:center; justify-content:center; font-size:1rem; }
@media(max-width:860px){ .insta-tile{ transform:none !important; } .insta-tile:nth-child(5){ display:none; } }

/* Gallery/Shop page's plain "Follow Along" heading + grid — a simpler,
   non-ribbon Instagram teaser used on secondary pages (as opposed to the
   home page's own Instagram strip). */

/* Instagram panel on admin dashboard */

/* Multi-photo thumbnail strip in the admin add/edit modal */
.admin-thumb-strip{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:0.625rem; }
.admin-thumb-empty{ font-size:0.8rem; color:var(--ink-soft); }


/* small carousel on the shop product-detail page */
.detail-carousel{ position:relative; border-radius:0.5rem; aspect-ratio:4/3; overflow:hidden; box-shadow:0 0.875rem 2.125rem var(--shadow); background:var(--linen); }
.detail-slide{ position:absolute; inset:0; opacity:0; background-size:contain; background-repeat:no-repeat; background-position:center; transition:opacity .5s ease; }   /* contain: the whole photo, never cropped */
.detail-slide.active{ opacity:1; }
.detail-carousel .mega-nav{ width:2.375rem; height:2.375rem; font-size:0.9rem; }
.detail-carousel .mega-dots{ bottom:0.875rem; right:0.875rem; }

/* quick inline price editor on admin cards */

/* admin dashboard tabs */

/* page-content editor (About Us etc.) */

/* public About page */
/* Flex+wrap+centered instead of a fixed 3-column grid -- a team of 1 or
   2 in a rigid 3-up grid left the remaining column(s) as dead space
   (exactly the kind of "empty" the team grid shouldn't have regardless
   of how many people are actually added). This centers whatever count
   there is instead of assuming exactly 3 (or a multiple of 3). */

/* =================================================================
   SERVICES PAGE (services.html) -- modelled on eloquence.com's editorial
   pages: full-bleed photo header with the title on it, half-screen photos
   running to the screen edge with the copy beside them (alternating
   sides), roomy sections. Photo sizes are vw so they keep their share of
   the screen at any zoom; type and padding are rem (fluid root).
   ================================================================= */
.svc-link{ display:inline-flex; align-items:center; gap:0.5rem; font-size:0.78rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink);
  background-image:linear-gradient(currentColor, currentColor); background-repeat:no-repeat; background-position:0 100%; background-size:100% 1px; padding-bottom:0.25rem; transition:background-size .45s var(--ease-out), color .25s ease; }
.svc-link::after{ content:'\2192'; transition:transform .3s ease; }
@media (hover:hover){ .svc-link:hover{ color:var(--blush-line); background-size:0% 1px; } }
@media (hover:hover){ .svc-link:hover::after{ transform:translateX(0.25rem); } }
.svc-link-light{ color:var(--white); }
@media (hover:hover){ .svc-link-light:hover{ color:var(--blush); } }

.svc-hero{ position:relative; min-height:max(36rem, 48vw); padding-top:7rem; display:flex; align-items:flex-end; overflow:hidden; }
.svc-hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.04); animation:svcHeroIn 2.4s var(--ease-out) forwards; }
.svc-hero-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(30,22,18,0.08) 30%, rgba(30,22,18,0.62) 100%); }
@keyframes svcHeroIn{ to{ transform:scale(1); } }
.svc-hero-copy{ position:relative; z-index:2; padding:0 6vw 5rem; max-width:52rem; }
.svc-hero-copy .eyebrow{ color:var(--blush); }
.svc-hero-copy h1{ color:var(--white); font-size:clamp(2.6rem, 5.4vw, 5.2rem); font-weight:600; line-height:1.02; margin:0.75rem 0 1.25rem; text-shadow:0 0.25rem 1.5rem rgba(0,0,0,0.3); text-wrap:balance; }
.svc-hero-copy p{ color:rgba(255,255,255,0.92); font-size:1.12rem; line-height:1.7; max-width:34rem; }
.svc-hero-ctas{ display:flex; align-items:center; flex-wrap:wrap; gap:1.5rem 2.25rem; margin-top:2.25rem; }

.svc-split{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.svc-split-media{ position:relative; overflow:hidden; min-height:42vw; }
.svc-split-img{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform var(--hover-move); }
@media (hover:hover){ .svc-split:hover .svc-split-img{ transform:scale(1.03); } }
.svc-split-copy{ align-self:center; padding:5rem 7vw; }
.svc-split-flip .svc-split-media{ order:2; }
.svc-num{ display:block; font-family:var(--font-serif); font-style:italic; font-size:1.1rem; color:var(--blush-line); margin-bottom:1.25rem; }
.svc-split-copy h2{ font-size:clamp(2.2rem, 3.8vw, 3.6rem); font-weight:600; line-height:1.05; text-wrap:balance; }
.svc-split-copy h2::after{ content:""; display:block; width:3.375rem; height:1px; margin:1.5rem 0; background:var(--blush-line); opacity:0.6; }
.svc-split-copy > p{ font-size:1.08rem; line-height:1.75; color:var(--ink-soft); max-width:32rem; margin-bottom:2rem; }
.svc-split-copy .eyebrow{ display:block; margin-bottom:0.75rem; }

.svc-head{ text-align:center; margin-bottom:3.5rem; }
.svc-head h2{ font-size:clamp(2.2rem, 3.6vw, 3.4rem); font-weight:600; margin-top:0.625rem; }
.svc-section{ padding:7rem 6vw; }

.svc-process{ padding:7.5rem 6vw 8rem; background:#fbf7f0; border-block:1px solid rgba(176,141,87,0.35); }
.svc-steps{ list-style:none; display:grid; grid-template-columns:repeat(4, 1fr); gap:3vw; }
.svc-step{ border-top:1px solid rgba(176,141,87,0.55); padding-top:1.75rem; }
.svc-step-num{ display:block; font-family:var(--font-serif); font-size:clamp(2.6rem, 4vw, 3.8rem); line-height:1; color:#b08d57; margin-bottom:1.25rem; }
.svc-step h3{ font-size:1.4rem; font-weight:500; margin-bottom:0.75rem; }
.svc-step p{ color:var(--ink-soft); font-size:0.98rem; line-height:1.7; }
.ba-slider{ position:relative; aspect-ratio:4/3; overflow:hidden; box-shadow:0 1.5rem 3rem -1.5rem rgba(42,36,32,0.5); }
.ba-slider .ba-after{ position:absolute; inset:0; background-size:cover; background-position:center; }
.ba-slider .ba-before{ position:absolute; inset:0; overflow:hidden; }
.ba-slider .ba-before > div{ position:absolute; top:0; left:0; height:100%; background-size:cover; background-position:center; }
.ba-slider .ba-label{ position:absolute; top:1rem; font-size:0.68rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; background:rgba(255,255,255,0.94); color:var(--ink); padding:0.375rem 0.75rem; z-index:3; }
.ba-slider .ba-label-before{ left:1rem; }
.ba-slider .ba-label-after{ right:1rem; }
.ba-slider .ba-handle-line{ position:absolute; top:0; bottom:0; width:2px; background:var(--white); z-index:2; pointer-events:none; box-shadow:0 0 0.5rem rgba(0,0,0,0.4); transform:translateX(-50%); }
.ba-slider .ba-handle-knob{ position:absolute; top:50%; width:2.75rem; height:2.75rem; border-radius:50%; background:var(--white); transform:translate(-50%,-50%); z-index:3; display:flex; align-items:center; justify-content:center; box-shadow:0 0.25rem 0.75rem rgba(0,0,0,0.35); pointer-events:none; font-size:0.85rem; }
/* The whole photo is the handle (site.js initBeforeAfterDrag): it takes the
   pointer, sideways drags only, and the range underneath keeps the keyboard. */
.ba-slider{ cursor:ew-resize; touch-action:pan-y; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.ba-slider input[type="range"]{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; z-index:4; pointer-events:none; }
.ba-slider:has(input:focus-visible){ outline:2px solid var(--ink); outline-offset:3px; }
/* A section photo that has a "before" photo: the slider fills the photo's place. */
.svc-split-media > .ba-slider{ position:absolute; inset:0; aspect-ratio:auto; box-shadow:none; }
/* Before & After carousel: one pair at a time, arrows either side, the track
   sliding smoothly between pairs. Sized from the window width. */
.ba-carousel{ position:relative; width:min(100%, 56vw); margin:0 auto; container-type:inline-size; }
.ba-viewport{ overflow:hidden; }
.ba-track{ display:flex; transition:transform .7s var(--ease-out); }
.ba-slide{ flex:0 0 100%; margin:0; }
.ba-nav{ position:absolute; top:calc(56vw * 3 / 8); top:calc(100cqw * 3 / 8);   /* the middle of the 4:3 photo; the vw line is for Safari before 16 (no container units), which keeps it */ z-index:5; display:flex; align-items:center; justify-content:center; width:3.25rem; height:3.25rem; border-radius:50%;
  border:1px solid rgba(176,141,87,0.6); background:rgba(255,255,255,0.94); color:var(--ink); font-size:1.9rem; line-height:1; cursor:pointer; transform:translateY(-50%);
  box-shadow:0 0.75rem 1.5rem -0.75rem rgba(42,36,32,0.45); transition:background .25s ease, color .25s ease; }
.ba-nav:focus-visible{ background:var(--ink); color:var(--white); }
@media (hover:hover){ .ba-nav:hover{ background:var(--ink); color:var(--white); } }
.ba-prev{ left:-1.625rem; }
/* Phones: the carousel is the full width less the page's padding, so the
   Safari-before-16 fallback (no container units) uses that, not 56vw. */
@media(max-width:860px){ .ba-nav{ top:calc((100vw - 3rem) * 3 / 8); top:calc(100cqw * 3 / 8); } }
.ba-next{ right:-1.625rem; }
.ba-count{ margin-top:0.75rem; text-align:center; font-size:0.78rem; letter-spacing:0.16em; color:var(--ink-soft); }
@media (prefers-reduced-motion: reduce){ .ba-track{ transition:none; } }
.ba-caption{ margin-top:1rem; font-family:var(--font-serif); font-style:italic; font-size:1.05rem; color:var(--ink-soft); }
/* Two or more pairs: the arrows sit either side of the photo, in their own
   columns, dark so they read as "there's more"; the photo keeps its size. */
.ba-carousel.ba-many{ --ba-arrow:3.5rem; --ba-gap:1.5rem; display:grid; grid-template-columns:var(--ba-arrow) minmax(0, 1fr) var(--ba-arrow); column-gap:var(--ba-gap); width:min(100%, calc(56vw + 2 * (3.5rem + 1.5rem))); }
.ba-many > .ba-viewport{ grid-column:2; grid-row:1; }
.ba-many > .ba-count{ grid-column:1 / -1; grid-row:2; }
.ba-many > .ba-nav{ position:static; grid-row:1; align-self:start; transform:none;
  /* the middle of the 4:3 photo, which is the carousel less both arrow columns */
  margin-top:calc((100cqw - 2 * var(--ba-arrow) - 2 * var(--ba-gap)) * 3 / 8 - var(--ba-arrow) / 2);
  width:var(--ba-arrow); height:var(--ba-arrow); border:1px solid var(--ink); background:var(--ink); color:var(--white); font-size:2.1rem; padding-bottom:0.2rem; }
.ba-many > .ba-prev{ grid-column:1; }
.ba-many > .ba-next{ grid-column:3; }
@media (hover:hover){ .ba-many > .ba-nav:hover{ background:var(--white); color:var(--ink); } }
.ba-many > .ba-nav:focus-visible{ outline:2px solid var(--blush-line); outline-offset:3px; background:var(--ink); color:var(--white); }

/* The dots over the bottom of each photo: faint, the current one a short
   bar that fills while that pair is shown (site moves on at the end). */
.ba-dots{ position:absolute; left:50%; bottom:0.875rem; z-index:3; transform:translateX(-50%); display:flex; align-items:center; gap:0.375rem; padding:0.3125rem 0.5rem; border-radius:1rem; background:rgba(42,36,32,0.22); opacity:0.6; pointer-events:none; }
.ba-dot{ position:relative; width:0.4375rem; height:0.4375rem; border-radius:0.25rem; background:rgba(255,255,255,0.55); overflow:hidden; }
.ba-dot.is-on{ width:1.75rem; }
.ba-dot.is-on::after{ content:""; position:absolute; inset:0; background:var(--white); transform:scaleX(0); transform-origin:left; }
.ba-slide.is-current .ba-dot.is-on::after{ animation:baFill 7s linear forwards; }
.ba-carousel.is-paused .ba-dot.is-on::after{ animation-play-state:paused; }
@keyframes baFill{ to{ transform:scaleX(1); } }
@media (prefers-reduced-motion: reduce){ .ba-slide.is-current .ba-dot.is-on::after{ animation:none; transform:scaleX(1); } }

.svc-swatches{ display:grid; grid-template-columns:repeat(4, 1fr); gap:2vw; }
.svc-swatch .sw{ aspect-ratio:1/1; background-size:cover; background-position:center; transition:transform .5s var(--ease-out), box-shadow .5s ease; }
@media (hover:hover){ .svc-swatch:hover .sw{ transform:translateY(-0.375rem); box-shadow:0 1.25rem 2rem -1.25rem rgba(42,36,32,0.5); } }
.svc-swatch figcaption{ margin-top:0.875rem; font-family:var(--font-serif); font-style:italic; font-size:1.05rem; }

.svc-band{ text-align:center; padding:7rem 6vw; }
.svc-band h2{ font-size:clamp(2rem, 3.4vw, 3.2rem); font-weight:600; line-height:1.1; margin:0.75rem auto 1.25rem; max-width:40rem; text-wrap:balance; }
.svc-band p{ color:var(--ink-soft); font-size:1.05rem; line-height:1.75; max-width:36rem; margin:0 auto 2.25rem; }

.svc-faq{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.6fr); gap:6vw; padding:7rem 6vw; border-top:1px solid var(--line); }
.svc-faq-side h2{ font-size:clamp(2.2rem, 3.6vw, 3.4rem); font-weight:600; line-height:1.05; margin:0.75rem 0 1.5rem; }
.svc-faq-side p{ color:var(--ink-soft); line-height:1.8; }
.faq-list{ border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-question{ width:100%; text-align:left; background:none; border:none; padding:1.625rem 0; display:flex; justify-content:space-between; align-items:center; gap:1.5rem; cursor:pointer; font-family:var(--font-serif); font-weight:400; font-size:clamp(1.15rem, 1.5vw, 1.4rem); color:var(--ink); transition:color .25s ease; }
@media (hover:hover){ .faq-question:hover{ color:var(--blush-line); } }
.faq-question .chev{ flex:0 0 auto; font-family:var(--font-sans); font-weight:300; font-size:1.6rem; line-height:1; color:var(--blush-line); transition:transform .3s ease; }
.faq-item.open .faq-question .chev{ transform:rotate(45deg); }
.faq-answer{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease; }
.faq-answer > p{ overflow:hidden; }
.faq-item.open .faq-answer{ grid-template-rows:1fr; }
.faq-answer p{ color:var(--ink-soft); line-height:1.75; font-size:1rem; max-width:40rem; }
.faq-item.open .faq-answer p{ padding-bottom:1.625rem; }

.svc-quote{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.6fr); gap:6vw; padding:7rem 6vw 8rem; background:#fbf7f0; border-top:1px solid rgba(176,141,87,0.35); }
.svc-quote-side h2{ font-size:clamp(2.2rem, 3.6vw, 3.4rem); font-weight:600; line-height:1.05; margin:0.75rem 0 1.5rem; }
.svc-quote-side p{ color:var(--ink-soft); font-size:1.05rem; line-height:1.75; max-width:24rem; }
.svc-quote-alt{ margin-top:2rem; }
.quote-form{ display:grid; grid-template-columns:1fr 1fr; gap:0 1.5rem; }
.quote-form .qf-wide{ grid-column:1 / -1; }
.quote-form .admin-field input, .quote-form .admin-field select, .quote-form .admin-field textarea{ width:100%; border:none; border-bottom:1px solid rgba(42,36,32,0.35); border-radius:0; background:transparent; padding:0.625rem 0; font-family:var(--font-sans); font-size:1rem; color:var(--ink); outline:none; transition:border-color .25s ease; }
.quote-form .admin-field textarea{ border:1px solid rgba(42,36,32,0.35); padding:0.75rem; margin-top:0.25rem; }
.quote-form .admin-field :is(input, select, textarea):focus{ border-color:var(--blush-line); }
.quote-form .btn{ width:100%; margin-top:0.5rem; }
.quote-status{ text-align:center; margin-top:1rem; font-size:0.92rem; }
.quote-form .admin-field input[type="file"]{ border:none; padding:0.5rem 0; font-size:0.85rem; }
.quote-form .admin-field input[type="file"]:focus-visible{ outline:2px solid var(--blush-line); outline-offset:3px; }
.quote-form .rf-previews{ margin-top:0.25rem; margin-bottom:0.5rem; }

@media(max-width:860px){
  .svc-hero{ min-height:max(38rem, 150vw); }
  .svc-hero-copy{ padding:0 1.5rem 3rem; }
  .svc-split{ grid-template-columns:1fr; }
  .svc-split-media, .svc-split-flip .svc-split-media{ order:0; min-height:0; aspect-ratio:4/3; }
  .ba-carousel{ width:100%; }
  .ba-nav{ width:2.5rem; height:2.5rem; font-size:1.5rem; }
  .ba-carousel.ba-many{ --ba-arrow:2.125rem; --ba-gap:0.375rem; width:100%; }   /* slim arrows: the photo keeps most of the width */
  .ba-many > .ba-nav{ font-size:1.4rem; }
  .ba-prev{ left:0.5rem; }
  .ba-next{ right:0.5rem; }
  .svc-split-copy{ padding:3rem 1.5rem 4rem; }
  .svc-process, .svc-section, .svc-band, .svc-faq, .svc-quote{ padding:4.5rem 1.5rem; }
  .svc-steps{ grid-template-columns:1fr 1fr; gap:2.5rem 1.5rem; }
  .svc-swatches{ grid-template-columns:1fr 1fr; gap:1rem; }
  .svc-faq, .svc-quote{ grid-template-columns:1fr; gap:2rem; }
  .quote-form{ grid-template-columns:1fr; }
}
@media(max-width:520px){ .svc-steps{ grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce){ .svc-hero-bg{ animation:none; transform:none; } }

/* admin: transformations + swatches + faqs editors */

/* admin: quote requests */

/* ---------------- sold-out state (gallery card + wall tile) ---------------- */
/* Sold out: the photos greyed a little, "Sold out" across the middle. */
.gallery-card.sold .g-img{ filter:grayscale(0.6); opacity:0.68; }
.gallery-card.sold .g-img-alt{ filter:grayscale(0.6); }   /* still hidden until hover, */
.gallery-card.sold:hover .g-img-alt{ opacity:0.68; }      /* then as dim as the first */
.sold-tag{ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:2; background:var(--iron); color:var(--white); font-size:0.72rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; white-space:nowrap; padding:0.5rem 0.95rem; border-radius:2px; pointer-events:none; }

/* ---------------- sale state (site.js saleFor) ---------------- */
.sale-tag{ position:absolute; top:0.625rem; left:0.625rem; z-index:2; background:var(--sale); color:var(--white); font-size:0.62rem; font-weight:700; letter-spacing:0.04em; padding:0.1875rem 0.4375rem; border-radius:2px; }
.on-sale .price-now{ color:var(--sale); }
.price-was{ color:var(--ink-soft); font-weight:500; margin-left:0.3em; }
.pd-price.on-sale .price-was{ font-size:0.72em; }
.pd-save{ display:inline-block; margin-left:0.5rem; vertical-align:middle; background:var(--sale); color:var(--white); font-size:0.68rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:0.25rem 0.625rem; border-radius:1.25rem; }
header a.nav-sale{ color:var(--sale); font-weight:600; }

/* ---------------- quick add-to-cart (shop grid cards) ----------------
   Same sharp-cornered, bold-letter-spaced language as .btn (the site's
   one real CTA style) instead of a generic small rounded pill -- used to
   look like a bolted-on plugin default, not something from this
   boutique. Also always visible now, not hover-only: it's the one
   button people actually want to press on a product card, so hiding it
   until hover just adds friction on desktop for no reason (mobile was
   already always-on via the media query this replaces). Sold/sale
   tags stay pill-shaped -- they're informational labels, not actions,
   so keeping them visually distinct from the one real button is
   intentional, not inconsistent. */
/* On a photo it's a square + (fits the smallest cards, never wraps); under a
   card, where there's room, it reads "+ Cart" (.quick-add-below). */
.quick-add-btn{ position:absolute; top:0.75rem; right:0.75rem; z-index:2; display:inline-flex; align-items:center; justify-content:center; width:2.25rem; height:2.25rem; padding:0; border:none; border-radius:2px; background:var(--white); color:var(--ink); cursor:pointer; box-shadow:0 0.375rem 1rem var(--shadow); transition:background-color .25s ease, color .25s ease, box-shadow .2s ease, transform .2s ease; }
.quick-add-btn svg{ width:1.05rem; height:1.05rem; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; overflow:visible; }
@media(hover:hover){ .quick-add-btn:hover{ background:var(--ink); color:var(--white); box-shadow:0 0.5625rem 1.25rem rgba(42,36,32,0.38); transform:translateY(-1px); } }
/* Pressed: it goes ink with a little pop, the plus spins away and a tick
   draws itself in; 1.4s later (site.js initQuickAdd) it all runs back. */
.qa-plus{ transform-origin:12px 12px; transition:transform .35s var(--ease-out), opacity .2s ease; }
.qa-check{ stroke-dasharray:21; stroke-dashoffset:21; transition:stroke-dashoffset .25s ease; }
.quick-add-btn.is-added{ background:var(--ink); color:var(--white); animation:qaPop .45s var(--ease-out); }
.quick-add-btn.is-added .qa-plus{ transform:rotate(90deg) scale(0); opacity:0; }
.quick-add-btn.is-added .qa-check{ stroke-dashoffset:0; transition:stroke-dashoffset .35s ease .12s; }
@keyframes qaPop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.18); } 100%{ transform:scale(1); } }
@media (prefers-reduced-motion: reduce){ .quick-add-btn.is-added{ animation:none; } .qa-plus, .qa-check{ transition:none; } }
.cart-fab.bump{ animation:fabBump .55s var(--ease-out); }
@keyframes fabBump{ 0%{ transform:scale(1); } 35%{ transform:scale(1.18); } 100%{ transform:scale(1); } }

/* Keyboard focus is always visible, in the site's own accent. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible{ outline:2px solid var(--blush-line); outline-offset:0.1875rem; }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
}

/* ---------------- product detail: quantity stepper ---------------- */
.qty-stepper{ display:flex; align-items:center; border:1px solid var(--line); border-radius:2px; overflow:hidden; }
.qty-stepper button{ background:var(--white); border:none; width:2.375rem; height:3.25rem; font-size:1rem; color:var(--ink); cursor:pointer; transition:background .2s ease; }
@media (hover:hover){ .qty-stepper button:hover{ background:var(--linen-deep); } }
.qty-stepper span{ min-width:1.875rem; text-align:center; font-size:0.92rem; font-weight:600; }

/* ---------------------------------------------------------------------
   Cart — floating button + slide-in drawer, injected site-wide by
   initCartUI() in site.js. Fixed-position, so it sits on top of every
   page's own layout without needing markup changes per page.
   --------------------------------------------------------------------- */
/* Cart button: a thin-line bag in the top-right corner of the header (it is
   appended to <header> by initCartUI, so it sits at the real right edge of the
   screen, and goes with the header when that hides on scroll-down). */
.cart-fab{ position:absolute; top:50%; right:1.75rem; margin-top:-1.25rem; z-index:90; height:2.5rem; padding:0; background:none; color:var(--ink); border:none; display:flex; align-items:center; gap:0.375rem; cursor:pointer; transition:color .25s ease; }
.cart-fab-icon{ position:relative; display:flex; align-items:center; justify-content:center; width:2.5rem; height:2.5rem; }
.cart-fab svg{ width:1.5rem; height:1.5rem; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
@media (hover:hover){ .cart-fab:hover{ color:var(--blush-line); } }
.cart-fab.cart-fab-fixed{ position:fixed; top:1rem; right:1.75rem; margin-top:0; z-index:85; }
.cart-count{ position:absolute; top:0; right:0; min-width:1.125rem; height:1.125rem; padding:0 0.25rem; border-radius:0.625rem; background:var(--blush-line); color:var(--white); font-size:0.68rem; font-weight:700; align-items:center; justify-content:center; display:none; }
/* "Cart" beside the bag: computers only, in the nav links' own type, with
   their underline on hover. */
.cart-fab-label{ display:none; }
@media(max-width:900px){ .cart-fab{ right:4.75rem; } }   /* leaves room for the menu button */
/* Desktop: a bigger bag, easier to spot and to hit, and the word "Cart". */
@media(min-width:901px){
  .cart-fab{ height:3.25rem; margin-top:-1.625rem; right:1.5rem; }
  .cart-fab-icon{ width:3rem; height:3.25rem; }
  .cart-fab svg{ width:2rem; height:2rem; stroke-width:1.4; }
  .cart-count{ top:0.25rem; right:0; min-width:1.3rem; height:1.3rem; font-size:0.74rem; }
  .cart-fab-label{ display:block; position:relative; padding:0.25rem 0; font-family:var(--font-sans); font-size:0.78rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; }
  .cart-fab-label::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--blush-deep); transition:width .3s ease; }
  @media (hover:hover){ .cart-fab:hover .cart-fab-label::after{ width:100%; } }
}

/* Search (site.js HeaderSearch): a glass just left of the cart, the two in
   one top-right group, opening the shop's search field in the header bar,
   to the glass's left. */
.nav-actions{ position:absolute; top:50%; right:1.75rem; transform:translateY(-50%); z-index:90; display:flex; align-items:center; gap:0.25rem; }
.nav-actions .cart-fab{ position:static; margin-top:0; }
@media(max-width:900px){ .nav-actions{ right:4.75rem; } }   /* leaves room for the menu button */
@media(min-width:901px){ .nav-actions{ right:1.5rem; gap:0.5rem; } }
/* Narrow computers: the word "Cart" goes so the icons clear the nav links. */
@media(min-width:901px) and (max-width:1180px){ .cart-fab-label{ display:none; } }
.nav-search-btn{ display:flex; align-items:center; justify-content:center; width:2.5rem; height:2.5rem; padding:0; border:none; background:none; color:var(--ink); cursor:pointer; transition:color .25s ease; -webkit-appearance:none; appearance:none; }
.nav-search-btn svg{ width:1.375rem; height:1.375rem; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; }
.nav-search-btn[aria-expanded="true"]{ color:var(--blush-line); }
@media (hover:hover){ .nav-search-btn:hover{ color:var(--blush-line); } }
.nav-search-btn:focus-visible{ outline:1px solid var(--blush-line); outline-offset:2px; }
@media(min-width:901px){
  .nav-search-btn{ width:3rem; height:3.25rem; }
  .nav-search-btn svg{ width:1.75rem; height:1.75rem; stroke-width:1.4; }
}
body.is-checkout .nav-search-btn{ display:none; }
/* The field: a clear, see-through pill with no outline whose right end sits
   on the glass (--ns-right: from the header's right edge to the glass's,
   measured in site.js), over the nav links. It grows out of the glass and
   shrinks back into it (site.js motion(), transforms and fades only).
   Whatever in the header it would partly cover fades away while it's open
   (.ns-covered). */
.nav-search{ position:absolute; top:50%; right:var(--ns-right, 7rem); z-index:91; width:min(25rem, calc(100% - var(--ns-right, 7rem) - 1.5rem)); transform:translateY(-50%); }
.nav-search[hidden]{ display:none; }
.nav-search.is-closing{ pointer-events:none; }
.ns-win, .ns-win2{ position:relative; overflow:hidden; border-radius:999px; }
.ns-pill{ position:relative; z-index:0; border-radius:999px; padding:0.25rem 0.3125rem 0.25rem 0.9375rem; }
.ns-fill{ position:absolute; inset:0; z-index:-1; border-radius:inherit; background:rgba(255,255,255,0.38); }
/* The soft shadow sits outside the window (it would be cut off inside it). */
.ns-shadow{ position:absolute; inset:0; border-radius:999px; box-shadow:0 0.625rem 1.5rem -0.75rem rgba(42,36,32,0.32), 0 0.0625rem 0.25rem rgba(42,36,32,0.08); transform-origin:0 50%; pointer-events:none; }
header .nav-search-btn.ns-handed{ opacity:0; pointer-events:none; }   /* its twin in the field has taken over */
.nav-search .nav-search-field{ position:static; max-width:none; gap:0.5rem; padding-bottom:0; border-bottom:none; }
.nav-search .nav-search-field::after{ display:none; }
.nav-search .shop-search{ font-size:1.1rem; padding:0.4375rem 0; }
.nav-search .shop-search::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; display:none; }   /* the round close beside it is the only button */
.nav-search-glass{ display:block; width:1.125rem; height:1.125rem; flex:0 0 auto; fill:none; stroke:var(--ink); stroke-width:1.5; stroke-linecap:round; }
.nav-search-close{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:2.125rem; height:2.125rem; padding:0; border:none; border-radius:50%; background:var(--blush); color:var(--blush-line); cursor:pointer; transition:background .2s ease, color .2s ease; -webkit-appearance:none; appearance:none; }
.nav-search-close svg{ width:0.9375rem; height:0.9375rem; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
@media (hover:hover){ .nav-search-close:hover{ background:var(--blush-deep); color:var(--ink); } }
.nav-search-close:focus-visible{ outline:1px solid var(--blush-line); outline-offset:2px; }
.nav-search .shop-search-pop{ left:0; right:0; top:calc(100% + 0.5rem); border:none; border-radius:1.25rem; padding:0.5rem; background:rgba(255,255,255,0.8); -webkit-backdrop-filter:blur(1.125rem) saturate(1.4); backdrop-filter:blur(1.125rem) saturate(1.4); box-shadow:0 1.25rem 2.5rem -1rem rgba(42,36,32,0.38), 0 0.125rem 0.375rem rgba(42,36,32,0.06); }
.nav-search .pop-item{ border-radius:0.75rem; }
.nav-search .pop-item img, .nav-search .pop-noimg{ border-radius:0.5rem; }
/* What the open field covers: gone while it's open, back as it closes. */
header .ns-covered{ animation:nsHide .12s ease-out forwards; pointer-events:none; }   /* gone before the clear pill reaches it */
header .ns-back{ animation:nsShow .3s ease; }
@keyframes nsHide{ to{ opacity:0; visibility:hidden; } }
@keyframes nsShow{ from{ opacity:0; } }
@keyframes navMenuIn{ from{ opacity:0; transform:translateY(-0.375rem); } }
@media (prefers-reduced-motion: reduce){ nav.nav-open ul{ animation:none; } }
@media (prefers-reduced-motion: reduce){ header .ns-covered{ animation:none; opacity:0; visibility:hidden; } header .ns-back{ animation:none; } }
/* Phones: the whole bar, edge to edge (the logo and icons fade away). */
@media(max-width:640px){
  .nav-search{ right:0.75rem; width:calc(100% - 1.5rem); }
  .nav-search .shop-search{ font-size:1.05rem; }
}

.cart-overlay{ position:fixed; inset:0; background:rgba(20,16,12,0.45); z-index:98; opacity:0; pointer-events:none; transition:opacity .4s cubic-bezier(.2,.8,.2,1); }
.cart-drawer{ position:fixed; top:0; right:0; bottom:0; width:min(25rem, 92vw); background:var(--white); z-index:99; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s cubic-bezier(.2,.8,.2,1); box-shadow:none; touch-action:pan-y; overscroll-behavior:contain; -webkit-backface-visibility:hidden; backface-visibility:hidden; }   /* sideways swipes close the cart (site.js initCartSwipe), not go Back */   /* shadow only while open: a closed drawer's shadow used to smear down the right edge of every page */
#mbsCartRoot.cart-open .cart-overlay{ opacity:1; pointer-events:auto; will-change:opacity; }
/* Mid-swipe, whatever the finger started on doesn't also lift forward
   (the phone press effect), which made the drag wobble. */
.cart-drawer.is-dragging :where(a, button):active{ transform:none; }
#mbsCartRoot.cart-open .cart-drawer{ transform:translateX(0); box-shadow:-0.875rem 0 2.5rem var(--shadow); will-change:transform; }
/* Closed: out of the Tab order too (hidden once it has slid away). */
.cart-drawer{ visibility:hidden; transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s cubic-bezier(.2,.8,.2,1), visibility 0s linear .4s; }
#mbsCartRoot.cart-open .cart-drawer{ visibility:visible; transition-delay:0s; }

/* A quiet head: a small title with the close button on its line, then the
   Cart / Wishlist switch. (The gilded trim and the big ruled title it had
   before were removed 2026-10-13 to give the pieces the room.) */
.cart-drawer-head{ position:relative; display:flex; flex-direction:column; align-items:stretch; gap:0.625rem; padding:0.875rem 1.25rem 0.875rem; border-bottom:1px solid var(--line); }
.cart-head-row{ display:flex; align-items:center; justify-content:space-between; min-height:2.25rem; }
.cart-head-row h4{ margin:0; font-family:var(--font-serif); font-style:italic; font-weight:600; font-size:1.25rem; line-height:1.2; letter-spacing:0; color:var(--ink); white-space:nowrap; }
.cart-drawer-head #cartCloseBtn{ width:2.25rem; height:2.25rem; margin-right:-0.5rem; }
.cart-drawer-head button{ background:none; border:none; font-size:1rem; color:var(--ink-soft); cursor:pointer; }

.cart-scroll{ flex:1; overflow-y:auto; overscroll-behavior:contain; }
.cart-items{ padding:1rem 1.5rem; }
.cart-empty{ color:var(--ink-soft); text-align:center; padding:2.5rem 0; font-size:0.9rem; }
.cart-item{ display:flex; align-items:flex-start; gap:0.75rem; padding:0.875rem 0; border-bottom:1px solid var(--line); }
.cart-item:last-child{ border-bottom:none; }
.cart-item-img{ width:3.5rem; height:3.5rem; border-radius:0.375rem; background-size:cover; background-position:center; background-color:var(--linen-deep); flex:0 0 auto; }
.cart-item-body{ flex:1; min-width:0; }
.cart-item-name{ font-size:0.88rem; font-weight:600; margin-bottom:2px; }
.cart-item-price{ font-size:0.8rem; color:var(--ink-soft); margin-bottom:0.5rem; }
.cart-item-qty{ display:flex; align-items:center; gap:0.625rem; }
.cart-qty-btn{ width:1.875rem; height:1.875rem; border:1px solid var(--line); border-radius:50%; background:var(--white); font-size:0.85rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
@media (hover:hover){ .cart-qty-btn:hover{ background:var(--linen-deep); } }
.cart-item-qty span{ font-size:0.85rem; font-weight:600; min-width:0.875rem; text-align:center; }
.cart-item-remove{ background:none; border:none; color:var(--ink-soft); font-size:0.85rem; cursor:pointer; padding:2px 0.25rem; flex:0 0 auto; }
@media (hover:hover){ .cart-item-remove:hover{ color:var(--blush-line); } }

.cart-drawer-foot{ padding:1.125rem 1.5rem 1.5rem; border-top:1px solid var(--line); }
.cart-subtotal-row{ display:flex; justify-content:space-between; align-items:center; font-size:0.95rem; font-weight:700; margin-bottom:0.875rem; }
/* "Sale savings  −$22.25" above the subtotal while anything in the cart is on sale. */
.cart-savings-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:0.375rem; font-size:0.85rem; font-weight:600; color:var(--blush-line); }
.cart-savings-row[hidden]{ display:none; }
.cart-checkout-btn{ width:100%; text-align:center; padding:0.875rem; border-radius:2px; }
/* Phones: the totals and Checkout share one row, so the cart's foot takes
   about half the height and the list above gets the room. */
@media(max-width:640px){
  #cartPanel .cart-drawer-foot{ display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; column-gap:1rem; padding:0.75rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom)); }
  #cartPanel .cart-freeship{ grid-column:1 / -1; margin-bottom:0.625rem; }
  #cartPanel .cart-totals .cart-subtotal-row{ margin-bottom:0; }
  #cartPanel .cart-totals .cart-savings-row{ margin-bottom:0.125rem; font-size:0.75rem; }
  #cartPanel .cart-checkout-btn{ width:auto; padding:0.875rem 1.625rem; }
  .cart-items{ padding:0.75rem 1.25rem; }
  #cartPanel .cart-suggest{ margin:0 1.25rem; }
}
.cart-checkout-btn:disabled{ opacity:0.4; cursor:not-allowed; }
/* Cart | Wishlist: two names in the serif italic under the drawer's title,
   the open one on a rose pill (like the shop's subcategories), each with its
   count as a small figure. Each tab is a .cart-panel: a scrolling list over a foot (the
   cart's subtotal and Checkout; the wishlist's email). */
/* Cart and Wishlist: two italic words with a small gold diamond between
   them; the open one in ink with a fine gold rule beneath. */
/* Cart / Wishlist switch: two equal pills in a soft track, the chosen one
   solid ink (same voice as the Add to cart button), each with its count in
   a round badge. Replaces the italic serif words with superscript numbers,
   which were hard to read at a glance. */
.cart-drawer-head .cart-tabs{ display:flex; align-items:stretch; gap:0.25rem; width:100%; margin:0; padding:0.25rem; border:1px solid var(--line); border-radius:999px; background:rgba(42,36,32,0.04); }
.cart-drawer-head .cart-tab{ position:relative; flex:1 1 0; display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; padding:0.6rem 0.75rem; border:none; border-radius:999px; background:transparent; font-family:var(--font-sans); font-style:normal; font-size:0.74rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); cursor:pointer; transition:background-color .25s ease, color .25s ease; }
@media (hover:hover){ .cart-drawer-head .cart-tab:hover{ color:var(--ink); background:rgba(42,36,32,0.06); } }
/* The open one on the same pink as the shop's chosen subcategory. */
.cart-drawer-head .cart-tab[aria-selected="true"]{ background:var(--blush-deep); color:var(--ink); }
@media (hover:hover){ .cart-drawer-head .cart-tab[aria-selected="true"]:hover{ background:var(--blush-deep); color:var(--ink); } }
.cart-tab-sep{ display:none; }
.cart-tab-n{ display:inline-flex; align-items:center; justify-content:center; min-width:1.25rem; height:1.25rem; padding:0 0.35rem; border-radius:999px; background:var(--blush-line); color:var(--white); font-family:var(--font-sans); font-size:0.68rem; font-weight:700; letter-spacing:0; line-height:1; }
.cart-tab-n:empty{ display:none; }
.cart-panel{ flex:1; min-height:0; display:flex; flex-direction:column; }
.cart-panel[hidden]{ display:none; }

/* "3 pieces · Clear cart" above each list; the first tap asks "Clear all?" */
.cart-list-head{ display:flex; align-items:center; justify-content:space-between; padding-bottom:0.625rem; border-bottom:1px solid var(--line); font-size:0.7rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft); }
.cart-clear{ background:none; border:none; padding:0.25rem 0; font:inherit; letter-spacing:inherit; text-transform:inherit; color:var(--ink-soft); text-decoration:underline; text-underline-offset:0.2em; cursor:pointer; }
@media (hover:hover){ .cart-clear:hover{ color:var(--blush-line); } }
.cart-clear.is-confirming{ color:var(--error); font-weight:700; text-decoration:none; }

/* Wishlist rows: like the cart's, with "Add to cart" where the qty sits. */
.cart-item-name a{ color:inherit; text-decoration:none; }
@media (hover:hover){ .cart-item-name a:hover{ text-decoration:underline; text-underline-offset:0.2em; } }
#mbsCartRoot.cart-instant :is(.cart-drawer, .cart-overlay){ transition:none; }   /* back from a piece: the cart is just open */
.wish-item.is-sold .cart-item-img{ opacity:0.55; filter:grayscale(0.4); }
.wish-sold{ font-size:0.7rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; }
.cart-item-price.on-sale .price-now{ color:var(--blush-line); font-weight:600; }
.cart-item-price .price-was{ margin-left:0.25rem; }
.wish-item .pickup-tag{ position:static; display:inline-block; margin:0 0.5rem 0.5rem 0; }
.wish-add{ padding:0.45rem 0.85rem; border:1px solid var(--ink); border-radius:2px; background:var(--ink); color:var(--white); font-family:var(--font-sans); font-size:0.68rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; transition:background-color .2s ease, color .2s ease; }
.wish-add:focus-visible{ background:transparent; color:var(--ink); }
@media (hover:hover){ .wish-add:hover{ background:transparent; color:var(--ink); } }
.wish-in-cart{ font-size:0.75rem; color:var(--ink-soft); }
.wish-in-cart::before{ content:"\2713"; color:var(--gold, #b08d57); font-weight:700; margin-right:0.3rem; }
.wish-empty{ display:flex; flex-direction:column; align-items:center; gap:1rem; }
.wish-empty p{ margin:0; max-width:17rem; line-height:1.6; }

/* The email that keeps the wishlist, at the foot of its tab. */
.wish-account{ background:var(--linen); }
.wish-save{ display:flex; flex-direction:column; gap:0.5rem; }
.wish-save label{ font-size:0.82rem; line-height:1.5; color:var(--ink-soft); }
.wish-save-row{ display:flex; gap:0.5rem; }
.wish-save input{ flex:1; min-width:0; padding:0.7rem 0.875rem; border:1px solid var(--line); border-radius:2px; background:var(--white); color:var(--ink); font-family:var(--font-sans); font-size:1rem; }   /* 1rem: smaller makes iPhones zoom in on focus */
.wish-save input:focus{ outline:2px solid var(--gold, #b08d57); outline-offset:1px; }
.wish-save .btn{ flex:0 0 auto; padding:0.7rem 1.25rem; }
.wish-status{ margin:0; font-size:0.78rem; color:var(--ink-soft); }
/* Any form's message that is an error (site.js setStatus). */
.is-error{ color:var(--error); }
.wish-status:empty{ display:none; }
.wish-saved{ margin:0; font-size:0.85rem; line-height:1.5; overflow-wrap:anywhere; }
.wish-check{ color:var(--gold, #b08d57); font-weight:700; margin-right:0.25rem; }
.wish-link{ margin-left:0.25rem; padding:0; border:0; background:none; font:inherit; color:var(--ink-soft); text-decoration:underline; cursor:pointer; }
@media (hover:hover){ .wish-link:hover{ color:var(--blush-line); } }

/* "Added to your wishlist · View" after a heart (showWishToast) */
.wish-toast{ position:fixed; left:50%; bottom:1.5rem; z-index:300; display:flex; align-items:center; gap:0.75rem; padding:0.625rem 0.625rem 0.625rem 1.125rem; border-radius:62rem; background:var(--ink); color:var(--white); font-size:0.85rem; white-space:nowrap; box-shadow:0 1rem 2rem -0.75rem rgba(42,36,32,0.55); opacity:0; transform:translate(-50%, 1rem); pointer-events:none; transition:opacity .3s ease, transform .3s ease; }
.wish-toast.is-shown{ opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
.wish-toast-heart svg{ display:block; width:1rem; height:1rem; fill:var(--blush-line); stroke:none; }
.wish-toast-view{ padding:0.45rem 0.95rem; border:none; border-radius:62rem; background:var(--white); color:var(--ink); font-family:var(--font-sans); font-size:0.7rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; }
@media(prefers-reduced-motion:reduce){ .wish-toast{ transform:translate(-50%, 0); } }

/* "Pick up only" on a product card: below whichever tag sits in the corner. */
.pickup-tag{ position:absolute; top:0.625rem; left:0.625rem; z-index:2; background:rgba(42,36,32,0.72); color:var(--white); font-size:0.54rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; padding:0.1875rem 0.4375rem; border-radius:2px; pointer-events:none; }
.sale-tag ~ .pickup-tag{ top:1.875rem; }
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* "Continue where you left off?" on a later visit (initWishlistResume) */
.resume-backdrop{ position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center; padding:1.25rem; background:rgba(42,36,32,0.42); -webkit-backdrop-filter:blur(0.25rem); backdrop-filter:blur(0.25rem); opacity:0; transition:opacity .35s ease; }
.resume-backdrop.is-open{ opacity:1; }
.resume-card{ width:min(100%, 27rem); padding:2.25rem 2rem 2rem; text-align:center; background:var(--blush); border:1px solid rgba(176,141,87,0.55); box-shadow:0 2rem 4rem -1.5rem rgba(42,36,32,0.5); }
.resume-card .eyebrow{ display:block; margin-bottom:0.5rem; }
.resume-card h3{ font-size:clamp(1.6rem,2.6vw,2rem); line-height:1.15; margin-bottom:0.875rem; }
.resume-card p{ color:var(--ink-soft); line-height:1.6; margin:0 0 1.5rem; }
.resume-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:0.625rem; }
/* ---------------- checkout page (checkout.html / checkout.js) ----------------
   Same language as the shop: blush page, left-aligned serif heading over a
   small blush eyebrow and rule, white panels with soft warm shadows,
   square-cornered ink buttons. Three steps on the left, the bag on the right
   (sticky); on phones the bag sits above the steps. */
body.is-checkout .cart-fab{ display:none; }
/* Checkout: the steps sit open on the page's pink, an editorial column
   divided by hairlines (no boxes), beside the order as a dark, receipt-like
   panel that stays in view. On phones that panel folds into one bar with
   the total, so the form starts right under the title. */
.co-page{ max-width:75rem; margin:0 auto; padding:9.375rem 2.5rem 6.875rem; }
.co-head{ margin-bottom:2.5rem; }
.co-head .eyebrow{ display:inline-flex; align-items:center; gap:0.5rem; margin-bottom:0.625rem; }
.co-head-lock{ width:0.85rem; height:0.85rem; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.co-head h1{ font-size:clamp(2.4rem,4.2vw,3.4rem); font-weight:400; line-height:1.05; }
.co-head::after{ content:""; display:block; width:3.375rem; height:1px; margin-top:1.125rem; background:var(--blush-line); opacity:0.55; }
.co-layout{ display:grid; grid-template-columns:minmax(0,1fr) 25rem; gap:4.5rem; align-items:start; }
@media(max-width:900px){ .co-page{ padding:7.5rem 1.25rem 5rem; } .co-head{ margin-bottom:1.5rem; } .co-layout{ grid-template-columns:minmax(0, 1fr); gap:0.5rem; } .co-bag{ min-width:0; order:-1; position:static !important; } }

.co-step{ border-top:1px solid rgba(42,36,32,0.16); }
.co-step:last-child{ border-bottom:1px solid rgba(42,36,32,0.16); }
.co-step-head{ display:flex; align-items:center; justify-content:space-between; padding:1.5rem 0; }
.co-step-head h2{ display:flex; align-items:center; gap:1rem; font-size:1.6rem; font-weight:400; }
.co-step-num{ display:inline-flex; align-items:center; justify-content:center; width:2.125rem; height:2.125rem; border-radius:50%; border:1px solid var(--blush-line); color:var(--blush-line); font-family:var(--font-sans); font-size:0.82rem; font-weight:600; transition:background-color .3s ease, color .3s ease, border-color .3s ease; }
.co-step.is-open .co-step-num{ background:var(--ink); border-color:var(--ink); color:var(--white); }
.co-step.is-done .co-step-num{ background:var(--blush-line); border-color:var(--blush-line); color:transparent; position:relative; }
.co-step.is-done .co-step-num::after{ content:""; position:absolute; width:0.55rem; height:0.3rem; border:solid var(--white); border-width:0 0 2px 2px; transform:translateY(-0.08rem) rotate(-45deg); }
.co-step.is-locked .co-step-head{ opacity:0.4; }
.co-step-body{ padding:0 0 2.25rem 3.125rem; animation:coOpen .45s var(--ease-out); }
@keyframes coOpen{ from{ opacity:0; transform:translateY(0.5rem); } to{ opacity:1; transform:none; } }
.co-step-summary{ padding:0 0 1.5rem 3.125rem; font-size:0.92rem; color:var(--ink-soft); line-height:1.65; }
.co-edit{ background:none; border:none; font:600 0.72rem var(--font-sans); letter-spacing:0.12em; text-transform:uppercase; color:var(--ink); border-bottom:1px solid var(--ink); padding:0 0 2px; cursor:pointer; }
@media (hover:hover){ .co-edit:hover{ color:var(--blush-line); border-color:var(--blush-line); } }
@media(max-width:560px){ .co-step-body, .co-step-summary{ padding-left:0; } .co-step-head h2{ font-size:1.4rem; } }

.co-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.125rem; }
.co-full{ grid-column:1 / -1; }
@media(max-width:560px){ .co-grid{ grid-template-columns:1fr; } }
.co-field span{ display:block; font-size:0.68rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:0.4375rem; }
.co-field input, .co-field select{ width:100%; border:1px solid rgba(42,36,32,0.16); border-radius:2px; padding:0.875rem 1rem; font:inherit; font-size:0.98rem; background:rgba(255,255,255,0.72); color:var(--ink); transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease; -webkit-appearance:none; appearance:none; }
.co-field select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a2420' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 0.875rem center; background-size:1rem; padding-right:2.5rem; }
@media (hover:hover){ .co-field input:hover, .co-field select:hover{ border-color:rgba(42,36,32,0.32); } }
.co-field input:focus, .co-field select:focus{ outline:none; border-color:var(--ink); background-color:var(--white); box-shadow:0 0 0 3px rgba(217,154,156,0.32); }
.co-field.has-error input, .co-field.has-error select{ border-color:var(--error); }
.co-field small{ display:block; color:var(--error); font-size:0.76rem; margin-top:0.3125rem; }
.co-address{ margin-top:1.25rem; }

.co-choices{ display:grid; gap:0.75rem; }
.co-choice{ display:flex; align-items:flex-start; gap:0.875rem; padding:1.125rem 1.25rem; border:1px solid rgba(42,36,32,0.16); border-radius:2px; background:rgba(255,255,255,0.45); cursor:pointer; transition:border-color .2s ease, background-color .2s ease, box-shadow .2s ease; }
@media (hover:hover){ .co-choice:hover{ border-color:rgba(42,36,32,0.32); } }
.co-choice:has(input:checked){ border-color:var(--ink); background:rgba(255,255,255,0.85); box-shadow:inset 0 0 0 1px var(--ink); }
.co-choice input{ margin-top:0.25rem; accent-color:var(--ink); }
.co-choice span{ flex:1; display:grid; grid-template-columns:1fr auto; gap:2px 0.75rem; font-size:0.98rem; }
.co-choice strong{ font-family:var(--font-serif); font-size:1.1rem; font-weight:500; }
.co-choice em{ font-style:normal; font-weight:600; text-align:right; }
.co-choice small{ grid-column:1 / -1; color:var(--ink-soft); font-size:0.84rem; line-height:1.5; }
.co-choice.is-disabled{ opacity:0.55; cursor:not-allowed; }
.co-rates{ margin-top:0.875rem; }
.co-quote{ margin-top:1.125rem; border:1px solid var(--ink); color:var(--ink); background:transparent; }
@media (hover:hover){ .co-quote:hover{ background:var(--ink); color:var(--white); } }
.co-quote:disabled{ opacity:0.5; }

.co-actions{ display:flex; justify-content:flex-end; margin-top:1.75rem; }
.co-actions .btn:disabled{ opacity:0.4; cursor:not-allowed; }
@media(max-width:560px){ .co-actions .btn{ width:100%; } }
.co-note{ font-size:0.84rem; color:var(--ink-soft); line-height:1.55; margin-top:1rem; }
.co-secure{ display:flex; align-items:flex-start; gap:0.625rem; }
.co-secure svg, .co-bag-secure svg{ flex:0 0 auto; width:1rem; height:1rem; margin-top:0.0625rem; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
.co-msg{ font-size:0.85rem; color:var(--error); line-height:1.5; margin-top:0.75rem; }
.co-hold{ margin-top:1rem; padding:0.875rem 1rem; background:rgba(255,255,255,0.5); border-left:2px solid var(--blush-line); font-size:0.88rem; line-height:1.55; }
.co-review{ list-style:none; border-top:1px solid rgba(42,36,32,0.16); }
.co-review li{ display:flex; justify-content:space-between; gap:1rem; padding:0.8125rem 0; border-bottom:1px solid rgba(42,36,32,0.1); font-size:0.95rem; }
.co-review-total{ font-weight:700; }
.co-review-discount span:last-child{ color:var(--blush-line); font-weight:600; }
/* Step 3, Payment (checkout.js): a promotion code, then Stripe's card form
   (styled to match .co-field through its Appearance settings). */
.co-promo{ margin-top:1.25rem; }
.co-promo-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0.75rem; align-items:end; }
.co-promo-row .co-quote{ margin-top:0; padding-top:0.875rem; padding-bottom:0.875rem; }
.co-promo-applied{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0.75rem 1rem; border:1px dashed var(--blush-line); border-radius:2px; font-size:0.9rem; background:rgba(255,255,255,0.5); }
.co-pay-element{ margin-top:1.5rem; min-height:4rem; }
/* Apple Pay / Google Pay / Link above the card form (checkout.js
   showPayArea): while they load, the area is laid over the placeholder,
   invisible, and the placeholder holds its place. */
/* Transparent, not visibility:hidden: Chrome stops drawing iframes in a
   hidden area and the card form came back blank. */
.co-pay-wrap{ position:relative; }
.co-pay-area{ transition:opacity .35s ease; }
.co-pay-area.is-loading{ position:absolute; top:0; left:0; right:0; opacity:0; pointer-events:none; }
/* The placeholder: a wallet button, the "or" line, the card form's tabs and
   fields, in grey bars with a light passing across them. */
.co-pay-skeleton{ display:flex; flex-direction:column; gap:0.75rem; margin-top:1.5rem; }
.co-pay-skeleton[hidden]{ display:none; }
.co-pay-skeleton .sk{ display:block; border-radius:3px; background:linear-gradient(100deg, rgba(42,36,32,0.07) 30%, rgba(42,36,32,0.13) 50%, rgba(42,36,32,0.07) 70%) 0 0 / 300% 100%; animation:co-sk 1.3s ease-in-out infinite; }
.co-pay-skeleton .sk-wallet{ height:50px; }
.co-pay-skeleton .sk-or{ display:flex; justify-content:center; padding:0.25rem 0; }
.co-pay-skeleton .sk-line{ width:8rem; height:0.6rem; }
.co-pay-skeleton .sk-tabs{ display:grid; grid-template-columns:repeat(3, 1fr); gap:0.75rem; }
.co-pay-skeleton .sk-tab{ height:3.75rem; }
.co-pay-skeleton .sk-label{ width:6rem; height:0.65rem; margin-top:0.35rem; }
.co-pay-skeleton .sk-field{ height:2.9rem; margin-top:0.45rem; }
.co-pay-skeleton .sk-row{ display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; }
@keyframes co-sk{ from{ background-position:100% 0; } to{ background-position:0 0; } }
@media (prefers-reduced-motion: reduce){ .co-pay-skeleton .sk{ animation:none; } }
/* Pay: the hover sweep only once the mouse moves onto it (checkout.js adds
   .is-hover), not when the button slides under a resting pointer. */
@media (hover:hover){
  .co-actions .btn.co-pay:hover:not(.is-hover){ background-size:0% 100%; color:var(--white); }
  .co-actions .btn.co-pay.is-hover:not(:disabled){ background-size:100% 100%; color:var(--ink); }
}
.co-express{ margin-top:1.5rem; }
.co-express[hidden]{ display:none; }
.co-or{ display:flex; align-items:center; gap:0.875rem; margin-top:1.25rem; font-size:0.7rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-soft); }
.co-or::before, .co-or::after{ content:""; flex:1; height:1px; background:rgba(42,36,32,0.16); }
.co-express + .co-pay-element{ margin-top:1.25rem; }
.co-review-total span:last-child{ font-family:var(--font-serif); font-size:1.35rem; font-weight:500; }
.co-empty{ border-top:1px solid rgba(42,36,32,0.16); border-bottom:1px solid rgba(42,36,32,0.16); padding:3rem 1rem; text-align:center; }
.co-empty p{ margin-bottom:1.25rem; font-family:var(--font-serif); font-size:1.5rem; color:var(--ink); }

/* The order: a white receipt-like panel, each piece's quantity on its photo. */
.co-bag{ position:sticky; top:6.875rem; background:var(--white); color:var(--ink); border:1px solid rgba(42,36,32,0.1); border-radius:2px; box-shadow:0 1.5rem 3rem -1.75rem rgba(42,36,32,0.45); }
.co-bag:empty{ display:none; }
.co-bag-body{ padding:1.75rem 1.875rem 1.5rem; }
.co-bag-toggle{ display:none; }
.co-bag-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:1.125rem; }
.co-bag-head h2{ font-family:var(--font-serif); font-style:italic; font-size:1.6rem; font-weight:400; color:var(--ink); }
.co-bag .co-edit{ color:var(--ink); border-color:var(--ink); }
@media (hover:hover){ .co-bag .co-edit:hover{ color:var(--blush-line); border-color:var(--blush-line); } }
.co-bag-items{ list-style:none; border-bottom:1px solid rgba(42,36,32,0.12); padding-bottom:0.625rem; margin-bottom:1rem; max-height:22rem; overflow-y:auto; }
.co-bag-items li{ display:flex; align-items:center; gap:1rem; padding:0.625rem 0; }
.co-bag-img{ position:relative; width:4.25rem; height:4.25rem; flex:0 0 auto; border-radius:2px; background:var(--linen-deep) center/cover no-repeat; }
.co-bag-img b{ position:absolute; top:-0.4375rem; right:-0.4375rem; min-width:1.375rem; height:1.375rem; padding:0 0.3rem; border-radius:62rem; background:var(--blush-deep); color:var(--ink); font-size:0.7rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.co-bag-name{ flex:1; min-width:0; font-family:var(--font-serif); font-size:1rem; line-height:1.3; color:var(--ink); text-decoration:none; }
@media (hover:hover){ .co-bag-name:hover{ text-decoration:underline; text-underline-offset:0.2em; } }
.co-bag-price{ font-size:0.92rem; font-weight:600; white-space:nowrap; text-align:right; }
.co-bag-price .price-now{ color:var(--sale); }
.co-bag-price .price-was{ display:block; font-size:0.78rem; margin-left:0; color:var(--ink-soft); }
.co-totals div{ display:flex; justify-content:space-between; font-size:0.92rem; padding:0.3125rem 0; color:var(--ink-soft); }
.co-totals dd{ margin:0; color:var(--ink); }
.co-savings dt, .co-savings dd{ color:var(--sale) !important; font-weight:600; }
.co-total{ border-top:1px solid rgba(42,36,32,0.12); margin-top:0.625rem; padding-top:0.875rem !important; align-items:baseline; }
.co-total dt{ color:var(--ink); font-weight:600; letter-spacing:0.12em; text-transform:uppercase; font-size:0.78rem; }
.co-total dd{ font-family:var(--font-serif); font-size:1.9rem; color:var(--ink) !important; }
.co-bag-secure{ display:flex; align-items:center; gap:0.5rem; margin-top:1.125rem; padding-top:1rem; border-top:1px solid rgba(42,36,32,0.12); font-size:0.74rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft); }
@media(max-width:900px){
  .co-bag-toggle{ display:flex; align-items:center; justify-content:space-between; width:100%; padding:1rem 1.25rem; border:none; background:none; color:var(--ink); font:inherit; cursor:pointer; }
  .co-bag-toggle span{ display:inline-flex; align-items:center; gap:0.375rem; font-size:0.74rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; }
  .co-bag-toggle svg{ width:1rem; height:1rem; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; transition:transform .25s ease; }
  .co-bag-toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }
  .co-bag-toggle strong{ font-family:var(--font-serif); font-size:1.3rem; font-weight:500; color:var(--ink); }
  .co-bag-body{ display:none; padding:0.25rem 1.25rem 1.25rem; border-top:1px solid rgba(42,36,32,0.12); }
  .co-bag.is-open .co-bag-body{ display:block; animation:coOpen .35s var(--ease-out); }
  .co-bag-head{ margin-top:1rem; }
  /* Opened, the summary fits on one screen showing five pieces (more scroll
     inside), the savings, the total and the secure-payment line. A fixed
     height, not one that follows the screen: Safari's address bar resizes
     the screen mid-scroll, and the box kept changing height under the finger.
     Compact rows, one line per name; the toggle bar is the title, so the
     "Your order" heading and Subtotal row (the Total says it) stay desktop-only. */
  .co-bag{ scroll-margin:3.75rem 0 0.75rem; }   /* clear of the status-strip fade */
  .co-bag-head, .co-subtotal{ display:none !important; }
  .co-bag-items{ max-height:calc(5 * 3.625rem + 0.375rem); margin-bottom:0.75rem; padding-bottom:0.375rem; overscroll-behavior:contain; }
  .co-bag-items li{ gap:0.875rem; padding:0.375rem 0; }
  .co-bag-img{ width:2.875rem; height:2.875rem; }
  .co-bag-img b{ top:-0.3125rem; right:-0.3125rem; min-width:1.125rem; height:1.125rem; font-size:0.62rem; }
  .co-bag-name{ font-size:0.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .co-bag-price{ font-size:0.86rem; }
  .co-bag-price .price-was{ font-size:0.72rem; }
  .co-bag-body{ padding-top:0.625rem; }
  .co-totals div{ padding:0.1875rem 0; font-size:0.88rem; }
  .co-total{ margin-top:0.375rem; padding-top:0.5rem !important; }
  .co-total dd{ font-size:1.6rem; }
  .co-bag-secure{ margin-top:0.625rem; padding-top:0.75rem; }
  .co-bag-secure .co-edit{ margin-left:auto; }
}
.co-bag-secure .co-edit{ display:none; }
@media(max-width:900px){ .co-bag-secure .co-edit{ display:inline-block; } }
.co-page .btn{ padding:0.9375rem 2.125rem; font-size:0.78rem; }

/* ---------------- favourites (site.js initFavourites) ---------------- */
.fav-btn{ position:absolute; top:0.625rem; right:0.625rem; z-index:3; width:2.125rem; height:2.125rem; border-radius:50%; border:none; background:rgba(255,255,255,0.92); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 0.25rem 0.75rem -0.375rem rgba(42,36,32,0.45); transition:transform .2s ease, background .2s ease; }
.fav-btn svg{ width:1.0625rem; height:1.0625rem; fill:none; stroke:var(--ink); stroke-width:1.6; transition:fill .2s ease, stroke .2s ease; }
@media (hover:hover){ .fav-btn:hover{ transform:scale(1.08); background:var(--white); } }
.fav-btn.is-fav svg{ fill:var(--blush-line); stroke:var(--blush-line); }
.fav-btn.pop{ animation:favPop .35s var(--ease-out); }
@keyframes favPop{ 0%{ transform:scale(1); } 45%{ transform:scale(1.25); } 100%{ transform:scale(1); } }
@media (prefers-reduced-motion: reduce){ .fav-btn.pop{ animation:none; } }
.detail-title-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.detail-title-row .fav-btn{ position:static; flex:0 0 auto; width:2.5rem; height:2.5rem; margin-top:0.25rem; }
.detail-title-row .fav-btn svg{ width:1.1875rem; height:1.1875rem; }

/* "You May Also Like" on the product page: the shop's own scroll-row look. */
.related-pieces{ margin:0.625rem 0 5.625rem; }
/* The heart owns the top-right corner of every card, so the round + lives
   bottom-right and the photo count bottom-left at every width (they used
   to move there only on narrow cards). Sold/Seasonal tags stay top-left. */
.gallery-card .quick-add-btn{ top:auto; bottom:0.625rem; right:0.625rem; }
.quick-add-below{ display:none; }
/* Phones: You May Also Like shows three cards to a screen, centred (equal
   side gutters, each card a third of what's left) and snapping three at a
   time. The photo is kept clear: the round + moves under the card, the heart
   and Sold/Sale tags shrink, and the pickup tag, photo count and hover
   photo are left off (the product page says all of that). */
@media(max-width:640px){
  .related-pieces .h-scroll-wrap{ --rp-side:1rem; --rp-gap:0.625rem; padding-left:var(--rp-side); padding-right:var(--rp-side); scroll-snap-type:x mandatory; scroll-padding:0 var(--rp-side); }
  .related-pieces .h-scroll-wrap .h-scroll-track{ gap:var(--rp-gap); }
  .related-pieces .h-scroll-track .gallery-card{ width:calc((100vw - 2 * var(--rp-side) - 2 * var(--rp-gap)) / 3); scroll-snap-align:start; }
  .related-pieces .h-scroll-wrap .h-scroll-track .g-frame{ display:block; width:100%; height:auto; aspect-ratio:4/5; }
  .related-pieces .h-scroll-track .g-img{ width:100%; height:100%; object-fit:cover; }
  .related-pieces .h-scroll-track .g-body{ max-width:none; padding-top:0.5rem; }
  .related-pieces .h-scroll-track h4{ font-size:0.82rem; line-height:1.25; }
  .related-pieces .h-scroll-track .g-price{ font-size:0.8rem; }
  .related-pieces .g-frame .quick-add-btn, .related-pieces .pickup-tag, .related-pieces .g-img-alt{ display:none; }
  .related-pieces .fav-btn{ top:0.3125rem; right:0.3125rem; width:1.625rem; height:1.625rem; }
  .related-pieces .fav-btn svg{ width:0.8125rem; height:0.8125rem; }
  .related-pieces .sale-tag{ top:0.3125rem; left:0.3125rem; padding:0.1875rem 0.4375rem; font-size:0.52rem; }
  .related-pieces .sold-tag{ padding:0.3125rem 0.5625rem; font-size:0.56rem; letter-spacing:0.1em; }
  /* Cards stretch to the tallest in the row and the + sits at the foot
     of each, so the buttons line up however many lines a name takes. */
  .related-pieces .h-scroll-wrap .h-scroll-track{ align-items:stretch; }
  .related-pieces .h-scroll-track .gallery-card{ display:flex; flex-direction:column; }
  .related-pieces .h-scroll-track .g-body{ flex:1; display:flex; flex-direction:column; }
  .related-pieces .h-scroll-track .g-price{ margin-bottom:0.5rem; }
  .related-pieces .quick-add-below{ display:inline-flex; position:static; gap:0.3rem; margin-top:auto; width:100%; height:auto; padding:0.4375rem 0; border:1px solid var(--ink); background:transparent; box-shadow:none; font-family:var(--font-sans); font-size:0.62rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; }
  .related-pieces .quick-add-below svg{ width:0.7rem; height:0.7rem; stroke-width:2.2; }
  .related-pieces .quick-add-below.is-added{ background:var(--ink); }
}

/* ---------------- product page (site.js initShopPage) ----------------
   Photos take most of the width (about 58%), details sit alongside and stay
   in view while scrolling. Sized in rem/vw so it holds its proportions at
   any zoom. */
.pd{ padding:1.5rem 4vw 1rem; }
.pd-back{ font-size:0.8rem; font-weight:600; letter-spacing:0.04em; color:var(--blush-line); }
.pd-grid{ display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr); gap:4vw; align-items:start; margin-top:1.5rem; }
.pd-media{ min-width:0; }
/* One photo: shown whole at its own shape (no crop), as large as the column and 80% of the window height allow.
   A small photo is scaled up to at least about 60% of the window's height (less on a phone, where the
   width runs out first), so a little upload never sits tiny in the middle of the page. */
.pd-main{ display:block; width:auto; max-width:100%; height:auto; min-height:min(60vh, 36rem, 90vw); max-height:80vh; margin:0 auto; object-fit:contain; border-radius:0.5rem; box-shadow:0 0.875rem 2.125rem var(--shadow); }
.pd-media .detail-carousel{ aspect-ratio:4/3; border-radius:0.5rem; touch-action:pan-y; }   /* sideways swipes change the photo (site.js onSwipe); up and down still scroll */
/* The row scrolls sideways, which clips anything drawn outside it: the
   4px of padding (offset by the margin, so the photos stay where they
   were, and so does what follows) leaves room for the active and focus
   rings, or their top and left edges get cut off. */
.pd-thumbs{ display:flex; gap:0.75rem; margin:calc(0.875rem - 4px) -4px -4px; overflow-x:auto; padding:4px 4px calc(0.25rem + 4px); }
.pd-thumb{ flex:0 0 auto; width:5.5rem; aspect-ratio:1; border:none; border-radius:0.375rem; background:var(--linen-deep) center/cover no-repeat; cursor:pointer; opacity:0.6; outline:1px solid transparent; outline-offset:2px; transition:opacity .2s ease, outline-color .2s ease; }
@media (hover:hover){ .pd-thumb:hover{ opacity:0.9; } }
.pd-thumb.active{ opacity:1; outline-color:var(--ink); }
.pd-thumb:focus-visible{ opacity:1; outline:2px solid var(--blush-line); }
.pd-info{ position:sticky; top:7rem; }
.pd-info .eyebrow{ display:block; margin-bottom:0.75rem; }
.pd-title{ font-size:clamp(2rem, 3.2vw, 3rem); font-weight:400; line-height:1.08; }
/* "by Lothantique" under the title; the brand searches the shop for more of it. */
.pd-brand{ margin-top:0.5rem; font-family:var(--font-serif); font-style:italic; font-size:1.1rem; color:var(--ink-soft); }
.pd-brand a{ color:var(--ink); text-decoration:none; background:linear-gradient(var(--blush-line), var(--blush-line)) 0 100%/100% 1px no-repeat; padding-bottom:1px; transition:color .2s ease; }
@media (hover:hover){ .pd-brand a:hover{ color:var(--blush-line); } }
.pd-price{ font-size:1.4rem; font-weight:700; color:var(--blush-line); margin:1rem 0 1.25rem; }
.pd-was{ text-decoration:line-through; opacity:0.6; }
/* Size chips under the price (site.js renderProductDetail): outlined like the
   tag pills, the chosen one filled in ink, sold-out ones dashed and labelled Sold out. */
.pd-sizes{ margin:0 0 1.5rem; }
.pd-sizes-label{ font-size:0.72rem; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:0.625rem; }
.pd-sizes-label span{ letter-spacing:0.08em; text-transform:none; font-size:0.9rem; color:var(--ink); }
.pd-size-row{ display:flex; flex-wrap:wrap; gap:0.5rem; }
.pd-size{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; min-width:3.25rem; min-height:2.75rem; padding:0.4375rem 1rem; border:1px solid var(--blush-line); border-radius:2px; background:transparent; font-family:var(--font-sans); font-size:0.9rem; line-height:1.2; color:var(--ink); cursor:pointer; transition:background-color .25s ease, border-color .25s ease, color .25s ease; }
.pd-size:focus-visible{ border-color:var(--ink); }
@media (hover:hover){ .pd-size:hover:not(:disabled){ border-color:var(--ink); } }
.pd-size.is-on{ background:var(--ink); border-color:var(--ink); color:var(--blush); }
.pd-size:disabled{ border-color:var(--ink-soft); border-style:dashed; color:var(--ink-soft); opacity:0.6; cursor:not-allowed; }
.pd-size-sold{ font-size:0.62rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; }
.pd-colour-name{ display:inline-flex; align-items:center; gap:0.5rem; }
/* a dot in the colour, when its name has a colour word (colour-family.js colourDot) */
.pd-colour-dot{ flex:none; width:0.75rem; height:0.75rem; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.18); }
.pd-size.is-on .pd-colour-dot{ box-shadow:0 0 0 1px var(--blush); }
.pd-size:disabled .pd-colour-dot{ opacity:0.5; }
#detailAddToCart:disabled{ opacity:0.5; cursor:not-allowed; }
.cart-qty-btn:disabled{ opacity:0.35; cursor:default; }
.pd-desc{ font-size:1.05rem; line-height:1.7; color:var(--ink-soft); white-space:pre-line; }
/* Long description / tags, folded (initClamps in site.js): about three
   lines of text, fading out, until Read more. */
.pd-clamp{ max-height:5.5rem; overflow:hidden; transition:max-height .5s var(--ease-out); }
.pd-clamp.pd-clamp-fits{ max-height:none; }
.pd-clamp.is-folded{ -webkit-mask-image:linear-gradient(#000 40%, transparent); mask-image:linear-gradient(#000 40%, transparent); }
.pd-more{ display:inline-block; margin-top:0.5rem; padding:0.25rem 0; border:none; background:none; cursor:pointer; font-family:var(--font-sans); font-size:0.72rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink); text-decoration:underline; text-underline-offset:0.3em; }
.pd-more[hidden]{ display:none; }
@media (prefers-reduced-motion: reduce){ .pd-clamp{ transition:none; } }
.pd-actions{ margin-top:1.75rem; display:flex; gap:0.875rem; flex-wrap:wrap; align-items:center; }
.pd .cart-added-note{ font-size:0.8rem; color:var(--blush-line); margin-top:0.75rem; display:none; }
.pd .cart-added-note.is-shown{ display:block; }
/* Pages that draw their content after loading (About, Services, a product)
   start with content-pending on <html>: the footer keeps its place but stays
   invisible until the content is in (site.js contentReady), so it isn't seen
   being pushed down. Sections below the content can opt in the same way
   with data-await-content. */
html.content-pending :is(body > footer, [data-await-content]){ visibility:hidden; }
.pd-delivery{ margin-top:1.75rem; padding-top:1.25rem; border-top:1px solid var(--line); font-size:0.9rem; line-height:1.6; color:var(--ink-soft); }
/* "Only 1 left" (cards and product page), size and weight, and the
   reassurance list under Add to Cart. */
/* "Only 1 left" shares the price's line, at its right end, so it never adds
   a row: the description and buttons below sit in the same place whether
   it shows or not (and when a size change brings it in or out). */
.pd-price-box{ display:flex; align-items:baseline; justify-content:space-between; gap:0 1rem; }
.pd-price-box .pd-price{ min-width:0; }
.pd-last{ flex:none; margin:0; white-space:nowrap; font-size:0.78rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--sale-hot); }
/* .gallery-card .g-last: the cards' plain `.gallery-card p` grey used to win, so it never showed red. */
.gallery-card .g-last{ margin-top:0.25rem; font-size:0.68rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--sale-hot); }
.pd-specs{ margin:1.25rem 0 0; display:grid; gap:0.5rem; }
.pd-specs div{ display:grid; grid-template-columns:7rem 1fr; gap:0.75rem; font-size:0.92rem; }
.pd-specs dt{ font-size:0.7rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-soft); padding-top:0.2rem; }
.pd-specs dd{ margin:0; color:var(--ink); white-space:pre-line; }
.pd-specs dd span{ color:var(--ink-soft); font-size:0.85rem; }
/* "Want one if it comes back?" on a sold piece. */
.pd-restock{ margin-top:1.5rem; padding:1.25rem; border:1px solid var(--line); border-radius:0.5rem; }
.pd-restock-title{ font-family:var(--font-serif); font-size:1.15rem; color:var(--ink); margin-bottom:0.75rem; }
.pd-restock-row{ display:flex; gap:0.625rem; flex-wrap:wrap; }
.pd-restock-row input{ flex:1 1 12rem; min-width:0; border:none; border-bottom:1px solid rgba(42,36,32,0.35); background:transparent; padding:0.625rem 0; font:inherit; font-size:1rem; color:var(--ink); }
.pd-restock-row input:focus{ outline:none; border-color:var(--blush-line); }
.pd-restock-note{ margin-top:0.625rem; font-size:0.82rem; color:var(--ink-soft); }
/* Phones: the product's Add to Cart, kept in reach once it scrolls away
   (site.js initStickyBuy). Opaque, so iPhone Safari tints its bottom bar to
   match. */
.pd-sticky{ display:none; }
@media(max-width:640px){
  .pd-sticky{ display:flex; align-items:center; gap:0.875rem; position:fixed; left:0; right:0; bottom:0; z-index:85; padding:0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom)); background:var(--blush); border-top:1px solid var(--line); box-shadow:0 -0.5rem 1.5rem -1rem var(--shadow); transform:translateY(110%); transition:transform .3s ease; }
  .pd-sticky.is-shown{ transform:translateY(0); }
  .pd-sticky-info{ flex:1; min-width:0; display:flex; flex-direction:column; }
  .pd-sticky-name{ font-family:var(--font-serif); font-size:0.95rem; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pd-sticky-price{ font-size:0.85rem; font-weight:700; color:var(--blush-line); }
  .pd-sticky-btn{ flex:0 0 auto; padding:0.75rem 1.25rem; }
  body.has-sticky-buy footer{ padding-bottom:5rem; }
}
@media (prefers-reduced-motion: reduce){ .pd-sticky{ transition:none; } }
.pd-trust{ list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:0.5rem; }
.pd-trust li{ display:flex; align-items:center; gap:0.625rem; font-size:0.86rem; color:var(--ink-soft); }
.pd-trust svg{ flex:0 0 auto; width:1.05rem; height:1.05rem; fill:none; stroke:var(--blush-line); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
/* Cart drawer: how far the cart is from free shipping. */
/* Cart drawer: "You might also like" under the items (site.js renderCartSuggestions). */
.cart-suggest{ margin:0 1.5rem; padding:1rem 0 1.25rem; border-top:1px solid var(--line); }
.cart-suggest-title{ font-size:0.72rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:0.75rem; }
.cart-suggest-row{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0.625rem; }
.cart-suggest-item{ display:flex; flex-direction:column; gap:0.25rem; min-width:0; }
.cart-suggest-photo{ display:block; position:relative; aspect-ratio:1; border-radius:0.375rem; background:var(--linen-deep) center/cover no-repeat; }
.cart-suggest-name{ font-family:var(--font-serif); font-size:0.82rem; line-height:1.25; color:var(--ink); text-decoration:none; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cart-suggest-price{ font-size:0.8rem; font-weight:600; color:var(--ink-soft); }
.cart-suggest-photo .quick-add-btn{ top:auto; bottom:0.375rem; right:0.375rem; width:1.875rem; height:1.875rem; }
.cart-suggest-photo .quick-add-btn svg{ width:0.9rem; height:0.9rem; }
.cart-freeship{ margin-bottom:0.875rem; font-size:0.84rem; color:var(--ink-soft); }
.cart-freeship strong{ color:var(--ink); }
.cart-freeship-bar{ margin-top:0.5rem; height:0.3125rem; border-radius:1rem; background:rgba(42,36,32,0.1); overflow:hidden; }
.cart-freeship-bar span{ display:block; height:100%; border-radius:inherit; background:var(--blush-line); transition:width .4s var(--ease-out); }
/* Footer newsletter: consent note and result line. */
.newsletter-note{ margin-top:0.5rem; font-size:0.74rem; color:var(--ink-soft); }
.newsletter-note a{ color:inherit; text-decoration:underline; font-size:inherit; padding:0; display:inline; background:none; }
.foot-social svg{ width:1.05rem; height:1.05rem; fill:none; stroke:currentColor; stroke-width:1.6; }
.newsletter-status{ margin-top:0.375rem; font-size:0.82rem; color:var(--ink); min-height:1em; }
.newsletter-status:empty{ display:none; }
/* Contact form: the piece being asked about, and the result line. */
.contact-about{ margin-bottom:1rem; font-family:var(--font-serif); font-style:italic; font-size:1.05rem; color:var(--ink-soft); }
.contact-about a{ color:var(--ink); }
.contact-status{ margin-top:0.875rem; font-size:0.9rem; color:var(--ink); }
.contact-status.is-error{ color:var(--error); }

/* ---------------- Returns & Refunds (refunds.html, refunds.js) ----------------
   Two forms on one page: find the order, then the items with a problem. The
   item rows reuse .admin-field; the photo picker (also used by the quote
   form) draws previews with a remove button per photo. */
.rf-section{ max-width:46rem; }
.rf-policy p{ font-size:1.05rem; }
.rf-policy-note{ font-size:0.95rem; }
.rf-policy-note a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.rf-form{ margin-top:3rem; padding-top:2.5rem; border-top:1px solid var(--line); }
.rf-form h2{ font-size:clamp(1.5rem,2.6vw,2rem); margin-bottom:1.25rem; }
.rf-form .rf-sub{ font-size:1.3rem; font-weight:400; margin:2rem 0 1rem; }
.rf-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 1.5rem; }
@media(max-width:640px){ .rf-grid{ grid-template-columns:1fr; } }
.rf-hint{ font-size:0.9rem; color:var(--ink-soft); margin:-0.25rem 0 1.25rem; }
.rf-order-heading{ font-family:var(--font-serif); font-size:1.15rem; color:var(--ink); margin-bottom:0.25rem; }
.rf-form button[type="submit"]{ padding:0.9375rem 2rem; border-radius:0.1875rem; border:1px solid var(--ink); background:var(--ink); color:var(--white); font-weight:700; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; cursor:pointer; }
@media (hover:hover){ .rf-form button[type="submit"]:hover{ background:var(--white); color:var(--ink); } }
.rf-form button[type="submit"]:disabled{ opacity:0.55; cursor:default; }
.rf-form input[readonly]{ background:rgba(255,255,255,0.4); color:var(--ink-soft); }
.rf-items{ display:flex; flex-direction:column; gap:0.75rem; margin-bottom:1.5rem; }
.rf-item{ border:1px solid var(--line); border-radius:0.375rem; background:rgba(255,255,255,0.45); }
.rf-item.is-picked{ border-color:var(--blush-line); background:rgba(255,255,255,0.7); }
.rf-item-head{ display:flex; align-items:center; gap:0.875rem; padding:0.75rem 0.875rem; cursor:pointer; }
.rf-item-head input{ width:1.1rem; height:1.1rem; accent-color:var(--blush-line); flex:none; }
.rf-thumb{ width:3.25rem; height:3.25rem; border-radius:0.25rem; background:var(--linen) center/cover no-repeat; flex:none; }
.rf-thumb-empty{ background:var(--linen); }
.rf-item-name{ font-weight:500; color:var(--ink); }
.rf-item-name small{ color:var(--ink-soft); font-weight:400; }
.rf-item-body{ padding:0 0.875rem 0.5rem 3.6rem; }
@media(max-width:640px){ .rf-item-body{ padding-left:0.875rem; } }
.rf-item-body .admin-field{ margin-bottom:0.875rem; }
.rf-previews{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.5rem; }
.rf-preview{ position:relative; width:4.5rem; height:4.5rem; border-radius:0.25rem; overflow:hidden; border:1px solid var(--line); }
.rf-preview img{ width:100%; height:100%; object-fit:cover; display:block; }
.rf-preview button{ position:absolute; top:0.2rem; right:0.2rem; width:1.4rem; height:1.4rem; border-radius:50%; border:none; background:rgba(42,36,32,0.85); color:#fff; font-size:0.7rem; cursor:pointer; line-height:1; }
.rf-photo-note{ font-size:0.8rem; color:var(--error); margin-top:0.375rem; }
.rf-photo-note:empty{ display:none; }
.rf-consent{ display:flex; align-items:flex-start; gap:0.625rem; font-size:0.92rem; color:var(--ink-soft); margin:0.5rem 0 1.25rem; line-height:1.5; }
.rf-consent input{ margin-top:0.2rem; accent-color:var(--blush-line); }
/* iPhone / iPad: "Get directions with" Apple Maps or Google Maps (site.js initDirections). */
/* --sv-ink: the sheet sits on <body>, outside the sections (.lk) that set the button colours. */
.dir-sheet{ --sv-ink:var(--ink); position:fixed; inset:0; z-index:200; display:flex; align-items:flex-end; justify-content:center; background:rgba(42,36,32,0.45); }
.dir-sheet-panel{ width:min(100%, 28rem); display:flex; flex-direction:column; gap:0.625rem; padding:1.5rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)); background:var(--white, #fff); border-radius:1rem 1rem 0 0; box-shadow:0 -1rem 2.5rem rgba(42,36,32,0.25); }
.dir-sheet-title{ margin:0 0 0.25rem; text-align:center; font-family:var(--font-serif); font-style:italic; font-size:1.3rem; color:var(--ink); }
.dir-sheet-panel .sv-btn{ display:block; text-align:center; }
.dir-sheet-cancel{ margin-top:0.25rem; padding:0.75rem; background:none; border:0; font-size:0.85rem; letter-spacing:0.08em; color:var(--ink-soft); cursor:pointer; }
/* The unticked "Email me news" box on every form with an email (site.js optInHtml). */
.opt-in{ display:flex; align-items:flex-start; gap:0.55rem; margin:0.25rem 0 1rem; font-size:0.82rem; line-height:1.45; color:var(--ink-soft); text-align:left; cursor:pointer; }
.opt-in input[type="checkbox"]{ flex:none; width:auto; height:auto; margin:0.15rem 0 0; padding:0; accent-color:var(--blush-line); }
.rf-success{ margin-top:3rem; padding-top:2.5rem; border-top:1px solid var(--line); }
.rf-success p{ font-size:1.05rem; margin-bottom:1.5rem; }
.contact-status:empty{ display:none; }
.admin-field .optional{ font-weight:400; text-transform:none; letter-spacing:0; color:var(--ink-soft); }
/* The piece's tags as outlined rose pills, each a search for more like it.
   Also puts the tag words on the page as text search engines can read. */
.pd-tags{ margin:2rem auto 0; padding:0 4vw 5.5rem; max-width:60rem; text-align:center; }
.related-pieces + .pd-tags{ margin-top:-2.5rem; }
.pd-tags-label{ display:block; font-size:0.72rem; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold, var(--ink-soft)); }
.pd-tags ul{ display:flex; flex-wrap:wrap; justify-content:center; gap:0.5rem; list-style:none; margin:0; padding:0.25rem 0; }
/* Tags fold to about a row and a half (the half fading out). */
.pd-tags .pd-clamp{ max-height:3.6rem; margin-top:0.625rem; }
.pd-tag{ display:inline-flex; align-items:center; gap:0.4375rem; padding:0.4375rem 0.9375rem; border:1px solid var(--blush-line); border-radius:999px; font-family:var(--font-sans); font-size:0.85rem; line-height:1.2; color:var(--ink); text-decoration:none; transition:background-color .25s ease, border-color .25s ease, color .25s ease; }
.pd-tag svg{ width:0.8125rem; height:0.8125rem; fill:none; stroke:var(--blush-line); stroke-width:2; stroke-linecap:round; transition:stroke .25s ease; }
.pd-tag:focus-visible{ background:var(--blush-deep); border-color:var(--blush-deep); }
@media (hover:hover){ .pd-tag:hover{ background:var(--blush-deep); border-color:var(--blush-deep); } }
.pd-tag:focus-visible svg{ stroke:var(--ink); }
@media (hover:hover){ .pd-tag:hover svg{ stroke:var(--ink); } }
@media(max-width:900px){
  .pd{ padding:1rem 1.25rem; }
  .pd-grid{ grid-template-columns:1fr; gap:1.75rem; }
  .pd-info{ position:static; }
}

/* ---------------- Scrollbars: minimal, light ----------------
   Everywhere on the site (the page, the cart drawer, the horizontal rails).
   A thin floating pill: a faint white fill with a hairline dark outline on a
   see-through track, so it reads on the pink page and on white panels without
   being a block of grey. Chrome/Edge/Safari use the ::-webkit rules; Firefox
   gets the thin standard equivalent. */
@supports selector(::-webkit-scrollbar){
  *::-webkit-scrollbar{ width:0.75rem; height:0.75rem; background:transparent; }
  *::-webkit-scrollbar-track, *::-webkit-scrollbar-corner{ background:transparent; }
  *::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.6); background-clip:padding-box; border:0.1875rem solid transparent; border-radius:999px; box-shadow:inset 0 0 0 1px rgba(42,36,32,0.32); }
  *::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,0.85); background-clip:padding-box; box-shadow:inset 0 0 0 1px rgba(42,36,32,0.5); }
}
@supports not selector(::-webkit-scrollbar){
  *{ scrollbar-width:thin; scrollbar-color:rgba(42,36,32,0.35) transparent; }
}
/* The page's own scrollbar (mouse and trackpad screens): the browser's sits
   in a strip of its own beside the page, which reads as the site being cut
   off down the right edge. Instead it floats over the page like a phone's
   (site.js initPageScrollbar, which adds .float-scroll), the same pill. */
html.float-scroll{ scrollbar-width:none; }
html.float-scroll::-webkit-scrollbar{ display:none; }
.page-scroll{ position:fixed; top:0; right:0; bottom:0; width:0.75rem; z-index:90; pointer-events:none; }
.page-scroll[hidden]{ display:none; }
.page-scroll-thumb{ position:absolute; top:0; left:0; right:0; border:0.1875rem solid transparent; background-clip:padding-box; border-radius:999px; background-color:rgba(255,255,255,0.6); box-shadow:inset 0 0 0 1px rgba(42,36,32,0.32); pointer-events:auto; cursor:default; transition:background-color .2s ease, box-shadow .2s ease; will-change:transform; }
.page-scroll-thumb:hover, .page-scroll.dragging .page-scroll-thumb{ background-color:rgba(255,255,255,0.85); box-shadow:inset 0 0 0 1px rgba(42,36,32,0.5); }
.page-scroll.dragging{ -webkit-user-select:none; user-select:none; }

/* ---------------- The cream box's gilt edges ----------------
   Every pale-cream box (shop: From our studio; home: Upholstery & Custom
   Painting; Upholstery page: Process and Quote; Gallery: Upholstery) has
   gilt rules along its very top and bottom edges: a heavier one at the edge
   and a fine one just inside. */
html :is(.sv-postcard, .svc-process, .svc-quote, .gl-uph){ position:relative; border-block:0;
  background-image:linear-gradient(90deg, #9c7740 0%, #d9bc82 16%, #b08d57 34%, #f0dcaa 52%, #b08d57 70%, #d9bc82 86%, #9c7740 100%), linear-gradient(90deg, #9c7740 0%, #d9bc82 16%, #b08d57 34%, #f0dcaa 52%, #b08d57 70%, #d9bc82 86%, #9c7740 100%), linear-gradient(90deg, #9c7740 0%, #d9bc82 16%, #b08d57 34%, #f0dcaa 52%, #b08d57 70%, #d9bc82 86%, #9c7740 100%), linear-gradient(90deg, #9c7740 0%, #d9bc82 16%, #b08d57 34%, #f0dcaa 52%, #b08d57 70%, #d9bc82 86%, #9c7740 100%);
  background-size:100% 3px, 100% 1px, 100% 3px, 100% 1px; background-repeat:no-repeat;
  background-position:0 0, 0 6px, 0 100%, 0 calc(100% - 6px); }

/* "CAD" after a price (site.js CAD): the same colour as the price, smaller
   and quieter, so it reads as a label rather than part of the amount. */
.cad{ margin-left:0.15em; font-size:0.62em; font-weight:600; letter-spacing:0.08em; vertical-align:0.12em; opacity:0.75; text-decoration:none; }

/* ---------------- small touches (2026-10-24) ---------------- */
/* Small round buttons on cards (+, heart) and slide dots: a bigger area to
   tap than they look, so a thumb finds them. */
/* Only the card ones, which are positioned themselves: on an unpositioned
   button the area would stretch over the whole section around it. */
.gallery-card :is(.quick-add-btn:not(.quick-add-below), .fav-btn)::after{ content:""; position:absolute; inset:-0.3rem; }
/* The quote form's "add photos" button, in the site's own style. */
.quote-form input[type="file"]::file-selector-button, .rf-photos::file-selector-button{
  font:inherit; font-size:0.72rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  padding:0.625rem 1.1rem; margin-right:0.75rem; border:1px solid var(--ink); border-radius:0; background:transparent; color:var(--ink); cursor:pointer; }
/* Checkout: room for its steps before they're drawn, so the footer doesn't jump. */
.co-steps:empty{ min-height:32rem; }

/* ---------------- sideways iPhones: edge to edge ----------------
   The pages run into the notch side and the rounded corners
   (viewport-fit=cover in every page's viewport tag): sections, photos and
   cards fill the screen like on any wide screen, with their usual spacing.
   Only the header and the panels that slide in from an edge keep their
   words and buttons clear of the notch band (--safe-l/--safe-r, 0
   everywhere else); their own backgrounds still paint under it. */
:root{ --safe-l:env(safe-area-inset-left, 0px); --safe-r:env(safe-area-inset-right, 0px); }
/* The header: the logo and menu button sit at least the band's depth in
   (its own 2.5rem side space covers most of it), the icons likewise. */
.nav-inner{ border-left:max(0px, calc(var(--safe-l) - 2.5rem)) solid transparent; border-right:max(0px, calc(var(--safe-r) - 2.5rem)) solid transparent; }
.nav-actions{ margin-right:max(0px, calc(var(--safe-r) - 1.5rem)); }
@media(min-width:641px){ .nav-search{ width:min(25rem, calc(100% - var(--ns-right, 7rem) - 1.5rem - var(--safe-l))); } }
@media(max-width:900px){ nav ul{ left:calc(0.75rem + var(--safe-l)); right:calc(0.75rem + var(--safe-r)); } }
/* Panels against an edge: the cart and the filters (right), the photo viewer (both). */
.cart-drawer, .filter-panel{ border-right:var(--safe-r) solid transparent; }
.gl-lightbox{ border-left:var(--safe-l) solid transparent; border-right:var(--safe-r) solid transparent; }