/* The pattern shop's pages (/shop/), which the publisher Lambda writes
   from landing/shop/templates. Loaded after style.css and built on its
   tokens, controls and cards. */

/* ---------- Header cart link ---------- */
.site-nav .shop-cart-link { background: var(--coral-50); color: var(--coral-700); }

/* ---------- Listing page ---------- */
.shop-listing-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: clamp(20px, 4vw, 48px); align-items: start; }
.shop-listing-head .lead { margin-bottom: 14px; }
.shop-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.shop-made[data-made="human"] { border-color: var(--teal); color: var(--teal-700); background: var(--teal-50); }
.shop-made[data-made="ai_assisted"], .shop-made[data-made="ai_generated"] { border-color: var(--gold); color: var(--gold-700); background: var(--gold-50); }
.shop-buy { display: grid; gap: 12px; }
.shop-buy .button, .shop-buy button { width: 100%; }
.shop-buy .fine { margin: 0; }
.shop-price { margin: 0; font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--navy); }

.shop-listing { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(20px, 4vw, 48px); align-items: start; }
.shop-gallery { display: grid; gap: 16px; }
.shop-figure { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); overflow: hidden; }
.shop-figure img { display: block; width: 100%; height: auto; background: var(--ivory); }
.shop-figure figcaption { padding: 10px 14px; font-size: .82rem; color: var(--muted); }
.shop-details { min-width: 0; }
.shop-report { margin: 18px 0 0; }

.shop-facts { display: grid; gap: 8px; margin: 0 0 18px; }
.shop-facts > div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 2px 12px; }
.shop-facts dt { color: var(--muted); font-size: .88rem; font-weight: 600; }
.shop-facts dd { margin: 0; overflow-wrap: anywhere; }

.shop-sizes, .shop-threads table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.shop-sizes caption { text-align: left; font-weight: 700; color: var(--navy); padding-bottom: 6px; }
.shop-sizes th, .shop-sizes td, .shop-threads th, .shop-threads td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.shop-sizes thead th, .shop-threads thead th { color: var(--muted); font-size: .8rem; }
.shop-sizes tbody th { font-weight: 600; }
.shop-threads { margin-top: 14px; }
.shop-threads summary { display: flex; align-items: center; cursor: pointer; font-weight: 700; color: var(--navy); }
.shop-threads td:last-child, .shop-threads th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.shop-swatch { display: inline-block; margin-right: 8px; vertical-align: -2px; border: 1px solid var(--line-strong); border-radius: 3px; }

.shop-tags, .shop-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.shop-tags a, .shop-links a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-size: .85rem; font-weight: 600; text-decoration: none; color: var(--navy); }
.shop-tags a:hover, .shop-links a:hover { border-color: var(--navy); }

.shop-seller { margin-top: 32px; }

.shop-reviews-summary { font-weight: 700; color: var(--navy); }
.shop-review-list { display: grid; gap: 14px; margin: 0 0 18px; padding: 0; list-style: none; }
.shop-review { padding-bottom: 14px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.shop-review p { margin: 0 0 6px; }
.shop-review p:last-child { margin-bottom: 0; }
.shop-review-meta { font-size: .88rem; color: var(--muted); }
.shop-review-meta strong { color: var(--navy); }
.shop-review-write { margin: 14px 0 0; }
.shop-review-photos { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.shop-review-photos a { display: block; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.shop-review-photos a:hover { border-color: var(--navy); }
.shop-review-photos img { display: block; width: 96px; height: 96px; object-fit: cover; background: var(--ivory); }

/* ---------- Storefront ---------- */
.shop-browse { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.shop-search { display: grid; gap: 14px; position: sticky; top: calc(var(--header-h) + 16px); }
.shop-search .check-actions { margin-top: 0; }
.shop-search .check-actions button { width: 100%; }
.shop-results { min-width: 0; }
.shop-results h2 { font-size: 1.45rem; }
.shop-results > button { display: block; margin: 24px auto 0; }
.shop-cart { grid-column: 1 / -1; }
.shop-cart-lines { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.shop-cart-lines li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.shop-cart-lines li a { margin-right: auto; font-weight: 600; }

/* ---------- Cart page (cart.html) ---------- */
.cart-line-title { margin-right: auto; font-weight: 600; overflow-wrap: anywhere; }
.cart-line-designer { font-size: .88rem; color: var(--muted); }
.cart-line-price { font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.cart-line-why { flex-basis: 100%; margin: 0; font-size: .88rem; }
.shop-cart-lines li.cart-line-blocked { padding-left: 10px; border-left: 3px solid var(--coral-600); }
/* The library's picture beside each title (library.js), the shop card's at 4:3. */
.library-cover { flex: none; width: 64px; height: 48px; object-fit: cover; border-radius: var(--radius-sm); background: var(--ivory); }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; margin: 18px 0 4px; font-weight: 600; }
.cart-total strong { font-family: var(--font-display); font-size: 1.4rem; color: var(--navy); }

.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 20px; margin: 18px 0 0; padding: 0; list-style: none; }
.shop-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-bottom: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow-sm); overflow: hidden; }
.shop-card-link { display: flex; flex-direction: column; gap: 10px; color: var(--navy); text-decoration: none; }
.shop-card-link:hover .shop-card-title { text-decoration: underline; }
.shop-card-link img, .shop-card-blank { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--ivory); }
.shop-card-blank { background-color: var(--cream); background-image: linear-gradient(rgb(31 44 73 / .06) 1px, transparent 1px), linear-gradient(90deg, rgb(31 44 73 / .06) 1px, transparent 1px); background-size: 12px 12px; }
.shop-card-title { padding-inline: 14px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.shop-card-meta { padding-inline: 14px; font-size: .8rem; color: var(--muted); }
.shop-card-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; margin-top: auto; padding: 4px 14px 0; font-size: .85rem; }
.shop-card-price { font-weight: 700; color: var(--navy); }
.shop-card-made { color: var(--muted); }
.shop-card[data-made="human"] .shop-card-made { color: var(--teal-700); }

/* ---------- Narrow screens ---------- */
@media (max-width: 900px) {
  .shop-listing-head, .shop-listing, .shop-browse { grid-template-columns: minmax(0, 1fr); }
  .shop-search { position: static; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
}
@media (max-width: 640px) {
  .shop-facts > div { grid-template-columns: minmax(0, 1fr); }
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); gap: 14px; }
}
@media print {
  .shop-buy, .shop-search, .shop-cart, .shop-cart-link, .shop-review-write { display: none; }
}