/*
Theme Name: Counterfeit
Theme URI: https://thefakeapparel.com
Description: The Fake Apparel — Counterfeit. Quiet room, loud objects. White ground, black-bordered plates with hard shadows, and a holographic sticker certifying the piece is not authentic. Ported from the Astro build; loads none of Storefront's CSS.
Author: The Fake Apparel
Template: storefront
Version: 2.0.3
License: GNU General Public License v2 or later
Text Domain: counterfeit
*/

/* ──────────────────────────────────────────────────────────────────────
   COUNTERFEIT

   This is the whole design. Storefront's stylesheets are dequeued in
   functions.php, so nothing here is an override of a parent theme — every
   rule below is a first-class decision. Underneath sits only WooCommerce's
   structural CSS (layout + smallscreen), which supplies responsive cart
   tables and nothing visual.

   THE SYSTEM, in three rules:

     1. CHROME headings are uppercase, heavy, on one scale (--h1/--h2/--h3).
        Every H1 on the site is the same size, whatever page it is on.
     2. META is always mono, small, wide-tracked, uppercase. Dates, authors,
        labels, categories, counts, serials, breadcrumbs — same treatment.
     3. CONTROLS are always the black plate with the red hard shadow.
        A search button is the same object as Add to Cart.

   Prose inside .entry-content is exempt from rule 1: long-form headings stay
   sentence case, because uppercase is unreadable at paragraph length. That is
   the one intentional difference in the system, not an oversight.
   ────────────────────────────────────────────────────────────────────── */

:root {
  /* Ground and plates are both pure white; the black borders and hard shadows
     do all the framing, so the page reads as a line drawing. Suits a brand
     built on documents and certificates. */
  --ground: #ffffff;
  --plate: #ffffff;
  --ink: #111110;

  /* --ink-soft is the floor for TEXT: 6.5:1 on white, so mono meta at 10px
     still clears WCAG AA. --ink-faint is only 3.1:1 and is therefore reserved
     for hairlines and rules — never for words. */
  --ink-soft: #5e5e58;
  --ink-faint: #93938c;
  --line: #dcdcd6;
  --red: #c7302a;

  --holo: conic-gradient(from 210deg, #c9b6ff, #a8e5ff, #bdf5cd, #ffe9ad, #ffc2dd, #c9b6ff);
  --holo-hover: conic-gradient(from 30deg, #ff9ecd, #c9b6ff, #a8e5ff, #ffe9ad, #ff9ecd);

  /* Ships everywhere, no webfont request — matters on 4G. */
  --sans: Helvetica, Arial, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, Consolas, "Courier New", monospace;

  /* One type scale for every chrome heading on every page. */
  --h1: clamp(2rem, 5.2vw, 3.2rem);
  --h2: clamp(1.4rem, 3.4vw, 2rem);
  --h3: clamp(1.08rem, 2.2vw, 1.35rem);

  --meta-size: 0.66rem;
  --meta-track: 0.14em;

  /* One logo scale. Hero and coming-soon are the same size on purpose — same
     object, two pages. Capped well under the display ceiling. */
  --logo-header: clamp(1.4rem, 3.2vw, 1.9rem);
  --logo-hero: clamp(2.6rem, 9vw, 5.5rem);

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --gap-section: clamp(2rem, 6vw, 3.5rem);
  --wrap: 1180px;

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* Semantic stacking order — never arbitrary numbers. */
  --z-sticker: 2;
  --z-header: 50;
}

/* ── reset & base ───────────────────────────────────────────────────── */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; border-radius: 0; }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--red); }

