/* =========================================================================
   MoshTee sections - product page + site chrome
   Ported from imaginatio-child/style.css and RETOKENIZED.

   imaginatio runs haru_dark_mode=0 (light page, gold accent). MoshTee runs
   haru_dark_mode=1 (INK page, blood accent). Copying imaginatio's rules
   verbatim would fight the dark theme, so every colour here is a --mt-* token
   from tokens.css. Blood is a FILL only - see the contrast table in that file.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Product meta: SKU / Category / Tags
   One rule kills all three - they share the .product_meta parent. Left in the
   DOM rather than removed in PHP so structured data still sees them.
   ------------------------------------------------------------------------- */
.woocommerce div.product .product_meta,
.single-product .product_meta {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* -------------------------------------------------------------------------
   2. Social share row
   ------------------------------------------------------------------------- */
.single-product .haru-social-share,
.single-product .haru-social-share__wrap,
.single-product .haru-social-share__list {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* -------------------------------------------------------------------------
   3. Breadcrumb / page-title band
   NOTE: this is TeeSpace's own .haru-page-title block, NOT WooCommerce's
   woocommerce_breadcrumb. imaginatio removes it by overriding
   woocommerce/single-product.php so woocommerce_before_main_content never
   fires - that does NOT work here, because TeeSpace renders this band from its
   own template outside that hook. CSS is the correct fix on this theme.
   ------------------------------------------------------------------------- */
.single-product .haru-page-title {
  display: none !important;
}

/* -------------------------------------------------------------------------
   4. Duplicate attribute value  ->  "SIZE : 2XL  2XL"
   TWO writers fill the label: TeeSpace hardcodes <span class="selected-value">
   in its variable.php and fills it from assets/js/index.js, and the swatch
   plugin injects <span class="cfvsw-selected-label">.
   imaginatio hides BOTH, leaving a bare "Size" / "Color". We keep ONE instead -
   a colour circle does not name itself, so "COLOR : DARK CHOCOLATE" is worth
   showing. Hide the plugin's copy, keep the theme's.
   ------------------------------------------------------------------------- */
.cfvsw-selected-label,
.cfvsw-swatches-container .cfvsw-label {
  display: none !important;
}

.single-product .variations td.label label,
.single-product .variations td.label .selected-value {
  color: var(--mt-bone-dim) !important;
  font-size: var(--mt-fs-small);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.single-product .variations td.label .selected-value {
  color: var(--mt-bone) !important;
}

/* The "Clear" reset link - noise once a default is selected. */
.single-product .variations_form .reset_variations,
.single-product table.variations tr:has(.reset_variations) {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* -------------------------------------------------------------------------
   5. Price
   The compare-at anchor comes from mt-product-fixes.php. <ins> must lose its
   default underline or it reads as a link.
   ------------------------------------------------------------------------- */
.mt-tier-price {
  display: inline-flex;
  align-items: baseline;
  gap: var(--mt-space-2);
}
.mt-tier-price del,
.mt-tier-price del .amount {
  color: var(--mt-steel-text) !important;
  font-weight: 500 !important;
  text-decoration: line-through !important;
}
.mt-tier-price ins,
.mt-tier-price ins .amount {
  color: var(--mt-bone) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  background: transparent !important;
}

/* Hide the stock price TeeSpace prints above the title; ours renders below the
   swatches. Also hide Woo's per-variation price block, which would duplicate it. */
.single-product .summary-content > p.price,
.single-product .entry-summary > p.price {
  display: none !important;
}
.single-product .single_variation_wrap .woocommerce-variation-price,
.single-product .single_variation .woocommerce-variation-price {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.mt-product-price-row {
  display: block;
  margin: var(--mt-space-4) 0 2px;
  font-size: 20px;
  line-height: 1.3;
}
.mt-shipping-note {
  font-size: 12px;
  color: var(--mt-steel-text);
  margin: 2px 0 var(--mt-space-4);
  line-height: 1.5;
}

/* -------------------------------------------------------------------------
   6. Trust badges
   Icons are PLACEHOLDERS. Pavel swaps them for skeleton art once the logo
   lands - the swap point is the single <svg class="trust-badge__icon"> inside
   each .trust-badge, nothing else needs to change.
   ------------------------------------------------------------------------- */
/* Trust badges. Rebuilt 2026-08-20 as a 2x2 illustrated grid.
   Was a 3-up row of 26px BLOOD line glyphs beside a full sentence. The four
   tiles are transparent 144px PNGs keyed from Codex's 3-colour renders, so the
   cell needs NO explicit background - the row's --mt-ink-raised shows through.
   Icon sits ABOVE the text and the tile is centred, which is what the
   comparison stores do and what a 72px illustration needs to breathe. */
.mt-trust-badges {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--mt-space-4);
  margin: var(--mt-space-5) 0;
  padding: var(--mt-space-5);
  border: 1px solid var(--mt-hairline);
  background: var(--mt-ink-raised);
}
.trust-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--mt-space-2);
}
.trust-badge__icon {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  display: block;
}
.trust-badge__title {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mt-bone);
  margin-bottom: 2px;
  line-height: 1.25;
}
.trust-badge__text {
  font-size: 12px;
  color: var(--mt-steel-text);
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 640px) {
  .mt-trust-badges { gap: var(--mt-space-3); padding: var(--mt-space-4); }
  .trust-badge__icon { width: 60px; height: 60px; }
  .trust-badge__title { font-size: 11px; }
  .trust-badge__text { font-size: 11px; }
}

/* -------------------------------------------------------------------------
   7. Tabs
   Panel starts closed; TeeSpace's own JS slides it open on click.
   ------------------------------------------------------------------------- */
.single-product .woocommerce-Tabs-panel--description {
  display: none;
}
.single-product .wc-tabs li a {
  color: var(--mt-steel-text) !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: var(--mt-fs-small);
  font-weight: 700;
}
.single-product .wc-tabs li.active a,
.single-product .wc-tabs li a:hover {
  color: var(--mt-bone) !important;
}
.single-product .wc-tabs li.active a {
  border-bottom: 2px solid var(--mt-blood);
}
.single-product .woocommerce-Tabs-panel {
  color: var(--mt-bone-dim);
}
.single-product .woocommerce-Tabs-panel h2,
.single-product .woocommerce-Tabs-panel strong {
  color: var(--mt-bone);
}

/* Gallery hover/enlarge actions.
   REVERSED 2026-08-19. This block used to read:

     .single-product .product-images-actions,
     .single-product .product-gallery-enlarge,
     .single-product .product-gallery-btn { display: none !important; }

   with the note "the gallery is a single image now" - correct on 08-08, when an
   MU filter was throwing the second photograph away. That filter was retired on
   08-19 and the gallery holds two images again, so the reason expired.

   The control it hid is TeeSpace's own "Click to enlarge", and the slides are
   already wrapped in data-fancybox anchors, so unhiding it is the whole of
   Pavel's "add a zoom icon" request. Styling is frontpass.css block 16 - it
   loads after this file and would win anyway, but leaving a live display:none
   here for a later session to trip over is worse than deleting it. */

/* -------------------------------------------------------------------------
   8. Add-to-cart button - blood as a FILL with bone type (6.46:1).
   ------------------------------------------------------------------------- */
.single-product .single_add_to_cart_button {
  background: var(--mt-blood) !important;
  color: var(--mt-bone) !important;
  border: 0 !important;
  border-radius: var(--mt-radius) !important;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 800;
}
.single-product .single_add_to_cart_button:hover {
  background: var(--mt-blood-hover) !important;
}

/* =========================================================================
   9. SITE CHROME - announce bar, header, nav, footer
   Markup: moshtee-child/header.php + footer.php
   ========================================================================= */

/* ---------- announce marquee ---------- */
.mt-announce {
  background: var(--mt-ink-sunk);
  border-bottom: 1px solid var(--mt-hairline);
  overflow: hidden;
  padding: 10px 0;
}
.mt-announce-track {
  display: flex;
  align-items: center;
  width: max-content;
  white-space: nowrap;
  animation: mt-announce-scroll 34s linear infinite;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mt-bone);
}
.mt-announce-track span { padding: 0 20px; }
.mt-announce-sep {
  display: inline-block;
  width: 5px;
  height: 5px;
  flex-shrink: 0;
  padding: 0 !important;
  margin: 0 4px;
  border-radius: 999px;
  background: var(--mt-blood);
}
@keyframes mt-announce-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .mt-announce-track { animation: none !important; transform: none !important; }
}

