/* Packs: a set's aisle in the shop. The set's name is the sign; its open
   display box stands on the counter with the chosen wrapper lifted out of it,
   the pull rates sit beside it on a laminated card in an acrylic holder, the
   chase cards stand in the glass case, and the sealed product is on the
   shelves with a paper label under each. Every control stays plain. The
   shared objects are drawn in css/counter.css. Rules are scoped to
   #view-shop so they win over the older shop rules app.css still carries in
   its responsive blocks. See DESIGN.md. */

/* ---- The set bar ------------------------------------------------------------
   Every set as a plain word, the chosen one in ink with a 2px ink line under
   it, scrolling sideways; the link to all of them stays put at the end. */
#view-shop .shop-sets-bar {
  display: flex;
  align-items: stretch;
  gap: 20px;
  margin: -36px 0 0;
  border-bottom: 1px solid var(--line);
}
#view-shop .shop-quick-sets {
  flex: 1 1 auto;
  display: flex;
  gap: 22px;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
}
#view-shop .shop-quick-sets::-webkit-scrollbar { display: none; }
#view-shop .shop-quick-set {
  position: relative;
  flex: none;
  scroll-snap-align: start;
  min-height: 46px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 560;
  white-space: nowrap;
}
#view-shop .shop-quick-set:hover { background: transparent; color: var(--ink); }
#view-shop .shop-quick-set.active { color: var(--ink); font-weight: 650; box-shadow: inset 0 -2px 0 var(--ink); }
#view-shop .shop-all-sets {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--muted);
  white-space: nowrap;
}
#view-shop .shop-all-sets:hover { text-decoration-color: var(--ink); }

/* ---- The counter ------------------------------------------------------------
   Two columns: the sign, the facts and the rate card on the left, the display
   box on the right. Both stand on the counter, so both sit at the foot of the
   scene and the scene grows upward when the left column runs long. */
#view-shop .shop-counter { --counter-h: 250px; --lamp-x: 64%; }
#view-shop .shop-scene {
  display: grid;
  grid-template-columns: minmax(0, 350px) minmax(0, 1fr);
  column-gap: 48px;
  min-height: 800px;
}
#view-shop .shop-pitch {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 56px 0 196px;
  container-type: inline-size;
}
#view-shop .shop-title {
  margin: 0;
  font-size: clamp(56px, 9vw, 84px);
  font-size: min(clamp(56px, 9vw, 84px), calc(100cqw * 0.98 / var(--name-em, 4)));
  text-wrap: balance;
  color: var(--ink);
}
#view-shop .shop-facts { margin: 16px 0 0; max-width: 36ch; color: var(--ink-2); font-size: 16px; }
#view-shop .shop-progress { margin: 12px 0 0; color: var(--ink); font-size: 16px; }
#view-shop .shop-progress[hidden], #view-shop .ratecard[hidden], #view-shop .shop-same[hidden] { display: none; }

/* A promo set sells no boosters: no counter, just the sign on the wall. */
#view-shop .shop-counter.no-packs::before, #view-shop .shop-counter.no-packs::after { content: none; }
#view-shop .shop-counter.no-packs .shop-scene { min-height: 0; }
#view-shop .shop-counter.no-packs .shop-pitch { padding-bottom: 48px; }

/* The rate card: a printed sheet in a clear laminate pouch, standing in an
   acrylic holder on the counter. */
#view-shop .ratecard { position: relative; width: 100%; max-width: 340px; margin-top: auto; padding-top: 32px; }
#view-shop .ratecard-lam {
  position: relative;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
}
#view-shop .ratecard-lam::after { /* the acrylic base */
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  bottom: -17px;
  height: 18px;
  border-radius: 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  background: linear-gradient(rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08));
}
#view-shop .ratecard-paper { padding: 16px 18px; border-radius: 2px; background: var(--paper); color: var(--print); }
#view-shop .ratecard h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.05;
  font-stretch: 80%;
  font-variation-settings: "opsz" 48, "wdth" 80;
  letter-spacing: -0.01em;
  color: var(--print);
}
#view-shop .ratecard-per { margin: 2px 0 10px; font-size: 13px; color: var(--print-2); }
#view-shop .ratecard dl { margin: 0; }
#view-shop .ratecard-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 0;
  border-top: 1px solid #d7d2c6;
  font-size: 14px;
  line-height: 1.25;
}
#view-shop .ratecard-row dt { flex: 0 1 auto; min-width: 0; }
#view-shop .ratecard-row::after { /* the dot leader between the rarity and its rate */
  content: "";
  order: 1;
  flex: 1 1 auto;
  min-width: 12px;
  border-bottom: 1px dotted #8c857a;
  transform: translateY(-3px);
}
#view-shop .ratecard-row dd { order: 2; margin: 0; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
#view-shop .ratecard-note { margin: 8px 0 0; font-size: 13px; line-height: 1.4; }
#view-shop .ratecard-slots {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 2px solid var(--print);
  font-size: 13px;
  line-height: 1.4;
}
#view-shop .ratecard-slots b { display: block; margin-bottom: 2px; font-size: 14px; }

