/* order.printscharm.ing, the SHOP pages. They wear the Square store's look so a
   customer cannot tell they left square.printscharm.ing (Jason, 2026-10-24).

   Every value below is the store's, taken from its snippet
   (CoWork/Square/tools/site-snippet.html, the one payload behind the store's look)
   and measured off the live store on 2026-10-24: paper #f6f4fc, ink #16123a, purple
   #45419e, gold #edba36 / #d9a521, 20px card radius and its two shadows, the
   cubic-bezier(.2,.7,.3,1) ease, Libre Baskerville headings, Montserrat everything
   else, the menu at .82rem / 600 / .06em uppercase in black with a gold underline,
   the gold pill button, the purple footer with its marquee. Where the snippet and
   the live store disagree (the footer marquee is 130px live, not the snippet's
   3.1rem), the live store is what customers see, so it wins. Change the store's
   look in the snippet first, then measure it and change it here, so the two stay
   one look.

   The back end (/admin) keeps the PCC app look in app.css. */

:root {
  --pcc-purple: #45419e; --pcc-gold: #edba36; --pcc-gold-deep: #d9a521; --pcc-ink: #16123a; --pcc-paper: #f6f4fc;
  --pcc-radius: 20px;
  --pcc-shadow: 0 10px 30px rgba(22,18,58,.10), 0 2px 8px rgba(22,18,58,.06);
  --pcc-shadow-lift: 0 18px 44px rgba(22,18,58,.18), 0 4px 12px rgba(22,18,58,.08);
  --pcc-ease: cubic-bezier(.2,.7,.3,1);
  --pcc-placeholder: linear-gradient(160deg, #efeafb 0%, #e0d9f4 100%);
  --muted: #5d5a7e; --line: rgba(22,18,58,.14);
  --good: #1f7a3a; --good-bg: #e2f3e9; --warn: #7a4a00; --warn-bg: #fdf0dc; --bad: #9b1c1c; --bad-bg: #f9e2e2;
  --serif: 'Libre Baskerville', Georgia, serif;
  --sans: 'Montserrat', system-ui, -apple-system, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.store { margin: 0; background: var(--pcc-paper); color: var(--pcc-ink); font-family: var(--sans); font-weight: 500; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--pcc-purple); }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; color: var(--pcc-ink); line-height: 1.2; }
