/* ==========================================================================
   MERCH — shop grid, product detail, cart and checkout.

   Uses the site's existing tokens (--bg-2, --line, --volt, --fg-3 …) so the
   shop inherits the studio's palette rather than introducing a second one.
   ========================================================================== */

/* ---- MERCH PREVIEW (prototype only) ------------------------------------- */
.mp { padding-top: calc(var(--nav-h) + clamp(1.6rem,5vh,3rem)); padding-bottom: clamp(4rem,10vh,7rem); }
.mp__head { margin-bottom: clamp(1.6rem,4vh,2.4rem); }
.mp__lede { color: var(--fg-2); max-width: 58ch; margin-top: .9rem; }

.mp-flag {
  margin: 1.4rem 0 2.2rem; padding: .95rem 1.15rem; display: flex; gap: .8rem; align-items: flex-start;
  border: 1px solid rgba(255,176,32,.45); background: rgba(255,176,32,.07); border-radius: 3px;
}
.mp-flag__k { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing:.14em; text-transform: uppercase; color: var(--warning); white-space: nowrap; padding-top:.12rem; }
.mp-flag__t { font-size: var(--t-sm); color: var(--fg-2); line-height:1.55; }

/* toolbar */
.mp-bar { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.mp-count { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing:.14em; text-transform:uppercase; color: var(--fg-3); }

/* grid */
.mp-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(255px,1fr)); gap: clamp(.9rem,2vw,1.4rem); }
.mp-card { border:1px solid var(--line); background: var(--bg-3); border-radius:3px; overflow:hidden; text-align:left; display:flex; flex-direction:column; transition: border-color .3s, transform .3s; }
.mp-card:hover { border-color: var(--line-hard); transform: translateY(-3px); }
.mp-card__media { display:block; aspect-ratio: 1/1; overflow:hidden; background:#fff; position:relative; }
.mp-card__media img { width:100%; height:100%; object-fit:contain; transition: transform .8s var(--e-out,cubic-bezier(.2,.7,.2,1)); }
.mp-card:hover .mp-card__media img { transform: scale(1.04); }
.mp-card__body { padding: .95rem 1rem 1.1rem; display:grid; gap:.32rem; }
.mp-card__name { font-family: var(--f-display); font-weight:900; font-stretch:112%; text-transform:uppercase; font-size: var(--t-md,1.05rem); letter-spacing:-.02em; line-height:1.05; }
.mp-card__sub { font-size: var(--t-sm); color: var(--fg-3); line-height:1.45; }
.mp-card__meta { display:flex; justify-content:space-between; align-items:baseline; margin-top:.35rem; gap:.6rem; }
.mp-card__price { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing:.1em; color: var(--volt); }
.mp-card__sw { display:flex; gap:3px; }
.mp-card__sw i { width:9px; height:9px; border-radius:50%; border:1px solid rgba(255,255,255,.28); display:block; }

/* detail panel */
.mp-modal { position:fixed; inset:0; z-index:120; display:none; }
.mp-modal.is-open { display:block; }
.mp-modal__veil { position:absolute; inset:0; background: rgba(3,4,7,.82); backdrop-filter: blur(5px); }
.mp-modal__panel { position:absolute; inset:0; overflow-y:auto; padding: clamp(1rem,4vh,3rem) clamp(1rem,4vw,2rem); }
.mp-sheet { max-width: 1080px; margin:0 auto; background: var(--bg-2); border:1px solid var(--line); border-radius:4px; }
.mp-sheet__top { display:flex; justify-content:space-between; align-items:center; padding:.85rem 1rem .85rem 1.25rem; border-bottom:1px solid var(--line-soft); position:sticky; top:0; background:var(--bg-2); z-index:2; }
.mp-sheet__k { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing:.16em; text-transform:uppercase; color: var(--fg-3); }
.mp-x { width:34px; height:34px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; color:var(--fg-2); font-size:16px; line-height:1; }
.mp-x:hover { border-color:var(--volt); color:var(--volt); }
.mp-sheet__grid { display:grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1rem,3vw,2.2rem); padding: clamp(1rem,3vw,1.8rem); }
.mp-gal__main { aspect-ratio:1/1; background:#fff; border-radius:3px; overflow:hidden; }
.mp-gal__main img { width:100%; height:100%; object-fit:contain; }
.mp-gal__thumbs { display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; margin-top:.5rem; }
.mp-thumb { aspect-ratio:1/1; background:#fff; border:1px solid transparent; border-radius:2px; overflow:hidden; padding:0; }
.mp-thumb img { width:100%; height:100%; object-fit:contain; }
.mp-thumb.is-on { border-color: var(--volt); }
.mp-thumb__cap { display:block; font-family:var(--f-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-4); text-align:center; margin-top:.25rem; }

.mp-d__name { font-family:var(--f-display); font-weight:900; font-stretch:118%; text-transform:uppercase; font-size: clamp(1.5rem,3.4vw,2.1rem); line-height:.94; letter-spacing:-.03em; }
.mp-d__sub { color:var(--fg-3); font-size:var(--t-sm); margin-top:.5rem; }
.mp-d__price { font-family:var(--f-display); font-weight:900; font-size: clamp(1.6rem,3.6vw,2.2rem); letter-spacing:-.03em; margin:.9rem 0 .2rem; }
.mp-d__gst { font-family:var(--f-mono); font-size:var(--t-micro); letter-spacing:.1em; color:var(--fg-4); text-transform:uppercase; }
.mp-lbl { font-family:var(--f-mono); font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3); margin:1.35rem 0 .55rem; display:flex; justify-content:space-between; align-items:center; gap:.6rem; }
.mp-lbl b { color:var(--fg); font-weight:500; letter-spacing:.06em; }

.mp-sw { display:flex; flex-wrap:wrap; gap:7px; }
.mp-sw button { width:26px; height:26px; border-radius:50%; border:1px solid rgba(255,255,255,.25); position:relative; padding:0; }
.mp-sw button.is-on { box-shadow:0 0 0 2px var(--bg-2), 0 0 0 3.5px var(--volt); }
.mp-sw button[disabled] { opacity:.26; cursor:not-allowed; }
.mp-sw button[disabled]::after { content:''; position:absolute; inset:0; background:linear-gradient(to top left,transparent 46%,rgba(255,255,255,.7) 46%,rgba(255,255,255,.7) 54%,transparent 54%); border-radius:50%; }

.mp-sizes { display:flex; flex-wrap:wrap; gap:6px; }
.mp-sizes button { min-width:46px; padding:.5rem .62rem; border:1px solid var(--line); border-radius:2px; font-family:var(--f-mono); font-size:var(--t-micro); letter-spacing:.06em; color:var(--fg-2); background:var(--bg-3); }
.mp-sizes button:hover { border-color:var(--line-hard); color:var(--fg); }
.mp-sizes button.is-on { border-color:var(--volt); color:var(--volt); background:rgba(43,255,136,.08); }

.mp-qty { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:2px; overflow:hidden; }
.mp-qty button { width:34px; height:34px; color:var(--fg-2); font-size:16px; }
.mp-qty button:hover { background:var(--bg-4); color:var(--fg); }
.mp-qty span { min-width:38px; text-align:center; font-family:var(--f-mono); font-size:var(--t-sm); }
.mp-actions { display:flex; gap:.6rem; align-items:center; margin-top:1.4rem; flex-wrap:wrap; }
.mp-note { font-size:var(--t-sm); color:var(--fg-3); margin-top:.85rem; line-height:1.5; }
.mp-spec { margin-top:1.5rem; border-top:1px solid var(--line-soft); padding-top:1.1rem; }
.mp-spec h4 { font-family:var(--f-mono); font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3); margin-bottom:.6rem; font-weight:400; }
.mp-spec li { font-size:var(--t-sm); color:var(--fg-2); padding-left:1rem; position:relative; line-height:1.6; }
.mp-spec li::before { content:'·'; position:absolute; left:.25rem; color:var(--volt); }
.mp-src { display:inline-block; margin-top:.9rem; font-family:var(--f-mono); font-size:var(--t-micro); letter-spacing:.08em; color:var(--fg-4); border-bottom:1px solid var(--line); }
.mp-src:hover { color:var(--volt); border-color:var(--volt); }