/* ---- The display box ----------------------------------------------------------
   The set's booster display, lid folded back into a header card with the
   set's logo, the wrappers standing in it and the chosen one lifted, a low
   tear-away front with the price sticker on it, and the wrappers' names under
   it. The radios are real; only their dots are hidden. */
#view-shop .shop-boxzone {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
  padding: 120px 0 110px;
}
#view-shop .pack-grid { width: 100%; }
#view-shop .display-box {
  --pk: 160px;
  --lift: 72px;
  position: relative;
  width: 100%;
  max-width: 820px;
  min-width: 0;
  margin: 0 auto;
  padding: 0;
  border: 0;
}
#view-shop .dbox-lid {
  display: flex;
  justify-content: center;
  width: 84%;
  height: 200px;
  margin: 0 auto;
  padding-top: 20px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(#27241f, #191714);
}
#view-shop .dbox-logo { display: block; width: auto; max-width: 62%; height: auto; max-height: 96px; object-fit: contain; }
#view-shop .dbox-body { /* the inside of the box: its back wall in the lid's shadow */
  position: relative;
  width: 92%;
  height: 230px;
  margin: 0 auto;
  border-top: 3px solid #3b362f;
  background: linear-gradient(#070605, #14110f 60%, #1d1a16);
}
#view-shop .dbox-body::before, #view-shop .dbox-body::after { /* side walls, wider toward the front */
  content: "";
  position: absolute;
  top: -3px;
  bottom: 0;
  width: 40px;
  background: linear-gradient(#24211c, #36312b);
}
#view-shop .dbox-body::before { left: -40px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
#view-shop .dbox-body::after { right: -40px; clip-path: polygon(0 0, 100% 100%, 0 100%); }
#view-shop .dbox-tray, #view-shop .dbox-names {
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, var(--pk)));
  justify-content: center;
  gap: 14px;
  padding: 0 14px;
}
#view-shop .dbox-tray { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; }
#view-shop .dbox-slot { position: relative; min-width: 0; }
#view-shop .dbox-input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
#view-shop .dbox-pack { display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#view-shop .dbox-pack picture { display: contents; }
#view-shop .dbox-pack img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-user-drag: none;
  transition: transform 0.35s var(--ease-out);
}
/* The one moment on this page: the chosen wrapper lifts out of the box. */
#view-shop .dbox-input:checked + .dbox-pack img { transform: translateY(calc(-1 * var(--lift))); }
#view-shop .dbox-input:focus-visible + .dbox-pack img { outline: 2px solid var(--focus); outline-offset: 4px; }
#view-shop .dbox-front { /* it hides only the packs' bottom crimps */
  position: relative;
  z-index: 2;
  height: 56px;
  margin-top: -34px;
  border-top: 2px solid #46403a;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(#2b2723, #1a1815);
  box-shadow: 0 16px 26px rgba(0, 0, 0, 0.5);
}
#view-shop .dbox-gun { position: absolute; right: 34px; top: 11px; font-size: 28px; --tilt: -3deg; }
#view-shop .dbox-names { margin-top: 8px; }
#view-shop .dbox-name {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 0;
  color: var(--ink-2);
  font-size: 15px;
  text-align: center;
  line-height: 1.15;
  cursor: pointer;
  overflow-wrap: anywhere;
}
#view-shop .dbox-name:hover { color: var(--ink); }
#view-shop .dbox-name.is-on { color: var(--ink); font-weight: 700; }

/* A set with one wrapper: that pack stands forward on the counter. */
#view-shop .single-pack { width: 220px; margin: 0 auto 18px; }

