/* /shop/ — page styles.

   The shared sheet (/assets/wp/wp.css) supplies the stage, the utility
   strip, the footer and every --wp-* token. Only what is specific to the shop
   lives here, built from those tokens so a palette change reaches it too. */

.wrap {
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 4vw, 2.5rem) 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vw, 2rem);
}

.head { display: flex; flex-direction: column; gap: 0.6rem; }

.eyebrow {
  margin: 0;
  font-family: var(--wp-mono);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--wp-brass);
}

.title {
  margin: 0;
  font-family: var(--wp-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(2rem, 6vw, 3.6rem);
  line-height: 0.92;
  color: var(--wp-bone);
  text-shadow: 0 0 60px rgba(201, 162, 75, 0.18);
}

.lede { margin: 0; max-width: 52ch; font-family: var(--wp-body); line-height: 1.6; color: var(--wp-bone-dim); }

/* ---- category strip --------------------------------------------------- */
.shop__cats { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; margin: 0; padding: 0; list-style: none; }

.shop__cats a {
  font-family: var(--wp-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp-bone-dim);
  text-decoration: none;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid transparent;
}

.shop__cats a:hover, .shop__cats a.is-on { color: var(--wp-brass); border-bottom-color: var(--wp-brass); }
.shop__cats span { color: var(--wp-bone-faint); }

/* ---- product grid ----------------------------------------------------- */
.shop__grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  /* auto-fill, not auto-fit: with one product, auto-fit stretches the single
     card across the whole row. Same reason the collaborator grid uses it. */
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
  gap: clamp(0.9rem, 2vw, 1.5rem);
}

.shop__card { margin: 0; display: flex; flex-direction: column; }
.shop__link { display: block; color: inherit; text-decoration: none; }
.shop__link:focus-visible { outline: 2px solid var(--wp-brass); outline-offset: 4px; }

.shop__frame {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(6, 7, 5, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--wp-rule);
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.shop__link:hover .shop__frame { border-color: var(--wp-brass-dim); transform: translateY(-3px); }
.shop__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop__frame.is-empty { border-style: dashed; background: rgba(6, 7, 5, 0.5); }

.shop__pending, .shop__flag {
  font-family: var(--wp-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp-bone-faint);
}

.shop__flag {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.3rem 0.55rem;
  color: var(--wp-bone);
  background: rgba(6, 7, 5, 0.82);
  border-top: 1px solid var(--wp-rule);
  border-right: 1px solid var(--wp-rule);
}

.shop__name { margin: 0.7rem 0 0; font-family: var(--wp-display); font-size: 1.05rem; color: var(--wp-bone); }
.shop__blurb { margin: 0.2rem 0 0; font-family: var(--wp-body); font-size: 0.82rem; line-height: 1.5; color: var(--wp-bone-dim); }
.shop__price { margin: 0.35rem 0 0; font-family: var(--wp-mono); font-size: 0.78rem; letter-spacing: 0.08em; color: var(--wp-brass); }
.shop__by { margin: 0.15rem 0 0; font-family: var(--wp-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp-bone-faint); }
.is-soldout .shop__frame img { filter: grayscale(0.7); opacity: 0.72; }
.is-soldout .shop__price { color: var(--wp-bone-faint); text-decoration: line-through; }

.shop__empty { color: var(--wp-bone-dim); font-family: var(--wp-body); }

/* ---- product page ----------------------------------------------------- */
.prod { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.2rem, 4vw, 3rem); align-items: start; }
@media (max-width: 54rem) { .prod { grid-template-columns: 1fr; } }

.prod__media { display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; }

/* ---- the gallery: a shadow box ------------------------------------------
   The frame is fixed (4:5, a touch taller than square, which suits both
   stickers and statues). Every slide is shown WHOLE inside it - contain, not
   cover - over a blurred, darkened copy of the same image, so there is never a
   crop and never a dead grey bar. Inset shadow gives the box its depth. */