button { font-family: inherit; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ── layout ─────────────────────────────────────────────────────────── */

.col-full {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

#content.site-content { padding-block: var(--gap-section); }

.content-area,
#primary,
.site-main { width: 100%; }

main { min-height: 55vh; }

/* WooCommerce's layout sheet floats these into percentage columns. Grid owns
   the columns here, and an uncleared float in one region silently squeezes
   every region after it. */
.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-1,
.woocommerce-page .col2-set .col-2,
#customer_details .col-1,
#customer_details .col-2,
#order_review,
.woocommerce-checkout-review-order,
.cart-collaterals,
.cart-collaterals .cart_totals,
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content {
  float: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* ── typography ─────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5em;
  font-family: var(--sans);
  font-weight: 900;
  /* -0.03em is tight for a grotesque display face without letters touching. */
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--ink);
  text-wrap: balance;
}

.page-title,
.woocommerce-products-header__title,
.entry-title,
.comments-title,
.comment-reply-title,
#order_review_heading,
#customer_details h3,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,
.cart_totals h2,
.cross-sells h2,
.related h2,
.upsells h2,
.woocommerce-order-details__title,
.woocommerce-column__title,
.woocommerce-Address-title h3 { text-transform: uppercase; }

.page-title,
.woocommerce-products-header__title,
h1.entry-title,
.error-404 .page-title,
.single-product div.product .product_title { font-size: var(--h1); }

h2.entry-title,
.comments-title,
.cart_totals h2,
.related h2,
.upsells h2,
.cross-sells h2 { font-size: var(--h2); }

.comment-reply-title,
#order_review_heading,
#customer_details h3,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,
.woocommerce-order-details__title,
.woocommerce-column__title { font-size: var(--h3); }

/* A link inside a heading is still the heading. Without this a link colour or
   weight silently un-bolds every linked title. */
h1 a, h2 a, h3 a, h4 a,
.entry-title a,
.page-title a {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-decoration: none;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, .entry-title a:hover { color: var(--red); }

p { margin: 0 0 1.1em; }

/* ── meta: one treatment, everywhere ────────────────────────────────── */

.posted-on,
.post-author,
.post-comments,
.entry-meta,
.entry-taxonomy,
.comment-metadata,
.comment-author .says,
.comment-notes,
.comment-form label,
.form-row > label,
.woocommerce-form__label-for-checkbox span,
.woocommerce-MyAccount-navigation a,
.wc_payment_methods label,
.product_meta,
.woocommerce-breadcrumb,
.counterfeit-serial,
.counterfeit-lot,
.counterfeit-tag,
.site-info,
.site-description,
.woocommerce-result-count,
.comment-reply-link,
.nav-links,
.woocommerce-pagination,
.main-navigation a,
.secondary-navigation a,
.primary-navigation a,
.site-header-cart .cart-contents,
.woocommerce-ordering select,
table.shop_table th {
  font-family: var(--mono);
  font-size: var(--meta-size);
  letter-spacing: var(--meta-track);
  text-transform: uppercase;
  line-height: 1.7;
}

/* Meta is grey, but never below 4.5:1 — see the token note above. */
.posted-on,
.post-author,
.post-comments,
.entry-meta,
.entry-taxonomy,
.comment-metadata,
.comment-notes,
.woocommerce-result-count,
.product_meta,
.woocommerce-breadcrumb,
.counterfeit-serial,
.counterfeit-lot,
.counterfeit-tag,
.site-info,
.site-description,
.comment-form label,
.form-row > label,
table.shop_table th { color: var(--ink-soft); }

.comment-form label,
.form-row > label { display: block; margin-bottom: 0.45em; }

.required, abbr.required { color: var(--red); text-decoration: none; border: 0; }

/* ── controls: one object ───────────────────────────────────────────── */

.button,
button,
input[type="submit"],
input[type="button"],
.added_to_cart,
.single_add_to_cart_button,
.woocommerce-button,
.checkout-button,
#place_order,
.search-submit,
.woocommerce-product-search button {
  display: inline-block;
  background-color: var(--ink);
  color: var(--ground);
  border: 2.5px solid var(--ink);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--red);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: var(--meta-track);
  text-transform: uppercase;
  line-height: 1.3;
  padding: 0.85em 1.4em;
  cursor: pointer;
  text-align: center;
  transition: transform 0.14s var(--ease), box-shadow 0.14s var(--ease);
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.added_to_cart:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover,
#place_order:hover,
.search-submit:hover {
  background-color: var(--ink);
  color: var(--ground);
  transform: translate(-1px, -1px);
  box-shadow: 6px 6px 0 var(--red);
}

.button:active,
button:active,
input[type="submit"]:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--red); }

.button:disabled,
button:disabled { opacity: 0.5; cursor: default; box-shadow: none; }

/* The tagline chip is a button element but not a control. */
.counterfeit-swap { box-shadow: none; border-radius: 0; padding: 0; text-align: inherit; }

/* ── forms ──────────────────────────────────────────────────────────── */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="url"],
textarea,
select {
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--plate);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  padding: 0.7em 0.8em;
  box-shadow: none;
  max-width: 100%;
}

