/* ==========================================================================
   Shop (shop.html) + Product detail (product.html).
   Page-scoped variants only; shared components stay as styles.css draws them.
   ========================================================================== */

/* ======================================================= SHOP ============ */

/* ---------- 1. Page head ---------- */
.shop-head { padding-block: clamp(28px, 2vw + 16px, 56px) clamp(20px, 2vw, 32px); }
.shop-head__grid { display: grid; gap: var(--s-5); align-items: end; }
.shop-head__text { display: grid; gap: var(--s-3); justify-items: start; }
.shop-head__text .crumbs { margin-bottom: var(--s-2); }
.shop-head__text .lede { max-width: 52ch; }
.shop-head__assure { gap: 6px; color: var(--c-ink); }
@media (min-width: 900px) {
  .shop-head__grid { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-8); }
  ul.shop-head__assure { padding: 2px 0 6px var(--s-5); border-left: 1px solid var(--c-line); }
}
@media (max-width: 899px) {
  .shop-head__assure { display: flex; flex-wrap: wrap; gap: 6px var(--s-5); font-size: var(--fs-fine); color: var(--c-ink-soft); }
}

/* ---------- 2. Toolbar ---------- */
.shop-sentinel { height: 1px; margin-bottom: -1px; }
.shop-toolbar {
  position: relative;
  z-index: var(--z-sticky);
  background: var(--c-paper);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
@media (min-width: 961px) {
  .shop-toolbar {
    position: sticky; top: var(--header-h);
    background: rgba(255, 250, 246, 0.95);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    backdrop-filter: saturate(1.4) blur(10px);
    transition: box-shadow var(--dur-2);
  }
  .shop-toolbar.is-stuck { box-shadow: var(--sh-1); }
}
.shop-toolbar__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  padding-block: 12px;
}
.shop-toolbar__chips { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.shop-toolbar__sep { width: 1px; height: 24px; margin-inline: 4px; background: var(--c-line); flex: none; }
.shop-toolbar .chip { flex: none; }
.chip--link { background: transparent; border-style: dashed; border-color: var(--c-field-line); }
.chip--link:hover { border-style: solid; border-color: var(--c-ink); }
.chip--link .icon { transition: transform var(--dur-2) var(--ease-spring); }
.chip--link:hover .icon { transform: translateX(3px); }

.shop-toolbar__tools { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.shop-search { position: relative; display: flex; align-items: center; }
.shop-search > .icon { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--c-ink-soft); pointer-events: none; }
.shop-search__input { min-height: 40px; width: 196px; padding: 0.45em 1em 0.45em 2.5em; border-radius: var(--r-pill); }
.shop-search__input::-webkit-search-cancel-button { cursor: pointer; }
.shop-sort { min-height: 40px; width: auto; padding-block: 0.45em; border-radius: var(--r-pill); font-weight: 600; font-size: var(--fs-small); }
.shop-seasonal { font-size: var(--fs-small); font-weight: 600; align-items: center; white-space: nowrap; }
.shop-seasonal input { margin-top: 0; }

@media (max-width: 960px) {
  .shop-toolbar__inner { padding-block: 14px; }
  .shop-toolbar__chips {
    width: calc(100% + var(--gutter) * 2);
    margin-inline: calc(var(--gutter) * -1);
    padding: 2px var(--gutter) 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: var(--gutter);
  }
  .shop-toolbar__chips::-webkit-scrollbar { display: none; }
  .shop-toolbar__tools { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; }
  .shop-search__input { width: 100%; }
}
@media (max-width: 560px) {
  .shop-toolbar__tools { grid-template-columns: minmax(0, 1fr) auto; }
  .shop-search { grid-column: 1 / -1; }
  .shop-sort { width: 100%; }
}

/* ---------- 3. Results + grid ---------- */
.shop-results { padding-top: clamp(20px, 1vw + 14px, 32px); }
.shop-results__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); min-height: 40px; margin-bottom: var(--s-5); }
.shop-count { font-size: var(--fs-small); font-weight: 600; color: var(--c-ink-soft); }
.shop-results__extra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.shop-results__extra .link { font-size: var(--fs-small); }
.shop-grid { row-gap: clamp(32px, 3vw, 48px); }
@media (min-width: 1101px) {
  /* Nine pieces sit as a calm three-by-three; slightly squarer plates keep the rows from towering. */
  .shop-grid .pcard__media { aspect-ratio: 1 / 1.08; }
}
/* Price + Add line up along each row even when a name runs to two lines. */
body:is([data-page="shop"], [data-page="product"]) .pcard__body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
body:is([data-page="shop"], [data-page="product"]) .pcard__row { margin-top: auto; padding-top: var(--s-2); }
.shop-grid .pcard { animation: card-in var(--dur-3) var(--ease-out) both; }
.shop-grid .pcard:nth-child(2) { animation-delay: 40ms; }
.shop-grid .pcard:nth-child(3) { animation-delay: 80ms; }
.shop-grid .pcard:nth-child(4) { animation-delay: 120ms; }
.shop-grid .pcard:nth-child(5) { animation-delay: 160ms; }
.shop-grid .pcard:nth-child(6) { animation-delay: 200ms; }
@keyframes card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- 4. Sets row (inside the grid, full width) ---------- */
.shop-sets {
  grid-column: 1 / -1;
  min-width: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5);
  padding-block: clamp(28px, 3vw, 44px);
  margin-block: clamp(4px, 1vw, 12px);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.shop-sets__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-2) var(--s-6); }