/* ---------- header ---------- */
.mt-header {
  background: var(--mt-ink);
  border-bottom: 1px solid var(--mt-hairline);
  position: relative;
  z-index: 50;
}
.mt-header-inner {
  max-width: var(--mt-container);
  margin: 0 auto;
  padding: 0 var(--mt-space-4);
  min-height: 68px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--mt-space-4);
}

.mt-logo {
  grid-column: 2;
  justify-self: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
/* === LOGO PLACEHOLDER - delete this rule when the Fiverr logo lands and the
   <span> in header.php becomes an <img>. === */
.mt-logo-word {
  color: var(--mt-bone);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1;
}

.mt-nav {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: var(--mt-space-5);
}
.mt-nav a {
  color: var(--mt-bone-dim);
  text-decoration: none;
  font-size: var(--mt-fs-small);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color var(--mt-dur-fast) var(--mt-ease),
              border-color var(--mt-dur-fast) var(--mt-ease);
  white-space: nowrap;
}
.mt-nav a:hover,
.mt-nav a:focus-visible { color: var(--mt-bone); }
.mt-nav a.is-active {
  color: var(--mt-bone);
  border-bottom-color: var(--mt-blood);
}

.mt-nav-drop { position: relative; display: inline-flex; }
.mt-submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 210px;
  background: var(--mt-ink-raised);
  border: 1px solid var(--mt-hairline);
  padding: var(--mt-space-2) 0;
  display: none;
  flex-direction: column;
  z-index: 60;
}
.mt-nav-drop:hover .mt-submenu,
.mt-nav-drop:focus-within .mt-submenu { display: flex; }
.mt-submenu a {
  padding: 8px var(--mt-space-4);
  border-bottom: 0;
  letter-spacing: .06em;
}
.mt-submenu a:hover { background: var(--mt-ink-sunk); color: var(--mt-bone); }

.mt-header-icons {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--mt-space-3);
}
.mt-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--mt-bone);
  cursor: pointer;
  text-decoration: none;
}
.mt-icon-btn svg { width: 21px; height: 21px; }
.mt-icon-btn:hover { color: var(--mt-blood); }
.mt-icon-btn:focus-visible { outline: 2px solid var(--mt-bone); outline-offset: 2px; }

.mt-cart-count {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--mt-blood);
  color: var(--mt-bone);
  font-size: 10px;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
}
.mt-cart-count[hidden] { display: none; }

.mt-search-panel {
  border-top: 1px solid var(--mt-hairline);
  background: var(--mt-ink-raised);
  padding: var(--mt-space-4);
}
.mt-search-panel[hidden] { display: none; }
.mt-search-panel form {
  max-width: var(--mt-container);
  margin: 0 auto;
  display: flex;
  gap: var(--mt-space-2);
}
.mt-search-panel input[type="search"] {
  flex: 1;
  background: var(--mt-ink);
  border: 1px solid var(--mt-hairline-strong);
  color: var(--mt-bone);
  padding: 10px var(--mt-space-3);
  border-radius: var(--mt-radius);
}
.mt-search-panel button {
  background: var(--mt-blood);
  color: var(--mt-bone);
  border: 0;
  padding: 10px var(--mt-space-5);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: var(--mt-radius);
  cursor: pointer;
}
.mt-search-panel button:hover { background: var(--mt-blood-hover); }

/* ---------- mobile ---------- */
.mt-hamburger {
  grid-column: 1;
  justify-self: start;
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.mt-hamburger span {
  display: block;
  width: 21px;
  height: 2px;
  background: var(--mt-bone);
}
.mt-mobile-nav {
  display: flex;
  flex-direction: column;
  background: var(--mt-ink-raised);
  border-bottom: 1px solid var(--mt-hairline);
  padding: var(--mt-space-2) 0;
}
.mt-mobile-nav[hidden] { display: none; }
.mt-mobile-nav a {
  color: var(--mt-bone);
  text-decoration: none;
  padding: 12px var(--mt-space-5);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: var(--mt-fs-small);
}
.mt-mobile-nav a.mt-mobile-sub {
  padding-left: var(--mt-space-8);
  color: var(--mt-steel-text);
  text-transform: none;
  letter-spacing: .02em;
}
.mt-mobile-nav a:hover { background: var(--mt-ink-sunk); }

@media (max-width: 900px) {
  .mt-nav { display: none; }
  .mt-hamburger { display: flex; }
}
@media (min-width: 901px) {
  .mt-mobile-nav { display: none !important; }
}

/* ---------- footer ---------- */
.mt-footer {
  background: var(--mt-ink-sunk);
  border-top: 1px solid var(--mt-hairline);
  margin-top: var(--mt-space-8);
}
.mt-footer-inner {
  max-width: var(--mt-container);
  margin: 0 auto;
  padding: var(--mt-band-pad) var(--mt-space-4) var(--mt-space-6);
}
.mt-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--mt-space-6);
}
.mt-footer-brand p {
  color: var(--mt-steel-text);
  font-size: 13px;
  line-height: 1.7;
  margin: var(--mt-space-4) 0 0;
  max-width: 42ch;
}
.mt-footer-logo { font-size: 18px; }
.mt-footer-col { display: flex; flex-direction: column; gap: var(--mt-space-2); }
.mt-footer-col h3 {
  color: var(--mt-bone);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 var(--mt-space-2);
}
.mt-footer-col a {
  color: var(--mt-steel-text);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.8;
}
.mt-footer-col a:hover { color: var(--mt-bone); }
.mt-footer-bottom {
  margin-top: var(--mt-space-7);
  padding-top: var(--mt-space-5);
  border-top: 1px solid var(--mt-hairline);
  color: var(--mt-steel-text);
  font-size: 12px;
  text-align: center;
}