textarea { width: 100%; display: block; }
select { font-family: var(--mono); cursor: pointer; }

.form-row { margin-bottom: 1rem; }
.form-row .input-text,
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row select { width: 100%; }
.woocommerce-input-wrapper { display: block; width: 100%; }

.woocommerce-form__label-for-checkbox,
label.checkbox { display: inline-flex; align-items: center; gap: 0.6em; }
.woocommerce-form__input-checkbox,
.input-checkbox { float: none; margin: 0; width: auto; }

.quantity input.qty { width: 4.5em; text-align: center; font-family: var(--mono); }

/* ── header ─────────────────────────────────────────────────────────── */

.site-header {
  background: var(--ground);
  border-bottom: 1px solid var(--line);
  padding-block: 1.2rem;
  position: relative;
  z-index: var(--z-header);
}

.site-header .col-full {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem 1.4rem;
}

.site-branding { display: flex; flex-direction: column; gap: 0.15rem; margin: 0; }

/* The knock-out mark: white fill, black stroke, red offset. */
.site-title { margin: 0; }
.site-title a,
.site-branding .site-title a {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 900;
  font-size: var(--logo-header);
  /* -0.04em is the floor; tighter and the letterforms collide. */
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--ground);
  -webkit-text-stroke: 1.4px var(--ink);
  text-shadow: 2.5px 2.5px 0 var(--red);
}
.site-title a:hover { color: var(--ground); }

.site-description { margin: 0; }
.main-navigation, .secondary-navigation { margin: 0; }

/* storefront_primary_navigation() prints TWO menus — .primary-navigation and
   .handheld-navigation — and relies on the parent's CSS to hide one at each
   breakpoint. That CSS is gone, so without this both render and every nav link
   appears twice. Only the primary menu is used here.

   The toggle goes with it: the navigation is a handful of links that wrap on
   their own and is always visible, so the button would toggle nothing. */
.handheld-navigation,
.menu-toggle { display: none; }

.main-navigation ul,
.secondary-navigation ul,
.primary-navigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-navigation li,
.secondary-navigation li { margin: 0; }

/* Sub-menus would stack open without the parent's dropdown CSS. */
.main-navigation ul ul,
.secondary-navigation ul ul { display: none; }

.site-header-cart { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; }

/* Storefront ships the full mini-cart inside the header and keeps it hidden
   until hover using its own CSS. With that CSS gone the entire basket — item
   rows, thumbnail, subtotal, two buttons — renders inline and swamps the
   header. The cart link itself still goes to the basket, so the dropdown is
   simply not rendered. Restore it by deleting this rule and writing a real
   hover/focus panel. */
.site-header-cart .widget_shopping_cart,
.site-header-cart .cart-contents + *,
.site-header-cart li + li { display: none; }
.site-header-cart .cart-contents { color: var(--ink); }
.site-header-cart .cart-contents:hover { color: var(--red); }

/* ── the front-page hero ────────────────────────────────────────────── */

.counterfeit-hero { padding-block: clamp(2.5rem, 8vw, 4.5rem) clamp(1.5rem, 4vw, 2.5rem); }

.counterfeit-lot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 clamp(2rem, 7vw, 3.5rem);
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
}

.counterfeit-logo-stack {
  margin: 0;
  font-family: var(--sans);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 0.84;
  color: var(--ink);
}
.counterfeit-logo-stack span { display: block; }
.counterfeit-logo-stack .knock {
  color: var(--ground);
  -webkit-text-stroke: 1.6px var(--ink);
  text-shadow: 2.5px 2.5px 0 var(--red);
}

.counterfeit-hero .counterfeit-logo-stack { font-size: var(--logo-hero); }

.counterfeit-tag { margin: clamp(1.5rem, 5vw, 2.5rem) 0 0; line-height: 2; }

/* The brand is called Fake and the tagline claims Real. Hover and it admits
   it. Both words are four characters in mono, so the chip is exactly the same
   width in either state and the line never reflows. The outline is an inset
   shadow rather than a border for the same reason — a border would add 3px. */