#view-shop .shop-rip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 22px;
  margin-top: 14px;
}
#view-shop .shop-rip { min-width: 0; min-height: 52px; padding-inline: 28px; font-size: 18px; font-weight: 700; }
#view-shop .shop-same { margin: 0; color: var(--ink); font-size: 15px; }
#view-shop .shop-pack-trend:empty { display: none; }
#view-shop .price-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; font-size: 14px; }
#view-shop .price-link[hidden] { display: none; }

/* ---- The glass case ------------------------------------------------------------ */
#view-shop .shop-case { margin-top: 0; }

/* ---- Sealed product on the shelves ------------------------------------------
   Each product stands on the shelf board, a paper label in the channel under
   it with what is inside and the price, and its two quiet buttons below. A
   subgrid keeps the boards and labels of one shelf level across the row. */
#view-shop .shop-goods { margin-top: 0; }
#view-shop .sealed-block { margin-top: 64px; }
#view-shop .section-head { display: block; margin: 0 0 30px; }
#view-shop .section-head h2 { margin: 0; font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }
#view-shop .section-head p { margin: 6px 0 0; max-width: 70ch; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
/* The set's boxes, then its collections: two lists in one shelf run. */
#view-shop .goods-part { display: contents; }
#view-shop .goods-section:not(:has(.good)) { display: none; }
#view-shop .section-head p[hidden] { display: none; }
#view-shop .goods-shelf {
  display: grid;
  grid-template-columns: repeat(var(--goods-cols, 5), minmax(0, 1fr));
  column-gap: 0;
  row-gap: 0;
}
#view-shop .good {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  min-width: 0;
}
#view-shop .good-stand {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 236px;
  padding: 0 10px;
}
#view-shop .good-stand::before { /* its shadow on the shelf */
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: -6px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}
#view-shop .good-img {
  position: relative;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
#view-shop .good .shelf-chan { padding-bottom: 7px; }
#view-shop .good-label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-auto-rows: auto;
  align-content: start;
  column-gap: 8px;
  min-height: 92px;
  padding: 6px 9px;
}
#view-shop .good-name {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0;
  font-stretch: 75%;
  font-variation-settings: "opsz" 12, "wdth" 75;
  color: var(--print);
}
#view-shop .good-what {
  grid-column: 1;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--print-2);
  font-stretch: 85%;
  font-variation-settings: "opsz" 12, "wdth" 85;
}
#view-shop .good-price {
  grid-column: 2;
  grid-row: 2 / span 4;
  align-self: end;
  margin: 0;
  font-size: 30px;
  color: var(--print);
}
#view-shop .good-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: start;
  gap: 8px 10px;
  padding: 12px 6px 52px;
}
/* Open and Add to cart side by side, the same width; a long label wraps. */
#view-shop .good-acts .product-open, #view-shop .good-acts .cart-ctl { flex: 1 1 0; min-width: 0; }
#view-shop .good-acts .cart-ctl .cart-add { width: 100%; min-width: 0; min-height: 44px; padding: 6px 8px; font-size: 13.5px; line-height: 1.15; }
/* Once the product is in the cart the stepper (minus, "2 in cart", plus) needs the
   label's full width: it takes its own row under Open instead of half of one. */
#view-shop .good-acts .cart-ctl.in-cart { flex-basis: 100%; }
#view-shop .good-acts .cart-step-n { white-space: nowrap; }
#view-shop .product-open { min-width: 0; min-height: 44px; padding: 6px 8px; font-size: 13.5px; line-height: 1.15; }
#view-shop .product-open.confirming { border-color: var(--ink); background: var(--ink); color: var(--black); }
#view-shop .good-acts .price-link { flex-basis: 100%; }