.shop-sets__title { margin-top: 6px; }
.shop-sets__note { max-width: 40ch; }
.shop-sets__grid { display: grid; gap: var(--s-4); }
@media (min-width: 900px) { .shop-sets__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); } }
@media (max-width: 899px) {
  /* Phones/tablets: the sets slide sideways instead of stacking three tall cards. */
  .shop-sets__grid {
    grid-auto-flow: column; grid-auto-columns: min(82%, 340px);
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px;
    scroll-padding-inline: var(--gutter);
  }
  .shop-sets__grid::-webkit-scrollbar { display: none; }
  .set-card { scroll-snap-align: start; }
}

.set-card {
  position: relative; /* keeps the button's .sr-only text inside the sideways scroller on phones */
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-paper);
  transition: border-color var(--dur-2), transform var(--dur-2) var(--ease-out);
}
.set-card:hover { border-color: var(--c-field-line); }
.set-card__thumbs { display: flex; margin-bottom: var(--s-2); }
.set-card__thumb { width: 52px; flex: none; border-radius: 50%; box-shadow: 0 0 0 3px var(--c-paper); transition: transform var(--dur-2) var(--ease-spring); }
.set-card__thumb + .set-card__thumb { margin-left: -12px; }
.set-card__thumb .plate { border-radius: 50%; }
.set-card__thumb .plate--art > img { padding: 12%; }
.set-card:hover .set-card__thumb:nth-child(odd) { transform: translateY(-3px); }
.set-card:hover .set-card__thumb:nth-child(even) { transform: translateY(2px); }
.set-card__name { font-size: var(--fs-3); }
.set-card__blurb { font-size: var(--fs-small); color: var(--c-ink-soft); }
.set-card__items { font-size: var(--fs-fine); font-weight: 700; color: var(--c-ink); letter-spacing: 0.01em; }
.set-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: auto; padding-top: var(--s-4); }
.set-card__price { display: grid; line-height: 1.15; }
.set-card__price .price__now { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; }

