/* =========================================================================
   SEASONAL DROP PAGE - added 2026-09-11.
   Renders on /collections/<season>/ via inc/seasonal-drop.php.
   Spec: projects/moshtee/seasonal-drop-spec-2026-09-10.md

   ACCENT DISCIPLINE HOLDS HERE. --mt-season-accent defaults to blood and is
   set per season from PHP, so Christmas overrides one custom property and
   nothing else. Blood measures 2.51:1 on ink, which fails even the 3:1
   non-text bar, so it NEVER carries type on this page - it is the fill behind
   bone (6.46:1) on the clock digits and the CTA, and nothing more. The eyebrow
   is bone-dim, not accent, for exactly this reason; the reference store's
   orange eyebrow is not reproducible inside this palette.
   ========================================================================= */
.mt-drop-hero{
  --mt-season-accent:var(--mt-blood);
  text-align:center;
  max-width:760px;
  margin:0 auto var(--mt-space-8);
  padding:var(--mt-space-7) var(--mt-space-4) 0;
}
.mt-drop-hero__eyebrow{
  font-size:var(--mt-fs-eyebrow);
  letter-spacing:var(--mt-ls-eyebrow);
  text-transform:uppercase;
  color:var(--mt-bone-dim);
  margin:0 0 var(--mt-space-5);
}
.mt-drop-hero__headline{
  font-size:var(--mt-fs-h1);
  line-height:.95;
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:var(--mt-bone);
  margin:0 0 var(--mt-space-5);
}
.mt-drop-hero__line{ display:block; }
.mt-drop-hero__sub{
  font-size:var(--mt-fs-body);
  line-height:1.55;
  color:var(--mt-steel-text);
  max-width:52ch;
  margin:0 auto var(--mt-space-6);
}

/* ---- the clock -------------------------------------------------------- */
.mt-drop-clock{ margin:0 0 var(--mt-space-6); }
.mt-drop-clock__label{
  font-size:var(--mt-fs-eyebrow);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mt-bone-dim);
  margin:0 0 var(--mt-space-3);
}
.mt-drop-clock__units{
  display:flex;
  justify-content:center;
  gap:var(--mt-space-3);
}
.mt-drop-clock__unit{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:64px;
  padding:var(--mt-space-3) var(--mt-space-2);
  background:var(--mt-season-accent);
}
.mt-drop-clock__unit b{
  font-size:26px;
  line-height:1;
  font-weight:700;
  color:var(--mt-bone);
  /* Tabular figures: without this the box jitters every second as the glyph
     widths change, which reads as a broken widget rather than a clock. */
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
.mt-drop-clock__unit i{
  font-style:normal;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mt-bone-dim);
  margin-top:var(--mt-space-1);
}

/* ---- CTA -------------------------------------------------------------- */
.mt-drop-hero__cta-wrap{ margin:0 0 var(--mt-space-6); }
/* scoped to a.: the homepage View-all WRAPPER is div.mt-drop-cta (2026-09-17) */
a.mt-drop-cta{
  display:inline-block;
  padding:16px 34px;
  background:var(--mt-season-accent);
  /* The generated style.css paints every button and .button blood with
     !important, so this is authored as an <a> and still declares its own
     colour to win. See chrome-ux.css. */
  color:var(--mt-bone) !important;
  font-weight:700;
  font-size:var(--mt-fs-small);
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  transition:background var(--mt-dur) var(--mt-ease);
  min-height:48px;
}
a.mt-drop-cta:hover,
a.mt-drop-cta:focus{ background:var(--mt-blood-hover); color:var(--mt-bone) !important; }

.mt-drop-hero__strip{ margin:0; }

/* ---- the break between the two tiers ---------------------------------- */
.mt-drop-break{
  text-align:center;
  max-width:var(--mt-container);
  margin:var(--mt-space-8) auto var(--mt-space-6);
  padding-top:var(--mt-space-6);
  border-top:1px solid var(--mt-hairline);
}
.mt-drop-break__title{
  font-size:var(--mt-fs-h2);
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--mt-bone);
  margin:0 0 var(--mt-space-2);
}
.mt-drop-break__sub{
  font-size:var(--mt-fs-small);
  color:var(--mt-steel-text);
  margin:0;
}

/* ---- DROP CLOSED badge ------------------------------------------------ */
/* Sits on the card wherever the card appears, /shop included - the six stay in
   the shop after the drop closes (Pavel, 2026-09-11), and a card that looks
   ordinary until the product page is worse than one that says what it is. */
.mt-drop-badge{
  position:absolute;
  top:var(--mt-space-2);
  left:var(--mt-space-2);
  z-index:3;
  display:flex;
  flex-direction:column;
  padding:6px 10px;
  background:var(--mt-ink);
  border:1px solid var(--mt-hairline-strong);
  pointer-events:none;
}
.mt-drop-badge b{
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mt-bone);
  line-height:1.1;
}
.mt-drop-badge i{
  font-style:normal;
  font-size:10px;
  letter-spacing:.04em;
  color:var(--mt-steel-text);
  line-height:1.2;
  margin-top:2px;
}

/* ---- closed state ----------------------------------------------------- */
.mt-drop-hero.is-closed .mt-drop-clock,
.mt-drop-hero.is-closed .mt-drop-hero__cta-wrap{ display:none; }

@media (max-width:680px){
  .mt-drop-hero{ padding-top:var(--mt-space-6); margin-bottom:var(--mt-space-6); }
  .mt-drop-clock__units{ gap:var(--mt-space-2); }
  .mt-drop-clock__unit{ min-width:0; flex:1 1 0; padding:var(--mt-space-2) 4px; }
  .mt-drop-clock__unit b{ font-size:20px; }
  .mt-drop-clock__unit i{ font-size:10px; letter-spacing:.08em; }
  a.mt-drop-cta{ display:block; }
  .mt-drop-break{ margin-top:var(--mt-space-6); }
}

/* ---- the drop tier is 3-up, and it has to fight frontpass.css ----------
   frontpass.css hardcodes `.products.layout-grid{ grid-template-columns:
   repeat(4,minmax(0,1fr)) !important }` with matching 991px/640px steps. That
   !important makes TeeSpace's own grid-columns-N classes INERT on this store -
   the class is emitted, computes to nothing, and the grid silently renders 4-up.
   Measured 2026-09-11: the drop tier came out at 267px cards, identical to the
   year-round tier, with grid-columns-3 on the container doing nothing.

   So the column count is set here instead, at (0,3,0) against frontpass's
   (0,2,0), with !important to beat !important, in a sheet that loads after it.
   Breakpoints deliberately mirror frontpass's so the two tiers step together.
   ---------------------------------------------------------------------- */
.products.layout-grid.mt-seasonal-grid--drop{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
@media (max-width:991px){
  .products.layout-grid.mt-seasonal-grid--drop{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}
@media (max-width:640px){
  .products.layout-grid.mt-seasonal-grid--drop{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* PDP drop line (inc/seasonal-drop.php mt_seasonal_pdp_line), 2026-09-15.
   BONE text, BLOOD only as a dot: red text on INK measures ~2.3:1. */
.single-product .mt-pdp-drop {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 4px 0 10px;
	padding: 0;
	font-size: 12px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #EDE8DF;
}
.single-product .mt-pdp-drop::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #A3121F;
}