/* A product with no photo: a plain carton with the set's logo. */
#view-shop .drawn-box { position: relative; z-index: 1; display: block; margin-right: 16px; }
#view-shop .drawn-top {
  display: block;
  height: 20px;
  margin-left: 14px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(#3a3631, #2b2824);
  transform: skewX(-32deg);
  transform-origin: bottom left;
}
#view-shop .drawn-face {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(#211e1b, #141210);
  overflow: hidden;
}
#view-shop .drawn-face img { display: block; width: 70%; height: auto; max-height: 60%; object-fit: contain; }
#view-shop .drawn-face span { color: #e8e2d6; font-size: 11px; font-weight: 700; font-stretch: 80%; font-variation-settings: "opsz" 12, "wdth" 80; }
#view-shop .drawn-side {
  position: absolute;
  top: 0;
  right: -16px;
  bottom: 0;
  width: 16px;
  background: linear-gradient(90deg, #191714, #0f0e0c);
  transform: skewY(-55deg);
  transform-origin: top left;
}
#view-shop .drawn-box.is-box .drawn-face { width: 200px; height: 124px; }
#view-shop .drawn-box.is-bundle .drawn-face { width: 140px; height: 100px; }
/* Or its packs fanned on the shelf. */
#view-shop .good-fan { position: relative; display: flex; align-items: flex-end; justify-content: center; }
#view-shop .good-fan > span { display: block; width: 84px; margin: 0 -18px; transform-origin: bottom center; }
#view-shop .good-fan > span:nth-child(1) { transform: rotate(-9deg) translateY(3px); }
#view-shop .good-fan > span:nth-child(2) { z-index: 1; }
#view-shop .good-fan > span:nth-child(3) { transform: rotate(9deg) translateY(3px); }
#view-shop .good-fan picture { display: contents; }
#view-shop .good-fan img { display: block; width: 100%; height: auto; }

/* Promo products: the box photo with its promo cards fanned in front. Each
   card can be inspected. Faces mount only near the screen (windowFaces), so
   an empty holder keeps the card's shape. */
#view-shop .promo-stage .promo-box { max-width: 78%; margin-right: auto; }
#view-shop .promo-fan { position: absolute; z-index: 1; right: 10px; bottom: 0; display: flex; align-items: flex-end; }
#view-shop .promo-face {
  display: block;
  width: 84px;
  aspect-ratio: 63 / 88;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  transform-origin: bottom center;
}
#view-shop .promo-face:empty { border-radius: 3.97% / 2.84%; background: rgba(255, 255, 255, 0.04); }
#view-shop .promo-face:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r-sm); }
#view-shop .promo-fan.count-1 .promo-face { width: 96px; transform: rotate(5deg); }
#view-shop .promo-fan.count-2 .promo-face:nth-child(1) { transform: rotate(-5deg) translateX(18px); }
#view-shop .promo-fan.count-2 .promo-face:nth-child(2) { transform: rotate(6deg); z-index: 1; }
#view-shop .promo-fan.count-3 .promo-face { width: 72px; }
#view-shop .promo-fan.count-3 .promo-face:nth-child(1) { transform: rotate(-8deg) translate(32px, 4px); }
#view-shop .promo-fan.count-3 .promo-face:nth-child(2) { transform: translateX(16px); z-index: 1; }
#view-shop .promo-fan.count-3 .promo-face:nth-child(3) { transform: rotate(8deg) translateY(4px); z-index: 2; }
#view-shop .promo-fan.count-4 .promo-face { width: 64px; }
#view-shop .promo-fan.count-4 .promo-face:nth-child(1) { transform: rotate(-10deg) translate(50px, 7px); }
#view-shop .promo-fan.count-4 .promo-face:nth-child(2) { transform: rotate(-3deg) translate(34px, 2px); z-index: 1; }
#view-shop .promo-fan.count-4 .promo-face:nth-child(3) { transform: rotate(4deg) translate(17px, 2px); z-index: 2; }
#view-shop .promo-fan.count-4 .promo-face:nth-child(4) { transform: rotate(11deg) translateY(7px); z-index: 3; }
/* An event promo has no box: the card stands on its own, centred. */
#view-shop .promo-product.no-box .promo-fan { left: 0; right: 0; justify-content: center; }
#view-shop .promo-product.no-box .promo-fan.count-1 .promo-face { width: 120px; transform: rotate(3deg); }
#view-shop .promo-note {
  position: absolute;
  z-index: 2;
  left: 10px;
  top: 0;
  padding: 3px 8px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
}
#view-shop .promo-kind-head { margin: 8px 0 22px; font-size: 20px; font-weight: 700; }

/* ---- The set notice ------------------------------------------------------------
   A /packs/<id> link that can't open says why, above the set showing instead. */