h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 2.2rem 0 .6rem; }
h2 { font-size: 1.35rem; margin: 0 0 .9rem; }
h3 { font-size: 1.05rem; margin: 1.2rem 0 .5rem; }
.skip { position: absolute; left: -999px; top: 0; background: var(--pcc-gold); color: var(--pcc-ink); padding: .6rem 1rem; z-index: 10000; }
.skip:focus { left: 1rem; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.center { text-align: center; }
.loading { padding: 4rem 0; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- the store's header
   Measured off the live store on fresh page loads, 2026-10-24, at widths 375 to 1440
   (Square sets the header's spacing from the width the page loaded at):
     under 600px   70px bar; logo 49px wide, 16 down; menu icon 20 in, 22 down;
                   the outer icon ends 31px from the edge, 22 down
     600 to 839    105px bar; logo 94px, 16 down; menu icon at P, 39 down; icons 40 down
     840 and up    logo 24 down; icons 48 down; the menu row 16 under the logo, 31 tall,
                   16 above the header's end (160px in all); no menu button
   P is Square's header padding: 10vw - 16px, and 80px from 1200px up. The outer icon
   ends 11px inside P. The store also has an account icon; this header has search only,
   in the outer slot (chrome.mjs says why). */
.site-header { --hpad: 80px; background: #fff; position: relative; z-index: 50; }
@media (max-width: 1199px) { .site-header { --hpad: calc(10vw - 16px); } }
.site-header .bar { position: relative; display: flex; justify-content: center; padding: 24px var(--hpad) 0; }
.site-header .logo { display: block; line-height: 0; }
.site-header .logo img { width: 94px; height: auto; display: block; }
.site-header .tool { position: absolute; right: calc(var(--hpad) + 5px); top: 42px; color: #000; display: inline-flex; padding: 6px; border-radius: 999px; line-height: 0; }
.site-header .tool:hover { color: var(--pcc-purple); }
.menu-toggle, .menu-close { display: none; background: none; border: 0; color: #000; cursor: pointer; line-height: 0; }
.menu-toggle { position: absolute; left: calc(var(--hpad) - 8px); top: 31px; padding: 8px; border-radius: 10px; }
.site-nav { padding: 16px var(--hpad); }
.nav-main { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; gap: 2rem; flex-wrap: nowrap; }
.nav-item { position: relative; margin: 0; padding: 0; list-style: none; flex: 0 0 auto; }
/* the store's link box: 4px over a 20.72px line, 6px under (31px), the gold line 6px below it */
.nav-item > a, .more-btn { position: relative; display: inline-block; font-family: var(--sans); font-size: .82rem; font-weight: 600; letter-spacing: .06em; line-height: 20.72px; text-transform: uppercase; color: #000; text-decoration: none; white-space: nowrap; background: none; border: 0; padding: 4px 0 6px; cursor: pointer; }
.nav-item > a::after, .more-btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--pcc-gold); border-radius: 2px; transform: scale(0, .8); transform-origin: left; transition: transform .2s ease-in-out; }
.nav-item > a:hover::after, .more-btn:hover::after, .nav-item.current > a::after, .nav-item.more.open > .more-btn::after { transform: scale(1, .8); }
/* Wide screens: the store's top row is plain links (no dropdowns, no arrows), and MORE opens
   Square's mega-menu: a white full-width panel under the header listing what did not fit in
   bold 14px Montserrat, title case (measured on the live store 2026-10-24). The store's extra
   entries (nav-menu.json: Seasonal, Fufufits...) are only in its phone menu, so here too. */
.nav-item.in-more { display: none; }
.nav-item.more { display: none; position: static; }
.nav-item.more.on { display: block; }
.nav-item:not(.more) > .sub-menu { display: none; }
/* Square's mega-menu grid: five columns 32px apart, one per entry sized to it, the empty ones
   122px (nav.ts sets the columns for the entries it moves in). */
.more-list { display: none; position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: 40px 64px; list-style: none; background: #fff; border-top: 1px solid rgba(0,0,0,.1); box-shadow: 0 4px 4px rgba(0,0,0,.1); z-index: 9999; gap: 32px; }
.nav-item.more.open > .more-list { display: grid; }
.more-list li { margin: 0; padding: 0; list-style: none; line-height: 22.1px; }
.more-list a { font-family: var(--sans); font-size: 14px; font-weight: 700; color: #000; text-decoration: none; white-space: nowrap; }
.more-list a:hover { color: var(--pcc-purple); }

/* Under 840px the menu button replaces the row, and the menu is the store's slide-out:
   a full-screen paper panel from the right, a close X 16 down and 20 in from the right,
   the list from 58 down, each top entry 24px all round on a hairline, centred, and its
   dropdown listed under it (the snippet's .pcc-sub-menu phone rules). */
@media (max-width: 839px) {
  .site-header .bar { padding: 16px var(--hpad); }
  .site-header .tool { top: 34px; }
  .menu-toggle { display: inline-flex; }
  .site-nav { position: fixed; inset: 0; z-index: 1000; overflow-y: auto; background: var(--pcc-paper); padding: 58px 0 0; transform: translateX(100%); visibility: hidden; transition: transform .3s var(--pcc-ease), visibility 0s linear .3s; }
  .site-nav.open { transform: none; visibility: visible; transition: transform .3s var(--pcc-ease); }
  .menu-close { display: inline-flex; position: absolute; top: 16px; right: 20px; padding: 0; }
  .nav-main { display: flex; flex-direction: column; align-items: stretch; gap: 0; border-bottom: 1px solid rgba(0,0,0,.1); text-align: center; }
  .nav-item, .nav-item.in-more { display: block; order: var(--phone, 0); }
  .nav-item > a { display: block; padding: 24px; line-height: 1; border-top: 1px solid rgba(0,0,0,.1); white-space: normal; }
  .nav-item > a::after { display: none; }
  .nav-item.current > a { color: var(--pcc-purple); }
  .nav-item.more, .nav-item.more.on { display: none; }
  .nav-item:not(.more) > .sub-menu { display: block; list-style: none; margin: 0; padding: .1rem 0 .5rem; }
  .sub-menu li { list-style: none; margin: 0; padding: 0; }
  .sub-menu a { display: block; padding: .45rem 0 .45rem 1.5rem; font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .05em; line-height: 1; text-transform: uppercase; color: var(--pcc-ink); text-decoration: none; opacity: .86; }
  .sub-menu a:hover { color: var(--pcc-purple); opacity: 1; }
  html.menu-open, html.menu-open body { overflow: hidden; }
}
@media (max-width: 599px) {
  .site-header { --hpad: 20px; }
  .site-header .logo img { width: 49px; }
  .menu-toggle { top: 14px; }
  .site-header .tool { top: 16px; }
}

/* ---------------------------------------------------------------- the page */
.page { max-width: 64rem; margin: 0 auto; padding: 0 24px 4rem; }
.page.narrow { max-width: 46rem; }
.kicker { display: block; font-family: var(--sans); font-size: .74rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--pcc-purple); margin: 2.4rem 0 0; }
.kicker + h1 { margin-top: .5rem; }
.lead { font-size: 1.05rem; max-width: 40rem; margin: 0 0 1rem; }
.crumb { margin: 1.6rem 0 0; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--pcc-purple); }
.banner { background: #fff; border-left: 4px solid var(--pcc-gold); border-radius: 14px; box-shadow: var(--pcc-shadow); padding: .9rem 1.2rem; font-weight: 600; margin: 1.2rem 0; }
.banner.test { border-left-color: var(--pcc-purple); }

/* product tiles: the store's tiles (white, 20px, soft shadow, lift and a slight turn on hover) */
.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.6rem; margin: 2rem 0 1rem; }
.product { display: flex; flex-direction: column; text-decoration: none; color: var(--pcc-ink); }
.product .tile { position: relative; aspect-ratio: 1 / 1; border-radius: var(--pcc-radius); overflow: hidden; background: #fff; box-shadow: var(--pcc-shadow); transition: transform .34s var(--pcc-ease), box-shadow .34s var(--pcc-ease); }
.product:hover .tile { transform: translateY(-6px) rotate(-.6deg); box-shadow: var(--pcc-shadow-lift); }
.product .tile img.photo { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--pcc-ease); }
.product:hover .tile img.photo { transform: scale(1.05); }
.product .tile .ph { position: absolute; inset: 0; display: grid; place-items: center; background: var(--pcc-placeholder); }
.product .tile .ph img { width: 42%; opacity: .9; }
.product .name { font-family: var(--sans); font-weight: 600; color: var(--pcc-purple); text-align: center; margin: .9rem 0 .15rem; font-size: 1rem; }
.product .blurb { text-align: center; font-size: .86rem; color: var(--muted); margin: 0 .4rem; }
.product .price { text-align: center; color: var(--pcc-purple); font-weight: 600; margin-top: .35rem; font-size: .95rem; }
.product.soon { cursor: default; }
.product.soon .tile { box-shadow: none; opacity: .75; }
.product.soon:hover .tile { transform: none; }
.pill { display: inline-block; font-family: var(--sans); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .28rem .7rem; border-radius: 999px; background: var(--pcc-purple); color: #fff; }
.product .pill { position: absolute; top: .9rem; left: .9rem; }

/* the order form */
.order-grid { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 2.4rem; align-items: start; margin-top: 1.4rem; }
@media (max-width: 899px) { .order-grid { grid-template-columns: 1fr; gap: 1rem; } }
.card { background: #fff; border-radius: var(--pcc-radius); box-shadow: var(--pcc-shadow); padding: 1.4rem 1.5rem; margin: 0 0 1.4rem; }
.summary-card { position: sticky; top: 1.2rem; }
@media (max-width: 899px) { .summary-card { position: static; } }
.step-title { display: flex; align-items: center; gap: .7rem; }
.step-title .n { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--pcc-paper); color: var(--pcc-purple); font-family: var(--sans); font-size: .85rem; font-weight: 700; flex: none; }
.pick { display: grid; gap: .7rem; }
.opt { display: flex; align-items: center; gap: .8rem; border: 1.5px solid var(--line); border-radius: 14px; padding: .85rem 1rem; cursor: pointer; background: #fff; transition: border-color .2s var(--pcc-ease), background .2s var(--pcc-ease); }
.opt:hover { border-color: var(--pcc-purple); }
.opt:has(input:checked) { border-color: var(--pcc-purple); background: var(--pcc-paper); box-shadow: inset 0 0 0 1px var(--pcc-purple); }
.opt input { accent-color: var(--pcc-purple); width: 18px; height: 18px; flex: none; margin: 0; }
.opt .what { font-weight: 600; }
.opt .sub { display: block; font-size: .82rem; color: var(--muted); font-weight: 500; }
.opt .price { margin-left: auto; font-weight: 700; color: var(--pcc-purple); white-space: nowrap; }
label { display: block; margin: 1rem 0 .35rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pcc-ink); }
/* the option cards and the artwork drop are labels too, but read as sentences */
label.opt, label.drop { margin: 0; font-size: 1rem; font-weight: 500; letter-spacing: normal; text-transform: none; }
.optional { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); }
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea { font: inherit; font-weight: 500; width: 100%; padding: .78rem 1rem; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; color: var(--pcc-ink); margin: 0; }
textarea { min-height: 7rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(237,186,54,.55); outline-offset: 1px; border-color: var(--pcc-gold); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.row3 { display: grid; grid-template-columns: 2fr 1fr 1.2fr; gap: 0 1rem; }
@media (max-width: 560px) { .row2, .row3 { grid-template-columns: 1fr; } }
.qty { display: flex; align-items: center; gap: .8rem; }
.qty input { width: 6.5rem !important; text-align: center; }
.help { font-size: .82rem; color: var(--muted); margin: .35rem 0 0; }

/* the artwork drop and its check */
.drop { display: grid; place-items: center; gap: .3rem; text-align: center; border: 2px dashed rgba(69,65,158,.45); border-radius: var(--pcc-radius); padding: 2rem 1rem; background: var(--pcc-placeholder); cursor: pointer; transition: border-color .2s var(--pcc-ease); }
.drop:hover, .drop.over { border-color: var(--pcc-gold); }
.drop b { font-family: var(--serif); font-size: 1.1rem; color: var(--pcc-ink); }
.drop input { display: none; }
.art { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1.1rem; align-items: start; margin-top: 1.1rem; }
@media (max-width: 460px) { .art { grid-template-columns: 1fr; } }
.art img { width: 7.5rem; height: 7.5rem; object-fit: contain; border-radius: 14px; box-shadow: var(--pcc-shadow);
  background-color: #fff; background-image: linear-gradient(45deg, #eee 25%, transparent 25%), linear-gradient(-45deg, #eee 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eee 75%), linear-gradient(-45deg, transparent 75%, #eee 75%);
  background-size: 14px 14px; background-position: 0 0, 0 7px, 7px -7px, -7px 0; }
.verdict { display: inline-block; font-weight: 700; border-radius: 999px; padding: .3rem .9rem; margin-bottom: .55rem; font-size: .88rem; }
.verdict.good { background: var(--good-bg); color: var(--good); }
.verdict.check { background: var(--warn-bg); color: var(--warn); }
.verdict.refused { background: var(--bad-bg); color: var(--bad); }
.findings { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .9rem; }
.findings li { padding-left: 1.3rem; position: relative; }
.findings li::before { position: absolute; left: .2rem; top: 0; font-weight: 800; }
.findings li.info::before { content: "i"; color: var(--pcc-purple); left: .35rem; }
.findings li.warn::before { content: "!"; color: var(--warn); left: .35rem; }
.findings li.block::before { content: "x"; color: var(--bad); }
.fee { margin: .6rem 0 0; font-weight: 700; color: var(--pcc-purple); }

/* the summary and paying */
.summary { width: 100%; border-collapse: collapse; font-size: .95rem; }
.summary td { padding: .5rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.summary td:last-child { text-align: right; white-space: nowrap; padding-left: .8rem; }
.summary tr.total td { font-family: var(--serif); font-weight: 700; font-size: 1.2rem; border-bottom: 0; padding-top: .8rem; }
.summary .note { display: block; font-size: .78rem; color: var(--muted); }
.btn { display: inline-block; font-family: var(--sans); font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer; white-space: nowrap; border-radius: 999px; padding: .95rem 2.1rem; border: 0; transition: transform .28s var(--pcc-ease), box-shadow .28s var(--pcc-ease), background .2s; }
.btn.primary { background: var(--pcc-gold); color: var(--pcc-ink); box-shadow: 0 8px 22px rgba(237,186,54,.36); }
.btn.primary:hover:not(:disabled) { background: var(--pcc-gold-deep); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(237,186,54,.46); }
.btn.ghost { background: transparent; color: var(--pcc-purple); box-shadow: inset 0 0 0 2px var(--pcc-purple); }
.btn.big { width: 100%; margin-top: 1.1rem; font-size: 1.05rem; }
.btn:disabled { opacity: .5; cursor: default; }
.msg { min-height: 1.2em; margin: .7rem 0 0; font-weight: 600; font-size: .92rem; }
.msg.bad { color: var(--bad); }
.msg.good { color: var(--good); }
#turnstile { margin-top: 1rem; min-height: 65px; }
.status { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; color: var(--pcc-ink); margin: .4rem 0; }
.status.paid { color: var(--pcc-purple); }

/* ---------------------------------------------------------------- the store's footer
   Measured off the live store, 2026-10-24 (P is the header's side padding; 840 and up,
   with the under-840 value in brackets):
     marquee   Montserrat 700 uppercase at min(66.88px + 5.238vw, 129.74px) (87px on a
               375 phone, 130 from 1200) on a 1.1026 line, 18 above and below, 52 between
               repeats, 39.24s a repeat (Square's; the track holds two, so 78.48s)
     footer    logo 215px at P, 48 down (32); the footer menu's 37px links 37 under it,
               left (centred); a 1px rgba(255,255,255,.2) rule across P to P 24 (41) under
               them; then the payment marks, 34x24 and 8 apart, and the (c) at 14px, right
               (centred), the (c) ending 48 (32) from the bottom
   The store's "Stay in the Loop" form is Square's own newsletter sign-up and is not
   copied; this site's fine print sits where it is. */
.site-footer { --hpad: 80px; background: var(--pcc-purple); color: #fff; margin-top: 2rem; overflow: hidden; }
@media (max-width: 1199px) { .site-footer { --hpad: calc(10vw - 16px); } }
@media (max-width: 599px) { .site-footer { --hpad: 20px; } }
.marquee { overflow: hidden; padding: 18px 0; }
.marquee-track { display: inline-flex; white-space: nowrap; animation: pcc-marquee 78.48s linear infinite; }
.marquee span { font-family: var(--sans); font-weight: 700; font-size: min(calc(66.88px + 5.238vw), 129.74px); line-height: 1.1026; text-transform: uppercase; padding-right: 52px; }
@keyframes pcc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }
.footer-inner { padding: 48px var(--hpad); }
.footer-logo { display: block; width: max-content; line-height: 0; }
.footer-logo img { width: 215px; height: 215px; display: block; }
.footer-links { list-style: none; display: flex; flex-wrap: wrap; column-gap: 32px; margin: 37px 0 0; padding: 0; }
.footer-links a { display: block; padding: 8px 0; line-height: 20.72px; color: #fff; text-decoration: none; font-weight: 600; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }
.footer-links a:hover { color: var(--pcc-gold); }
.site-footer hr { border: 0; height: 1px; background: rgba(255,255,255,.2); margin: 24px 0 0; }
.footer-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; min-height: 177px; padding-top: 24px; }
.site-footer .fine { color: rgba(255,255,255,.78); font-size: .8rem; margin: 0 0 .4rem; }
.site-footer .fine a { color: #fff; }
.site-footer .fine a:hover { color: var(--pcc-gold); }
.footer-about { align-self: flex-start; }
.footer-pay { display: flex; flex-direction: column; align-items: flex-end; gap: 31px; padding-right: 8px; }
.pay-marks { list-style: none; display: flex; gap: 8px; margin: 0 6px 0 0; padding: 0; }
.pay-marks li { margin: 0; padding: 0; list-style: none; }
.pay-marks img { height: 24px; width: auto; display: block; }
.site-footer .copy { margin: 0; font-size: 14px; font-weight: 400; line-height: 21px; color: #fff; }
@media (max-width: 839px) {
  .footer-inner { padding: 32px var(--hpad); }
  .footer-links { justify-content: center; }
  .site-footer hr { margin-top: 41px; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; min-height: 0; gap: 24px; }
  .footer-about { align-self: center; }
  .footer-pay { align-items: center; gap: 16px; padding-right: 0; }
  .pay-marks { margin: 0; flex-wrap: wrap; justify-content: center; }
}