@media (max-width: 780px) {
  .mt-footer-grid { grid-template-columns: 1fr 1fr; gap: var(--mt-space-5); }
  .mt-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 460px) {
  .mt-footer-grid { grid-template-columns: 1fr; }
  .mt-announce-track { font-size: 11px; }
  .mt-logo-word { font-size: 18px; letter-spacing: .18em; }
}

/* -------------------------------------------------------------------------
   6. Product gallery - hide the THUMBNAIL STRIP, never the slides

   TeeSpace builds its gallery in single-product/product-image-slide.php from
   the featured image + gallery ids + EVERY VARIATION IMAGE. mt-product-fixes.php
   empties the gallery ids, but variation images are a third source it cannot
   reach, which is why a four-up strip survived until 2026-08-08.

   The strip is HIDDEN, not removed. Each slide carries data-variation_id and
   the theme's own JS calls slick('slickGoTo', index) against it to swap the hero
   when a colour is picked - delete the slides and the colour sync dies with
   them. height:0 rather than display:none so slick keeps a real width to measure
   against; display:none on a slick container yields 0-width slides and can wedge
   the paired slider.

   REVISIT when real mockups exist (front / back / detail / on-model). A strip of
   four DIFFERENT views earns its space; a strip of the same shirt in four
   colours just duplicates the swatches.
   ------------------------------------------------------------------------- */
.single-product .product-thumbnails-wrap{
  height:0;
  overflow:hidden;
  margin:0;
  padding:0;
  pointer-events:none;
}

/* -------------------------------------------------------------------------
   7. Shop + category archive chrome

   TeeSpace ships four pieces of furniture above the grid: a full-width title
   band, a breadcrumb, Woo's result count, and a grid/list view toggle. The
   direct comp (deetwentees.com, 259 products) shows a heading, a count and a
   sort - nothing else. Keep the heading and the sort; drop the rest.
   - Breadcrumb: two levels deep on a site with a five-item nav.
   - Result count: Woo's phrasing degrades badly at small catalogues
     ("Showing the single result").
   - Grid/list toggle: list view of a t-shirt catalogue is never the better read,
     and it is one more control between a visitor and a product.
   ------------------------------------------------------------------------- */