#view-shop .set-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin: 0 0 22px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
}
#view-shop .set-notice:not(.hidden) ~ .shop-sets-bar { margin-top: 0; }
#view-shop .set-notice-copy { flex: 1 1 260px; min-width: 0; }
#view-shop .set-notice-copy b { display: block; font-size: 15px; font-weight: 650; color: var(--ink); }
#view-shop .set-notice-copy p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
#view-shop .set-notice-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- All expansions ------------------------------------------------------------
   At the foot of the aisle: each era a <details>, each set a plain row with
   its symbol, name and date, the chosen one in ink. */
#view-shop .shop-rail {
  position: static;
  max-height: none;
  margin-top: 72px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
#view-shop .shop-rail-head { margin: 0 0 12px; padding: 0; }
#view-shop .shop-rail-head h2 { margin: 0; font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }
#view-shop .set-switcher { display: block; columns: 3 280px; column-gap: 48px; }
#view-shop .rail-era {
  break-inside: avoid;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  overflow: visible;
}
#view-shop .rail-era[open] { background: none; }
#view-shop .rail-era summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 10px 0;
  cursor: pointer;
  list-style: none;
}
#view-shop .rail-era summary::-webkit-details-marker { display: none; }
#view-shop .rail-era summary::marker { content: ""; }
#view-shop .rail-era-title { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
#view-shop .rail-era-title b { font-size: 15px; font-weight: 650; color: var(--ink); }
#view-shop .rail-era-title small, #view-shop .rail-era-count { font-size: 13px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
#view-shop .rail-era-count { flex: none; }
#view-shop .rail-era summary::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-left: 2px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  rotate: 45deg;
  translate: 0 -2px;
}
#view-shop .rail-era[open] > summary::after { rotate: 225deg; translate: 0 2px; }
#view-shop .rail-sets { display: flex; flex-direction: column; padding: 0 0 12px; }
#view-shop .rail-set {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
}
#view-shop .rail-set:hover { background: transparent; }
#view-shop .rail-set:hover b { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
#view-shop .rail-set.active, #view-shop .rail-set.active:hover { background: transparent; }
#view-shop .rail-set.active b { color: var(--ink); font-weight: 700; }
#view-shop .rail-set.is-queued { cursor: default; }
#view-shop .rail-set.is-queued:hover b { text-decoration: none; color: var(--ink-2); }
#view-shop .rail-set:disabled { opacity: 0.45; cursor: default; }
#view-shop .rail-symbol-slot { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 20px; }
#view-shop .rail-symbol { width: 100%; height: 100%; object-fit: contain; }
#view-shop .rail-set-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
#view-shop .rail-set-copy b { font-size: 14px; font-weight: 600; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-shop .rail-set-copy small { font-size: 12px; font-weight: 500; color: var(--muted); }
/* Queued is a plain word, not a badge. */
#view-shop .rail-set .soon { flex: none; padding: 0; border: 0; border-radius: 0; background: none; color: var(--muted); font-size: 12px; font-weight: 500; }