.prod__box {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: min(78vh, 46rem);
  overflow: hidden;
  background: rgba(6, 7, 5, 0.85);
  border: 1px solid var(--wp-rule);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), inset 0 18px 40px rgba(0,0,0,.55), 0 24px 60px rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
}
.prod__track {
  position: absolute; inset: 0;
  margin: 0; padding: 0; list-style: none;
  display: flex;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.prod__track::-webkit-scrollbar { display: none; }
.prod__track:focus-visible { outline: 2px solid var(--wp-brass); outline-offset: -2px; }
.prod__slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: center;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
/* the blurred backdrop: the slide's own image, scaled up past the blur edge */
.prod__slide::before {
  content: "";
  position: absolute; inset: -8%;
  background: var(--bg, none) center / cover no-repeat;
  filter: blur(28px) saturate(1.1) brightness(.45);
  transform: scale(1.1);
}
.prod__slide > * { position: relative; }
.prod__zoom {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  padding: clamp(.6rem, 2.5vw, 1.4rem);
  background: none; border: 0; cursor: zoom-in;
}
.prod__zoom img, .prod__slide video {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
  box-shadow: 0 14px 40px rgba(0,0,0,.6);
}
.prod__slide video { width: 100%; height: 100%; box-shadow: none; }

.prod__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2;
  width: 2.6rem; height: 2.6rem;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.18); border-radius: 50%;
  background: rgba(8,8,7,.55);
  backdrop-filter: blur(6px);
  color: var(--wp-bone); font-size: 1.7rem; line-height: 1;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.prod__nav:hover, .prod__nav:focus-visible { background: rgba(8,8,7,.8); border-color: var(--wp-brass); }
.prod__nav--prev { left: .6rem; }
.prod__nav--next { right: .6rem; }
.prod__nav[hidden] { display: none; }
.prod__count {
  position: absolute; right: .7rem; bottom: .6rem; z-index: 2; margin: 0;
  padding: .2rem .5rem;
  font-family: var(--wp-mono); font-size: .68rem; letter-spacing: .12em;
  color: var(--wp-bone); background: rgba(8,8,7,.6);
}
.prod__count[hidden] { display: none; }
@media (hover: none) { .prod__box .prod__nav { opacity: .85; } }

/* thumbnails: one scrolling row, whole images (contain) so they read true */
.prod__thumbs {
  display: flex; gap: .5rem; margin: 0; padding: 0 0 .2rem; list-style: none;
  overflow-x: auto; scrollbar-width: thin;
}
.prod__thumbs button {
  flex: 0 0 auto;
  width: 4.25rem; height: 4.25rem; padding: 2px;
  background: rgba(6,7,5,.8); border: 1px solid var(--wp-rule); cursor: pointer;
  opacity: .6; transition: opacity .15s, border-color .15s;
}
.prod__thumbs button:hover { opacity: .9; }
.prod__thumbs button.is-on { border-color: var(--wp-brass); opacity: 1; }
.prod__thumbs img { width: 100%; height: 100%; object-fit: contain; display: block; }
.prod__thumbs .is-video { position: relative; }
.prod__thumbs .is-video::after {
  content: "\25B6"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1rem; text-shadow: 0 1px 4px #000;
}

/* ---- full-screen view --------------------------------------------------- */
.prod__lb {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: rgba(4,4,3,.94);
  color: var(--wp-bone);
}
.prod__lb[open] { display: flex; align-items: center; justify-content: center; }
.prod__lb::backdrop { background: rgba(0,0,0,.7); }
.prod__lb img {
  max-width: calc(100vw - 7rem); max-height: calc(100dvh - 5rem);
  object-fit: contain; box-shadow: 0 20px 80px rgba(0,0,0,.8);
}
.prod__lb .prod__nav--prev { left: 1rem; }
.prod__lb .prod__nav--next { right: 1rem; }
.prod__lbx {
  position: absolute; top: .8rem; right: 1rem; z-index: 3;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2); background: rgba(8,8,7,.6);
  color: var(--wp-bone); font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.prod__lb .prod__count { right: 50%; transform: translateX(50%); bottom: 1rem; }
@media (max-width: 600px) {
  .prod__lb img { max-width: 100vw; max-height: calc(100dvh - 6rem); }
  .prod__lb .prod__nav { top: auto; bottom: .8rem; transform: none; }
}