.woocommerce-shop .haru-page-title__breadcrumbs,
.tax-product_cat .haru-page-title__breadcrumbs,
.tax-product_tag .haru-page-title__breadcrumbs{
  display:none !important;
}
.woocommerce-shop .haru-page-title,
.tax-product_cat .haru-page-title,
.tax-product_tag .haru-page-title{
  padding:var(--mt-space-7) 0 var(--mt-space-5) !important;
  background:var(--mt-ink) !important;
  border-bottom:1px solid var(--mt-hairline);
}
.woocommerce-shop .haru-page-title__heading--main,
.tax-product_cat .haru-page-title__heading--main,
.tax-product_tag .haru-page-title__heading--main{
  color:var(--mt-bone) !important;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.shop-filter__layout,
.archive-product .woocommerce-result-count{
  display:none !important;
}
.shop-filter{
  border-bottom:1px solid var(--mt-hairline);
  padding-bottom:var(--mt-space-3);
  margin-bottom:var(--mt-space-5);
}
.shop-filter__catalog{
  display:flex;
  justify-content:flex-end;
  width:100%;
}
.woocommerce-ordering select.orderby{
  background:var(--mt-ink-raised);
  color:var(--mt-bone);
  border:1px solid var(--mt-hairline-strong);
  padding:8px 12px;
  font-size:var(--mt-fs-small);
}

/* -------------------------------------------------------------------------
   8. Size guide - link beside the Size label, and the modal

   The Gildan 64000 is spec'd "Eurofit" / no side seams: slimmer through the body
   than the Bella 3001 most US buyers own. That is the single largest returns
   risk on the catalogue and it is cheapest to defuse BEFORE the add-to-cart, not
   in a tab below it. Deliberately plain HTML rather than the size-chart plugin
   or an image: a table reflows on a phone, a JPEG of a table does not.
   ------------------------------------------------------------------------- */
.mt-size-guide-link{
  background:none;
  border:0;
  padding:0;
  margin-left:auto;
  color:var(--mt-bone);
  font-size:var(--mt-fs-small);
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.mt-size-guide-link:hover{ color:var(--mt-blood); }
.mt-size-guide-link:focus-visible{ outline:2px solid var(--mt-blood); outline-offset:3px; }

.mt-modal[hidden]{ display:none; }
.mt-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--mt-space-4);
  background:rgba(5,5,5,.82);
}
.mt-modal__panel{
  background:var(--mt-ink-raised);
  border:1px solid var(--mt-hairline-strong);
  max-width:640px;
  width:100%;
  max-height:86vh;
  overflow:auto;
  padding:var(--mt-space-6);
  position:relative;
}
.mt-modal__close{
  position:absolute;
  top:10px;
  right:12px;
  background:none;
  border:0;
  color:var(--mt-bone);
  font-size:26px;
  line-height:1;
  cursor:pointer;
}
.mt-modal__close:focus-visible{ outline:2px solid var(--mt-blood); outline-offset:2px; }
.mt-modal h2{
  color:var(--mt-bone);
  font-size:var(--mt-fs-h2);
  margin:0 0 var(--mt-space-3);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.mt-size-table{
  width:100%;
  border-collapse:collapse;
  margin:var(--mt-space-4) 0;
  font-size:var(--mt-fs-small);
  color:var(--mt-bone);
}
.mt-size-table th,
.mt-size-table td{
  border:1px solid var(--mt-hairline);
  padding:8px 10px;
  text-align:center;
}
.mt-size-table thead th{
  background:var(--mt-ink-sunk);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:12px;
}
.mt-size-note{
  color:var(--mt-steel-text);
  font-size:var(--mt-fs-small);
  line-height:1.7;
}
.mt-size-note strong{ color:var(--mt-bone); }

/* -------------------------------------------------------------------------
   9. Newsletter capture
   ------------------------------------------------------------------------- */
.mt-signup{ max-width:420px; }
.mt-signup h3{
  color:var(--mt-bone);
  font-size:var(--mt-fs-small);
  letter-spacing:var(--mt-ls-eyebrow);
  text-transform:uppercase;
  margin:0 0 var(--mt-space-2);
}
.mt-signup p{
  color:var(--mt-steel-text);
  font-size:var(--mt-fs-small);
  margin:0 0 var(--mt-space-3);
  line-height:1.6;
}
.mt-signup-form{ display:flex; }
.mt-signup-form input[type=email]{
  flex:1 1 auto;
  min-width:0;
  background:transparent;
  border:1px solid var(--mt-hairline-strong);
  border-right:0;
  color:var(--mt-bone);
  padding:12px 14px;
  font-size:var(--mt-fs-small);
}
.mt-signup-form input[type=email]::placeholder{ color:var(--mt-steel-text); }
.mt-signup-form input[type=email]:focus-visible{
  outline:2px solid var(--mt-blood);
  outline-offset:-2px;
}
.mt-signup-form button{
  flex:0 0 auto;
  background:var(--mt-blood);
  color:var(--mt-bone);
  border:1px solid var(--mt-blood);
  padding:12px 18px;
  font-size:var(--mt-fs-small);
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background var(--mt-dur-fast) var(--mt-ease);
}
.mt-signup-form button:hover{ background:var(--mt-blood-hover); }
.mt-signup-form button:focus-visible{ outline:2px solid var(--mt-bone); outline-offset:2px; }
.mt-signup-form button[disabled]{ opacity:.55; cursor:default; }
.mt-signup-msg{
  margin:var(--mt-space-2) 0 0;
  font-size:var(--mt-fs-small);
  min-height:1.4em;
}
.mt-signup-msg[data-state=ok]{ color:var(--mt-bone); }
.mt-signup-msg[data-state=err]{ color:#F1A0A6; }

/* -------------------------------------------------------------------------
   10. Founder block

   The one section on the reference store a competitor cannot copy. Photo is
   optional in markup on purpose - the block reads fine as text until Pavel
   supplies one, rather than rendering a broken image well.
   ------------------------------------------------------------------------- */
.mt-founder{
  border-top:1px solid var(--mt-hairline);
  background:var(--mt-ink-sunk);
  padding:var(--mt-band-pad) var(--mt-space-4);
}
.mt-founder__inner{
  max-width:var(--mt-container);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,240px) minmax(0,1fr);
  gap:var(--mt-space-6);
  align-items:center;
}
.mt-founder__inner.is-textonly{ grid-template-columns:minmax(0,1fr); max-width:760px; }
.mt-founder__photo img{
  width:100%;
  height:auto;
  display:block;
  filter:grayscale(1) contrast(1.08);
  border:1px solid var(--mt-hairline-strong);
}
.mt-founder__eyebrow{
  color:var(--mt-blood);
  font-size:var(--mt-fs-eyebrow);
  letter-spacing:var(--mt-ls-eyebrow);
  text-transform:uppercase;
  margin:0 0 var(--mt-space-2);
}
.mt-founder h2{
  color:var(--mt-bone);
  font-size:var(--mt-fs-h2);
  margin:0 0 var(--mt-space-3);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.mt-founder p{
  color:var(--mt-bone-dim);
  font-size:var(--mt-fs-body);
  line-height:1.75;
  margin:0 0 var(--mt-space-3);
}
.mt-founder__sign{
  color:var(--mt-bone);
  font-size:var(--mt-fs-small);
  letter-spacing:.1em;
  text-transform:uppercase;
}
@media (max-width:680px){
  .mt-founder__inner{ grid-template-columns:minmax(0,1fr); }
  .mt-founder__photo{ max-width:200px; }
}
/* -------------------------------------------------------------------------
   11. Front page - kill the "Home" title band

   TeeSpace prints .haru-page-title on the static front page too, so the first
   thing above the hero read:  Home  /  Home > Home  - the page title and a
   breadcrumb whose only crumb is the page you are already on.

   Scoped to .home so the band survives on every other page, where it is the
   section heading. Same approach as the .single-product rule in block 3.

   The shop archive's breadcrumb is hidden in block 7 rather than switched off in
   Redux (haru_archive_product_title_breadcrumbs). It still emits an invalid
   schema.org BreadcrumbList - worth flipping the option before the site is
   de-noindexed, but not worth a read-modify-write of the 202-key theme option
   array while nothing is indexed.
   ------------------------------------------------------------------------- */
.home .haru-page-title{
  display:none !important;
}

/* -------------------------------------------------------------------------
   8. Product Details spec grid  (added 2026-08-18)
   Six line-art tiles inside the Product Details tab.
   Icons are BONE, not blood. The trust-badge row under the Add to Cart button
   already spends the accent, and brand.md caps blood at ~5% of a surface --
   six red glyphs in one panel would blow that on their own.
   Placeholder SVGs. Codex is producing the finished set; the swap point is the
   svg string inside mt_product_detail_tiles(), nothing here needs to change.
   ------------------------------------------------------------------------- */
.mt-spec-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mt-space-5) var(--mt-space-4);
  margin: 0 0 var(--mt-space-6);
  padding: var(--mt-space-5);
  border: 1px solid var(--mt-hairline);
  background: var(--mt-ink-raised);
}
.mt-spec {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--mt-space-3);
}
.mt-spec__icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  color: var(--mt-bone);
}
.mt-spec__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--mt-bone);
  max-width: 16ch;
}
.mt-spec-copy p {
  font-size: var(--mt-fs-small);
  line-height: 1.7;
  color: var(--mt-bone-dim);
  margin: 0 0 var(--mt-space-4);
}
.mt-spec-copy p:last-child { margin-bottom: 0; }
.mt-spec-copy strong { color: var(--mt-bone); }

@media (max-width: 640px) {
  .mt-spec-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mt-space-4) var(--mt-space-3);
    padding: var(--mt-space-4);
  }
  .mt-spec__icon { width: 36px; height: 36px; }
  .mt-spec__label { font-size: 11px; }
}

