/* ============================================================
   DANK MOON PICS — shared page + component styles
   ============================================================ */

/* ---------- product cards ---------- */
.pcard{display:flex;flex-direction:column;gap:13px}
.pcard__art{position:relative;border-radius:var(--radius);aspect-ratio:4/5;display:grid;place-items:center;
  overflow:hidden;background:linear-gradient(160deg,var(--bg-2),var(--surface));box-shadow:var(--shadow);
  transition:box-shadow .35s var(--ease),transform .35s var(--ease)}
.pcard__art:hover{box-shadow:var(--shadow-lift)}
.tee{width:80%;height:auto;filter:drop-shadow(0 18px 28px rgba(20,54,92,.20));transition:transform .45s var(--ease)}
.pcard__art:hover .tee{transform:translateY(-8px) rotate(-1.5deg) scale(1.035)}
.pcard__quick{position:absolute;left:14px;right:14px;bottom:14px;display:flex;flex-direction:column;align-items:center;gap:8px;
  transform:translateY(130%);transition:transform .38s var(--ease);opacity:0}
.pcard__art:hover .pcard__quick,.pcard__art:focus-within .pcard__quick{transform:none;opacity:1}
.pcard__add{width:100%;justify-content:center}
.pcard__view{font-family:var(--sans);font-size:12px;font-weight:600;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.pcard__info{display:flex;flex-direction:column;gap:3px}
.pcard__info h3{font-size:19px;font-weight:600;line-height:1.12;transition:color .2s}
.pcard__info a:hover h3{color:var(--accent)}
.pcard__info p{margin:0;font-size:13.5px;color:var(--ink-soft);line-height:1.45}
.pcard__price{font-family:var(--serif);font-size:18px;font-weight:600;margin-top:3px}
.pcard__swatches{display:flex;align-items:center;gap:7px;margin-top:7px}
.pcard__dot{width:15px;height:15px;border-radius:50%;padding:0;cursor:pointer;
  border:1px solid var(--hairline);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
  transition:transform .15s var(--ease)}
.pcard__dot:hover{transform:scale(1.2)}
.pcard__dot.on{outline:2px solid var(--accent);outline-offset:2px}
.pcard__more{font-size:12px;font-weight:600;color:var(--ink-soft)}

/* skeleton cards while the live catalog loads */
.pcard--ghost{animation:ghostPulse 1.6s ease-in-out infinite;pointer-events:none}
.pcard--ghost .pcard__art{box-shadow:none;background:var(--bg-2)}
.ghost-line{display:block;height:14px;border-radius:7px;background:var(--bg-2)}
.ghost-line.w60{width:60%}
.ghost-line.w30{width:30%;margin-top:6px}
@keyframes ghostPulse{50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.pcard--ghost{animation:none}}

/* ---------- page header ---------- */
.phead{position:relative;background:radial-gradient(120% 120% at 75% 0%,#15224a,#0B1026);color:#F4EFE2;overflow:hidden;
  padding:clamp(56px,9vw,108px) 0 clamp(48px,7vw,84px)}
.phead__stars{position:absolute;inset:0}
.phead__in{position:relative;z-index:2;max-width:62ch}
.phead .eyebrow{color:#FF8FA0}
.phead h1{font-size:clamp(38px,6vw,76px);margin-top:14px;color:#fff;line-height:.98}
.phead h1.h1--oneline{white-space:nowrap;max-width:max-content;font-size:clamp(28px,6.2vw,76px)}
.phead p{margin-top:18px;color:rgba(244,239,226,.76);font-size:clamp(16px,1.5vw,19px);max-width:54ch}

/* ---------- store ---------- */
.store-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:34px}
.filters{display:flex;gap:9px;flex-wrap:wrap}
.filter{font-family:var(--sans);font-weight:600;font-size:13.5px;padding:9px 16px;border-radius:999px;cursor:pointer;white-space:nowrap;
  border:1px solid var(--hairline);background:var(--surface);color:var(--ink-soft);transition:all .2s}
.filter:hover{color:var(--ink)}
.filter.on{background:var(--navy);color:#fff;border-color:var(--navy)}
html[data-theme="dark"] .filter.on{background:var(--planet);color:#08122b;border-color:var(--planet)}
.store-count{font-size:14px;color:var(--ink-soft)}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 24px}
@media (max-width:900px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.pgrid{grid-template-columns:1fr}}

/* related row: 4-up grid on desktop, self-contained swipe strip on small screens */
.grid-row{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media (max-width:900px){
  .grid-row{display:flex;gap:16px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;scroll-snap-type:x proximity;
    scrollbar-width:none;padding-bottom:6px}
  .grid-row::-webkit-scrollbar{display:none}
  .grid-row>*{flex:0 0 min(68vw,260px);scroll-snap-align:start}
}

/* ---------- product detail (PDP) ---------- */
.pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start;padding:clamp(40px,6vw,72px) 0}
.pdp__gallery{position:sticky;top:calc(var(--nav-h) + 20px)}
.pdp__stage{border-radius:var(--radius);aspect-ratio:1;display:grid;place-items:center;background:linear-gradient(160deg,var(--bg-2),var(--surface));box-shadow:var(--shadow-lift);overflow:hidden}
.pdp__stage .tee{width:72%}
.pdp__thumbs{display:flex;gap:12px;margin-top:14px}
.pdp__thumb{width:74px;aspect-ratio:1;border-radius:12px;border:2px solid transparent;cursor:pointer;display:grid;place-items:center;
  background:linear-gradient(160deg,var(--bg-2),var(--surface));overflow:hidden;transition:border-color .2s}
.pdp__thumb.on{border-color:var(--accent)}
.pdp__thumb .tee{width:74%}
.pdp__info .eyebrow{margin-bottom:10px;display:block}
.pdp__info h1{font-size:clamp(32px,4.6vw,52px);line-height:1.08}
.pdp__price{font-family:var(--serif);font-size:30px;font-weight:600;margin:22px 0 0}
.pdp__tag{color:var(--ink-soft);margin-top:14px;font-size:17px;max-width:46ch}
.pdp__label{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin:26px 0 11px}
.sizes{display:flex;gap:9px;flex-wrap:wrap}
.size{min-width:50px;height:46px;padding:0 14px;border-radius:12px;border:1.5px solid var(--hairline);background:var(--surface);
  font-family:var(--sans);font-weight:600;cursor:pointer;color:var(--ink);transition:all .18s}
.size:hover{border-color:var(--ink-soft)}
.size.on{background:var(--navy);color:#fff;border-color:var(--navy)}
html[data-theme="dark"] .size.on{background:var(--planet);color:#08122b;border-color:var(--planet)}
.pdp__buy{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.pdp__buy .btn{flex:1;min-width:180px;justify-content:center}
.pdp__acc{margin-top:34px;border-top:1px solid var(--hairline)}
.acc{border-bottom:1px solid var(--hairline)}
.acc__h{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:0;cursor:pointer;
  padding:18px 0;font-family:var(--serif);font-size:18px;font-weight:600;color:var(--ink);text-align:left}
.acc__h .pm{font-family:var(--sans);font-size:22px;transition:transform .3s}
.acc.open .pm{transform:rotate(45deg)}
.acc__b{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.acc__b p{padding:0 0 18px;color:var(--ink-soft);font-size:15px;margin:0}
.acc__b ul{margin:0;padding:0 0 18px 20px;color:var(--ink-soft);font-size:15px}
.acc__b li{margin:0 0 7px;line-height:1.5}
.acc__b li:last-child{margin-bottom:0}
.pdp__ship{display:flex;gap:10px;align-items:center;margin-top:20px;font-size:13.5px;color:var(--ink-soft)}
@media (max-width:820px){.pdp{grid-template-columns:1fr;gap:30px}.pdp__gallery{position:static}}

/* ---------- doc / legal ---------- */
.doc{max-width:760px;margin:0 auto;padding:clamp(44px,6vw,72px) 0 90px}
.doc .draft{display:inline-flex;align-items:center;gap:8px;background:color-mix(in srgb,var(--accent) 12%,transparent);
  color:var(--accent);font-family:var(--sans);font-weight:600;font-size:13px;padding:9px 15px;border-radius:999px;margin-bottom:26px}
.doc h2{font-size:26px;margin:42px 0 12px;scroll-margin-top:90px}
.doc h3{font-family:var(--sans);font-weight:700;font-size:16px;margin:24px 0 8px}
.doc p,.doc li{color:var(--ink-soft);font-size:16px;line-height:1.7}
.doc ul{padding-left:22px}
.doc li{margin:6px 0}
.doc .meta{color:var(--ink-faint);font-size:14px}
.toc{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);padding:22px 26px;margin:28px 0 8px}
.toc h4{font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 12px}
.toc a{display:block;padding:5px 0;color:var(--ink-soft);font-size:15px}
.toc a:hover{color:var(--accent)}

/* ---------- giving (about) ---------- */
.giving{background:var(--space);color:var(--paper);position:relative;overflow:hidden}
.giving__stars{position:absolute;inset:0;opacity:.5}
.giving__in{position:relative;z-index:2}
.giving h2{color:#fff;font-size:clamp(30px,4.4vw,52px)}
.giving .lede{color:rgba(244,239,226,.78)}
.disclosure{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);
  padding:clamp(26px,4vw,42px);margin-top:30px}
.disclosure h3{color:#fff;font-size:24px}
.disclosure .yr{font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#FF8FA0}
.disclosure .ph{margin-top:18px;display:grid;gap:12px}
.disclosure .ph-row{display:flex;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:1px dashed rgba(255,255,255,.16);color:rgba(244,239,226,.7)}
.disclosure .ph-row span:first-child{color:#fff}
.disclosure .ph-note{font-size:13px;color:rgba(244,239,226,.5);margin-top:16px}

/* ---------- value cards (about) ---------- */
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.val{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow)}
.val .ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--bg-2);margin-bottom:18px}
.val h3{font-size:21px;margin-bottom:8px}
.val p{color:var(--ink-soft);font-size:15px;margin:0}
@media (max-width:820px){.vals{grid-template-columns:1fr}}

/* ---------- 404 ---------- */
.nf{min-height:calc(100svh - var(--nav-h));display:grid;place-items:center;text-align:center;position:relative;
  background:radial-gradient(120% 100% at 50% 0%,#15224a,#0B1026);color:#F4EFE2;overflow:hidden;padding:60px 20px}
.nf__stars{position:absolute;inset:0}
.nf__in{position:relative;z-index:2;max-width:46ch}
.nf h1{font-size:clamp(72px,16vw,180px);color:#fff;line-height:.9}
.nf p{color:rgba(244,239,226,.76);margin:16px 0 30px;font-size:18px}
.nf__moon{width:120px;height:120px;margin:0 auto 8px}

/* ---------- page loader ---------- */
.pageload{position:fixed;inset:0;z-index:300;background:var(--bg);display:grid;place-items:center;
  transition:opacity .5s ease,visibility .5s}
.pageload.gone{opacity:0;visibility:hidden}
.pageload svg{width:64px;height:64px;animation:loadspin 1.5s var(--ease) infinite}
@keyframes loadspin{0%{transform:rotate(0) translateY(0)}50%{transform:rotate(180deg) translateY(-6px)}100%{transform:rotate(360deg) translateY(0)}}
@media (prefers-reduced-motion:reduce){.pageload svg{animation:none}}

/* ---------- generic ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media (max-width:820px){.split{grid-template-columns:1fr;gap:32px}}
.prose p{color:var(--ink-soft);font-size:clamp(16px,1.4vw,18px);margin:0 0 18px;max-width:60ch}
.prose p.big{font-family:var(--serif);font-size:clamp(20px,2.4vw,28px);color:var(--ink);line-height:1.35}

/* ---------- live store (Printify catalog) ---------- */
.pcard__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease)}
.pcard__art:hover .pcard__img{transform:scale(1.045)}
.pdp__stage img.live{width:100%;height:100%;object-fit:cover}
.pdp__thumb img{width:100%;height:100%;object-fit:cover;border-radius:10px}