/* =========================================================================
   ATX WRITING CLUB — THE SHOP
   Product grid, product detail, cart, checkout, receipt.
   Built on system.css tokens; invents no colour and no duration.
   ========================================================================= */

/* -- PRODUCT GRID -------------------------------------------------------- */

.shop { --shop-gap: clamp(1.5rem, 3vw, 3rem); gap: var(--shop-gap); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .shop { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .shop { grid-template-columns: 1fr; } }

/* A season does not always hold three. Rather than let one or two cards
   stretch across a three-column track — which either strands them against a
   wall of empty space or blows the photography up to twice the size every
   other image on the site is set at — the grid keeps the card width it has at
   full count and centres what is there.

   Scoped to the three-column size on purpose: below it the plain rules already
   do the right thing, and these carry a column count that would otherwise beat
   the narrower breakpoints on source order and leave two cards squeezed side
   by side on a phone. */
@media (min-width: 1001px) {
  /* At three-up a card is (100% - 2 gaps) / 3, so two of them plus the gap
     between come to (200% - 1 gap) / 3. */
  .shop--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: calc((200% - var(--shop-gap)) / 3);
    margin-inline: auto;
  }
  .shop--1 {
    grid-template-columns: minmax(0, 1fr);
    max-width: calc((100% - var(--shop-gap) * 2) / 3);
    margin-inline: auto;
  }
}

/* Two-column territory. A lone card holds the two-up width and centres. */
@media (max-width: 1000px) and (min-width: 561px) {
  .shop--1 {
    grid-template-columns: minmax(0, 1fr);
    max-width: calc((100% - var(--shop-gap)) / 2);
    margin-inline: auto;
  }
}

.prod__row { align-items: baseline; }
.prod__c { font-family: var(--f-label); font-size: var(--t-meta); color: var(--ink-3); margin-top: .12rem; }
.prod__flag {
  position: absolute; left: 0; top: 0; z-index: 3;
  background: var(--ink); color: var(--paper);
  font-family: var(--f-label); font-size: var(--t-micro); font-weight: 620;
  letter-spacing: .18em; text-transform: uppercase; padding: .5em .85em;
}
.prod__flag--new  { background: var(--rust-ink); color: #FFF6E6; }
.prod__flag--sold { background: var(--paper-edge); color: var(--ink-2); }

/* The second shot cross-fades over the first on hover — the standard DTC
   move, run slowly enough to read as considered rather than reflexive. */
.prod__pair { position: relative; }
.prod__pair .fig + .fig { position: absolute; inset: 0; opacity: 0; transition: opacity 700ms var(--e-expo); }
.prod:hover .prod__pair .fig + .fig { opacity: 1; }
@media (hover: none) { .prod__pair .fig + .fig { display: none; } }

/* -- PRODUCT DETAIL ------------------------------------------------------ */

.pdp { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 900px) { .pdp { grid-template-columns: 1fr; } }

.gal { display: grid; gap: var(--s-4); }
.gal__main { background: var(--paper-lo); overflow: hidden; }
.gal__main img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.gal__thumbs { display: flex; gap: var(--s-3); }
.gal__thumbs button {
  width: clamp(64px, 7vw, 88px); border: 1px solid transparent; padding: 0;
  background: var(--paper-lo); opacity: .72;
  transition: border-color 300ms var(--e-expo), opacity 300ms var(--e-expo);
}
.gal__thumbs button[aria-current="true"] { border-color: var(--ink); opacity: 1; }
.gal__thumbs button:hover { opacity: 1; }
.gal__thumbs img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }

.pdp__buy { position: sticky; top: calc(var(--header-h) + 2rem); }
@media (max-width: 900px) { .pdp__buy { position: static; } }
.pdp__price { font-family: var(--f-display); font-size: var(--t-d2); letter-spacing: -.02em; }
.pdp__lede { font-size: var(--t-lead); line-height: 1.45; color: var(--ink-2); margin-top: var(--s-4); max-width: 38ch; }