/* =========================================================================
   12. DEAD VERTICAL SPACE, and the Grizzly-shaped shop head   (2026-08-18)

   Pavel marked four gaps on a phone with a red X. Not one of them came from
   where it looked like it came from, so they are listed with what was actually
   measured:

   (a) header -> hero eyebrow.  `#haru-content-main { margin: 80px auto }` is a
       TeeSpace GLOBAL wrapper margin - top and bottom, every page, stepping to
       40px at the smallest breakpoint - PLUS the hero's own 96px padding-top.
   (b) SHOP ALL -> THE DROP.  hero padding-bottom 96px + .mt-home-products
       padding-top 70px = 166px of nothing between a button and a heading.
   (c) last card -> footer.  .mt-home-products padding-bottom 90px + the
       wrapper margin-bottom + `.mt-footer { margin-top: 64px }` + `.mt-footer
       -inner { padding: clamp(56px,8vw,96px) ... }`. Four rules stacking to
       250-330px, none of them aware of the others.
   (d) the SHOP band, which Pavel cut outright - see below.

   The band paddings in (a) and (b) used to be INLINE on page 32. They are
   stripped from the post content and live here instead, so they can be
   responsive: a flat 96px is a fair desktop number and a quarter of a phone.

   Rule of thumb this block is built on: a full-bleed band owns its own top and
   bottom padding, and nothing outside it adds more.
   ========================================================================= */

/* --- The global wrapper margin ------------------------------------------ */
#haru-content-main{
  margin-top:32px !important;
  margin-bottom:40px !important;
}
@media screen and (max-width:767px){
  #haru-content-main{
    margin-top:20px !important;
    margin-bottom:26px !important;
  }
}

/* Pages built from full-bleed bands: the bands carry the rhythm, the wrapper
   contributes nothing. Home also drops the 1440px cap and the 15px gutter so
   the dark bands actually reach both edges. */
.home #haru-content-main{
  margin-top:0 !important;
  margin-bottom:0 !important;
  max-width:none !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
.woocommerce-shop #haru-content-main,
.tax-product_cat #haru-content-main,
.tax-product_tag #haru-content-main{
  margin-top:0 !important;
  margin-bottom:32px !important;
}

/* --- Homepage bands ------------------------------------------------------ */
.mt-hero{
  padding:clamp(40px,6vw,72px) 20px clamp(34px,4.5vw,56px) !important;
}
.mt-hero__eyebrow{ margin:0 0 14px !important; }
.mt-hero h1{ margin:0 0 18px !important; }
.mt-hero__sub{ margin:0 auto 26px !important; }

/* --- Homepage photo hero (2026-09-22, deetwentees format) ----------------
   Full-bleed at every width and zoom level: 100vw breakout, photo is
   object-fit:cover so the band never letterboxes. Copy sits ON the photo. */
.home #haru-content-main{ overflow-x:clip; }
.mt-hero-banner{
  position:relative; width:100vw; margin:0 calc(50% - 50vw) !important;
  height:56.25vw; min-height:230px; overflow:hidden; background:#0A0A0A;
}
@media (min-width:768px){ .mt-hero-banner{ height:clamp(420px,42vw,680px); } }
.mt-hero-banner img{
  position:absolute; inset:0; width:100% !important; height:100% !important; max-width:none !important;
  object-fit:cover; object-position:50% 18%;
}
.mt-hero-banner::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 50% 50%, rgba(10,10,10,.5), rgba(10,10,10,0) 70%);
}
.mt-hero-banner__copy{
  position:absolute; inset:0; z-index:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:clamp(12px,2vw,26px); padding:0 16px; text-align:center;
}
.mt-hero-banner h1{
  margin:0 !important; color:#EDE8DF; font-weight:800; text-transform:uppercase;
  letter-spacing:-.01em; line-height:1; font-size:clamp(34px,6.5vw,104px);
  text-shadow:0 2px 14px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.9);
}
.mt-hero-banner .mt-btn{ box-shadow:0 4px 18px rgba(0,0,0,.5); }
/* Copy is pinned to the PHOTO, not the band edges (Pavel 2026-09-22): H1 at the shoulder line,
   button just under the IBUPROFEN print. Percentages of band height track the photo because
   the band height is itself vw-based. */
.mt-hero-banner h1{ position:absolute; left:16px; right:16px; top:40%; transform:translateY(-50%); }
.mt-hero-banner .mt-btn{ position:absolute !important; top:64%; left:50%; transform:translateX(-50%); white-space:nowrap; }
@media (max-width:767px){ .mt-hero-banner h1{ top:34%; } .mt-hero-banner .mt-btn{ top:72%; } }
@media (max-width:767px){ .mt-hero-banner .mt-btn{ padding:10px 22px !important; font-size:12px !important; min-height:0 !important; line-height:1.4 !important; } }

.mt-home-products{
  padding:clamp(34px,4.5vw,56px) 20px clamp(36px,4.5vw,56px) !important;
}
.mt-home-products .mt-section-title{ margin:0 0 6px !important; }
.mt-home-products .mt-section-sub{ margin:0 0 24px !important; }

/* --- Footer ------------------------------------------------------------- */
/* The band above already ends in its own padding and .mt-footer draws a
   border-top, so the separation is already stated twice before these two
   rules added a third and fourth statement of it. */
.mt-footer{ margin-top:0 !important; }
.mt-footer-inner{
  padding-top:clamp(30px,4vw,48px) !important;
  padding-bottom:var(--mt-space-6) !important;
}

/* =========================================================================
   13. Shop archive head - reference: thegrizzlyco.com   (2026-08-18)

   Their shop page is headline / one proof line / one tight row carrying the
   sort control and the product count on a hairline / grid. MoshTee had a
   full-width page-title band, then a full-width flex holding a single
   right-floated select in the middle of nowhere.

   The proof line's CONTENT is deliberately not theirs - see inc/shop-header.php
   for why "10,000+ Happy Campers" and "30-Day Happiness Guarantee" are both
   unavailable to this store.
   ========================================================================= */

/* Pavel cut the band. This supersedes the padding tune in block 7, which kept
   it and only made it shorter. The H1 moves into .mt-shop-head, so hiding the
   band no longer costs the page its heading. */
.woocommerce-shop .haru-page-title,
.tax-product_cat .haru-page-title,
.tax-product_tag .haru-page-title{
  display:none !important;
}

/* This wrapper rendered completely empty on every archive until the head was
   hooked into it. */
/* Vertical only. This element is a .haru-container and its horizontal
   padding is the page gutter - zeroing the `padding` shorthand clipped the
   shop headline against the left edge of the phone. Caught in a screenshot,
   not in the DOM: every measurement still read correct. */
.woocommerce-products-header{
  margin-top:0 !important;
  margin-bottom:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}
.woocommerce-products-header .h-row{ margin:0 !important; }