/* ---------- 5. Beyond the counter ---------- */
.beyond__grid { display: grid; gap: clamp(16px, 2vw, 28px); }
@media (min-width: 860px) { .beyond__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.beyond-tile {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  min-height: 260px;
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  isolation: isolate;
  transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.beyond-tile:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.beyond-tile__media { position: relative; display: block; overflow: hidden; }
.beyond-tile__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease-out); }
.beyond-tile:hover .beyond-tile__media img { transform: scale(1.04); }
.beyond-tile__media--art img { object-fit: contain; padding: 14% 10%; }
.beyond-tile__body { display: flex; flex-direction: column; justify-content: center; gap: var(--s-2); padding: clamp(24px, 3vw, 36px); }
.beyond-tile__title { font-family: var(--font-display); font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.9rem); line-height: 1.12; text-wrap: balance; }
.beyond-tile__text { font-size: var(--fs-small); line-height: 1.5; }
.beyond-tile__cta { display: inline-flex; align-items: center; gap: 0.4em; margin-top: var(--s-3); font-weight: 700; font-size: var(--fs-small); }
.beyond-tile__cta .icon { transition: transform var(--dur-2) var(--ease-spring); }
.beyond-tile:hover .beyond-tile__cta .icon { transform: translateX(4px); }
.beyond-tile--party { background: var(--c-shopfront); color: var(--c-paper); }
.beyond-tile--party .eyebrow, .beyond-tile--party .beyond-tile__cta { color: var(--c-on-dark-accent); }
.beyond-tile--party .beyond-tile__text { color: var(--c-on-dark-soft); }
.beyond-tile--party:focus-visible { outline-color: var(--c-raspberry); }
.beyond-tile--club { background: var(--c-butter); color: var(--c-ink); }
.beyond-tile--club .beyond-tile__media { background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(255, 255, 255, 0.75), transparent 72%); }
.beyond-tile--club .beyond-tile__text { color: var(--c-ink-soft); }
.beyond-tile--club .beyond-tile__cta { color: var(--c-raspberry); }
@media (max-width: 520px) {
  .beyond-tile { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .beyond-tile__media { aspect-ratio: 16 / 8; }
  .beyond-tile__media--art { aspect-ratio: 16 / 6; }
}

/* ---------- Saved view + small shared-row touches ---------- */
body.is-saved-view .shop-results { border-top: 1px solid var(--c-line); }
[data-recent-clear] { margin-right: -0.5em; }

/* ===================================================== PRODUCT =========== */

/* ---------- 1. Layout ---------- */
.pdp { padding-block: clamp(20px, 1vw + 14px, 36px) clamp(56px, 4vw + 32px, 96px); }
.pdp__crumbs { margin-bottom: clamp(16px, 2vw, 28px); }
.pdp__grid { align-items: start; }
@media (min-width: 900px) { .pdp__grid { column-gap: clamp(40px, 5vw, 88px); } }

/* ---------- 2. Gallery ---------- */
.gallery { position: relative; display: grid; gap: var(--s-3); min-width: 0; }
.gallery__track {
  display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  border-radius: var(--r-md);
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track:focus-visible { outline-offset: 4px; border-radius: var(--r-md); }
.gallery__slide { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; border-radius: 0; }
@media (min-width: 900px) { .gallery__slide { aspect-ratio: 1 / 1.02; } }
.gallery__count {
  position: absolute; left: 14px; top: 14px; z-index: 2;
  padding: 3px 10px; border-radius: var(--r-pill);
  background: rgba(255, 250, 246, 0.92); color: var(--c-ink);
  font-size: var(--fs-fine); font-weight: 700; font-variant-numeric: tabular-nums;
  pointer-events: none;
}
@media (min-width: 701px) { .gallery__count { display: none; } }
.gallery__thumbs { display: flex; gap: var(--s-3); }
.gallery__thumb { width: clamp(64px, 8vw, 88px); flex: none; border-radius: var(--r-sm); transition: box-shadow var(--dur-1), opacity var(--dur-1); opacity: 0.72; }
.gallery__thumb:hover { opacity: 1; }
.gallery__thumb[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--c-paper), 0 0 0 3.5px var(--c-ink); }
.gallery__thumb:focus-visible { outline-offset: 5px; }
.gallery__thumb.plate--art > img { padding: 12%; }

/* ---------- 3. Buy box ---------- */
.buybox { display: grid; gap: var(--s-5); align-content: start; min-width: 0; }
@media (min-width: 900px) { .buybox { position: sticky; top: calc(var(--header-h) + 24px); } }
.buybox__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.buybox__title { font-size: clamp(2.1rem, 1.55rem + 1.7vw, 3.1rem); line-height: 1.05; margin-top: calc(var(--s-2) * -1); }
.buybox__tag { padding: 34px 0 0 6px; margin-top: calc(var(--s-4) * -1); }
.buybox__tag .tag { --tag-string: 62px; }
.buybox__lede { font-size: var(--fs-lede); max-width: 44ch; }
.buybox__swatches { padding-top: var(--s-1); }
.buybox__buy { display: flex; align-items: center; gap: var(--s-2); }
.buybox__buy .qty { height: 56px; flex: none; }
.buybox__add { flex: 1; min-width: 0; padding-inline: 1.1em; }
.buybox__add-total { font-weight: 700; opacity: 0.9; white-space: nowrap; }
.buybox__wish { width: 56px; min-height: 56px; flex: none; }
.buybox ul.buybox__assure { padding-top: var(--s-5); border-top: 1px solid var(--c-line); gap: 10px; }
.buybox__assure strong { font-weight: 700; }
.buybox__faq { margin-top: var(--s-2); }
.buybox__faq .faq__q { font-size: 1rem; padding-block: var(--s-4); }
.buybox__faq .faq__a { font-size: var(--fs-small); }
@media (max-width: 480px) {
  .buybox__buy .qty { height: 52px; }
  .buybox__buy .qty__btn { width: 34px; }
  .buybox__buy .qty__input { width: 2.2em; }
  .buybox__add { min-height: 52px; padding-inline: 0.9em; font-size: 1rem; }
  .buybox__add > .icon, .buybox__add-total { display: none; }
  .buybox__wish { width: 52px; min-height: 52px; }
}
@media (max-width: 700px) {
  .pdp__crumbs li[aria-current] { display: none; }
}

/* ---------- 4. Pairs well with ---------- */
.fbt__body { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 980px) { .fbt__body { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-8); } }
.fbt__items { --fbt-size: clamp(150px, 16vw, 228px); list-style: none; padding: 0; margin: 0; display: flex; align-items: flex-start; gap: var(--s-4); }
.fbt__item { width: var(--fbt-size); display: grid; gap: var(--s-3); align-content: start; }
.fbt__media { border-radius: var(--r-md); transition: opacity var(--dur-2), filter var(--dur-2); }
.fbt__media:hover > img { transform: scale(1.035); }
.fbt__item.is-off .fbt__media { opacity: 0.4; filter: grayscale(0.5); }
.fbt__check { font-size: var(--fs-small); line-height: 1.35; }
.fbt__name { display: block; font-weight: 700; }
.fbt__this { color: var(--c-ink-soft); font-weight: 600; }
.fbt__price { display: block; margin-top: 2px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fbt__link { justify-self: start; margin-left: 32px; font-size: var(--fs-fine); font-weight: 700; color: var(--c-raspberry); text-underline-offset: 0.2em; }
.fbt__plus {
  flex: none; width: 34px; height: 34px; margin-top: calc(var(--fbt-size) / 2 - 17px);
  display: grid; place-items: center; border-radius: 50%;
  background: var(--c-blush); color: var(--c-ink);
}
.fbt__plus .icon { width: 16px; height: 16px; stroke-width: 2.2; }
.fbt__summary { display: grid; gap: var(--s-2); padding: var(--s-5); border: 1px solid var(--c-line); border-radius: var(--r-md); }
.fbt__label { font-size: var(--fs-small); font-weight: 700; color: var(--c-ink-soft); }
.fbt__total { font-family: var(--font-display); font-size: 2.25rem; line-height: 1.05; font-variant-numeric: tabular-nums; margin-bottom: var(--s-2); }
.fbt__summary .fine { margin-top: var(--s-1); }
@media (max-width: 700px) {
  .fbt__items { flex-direction: column; align-items: stretch; gap: 0; }
  .fbt__item { width: auto; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: var(--s-4); }
  .fbt__link { margin-left: 0; }
  .fbt__plus { width: 26px; height: 26px; margin: 6px 0 6px 25px; }
}

/* ---------- 5. More from the counter ---------- */
.more { padding-bottom: clamp(56px, 4vw + 32px, 96px); }

/* ---------- 6. Not found ---------- */
.pdp-missing { padding-top: clamp(20px, 1vw + 14px, 36px); }
.pdp-missing__grid { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 860px) { .pdp-missing__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); } }
.pdp-missing__head { display: grid; gap: var(--s-4); justify-items: start; max-width: 620px; }
.pdp-missing__head .cluster { margin-top: var(--s-2); }
.pdp-missing__art {
  position: relative; aspect-ratio: 5 / 4; max-width: 460px; width: 100%; justify-self: center;
  border-radius: var(--r-lg); background: radial-gradient(ellipse 80% 70% at 50% 30%, #FFF3F0, var(--c-blush) 70%);
  overflow: hidden;
}
/* it has drifted off to one side, leaving the ring it was tied to empty */
.pdp-missing__balloon { position: absolute; left: 68%; top: 8%; width: 84px; height: 118px; margin-left: -42px; --float-tilt: -6deg; }
/* the counter it was tied to: a teal ledge with an empty ring */
.pdp-missing__art::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18%; background: var(--c-shopfront); }
.pdp-missing__knot {
  position: absolute; left: 34%; bottom: calc(18% - 2px); width: 18px; height: 26px; margin-left: -9px;
  border: 2px dashed var(--c-ink-soft); border-bottom: 0; border-radius: 10px 10px 0 0; opacity: 0.55;
}
@media (max-width: 859px) { .pdp-missing__art { max-width: 320px; aspect-ratio: 4 / 3; justify-self: start; } }
.pdp-missing__sub { margin: clamp(48px, 6vw, 88px) 0 var(--s-5); padding-top: var(--s-6); border-top: 1px solid var(--c-line); }

/* ---------- 7. Sticky bar (mobile) ---------- */
.pdp-sticky__thumb { width: 48px; flex: none; border-radius: var(--r-sm); }
.pdp-sticky .btn { flex: none; padding-inline: 1.6em; }
@media (max-width: 900px) {
  body.has-sticky-bar { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  body.has-sticky-bar .toast-region { bottom: calc(84px + env(safe-area-inset-bottom)); }
}