.sizes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--s-3); }
.size {
  min-width: 3.6rem; padding: .85em .9em;
  font-family: var(--f-label); font-size: var(--t-meta); font-weight: 560;
  letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--rule-strong); background: transparent; color: var(--ink);
  transition: background-color 300ms var(--e-expo), color 300ms var(--e-expo), border-color 300ms var(--e-expo);
}
.size:hover:not(:disabled) { border-color: var(--ink); }
.size[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.size:disabled {
  color: var(--ink-4); cursor: not-allowed; border-style: dashed;
  background: repeating-linear-gradient(-45deg, transparent 0 5px,
              color-mix(in srgb, var(--ink) 5%, transparent) 5px 6px);
}
.size__low { display: block; font-size: 9px; letter-spacing: .1em; color: var(--rust-ink); margin-top: .15em; }
.size[aria-pressed="true"] .size__low { color: var(--rust-night); }

.buyrow { display: flex; gap: var(--s-3); margin-top: var(--s-5); align-items: stretch; }
.buyrow .btn { flex: 1; justify-content: center; }
.btn.is-added { --btn-fill: var(--olive-ink); color: var(--paper); border-color: var(--olive-ink); }
.btn.is-added::before { transform: scaleY(1); }

.qty { display: inline-flex; align-items: stretch; border: 1px solid var(--rule-strong); }
.qty__b { width: 2.5rem; display: grid; place-items: center; font-size: 1rem; line-height: 1;
  color: var(--ink-2); transition: background-color 240ms var(--e-expo); }
.qty__b:hover { background: var(--paper-hi); color: var(--ink); }
.qty__n { width: 2.6rem; text-align: center; border: 0; background: transparent;
  font-family: var(--f-label); font-size: var(--t-meta); -moz-appearance: textfield; }
.qty__n::-webkit-outer-spin-button, .qty__n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pdp__note { display: flex; gap: .55rem; align-items: flex-start; margin-top: var(--s-4);
  font-size: var(--t-small); color: var(--ink-2); }
.pdp__note .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--olive);
  flex: none; margin-top: .55em; }

.specs { margin-top: var(--s-6); border-top: 1px solid var(--rule); }
.specs__row { display: grid; grid-template-columns: 9rem 1fr; gap: var(--s-4);
  padding-block: .8rem; border-bottom: 1px solid var(--rule); font-size: var(--t-small); }
.specs__row dt { font-family: var(--f-label); font-size: var(--t-label); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); }
.specs__row dd { margin: 0; }
@media (max-width: 560px) { .specs__row { grid-template-columns: 1fr; gap: .15rem; } }

.err { font-family: var(--f-label); font-size: var(--t-meta); color: var(--rust-ink); margin-top: .5rem; }

/* -- CART LINES (shared: drawer + cart page) ----------------------------- */

.cline { display: grid; grid-template-columns: 4.5rem 1fr auto; gap: var(--s-4);
  padding-block: var(--s-5); border-bottom: 1px solid var(--rule); align-items: start; }
.cline__img { display: block; background: var(--paper-lo); }
.cline__img img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.cline__name { font-family: var(--f-display); font-size: 1.06rem; line-height: 1.2;
  text-decoration: none; display: block; }
.cline__meta { font-family: var(--f-label); font-size: var(--t-meta); color: var(--ink-3); margin-top: .15rem; }
.cline .qty { margin-top: .7rem; }
.cline__end { text-align: right; display: grid; gap: .4rem; justify-items: end; }
.cline__price { font-family: var(--f-label); font-size: var(--t-meta); font-weight: 560; letter-spacing: .04em; }
.cline__rm { font-family: var(--f-label); font-size: var(--t-micro); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); }

/* -- SUMMARY ------------------------------------------------------------- */