.mt-shop-head{ padding:18px 0 0; }
.mt-shop-head__title{
  margin:0 0 6px !important;
  color:var(--mt-bone);
  font-size:clamp(26px,5.2vw,40px);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.01em;
  text-transform:uppercase;
}
.mt-shop-head__strip{
  margin:0 !important;
  color:var(--mt-bone-dim);
  font-size:13px;
  font-weight:700;
  line-height:1.7;
  letter-spacing:.02em;
}
.mt-shop-head__strip a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
}
.mt-shop-head__strip a:hover{ color:var(--mt-bone); }

/* Blood as a 4px separator square, matching the announce bar. It is a FILL,
   not text - blood measures 2.51:1 on ink and fails even the 3:1 non-text
   floor as a glyph, so this is a box and never a character. */
.mt-shop-head__dot{
  display:inline-block;
  width:4px;
  height:4px;
  margin:0 10px;
  background:var(--mt-blood);
  vertical-align:middle;
}

/* --- The sort row ------------------------------------------------------- */
.woocommerce-shop .shop-filter,
.tax-product_cat .shop-filter,
.tax-product_tag .shop-filter{
  display:flex !important;
  align-items:center !important;
  margin:14px 0 0 !important;
  padding:8px 0 !important;
  border-top:1px solid var(--mt-hairline);
  border-bottom:1px solid var(--mt-hairline);
}

/* DOM order inside this element is [count, form] because WooCommerce hooks
   result_count at 20 and catalog_ordering at 30. The reference puts the
   control on the LEFT and the count on the RIGHT, so the row is reversed
   rather than the hook priorities being swapped - priorities are shared with
   every other consumer of woocommerce_before_shop_loop. */
.woocommerce-shop .shop-filter__catalog,
.tax-product_cat .shop-filter__catalog,
.tax-product_tag .shop-filter__catalog{
  display:flex !important;
  flex-direction:row-reverse;
  align-items:center !important;
  justify-content:space-between !important;
  width:100%;
  gap:12px;
}

/* Block 7 hid the result count because it had nowhere to sit. It has a home
   now, and on a store whose whole problem has been looking empty, the
   catalogue size is worth stating. */
.woocommerce-shop .archive-product .woocommerce-result-count,
.tax-product_cat .archive-product .woocommerce-result-count,
.tax-product_tag .archive-product .woocommerce-result-count{
  display:block !important;
  margin:0 !important;
  color:var(--mt-steel-text) !important;
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
}

.woocommerce-ordering{ margin:0 !important; }
.woocommerce-ordering select.orderby{
  min-height:36px;
  padding:6px 10px !important;
  background:transparent !important;
  border:1px solid var(--mt-hairline-strong) !important;
  color:var(--mt-bone) !important;
  font-size:12px !important;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* The layered-nav widget always prints this wrapper, empty or not. :empty
   cannot match it - it contains whitespace - so test for element children. */
.haru-active-filters:not(:has(*)){
  display:none !important;
  margin:0 !important;
  padding:0 !important;
}

.woocommerce-shop .products.layout-grid,
.tax-product_cat .products.layout-grid,
.tax-product_tag .products.layout-grid{
  margin-top:18px !important;
}

/* =========================================================================
   14. Button labels sit dead centre   (2026-08-18)

   TeeSpace's parent sheet sets `.widget_shopping_cart_content .button
   :first-child { line-height: 44px }` - VIEW CART only, never CHECKOUT. So the
   two drawer buttons were different heights with their labels at different
   offsets inside them, which is what Pavel's arrows were pointing at.

   Centring is done with flex rather than by matching line-height to height,
   because a line-height that equals the box only centres a label that never
   wraps - and "VIEW CART" does wrap on a 320px phone.

   Scoped to real buttons. The shop-loop .product-actions icons are excluded
   deliberately: they are square icon hit-areas with absolutely-positioned
   tooltips, and turning them into flex containers moves the tooltips.
   ========================================================================= */

.mt-cart .haru-cart-wrap.cart-side .cart-total .buttons .button,
.woocommerce .single_add_to_cart_button,
.woocommerce a.checkout-button,
.wp-block-woocommerce-cart .wc-block-cart__submit-button{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:52px !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  line-height:1.15 !important;
  text-align:center;
}

.mt-btn,
.mt-signup-form button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:48px !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  line-height:1.15 !important;
  text-align:center;
}

/* The hero CTA lost its inline padding when the band paddings moved out of
   page 32; it is declared here so the button has a shape at all. */
.mt-btn{ padding-left:40px !important; padding-right:40px !important; }
.mt-signup-form button{ padding-left:18px !important; padding-right:18px !important; }

/* -------------------------------------------------------------------------
   FIX, measured in a browser 2026-08-18: TeeSpace sets `position:absolute` on
   .woocommerce-result-count. An absolutely-positioned child is NOT a flex
   item, so it was removed from the row and painted ON TOP of the sort form -
   form at x=152..375, count at x=278 - rather than sitting opposite it.
   row-reverse and space-between were both computing correctly and doing
   nothing, because there was only ever one flex item in the row.
   ------------------------------------------------------------------------- */
.woocommerce-shop .archive-product .woocommerce-result-count,
.tax-product_cat .archive-product .woocommerce-result-count,
.tax-product_tag .archive-product .woocommerce-result-count{
  position:static !important;
  inset:auto !important;
}
.woocommerce-shop .woocommerce-ordering,
.tax-product_cat .woocommerce-ordering,
.tax-product_tag .woocommerce-ordering{
  flex:0 0 auto;
}

/* 18px from the header to a 26px headline read tight on a phone. */
.mt-shop-head{ padding-top:24px !important; }


/* -------------------------------------------------------------------------
   16. Dark form controls and dark tables.        MT-BLOCK-16-DARK-CONTROLS

   Two defects Pavel reported on 2026-08-19, both the same shape: a colour
   inherited from a MoshTee wrapper losing to a rule the parent theme sets on
   the ELEMENT. An inherited colour always loses to any matching rule, however
   weak - specificity is only compared between rules that MATCH.

   (a) SIZE GUIDE TABLE. TeeSpace's generated style.css carries
       `.woocommerce table th, .woocommerce-page table th, .woocommerce-js table th
       { color:#000 }` with NO !important. `.mt-size-table{color:var(--mt-bone)}`
       sets the colour on the TABLE and every <th> inherited it - so every <th>
       computed to rgb(0,0,0). Measured on the live modal: thead th black on
       #050505 (1.0:1) and the S/M/L row headers black on #141414 (1.06:1). The
       whole first column and the whole header row were invisible, in the modal
       AND in the Shipping & Returns tab, which renders the same table.
       Beaten with a class, not !important: `.mt-size-table thead th` is (0,1,2)
       against their (0,1,1). The `body.woocommerce table th` line repairs every
       other Woo table on the site for the same reason - my-account orders,
       order-received - which are all on the same INK background.

   (b) SORT DROPDOWN. `select.orderby` carried `background:transparent !important`,
       so Chrome had no opaque colour to derive the popup from and painted the
       option list on white, with our BONE option text on top of it - which is
       why Pavel's screenshot shows an all-but-invisible list. `color-scheme:dark`
       was already inherited from :root and did NOT fix it, because
       `appearance:none` opts the control out of native widget painting.
       The option colours were ALREADY being honoured (bone text is visible in
       his screenshot on the white popup), which is what proves the background
       will be honoured too. Give the select an opaque background and colour the
       options explicitly.
   ------------------------------------------------------------------------- */
