/* Set Apart Products — theme over the Tropiko layout.
   Palette from the badge logo (images/setapart-logo.jpg): teal #117887
   (primary), rose #e39ca2 (accent), pink stripe #fee2e3, warm cream #faf1ee,
   ink #2e2e2d. */

body {
  font-family: 'Poppins', sans-serif;
  color: #2e2e2d;
  background-color: #ffffff;
}

.layout_padding {
  padding: 75px 0;
}

.layout_padding2 {
  padding: 45px 0;
}

.layout_padding2-top {
  padding-top: 45px;
}


.layout_padding2-bottom {
  padding-bottom: 45px;
}

.layout_padding-top {
  padding-top: 75px;
}

.layout_padding-bottom {
  padding-bottom: 75px;
}


.custom_dark-btn,
.custom_accent-btn {
  display: inline-block;
  padding: 10px 0;
  text-align: center;
  width: 145px;
  outline: none;
  color: #f7f7f7;
  border: 1px solid transparent;
  /* pills, site-wide — the same shape as the shelf cards' add button and the
     stand's Pay bar; a square button had become the odd one out */
  border-radius: 999px;
}

.custom_dark-btn {
  background-color: #2e2e2d;
}

.custom_dark-btn:hover {
  border: 1px solid #2e2e2d;
  color: #2e2e2d;
  background-color: transparent;
}

.custom_accent-btn {
  background-color: #117887;
}

.custom_accent-btn:hover {
  border: 1px solid #117887;
  color: #117887;
  background-color: transparent;
}

/* display serif (Aug 2026 premium pass): Fraunces carries headings and
   product names; Poppins stays the UI/body voice */
.custom_heading {
  text-align: center;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.custom_heading-text {
  text-align: center;
}


/*header section*/
.hero_area {
  height: 98vh;
  background-color: #faf1ee;
  /* root the blend group HERE, where the cream is: Safari/WebKit won't
     composite a descendant's mix-blend-mode against a background this many
     ancestors up unless the background owner isolates — without this, iPhones
     render the hero photo as an unblended white square (desktop Chrome
     blends either way) */
  isolation: isolate;
}

.hero_area.sub_pages {
  height: auto;
}

.header_section .container-fluid {
  padding-right: 25px;
  padding-left: 25px;
}

.header_section .nav_container {
  margin: 0 auto;
}

.custom_nav-container.navbar-expand-lg .navbar-nav .nav-link {
  padding: 10px 30px;
  color: #343434;
  text-align: center
}

a,
a:hover,
a:focus {
  text-decoration: none;
}

a:hover,
a:focus {
  color: initial;
}

.btn,
.btn:focus {
  outline: none !important;
  box-shadow: none;
}



.navbar-brand,
.navbar-brand:hover {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 24px;
  color: #fafcfd;
}

.navbar-brand {
  display: flex;
  align-items: center;
}

.navbar-brand img {
  width: 48px;
  margin-right: 10px;
  /* the badge logo is a circle on a striped ground — crop to the ring */
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(11, 95, 109, 0.25);
}

.navbar-brand span {
  font-size: 20px;
  font-weight: 700;
  color: #2e2e2d;
  margin-top: 5px;
}

.custom_nav-container {
  z-index: 99999;
  padding: 15px 0;
}

.custom_nav-container .navbar-toggler {
  outline: none;
}

.custom_nav-container .navbar-toggler .navbar-toggler-icon {
  background-image: url(../images/menu.png);
  background-size: 55px;
}

.quote_btn-container a {
  display: inline-block;
  padding: 5px 15px;
  background-color: #117887;
  color: #f7f7f7;
  font-size: 14px;
  text-transform: uppercase;
}

/*end header section*/

/* slider section */
.slider_section {
  padding-top: 8%;
}

.slider_item-box {
  width: 100%;
  height: 100%;
}

.slider_item-box .container {
  height: 100%;
}

.slider_img-box {
  width: 85%;
  margin: 0 auto;
}

.slider_img-box img {
  width: 100%;
}

/* a PHOTO in the hero, dressed exactly like the product photos: developed to
   a true-white board by the upload pipeline, then multiply melts the board
   into the hero's cream and the bottles stand on their own natural shadow —
   the shop's blend grammar at hero scale. In normal flow and centered, so
   nothing hydration wraps around it can move it; and NO filtered/positioned
   wrapper may ever be added above it (an isolated compositing group would
   break the blend into a white square). */
/* hero photos are BAKED onto cream (out = pixel × #faf1ee/255) rather than
   runtime-blended: iOS Safari refused to composite mix-blend-mode against
   the hero's distant background through every workaround tried (img-level,
   isolation on the background owner, wrapper-group). Bake any new hero
   photo the same way before dropping it in images/ — deterministic on
   every engine, nothing left to fail. */
.slider_img-box img[src$=".jpg" i],
.slider_img-box img[src$=".jpeg" i] {
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

/* ── the cabinet that opens (home hero, :home-hero :stand) ──────────────────
   setapart.ui.cabinet. Flat shapes on the cream — nothing to blend. The doors
   are two real faces each (teal outside, chalkboard inside) hinged in 3D, so
   they open in perspective and stay open; then the chalk writes itself line by
   line. Reduced motion: open already, chalk written, nothing moves. */
.illo { width: 85%; margin: 0 auto; }

.cab { position: relative; aspect-ratio: 520 / 560; perspective: 1100px; }
.cab_svg { position: absolute; inset: 0; }
.cab_svg svg { display: block; width: 100%; height: 100%; overflow: visible; }

.cab_door {
  position: absolute;
  top: 17.5%;
  width: 28.85%;
  height: 71.4%;
  transform-style: preserve-3d;
}

.cab_door-l { left: 21.15%; transform-origin: left center; animation: cab-open-l 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) 1.1s both; }
.cab_door-r { left: 50%; transform-origin: right center; animation: cab-open-r 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) 1.25s both; }