/* cart */
.mp-fab { position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vh,2rem); z-index:100; display:flex; align-items:center; gap:.55rem; padding:.8rem 1.15rem; border-radius:100px; background:var(--volt); color:#04150b; font-family:var(--f-mono); font-size:var(--t-micro); letter-spacing:.12em; text-transform:uppercase; font-weight:600; box-shadow:0 8px 30px rgba(43,255,136,.3); }
.mp-fab b { background:#04150b; color:var(--volt); border-radius:100px; padding:.1rem .45rem; font-size:10px; }
.mp-cart { position:fixed; inset:0; z-index:130; display:none; }
.mp-cart.is-open { display:block; }
.mp-cart__veil { position:absolute; inset:0; background:rgba(3,4,7,.8); backdrop-filter:blur(5px); }
.mp-cart__panel { position:absolute; top:0; right:0; height:100%; width:min(430px,100%); background:var(--bg-2); border-left:1px solid var(--line); display:flex; flex-direction:column; }
.mp-cart__head { display:flex; justify-content:space-between; align-items:center; padding:1rem 1.1rem; border-bottom:1px solid var(--line-soft); }
.mp-cart__body { flex:1; overflow-y:auto; padding:1rem 1.1rem; }
.mp-line { display:grid; grid-template-columns:62px 1fr auto; gap:.8rem; padding:.85rem 0; border-bottom:1px solid var(--line-soft); align-items:start; }
.mp-line__img { width:62px; height:62px; background:#fff; border-radius:2px; overflow:hidden; }
.mp-line__img img { width:100%; height:100%; object-fit:contain; }
.mp-line__n { font-size:var(--t-sm); line-height:1.3; }
.mp-line__v { font-family:var(--f-mono); font-size:10px; letter-spacing:.08em; color:var(--fg-4); text-transform:uppercase; margin-top:.25rem; }
.mp-line__p { font-family:var(--f-mono); font-size:var(--t-sm); white-space:nowrap; }
.mp-rm { font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-4); margin-top:.5rem; border-bottom:1px solid transparent; }
.mp-rm:hover { color:var(--error); border-color:var(--error); }
.mp-cart__foot { border-top:1px solid var(--line); padding:1rem 1.1rem 1.2rem; }
.mp-row { display:flex; justify-content:space-between; font-size:var(--t-sm); color:var(--fg-2); padding:.28rem 0; }
.mp-row--tot { color:var(--fg); font-family:var(--f-display); font-weight:900; font-size:1.35rem; letter-spacing:-.02em; padding-top:.7rem; margin-top:.5rem; border-top:1px solid var(--line-soft); }
.mp-empty { text-align:center; color:var(--fg-3); font-size:var(--t-sm); padding:3rem 1rem; }

/* checkout */
.mp-co { display:grid; gap:.75rem; }
.mp-co input, .mp-co select { width:100%; padding:.7rem .8rem; background:var(--bg-3); border:1px solid var(--line); border-radius:2px; font-size:var(--t-sm); color:var(--fg); }
.mp-co input:disabled { opacity:.55; cursor:not-allowed; }
.mp-co__two { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }

@media (max-width: 860px) {
  .mp-sheet__grid { grid-template-columns:1fr; }
  .mp-co__two { grid-template-columns:1fr; }
  .mp-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
  .mp-card__name { font-size:.92rem; }
  .mp-fab { left:clamp(1rem,3vw,2rem); justify-content:center; }
}

/* ---- layered garment + artwork ----------------------------------------- */
.mp-fig { display:block; position:relative; width:100%; aspect-ratio:1/1; background:#fff; overflow:hidden; }
.mp-fig__g { width:100%; height:100%; object-fit:contain; display:block; }
.mp-fig__a { position:absolute; object-fit:contain; pointer-events:none; }
.mp-card__media { padding:0; border:0; background:none; width:100%; display:block; }
.mp-card__sw em { font-family:var(--f-mono); font-size:9px; font-style:normal; color:var(--fg-4); margin-left:.4rem; letter-spacing:.06em; }
.mp-gal__thumbs--2 { grid-template-columns:repeat(2,1fr); max-width:260px; }
.mp-line__img .mp-fig { width:62px; height:62px; }
#mp-artwarn { margin:0 0 1.6rem; }

.mp-gal__thumbs--2{display:none}

/* ---- front/back on the grid card --------------------------------------
   Both views are rendered; the back sits on top at zero opacity so the
   swap is instant and needs no second network round-trip on hover. */
.mp-card__media { position:relative; }
.mp-card__media .mp-fig--b { position:absolute; inset:0; opacity:0; transition:opacity .35s ease; }
.mp-card:hover .mp-card__media .mp-fig--b,
.mp-card__media:focus-visible .mp-fig--b { opacity:1; }
.mp-card__flip {
  position:absolute; right:.6rem; bottom:.6rem; z-index:2;
  font-family:var(--f-mono); font-size:9px; letter-spacing:.09em; text-transform:uppercase;
  padding:.25rem .5rem; border-radius:2px;
  background:rgba(0,0,0,.62); color:#fff;
  opacity:0; transition:opacity .35s ease; pointer-events:none;
}
.mp-card:hover .mp-card__flip { opacity:1; }

/* ---- ink/garment contrast heads-up ------------------------------------
   Shown when the print tone and the garment tone are too close to read.
   It is an observation about visibility, not a print-quality claim. */
.mp-warn {
  margin-top:.6rem; padding:.55rem .7rem;
  border-left:2px solid var(--warning, #e0a030);
  background:color-mix(in srgb, var(--warning, #e0a030) 8%, transparent);
  font-size:var(--t-sm); line-height:1.45; color:var(--fg-2);
}

/* ---- checkout form ------------------------------------------------------ */
.mp-co { display:flex; flex-direction:column; gap:.85rem; }
.mp-co__h {
  font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--fg-3); margin:.6rem 0 0;
}
.mp-co__h:first-child { margin-top:0; }
.mp-co__two { display:grid; grid-template-columns:2fr 1fr; gap:.7rem; }

.mp-f { display:flex; flex-direction:column; gap:.3rem; }
.mp-f > span {
  font-family:var(--f-mono); font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--fg-3);
}
.mp-f input, .mp-f select {
  width:100%; padding:.7rem .8rem;
  background:var(--bg-2); color:var(--fg-1);
  border:1px solid var(--line); border-radius:2px;
  font-family:inherit; font-size:16px;   /* 16px stops iOS zooming the page on focus */
}
.mp-f input:focus, .mp-f select:focus { outline:none; border-color:var(--volt); }
.mp-f input.is-bad, .mp-f select.is-bad { border-color:var(--warning, #e0a030); }

.mp-check { display:flex; gap:.6rem; align-items:flex-start; font-size:var(--t-sm); color:var(--fg-2); line-height:1.45; }
.mp-check input { margin-top:.2rem; flex:0 0 auto; }

.mp-err {
  margin:0; padding:.6rem .7rem;
  border-left:2px solid var(--warning, #e0a030);
  background:color-mix(in srgb, var(--warning, #e0a030) 10%, transparent);
  font-size:var(--t-sm); line-height:1.45; color:var(--fg-1);
}

/* Square mounts its card iframe here. It needs a minimum height or the
   iframe collapses to nothing before it finishes loading. */
.mp-card-mount { min-height:92px; }

.mp-done { text-align:left; }
.mp-done h3 { margin:.6rem 0 .8rem; font-size:1.25rem; }
.mp-done p { color:var(--fg-2); line-height:1.55; margin:0 0 .7rem; }

@media (max-width:520px) {
  .mp-co__two { grid-template-columns:1fr 1fr; }
}