/* =========================================================================
   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 { 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; } }

.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; }