.cab_door .face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 6px; }
.cab_door .face svg { display: block; width: 100%; height: 100%; }
.cab_door .front { background: linear-gradient(90deg, #0b5f6d, #117887 40%, #0b5f6d); box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.08); }
.cab_door .back { transform: rotateY(180deg); }

@keyframes cab-open-l { from { transform: rotateY(0); } to { transform: rotateY(-112deg); } }
@keyframes cab-open-r { from { transform: rotateY(0); } to { transform: rotateY(112deg); } }

/* the chalk on the inner faces writes on once the doors are open */
.cab .chalk {
  font-family: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  font-size: 22px;
  font-weight: 700;
  fill: #f4efe4;
  clip-path: inset(0 100% 0 0);
  animation: cab-chalk 0.55s steps(14, end) forwards;
  animation-delay: calc(2.5s + var(--n) * 0.28s);
}

@keyframes cab-chalk { to { clip-path: inset(0 0 0 0); } }

.cab .basket { animation: cab-swing 3.2s ease-in-out 2.8s infinite; }
@keyframes cab-swing { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(4deg); } }

@media (max-width: 768px) {
  .illo { width: 78%; margin: 40px auto 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .cab_door-l { animation: none; transform: rotateY(-112deg); }
  .cab_door-r { animation: none; transform: rotateY(112deg); }
  .cab .chalk { animation: none; clip-path: none; }
  .cab .basket { animation: none; }
}

/* ── the hero shore ─────────────────────────────────────────────────────────
   Pebble texture rises from the fold and the cream fades down into it — all
   plain background layers and an alpha cutout: no mix-blend-mode anywhere,
   so every engine (yes, iPhones) renders it identically. The shore asset is
   a mirror-tiled trayless crop of the pebble photo. */
/* ── SHELVED: the hero shore concept ────────────────────────────────────────
   The pebble bank rising from the fold with the bowl behind it. Shelved (the
   composite read as an effect), kept intact: add class "shore-experiment" to
   .hero_area to bring the whole thing back. Assets: hero-shore.jpg (tileable
   strip) + hero-bowl-cutout.png. */
.hero_area.shore-experiment:not(.sub_pages) {
  position: relative;
}

.hero_area.shore-experiment:not(.sub_pages)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  z-index: 2;
  pointer-events: none;
  background: url("../images/hero-shore.jpg") repeat-x center bottom / auto 100%;
  -webkit-mask-image: linear-gradient(to top, #000 55%, transparent 100%);
  mask-image: linear-gradient(to top, #000 55%, transparent 100%);
}

.shore-experiment .slider_section .row > .col-md-6:first-child {
  z-index: 3;
}

/* a CUTOUT in the hero (alpha png): floats on the shore with the teal shadow */
.slider_img-box img[src$=".png" i] {
  display: block;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  filter: drop-shadow(0 16px 24px rgba(11, 95, 109, 0.28));
}

@media (max-width: 767px) {
  .hero_area.shore-experiment:not(.sub_pages)::after {
    height: 150px;
  }
}

/* stacked mobile hero outgrows the fixed 98vh box — let the cream grow with
   it, so the photo always sits on cream (blending against the white body
   below the hero's edge would be invisible no-op blending) */
@media (max-width: 767px) {
  .hero_area:not(.sub_pages) {
    height: auto;
    min-height: 98vh;
  }
}

/* ── the mobile hero: static lockup + rotating tagline chip ─────────────────
   Phones don't get the shrunken desktop carousel. The text carousel and the
   arrows are hidden and a static lockup takes over: brand line, tagline
   chip, photo, CTAs — all inside the first viewport. Only the chip rotates
   (the hidden carousel's timer still drives it), and it is fixed-height by
   construction: the three phrases stack in one grid cell, so a swap can
   never reflow anything around it.

   The chip is an apothecary-label stamp in the house rose. The pill sizes
   to the widest phrase and never resizes on swap; the incoming phrase
   settles in with the house spring. Base styles here, mobile layout in the
   media block below (which must stay after them — same specificity). */
.hero_lockup {
  display: none;
}

.hero_tagchip {
  display: inline-grid;
  position: relative;
  max-width: 100%;
  border: 1.5px solid #e39ca2;
  border-radius: 999px;
  padding: 7px 18px 7px 34px;
}

.hero_tagchip::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: #e39ca2;
}

.hero_tagchip-item {
  grid-area: 1 / 1;
  align-self: center;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #2e2e2d;
  /* an over-budget phrase wraps (clamped at 2 lines) instead of stretching
     the pill past the viewport — the grid stack still sizes the pill to the
     tallest phrase, so a swap can never reflow the page around it */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.hero_tagchip-item.active {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease;
  animation: hero-settle 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) backwards;
}

@media (prefers-reduced-motion: reduce) {
  .hero_tagchip-item,
  .hero_tagchip-item.active {
    transition: none;
  }

  .hero_tagchip-item.active {
    animation: none;
  }
}

/* The lockup, photo, and CTAs live in two Bootstrap columns (CTAs inside
   the text column), so no column reorder can interleave them — instead both
   columns and the detail box are flattened with display:contents, making
   the pieces direct flex items of the row. The row's negative margins are
   zeroed (no column padding left to offset them) and the text pieces carry
   the 15px inset themselves. */
@media (max-width: 767px) {
  .slider_section .row {
    flex-direction: column;
    margin-left: 0;
    margin-right: 0;
  }

  .slider_section .row > .col-md-6,
  .slider_section .slider_item-detail {
    display: contents;
  }

  /* .hero_area prefix: responsive.css (loaded after this sheet) re-flexes
     the arrows at this width with an equal-specificity selector */
  .slider_section .slider_textzone,
  .hero_area .slider_section .custom_carousel-control {
    display: none;
  }

  .hero_area .slider_section {
    padding: 30px 0 34px;
  }

  .hero_lockup {
    display: block;
    order: 1;
    padding: 0 15px;
  }

  /* outweigh .slider_item-detail h1's desktop 60px (it sits later in the
     file than this block, so a bare .hero_lockup h1 would lose the tie) */
  .slider_section .hero_lockup h1 {
    font-size: clamp(30px, 9vw, 38px);
    line-height: 1.15;
    margin-bottom: 14px;
    text-wrap: balance;
  }

  /* headlines past the ~28-char budget (tagged .hl-long by the view fn)
     step down a size, holding ~3 lines so small-phone folds keep the CTAs */
  .slider_section .hero_lockup h1.hl-long {
    font-size: clamp(22px, 6.6vw, 28px);
  }

  .slider_section .slider_img-box {
    order: 2;
    margin: 10px auto 20px;
  }

  /* the photo yields to the one-viewport budget: height-capped, centered */
  .slider_section .slider_img-box img[src$=".jpg" i],
  .slider_section .slider_img-box img[src$=".jpeg" i],
  .slider_section .slider_img-box img[src$=".png" i] {
    width: auto;
    max-width: 100%;
    max-height: 40vh;
    margin: 0 auto;
  }

  .slider_section .slider_item-detail > .d-flex {
    order: 3;
    padding: 0 15px;
    margin-bottom: 30px;
  }
}

.slider_item-container {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}

.slider_item-detail h1 {
  font-weight: 700;
  font-size: 60px;
  width: 95%;
}

.slider_item-detail p {
  margin: 45px 0;
}

.slider_call-btn {
  display: inline-block;
  padding: 8px 20px;
  background-color: #e39ca2;
  color: #fefdfd;
  border-radius: 20px;
}

.slider_section .carousel,
.carousel-inner,
.carousel-item {
  height: 100%;
}

/* Equal-height slides: stack every slide in one grid cell so the tallest
   defines the section height at every viewport — cycling (or editing copy)
   can never re-flow the page below. Hidden slides keep their layout via
   visibility:hidden, which also enables a cross-fade instead of the hard
   display swap. */
.carousel-inner {
  display: grid;
}

.carousel-item {
  grid-area: 1 / 1;
  display: block;
  float: none;
  margin-right: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

.carousel-item.active {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.45s ease;
}

/* Template-faithful hero layout: the text carousel (equal-height cells sized
   by the tallest copy, top-aligned so headlines hold one position) sits in
   natural flow with the static CTA row directly below — spacing comes from
   the copy's own 45px bottom margin, as in the template. The CTA is static
   because the carousel box height never changes, not because it's pinned.
   The prev/next arrows live inside .slider_item-box, which is positioned so
   they anchor to the hero CONTENT box — the same box the template's arrows
   anchor to (its .carousel, which sits below the section's top padding):
   desktop = vertically centered on the content, mobile = at its bottom edge. */
.slider_section .slider_item-box {
  position: relative;
}

/* the incoming slide's text settles in with the site's springy personality:
   headline first, copy just behind (the pinned CTA row stays still) */
.carousel-item.active .slider_text > * {
  animation: hero-settle 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) backwards;
}

.carousel-item.active .slider_text > *:nth-child(2) {
  animation-delay: 0.08s;
}

@keyframes hero-settle {
  from {
    opacity: 0;
    translate: 0 12px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .carousel-item,
  .carousel-item.active {
    transition: none;
  }

  .carousel-item.active .slider_text > * {
    animation: none;
  }
}
.slider_section .custom_carousel-control {
  position: absolute;
  top: 50%;
  left: 2%;
  width: 105px;
  transform: translateY(-50%);
}

.slider_section .custom_carousel-control .carousel-control-prev,
.slider_section .custom_carousel-control .carousel-control-next {
  margin: 10px 0;
  position: relative;
  width: 45px;
  height: 45px;
  border: none;
  opacity: 1;
  background-repeat: no-repeat;
  background-size: 12px;
  background-position: center;
}

.slider_section .custom_carousel-control .carousel-control-prev {
  background-image: url(../images/prev.png);
  background-color: #117887;
}

.slider_section .custom_carousel-control .carousel-control-next {
  background-image: url(../images/next.png);
  background-color: #2e2e2d;
}

/* end slider section */


/* service section */
/* the services grid (replaces Bootstrap's card-deck, which forces one
   non-wrapping row): 4-across on desktop, 2x2 on tablets, 1-col on phones */
.service_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 30px;
}

.service_grid .card {
  margin: 0;
}

.service_section .card .card-img-top {
  width: 50px;
  margin: 55px auto 5px auto;
}

.service_section .card {
  text-align: center;
  box-sizing: border-box;
  position: relative;
}

.service_section .card .card-title {
  color: #117887;
}

.service_section .card::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 7px;
  background-color: transparent;
}

.service_section .card:hover {
  cursor: pointer;
  border: none;
  border-radius: 0;
  -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
}

.service_section .card:hover::after {
  background-color: #117887;
}

/* end service section */


/* product section */

.product_section .product_detail-box h3 {
  font-weight: 700;
}

.product_img-box img {
  max-width: 100%;
}

/* end product section */


/* banner section */

.banner_section {
  width: 100%;
  height: 420px;
  /* the pebble-tray flat-lay under a NEUTRAL ink scrim (keeps the stone
     tones true and the headline white, just dimmed); 40% framing centers
     the tray's arc in the band */
  background:
    linear-gradient(rgba(20, 18, 17, 0.38), rgba(20, 18, 17, 0.48)),
    url("../images/banner-pebbles.jpg") center 40% / cover no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner_section h2 {
  font-size: 72px;
  text-align: center;
  font-weight: bold;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 4px;
  text-shadow: 0 2px 18px rgba(11, 95, 109, 0.55);
}

/* end banner section */

/* our story band */
.story_band {
  background: #faf1ee;
  border-radius: 16px;
  padding: 34px 38px;
  display: flex;
  gap: 40px;
  align-items: center;
}

.story_art {
  flex: 0 0 320px;
}

.story_art img {
  width: 100%;
  border-radius: 14px;
  display: block;
  box-shadow: 0 16px 34px -18px rgba(11, 95, 109, 0.45);
}

.story_txt { flex: 1; }

.story_eyebrow {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b05e67;
  font-weight: 600;
  margin-bottom: 6px;
}

.story_txt h3 {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 14px;
}

.story_txt p {
  font-size: 15px;
  line-height: 1.7;
  max-width: 52ch;
}

.story_txt p + p { margin-top: 10px; }

@media (max-width: 576px) {
  .story_band {
    flex-direction: column;
    padding: 24px 20px;
    gap: 18px;
  }
  .story_art { flex-basis: auto; width: min(100%, 300px); }
}


/* client (testimonial) section */
.client_container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.client_img-box {
  width: 200px;
}

.client_img-box img {
  width: 100%
}

.client_container h3 {
  text-align: center;
  margin: 25px 0;
}


.client_section .custom_carousel-control {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 105px;
  transform: translateX(-50%);
}

.client_section .custom_carousel-control .carousel-control-prev,
.client_section .custom_carousel-control .carousel-control-next {
  width: 45px;
  height: 45px;
  border: none;
  border-radius: 100%;
  opacity: 1;
  background-repeat: no-repeat;
  background-size: 12px;
  background-position: center;
  background-color: #2e2e2d;
}

.client_section .custom_carousel-control .carousel-control-prev:hover,
.client_section .custom_carousel-control .carousel-control-next:hover {
  background-color: #117887;
}

.client_section .custom_carousel-control .carousel-control-prev {
  background-image: url(../images/prev.png);
}

.client_section .custom_carousel-control .carousel-control-next {
  background-image: url(../images/next.png);
}

/* end client section */

/* contact section */

.contact_section {
  background-image: url(../images/contact-botanical.svg);
  background-repeat: no-repeat;
  background-size: 215px;
  background-position: right center;
}

.contact_section input,
.contact_section textarea {
  border: none;
  outline: none;
  border-bottom: .8px solid #252525;
  width: 90%;
  margin: 10px 0;
  background-color: transparent;
  font-family: inherit;
}

.contact_form-container {
  padding: 15px 0 15px 0;
}

.contact_form-container button {
  border: none;
  background-color: #117887;
  color: #fff;
  padding: 8px 40px;
  text-transform: uppercase;
  font-size: 14px;
}

.contact_form-container button:disabled {
  opacity: .6;
}

.form_status {
  margin-top: 15px;
  font-size: 14px;
}

.form_status.is-error {
  color: #b3474d;
}

.form_status.is-ok {
  color: #117887;
}


/* contact section */

/* info section */
/* ---- the stand's address and hours (setapart.ui.place) ------------------
   the footer's Find-us column and the contact page's aside; the open-line
   is the server's sentence, teal like a price */
.site_footer-addr { display: inline-block; line-height: 1.45; }
.site_footer-open { color: #117887; font-weight: 600; }

.contact_stand {
  background: #ffffff;
  border: 1px solid #f5d9db;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 26px -18px rgba(11, 95, 109, 0.3);
}

.contact_stand-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 30%;
}

.contact_stand-h {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  color: #2e2e2d;
  margin: 16px 18px 6px;
}

.contact_stand-addr {
  display: block;
  margin: 0 18px;
  font-size: 15px;
  line-height: 1.45;
  color: #2e2e2d;
}

.contact_stand-addr:hover,
.contact_stand-addr:focus-visible {
  color: #117887;
  text-decoration: none;
}

.contact_stand-hours {
  margin: 10px 18px 0;
  font-size: 14px;
  color: #4a443c;
}

.contact_stand-open { color: #117887; font-weight: 600; }

.contact_stand-note {
  margin: 10px 18px 18px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #6e685c;
}

@media (max-width: 767px) {
  .contact_stand { margin-top: 24px; }
}

/* ---- the 404: the cabinet's door as a page ---------------------------------
   setapart.ui.components/not-found-section — slate in a teal frame, the
   message chalked on, the families lettered under it as the real door lists
   them. Caveat rides in the page head. */
.nf_section {
  background: #faf1ee;
  padding: 60px 0 70px;
}

.nf_board {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  background: #1e2b2d;
  border: 10px solid #117887;
  border-radius: 10px;
  padding: 46px 54px 44px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 24px 50px -30px rgba(11, 95, 109, 0.6);
}

/* the hinge pins */
.nf_board::before,
.nf_board::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: #b98f5a;
}

.nf_board::before { left: -6px; }
.nf_board::after { right: -6px; }

.nf_chalk {
  font-family: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  font-weight: 700;
  color: #f4efe4;
}

.nf_h {
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1;
  margin: 0 0 8px;
}

.nf_s {
  font-size: clamp(20px, 3vw, 27px);
  font-weight: 500;
  opacity: 0.92;
  margin: 0 0 30px;
}

.nf_path {
  background: rgba(244, 239, 228, 0.14);
  padding: 0 8px;
  border-radius: 6px;
  word-break: break-all;
}

.nf_list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 6px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 40px;
}

.nf_list a {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  font-size: clamp(24px, 3.2vw, 30px);
  border-bottom: 2px dashed transparent;
  text-decoration: none;
}

.nf_list a:hover,
.nf_list a:focus-visible {
  color: #f4efe4;
  border-bottom-color: rgba(244, 239, 228, 0.5);
  text-decoration: none;
}

.nf_list small {
  font-size: 20px;
  font-weight: 500;
  opacity: 0.75;
}

.nf_bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f4efe4;
  opacity: 0.85;
  align-self: center;
  flex: 0 0 auto;
}