.counterfeit-swap {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  vertical-align: baseline;
  border: 0;
  margin: 0;
  padding: 0.15em 0.45em;
  cursor: pointer;
  background: var(--red);
  color: #fff;
  box-shadow: inset 0 0 0 1.5px var(--red);
  transition: none;
}
.counterfeit-swap:hover,
.counterfeit-swap:focus {
  background: var(--ground);
  color: var(--red);
  transform: none;
  box-shadow: inset 0 0 0 1.5px var(--red);
}
.counterfeit-swap .swap-b { display: none; }
.counterfeit-swap:hover .swap-a,
.counterfeit-swap:focus .swap-a { display: none; }
.counterfeit-swap:hover .swap-b,
.counterfeit-swap:focus .swap-b { display: inline; }
/* The global focus ring is red, which is invisible on a red chip. */
.counterfeit-swap:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.counterfeit-hero-cta { margin-top: 2rem; }

/* ── the sorting bar (one per page — see functions.php) ─────────────── */

.storefront-sorting {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.2rem;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 var(--gap-section);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}
.storefront-sorting::before,
.storefront-sorting::after { content: none; }

/* WooCommerce prints the children as: notices wrapper, then the ordering form,
   then the result count — so a space-between row puts the sort control on the
   LEFT and the count on the right, which is backwards. `order` fixes the
   reading order without touching the markup, and the notices wrapper is empty
   until there is a notice, so it must not hold a slot in the row. */
.storefront-sorting .woocommerce-result-count { order: 1; }
.storefront-sorting .woocommerce-ordering { order: 2; }
.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-result-count, .woocommerce-ordering { margin: 0; }

/* Storefront's header search widget is removed in functions.php; this is a
   belt-and-braces catch if a search widget is ever added back to the header. */
.site-header .site-search { display: none; }
.woocommerce-ordering select {
  font-size: var(--meta-size);
  letter-spacing: var(--meta-track);
  text-transform: uppercase;
  padding: 0.6em 0.8em;
}

/* ── the shop grid: the loud objects ────────────────────────────────── */

/* Grid, not WooCommerce's percentage floats. Rows are equal height by
   construction, so a tall photo or a two-line title can never knock the row
   out of alignment. */
.woocommerce ul.products,
ul.products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.4rem, 4vw, 2.4rem);
  list-style: none;
  margin: 0;
  padding: 0;
  clear: both;
}
/* Kill WooCommerce's clearfixes — the root cause of a whole class of bug.
   Woo clears floats with `::before/::after { content:" "; display:table }` on
   every container it lays out. This theme makes several of those containers
   grid or flex, and in a grid or flex container a generated pseudo-element is
   a real ITEM: it takes a cell. That is what pushed the first product into
   column two, and Billing Details into the right half of the checkout with an
   empty column beside it.

   !important because Woo scopes some of these with #content, and an ID beats
   any selector we can write. Listed explicitly rather than with a wildcard so
   it is obvious which containers are affected. */
.woocommerce ul.products::before, .woocommerce ul.products::after,
.woocommerce-page ul.products::before, .woocommerce-page ul.products::after,
ul.products::before, ul.products::after,
.woocommerce .col2-set::before, .woocommerce .col2-set::after,
.woocommerce-page .col2-set::before, .woocommerce-page .col2-set::after,
#customer_details::before, #customer_details::after,
.woocommerce .woocommerce-billing-fields::before, .woocommerce .woocommerce-billing-fields::after,
.woocommerce .woocommerce-shipping-fields::before, .woocommerce .woocommerce-shipping-fields::after,
.woocommerce .woocommerce-pagination ul.page-numbers::before,
.woocommerce .woocommerce-pagination ul.page-numbers::after,
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after,
.woocommerce #content div.product .woocommerce-tabs ul.tabs::before,
.woocommerce #content div.product .woocommerce-tabs ul.tabs::after,
.woocommerce .cart-collaterals::before, .woocommerce .cart-collaterals::after,
.woocommerce form .form-row::before, .woocommerce form .form-row::after,
.single-product div.product::before, .single-product div.product::after {
  content: none !important;
  display: none !important;
}

@media (min-width: 700px) {
  ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
  ul.products,
  ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
}

.woocommerce ul.products li.product,
ul.products li.product {
  /* Undo WooCommerce's float grid; grid places these now. */
  float: none;
  width: auto;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--plate);
  border: 2.5px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 0.7em;
  position: relative;
  transition: transform 0.14s var(--ease), box-shadow 0.14s var(--ease), rotate 0.14s var(--ease);
}

/* Alternating tilt. nth-of-type so it survives WooCommerce's first/last
   helper classes, which nth-child would trip over. */