.sum { display: grid; gap: .55rem; margin: 0; }
.sum__row { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; font-size: var(--t-small); }
.sum__row dt { color: var(--ink-2); }
.sum__row dd { margin: 0; font-family: var(--f-label); font-size: var(--t-meta); letter-spacing: .03em; }
.sum__sub { font-family: var(--f-label); font-size: var(--t-micro); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); margin-left: .4em; }
.sum__row--credit dd { color: var(--olive-ink); }
.sum__row--total { margin-top: .5rem; padding-top: .75rem; border-top: 1px solid var(--rule-strong); }
.sum__row--total dt { font-family: var(--f-label); font-size: var(--t-label); letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink); }
.sum__row--total dd { font-family: var(--f-display); font-size: var(--t-d3); letter-spacing: -.02em; }
.tag { font-family: var(--f-label); font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--rule-strong); padding: .15em .4em; margin-left: .35em; }
:is(.night,.ftr,.menu,.tier--feature,.mcard--dark) .sum__row dt { color: var(--on-night-2); }

/* -- FREE SHIPPING BAR --------------------------------------------------- */

.freebar { padding-bottom: var(--s-4); }
.freebar__track { height: 2px; background: var(--rule); margin-top: .5rem; overflow: hidden; }
.freebar__track i { display: block; height: 100%; background: var(--rust); transition: width 700ms var(--e-expo); }
.freebar--done .freebar__track i { background: var(--olive); }

/* -- DRAWER -------------------------------------------------------------- */

/* Always leave a strip of scrim on the left, even on a 344px Fold. A drawer
   that covers the full viewport has no tap-outside-to-close affordance, and
   that is the first thing a thumb reaches for. */
.drawer { width: min(30rem, calc(100vw - 3.25rem)); }
.drawer__empty { display: grid; justify-items: start; padding-block: var(--s-6); }
.drawer__sub { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-bottom: var(--s-4); }
.drawer__sub dt { font-family: var(--f-label); font-size: var(--t-label); letter-spacing: .16em;
  text-transform: uppercase; }
.drawer__sub dd { margin: 0; font-family: var(--f-display); font-size: var(--t-d3); letter-spacing: -.02em; }

/* -- CART PAGE ----------------------------------------------------------- */

.cartgrid { display: grid; grid-template-columns: 1.5fr .8fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 900px) { .cartgrid { grid-template-columns: 1fr; } }
.cartaside { position: sticky; top: calc(var(--header-h) + 2rem); border: 1px solid var(--rule);
  padding: clamp(1.25rem, 2.4vw, 1.9rem); background: var(--paper-hi); }
@media (max-width: 900px) { .cartaside { position: static; } }

/* -- CHECKOUT ------------------------------------------------------------ */

.co { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 900px) { .co { grid-template-columns: 1fr; } }

.co-rail { display: flex; gap: clamp(.5rem, 1.6vw, 1.4rem); flex-wrap: wrap; list-style: none; padding: 0;
  padding-bottom: var(--s-5); border-bottom: 1px solid var(--rule); margin-bottom: var(--s-6); }
.co-rail li { display: flex; align-items: center; gap: .5rem;
  font-family: var(--f-label); font-size: var(--t-label); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); }
.co-rail li i { width: 1.55rem; height: 1.55rem; border: 1px solid var(--rule-strong); border-radius: 50%;
  display: grid; place-items: center; font-style: normal; font-size: 10px; flex: none; }
