/* RAT HOLE SHOP — extra styles for shop.html, on top of style.css. */

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

.shop-section, #basket { scroll-margin-top: calc(var(--header-h, 4.5rem) + var(--jump-h, 3rem) + 1rem); }

.shop-banner { font-family: var(--f-type); border-left: 4px solid var(--yellow); padding: .4rem 0 .4rem .8rem; }
.shop-banner .tape { margin-right: .5rem; }

/* ---------- sticky section bar ---------- */
.shop-jump {
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--header-h, 4.5rem)); z-index: 15;
  background: rgba(15,13,13,.96); border-bottom: 2px dashed rgba(239,233,226,.25);
  margin-bottom: 1.5rem;
}
.shop-jump ul {
  list-style: none; margin: 0; padding: .6rem 0; display: flex; gap: .5rem;
  overflow-x: auto; scrollbar-width: none;
}
.shop-jump ul::-webkit-scrollbar { display: none; }
.shop-jump li { flex: none; }
.shop-jump a {
  display: inline-flex; gap: .35rem; align-items: center;
  font-family: var(--f-type); text-transform: uppercase; letter-spacing: .06em; font-size: .85rem;
  text-decoration: none; color: var(--bone); border: 2px solid var(--bone); padding: .3rem .7rem; white-space: nowrap;
}
.shop-jump a:hover { border-color: var(--yellow); color: var(--yellow); }
.shop-jump a[aria-current="true"] { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }

/* ---------- layout ---------- */
.shop-main { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 2.5rem; align-items: start; padding-bottom: 3rem; }
.shop-sections { display: grid; gap: 3rem; }
.shop-section .section-head { margin-bottom: .6rem; }
.shop-blurb { font-family: var(--f-type); color: var(--muted); margin-bottom: 1.4rem; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 2rem 1.4rem; }

