/* KIOS store pages. Sits on top of styles.css (the lookbook folio system). */
.contents h1, .chapter h1, .product h1, .thanks h1, .cart h1, .policy h1 { font: 400 clamp(38px, 5.6vw, 72px)/1 var(--fell); margin: 8px 0 18px; text-wrap: balance; }
.contents { padding-block: clamp(32px, 6vw, 72px) 40px; border-top: 0; }
.cart-count { display: inline-block; min-width: 1.4em; margin-left: 6px; padding: 1px 5px; border: 1px solid var(--sepia); border-radius: 999px; text-align: center; font-size: 11px; }

.shop-grid a { text-decoration: none; display: block; height: 100%; }
.shop-grid .frame img { mix-blend-mode: multiply; }
.shop-grid .price { display: block; font: 400 13px/1.45 var(--type); color: var(--sepia); margin-top: 4px; }
.chapter .drop { margin-top: 0; }

.product { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(26px, 5vw, 80px); align-items: start; padding-block: clamp(32px, 6vw, 72px); }
.product .plate .frame img { mix-blend-mode: multiply; }
.product .spec { font: 400 14px/1.5 var(--type); color: var(--faded); margin: 0 0 12px; }
.product .specimen { letter-spacing: .12em; margin-bottom: 12px; }
.product .price, .thanks .price, .cart .price { font: 400 22px/1.3 var(--fell); margin: 18px 0; }
.buy { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 14px; align-items: end; background: var(--leaf); border: 1px solid var(--rule); padding: clamp(16px, 2.5vw, 26px); margin: 8px 0 18px; }
.buy .field { margin: 0; }
.buy select, .buy input[type="number"], .cart select { font: 400 17px/1.3 var(--caslon); color: var(--sepia); background: var(--paper); border: 1px solid var(--sepia); border-radius: 0; padding: 10px 12px; width: 100%; }
.buy button { grid-column: 1 / -1; }
.btn[disabled] { background: transparent; color: var(--faded); border-color: var(--rule); cursor: default; }

.thanks, .cart, .policy { max-width: 72ch; padding-block: clamp(32px, 6vw, 72px); }
.order-lines, .cart-lines { list-style: none; margin: 0 0 18px; padding: 0; }
.order-lines li, .cart-lines li { padding-block: 10px; border-bottom: 1px dotted var(--rule); display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; }
.cart-lines .grow { flex: 1; }
.cart-lines button { font: 400 13px/1 var(--type); background: none; border: 0; color: var(--faded); text-decoration: underline; cursor: pointer; padding: 0; }
.cart .totals, .thanks .totals { list-style: none; margin: 18px 0; padding: 0; }
.cart .totals li, .thanks .totals li { display: flex; justify-content: space-between; padding-block: 6px; border-bottom: 1px dotted var(--rule); }
.cart .totals li.total, .thanks .totals li.total { font: 400 22px/1.3 var(--fell); border-bottom: 3px double var(--sepia); }
.cart .country { display: grid; gap: 6px; margin: 18px 0; }
.policy h2 { font: italic 400 26px/1.2 var(--fell); margin: 30px 0 8px; }
.policy p, .policy li { max-width: 68ch; }
.policy table { border-collapse: collapse; width: 100%; font-size: 15px; }
.policy th, .policy td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px dotted var(--rule); vertical-align: top; }
.policy th { font: 400 13px/1.4 var(--type); color: var(--faded); letter-spacing: .06em; }

@media (max-width: 900px) {
  .product { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .buy { grid-template-columns: minmax(0, 1fr); }
}