ul.products li.product:nth-of-type(odd) { rotate: -1.3deg; }
ul.products li.product:nth-of-type(even) { rotate: 1.1deg; }

ul.products li.product:hover,
ul.products li.product:focus-within {
  rotate: 0deg;
  transform: translate(-1px, -1px);
  box-shadow: 6px 6px 0 var(--red);
}

/* The link wraps image, title, serial and price; the button is its sibling.
   Letting the link grow pins the button to the bottom of every card. */
ul.products li.product > a:first-of-type,
ul.products li.product .woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* Photos arrive at whatever ratio they were shot at; square-crop them so the
   grid reads as a catalogue rather than a scrapbook. */
ul.products li.product img {
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
  border: 1.5px solid var(--ink);
  background: var(--plate);
  margin-bottom: 0.7em;
}

ul.products li.product .woocommerce-loop-product__title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  text-transform: none;
  margin: 0 0 0.15em;
}

.counterfeit-serial { display: block; margin: 0 0 0.35em; }

ul.products li.product .price {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
  margin-top: auto;
  padding-top: 0.35em;
}
ul.products li.product .price del { color: var(--ink-soft); margin-right: 0.4em; }
ul.products li.product .price ins { text-decoration: none; }

ul.products li.product .button { margin-top: 0.8em; align-self: flex-start; }

/* The authenticity sticker — says AUTH, flips to FAKE. The signature. */
ul.products li.product::before,
ul.products li.product::after {
  position: absolute;
  top: -11px;
  right: -11px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
  pointer-events: none;
  z-index: var(--z-sticker);
}
ul.products li.product::before { content: "AUTH"; background: var(--holo); }
ul.products li.product::after {
  content: "FAKE";
  background: var(--holo-hover);
  opacity: 0;
  transition: opacity 0.12s var(--ease);
}
ul.products li.product:hover::after,
ul.products li.product:focus-within::after { opacity: 1; }

/* Pinned, not in flow: as a flow item the flash pushed a discounted card's
   title, price and button down and broke the row's alignment. Left, because
   the hologram owns the top-right corner. */
.onsale {
  position: absolute;
  top: 0.7em;
  left: 0.7em;
  right: auto;
  margin: 0;
  z-index: var(--z-sticker);
  background: var(--red);
  color: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 0;
  font-family: var(--mono);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  min-height: auto;
  min-width: auto;
  padding: 0.3em 0.55em;
  line-height: 1.4;
}

/* ── single product ─────────────────────────────────────────────────── */

.single-product div.product {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 5vw, 3rem);
  align-items: start;
}

@media (min-width: 768px) {
  .single-product div.product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .single-product div.product .woocommerce-tabs,
  .single-product div.product .related,
  .single-product div.product .upsells { grid-column: 1 / -1; }
}

.single-product div.product .woocommerce-product-gallery,
.single-product div.product .summary { float: none; width: auto; margin: 0; }

/* WooCommerce sizes these as `div.images { width:48%; float:left }` and
   `div.summary { width:48%; float:right }`, so inside a grid column each one
   renders at half its cell. Grid owns the two columns; these fill them.

   !important is load-bearing here, not laziness: WooCommerce scopes the rule
   with an ID — `.woocommerce #content div.product div.images` — and an ID
   outranks any number of classes, so no selector we can write wins on
   specificity alone. This is the one place in the theme that needs it. */
.woocommerce div.product div.images,
.single-product div.product div.images,
.single-product div.product .woocommerce-product-gallery,
.single-product div.product .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.summary,
.single-product div.product .summary {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
}

.single-product div.product .woocommerce-product-gallery img {
  width: 100%;
  border: 2.5px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  background: var(--plate);
}

.single-product div.product .summary .price,
.single-product div.product p.price {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--ink);
}

.woocommerce-breadcrumb { margin-bottom: 1.2rem; }
.woocommerce-breadcrumb a { color: var(--ink-soft); }
.woocommerce-breadcrumb a:hover { color: var(--red); }

.product_meta { border-top: 1px solid var(--line); padding-top: 1em; margin-top: 1.2em; }

.woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  border-bottom: 1px solid var(--line);
}
.woocommerce-tabs ul.tabs li { border: 0; border-radius: 0; background: none; margin: 0; padding: 0; }
.woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 0.8em 1.1em;
  font-family: var(--mono);
  font-size: var(--meta-size);
  letter-spacing: var(--meta-track);
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 2.5px solid transparent;
}
.woocommerce-tabs ul.tabs li.active a { color: var(--ink); border-bottom-color: var(--red); }