.co-rail li.is-current { color: var(--ink); }
.co-rail li.is-current i { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.co-rail li.is-done { color: var(--olive-ink); }
.co-rail li.is-done i { border-color: var(--olive-ink); color: var(--olive-ink); }

.co-step h2 { font-size: var(--t-d3); outline: none; }
.co-fields { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
.co-fields--2 { grid-template-columns: 1fr 1fr; }
.co-fields--3 { grid-template-columns: 1.4fr .8fr .8fr; }
@media (max-width: 620px) { .co-fields--2, .co-fields--3 { grid-template-columns: 1fr; } }
.co-actions { display: flex; gap: var(--s-4); align-items: center; margin-top: var(--s-6); flex-wrap: wrap; }

.field > span.label { display: block; margin-bottom: .1rem; }
.field [data-err] { font-family: var(--f-label); font-size: var(--t-meta); color: var(--rust-ink); margin-top: .35rem; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--rust-ink); }

.methods { display: grid; gap: .6rem; margin-top: var(--s-5); }
.method { display: flex; gap: var(--s-4); align-items: center; padding: clamp(.9rem, 1.8vw, 1.25rem);
  border: 1px solid var(--rule-strong); cursor: pointer;
  transition: border-color 320ms var(--e-expo), background-color 320ms var(--e-expo); }
.method:hover { background: var(--paper-hi); }
.method input { accent-color: var(--rust); width: 1.05rem; height: 1.05rem; flex: none; }
.method:has(input:checked) { border-color: var(--ink); background: var(--paper-hi); }
.method__t { flex: 1; }
.method__t b { font-family: var(--f-display); font-size: var(--t-d4); font-weight: 400; display: block; line-height: 1.2; }
.method__t span { font-family: var(--f-label); font-size: var(--t-meta); color: var(--ink-3); }
.method__p { font-family: var(--f-label); font-size: var(--t-meta); font-weight: 560; letter-spacing: .04em; }

.paynote { display: flex; gap: .75rem; align-items: flex-start; margin-top: var(--s-4);
  padding: var(--s-4); border: 1px dashed var(--rule-strong);
  background: color-mix(in srgb, var(--olive) 8%, transparent); font-size: var(--t-small); }
.paynote b { font-family: var(--f-label); font-size: var(--t-label); letter-spacing: .14em;
  text-transform: uppercase; display: block; margin-bottom: .2rem; }

.express { margin-top: var(--s-5); }
.express__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
@media (max-width: 560px) { .express__row { grid-template-columns: 1fr; } }
.express__b { border: 1px solid var(--rule-strong); padding: .95em; display: grid; place-items: center;
  font-family: var(--f-label); font-size: var(--t-meta); font-weight: 620; letter-spacing: .05em;
  transition: background-color 320ms var(--e-expo), border-color 320ms var(--e-expo); }
.express__b:hover { background: var(--paper-hi); border-color: var(--ink); }
.express__or { display: flex; align-items: center; gap: var(--s-4); margin-block: var(--s-5);
  font-family: var(--f-label); font-size: var(--t-micro); letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3); }
.express__or::before, .express__or::after { content: ''; flex: 1; height: 1px; background: var(--rule); }

.review { border-top: 1px solid var(--rule); margin-top: var(--s-5); }
.review__row { display: grid; grid-template-columns: 7.5rem 1fr auto; gap: var(--s-4);
  padding-block: var(--s-4); border-bottom: 1px solid var(--rule); align-items: baseline; font-size: var(--t-small); }
.review__row dt { font-family: var(--f-label); font-size: var(--t-label); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); }
.review__row dd { margin: 0; }
@media (max-width: 620px) { .review__row { grid-template-columns: 1fr auto; } .review__row dt { grid-column: 1 / -1; } }

.co-aside { position: sticky; top: calc(var(--header-h) + 2rem); border: 1px solid var(--rule);
  background: var(--paper-hi); padding: clamp(1.25rem, 2.4vw, 1.9rem); }
@media (max-width: 900px) { .co-aside { position: static; } }
.co-item { display: grid; grid-template-columns: 3.2rem 1fr auto; gap: var(--s-4);
  align-items: center; padding-block: .7rem; }
.co-item + .co-item { border-top: 1px solid var(--rule); }
.co-item__img { position: relative; display: block; }
.co-item__img img { width: 100%; aspect-ratio: 4/5; object-fit: cover; background: var(--paper-lo); }
.co-item__img i { position: absolute; top: -7px; right: -7px; min-width: 1.25rem; height: 1.25rem;
  border-radius: 50%; background: var(--ink); color: var(--paper); font-style: normal;
  font-family: var(--f-label); font-size: 10px; font-weight: 700;
  display: grid; place-items: center; padding-inline: .3em; }
