/* css/shop.css — the public club shop (/shop/…). Built only on main.css's own tokens (--red, --paper, --ink, --muted, --border,
   --radius, --shadow, --panel, --yellow) so light and dark mode (body.dark) work with no extra rules. */

.hhc-shop-main { max-width: var(--max); margin: 0 auto; padding: 1.25rem var(--gutter) 3rem; }
.hhc-shop { color: var(--ink); }
.hhc-shop [hidden] { display: none !important; }
.hhc-shop .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.hhc-shop-nav { display: flex; gap: 1.25rem; flex-wrap: wrap; padding: .25rem 0 .75rem; border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; font-weight: 600; }
.hhc-shop-nav a { color: var(--ink); text-decoration: none; }
.hhc-shop-nav a:hover { color: var(--red); }
.hhc-shop-count { display: inline-block; min-width: 1.4em; padding: 0 .4em; border-radius: 1em; background: var(--red); color: #fff; font-size: .8em; text-align: center; }

.hhc-shop-head h1 { margin: 0 0 .25rem; }
.hhc-shop-head p { margin: 0 0 1.25rem; color: var(--muted); }
.hhc-shop-banner { padding: .65rem .9rem; background: var(--panel); border-left: 4px solid var(--yellow); border-radius: 4px; margin: 0 0 1rem; }
.hhc-shop-meta { color: var(--muted); font-size: .9rem; }
.hhc-shop-back { margin: 0 0 .75rem; }

/* cards */
.hhc-shop-card { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); border-top: 4px solid var(--red); padding: 1.25rem 1.5rem; margin: 0 0 1.25rem; }
.hhc-shop-card h1 { margin-top: 0; }

/* product grid */
.hhc-shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; }
.hhc-shop-tile { display: flex; flex-direction: column; background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; color: var(--ink); text-decoration: none; border-top: 4px solid var(--red); transition: transform .15s ease, box-shadow .15s ease; }
.hhc-shop-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.hhc-shop-tile-img { aspect-ratio: 4 / 3; background: var(--panel); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hhc-shop-tile-img img { width: 100%; height: 100%; object-fit: cover; }
.hhc-shop-noimg { font-weight: 800; letter-spacing: .1em; font-size: 2rem; color: var(--red); opacity: .35; }
.hhc-shop-tile-body { padding: .9rem 1.1rem 1.1rem; }
.hhc-shop-tile-body h2 { margin: 0 0 .25rem; font-size: 1.15rem; }
.hhc-shop-tile-body p { margin: 0 0 .4rem; color: var(--muted); }
.hhc-shop-price { font-weight: 700; color: var(--ink); }
.hhc-shop-tile-body .hhc-shop-price { color: var(--red); }

.hhc-shop-badge { display: inline-block; margin-left: .4rem; padding: .1rem .55rem; border-radius: 1em; background: var(--panel); border: 1px solid var(--border); color: var(--muted); font-size: .78rem; font-weight: 600; vertical-align: middle; }
.hhc-shop-badge-soldout, .hhc-shop-badge-closed { background: var(--red); border-color: var(--red); color: #fff; }
.hhc-shop-badge-soon { background: var(--yellow); border-color: var(--yellow); color: #111; }
.hhc-shop-low { color: var(--red); font-size: .85rem; font-weight: 600; }

/* product page */
.hhc-shop-product { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 860px) { .hhc-shop-product { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } }
.hhc-shop-gallery { background: var(--panel); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); min-height: 140px; display: flex; align-items: center; justify-content: center; }
.hhc-shop-gallery img { width: 100%; height: auto; }
.hhc-shop-info h1 { margin: 0 0 .4rem; }
.hhc-shop-lede { font-size: 1.1rem; color: var(--muted); margin: 0 0 .5rem; }
.hhc-shop-desc { margin-top: 1.5rem; }
.hhc-shop-desc p:first-child { margin-top: 0; }

.hhc-shop-options { display: grid; gap: .6rem; margin: 1rem 0 .5rem; }
.hhc-shop-option { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 1rem; background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); }
.hhc-shop-option.is-out { opacity: .6; }
.hhc-shop-option-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.hhc-shop-option-text span { color: var(--muted); font-size: .9rem; }
.hhc-shop-option-buy { display: flex; align-items: center; gap: .75rem; white-space: nowrap; }
.hhc-shop-vatnote { color: var(--muted); font-size: .85rem; margin: .25rem 0 1rem; }

/* forms */
.hhc-shop input[type=text], .hhc-shop input[type=email], .hhc-shop input[type=tel], .hhc-shop input[type=number], .hhc-shop select, .hhc-shop textarea {
	width: 100%; padding: .6rem .75rem; border: 1px solid var(--border); border-radius: 6px; font: inherit; background: var(--paper); color: var(--ink); }
.hhc-shop input:focus, .hhc-shop select:focus, .hhc-shop textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(227,27,35,.15); }
.hhc-shop-qty input, .hhc-shop-line input[type=number] { width: 4.5rem; text-align: center; }
.hhc-shop-field { margin: 0 0 .85rem; }
.hhc-shop-field label { display: block; font-weight: 600; margin: 0 0 .25rem; }
.hhc-shop-check { display: flex; gap: .6rem; align-items: flex-start; }
.hhc-shop-check input { width: auto; margin-top: .25rem; }
.hhc-shop-check label { margin: 0; font-weight: 500; }
.hhc-shop-fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1.1rem .4rem; margin: 0 0 1rem; }
.hhc-shop-fieldset legend { font-weight: 700; padding: 0 .4rem; }
.hhc-shop-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.hhc-shop-formmsg { color: var(--red); font-weight: 600; min-height: 1.2em; margin: .25rem 0; }
.hhc-shop-terms { background: var(--panel); border-radius: 6px; padding: .6rem .9rem; margin: .5rem 0 .8rem; font-size: .9rem; color: var(--muted); }
.hhc-shop-terms p { margin: .3rem 0; }