/* ── tables: cart, checkout, orders ─────────────────────────────────── */

table.shop_table,
table.cart,
.woocommerce-checkout-review-order-table,
.woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
  border: 2.5px solid var(--ink);
  border-radius: 0;
  margin-bottom: var(--gap-section);
  background: var(--plate);
}

table.shop_table th,
table.shop_table td {
  padding: 0.9em 1em;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
table.shop_table tfoot th,
table.shop_table tfoot td { font-weight: 700; }
table.shop_table tr:last-child td { border-bottom: 0; }

.woocommerce-Price-amount { font-family: var(--mono); font-weight: 700; }

/* ── notices ────────────────────────────────────────────────────────── */

.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-noreviews {
  border: 2.5px solid var(--ink);
  border-radius: 0;
  background: var(--plate);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--red);
  padding: 1em 1.2em;
  margin: 0 0 var(--gap-section);
  list-style: none;
}
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before { content: none; }

/* ── checkout & account ─────────────────────────────────────────────── */

#customer_details.col2-set,
.woocommerce .col2-set {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  margin-bottom: var(--gap-section);
}
@media (min-width: 768px) {
  #customer_details.col2-set,
  .woocommerce .col2-set { grid-template-columns: 1fr 1fr; }
}

.wc_payment_methods {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  border: 2.5px solid var(--ink);
}
.wc_payment_methods li { padding: 0.9em 1em; border-bottom: 1px solid var(--line); }
.wc_payment_methods li:last-child { border-bottom: 0; }
.wc_payment_methods .payment_box {
  background: var(--ground);
  border: 0;
  border-top: 1px dashed var(--line);
  margin: 0.7em 0 0;
  padding: 0.7em 0 0;
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink-soft);
}
.wc_payment_methods .payment_box::before { display: none; }

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0 0 var(--gap-section);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
}
.woocommerce-MyAccount-navigation-link a {
  display: block;
  padding: 0.8em 1.1em;
  color: var(--ink-soft);
  border-bottom: 2.5px solid transparent;
}
.woocommerce-MyAccount-navigation-link a:hover { color: var(--red); }
.woocommerce-MyAccount-navigation-link.is-active a { color: var(--ink); border-bottom-color: var(--red); }

/* ── blog & prose ───────────────────────────────────────────────────── */

.page-header {
  margin-bottom: var(--gap-section);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}

.hentry,
article.post {
  margin-bottom: var(--gap-section);
  padding-bottom: var(--gap-section);
  border-bottom: 1px solid var(--line);
}

.entry-header .posted-on,
.entry-header .post-author,
.entry-header .post-comments { display: inline; }
.entry-header .entry-title { margin-top: 0.35em; }

.entry-content { max-width: 68ch; text-wrap: pretty; }
.entry-content a { border-bottom: 1.5px solid var(--red); }
.entry-content a:hover { color: var(--red); }

/* Prose headings stay sentence case — see the note at the top. */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
  text-transform: none;
  line-height: 1.1;
  margin-top: 1.8em;
  margin-bottom: 0.5em;
}
.entry-content h1 { font-size: var(--h1); }
.entry-content h2 { font-size: var(--h2); }
.entry-content h3 { font-size: var(--h3); }

/* A pull-quote is a plate like everything else, not a coloured side rule. */
.entry-content blockquote {
  margin: 1.8em 0;
  padding: 1.1em 1.2em;
  border: 2.5px solid var(--ink);
  box-shadow: 4px 4px 0 var(--red);
  background: var(--plate);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}
.entry-content blockquote p:last-child { margin-bottom: 0; }

.entry-content ul,
.entry-content ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.entry-content li { margin-bottom: 0.35em; }

.entry-taxonomy { margin-top: 1.2rem; }

/* ── comments ───────────────────────────────────────────────────────── */

.comments-area { margin-top: var(--gap-section); }