/* ---- Narrower laptop and tablet ---------------------------------------------- */
@media (max-width: 1179px) {
  #view-shop .shop-scene { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); column-gap: 32px; }
  #view-shop .display-box { --pk: 132px; --lift: 60px; }
  #view-shop .dbox-lid { height: 170px; }
  #view-shop .dbox-body { height: 190px; }
  #view-shop .goods-shelf { --goods-cols: 4; }
}
@media (max-width: 960px) {
  /* Stacked: the sign and facts on the wall, the box standing on the
     counter's back edge, then the rate card on the counter. The scene's own
     counter is off; the box zone and the rate card each lay their strip of it.
     --bench is where the counter's edge meets the box zone, measured from its
     top: the box's lid and body have fixed heights at each width, so the
     front lands on it. */
  #view-shop .shop-counter::before, #view-shop .shop-counter::after { content: none; }
  #view-shop .shop-scene { display: flex; flex-direction: column; min-height: 0; container-type: inline-size; }
  #view-shop .shop-pitch { display: contents; }
  #view-shop .shop-title { margin-top: 28px; font-size: min(clamp(48px, 13vw, 84px), calc(100cqw * 0.98 / var(--name-em, 4))); }
  #view-shop .shop-boxzone {
    --bench: 380px;
    order: 1;
    margin: 0 calc(50% - 50vw);
    padding: 36px calc(50vw - 50%) 28px;
    background:
      linear-gradient(var(--wall) var(--bench), #574e44 var(--bench), #574e44 calc(var(--bench) + 1px), transparent calc(var(--bench) + 1px)),
      radial-gradient(ellipse 420px 110px at 50% calc(var(--bench) + 60px), rgba(255, 224, 178, 0.15), rgba(255, 224, 178, 0) 75%),
      url("/assets/textures/laminate.png"),
      var(--counter);
  }
  #view-shop .shop-boxzone:has(.single-pack) { --bench: 400px; }
  #view-shop .ratecard {
    order: 2;
    width: auto;
    max-width: none;
    margin: 0 calc(50% - 50vw);
    padding: 8px calc(50vw - 50%) 64px;
    background:
      var(--nosing) bottom / 100% 14px no-repeat,
      url("/assets/textures/laminate.png"),
      var(--counter);
  }
  #view-shop .ratecard-lam { max-width: 340px; margin: 0 auto; }
  #view-shop .goods-shelf { --goods-cols: 3; }
  #view-shop .shop-rail { margin-top: 56px; }
}
@media (max-width: 720px) {
  #view-shop .shop-sets-bar { margin-top: -18px; margin-inline: calc(-1 * var(--gutter)); padding-left: var(--gutter); gap: 14px; }
  #view-shop .shop-all-sets { padding-right: var(--gutter); }
  #view-shop .shop-quick-sets { gap: 18px; }
  #view-shop .shop-facts { margin-top: 10px; font-size: 15px; }
  #view-shop .shop-progress { margin-top: 8px; font-size: 15px; }
  #view-shop .shop-boxzone { --bench: 212px; padding-top: 26px; padding-bottom: 22px; }
  #view-shop .shop-boxzone:has(.single-pack) { --bench: 252px; }
  #view-shop .display-box { --pk: 92px; --lift: 34px; }
  #view-shop .dbox-lid { width: 86%; height: 96px; padding-top: 10px; }
  #view-shop .dbox-logo { max-height: 50px; }
  #view-shop .dbox-body { width: 94%; height: 104px; }
  #view-shop .dbox-body::before, #view-shop .dbox-body::after { width: 14px; }
  #view-shop .dbox-body::before { left: -14px; }
  #view-shop .dbox-body::after { right: -14px; }
  #view-shop .dbox-tray, #view-shop .dbox-names { gap: 6px; padding: 0 6px; }
  #view-shop .dbox-front { height: 40px; margin-top: -24px; }
  #view-shop .dbox-gun { right: 12px; top: 6px; font-size: 22px; }
  #view-shop .dbox-names { margin-top: 2px; }
  #view-shop .dbox-name { font-size: 13px; }
  #view-shop .single-pack { width: 150px; }
  #view-shop .shop-rip-row { width: 100%; margin-top: 10px; }
  #view-shop .shop-rip { width: 100%; }
  #view-shop .shop-same { text-align: center; }
  #view-shop .shop-case .loader:nth-child(n + 7) { display: none; }
  #view-shop .sealed-block { margin-top: 48px; }
  #view-shop .section-head h2 { font-size: 26px; }
  #view-shop .goods-shelf { --goods-cols: 2; }
  #view-shop .good-stand { height: 160px; }
  #view-shop .drawn-box.is-box .drawn-face { width: 130px; height: 84px; }
  #view-shop .drawn-box.is-bundle .drawn-face { width: 104px; height: 74px; }
  #view-shop .good-fan > span { width: 62px; margin: 0 -14px; }
  /* On a narrow label the price takes its own line, at the foot. */
  #view-shop .good-label { grid-template-columns: minmax(0, 1fr); padding: 6px 8px; }
  #view-shop .good-price { grid-column: 1; grid-row: auto; justify-self: end; margin-top: 6px; font-size: 26px; }
  #view-shop .good-acts .product-open, #view-shop .good-acts .cart-ctl { flex-basis: 100%; }
  #view-shop .good-acts { padding-bottom: 40px; }
  #view-shop .promo-face { width: 60px; }
  #view-shop .promo-fan.count-1 .promo-face { width: 70px; }
  #view-shop .promo-fan.count-3 .promo-face { width: 52px; }
  #view-shop .promo-fan.count-4 .promo-face { width: 46px; }
  #view-shop .promo-product.no-box .promo-fan.count-1 .promo-face { width: 92px; }
  #view-shop .set-switcher { columns: 1; }
}

/* ---- Motion off ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  #view-shop .dbox-pack img { transition: none; }
}
body.no-motion #view-shop .dbox-pack img { transition: none; }