/*
Theme Name: Hall of Kits
Theme URI: https://hallofkits.example
Author: Hall of Kits
Description: Editorial storefront theme for a curated football-shirt archive. Built on the Hall of Kits design system (cream and ink, Teko display, Barlow Condensed labels, Inter body) with full WooCommerce support including archive-first product cards, condition grading and signed/collector provenance.
Version: 1.4.2
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hall-of-kits
Tags: e-commerce, editorial, custom-menu, featured-images, translation-ready, accessibility-ready

Stylesheets live in assets/css/ and are enqueued separately so they stay in
the same order as the design system: tokens -> global -> primitives ->
sections -> product -> shop -> about -> stories.
*/

/* ==========================================================================
   WooCommerce overrides
   --------------------------------------------------------------------------
   WooCommerce's own stylesheet is left enqueued so cart, checkout and account
   keep working out of the box. These rules neutralise the parts of it that
   fight the design system's grid, the float-based loop and the split product
   layout, without touching the rest.
   ========================================================================== */

.woocommerce ul.products.product-grid,
.woocommerce-page ul.products.product-grid {
  display: grid;
  margin: 0;
  padding: 0;
}

.woocommerce ul.products.product-grid::before,
.woocommerce ul.products.product-grid::after {
  content: none;
}

.woocommerce ul.products.product-grid li.product,
.woocommerce-page ul.products.product-grid li.product {
  width: auto;
  float: none;
  clear: none;
  margin: 0;
  padding: 0;
}

/* The theme owns the product-card title and price typography. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price {
  margin: 0;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del {
  opacity: 0.55;
  font-size: 0.6em;
}

.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins {
  text-decoration: none;
}

/* Single product: the theme lays out the 7/5 split, so undo the floats. */
.woocommerce div.product.pdp .woocommerce-product-gallery,
.woocommerce div.product.pdp .summary,
.woocommerce div.product.pdp div.images,
.woocommerce div.product.pdp div.summary {
  width: 100%;
  float: none;
  margin: 0;
}

.woocommerce div.product.pdp .woocommerce-product-gallery__image img {
  border: var(--rule);
}

.woocommerce div.product .quantity {
  margin-bottom: var(--space-4);
}

/* Add-to-cart button inherits the primary button treatment. */
.woocommerce div.product form.cart .button,
.woocommerce div.product form.cart button[type="submit"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-5);
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  background: var(--color-ink);
  color: var(--color-cream);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-md);
  transition:
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.woocommerce div.product form.cart .button:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 0 0 var(--color-red);
  background: var(--color-ink);
}

.woocommerce div.product form.cart .button:disabled,
.woocommerce div.product form.cart .button.disabled {
  opacity: 0.45;
  transform: none;
  box-shadow: none;
}

/* Variation selector styled as the design system's size buttons. */
.woocommerce div.product form.cart .variations {
  width: 100%;
  margin-bottom: var(--space-5);
  border: 0;
}

.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
  display: block;
  padding: 0 0 var(--space-3);
  border: 0;
}

.woocommerce div.product form.cart .variations label {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: var(--label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.woocommerce div.product form.cart .variations select {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-4);
  font-family: var(--font-body);
  font-size: var(--body);
  background: var(--color-paper);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-md);
}

.woocommerce div.product .woocommerce-variation-price {
  margin-bottom: var(--space-4);
}

/* Catalogue ordering select. */
.woocommerce .woocommerce-ordering select,
.shop__sort select {
  min-height: 44px;
  padding: 0 var(--space-3);
  font-family: var(--font-body);
  font-size: var(--body-sm);
  background: var(--color-paper);
  color: var(--color-ink);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.woocommerce .woocommerce-ordering {
  margin: 0;
  float: none;
}

/* Notices. Never colour alone, each keeps its written message. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  background: var(--surface);
  border: var(--rule);
  border-left: 4px solid var(--color-grass);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  list-style: none;
}

.woocommerce-info {
  border-left-color: var(--color-blue);
}

.woocommerce-error {
  border-left-color: var(--color-red);
  color: var(--color-red-text);
}

/* Pagination. */
.woocommerce nav.woocommerce-pagination ul,
.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-7);
  border: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--space-3);
  font-family: var(--font-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.pagination .page-numbers.current {
  background: var(--color-ink);
  color: var(--color-cream);
  border-color: var(--color-ink);
}

/* ==========================================================================
   Theme-only components
   ========================================================================== */

/* Quick-add wraps each control in a form; keep the flex layout intact. */
.quick-add__form,
.quick-add__row form {
  display: contents;
}

/* Filter options are links so every state is a shareable URL. */
a.filter-option {
  color: inherit;
  text-decoration: none;
}

a.filter-option:hover .filter-option__label {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.filter-option__box.is-checked {
  background: var(--color-ink);
  color: var(--color-cream);
}

/* Search panel */
.search-panel {
  padding-block: var(--space-5);
  background: var(--surface);
  border-bottom: var(--rule);
}

.search-panel__label {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--text-muted);
}

.search-panel__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.search-panel__row .input {
  flex: 1 1 240px;
}

/* Single story */
.story__head {
  padding-block: var(--space-8) var(--space-6);
}

.story__kicker {
  color: var(--color-red-text);
}

.story__title {
  margin-top: var(--space-4);
  font-size: var(--display-lg);
  max-width: 20ch;
}

.story__standfirst {
  margin-top: var(--space-5);
  max-width: 52ch;
  color: var(--text-muted);
}

.story__date {
  margin-top: var(--space-4);
}

.story__figure {
  margin: 0 auto var(--space-7);
}

.story__shot {
  border: var(--rule);
}

.story__credit {
  margin-top: var(--space-2);
}

.story__body {
  max-width: 68ch;
  padding-bottom: var(--space-9);
  font-size: var(--body-lg);
}

.story__body > * + * {
  margin-top: var(--space-5);
}

.story__body h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--heading-md);
  line-height: 0.95;
  text-transform: uppercase;
}

.story__body h3 {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.story__body blockquote {
  padding-left: var(--space-5);
  border-left: 3px solid var(--color-red);
  font-size: 1.25rem;
}

.story__body a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-article__body {
  max-width: 68ch;
}

.page-article__body > * + * {
  margin-top: var(--space-5);
}