.comment-list { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.comment-list ol.children { list-style: none; margin: 1.5rem 0 0 clamp(1rem, 4vw, 2.5rem); padding: 0; }

.comment-list .comment-body,
.comment-list article.comment-body {
  border: 2.5px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  background: var(--plate);
  padding: 1.1rem 1.2rem;
  margin-bottom: 1.6rem;
  width: auto;
  float: none;
}

.comment-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.7rem;
  width: auto;
  float: none;
  text-align: left;
  margin-bottom: 0.4rem;
}
.comment-author .fn {
  font-family: var(--sans);
  font-weight: 900;
  font-style: normal;
  letter-spacing: -0.02em;
  text-transform: none;
}
.comment-content { margin: 0.6rem 0 0; width: auto; float: none; }
.comment-content p:last-child { margin-bottom: 0; }

.comment-reply-link {
  display: inline-block;
  margin-top: 0.8rem;
  color: var(--ink);
  border-bottom: 1.5px solid var(--red);
}
.comment-reply-link:hover { color: var(--red); }
.comment-list .reply { text-align: left; clear: none; }

.comment-respond,
#respond {
  clear: both;
  background: var(--plate);
  border: 2.5px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  padding: clamp(1.1rem, 3vw, 1.6rem);
  margin-top: var(--gap-section);
  width: auto;
  float: none;
}
.comment-form p { margin-bottom: 1rem; }

/* ── pagination ─────────────────────────────────────────────────────── */

.woocommerce-pagination,
.navigation.pagination { float: none; clear: both; width: 100%; }

.nav-links,
.woocommerce-pagination ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  border: 0;
  margin: var(--gap-section) 0 0;
  padding: 0;
  list-style: none;
}
.woocommerce-pagination ul.page-numbers li { border: 0; margin: 0; overflow: visible; }

.page-numbers {
  display: grid;
  place-items: center;
  min-width: 2.4em;
  height: 2.4em;
  padding: 0 0.6em;
  border: 1.5px solid var(--line);
  background: var(--plate);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--meta-size);
  letter-spacing: var(--meta-track);
}
a.page-numbers:hover { border-color: var(--ink); box-shadow: 3px 3px 0 var(--red); }
.page-numbers.current { background: var(--ink); border-color: var(--ink); color: var(--ground); }

/* ── search & 404 ───────────────────────────────────────────────────── */

.woocommerce-product-search,
.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: stretch;
  margin-bottom: var(--gap-section);
}
.woocommerce-product-search .search-field,
.search-form .search-field {
  flex: 1 1 12rem;
  min-width: 0;
  font-family: var(--mono);
  font-size: 0.8rem;
}
.search-form label { flex: 1 1 12rem; display: flex; margin: 0; }
.search-form label .search-field { width: 100%; }

.error-404 .page-header { border: 0; padding: 0; margin-bottom: 1rem; }
.error-404 .page-content { max-width: 46ch; }

/* ── footer ─────────────────────────────────────────────────────────── */

.site-footer {
  background: var(--ground);
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  padding-block: var(--gap-section);
  margin-top: var(--gap-section);
}
.site-footer a { color: var(--ink); }
.site-footer a:hover { color: var(--red); }
.site-info { margin: 0; }

/* ── coming soon ────────────────────────────────────────────────────── */

/* WooCommerce includes coming-soon.php raw and exits, so this styles a whole
   document. The GIF is square (640x640) and meme framing puts the subject dead
   centre, so it survives a `cover` crop on a wide viewport. */
body.counterfeit-soon {
  min-height: 100svh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: var(--ink) url("assets/coming-soon.gif") center center / cover no-repeat;
}
body.counterfeit-soon::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(17, 17, 16, 0.55);
}
.counterfeit-soon-inner { position: relative; z-index: 1; text-align: center; }
body.counterfeit-soon .counterfeit-logo-stack { font-size: var(--logo-hero); color: #fff; }
body.counterfeit-soon .counterfeit-logo-stack .knock {
  color: transparent;
  -webkit-text-stroke: 1.6px #fff;
  text-shadow: 3px 3px 0 var(--red);
}
.counterfeit-soon-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  justify-content: center;
  margin: 2rem 0 0;
  font-family: var(--mono);
  font-size: var(--meta-size);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.counterfeit-soon-links a { color: #fff; }
.counterfeit-soon-links a:hover { color: var(--red); }

@media (max-width: 480px) {
  body.counterfeit-soon { background-size: auto 62%; background-position: center 22%; }
}

/* ── motion ─────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  ul.products li.product { rotate: 0deg; }
  ul.products li.product:hover { transform: none; }
}