/* ---------- product cards ---------- */
.shop-product { gap: .6rem; }
.shop-product h3 { font-size: 1.1rem; }
.shop-product .product-img .art { display: grid; place-items: center; }
.shop-product .product-img .art img { width: 60%; height: auto; object-fit: contain; }
.sale-tape { position: absolute; top: .7rem; right: .5rem; font-size: .8rem; transform: rotate(4deg); }
.product-desc { font-size: .95rem; color: var(--muted); }
.shop-product .btn { flex: none; font-size: .9rem; padding: .65rem 1rem; }
.size-pick { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.size-pick legend { float: left; margin-right: .3rem; font-size: .75rem; }
.size { position: relative; }
.size input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.size span {
  display: inline-grid; place-items: center; min-width: 2.6rem; height: 2.3rem; padding-inline: .45rem;
  font-family: var(--f-type); font-weight: 700; border: 2px solid var(--bone); background: var(--bg);
}
.size input:checked + span { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.size input:focus-visible + span { outline: 3px solid var(--yellow); outline-offset: 2px; }
.size:hover input:not(:disabled) + span { border-color: var(--yellow); }
.size.none span { opacity: .35; text-decoration: line-through; }
.size.none input { cursor: not-allowed; }
.pick-msg { font-family: var(--f-type); font-size: .85rem; min-height: 1.3em; }

/* ---------- basket ---------- */
.basket { top: calc(env(safe-area-inset-top, 0px) + var(--header-h, 4.5rem) + var(--jump-h, 3rem) + 1rem); max-height: calc(100vh - var(--header-h, 4.5rem) - var(--jump-h, 3rem) - 2rem); overflow-y: auto; }
.basket-sums { display: grid; gap: .8rem; }
.sum-row { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.delivery-pick, .details fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .45rem; }
.delivery-pick legend, .details legend { margin-bottom: .4rem; }
.post-opt {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 .5rem; align-items: center;
  border: 1.5px solid rgba(239,233,226,.3); padding: .45rem .55rem; cursor: pointer;
}
.post-opt:has(input:checked) { border-color: var(--yellow); }
.post-opt input { accent-color: var(--yellow); margin: 0; }
.post-name { font-weight: 700; font-size: .9rem; }
.post-price { font-variant-numeric: tabular-nums; font-weight: 700; }
.low-note { font-family: var(--f-type); font-size: .8rem; color: var(--yellow); }
.post-note { grid-column: 2 / -1; font-family: var(--f-type); font-size: .75rem; color: var(--muted); }
.post-name .example-tag { font-size: .6rem; }
.details { display: grid; gap: .9rem; border-top: 1.5px dashed rgba(239,233,226,.35); padding-top: 1rem; }
.details label { display: grid; gap: .2rem; font-family: var(--f-type); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.details [data-address-fields] { display: grid; gap: .45rem; }
.details input, .details select {
  font: inherit; font-family: var(--f-body); font-size: 1rem; text-transform: none; letter-spacing: normal;
  background: var(--bg); color: var(--bone); border: 2px solid rgba(239,233,226,.5); padding: .5rem .6rem; width: 100%; min-width: 0;
}
.details input:focus { border-color: var(--yellow); outline: none; }
.details input[aria-invalid="true"] { border-color: var(--red); }
.pay-btn { width: 100%; font-size: 1.05rem; }
.checkout-msg a { color: var(--ink); font-weight: 700; }


/* ---------- delivery and questions ---------- */
.postage-wrap { overflow-x: auto; margin-block: .7rem; }
.postage-table { border-collapse: collapse; border-top: 3px solid var(--red); font-family: var(--f-type); font-variant-numeric: tabular-nums; min-width: 22rem; }
.postage-table th, .postage-table td { padding: .45rem .9rem .45rem 0; border-bottom: 1.5px dashed rgba(239,233,226,.3); text-align: right; }
.postage-table th:first-child, .postage-table td:first-child { text-align: left; }
.postage-table th { font-weight: 400; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; }
.addr { font-family: var(--f-type); }
.faq { display: grid; gap: .6rem; max-width: 48rem; }
.faq details { border: 2px solid rgba(239,233,226,.3); padding: .7rem 1rem; }
.faq details[open] { border-color: var(--yellow); }
.faq summary { cursor: pointer; font-family: var(--f-display); text-transform: uppercase; font-size: 1.05rem; }
.faq details p { margin-top: .6rem; }

/* ---------- phone basket bar ---------- */
.basket-bar {
  position: fixed; left: var(--gutter); right: var(--gutter); bottom: calc(env(safe-area-inset-bottom, 0px) + .8rem); z-index: 30;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  background: var(--red); color: var(--bone); text-decoration: none; padding: .8rem 1rem;
  font-family: var(--f-display); text-transform: uppercase; border: 2px solid var(--bone);
  box-shadow: 4px 4px 0 var(--ink);
}
.basket-bar .cart-count { background: var(--ink); }

@media (max-width: 860px) {
  .shop-main { grid-template-columns: minmax(0, 1fr); }
  .basket { position: static; max-height: none; }
  .two-col { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem .9rem; }
  .shop-product h3 { font-size: .95rem; }
  .size span { min-width: 2.2rem; height: 2.2rem; font-size: .85rem; }
  .size-pick legend { display: none; }
  .shop-product .btn { font-size: .8rem; padding: .55rem .6rem; }
  main { padding-bottom: 4rem; }
}

/* ---------- intro quote and sold-out tape ---------- */
.intro-quote { margin: 0; display: grid; gap: .4rem; max-width: 40rem; border-left: 4px solid var(--red); padding-left: 1rem; }
.intro-quote blockquote { margin: 0; font-family: var(--f-type); font-size: clamp(1.05rem, 2.4vw, 1.3rem); line-height: 1.45; }
.intro-quote .label { color: var(--yellow); }
.intro-quote .label::before { content: "\2014\00a0"; }
.sold-tape { background: var(--red); color: var(--bone); transform: rotate(-5deg); }
.shop-product:has(.sold-tape) .product-img img { filter: grayscale(.6) brightness(.7); }

/* Questions sits below the shop columns: match the product sections' spacing */
#questions { padding-top: 0; }
.country-pick { display: grid; gap: .2rem; font-family: var(--f-type); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.country-pick select { font: inherit; font-family: var(--f-body); font-size: .95rem; text-transform: none; letter-spacing: normal; background: var(--bg); color: var(--bone); border: 2px solid rgba(239,233,226,.5); padding: .4rem .5rem; width: 100%; min-width: 0; }
.post-ex { margin: 0; }
.delivery-pick { display: grid; gap: .4rem; }
.delivery-pick .post-note { font-family: var(--f-type); font-size: .75rem; color: var(--muted); }

/* ---------- equal tiles: every card is the same size whatever its text ----------
   name and description are cut to two lines each, and the size row and stock note
   always keep their space, so the price, sizes and button line up across the grid */
.shop-grid { align-items: stretch; }
.shop-product {
  display: flex; flex-direction: column; gap: .55rem; height: 100%;
  background: rgba(239,233,226,.035); border: 2px solid rgba(239,233,226,.14); padding: .8rem .8rem .5rem;
}
.shop-product > * { margin: 0; }
.shop-product h3, .shop-product .product-desc {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.shop-product h3 { line-height: 1.2; min-height: 2.4em; }
.shop-product .product-desc { font-size: .9rem; line-height: 1.4; min-height: 2.8em; }
.shop-product .size-slot { min-height: 2.3rem; display: flex; align-items: center; }
.shop-product .low-note { min-height: 1.3em; line-height: 1.3; }
.shop-product .btn { margin-top: auto; width: 100%; }
.shop-product .pick-msg { min-height: 1.3em; }
@media (max-width: 560px) {
  .shop-product { padding: .55rem .55rem .35rem; gap: .45rem; }
  .shop-product .product-desc { font-size: .82rem; }
  .shop-product .size-slot { min-height: calc(4.4rem + .4rem); align-items: flex-start; }
  .shop-product .low-note { font-size: .7rem; min-height: 2.6em; }
}
.shop-product .badge-sold { display: none; } /* the tape and the button already say it */
@media (max-width: 860px) {
  .shop-product .size-pick legend { display: none; }
  .shop-product .size-slot { min-height: calc(4.6rem + .4rem); align-items: flex-start; }
  .shop-product .low-note { height: 2.6em; overflow: hidden; }
}
@media (max-width: 560px) {
  .shop-product .size-slot { min-height: calc(4.4rem + .4rem); }
}