.prod__buy { display: flex; flex-direction: column; gap: 1rem; font-family: var(--wp-body); }
.prod__title { margin: 0; font-family: var(--wp-display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.8rem, 5vw, 3rem); line-height: 0.95; color: var(--wp-bone); }
.prod__sub { margin: 0; color: var(--wp-bone-dim); font-size: 1rem; }
.prod__figure { font-family: var(--wp-display); font-weight: 900; font-size: clamp(1.6rem, 4vw, 2.4rem); color: var(--wp-brass); }
.prod__body { margin: 0; line-height: 1.7; color: var(--wp-bone-dim); white-space: pre-line; }

/* The options are a radio group now, not a list. A whole row is the label,
   so the hit target is the row rather than the 13px circle - which is what
   makes this usable on a phone. */
.prod__opts {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}

.prod__optslegend {
  padding: 0 0 0.35rem;
  font-family: var(--wp-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp-bone-faint);
}

.prod__opt {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--wp-rule);
  background: rgba(6, 7, 5, 0.5);
  font-size: 0.9rem;
  color: var(--wp-bone);
  cursor: pointer;
}

.prod__opt input { flex: none; margin: 0; accent-color: var(--wp-brass); cursor: pointer; }
.prod__optname  { flex: 1 1 auto; }
.prod__optprice { flex: none; font-family: var(--wp-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--wp-bone-dim); }

/* The chosen row has to be obvious at a glance - the radio dot alone is not
   enough against a dark panel. */
.prod__opt:has(input:checked) { border-color: var(--wp-brass); background: rgba(6, 7, 5, 0.85); }
.prod__opt:hover              { border-color: var(--wp-bone-faint); }
.prod__opt:has(input:focus-visible) { outline: 2px solid var(--wp-brass); outline-offset: 2px; }

.prod__opt.is-out {
  color: var(--wp-bone-faint);
  cursor: not-allowed;
  text-decoration-color: var(--wp-bone-faint);
}
.prod__opt.is-out .prod__optname { text-decoration: line-through; }
.prod__opt.is-out:hover          { border-color: var(--wp-rule); }

.prod__opt small { font-family: var(--wp-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp-bone-faint); }

.prod__form { display: flex; flex-direction: column; gap: 1rem; margin: 0; }

.prod__cta {
  display: inline-block;
  width: 100%;
  cursor: pointer;
  font-weight: inherit;
  box-sizing: border-box;
  padding: 0.75rem 1.4rem;
  min-height: 3rem;
  text-align: center;
  font-family: var(--wp-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--wp-ink, #060705);
  background: var(--wp-brass);
  border: 1px solid var(--wp-brass);
}

.prod__cta:hover { filter: brightness(1.12); }
.prod__cta.is-off { background: transparent; color: var(--wp-bone-faint); border-color: var(--wp-rule); pointer-events: none; }

.prod__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-family: var(--wp-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp-bone-faint); }
.prod__meta a { color: var(--wp-brass); }

body { min-height: 100vh; display: flex; flex-direction: column; }
.wrap { flex: 1 0 auto; }

@media (prefers-reduced-motion: reduce) {
  .shop__link:hover .shop__frame { transform: none; }
}


/* ---- cart quantity --------------------------------------------------- */
.prod__qty { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0 0 0.6rem; }
.prod__qty span { font-family: var(--wp-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--wp-bone-dim); }
.prod__qty select {
  font: inherit; font-family: var(--wp-mono);
  padding: 0.35rem 0.5rem;
  background: var(--wp-void); color: var(--wp-bone);
  border: 1px solid var(--wp-rule);
}

/* ---- option thumbnails (2026-09-26) ----------------------------------
   A picture in the option row, because on a sheet of stickers the design IS
   the variant: two of them can be called "Holographic" and only the photo
   tells them apart. */
.prod__opt.has-pic { padding-top: 0.45rem; padding-bottom: 0.45rem; }

.prod__optpic {
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  object-fit: cover;
  border: 1px solid var(--wp-rule);
  background: rgba(6, 7, 5, 0.6);
  display: block;
}
.prod__opt:has(input:checked) .prod__optpic { border-color: var(--wp-brass); }
.prod__opt.is-out .prod__optpic { opacity: 0.45; filter: grayscale(1); }

@media (max-width: 30rem) {
  .prod__optpic { width: 2.1rem; height: 2.1rem; }
}