.co-item__t b { font-family: var(--f-display); font-weight: 400; font-size: 1rem; display: block; line-height: 1.2; }
.co-item__t span { font-family: var(--f-label); font-size: var(--t-micro); letter-spacing: .06em; color: var(--ink-3); }
.co-item__p { font-family: var(--f-label); font-size: var(--t-meta); letter-spacing: .03em; }

.btn.is-busy { pointer-events: none; opacity: .78; }

/* -- RECEIPT ------------------------------------------------------------- */

.receipt { display: grid; grid-template-columns: 1fr .8fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 900px) { .receipt { grid-template-columns: 1fr; } }
.receipt__no { font-family: var(--f-label); font-size: var(--t-d4); font-weight: 620; letter-spacing: .1em;
  border: 1px solid var(--rule-strong); padding: .5em .8em; display: inline-block; }

/* Sold-out notice on a product page. The shop grid stays unmarked on purpose;
   this is the one place the state has to be unmissable. */
.pdp__sold {
  display: flex; align-items: center; gap: .85rem; flex-wrap: wrap;
  font-size: var(--t-small); color: var(--ink-2);
}
.pdp__sold .prod__flag { position: static; }

/* -- PAYMENT ------------------------------------------------------------- */
/* The payment step cannot be display:none while the shopper is on review —
   Stripe's iframe stops responding — so it is parked out of the flow instead.
   Off-screen, zero-height, and hidden from assistive tech, but still painted
   by the browser, which is what keeps the element alive. */
.co-step.is-parked {
  position: absolute;
  left: -10000px;
  top: 0;
  width: 40rem;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
.co { position: relative; }

.pay-loading {
  font-family: var(--f-label);
  font-size: var(--t-meta);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 2.5rem 0;
}

.pay-error {
  margin-top: 1rem;
  padding: .85rem 1rem;
  border-left: 2px solid var(--rust);
  background: var(--paper-lo);
  font-size: var(--t-small);
  color: var(--rust-ink);
}

.btn.is-busy { opacity: .6; pointer-events: none; }

/* Stripe's iframe sets its own height; without this the mount collapses on
   first paint and the form appears to flicker in. */
#pay-mount { min-height: 1px; }

/* -- NOT YET FOR SALE ----------------------------------------------------
   Season 02 is on the site before it is on sale. The state has to be
   unmissable without being loud, so it borrows the same flag the grid
   already uses and changes only the ground: olive rather than rust, because
   rust is the colour of every button that does something. */
.prod__flag--soon { background: var(--olive); color: #FFF6E6; }

/* The card's price cell. It carries the season instead of a number — see the
   note in shop.html for why there is no price on a piece nobody can buy. */
.prod__p--soon {
  font-family: var(--f-label); font-size: var(--t-meta);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}

/* Same construction as .pdp__sold, which this sits in place of. */
.pdp__soon {
  display: flex; align-items: center; gap: .85rem; flex-wrap: wrap;
  font-size: var(--t-small); color: var(--ink-2);
}
.pdp__soon .prod__flag { position: static; }

/* What replaces the size grid, the quantity stepper and the button. Ruled on
   one side rather than boxed: a box here reads as another control. */
.pdp__soonbox {
  border-left: 2px solid var(--olive);
  padding: var(--s-1) 0 var(--s-1) var(--s-4);
}
.pdp__soonbox p { margin: 0; max-width: 46ch; color: var(--ink-2); }

.pdp__price--soon {
  font-family: var(--f-label); letter-spacing: .1em; text-transform: uppercase;
  font-size: var(--t-meta); color: var(--ink-3);
}

/* The colour sits under the name rather than beside it. It always did on the
   two Season 01 pieces, whose names are short enough that the line never
   broke; "The Lone Star Literary Club Tee" is long enough that the inline
   version wrapped the colour onto its own line anyway, unevenly, and dragged
   the season label with it. Making it a block is what the .12rem top margin
   was written for in the first place. */
.prod__c { display: block; }
/* Two words that must not become four lines in a narrow right-hand cell. */
.prod__p--soon { white-space: nowrap; }