.mt-size-table thead th,
.mt-size-table tbody th,
.mt-size-table tfoot th{
  color:var(--mt-bone);
}
body.woocommerce table th,
body.woocommerce-page table th{
  color:var(--mt-bone);
}

.woocommerce-ordering select.orderby{
  background-color:var(--mt-ink-raised) !important;
  color-scheme:dark;
}
.woocommerce-ordering select.orderby option{
  background-color:#141414;
  color:#EDE8DF;
}
.woocommerce-ordering select.orderby option:checked,
.woocommerce-ordering select.orderby option:hover{
  background-color:#A3121F;
  color:#EDE8DF;
}

/* =========================================================================
   17. PDP VERTICAL RHYTHM - the second dead-space pass   (2026-08-21)
       MT-BLOCK-17-PDP-RHYTHM

   Pavel marked three bands with a red X on his phone and asked for the
   bundle ladder off the product page. The ladder itself is hidden in
   mu-plugins/mt-bundle-offer.php (the add_action is commented out, the cart
   mechanic is untouched). This block is the space.

   Measured on moshtee.com/product/always-this-loud-t-shirt/ in real WebKit
   at 393x852 before touching anything:

   (a) DESCRIPTION -> Related Products = 110px of nothing.
       `.single-product-top { margin-bottom:50px }` opens the gap above the
       tabs, then `section.related { margin-top:60px; padding-top:50px }`
       states the separation twice more - and .related already draws a
       1px border-top, which is a third statement of the same thing.

   (b) "- PAVEL, MOSHTEE" -> footer = 216px of nothing, from THREE rules
       none of which knows about the others:
         .mt-founder padding-bottom   96px   (band pad)
         .single-content margin-bottom 80px  (TeeSpace)
         #haru-content-main margin-bottom 40px (block 12 above)
       .mt-founder is a full-bleed band with its own border-top and sunk
       background, so by block 12's rule of thumb it owns the padding and
       the two wrappers below it contribute nothing.

   (c) the price / shipping-note band, tightened rather than removed -
       Pavel confirmed in this session that the $49.99 anchor STAYS, which
       is the 2026-08-18 decision unchanged.

   The founder band keeps a real top pad because it follows a product grid
   and needs to read as a different kind of content, just not 96px of it.
   ========================================================================= */

body.single-product .single-product-top{ margin-bottom:24px; }

body.single-product section.related.products{
  margin-top:24px;
  padding-top:24px;
}

body.single-product .mt-founder{
  padding-top:clamp(36px,5vw,64px);
  padding-bottom:clamp(36px,5vw,64px);
}
body.single-product .single-content{ margin-bottom:0; }
body.single-product #haru-content-main{ margin-bottom:0 !important; }

/* The price row sat 16px below the swatches and 16px above the ladder that
   is now gone; without the ladder the note would otherwise float over the
   quantity row. */
body.single-product .mt-product-price-row{ margin-top:10px; }
body.single-product .mt-shipping-note{ margin-bottom:14px; }
body.single-product table.variations{ margin-bottom:6px; }

/* =========================================================================
   18. THE ADD-TO-CART ROW                                    (2026-08-21)
       MT-BLOCK-18-ATC-ROW

   Pavel, off his phone: "there is no gap between add to cart and labels
   zone, also make add to cart bit longer reducing - 1 + area ... only one
   number there should fit".

   THE MISSING GAP WAS NOT A MISSING MARGIN. `.mt-trust-badges` already
   carried `margin-top:24px` and it computed as 24px the whole time - it
   just never rendered. TeeSpace floats BOTH controls left
   (`.quantity{float:left}` and `.single_add_to_cart_button{float:left}`),
   and the badge grid is `display:grid`, which establishes its own
   formatting context and therefore SHIFTS DOWN to clear the floats instead
   of overlapping them. That shift is computed from the float bottom, and it
   swallows the margin whole - measured badges top = 824px = exactly the
   button's bottom edge, with a 24px margin that went nowhere.

   So the fix is the layout, not the number: the row becomes a real flex
   row, the badges become a full-width flex item on the next line, and the
   margin starts working because there is no float left to clear.

   THE QUANTITY BOX. Width was never declared - `.quantity` is a
   shrink-to-fit float, so its 138px was the sum of its children:
   `.single-product-top form.cart .quantity input[type="number"]{width:60px}`
   plus two `.input-button` spans that measured 38px each off
   `padding:0 10px` and an 18px glyph. 60px of field is room for three
   digits on a store where the largest sane order is four tees. Now
   34 + 32 + 34 + 2px border = 102px, and the button takes the 38px back:
   215px -> 251px at 393 wide.

   Heights matched at 52px on purpose - the button carries `min-height:52px`
   and the quantity box was 48px, so the row was 4px out of square before
   anything else changed.
   ========================================================================= */

body.single-product .single-product-top form.cart .woocommerce-variation-add-to-cart{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  column-gap:10px;
  row-gap:0;
}
body.single-product .single-product-top form.cart .woocommerce-variation-add-to-cart .quantity{
  float:none;
  margin:0;
  flex:0 0 auto;
  height:52px;
}
body.single-product .single-product-top form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button{
  float:none;
  margin:0;
  flex:1 1 auto;
  width:auto;
  /* TeeSpace caps it at calc(100% - 148px), a hardcoded budget for the OLD
     138px quantity box plus its 10px margin. Left in place the button would
     have stayed exactly 215px however narrow the stepper got. */
  max-width:none;
}

/* One digit is the whole brief. Typing a second still works - this is the
   visible field, not a max. */
body.single-product .single-product-top form.cart .quantity .input-button{
  width:34px;
  min-width:34px;
  padding:0;
  height:50px;
  line-height:50px;
}
body.single-product .single-product-top form.cart .quantity input[type="number"]{
  width:32px;
  height:50px;
  line-height:50px;
  padding:0;
}