.nf_foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 34px;
}

.nf_btn {
  display: inline-block;
  background: #f4efe4;
  color: #1e2b2d;
  border-radius: 999px;
  padding: 11px 24px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.nf_btn:hover,
.nf_btn:focus-visible {
  background: #ffffff;
  color: #117887;
  text-decoration: none;
}

.nf_ask {
  margin: 0;
  font-size: 13.5px;
  color: rgba(244, 239, 228, 0.7);
}

.nf_ask a { color: #f4efe4; font-weight: 600; }
.nf_ask a:hover, .nf_ask a:focus-visible { color: #ffffff; text-decoration: none; }

/* the chalk writes on, line by line */
.nf_write {
  clip-path: inset(0 100% 0 0);
  animation: nf-write 0.7s steps(18, end) forwards;
}

.nf_h { animation-delay: 0.2s; }
.nf_s { animation-delay: 0.9s; }
.nf_list li:nth-child(1) { animation-delay: 1.6s; }
.nf_list li:nth-child(2) { animation-delay: 1.9s; }
.nf_list li:nth-child(3) { animation-delay: 2.2s; }
.nf_list li:nth-child(4) { animation-delay: 2.5s; }
.nf_list li:nth-child(5) { animation-delay: 2.8s; }
.nf_list li:nth-child(6) { animation-delay: 3.1s; }
.nf_list li:nth-child(n+7) { animation-delay: 3.4s; }

@keyframes nf-write { to { clip-path: inset(0 0 0 0); } }

@media (max-width: 680px) {
  .nf_section { padding: 30px 0 40px; }
  .nf_board { padding: 30px 24px 28px; border-width: 8px; }
  .nf_list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .nf_write { animation: none; clip-path: none; }
}

/* ---- footer: one paper band that says four true things ------------------- */
.site_footer {
  background-color: #faf1ee;
  padding: 44px 0 22px;
  color: #2e2e2d;
  font-size: 14px;
  line-height: 1.55;
}

.site_footer a { color: inherit; }
.site_footer a:hover { color: #117887; text-decoration: none; }

.site_footer-top {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.4fr;
  gap: 32px;
}

.site_footer-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 20px;
  color: #2e2e2d;
}

.site_footer-mark:hover { color: #2e2e2d; text-decoration: none; }
.site_footer-mark img { width: 40px; height: 40px; border-radius: 50%; }

.site_footer-tagline {
  color: #6f6a74;
  margin: 12px 0 0;
  max-width: 30ch;
}

.site_footer-h {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: #117887;
  margin: 0 0 8px;
}

.site_footer-list { list-style: none; margin: 0; padding: 0; }
.site_footer-list li + li { margin-top: 5px; }

.site_footer-social { display: flex; gap: 10px; flex-wrap: wrap; }

.site_footer-social a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #f5d9db;
  border-radius: 999px;
  padding: 6px 12px 6px 6px;
  background: #fff;
  font-size: 13px;
}

.site_footer-social a:hover { border-color: #117887; }
.site_footer-social img { width: 26px; height: 26px; border-radius: 50%; }

/* the subscribe form, as the footer wears it: one pill row */
.site_footer .form_container form { display: flex; gap: 8px; }

.site_footer .form_container input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: auto;
  border: 1px solid #e5d9d9;
  border-radius: 999px;
  padding: 9px 14px;
  font: inherit;
  font-size: 14px;
  background: #fff;
  color: #2e2e2d;
}

.site_footer .form_container input:focus { outline: 2px solid #117887; outline-offset: 1px; border-color: #117887; }

.site_footer .form_container button {
  border: 0;
  border-radius: 999px;
  background: #117887;
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  padding: 9px 18px;
  margin: 0;
  cursor: pointer;
}

.site_footer .form_container button:disabled { opacity: 0.6; cursor: default; }
.site_footer .form_status { margin: 8px 0 0; font-size: 13px; }

.site_footer-fine {
  font-size: 12.5px;
  color: #6f6a74;
  margin: 8px 0 0;
}

.site_footer-bottom {
  margin-top: 34px;
  border-top: 1px solid #ecdcdc;
  padding-top: 16px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: #6f6a74;
}

.site_footer-legal { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.site_footer-legal a, .site_footer-nav a { color: #6f6a74; }
.site_footer-nav { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; }

@media (max-width: 640px) {
  .site_footer { padding: 34px 0 20px; }
  .site_footer-top { grid-template-columns: 1fr; gap: 26px; }
  .site_footer-sub { order: -1; }
  .site_footer-bottom { flex-direction: column; gap: 10px; }
  .site_footer-nav { gap: 12px 16px; }
}

/* ---- the small print pages ------------------------------------------------ */
.legal_body { max-width: 68ch; }
.legal_body h3 { font-family: 'Fraunces', Georgia, serif; font-size: 20px; color: #117887; margin: 28px 0 8px; }
.legal_body p, .legal_body li { line-height: 1.65; }
.legal_body ul { padding-left: 20px; }
.legal_body li + li { margin-top: 8px; }
.legal_updated { color: #6f6a74; font-size: 13px; margin-top: -6px; }
/* end footer */


/* preview-cms chrome (headless slots + data-preview hooks from
   preview.client.chrome, dressed to match the site — same design language as
   the page-feedback widget below; see setapart.preview :classes) */

.pv-badge {
  /* position/top/right come inline from the library — the badge is portaled
     to <body> (fixed, pinned to the block's top-right) so it never clips.
     Idle: a dimmed teal pencil chip. Hovering the badge OR the block itself
     (data-anchor-hover, stamped by the library) wakes it; hovering the badge
     also expands the decision label. */
  z-index: 100000;
  display: flex;
  align-items: center;
  border: none;
  border-radius: 999px;
  background-color: #117887;
  color: #ffffff;
  font-size: 11px;
  line-height: 1;
  padding: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  opacity: 0.45;
  /* at rest: upright, with a springy release transition for the tilt below */
  transform: rotate(0deg);
  transition: opacity 0.15s ease, background-color 0.15s ease,
              transform 0.5s cubic-bezier(0.3, 1.8, 0.5, 1);
  /* pop-and-settle on (re)appearance — `scale` is its own property, so it
     composes with the rotate transform above */
  animation: pv-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* scroll tilt, keyed off the library's attributes (attribute selectors
   invalidate in every engine; WebKit misses calc(var(…)) transform updates):
   pencils lean against the scroll direction while the page moves, fast
   attack, then spring upright via the base transition */
.pv-badge[data-scrolling="true"] {
  transition: opacity 0.15s ease, background-color 0.15s ease,
              transform 0.1s ease-out;
}

.pv-badge[data-scroll-dir="down"] {
  transform: rotate(-12deg);
}

.pv-badge[data-scroll-dir="up"] {
  transform: rotate(12deg);
}

@keyframes pv-pop {
  0%   { scale: 0.4; opacity: 0; }
  60%  { scale: 1.15; }
  100% { scale: 1; }
}

.pv-badge:hover,
.pv-badge[data-anchor-hover="true"],
.pv-badge[data-open="true"] {
  opacity: 1;
}

.pv-badge [data-preview="badge-icon"] {
  display: block;
  width: 13px;
  height: 13px;
}

/* picking the pencil up to write: one lively wiggle, held tilted */
.pv-badge:hover [data-preview="badge-icon"] {
  animation: pv-wiggle 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: rotate(-16deg) scale(1.2);
}

@keyframes pv-wiggle {
  0%   { transform: rotate(0deg) scale(1); }
  35%  { transform: rotate(-26deg) scale(1.3); }
  70%  { transform: rotate(6deg) scale(1.12); }
  100% { transform: rotate(-16deg) scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
  .pv-badge,
  .pv-badge[data-scrolling="true"],
  .pv-badge[data-scroll-dir="down"],
  .pv-badge[data-scroll-dir="up"] {
    animation: none;
    transform: none;
    transition: opacity 0.15s ease, background-color 0.15s ease;
  }

  .pv-badge [data-preview="badge-icon"],
  .pv-badge:hover [data-preview="badge-icon"] {
    animation: none;
    transform: none;
  }
}

.pv-badge [data-preview="badge-label"] {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.2s ease, margin 0.2s ease;
}

.pv-badge:hover [data-preview="badge-label"] {
  max-width: 200px;
  margin-left: 6px;
  margin-right: 3px;
}

/* others have voted, you haven't — the marker that actually needs you */
.pv-badge[data-has-votes="true"][data-my-vote="false"] {
  background-color: #c9767e;
  opacity: 0.9;
}

.pv-panel {
  /* position/top/right/max-height come inline from the library — the panel
     is portaled to <body> (fixed, anchored to the block) so it never clips */
  z-index: 100001;
  width: 340px;
  max-width: 90vw;
  overflow-y: auto;
  border: 1px solid #f5d9db;
  border-radius: 12px;
  background-color: #ffffff;
  padding: 16px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  color: #2e2e2d;
  text-align: left;
  text-transform: none;
  white-space: normal;
  box-shadow: 0 18px 45px -20px rgba(11, 95, 109, 0.45);
}

.pv-panel [data-preview="panel-title"] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #117887;
  border-bottom: 1px solid #f5d9db;
  padding-bottom: 10px;
  margin-bottom: 8px;
}

.pv-close {
  border: none;
  background: none;
  padding: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  color: #6f6a74;
  cursor: pointer;
}

.pv-close:hover {
  color: #2e2e2d;
}

.pv-panel [data-preview="variants"] {
  list-style: none;
  margin: 0 0 4px 0;
  padding: 0;
}

.pv-variant {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  margin: 2px -8px;
  border-radius: 8px;
}

.pv-variant:hover {
  background-color: #faf1ee;
}

.pv-variant [data-preview="variant-preview"] {
  border: none;
  background: none;
  padding: 2px 0;
  font-family: inherit;
  font-size: 13px;
  color: #2e2e2d;
  cursor: pointer;
  text-align: left;
}

.pv-variant [data-preview="variant-preview"]:hover {
  color: #117887;
}

.pv-variant[data-current="true"] [data-preview="variant-preview"] {
  color: #117887;
  font-weight: 600;
}

.pv-voters {
  font-size: 11px;
  color: #6f6a74;
}

.pv-published {
  background-color: rgba(17, 120, 135, 0.1);
  color: #117887;
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.pv-vote {
  margin-left: auto;
  flex-shrink: 0;
  border: 1px solid #117887;
  border-radius: 999px;
  background: none;
  color: #117887;
  padding: 2px 12px;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}

.pv-vote:hover:enabled {
  background-color: rgba(17, 120, 135, 0.08);
}

.pv-vote:disabled {
  border-color: #f5d9db;
  color: #6f6a74;
  cursor: default;
  opacity: 0.8;
}

.pv-propose {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  border-top: 1px solid #f5d9db;
  padding-top: 12px;
}

.pv-propose input,
.pv-propose textarea {
  width: 100%;
  border: 1px solid #f5d9db;
  border-radius: 8px;
  padding: 6px 8px;
  margin: 0;
  font-family: inherit;
  font-size: 13px;
  background-color: #ffffff;
  resize: vertical;
}

.pv-propose textarea {
  min-height: 56px;
}

.pv-propose button[type="submit"] {
  justify-self: end;
  border: 1px solid #117887;
  border-radius: 8px;
  background: none;
  color: #117887;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}

.pv-propose button[type="submit"]:hover {
  background-color: rgba(17, 120, 135, 0.08);
}

.pv-comments {
  margin-top: 12px;
  border-top: 1px solid #f5d9db;
  padding-top: 10px;
}

.pv-comments ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 180px;
  overflow-y: auto;
}

.pv-comments [data-preview="comment"] {
  border: 1px solid #f5d9db;
  background-color: #fdf8f6;
  border-radius: 10px;
  padding: 6px 10px;
  margin: 0 0 6px 0;
  font-size: 12px;
}

.pv-comments [data-preview="comment"] b {
  color: #117887;
  font-weight: 600;
}

.pv-comments form {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 4px 0 0 0;
}

.pv-comments [data-preview="comment-input"] {
  flex: 1;
  min-width: 0;
  border: 1px solid #f5d9db;
  border-radius: 8px;
  padding: 6px 8px;
  margin: 0;
  font-family: inherit;
  font-size: 12px;
  background-color: #ffffff;
}

.pv-comments form button[type="submit"] {
  flex-shrink: 0;
  border: 1px solid #117887;
  border-radius: 8px;
  background: none;
  color: #117887;
  padding: 5px 12px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}

.pv-comments form button[type="submit"]:hover {
  background-color: rgba(17, 120, 135, 0.08);
}

/* resolution-source flags (wrap-source-flag): show shareholders what state
   they're looking at while they type or preview a candidate */

[data-preview-source="draft"] {
  outline: 2px dashed #e39ca2;
  outline-offset: 5px;
  border-radius: 2px;
}

[data-preview-source="previewed"] {
  outline: 2px dashed #8ec7d1;
  outline-offset: 5px;
  border-radius: 2px;
}

/* end preview-cms chrome */

/* page feedback (preview sessions only — setapart.ui.feedback) */

.feedback_container {
  position: fixed;
  bottom: 25px;
  left: 25px;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.feedback_fab {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background-color: #117887;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(11, 95, 109, 0.35);
}

.feedback_fab:hover {
  background-color: #0b5f6d;
}

.feedback_count {
  position: absolute;
  top: -6px;
  right: -6px;
  background-color: #e39ca2;
  color: #ffffff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  line-height: 1.2;
}

.feedback_panel {
  width: 340px;
  max-width: 90vw;
  background-color: #ffffff;
  border: 1px solid #f5d9db;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 18px 45px -20px rgba(11, 95, 109, 0.45);
}

.feedback_header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid #f5d9db;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.feedback_title {
  margin: 0;
  font-weight: 600;
  font-size: 14px;
  color: #117887;
}

.feedback_path {
  margin: 0;
  font-size: 11px;
  color: #6f6a74;
}

.feedback_close {
  border: none;
  background: none;
  font-size: 18px;
  line-height: 1;
  color: #6f6a74;
  cursor: pointer;
}

.feedback_close:hover {
  color: #2e2e2d;
}

.feedback_scroll {
  max-height: 60vh;
  overflow-y: auto;
}

.feedback_comment {
  border: 1px solid #f5d9db;
  background-color: #fdf8f6;
  border-radius: 10px;
  padding: 8px 12px;
  margin-top: 8px;
}

.feedback_meta {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 11px;
  color: #6f6a74;
}

.feedback_author {
  font-weight: 600;
  color: #2e2e2d;
}

.feedback_author.is-mine {
  color: #117887;
}

.feedback_resolved {
  background-color: rgba(17, 120, 135, 0.1);
  color: #117887;
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 10px;
  text-transform: uppercase;
}

.feedback_body {
  margin: 4px 0;
  font-size: 13px;
  white-space: pre-wrap;
}

.feedback_actions {
  display: flex;
  gap: 14px;
}

.feedback_actions button {
  border: none;
  background: none;
  padding: 2px 0;
  font-size: 11px;
  color: #6f6a74;
  cursor: pointer;
}

.feedback_actions button:hover {
  color: #2e2e2d;
}

.feedback_reply {
  margin: 6px 0 0 12px;
}

.feedback_compose {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 10px;
}

.feedback_compose textarea {
  flex: 1;
  min-width: 0;
  border: 1px solid #f5d9db;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
}

.feedback_compose button {
  border: 1px solid #117887;
  background: none;
  color: #117887;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
}

.feedback_compose button:hover:enabled {
  background-color: rgba(17, 120, 135, 0.08);
}

.feedback_compose button:disabled {
  opacity: 0.5;
}

/* end page feedback */

/* ---- shop: live products + cart + checkout ------------------------------- */

.product_buy-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.product_price {
  font-size: 20px;
  font-weight: 700;
  color: #117887;
}

.product_soldout {
  color: #c9767e;
  font-size: 14px;
  font-style: italic;
}

.product_category-heading {
  margin: 55px 0 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 26px;
  font-weight: 600;
  color: #117887;
  /* anchor jumps clear the sticky category rail */
  scroll-margin-top: 64px;
}

.product_category-intro {
  margin: 6px 0 0;
  font-size: 15px;
  color: #6f6a74;
  max-width: 62ch;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

.product_size-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 14px;
}

.product_size-btn {
  border: 1.5px solid #117887;
  background: transparent;
  color: #117887;
  border-radius: 20px;
  padding: 4px 16px;
  font-size: 14px;
  cursor: pointer;
}

.product_size-btn.selected {
  background: #117887;
  color: #fff;
}

.product_size-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* ---- shelf cards (card studies option A): catalog listings --------------- */
/* containment borrowed from .cart_box — white, rose hairline, soft teal
   shadow — so the cards speak the site's existing language */

.product_shelf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 26px;
  margin-top: 28px;
}

.product_shelf-card {
  background: #ffffff;
  border: 1px solid #f5d9db;
  border-radius: 12px;
  /* whisper shadow (premium pass) — containment reads from the hairline,
     not the glow */
  box-shadow: 0 10px 26px -18px rgba(11, 95, 109, 0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@media (hover: hover) {
  .product_shelf-card {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }
  .product_shelf-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px -18px rgba(11, 95, 109, 0.4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .product_shelf-card, .product_shelf-card:hover {
    transition: none;
    transform: none;
  }
}

.product_shelf-art {
  background: #faf1ee;
  border-radius: 0 0 46% 46% / 0 0 14% 14%;
  padding: 22px 16px 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.product_shelf-art img {
  max-width: 100%;
  height: 130px;
  object-fit: contain;
}

.product_shelf-body {
  padding: 16px 18px 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.product_shelf-body h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
}

/* rose category eyebrow — the quieted chip (premium pass) */
.product_eyebrow {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b05e67;
  font-weight: 600;
}

.product_shelf-desc p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.product_shelf-zone {
  border-top: 1px solid #fee2e3;
  margin-top: 10px;
  padding: 12px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product_shelf-zone .product_size-picker {
  margin: 0;
}

.product_shelf-zone .cart_add-btn {
  width: 100%;
  border-radius: 999px;
}

/* standalone price row (premium pass): price as a quiet typographic fact
   beside the size note — never only inside the button */
.product_shelf-price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.product_shelf-price {
  font-size: 17px;
  font-weight: 600;
  color: #117887;
  font-variant-numeric: tabular-nums;
}

.product_shelf-price .from {
  font-size: 12px;
  font-weight: 400;
  color: #6f6a74;
}

.product_shelf-size {
  font-size: 12.5px;
  color: #6f6a74;
}

/* multi-size CTA: same dark pill as the add button, but it's a link to the
   product page — variant choice and quantity live there now */
a.product_shelf-choose {
  display: block;
  text-align: center;
  background: #2e2e2d;
  color: #faf1ee;
  border-radius: 999px;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 600;
}

a.product_shelf-choose:hover,
a.product_shelf-choose:focus-visible {
  background: #117887;
  color: #ffffff;
  text-decoration: none;
}

.product_chip {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: #fee2e3;
  color: #b05e67;
  border-radius: 999px;
  padding: 3px 11px;
  font-weight: 600;
  white-space: nowrap;
}

.product_badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 11.5px;
  background: #faf1ee;
  color: #b05e67;
  border: 1px dashed #e39ca2;
  border-radius: 999px;
  padding: 3px 11px;
}

/* ---- product photos vs cutouts (photo treatment studies) ------------------
   JPEG/WebP uploads are PHOTOS: multiply melts their white background into
   the cream, and the card shape crops them (object-fit: cover). PNG/SVG are
   CUTOUTS (background-removed or drawn art) and keep the floating treatment.
   The file format encodes the intent — see the family photo recipe. */

.product_shelf-art img[src$=".jpg" i],
.product_shelf-art img[src$=".jpeg" i],
.product_shelf-art img[src$=".webp" i] {
  mix-blend-mode: multiply;
  /* whisper of pre-blend white-point lift: the upload pipeline normalizes
     backgrounds to ~255, and 1.02 mops up its vignette residue (~250) plus
     any image that predates or bypasses the pipeline */
  filter: brightness(1.02);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* photo fills the arch edge-to-edge (:has-supporting browsers; others keep
   the padded version, which multiply still makes seamless) */
.product_shelf-art:has(> img[src$=".jpg" i]),
.product_shelf-art:has(> img[src$=".jpeg" i]),
.product_shelf-art:has(> img[src$=".webp" i]) {
  padding: 0;
  height: 168px;
}

/* ---- shelf pacing (premium pass, phase 3) ---------------------------------
   the sticky category rail, per-category intro lines, the provenance line on
   featured tiles, and the double-width featured tile itself */

.product_catnav {
  position: sticky;
  top: 0;
  z-index: 40;
  margin-top: 30px;
  background: rgba(255, 253, 252, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #f5d9db;
}

.product_catnav-row {
  display: flex;
  gap: 26px;
  overflow-x: auto;
}

.product_catnav-link {
  display: inline-block;
  padding: 13px 0 11px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6f6a74;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

.product_catnav-link:hover,
.product_catnav-link:focus-visible {
  color: #117887;
  text-decoration: none;
}

.product_catnav-link.active {
  color: #117887;
  border-bottom-color: #117887;
}

.product_provenance {
  margin: 0;
  font-size: 12.5px;
  font-style: italic;
  color: #b05e67;
}

/* featured tile wrapper: body over zone, zone pinned to the bottom — the
   same column the non-featured card gets from the card itself */
.product_shelf-main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

@media (min-width: 768px) {
  .product_shelf-featured {
    grid-column: span 2;
    flex-direction: row;
  }
  .product_shelf-featured > .product_shelf-link {
    flex: 0 0 44%;
    display: flex;
  }
  .product_shelf-featured .product_shelf-art {
    width: 100%;
    min-height: 250px;
    border-radius: 0 46% 46% 0 / 0 50% 50% 0;
  }
  .product_shelf-featured .product_shelf-art:has(> img[src$=".jpg" i]),
  .product_shelf-featured .product_shelf-art:has(> img[src$=".jpeg" i]),
  .product_shelf-featured .product_shelf-art:has(> img[src$=".webp" i]) {
    height: 100%;
  }
  .product_shelf-featured .product_shelf-desc p {
    -webkit-line-clamp: 3;
  }
}

/* ---- scent families (Aug 2026 soap consolidation) -------------------------
   cross-scent swatch nav on product pages; tinted art wells arrive inline
   from the scent map in components.cljc */

.product_scents {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product_scents-label {
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #6f6a74;
  font-weight: 600;
}

/* Chips, not columns: dot on the left, name on the right, wrapping in a row.
   With the dot anchored to its chip's start, spacing stays regular however
   long a name runs — a name-centred dot drifted as far as its label was wide,
   and stranded on a row of its own on phones. */
.product_scents-row {
  display: flex;
  gap: 8px 16px;
  flex-wrap: wrap;
  align-items: center;
}

.product_scent {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  max-width: 100%;
}

.product_scent-dot {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1.5px #ded5ca;
}

.product_scent.is-current .product_scent-dot {
  box-shadow: 0 0 0 2.5px #117887;
}

/* the safety net: a name the owner hasn't shortened yet gets two lines at
   most and a bounded width, so it can never blow the row apart */
.product_scent-name {
  font-size: 12px;
  line-height: 1.25;
  color: #6f6a74;
  max-width: 11em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product_scent.is-current .product_scent-name {
  color: #117887;
  font-weight: 600;
}

a.product_scent:hover,
a.product_scent:hover .product_scent-name,
a.product_scent:focus-visible .product_scent-name {
  color: #117887;
  text-decoration: none;
}

a.product_scent:focus-visible {
  outline: 2px solid #117887;
  outline-offset: 3px;
  border-radius: 8px;
}

a.product_scents-more {
  align-self: flex-start;
  font-size: 12.5px;
  font-weight: 600;
  color: #117887;
}

a.product_scents-more:hover,
a.product_scents-more:focus-visible {
  color: #0b5f6d;
  text-decoration: none;
}

/* ---- the family grid (home "What We Make" + /products) ----------------------
   One card per family, drawn from the family record + the live catalog:
   ground and photo in a fixed frame, fact line, name, blurb, member dots,
   price, CTA. Two columns up to four families; .famgrid-three (five or
   more) goes three-up, squares the frame, and drops the blurb. Grounds and
   dots arrive inline from the records in components.cljc. */

/* the mission band ("Why Are We Set Apart?") — continues the hero's cream so
   there is no white seam between the hero and the shelf; typeset as a
   statement, not a caption */
.home_mission {
  background: #faf1ee;
  padding: 72px 0 62px;
}

.home_mission .custom_heading {
  text-align: left;
  margin-bottom: 20px;
}

.home_mission .wwm_para {
  text-align: left;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.75;
  margin: 0 0 1em;
  color: #4a443c;
}

.home_mission .wwm_para:last-child {
  margin-bottom: 0;
}

/* /about renders the same blocks over its card grid: centered column,
   readable left-aligned paragraphs */
.service_section .wwm_para {
  max-width: 62ch;
  margin: 0 auto 1em;
  text-align: left;
}

.famgrid_wrap {
  padding-top: 44px;
  padding-bottom: 56px;
}

.famgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.famgrid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* /products: the grid sits under the heading, intro, and provenance line */
.product_section .famgrid {
  margin-top: 32px;
}

.famgrid_card {
  background: #ffffff;
  border: 1px solid #f5d9db;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 26px -18px rgba(11, 95, 109, 0.3);
  display: flex;
  flex-direction: column;
}

.famgrid_frame {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.famgrid-three .famgrid_frame {
  aspect-ratio: 4 / 3;
}

/* white-seamless upload + multiply: the photo melts onto the family's ground
   (house treatment — see the photo/cutout note above .product_shelf-art) */
.famgrid_photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  mix-blend-mode: multiply;
  filter: brightness(1.02);
}

/* no photo yet: the members' tints as swatches */
.famgrid_specimen {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8%;
  padding: 12%;
}

.famgrid_specimen span {
  border-radius: 22%;
}

.famgrid_body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.famgrid_fact {
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #7a7468;
  font-weight: 600;
}

.famgrid_body h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.1;
  margin: 0;
  color: #2e2e2d;
}

.famgrid_body .product_shelf-link:hover h3 {
  color: #117887;
}

.famgrid_blurb .card-text {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(46, 46, 45, 0.75);
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.famgrid-three .famgrid_blurb {
  display: none;
}

.famgrid_meta {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: #6e685c;
}

.famgrid_dots {
  display: inline-flex;
  flex: 0 0 auto;
}

.famgrid_dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
  border: 1.5px solid #ffffff;
  margin-left: -3px;
}

.famgrid_dots i:first-child {
  margin-left: 0;
}

.famgrid_foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 8px;
}

.famgrid_cta {
  background: #2e2e2d;
  color: #faf1ee;
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.famgrid_cta:hover,
.famgrid_cta:focus-visible {
  background: #117887;
  color: #ffffff;
  text-decoration: none;
}

.famgrid_all {
  margin-top: 30px;
}

@media (max-width: 780px) {
  .famgrid,
  .famgrid-three {
    grid-template-columns: 1fr;
  }
  .famgrid-three .famgrid_frame {
    aspect-ratio: 16 / 9;
  }
  .famgrid-three .famgrid_blurb {
    display: block;
  }
}

/* ---- /products: the family grid over the bench ------------------------------
   The grid's rules live with the home shelf (.famgrid, above); here the
   provenance line and the bench. */

.portal_provenance {
  text-align: center;
  margin-top: 2px;
}

.portal_provenance .product_provenance {
  display: inline-block;
}

/* the whole shelf: every live product as a link, grouped by family — the
   catalog page's crawlable index under the family grid */
.shelf_list {
  margin-top: 30px;
  background: #fffdfa;
  border: 1px solid #f5d9db;
  border-radius: 14px;
  padding: 22px 26px 24px;
  box-shadow: 0 10px 26px -18px rgba(11, 95, 109, 0.3);
}

.shelf_list-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 23px;
  font-weight: 600;
  color: #2e2e2d;
  margin: 0 0 4px;
}

.shelf_list-group {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 8px 24px;
  padding: 14px 0 12px;
  align-items: start;
}

.shelf_list-group + .shelf_list-group {
  border-top: 1px solid #f3e7e8;
}

a.shelf_list-fam {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  color: #2e2e2d;
  line-height: 1.3;
}

a.shelf_list-fam:hover,
a.shelf_list-fam:focus-visible {
  color: #117887;
  text-decoration: none;
}

.shelf_list-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 6px 22px;
}

.shelf_list-rows li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 14px;
  min-width: 0;
}

.shelf_list-rows .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  align-self: center;
  flex: 0 0 auto;
}

a.shelf_list-name {
  color: #2e2e2d;
  font-weight: 500;
}

a.shelf_list-name:hover,
a.shelf_list-name:focus-visible {
  color: #117887;
  text-decoration: none;
}

.shelf_list-fact {
  font-size: 12px;
  color: #6e685c;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 680px) {
  .shelf_list {
    padding: 18px 16px 18px;
  }
  .shelf_list-group {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .shelf_list-rows {
    grid-template-columns: 1fr;
  }
  .shelf_list-fact {
    white-space: normal;
  }
}

.portal_bench {
  margin-top: 30px;
  background: #f6ede0;
  border: 1px solid #eadcc6;
  border-radius: 14px;
  padding: 24px 26px 28px;
  /* the home bench door deep-links here */
  scroll-margin-top: 20px;
}

.portal_bench-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 23px;
  font-weight: 600;
  color: #2e2e2d;
  margin: 0;
}

.portal_bench-intro {
  font-size: 13.5px;
  color: #6e685c;
  margin: 4px 0 0;
  max-width: 62ch;
}

.portal_bench .product_shelf-grid {
  margin-top: 20px;
}

/* ---- family pages (/teas, /soaks, /soaps, /home-care): the index -----------
   One design for every family — a card catalog: the members in shelf order
   down the left (under the record's group headings when it has them), the
   open member on the right. Dots, tints, and underline hues arrive inline
   from member-info in components.cljc. */

.family_index {
  display: grid;
  grid-template-columns: minmax(230px, 0.8fr) minmax(0, 1.6fr);
  background: #fffdfa;
  border: 1px solid #f5d9db;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 26px -18px rgba(11, 95, 109, 0.3);
  margin: 34px auto 10px;
  max-width: 920px;
}

.family_index-list {
  background: #f8f2e7;
  border-right: 1px solid #efe3d2;
  padding: 14px 0 18px;
}

.family_index-group {
  padding: 12px 22px 4px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a39377;
  font-weight: 700;
}

.family_index-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px 22px;
  font-family: inherit;
  font-size: 14px;
  color: #4a443c;
  text-decoration: none;
}

.family_index-item:hover,
.family_index-item:focus-visible {
  color: #4a443c;
  text-decoration: none;
}

.family_index-item .no {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 12px;
  color: #b09b78;
  font-variant-numeric: tabular-nums;
}

.family_index-item .nm {
  padding-bottom: 1px;
}

.family_index-item.selected {
  background: #fffdfa;
}

.family_index-item.selected .nm {
  font-weight: 600;
}

.family_index-item:hover .nm {
  color: #117887;
}

.family_index-item:focus-visible {
  outline: 2px solid #117887;
  outline-offset: -2px;
}

.family_index-detail {
  padding: 26px 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.family_index-eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  color: #b05e67;
}

.family_index-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 29px;
  font-weight: 600;
  line-height: 1.1;
  margin: -4px 0 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.family_index-hue {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.family_index-row {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.family_index-photo {
  flex: 0 0 112px;
  height: 122px;
  border-radius: 10px;
  overflow: hidden;
  background: #f8f2e7;
  display: flex;
}

.family_index-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  filter: brightness(1.02);
}

.family_index-desc p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.family_index-item .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  align-self: center;
  flex: 0 0 auto;
}

a.family_index-pair {
  font-size: 12.5px;
  font-weight: 600;
  color: #117887;
  align-self: flex-start;
}

a.family_index-pair:hover,
a.family_index-pair:focus-visible {
  color: #0b5f6d;
  text-decoration: none;
}

.family_index-buy {
  border-top: 1px solid #fee2e3;
  padding-top: 14px;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

a.family_index-details {
  font-size: 13px;
  font-weight: 600;
  color: #117887;
}

a.family_index-details:hover,
a.family_index-details:focus-visible {
  color: #0b5f6d;
  text-decoration: none;
}

.family_index-act {
  display: flex;
  align-items: center;
  gap: 10px;
}

.family_index-act .cart_add-btn {
  flex: 1;
  width: auto;
  border-radius: 999px;
}

/* the index collapses to a numbered blend-scroller on phones — the card
   catalog survives as a strip of tabs */
@media (max-width: 680px) {
  .family_index {
    grid-template-columns: 1fr;
  }
  .family_index-list {
    display: flex;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid #efe3d2;
    padding: 10px 12px;
    gap: 2px;
  }
  .family_index-section {
    display: flex;
  }
  .family_index-group {
    display: none;
  }
  .family_index-item {
    width: auto;
    white-space: nowrap;
    padding: 7px 10px;
  }
}

/* ---- showcase bands (option C): home-page featured products --------------- */

.product_band-stack {
  display: flex;
  flex-direction: column;
  gap: 60px;
  margin: 55px 0 45px;
}

.product_band {
  background: #faf1ee;
  border-radius: 16px;
  padding: 30px 34px;
  display: flex;
  gap: 30px;
  align-items: center;
  flex-wrap: wrap;
}

.product_band-txt {
  flex: 1 1 340px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.product_band-txt h3 {
  margin: 0;
  font-weight: 600;
}

.product_band-txt p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
}

.product_band-zone {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: #ffffff;
  border: 1px solid #f5d9db;
  border-radius: 999px;
  padding: 8px 10px 8px 18px;
  margin-top: 6px;
}

.product_band-zone .product_size-picker {
  margin: 0;
}

.product_band-zone .cart_add-btn {
  width: auto;
  padding: 10px 22px;
  border-radius: 999px;
}

.product_band-zone-out {
  padding-right: 18px;
}

/* the band's description clamps (home bands and the product-page hero) —
   the full text lives in the product page's story section */
.product_band-desc p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.product_band-act {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 4+ sizes (or any phone): the pill capsule becomes a soft rectangle the
   pills can wrap inside — a fully-round radius only suits one-row content */
.product_band-zone-stack {
  border-radius: 16px;
  flex-direction: column;
  align-items: stretch;
  padding: 14px 16px;
}

.product_band-zone-stack .product_band-act {
  justify-content: space-between;
}

@media (max-width: 576px) {
  .product_band-zone {
    border-radius: 16px;
    flex-direction: column;
    align-items: stretch;
    padding: 14px 16px;
  }
  .product_band-act {
    justify-content: space-between;
  }
  .product_band-zone .cart_add-btn {
    flex: 1;
  }
}

.cart_qty-stepper {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1.5px solid #117887;
  border-radius: 20px;
  padding: 2px 4px;
  background: #ffffff;
}

.cart_qty-stepper button {
  border: none;
  background: transparent;
  color: #117887;
  font-size: 16px;
  font-weight: 700;
  width: 26px;
  height: 26px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
}

.cart_qty-stepper button:hover {
  background: #fee2e3;
}

.cart_qty-n {
  min-width: 20px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #2e2e2d;
}

.product_band-art {
  /* deliberately NO filter here: a filtered ancestor becomes an isolated
     compositing group, and photo imgs inside would stop multiply-blending
     into the band's cream. The cutout shadow lives on the img instead. */
  flex: 0 0 260px;
  margin: -60px 0;
  display: flex;
  justify-content: center;
}

.product_band-art img {
  max-width: 240px;
  max-height: 250px;
  object-fit: contain;
}

/* cutouts (png/svg) float with the teal shadow */
.product_band-art img[src$=".png" i],
.product_band-art img[src$=".svg" i] {
  filter: drop-shadow(0 16px 22px rgba(11, 95, 109, 0.25));
}

/* photo in a band: a circular window on the cream, no rectangle shadow */
.product_band-art img[src$=".jpg" i],
.product_band-art img[src$=".jpeg" i],
.product_band-art img[src$=".webp" i] {
  mix-blend-mode: multiply;
  /* whisper of pre-blend white-point lift: the upload pipeline normalizes
     backgrounds to ~255, and 1.02 mops up its vignette residue (~250) plus
     any image that predates or bypasses the pipeline */
  filter: brightness(1.02);
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1;
  object-fit: cover;
  /* feathered circle, not a clipped one: a hard border-radius edge makes the
     blend residue (shadow, grain) stop on a legible arc — the mask fades the
     outer ~20% so photo and shadow dissolve into the band's cream instead.
     (80% solid core: real product photos fill more of the frame than the
     original 70% allowed for — tags and bottle tops were fading out) */
  -webkit-mask-image: radial-gradient(circle closest-side, #000 80%, transparent 100%);
  mask-image: radial-gradient(circle closest-side, #000 80%, transparent 100%);
}


@media (max-width: 576px) {
  .product_band {
    padding: 24px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  /* mobile order: name first (arrival context), image on the first screen,
     buy above the prose. display:contents dissolves the text column so its
     children can interleave with the art sibling purely via `order`. */
  .product_band-txt {
    display: contents;
  }
  .product_band-txt > .product_chip { order: 1; }
  .product_band-txt > h3,
  .product_band-txt > .product_shelf-link { order: 2; }
  .product_band-art { order: 3; align-self: center; margin: 0; }
  .product_band-zone { order: 4; width: 100%; }
  .product_band-desc { order: 5; }
  .product_hero .product_band-zone {
    margin-top: 0;
  }
  .product_band-art img[src$=".png" i],
  .product_band-art img[src$=".svg" i] {
    filter: none;
  }
}

/* ---- product pages (/product/<slug>): hero band + sections ---------------- */

.product_shelf-link {
  color: inherit;
  text-decoration: none;
  display: block;
}

.product_shelf-link:hover h3,
.product_shelf-link:hover {
  color: #117887;
  text-decoration: none;
}

.product_crumb {
  font-size: 13px;
  color: #7d726c;
  margin-bottom: 20px;
}

.product_crumb a {
  color: #117887;
  text-decoration: none;
}

.product_crumb a:hover {
  text-decoration: underline;
}

.product_crumb-sep {
  margin: 0 7px;
  color: #d9cfc9;
}

.product_hero {
  margin-top: 50px;
}

.product_hero .product_band {
  padding: 34px 38px;
}

.product_hero .product_band-txt h3 {
  font-size: 28px;
}

.product_hero .product_band-txt p {
  font-size: 15px;
  max-width: 56ch;
}

.product_hero .product_band-art {
  flex-basis: 300px;
}

.product_hero .product_band-art img {
  max-width: 300px;
  max-height: 300px;
}

/* the attribute selectors above outrank the plain hero override, so hero
   photos need their own cap or they'd stay clamped at the band size */
.product_hero .product_band-art img[src$=".jpg" i],
.product_hero .product_band-art img[src$=".jpeg" i],
.product_hero .product_band-art img[src$=".webp" i] {
  max-width: 300px;
}

/* anchor the buy capsule: same button position on every product page —
   the text column flexes, the zone rides its bottom edge */
.product_hero .product_band-txt {
  min-height: 220px;
}

.product_hero .product_band-zone {
  margin-top: auto;
}

.product_sect-h {
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: #117887;
  font-weight: 700;
  margin: 34px 0 10px;
}

.product_sect-copy p {
  font-size: 14.5px;
  line-height: 1.7;
  max-width: 66ch;
  margin: 0;
}

.product_steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}

.product_step {
  background: #ffffff;
  border: 1px solid #f5d9db;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.product_step-n {
  flex: 0 0 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: #fee2e3;
  color: #b05e67;
  border-radius: 50%;
  font-weight: 700;
  font-size: 13px;
}

.product_step p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
}

/* "What's inside": botanical ingredient chips (ingredients studies option A) */
.product_chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 640px;
}

.product_chip-i {
  background: #faf1ee;
  border: 1px solid #f5d9db;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.product_chip-i::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8ec7d1;
  flex: 0 0 auto;
}

.product_chip-group {
  width: 100%;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b05e67;
  font-weight: 600;
  margin-top: 6px;
}

.product_chip-group:first-child {
  margin-top: 0;
}

/* apothecary manifest (ingredients studies option B) — unused, see
   setapart.ui.components/ingredients-manifest */
.product_manifest {
  background: #faf1ee;
  border-radius: 8px;
  padding: 22px 24px;
  position: relative;
  max-width: 520px;
}

.product_manifest::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1.5px solid #e39ca2;
  border-radius: 5px;
  opacity: 0.5;
  pointer-events: none;
}

.product_manifest-title {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #b05e67;
  font-weight: 700;
  margin: 0 0 4px;
}

.product_manifest-rule {
  width: 44px;
  border: 0;
  border-top: 2px solid #117887;
  margin: 6px auto 12px;
}

.product_manifest p {
  margin: 0 0 8px;
  font-size: 13.5px;
  line-height: 1.7;
  text-align: center;
}

.product_manifest p b {
  color: #b05e67;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.product_care {
  margin-top: 18px;
}

.product_care p {
  font-size: 12.5px;
  line-height: 1.6;
  color: #7d726c;
  max-width: 70ch;
  margin: 0 0 4px;
}

/* companion cards: the quick-add strip on product pages */
.product_companion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
}

.product_companion-card {
  background: #ffffff;
  border: 1px solid #f5d9db;
  border-radius: 10px;
  padding: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 12px 30px -18px rgba(11, 95, 109, 0.4);
}

.product_companion-art {
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #faf1ee;
  border-radius: 8px;
  margin-bottom: 6px;
}

.product_companion-art img {
  max-height: 52px;
  max-width: 90%;
  object-fit: contain;
}

.product_companion-art img[src$=".jpg" i],
.product_companion-art img[src$=".jpeg" i],
.product_companion-art img[src$=".webp" i] {
  mix-blend-mode: multiply;
  /* whisper of pre-blend white-point lift: the upload pipeline normalizes
     backgrounds to ~255, and 1.02 mops up its vignette residue (~250) plus
     any image that predates or bypasses the pipeline */
  filter: brightness(1.02);
  width: 100%;
  height: 100%;
  max-height: none;
  max-width: none;
  object-fit: cover;
  border-radius: 8px;
}

/* a companion sharing its photo file with the page's product shows its
   family mark instead of the same picture again */
.product_companion-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1.5px rgba(46, 46, 45, 0.08);
}

.product_companion-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.product_companion-buy {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.product_companion-buy .cart_add-btn {
  width: 100%;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
}

.product_companion-choose {
  margin-top: auto;
  display: block;
  font-size: 12.5px;
  color: #117887;
  font-weight: 700;
  text-decoration: none;
  padding: 6px 0 2px;
}

.product_companion-choose:hover {
  text-decoration: underline;
}

/* mobile sticky buy bar: docked once the hero scrolls away (js toggles
   .visible); desktop never shows it */
.product_buybar {
  display: none;
}

@media (max-width: 767px) {
  .product_buybar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: #ffffff;
    border-top: 1px solid #f5d9db;
    box-shadow: 0 -10px 24px -18px rgba(11, 95, 109, 0.5);
    padding: 10px 12px;
    gap: 10px;
    align-items: center;
    transform: translateY(110%);
    transition: transform 0.2s ease;
  }
  .product_buybar.visible {
    transform: none;
  }
  .product_buybar .cart_add-btn {
    flex: 1;
    width: auto;
    border-radius: 999px;
  }
  .product_buybar-select {
    font-family: inherit;
    font-size: 13px;
    border: 1.5px solid #117887;
    color: #117887;
    border-radius: 20px;
    padding: 6px 8px;
    background: #ffffff;
    max-width: 40%;
  }
  .product_buybar .cart_qty-stepper {
    flex: 0 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product_buybar {
    transition: none;
  }
}

/* ---- apothecary label cards (card studies option B) -----------------------
   NOT used anywhere yet — styles for setapart.ui.components/product-label-card,
   held for a future gift/seasonal collection page. */

.product_label-card {
  position: relative;
  background: #faf1ee;
  background-image: radial-gradient(circle at 10px 6px, transparent 6px, #faf1ee 6.5px);
  background-size: 20px 100%;
  border-radius: 6px;
  padding: 26px 24px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.product_label-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1.5px solid #e39ca2;
  border-radius: 4px;
  opacity: 0.55;
  pointer-events: none;
}

.product_label-card h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0;
}

.product_label-kind {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b05e67;
  font-weight: 600;
}

.product_label-rule {
  width: 54px;
  border: 0;
  border-top: 2px solid #117887;
  margin: 2px 0;
}

.product_label-desc p {
  font-size: 13.5px;
  line-height: 1.6;
  margin: 0;
}

.product_label-tag {
  position: absolute;
  top: -12px;
  right: 14px;
  transform: rotate(6deg);
  background: #e39ca2;
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  padding: 6px 13px;
  border-radius: 4px 4px 4px 12px;
  box-shadow: 0 6px 14px -6px rgba(176, 94, 103, 0.6);
}

.product_label-tag::after {
  content: "";
  position: absolute;
  left: -5px;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #faf1ee;
}

.product_label-card .cart_add-btn {
  border-radius: 8px;
  margin-top: 2px;
}

.cart_add-btn {
  border: none;
}

/* ---- the gathering basket (cart indicator) --------------------------------
   A woven basket fixed bottom-right; flying tins land BEHIND the front rim
   (z-index sandwich: handle 1 < back 2 < peek 3 < ghost 4… no — the ghost is
   z 35, between back and front at the viewport level), the body squashes to
   catch, the rose tag on the handle swings, sprigs peek over the rim as the
   basket fills. */

.cart_basket {
  position: fixed;
  right: 16px;
  bottom: 12px;
  z-index: 40;
  width: 84px;
  height: 84px;
  display: block;
  animation: basket-enter 0.45s ease-out;
  filter: drop-shadow(0 12px 20px rgba(11, 95, 109, 0.35));
}

.cart_basket:hover {
  text-decoration: none;
}

.cart_basket-body {
  position: absolute;
  inset: 0;
  animation: basket-catch 0.45s ease-out;
  transform-origin: 50% 100%;
}

.cart_basket-handle,
.cart_basket-back,
.cart_basket-peek,
.cart_basket-front {
  position: absolute;
  left: 0;
  bottom: 0;
}

.cart_basket-handle { z-index: 1; }
.cart_basket-back   { z-index: 2; }
.cart_basket-peek   { z-index: 3; }
.cart_basket-front  { z-index: 5; }

.cart_basket-tag {
  position: absolute;
  z-index: 6;
  right: -6px;
  top: 2px;
  background: #faf1ee;
  border: 1.5px solid #e39ca2;
  color: #b05e67;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px 3px 13px;
  border-radius: 3px 8px 8px 3px;
  transform: rotate(8deg);
  transform-origin: 4px 4px;
  box-shadow: 0 8px 16px -10px rgba(176, 94, 103, 0.6);
  animation: basket-tag-swing 0.8s ease-in-out;
  font-variant-numeric: tabular-nums;
}

.cart_basket-tag::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffffff;
  border: 1.2px solid #e39ca2;
}

.cart_peek {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s, transform 0.3s;
}

.cart_peek.show {
  opacity: 1;
  transform: translateY(0);
}

/* the flying tin: viewport-fixed so getBoundingClientRect coords map 1:1;
   z sits between the basket's back (2) and front (5) layers visually by
   arriving at the landing point as the catch begins */
.cart_fly {
  position: fixed;
  z-index: 39;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #faf1ee;
  border: 1.5px solid #e39ca2;
  display: grid;
  place-items: center;
  pointer-events: none;
}

@keyframes basket-enter {
  0% { transform: translateY(90px); opacity: 0; }
  60% { transform: translateY(-8px); opacity: 1; }
  100% { transform: translateY(0); }
}

@keyframes basket-catch {
  0% { transform: scale(1); }
  30% { transform: scale(1.12, 0.85); }
  60% { transform: scale(0.94, 1.08); }
  100% { transform: scale(1); }
}

@keyframes basket-tag-swing {
  0% { transform: rotate(8deg); }
  30% { transform: rotate(24deg); }
  55% { transform: rotate(-2deg); }
  80% { transform: rotate(13deg); }
  100% { transform: rotate(8deg); }
}

/* hover: the about-to-pick-it-up lift — transitions, not keyframes, so
   hovering can never re-trigger or fight the catch animation */
@media (hover: hover) {
  .cart_basket {
    transition: transform 0.2s ease, filter 0.2s ease;
  }
  .cart_basket:hover {
    transform: translateY(-4px);
    filter: drop-shadow(0 18px 28px rgba(11, 95, 109, 0.45));
  }
  .cart_basket-tag {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .cart_basket:hover .cart_basket-tag {
    transform: rotate(17deg);
  }
  .cart_basket:hover .cart_peek.show {
    transform: translateY(-2px);
  }
}

/* stay clear of the product page's sticky buy bar on phones — but only while
   the bar is actually shown (the product page toggles body.buybar-open from
   the same IntersectionObserver that shows the bar) */
@media (max-width: 767px) {
  .cart_basket {
    transition: bottom 0.25s ease;
  }
  body.buybar-open .cart_basket {
    bottom: 74px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cart_basket,
  .cart_basket-body,
  .cart_basket-tag {
    animation: none;
    transition: none;
  }
  .cart_peek {
    transition: none;
  }
  .cart_fly {
    display: none;
  }
}

.cart_section .custom_heading-container h3 {
  text-transform: uppercase;
}

.cart_box {
  max-width: 560px;
  margin: 30px auto 0;
  background: #ffffff;
  border: 1px solid #f5d9db;
  border-radius: 12px;
  box-shadow: 0 18px 45px -20px rgba(11, 95, 109, 0.45);
  padding: 28px 26px;
}

/* ---- checkout: receipt & counter (cart studies option B) ------------------ */

.cart_duo {
  display: grid;
  grid-template-columns: minmax(250px, 330px) 1fr;
  gap: 26px;
  align-items: start;
  max-width: 760px;
  margin: 30px auto 0;
}

@media (max-width: 640px) {
  .cart_duo {
    grid-template-columns: 1fr;
  }
}

.cart_receipt {
  background: #faf1ee;
  border-radius: 8px 8px 4px 4px;
  padding: 20px 20px 24px;
  position: relative;
}

.cart_receipt::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1.5px solid #e39ca2;
  border-radius: 5px;
  opacity: 0.5;
  pointer-events: none;
}

/* the scalloped tear-off bottom edge */
.cart_receipt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 8px;
  background: radial-gradient(circle at 8px -2px, transparent 7px, #faf1ee 7.5px);
  background-size: 16px 8px;
}

.cart_rtitle {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #b05e67;
  font-weight: 700;
  margin: 0 0 2px;
}

.cart_rrule {
  width: 44px;
  border: 0;
  border-top: 2px solid #117887;
  margin: 6px auto 12px;
}

.cart_rline {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  padding: 4px 0;
}

.cart_rqty {
  color: #b05e67;
  font-weight: 600;
  flex: 0 0 auto;
}

.cart_rname {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart_rname em {
  color: #c9767e;
  font-size: 12px;
}

.cart_dots {
  flex: 1;
  border-bottom: 2px dotted #e6b9bd;
  transform: translateY(-3px);
  min-width: 12px;
}

.cart_rprice {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  flex: 0 0 auto;
}

.cart_rstep {
  padding-left: 24px;
  margin: 2px 0 4px;
}

.cart_rtotal {
  display: flex;
  justify-content: space-between;
  font-size: 14.5px;
  font-weight: 700;
  border-top: 1.5px solid #e39ca2;
  margin-top: 10px;
  padding-top: 10px;
}

.cart_rtotal span:last-child {
  color: #117887;
  font-variant-numeric: tabular-nums;
}

.cart_rpickup {
  margin-top: 12px;
  text-align: center;
}

.cart_counter {
  background: #ffffff;
  border: 1px solid #f5d9db;
  border-radius: 12px;
  box-shadow: 0 18px 45px -20px rgba(11, 95, 109, 0.45);
  padding: 22px 22px;
}

.cart_flabel {
  display: block;
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #b05e67;
  font-weight: 600;
  margin: 12px 0 4px;
}

/* under the email field: where the receipt goes, and the mailing-list box */
.cart_fnote {
  margin: -8px 0 8px;
  font-size: 12px;
  color: #6f6a74;
}

.cart_optin {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.45;
  color: #2e2e2d;
  cursor: pointer;
}

.cart_optin input { margin-top: 4px; flex: 0 0 auto; accent-color: #117887; }

.cart_flabel:first-of-type {
  margin-top: 0;
}

.cart_counter input,
.cart_counter textarea {
  width: 100%;
  font-family: inherit;
  font-size: 13.5px;
  border: 1.5px solid #f5d9db;
  border-radius: 8px;
  padding: 9px 11px;
  background: #fffdfc;
}

.cart_counter input:focus,
.cart_counter textarea:focus {
  outline: none;
  border-color: #117887;
}

.cart_counter .cart_pay-btn {
  width: 100%;
  margin-top: 14px;
  border-radius: 8px;
}

.cart_steps {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}

.cart_snum {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fee2e3;
  color: #b05e67;
  font-size: 11.5px;
  font-weight: 700;
  flex: 0 0 auto;
}

.cart_snum.on {
  background: #117887;
  color: #ffffff;
}

.cart_slabel {
  font-size: 12px;
  color: #7d726c;
}

.cart_slabel.on {
  font-weight: 600;
  color: #2e2e2d;
}

.cart_sbar {
  flex: 1;
  height: 2px;
  background: #fee2e3;
}

.cart_success {
  max-width: 460px;
  margin: 30px auto 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cart_success .cart_receipt {
  text-align: left;
}

.cart_success .custom_dark-btn {
  align-self: center;
}

.cart_center {
  text-align: center;
}

.cart_thanks {
  color: #117887;
}

.cart_lines {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

.cart_lines li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #faf1ee;
}

.cart_line-name {
  flex: 1;
  font-weight: 600;
}

.cart_line-soldout .cart_line-name {
  color: #c9767e;
}

.cart_line-qty {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cart_line-qty button {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid #f5d9db;
  background: #ffffff;
  color: #117887;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.cart_line-qty button:hover {
  background: #faf1ee;
}

.cart_line-price {
  font-variant-numeric: tabular-nums;
  min-width: 64px;
  text-align: right;
}

.cart_subtotal {
  text-align: right;
  margin: 6px 0 18px;
}

.cart_form {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.cart_form input,
.cart_form textarea {
  width: 100%;
  border: 1px solid #f5d9db;
  border-radius: 8px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
}

.cart_form input:focus,
.cart_form textarea:focus {
  outline: 2px solid #8ec7d1;
  border-color: #117887;
}

.cart_pay-btn {
  border: none;
  width: 100%;
  text-align: center;
}

.cart_pay-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.cart_payment #payment-element {
  margin-bottom: 16px;
}

.cart_error {
  background: #fee2e3;
  color: #c9767e;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
}

.cart_note {
  text-align: center;
  color: #6f6a74;
}

.cart_lines-plain {
  max-width: 360px;
  margin: 16px auto;
  text-align: left;
}

/* ---- honor stand (/s/<code>): the cabinet, open ---------------------------
   phone-first — someone is standing at the real cabinet with one thumb free.
   The photo of the stand is the header (its basket is the live basket), one
   line of chalkboard talks, the SIGNS are sections and the things under each
   are chips: one tap takes one, the chip wears its count and a − to put one
   back. The Pay bar rides the bottom edge once anything is picked. Chalk
   lettering = Caveat, loaded on these pages only. */

/* the frame: the whole viewport, phone-width on anything wider, the cabinet
   pinned up top and only the shelves scrolling — the document itself never
   moves (html/body overflow is turned off in the page head) */
.stand_app {
  position: relative;
  height: 100vh;
  height: 100dvh;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fdf8f5;
  color: #2e2e2d;
}

.stand_top { flex: 0 0 auto; }

.stand_scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 12px 110px;   /* room under the last row for the fixed Pay bar */
}

/* a phone on its side: the photo would eat the screen — the chalk line and
   the shelves carry on without it (the flight falls back to a corner) */
@media (max-height: 520px) {
  .stand_hero { display: none; }
}

.stand_note {
  margin: 28px auto 0;
  max-width: 440px;
  text-align: center;
  background: #ffffff;
  border: 1px solid #f5d9db;
  border-radius: 12px;
  padding: 24px 22px;
  box-shadow: 0 18px 45px -20px rgba(11, 95, 109, 0.45);
}

.stand_note h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
  color: #117887;
  margin: 0 0 8px;
}

.stand_note p { margin: 0; }
.stand_note .custom_dark-btn { display: inline-block; margin-top: 14px; }

.stand_note-line {
  text-align: center;
  color: #6f6a74;
  font-size: 14px;
  margin: 14px 0 0;
}

.stand_thanks {
  font-family: 'Fraunces', Georgia, serif;
  color: #117887;
  text-align: center;
  margin: 22px 0 0;
}

.stand_payphase {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 460px;
  margin: 0 auto;
}

.stand_payphase .cart_receipt { margin-top: 4px; }

.stand_chalk {
  font-family: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  color: #f4efe4;
}

/* the hero — a short window over the photo, so the shelves get the screen.
   The frame inside keeps the photo's own 820 × 510 proportions (the basket,
   the packets and the tag are placed at % of it, and hold at every width);
   the window shows its upper 57%, from just under the cabinet's top edge —
   the door's headline, the paper signs, and the hanging basket. On a 390px
   phone that is ~138px, with the chalk line under it ~180px in all. */
.stand_hero {
  position: relative;
  aspect-ratio: 820 / 290;
  overflow: hidden;
  background: #1e2b2d;
}

.stand_hero-frame {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  aspect-ratio: 820 / 510;
  transform: translateY(-5.9%);   /* 30px of the 510: skip the cabinet's top edge */
}

.stand_hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* the basket's front wall, cut from a second copy of the photo and laid over
   the landed packets — so they sit IN the basket, behind its rim */
.stand_hero-front {
  z-index: 2;
  clip-path: polygon(67.1% 29%, 69% 27.8%, 72.5% 27.3%, 76% 27.8%, 77.9% 29%, 77.5% 33.5%, 76.9% 38.2%, 68.1% 38.2%, 67.5% 33.5%);
}

.stand_nest { position: absolute; inset: 0; z-index: 1; }

.stand_packet {
  position: absolute;
  width: 4.6%;
  aspect-ratio: 14 / 18;
  border-radius: 6% / 5%;
  background: linear-gradient(180deg, #d9b884, #c8a570);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.stand_packet::after {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  top: 22%;
  height: 26%;
  background: #faf1ee;
  opacity: 0.9;
}

/* where the flight lands: the basket's opening */
.stand_basket-target {
  position: absolute;
  left: 70%;
  top: 22%;
  width: 5%;
  height: 6%;
  pointer-events: none;
}

.stand_hero-shade {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(180deg, rgba(20, 30, 32, 0.05) 0%, rgba(20, 30, 32, 0) 40%, rgba(20, 30, 32, 0.6) 100%);
  pointer-events: none;
}

.stand_hero-line {
  position: absolute;
  z-index: 3;
  left: 4.5%;
  right: 4.5%;
  bottom: 7%;
  display: flex;
  flex-direction: column;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.stand_hero-title {
  font-size: clamp(18px, 5.4vw, 26px);
  font-weight: 700;
  line-height: 1;
}

.stand_hero-sub {
  font-size: clamp(13px, 3.9vw, 18px);
  margin-top: 2px;
  opacity: 0.92;
}

.stand_bob { display: inline-block; animation: stand-bob 1.6s ease-in-out infinite; }
@keyframes stand-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* the swing tag, tied to the handle's right leg */
.stand_tag {
  position: absolute;
  z-index: 4;
  left: 78.5%;
  top: 21.5%;
  transform-origin: 50% -9px;
  transform: rotate(10deg);
  background: #faf1ee;
  color: #b05e67;
  border: 1.5px solid #e39ca2;
  border-radius: 4px;
  padding: 1px 7px;
  font-size: clamp(10px, 3vw, 14px);
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.stand_tag::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -9px;
  width: 1.5px;
  height: 9px;
  background: #e39ca2;
}

.stand_tag.show { opacity: 1; animation: stand-swing 0.6s ease-out; }
@keyframes stand-swing {
  0% { transform: rotate(10deg); }
  30% { transform: rotate(-16deg); }
  60% { transform: rotate(18deg); }
  80% { transform: rotate(4deg); }
  100% { transform: rotate(10deg); }
}

/* one line of chalkboard */
.stand_board {
  background: #1e2b2d;
  border-bottom: 5px solid #1f6f79;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  overflow: hidden;
}

.stand_say {
  font-size: clamp(17px, 5vw, 24px);
  white-space: nowrap;
  display: inline-block;
}

.stand_say.write { animation: stand-chalkwrite 0.8s steps(24, end) both; }
.stand_say.erase { animation: stand-chalkerase 0.28s ease-in both; }
@keyframes stand-chalkwrite { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes stand-chalkerase { to { opacity: 0; filter: blur(1.5px); transform: translateX(6px); } }

/* the signs as sections, the things under them as chips */
.stand_secs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.stand_sec {
  background: #ffffff;
  border: 1.5px solid #f5d9db;
  border-radius: 12px;
  box-shadow: 0 10px 26px -18px rgba(11, 95, 109, 0.3);
  padding: 10px 12px 12px;
}

/* the sign: chalk on slate — the admin's sign text is what's written on the
   real doors, so it wears the cabinet's own hand (Caveat, loaded on these
   pages only) */
.stand_sec-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  background: #2b3332;
  border-radius: 7px;
  padding: 6px 12px 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 2px 0 #1d2423;
}

.stand_sec-name {
  flex: 1;
  min-width: 0;
  font-family: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.05;
  color: #f4efe4;
}

.stand_sec-price {
  flex: 0 0 auto;
  font-family: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  font-size: 21px;
  font-weight: 700;
  color: #f4efe4;
  opacity: 0.9;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stand_chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* a chip is one pill holding one or two buttons: the − (once picked) and the
   take; tapping the take takes one more */
.stand_chip {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid #e39ca2;
  background: #ffffff;
  color: #2e2e2d;
  border-radius: 999px;
  overflow: hidden;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.stand_chip.on {
  background: #117887;
  border-color: #117887;
  color: #ffffff;
}

.stand_chip-take,
.stand_chip-less {
  appearance: none;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.stand_chip-take {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 600;
  min-height: 40px;
}

.stand_chip.on .stand_chip-take { padding-left: 6px; }

.stand_chip-take:active { transform: scale(0.97); }
.stand_chip-take:focus-visible, .stand_chip-less:focus-visible { outline: 2px solid #b05e67; outline-offset: -3px; }

.stand_chip-price { color: #117887; font-weight: 600; }
/* the member's dot — the same mark the website gives this scent or blend */
.stand_chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.stand_chip.on .stand_chip-dot { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85); }
.stand_chip.on .stand_chip-price { color: #d9f1f3; }

.stand_chip-n {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 0 7px;
  font-variant-numeric: tabular-nums;
}

.stand_chip-less {
  width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  border-right: 1px solid rgba(255, 255, 255, 0.35);
}

.stand_chip-less:hover { background: rgba(255, 255, 255, 0.14); }

.stand_error {
  max-width: 560px;
  margin: 16px auto 0;
  text-align: center;
}

/* the Pay bar: fixed to the bottom, slid off-screen until something is picked */
.stand_bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 600px;
  margin: 0 auto;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: #ffffff;
  border-top: 1px solid #f5d9db;
  box-shadow: 0 -12px 30px -18px rgba(11, 95, 109, 0.45);
  transform: translateY(110%);
  transition: transform 0.22s ease;
  pointer-events: none;
}

@media (min-width: 600px) {
  .stand_bar {
    border: 1px solid #f5d9db;
    border-bottom: none;
    border-radius: 14px 14px 0 0;
  }
}

.stand_bar.show { transform: none; pointer-events: auto; }

.stand_bar-sum { flex: 0 0 auto; font-size: 13px; color: #6f6a74; white-space: nowrap; }

.stand_pay { flex: 1; width: auto; margin: 0; }

/* payment phase: the way back to the signs, under the Payment Element */
/* the done page's ask: a receipt, and maybe the list — quiet, optional */
.stand_ask {
  background: #ffffff;
  border: 1px solid #f5d9db;
  border-radius: 12px;
  padding: 14px 14px 12px;
}

.stand_ask-label {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  color: #117887;
  font-size: 17px;
  margin: 0 0 8px;
}

.stand_ask-row { display: flex; gap: 8px; }

.stand_ask-row input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid #e5d9d9;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 15px;
  background: #fdf8f5;
}

.stand_ask-row input:focus { outline: 2px solid #117887; outline-offset: 1px; border-color: #117887; }

.stand_ask-btn { padding: 10px 18px; flex: 0 0 auto; }
.stand_ask-btn:disabled { opacity: 0.55; cursor: default; }

.stand_ask-join {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 10px 2px 0;
  font-size: 13px;
  line-height: 1.4;
  color: #2e2e2d;
  cursor: pointer;
}

.stand_ask-join input { margin-top: 2px; accent-color: #117887; }

.stand_ask-done { margin: 0; text-align: center; color: #117887; font-weight: 600; }

.stand_back {
  display: block;
  margin: 14px auto 0;
  border: none;
  background: transparent;
  color: #117887;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 8px;
}

.stand_back:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .stand_bob, .stand_tag.show, .stand_say.write, .stand_say.erase { animation: none; }
  .stand_bar, .stand_chip { transition: none; }
}

/* end shop */