/* ==========================================================================
   A collaborator's stage under a product page
   ==========================================================================
   Set by product.php when the thing on the page was made with somebody: the
   body gets .wp-collab .wp-shop-themed and their .wp-accent-* class, and the
   backdrop comes from their own config through includes/collab-stage.php.

   The accent needs nothing here. This file already styles prices, links,
   hovers and focus rings from --wp-brass in sixteen places, and .wp-accent-*
   redefines that token -- so the hue arrives on its own the moment the class
   lands on <body>. That is the whole reason it was built as tokens. */

/* Above the scenery. The collaborator page does this with .wp-collab__main;
   the shop's column needs the same or the stage paints over the product. */
.wp-shop-themed .wrap { position: relative; z-index: 1; }

/* THE FIGURE IS LEFT EXACTLY WHERE ITS OWN CONFIG PUTS IT.
   Two attempts to "make room" by transforming it both made the page worse,
   and measuring is what showed it. Shifting it 22% and scaling to 0.74 put it
   at 1022-1415 in a 1280 viewport -- almost entirely off screen, leaving a
   dark rectangle with a wave pattern on it, which is nobody's theme. A gentler
   7% / 0.88 still dragged it below the fold, because the config positions it
   from a percentage of the viewport and a transform-origin at the bottom right
   compounds with that rather than nudging it.

   The overlap was never the real problem. The buy column standing on artwork
   with no ground of its own was, and that is fixed below with one panel. So
   the artwork keeps the composition its author gave it, and the product sits
   on top of it in a box you can read. */
.wp-shop-themed .wp-collab-stage__figure { opacity: 0.9; }

/* Narrow: the content becomes one column over the whole artwork, so the
   artwork steps back and becomes texture rather than a subject. */
@media (max-width: 60rem) {
  .wp-shop-themed .wp-collab-stage__figure { opacity: 0.4; }
}

/* The buy column carries the price, the variant picker and the one button
   that takes money. It gets its own ground rather than trusting whatever
   happens to be behind it -- art moves, and a parallax layer moves while you
   read. */
.wp-shop-themed .prod__buy,
.wp-shop-themed .prod__meta {
  background: rgba(6, 5, 6, 0.78);
  backdrop-filter: blur(3px);
  border: 1px solid var(--wp-rule, rgba(242, 237, 225, 0.14));
  border-radius: 3px;
  padding: clamp(0.9rem, 2vw, 1.3rem);
}
@supports not (backdrop-filter: blur(3px)) {
  .wp-shop-themed .prod__buy,
  .wp-shop-themed .prod__meta { background: rgba(6, 5, 6, 0.9); }
}

/* Same for the body copy, which is the text most likely to end up over the
   busiest part of the art. */
.wp-shop-themed .prod__desc { position: relative; }
.wp-shop-themed .prod__desc::before {
  content: "";
  position: absolute;
  inset: -0.8rem -1rem;
  background: rgba(6, 5, 6, 0.62);
  border-radius: 4px;
  z-index: -1;
}
}

/* ---- deals (store-fix-013, 2026-10-07) ----------------------------------
   On the product page: the figure is the deal price, the list price struck
   beside it, the admin's flag as a small brass tag, and one honest line
   under it (how many at this price, when it ends). On /shop/: a single
   banner line pointing at /buy-it-now/, drawn only while a deal is live. */
.prod__figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3em 0.55em; margin: 0; }
.prod__was { font-size: 0.55em; font-weight: 400; color: var(--wp-bone-faint); }
.prod__dealflag { align-self: center; font-family: var(--wp-mono); font-weight: 400; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp-ink, #060705); background: var(--wp-brass); padding: 0.2em 0.55em; }
.prod__dealnote { margin: -0.5rem 0 0; font-family: var(--wp-mono); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--wp-brass); }
.prod__optprice s { color: var(--wp-bone-faint); margin-right: 0.2em; }
.shop__deals { margin: 0; }
.shop__deals a { display: inline-block; font-family: var(--wp-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp-ink, #060705); background: var(--wp-brass); padding: 0.55em 0.9em; text-decoration: none; }
.shop__deals a:hover { filter: brightness(1.12); }
.shop__deals b { font-weight: 700; }