/* Now that nothing floats, this margin renders for the first time. */
body.single-product .single-product-top form.cart .woocommerce-variation-add-to-cart .mt-trust-badges{
  flex:0 0 100%;
  margin-top:20px;
}


/* =========================================================================
   10b. Founder block - landscape photo + two variants      (2026-08-26)

   The block above was written for a PORTRAIT headshot: a 240px grid column
   next to the text. The photo that finally arrived is a 16:9 landscape crowd
   shot (System Of A Down, Warsaw, 19 Jul 2026), which at 240px wide is 135px
   tall - unreadable, and dwarfed by a nine-paragraph column beside it.

   So the layout now depends on the variant:
     --full  (About page, shortcode) photo full width ABOVE the text
     --short (every product page)    photo in a wider side column

   The short variant exists because the founder block renders on all 102 PDPs
   and measured 1110px tall on a phone (flagged 2026-08-19). Cutting nine
   paragraphs to three is the fix; adding a photo to the long one would have
   made the flagged problem worse.
   ========================================================================= */

.mt-founder--full .mt-founder__inner{
  grid-template-columns:minmax(0,1fr);
  max-width:820px;
}
.mt-founder--full .mt-founder__photo{
  margin:0 0 var(--mt-space-6);
  max-width:none;
}

.mt-founder--short .mt-founder__inner{
  grid-template-columns:minmax(0,400px) minmax(0,1fr);
  align-items:start;
  gap:var(--mt-space-6);
}
.mt-founder--short .mt-founder__photo{ max-width:none; }

/* No grayscale on this one. The filter on the base rule was written for a
   studio headshot; on a night stadium shot it flattens the two lit faces into
   the crowd behind them, which is the entire subject. */
.mt-founder__photo img{ filter:none; }

.mt-founder__caption{
  color:var(--mt-steel-text);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:var(--mt-space-2) 0 0;
  line-height:1.4;
}

.mt-founder__more{ margin-top:var(--mt-space-4); }
.mt-founder__more a{
  color:var(--mt-bone);
  font-size:var(--mt-fs-small);
  letter-spacing:.1em;
  text-transform:uppercase;
  border-bottom:1px solid var(--mt-blood);
  padding-bottom:2px;
  text-decoration:none;
}
.mt-founder__more a:hover{ color:var(--mt-blood); }

@media (max-width:680px){
  /* Overrides the 200px cap in block 10, which would shrink a landscape shot
     to a 200x113 stamp on the exact device most of the traffic uses. */
  .mt-founder__photo{ max-width:none; }
  .mt-founder--short .mt-founder__inner{ grid-template-columns:minmax(0,1fr); }
  .mt-founder--short .mt-founder__photo{ margin-bottom:var(--mt-space-5); }
}

/* The positioning line - 'We do not make band merch' - is the payload of the
   whole block and inherited bone-dim body colour at body weight, so it read as
   one more sentence. It is the only strong in the block. */
.mt-founder__body strong{ color:var(--mt-bone); font-weight:700; }


/* Footer social row - added 2026-08-28.
   40px hit targets: below that a thumb misses on a phone. Steel at rest so the
   row never competes with the newsletter CTA above it, bone on hover so it is
   obviously interactive. currentColor means one colour change moves the glyph
   and nothing else needs touching. */
.mt-footer-social {
  display: flex;
  gap: var(--mt-space-2, 8px);
  margin-top: var(--mt-space-4, 16px);
}

.mt-footer .mt-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--mt-steel-text);
  border: 1px solid var(--mt-hairline);
  border-radius: var(--mt-radius, 0);
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.mt-footer .mt-social-link:hover,
.mt-footer .mt-social-link:focus-visible {
  color: var(--mt-bone);
  border-color: var(--mt-hairline-strong);
  background: var(--mt-ink-raised);
}

.mt-footer .mt-social-link svg { display: block; }


/* --------------------------------------------------------------------
   19.  THE DROP -> VIEW ALL                           (Pavel 2026-08-31)

   The drop grid showed eight tees and then stopped dead into the footer on a
   phone.  The only route onw ards was the hamburger, where `New` has always
   pointed at /shop/?orderby=date.  This puts that same URL at the end of the
   grid, where somebody who just scrolled eight designs is actually looking.

   Deliberately a BUTTON, not a band with its own heading: the hero carries a
   headline plus a `Shop all` button a single screen above, and a second
   heading would repeat it.  Pavel's call, 2026-08-31.

   MARKUP LIVES IN PAGE 32, not in a template - the whole homepage does.
   Backup: option `moshtee_backup_20260831_page32_content`.

   NOT inside `.products.layout-grid` on purpose: frontpass block 11 pulls that
   grid out by -20px on phones, and the button must stay on the wrapper edge.
   -------------------------------------------------------------------- */
.mt-drop-cta{
  margin: clamp(24px,3.5vw,36px) 0 0 !important;
  text-align: center !important;
  clear: both;
}

/* -------------------------------------------------------------------------
   20. Founder block, SHORT variant - eyebrow leads, photo follows on mobile.

   Pavel, 2026-09-02: on a phone the photograph should sit BELOW
   'MEET THE TWO OF US', not above it. The h2 was removed from this variant in
   the same pass - with the twelve-years-ago paragraph gone, 'She got into metal
   first. I caught up.' no longer had a story under it. /about/ keeps both.

   HOW: the eyebrow is now a DIRECT child of .mt-founder__inner (a grid), so on
   mobile - where block 19 collapses the grid to one column - DOM order alone
   gives eyebrow -> photo -> body. Nothing here is needed for that case.

   These rules exist only to hold DESKTOP still. A third grid child would
   otherwise land in cell (1,1) and push the photo and body out of place, so
   the two-column layout is pinned explicitly and looks exactly as it did.
   ------------------------------------------------------------------------- */
@media (min-width:681px){
  .mt-founder--short .mt-founder__eyebrow--lead{ grid-column:2; grid-row:1; }
  .mt-founder--short .mt-founder__photo{ grid-column:1; grid-row:1 / span 2; }
  .mt-founder--short .mt-founder__body{ grid-column:2; grid-row:2; }
}
@media (max-width:680px){
  /* Explicitly return every child to auto placement, so the single-column
     grid follows DOM order rather than inheriting the pinned cells above. */
  .mt-founder--short .mt-founder__eyebrow--lead,
  .mt-founder--short .mt-founder__photo,
  .mt-founder--short .mt-founder__body{ grid-column:auto; grid-row:auto; }
  .mt-founder--short .mt-founder__eyebrow--lead{ margin-bottom:var(--mt-space-4); }
}