/* buttons */
.hhc-shop-btn { display: inline-block; padding: .65rem 1.3rem; border-radius: 6px; border: 2px solid var(--red); background: var(--paper); color: var(--red); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; transition: background-color .15s ease; }
.hhc-shop-btn:hover { background: rgba(227,27,35,.08); }
.hhc-shop-btn-primary { background: var(--red); color: #fff; }
.hhc-shop-btn-primary:hover { background: var(--red-dark); }
.hhc-shop-btn[disabled] { opacity: .5; cursor: not-allowed; }
.hhc-shop-pay { width: 100%; font-size: 1.1rem; padding: .85rem 1rem; }
@media (min-width: 640px) { .hhc-shop-pay { width: auto; min-width: 16rem; } }
.hhc-shop-link { background: none; border: 0; padding: 0; color: var(--red); font: inherit; text-decoration: underline; cursor: pointer; }

/* basket lines */
.hhc-shop-lines { display: grid; gap: .6rem; margin-bottom: 1.25rem; }
.hhc-shop-line { display: grid; grid-template-columns: 1fr auto auto auto; gap: .75rem; align-items: center; padding: .6rem .8rem; border: 1px solid var(--border); border-radius: var(--radius); }
.hhc-shop-line.has-img { grid-template-columns: auto 1fr auto auto auto; }
.hhc-shop-line.is-out { border-color: var(--red); }
.hhc-shop-line img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; }
.hhc-shop-line-text { display: flex; flex-direction: column; min-width: 0; }
.hhc-shop-line-text a { font-weight: 700; color: var(--ink); }
.hhc-shop-total { font-size: 1.25rem; margin: 1rem 0 .25rem; }
@media (max-width: 639px) {
	.hhc-shop-line, .hhc-shop-line.has-img { grid-template-columns: 1fr auto; }
	.hhc-shop-line img { display: none; }
	.hhc-shop-line-text { grid-column: 1 / -1; }
}

/* order page */
.hhc-shop-status { display: inline-block; padding: .25rem .8rem; border-radius: 1em; font-weight: 700; background: var(--panel); border: 1px solid var(--border); }
.hhc-shop-status-paid { background: #1f8f4a; border-color: #1f8f4a; color: #fff; }
.hhc-shop-status-pending { background: var(--yellow); border-color: var(--yellow); color: #111; }
.hhc-shop-status-cancelled, .hhc-shop-status-refunded, .hhc-shop-status-part_refunded { background: var(--red); border-color: var(--red); color: #fff; }
.hhc-shop-table-wrap { overflow-x: auto; }
.hhc-shop-table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.hhc-shop-table th, .hhc-shop-table td { padding: .6rem .5rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.hhc-shop-table .num { text-align: right; white-space: nowrap; }
.hhc-shop-table tfoot th { border-bottom: 0; }