/* ============================================================================
   ShipShopity — the whole seller domain's stylesheet.

   ONE FILE, NO FRAMEWORK, NO BUILD STEP. The repository rule is PHP, HTML5,
   CSS3 and vanilla JavaScript, and the founder opens this build the same way as
   TimelyTag, so the page must be right when it is served rather than after a
   bundle is compiled.

   THE LOOK COMES FROM THE FOUNDER'S OWN LOGO (supplied 5 September 2026): a
   marigold plate with a heavy navy outline, a rail of clothes beneath it, and
   four garment colors. So the site is drawn the way the logo is drawn — navy
   ink, thick outlines, hard offset shadows instead of soft blurs, generous
   radii, and warm cream where a page needs a second ground. It is a shop sign,
   not a dashboard, and it should look like one.

   The palette is the logo's, exactly:
     #1B2F4B navy      ink, outlines, the dark bands, the primary button
     #FFC93C marigold  the plate, highlights, the good news in a number
     #17A2A8 teal      links and the second accent
     #E8503A tomato    used sparingly, for one thing at a time
     #FFF6E0 cream     the warm ground

   TYPE. Inter, self-hosted, at real weights. IBM Plex Mono appears only on
   money and on a shop address, which are the two things read digit by digit.
   ========================================================================== */

/* ── Fonts ───────────────────────────────────────────────────────────────── */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/inter-500.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/inter-600.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/inter-700.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url(../assets/fonts/inter-800.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:900;font-display:swap;src:url(../assets/fonts/inter-900.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/ibm-plex-mono-500.woff2) format('woff2')}

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root{
  --ss-paper:#ffffff;
  --ss-ground:#FFF6E0;
  --ss-ground-2:#FFFBF0;
  --ss-ink:#1B2F4B;
  --ss-ink-2:#40556F;
  --ss-ink-3:#7488A0;
  --ss-line:#E3DCC9;
  --ss-sea:#1B2F4B;
  --ss-yellow:#FFC93C;
  --ss-yellow-deep:#F0B01E;
  --ss-accent:#17A2A8;
  --ss-accent-deep:#0E7C81;
  --ss-accent-soft:#DDF3F4;
  --ss-tomato:#E8503A;
  --ss-gold:#FFC93C;
  --ss-gold-soft:#FFF0CC;
  --ss-warn:#9A3412;
  --ss-font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --ss-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ss-r:14px;
  --ss-r-lg:24px;
  --ss-wrap:1180px;
  --ss-edge:3px solid var(--ss-ink);
  --ss-shadow:6px 6px 0 var(--ss-ink);
  --ss-shadow-lg:10px 10px 0 var(--ss-ink);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{
  margin:0;background:var(--ss-paper);color:var(--ss-ink);
  font-family:var(--ss-font);font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul{padding:0;list-style:none}
a{color:var(--ss-accent-deep);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select{font-family:inherit}
::selection{background:var(--ss-yellow)}
:focus-visible{outline:3px solid var(--ss-accent-deep);outline-offset:2px;border-radius:6px}

h1,h2,h3{letter-spacing:-.03em;line-height:1.08;font-weight:900}
h1{font-size:clamp(2.2rem,4.2vw,3.4rem)}
h2{font-size:clamp(1.8rem,3.1vw,2.5rem)}
h3{font-size:1.18rem;letter-spacing:-.02em;font-weight:800;line-height:1.3}

.ss-wrap{max-width:var(--ss-wrap);margin:0 auto;padding:0 24px}
.ss-lede{font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--ss-ink-2);line-height:1.55}
.ss-eyebrow{
  display:inline-block;font-size:.76rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ss-ink);background:var(--ss-yellow);
  border:2px solid var(--ss-ink);border-radius:999px;padding:5px 14px;margin-bottom:18px;
}
.ss-eyebrow--on-sea{background:var(--ss-yellow);color:var(--ss-ink);border-color:var(--ss-yellow)}
.ss-skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--ss-ink);color:#fff;font-weight:700;padding:10px 16px;border-radius:0 0 10px 10px;transition:top .15s}
.ss-skip:focus{top:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Buttons: outlined and stamped, like the plate on the logo ───────────── */
.ss-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--ss-ink);color:#fff;border:2px solid var(--ss-ink);border-radius:14px;
  font-weight:800;font-size:16px;letter-spacing:-.01em;padding:14px 26px;
  box-shadow:4px 4px 0 var(--ss-yellow);
  transition:transform .12s,box-shadow .12s;cursor:pointer;
}
.ss-btn:hover{text-decoration:none;color:#fff;transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--ss-yellow)}
.ss-btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ss-yellow)}
.ss-btn:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}
.ss-btn--sm{padding:9px 18px;font-size:14.5px;border-radius:11px;box-shadow:3px 3px 0 var(--ss-yellow)}
.ss-btn--quiet{background:#fff;color:var(--ss-ink);box-shadow:4px 4px 0 var(--ss-line)}
.ss-btn--quiet:hover{background:var(--ss-ground);color:var(--ss-ink);box-shadow:6px 6px 0 var(--ss-line)}
.ss-btn--on-sea{background:var(--ss-yellow);color:var(--ss-ink);border-color:var(--ss-yellow);box-shadow:4px 4px 0 rgba(255,255,255,.3)}
.ss-btn--on-sea:hover{background:#fff;color:var(--ss-ink);border-color:#fff}

/* ── The logo, in its two lockups ────────────────────────────────────────
   The horizontal one is for bars and small spaces: the S plate plus the name in
   type, which stays readable at forty pixels where the stacked sign does not.
   The stacked sign keeps the places with room for it. */
.ss-wordmark{display:inline-flex;align-items:center;flex:0 0 auto}
.ss-wordmark:hover{text-decoration:none}
.ss-mark--row{display:inline-flex;align-items:center;gap:12px}
/* The founder's mark, 6 September 2026: a ship's wheel with a shopping bag.
   The wheel is currentColor, so the colour is set on the lockup and the mark
   follows it onto a dark band rather than disappearing into one. */
.ss-mark{color:#063D5E}
.ss-mark--stack{display:inline-flex;align-items:center;gap:16px}
.ss-mark--stack .ss-mark__name{font-size:2rem}
.ss-bridgebar .ss-mark,.ss-foot .ss-mark{color:#FFF6E0}
/* The name in its two halves (founder, 6 September 2026). "Ship" is the wheel
   and takes the lockup's colour, so it turns cream on the navy footer with the
   wheel. "Shopity" is the bag and keeps the bag's orange on every ground. */
.ss-mark__ship{color:inherit}
.ss-mark__shop{color:#FE7710}
.ss-mark__tile{flex:0 0 auto;display:block}
.ss-mark__name{
  font-weight:900;font-size:1.5rem;letter-spacing:-.035em;color:var(--ss-ink);
  line-height:1;white-space:nowrap;
}
.ss-bridgebar .ss-mark__name,.ss-foot .ss-mark__name{color:#fff}
.ss-lockup{display:block;height:auto}
@media (max-width:560px){.ss-mark__name{font-size:1.25rem}}

/* ── Sticky navigation ───────────────────────────────────────────────────── */
.ss-nav{position:sticky;top:0;z-index:60;background:#fff;border-bottom:3px solid var(--ss-ink)}
.ss-nav__inner{
  max-width:var(--ss-wrap);margin:0 auto;padding:8px 24px;min-height:92px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.ss-nav__links{display:flex;align-items:center;gap:22px}
.ss-nav__links a{font-weight:700;font-size:15px;color:var(--ss-ink);white-space:nowrap}
.ss-nav__links a:hover{color:var(--ss-accent-deep);text-decoration:none}
.ss-nav__links .ss-nav__signin{font-weight:600;color:var(--ss-ink-2)}
/* The call to action in the bar is a button, not a nav link: the link rule
   above is more specific than .ss-btn and was painting navy text on a navy
   button, which made it read as an empty box. */
.ss-nav__links a.ss-btn,.ss-nav__links a.ss-btn:hover{color:#fff}
.ss-nav__links a.ss-btn--quiet,.ss-nav__links a.ss-btn--quiet:hover{color:var(--ss-ink)}
.ss-bridgebar a.ss-btn{color:#fff}
.ss-nav__menu{position:relative;display:none}
.ss-nav__menu>summary{
  list-style:none;display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-weight:800;font-size:14.5px;color:var(--ss-ink);
  padding:9px 14px;border:2px solid var(--ss-ink);border-radius:11px;background:#fff;
}
.ss-nav__menu>summary::-webkit-details-marker{display:none}
.ss-nav__menu-panel{
  position:absolute;right:0;top:calc(100% + 10px);z-index:70;min-width:230px;padding:8px;
  background:#fff;border:3px solid var(--ss-ink);border-radius:18px;box-shadow:var(--ss-shadow);
}
.ss-nav__menu-panel a{display:block;padding:11px 14px;border-radius:10px;font-weight:700;color:var(--ss-ink)}
.ss-nav__menu-panel a:hover{background:var(--ss-yellow);text-decoration:none}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.ss-hero{
  position:relative;overflow:hidden;background:var(--ss-ground);
  border-bottom:3px solid var(--ss-ink);
  padding:clamp(34px,4.5vw,62px) 0 clamp(40px,5vw,70px);
}
.ss-hero__grid{
  max-width:var(--ss-wrap);margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(30px,4.5vw,58px);align-items:center;
}
.ss-hero h1{max-width:15ch}
.ss-hero h1 mark{background:var(--ss-yellow);color:inherit;padding:0 .1em;border-radius:6px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.ss-hero__sub{margin-top:18px;font-size:clamp(1.05rem,1.45vw,1.22rem);color:var(--ss-ink-2);max-width:44ch}
.ss-hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.ss-hero__note{margin-top:14px;font-size:.94rem;color:var(--ss-ink-3);max-width:44ch}


/* The stage: the founder's rail of clothes on a marigold board, with the bill
   card hanging off its bottom edge. One picture that says "a shop", one panel
   that says "it costs nothing" — which is the argument of the whole page. */
.ss-stage{position:relative}
.ss-stage__board{
  background:var(--ss-yellow);border:var(--ss-edge);border-radius:28px;
  box-shadow:var(--ss-shadow-lg);padding:26px 22px 86px;
}
.ss-rail{width:100%;height:auto}
.ss-stage .ss-bill{position:relative;margin:-70px 14px 0}

/* ── The bill panel ──────────────────────────────────────────────────────── */
.ss-bill{
  background:var(--ss-paper);border:var(--ss-edge);border-radius:20px;
  box-shadow:var(--ss-shadow);padding:22px 24px 18px;
}
.ss-bill__head{display:block;margin-bottom:14px}
.ss-bill__title{display:block;font-weight:900;font-size:1.14rem;letter-spacing:-.02em}
.ss-bill__sub{display:block;color:var(--ss-ink-3);font-size:.9rem;margin-top:2px}
.ss-bill__table{width:100%;border-collapse:collapse}
.ss-bill__table td{padding:9px 0;border-bottom:1px solid var(--ss-line);font-size:.96rem;color:var(--ss-ink-2)}
.ss-bill__table td:last-child{text-align:right;font-family:var(--ss-mono);color:var(--ss-ink);white-space:nowrap}
.ss-bill__table tr.is-total td{border-bottom:none;padding-top:14px;font-weight:900;font-size:1.04rem;color:var(--ss-ink)}
.ss-bill__table tr.is-total td:last-child{font-size:1.5rem;color:var(--ss-accent-deep)}
.ss-bill__note{margin-top:14px;padding-top:14px;border-top:3px solid var(--ss-ink);font-size:.88rem;color:var(--ss-ink-3)}

/* ── Notices and rows ────────────────────────────────────────────────────── */
.ss-notice{
  background:var(--ss-accent-soft);border:2px solid var(--ss-accent-deep);color:#0B5B5F;
  border-radius:12px;padding:12px 14px;margin-bottom:18px;font-size:.95rem;font-weight:600;
}
.ss-notice--warn{background:var(--ss-gold-soft);border-color:var(--ss-yellow-deep);color:var(--ss-warn)}

.ss-rows{display:grid;gap:14px}
.ss-row{
  display:grid;grid-template-columns:84px 1fr auto;gap:18px;align-items:center;
  background:var(--ss-paper);border:2px solid var(--ss-ink);border-radius:var(--ss-r);padding:16px 18px;
}
.ss-row__art{background:var(--ss-ground);border-radius:10px;padding:6px}
.ss-row__art .ss-shirt{width:100%;height:auto}
.ss-row__body h3{margin-bottom:4px}
.ss-row__meta{color:var(--ss-ink-3);font-size:.9rem;margin:0}
.ss-row__money{display:flex;flex-wrap:wrap;gap:6px 18px;margin:8px 0 0;font-size:.9rem;color:var(--ss-ink-3)}
.ss-row__money strong{color:var(--ss-ink);font-family:var(--ss-mono)}
.ss-row__act{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:640px){
  .ss-row{grid-template-columns:64px 1fr}
  .ss-row__act{grid-column:1 / -1;justify-content:flex-start}
}

/* ── The comparison table ────────────────────────────────────────────────── */
.ss-compare__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:4px 4px 10px}
.ss-compare{
  width:100%;min-width:880px;border-collapse:separate;border-spacing:0;
  background:var(--ss-paper);border:3px solid var(--ss-ink);border-radius:20px;
  overflow:hidden;font-size:.94rem;box-shadow:var(--ss-shadow);
}
.ss-compare th,.ss-compare td{
  padding:16px 18px;text-align:left;vertical-align:top;
  border-bottom:2px solid var(--ss-line);color:var(--ss-ink-2);
}
.ss-compare thead th{
  background:var(--ss-ground);font-weight:900;color:var(--ss-ink);
  font-size:.95rem;white-space:nowrap;border-bottom:3px solid var(--ss-ink);
}
.ss-compare tbody th{font-weight:800;color:var(--ss-ink);width:22%}
.ss-compare tr:last-child th,.ss-compare tr:last-child td{border-bottom:none}
.ss-compare .is-us{background:#FFFBEE;color:var(--ss-ink);font-weight:700}
.ss-compare thead .is-us{background:var(--ss-yellow);color:var(--ss-ink)}
.ss-compare__note{margin-top:16px;font-size:.88rem;color:var(--ss-ink-3);max-width:70ch}

/* ── Bands ───────────────────────────────────────────────────────────────── */
.ss-band{padding:clamp(52px,6vw,88px) 0;background:var(--ss-paper)}
.ss-band--ground{background:var(--ss-ground-2)}
.ss-band--sea{background:var(--ss-ink);color:#EAF1F8}
.ss-band--sea h2,.ss-band--sea h3{color:#fff}
.ss-band--sea .ss-lede{color:#C3D2E2}
.ss-band__head{max-width:46ch;margin-bottom:38px}
.ss-band__head p{margin-top:12px}
.ss-wave{width:100%;height:60px;display:block}
.ss-wave--flip{transform:rotate(180deg)}

/* ── A solution band: numbered steps that explain a mechanism ────────────
   Used by the three sections that carry the whole argument of the platform —
   the traffic, the printing and the free shop. Numbered because each one is a
   sequence a reader can follow, not a list of adjectives. */
.ss-steps{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin:0;padding:0}
.ss-step{
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  background:var(--ss-paper);border:3px solid var(--ss-ink);border-radius:20px;
  padding:22px;box-shadow:var(--ss-shadow);
}
.ss-step__n{
  display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
  background:var(--ss-yellow);border:2px solid var(--ss-ink);
  font-weight:900;font-size:1.05rem;color:var(--ss-ink);font-family:var(--ss-mono);
}
.ss-step h3{margin-bottom:6px}
.ss-step p{color:var(--ss-ink-2);font-size:.97rem}
.ss-band__foot{margin-top:26px;max-width:64ch;color:var(--ss-ink-2)}
.ss-band--sea .ss-step{background:#22395A;border-color:#3C5578;box-shadow:6px 6px 0 #12203A}
.ss-band--sea .ss-step p{color:#C3D2E2}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.ss-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.ss-card{
  background:var(--ss-paper);border:3px solid var(--ss-ink);border-radius:20px;
  padding:26px;box-shadow:var(--ss-shadow);
}
.ss-card h3{margin-bottom:10px}
.ss-card p{color:var(--ss-ink-2)}
.ss-card__n{
  display:inline-grid;place-items:center;width:38px;height:38px;border-radius:12px;
  background:var(--ss-yellow);border:2px solid var(--ss-ink);color:var(--ss-ink);
  font-weight:900;font-size:1rem;margin-bottom:16px;
}
.ss-band--sea .ss-card{background:#22395A;border-color:#3C5578;box-shadow:6px 6px 0 #12203A}
.ss-band--sea .ss-card p{color:#C3D2E2}
.ss-stepicon{width:48px;height:48px;margin-bottom:14px}

/* ── A topic section ─────────────────────────────────────────────────────── */
.ss-topic{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.ss-band:nth-of-type(even) .ss-topic__copy{order:2}
.ss-topic__copy h2{margin-bottom:14px}
.ss-panelart{
  background:var(--ss-ground);border:3px solid var(--ss-ink);border-radius:22px;
  box-shadow:var(--ss-shadow);padding:22px;margin:0;
}
.ss-panelart__svg{width:100%;height:auto;display:block}
.ss-cut--on-sea li{color:#C3D2E2}
.ss-cut--on-sea li::before{background:rgba(255,255,255,.10);box-shadow:inset 0 0 0 2px var(--ss-yellow)}
.ss-tile--link{display:block;color:inherit;transition:transform .12s,box-shadow .12s}
.ss-tile--link:hover{text-decoration:none;transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ss-ink)}
@media (max-width:860px){
  .ss-topic{grid-template-columns:1fr}
  .ss-band:nth-of-type(even) .ss-topic__copy{order:0}
}

/* ── What is deliberately missing ────────────────────────────────────────── */
.ss-cut{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px 26px;margin-top:26px}
.ss-cut li{display:flex;align-items:flex-start;gap:10px;color:var(--ss-ink-2);padding:8px 0;font-size:.98rem}
.ss-cut li::before{
  content:"";flex:0 0 auto;width:18px;height:18px;margin-top:4px;border-radius:5px;
  background:var(--ss-gold-soft);box-shadow:inset 0 0 0 2px var(--ss-ink);
}

/* ── The money calculator ────────────────────────────────────────────────── */
.ss-calc{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,4vw,56px);align-items:start}
.ss-calc__panel{background:#22395A;border:3px solid #3C5578;border-radius:20px;padding:26px}
.ss-calc__row{margin-bottom:22px}
.ss-calc__row label{display:block;font-weight:700;font-size:.92rem;margin-bottom:10px;color:#D7E3F0}
.ss-calc__val{font-family:var(--ss-mono);font-size:1.5rem;font-weight:500;color:var(--ss-yellow)}
.ss-calc input[type=range]{width:100%;accent-color:var(--ss-yellow);height:26px}
.ss-money{width:100%;border-collapse:collapse}
.ss-money td{padding:11px 4px;border-bottom:1px solid rgba(255,255,255,.16);font-size:.97rem}
.ss-money td:last-child{text-align:right;font-family:var(--ss-mono);white-space:nowrap}
.ss-money tr.is-sub td{font-weight:800;border-bottom-width:2px}
.ss-money tr.is-total td{font-weight:900;font-size:1.12rem;color:var(--ss-yellow);border-bottom:none;padding-top:16px}
.ss-money--light td{border-bottom-color:var(--ss-line);color:var(--ss-ink-2)}
.ss-money--light tr.is-total td{color:var(--ss-ink)}
.ss-calc__note{margin-top:14px;font-size:.86rem;color:#A9BDD4}

/* ── Closing call to action ──────────────────────────────────────────────── */
.ss-close{text-align:center;max-width:660px;margin:0 auto}
.ss-close .ss-btn{margin-top:26px}

/* ── A product page in a shop ────────────────────────────────────────────── */
.ss-item{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,56px);align-items:start}
.ss-item__back{display:flex;justify-content:space-between;gap:16px;margin-bottom:22px;font-size:.95rem}
.ss-item__art{background:var(--ss-ground);border:3px solid var(--ss-ink);border-radius:22px;padding:26px;margin:0}
.ss-item__art .ss-shirt{width:100%;height:auto}
.ss-item__title{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:900;letter-spacing:-.03em;line-height:1.12}
.ss-item__price{font-family:var(--ss-mono);font-size:1.5rem;font-weight:500;margin:10px 0 14px}
.ss-item__desc{color:var(--ss-ink-2);margin-bottom:22px}
.ss-item__form{max-width:340px}
.ss-item__form select{width:100%;padding:13px 15px;font-size:16px;border:2px solid var(--ss-ink);border-radius:12px;background:#fff}
.ss-item__note{margin-top:18px;font-size:.9rem;color:var(--ss-ink-3);max-width:40ch}
@media (max-width:760px){.ss-item{grid-template-columns:1fr}}

/* ── Reading pages ───────────────────────────────────────────────────────── */
.ss-page{max-width:var(--ss-wrap);margin:0 auto;padding:clamp(38px,5vw,64px) 24px 90px}
.ss-page--prose{max-width:740px}
.ss-page--prose h1{font-size:clamp(2rem,4vw,2.8rem)}
.ss-dateline{color:var(--ss-ink-3);font-size:.92rem;margin-top:10px}
.ss-policy{margin-top:34px}
.ss-policy h2{font-size:1.16rem;font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
.ss-policy p{color:var(--ss-ink-2)}

/* ── Forms and the sign-in card ──────────────────────────────────────────── */
.ss-auth{max-width:480px;margin:clamp(34px,6vw,72px) auto 90px;padding:0 24px}
.ss-auth__card{
  background:var(--ss-paper);border:3px solid var(--ss-ink);border-radius:24px;
  padding:clamp(26px,4vw,40px);box-shadow:var(--ss-shadow-lg);
}
.ss-auth h1{font-size:1.8rem;margin-bottom:8px}
.ss-auth__sub{color:var(--ss-ink-2);margin-bottom:26px}
.ss-form{width:100%}
.ss-field{margin-bottom:18px}
.ss-field label{display:block;font-size:.9rem;font-weight:700;margin-bottom:7px}
.ss-field input{
  width:100%;padding:13px 15px;font-size:16px;
  border:2px solid var(--ss-ink);border-radius:12px;background:#fff;color:var(--ss-ink);
  transition:box-shadow .12s;
}
.ss-field input:focus{outline:none;box-shadow:4px 4px 0 var(--ss-yellow)}
/* A textarea and a select wear the same clothes as an input, because a form
   where one field looks different reads as a field that behaves differently. */
.ss-field textarea,.ss-field select{
  width:100%;padding:13px 15px;font:inherit;font-size:16px;
  border:2px solid var(--ss-ink);border-radius:12px;background:#fff;color:var(--ss-ink);
  transition:box-shadow .12s;
}
.ss-field textarea{min-height:96px;resize:vertical}
.ss-field textarea:focus,.ss-field select:focus{outline:none;box-shadow:4px 4px 0 var(--ss-yellow)}
.ss-field__hint{font-size:.85rem;color:var(--ss-ink-3);margin-top:7px}
.ss-field__prefix{display:flex;align-items:center;border:2px solid var(--ss-ink);border-radius:12px;overflow:hidden;background:#fff}
.ss-field__prefix span{padding:13px 4px 13px 15px;font-family:var(--ss-mono);color:var(--ss-ink-3);font-size:15px;white-space:nowrap}
.ss-field__prefix input{border:0;border-radius:0;padding-left:2px}
.ss-field__prefix input:focus{box-shadow:none}
.ss-field__prefix:focus-within{box-shadow:4px 4px 0 var(--ss-yellow)}
.ss-form .ss-btn{width:100%}
.ss-error{
  background:#FDECE8;border:2px solid var(--ss-tomato);color:#8C2A18;
  border-radius:12px;padding:12px 14px;margin-bottom:18px;font-size:.95rem;font-weight:600;
}
.ss-aside{margin-top:16px;font-size:.95rem;color:var(--ss-ink-3);text-align:center}

/* ── The bridge ──────────────────────────────────────────────────────────── */
.ss-bridgebar{background:var(--ss-ink);border-bottom:3px solid var(--ss-ink)}
.ss-bridgebar__inner{
  max-width:var(--ss-wrap);margin:0 auto;padding:8px 24px;min-height:92px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.ss-bridgebar a{color:#D7E3F0;font-weight:700;font-size:14.5px}
.ss-bridge{max-width:var(--ss-wrap);margin:0 auto;padding:32px 24px 90px}
.ss-bridge__title{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;margin-bottom:8px}
.ss-bridge__shopline{color:var(--ss-ink-3);font-size:.95rem;margin-bottom:26px}
.ss-bridge__shopline a{font-family:var(--ss-mono)}
.ss-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:3px solid var(--ss-ink);margin-bottom:32px}
.ss-tabs a{padding:12px 16px;color:var(--ss-ink-2);border-bottom:4px solid transparent;font-size:.96rem;font-weight:700;margin-bottom:-3px}
.ss-tabs a:hover{color:var(--ss-ink);text-decoration:none}
.ss-tabs a.is-here{color:var(--ss-ink);border-bottom-color:var(--ss-yellow)}
.ss-stats{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-bottom:32px}
.ss-stat{background:var(--ss-paper);border:2px solid var(--ss-ink);border-radius:var(--ss-r);padding:20px}
.ss-stat__n{display:block;font-family:var(--ss-mono);font-size:1.7rem;font-weight:500;letter-spacing:-.02em}
.ss-stat__t{display:block;font-size:.82rem;color:var(--ss-ink-3);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-top:4px}
.ss-empty{border:3px dashed var(--ss-ink);border-radius:22px;padding:34px;background:var(--ss-ground-2);color:var(--ss-ink-2)}
.ss-empty h3{margin-bottom:8px}
.ss-panel{background:var(--ss-paper);border:3px solid var(--ss-ink);border-radius:22px;padding:clamp(24px,3vw,34px);box-shadow:var(--ss-shadow)}
.ss-panel h2{font-size:1.5rem;margin-bottom:10px}

/* ── The public shop ─────────────────────────────────────────────────────── */
.ss-shop{max-width:1000px;margin:0 auto;padding:40px 22px 90px}
.ss-shop__head{display:flex;align-items:center;gap:18px;margin-bottom:32px}
.ss-shop__avatar{width:76px;height:76px;border-radius:50%;flex:0 0 auto;background:var(--ss-yellow);border:3px solid var(--ss-ink)}
.ss-shop__name{font-size:1.9rem;font-weight:900;letter-spacing:-.03em}
.ss-shop__bio{color:var(--ss-ink-2)}
.ss-shop__grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.ss-tile{background:var(--ss-ground);border:3px solid var(--ss-ink);border-radius:18px;padding:12px 12px 14px;text-align:center}
.ss-tile .ss-shirt{width:100%;height:auto}
.ss-tile__t{display:block;font-size:.86rem;font-weight:700;color:var(--ss-ink);margin-top:8px;line-height:1.3}
.ss-tile__p{display:block;font-size:.88rem;font-weight:800;font-family:var(--ss-mono);margin-top:2px}

/* ── The browser-frame demonstration shop ────────────────────────────────── */
.ss-mock{background:var(--ss-paper);border:3px solid var(--ss-ink);border-radius:22px;box-shadow:var(--ss-shadow);overflow:hidden}
.ss-mock__bar{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--ss-ground);border-bottom:3px solid var(--ss-ink)}
.ss-mock__dots{display:flex;gap:6px}
.ss-mock__dots i{width:11px;height:11px;border-radius:50%;background:var(--ss-yellow);border:2px solid var(--ss-ink);display:block}
.ss-mock__url{flex:1;background:#fff;border:2px solid var(--ss-ink);border-radius:8px;padding:5px 12px;font-family:var(--ss-mono);font-size:12.5px;color:var(--ss-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-mock__body{padding:20px}
.ss-mock__shop{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.ss-mock__avatar{width:44px;height:44px;border-radius:50%;flex:0 0 auto;background:var(--ss-tomato);border:2px solid var(--ss-ink)}
.ss-mock__name{display:block;font-weight:900;letter-spacing:-.02em}
.ss-mock__bio{display:block;font-size:.85rem;color:var(--ss-ink-3);line-height:1.4}
.ss-mock__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ss-mock__caption{margin-top:14px;font-size:.78rem;color:var(--ss-ink-3);text-align:center}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.ss-foot{background:var(--ss-ink);color:#B9CADD;padding:52px 0 40px}
.ss-foot__inner{max-width:var(--ss-wrap);margin:0 auto;padding:0 24px;display:grid;gap:26px;grid-template-columns:1.4fr 1fr}
.ss-foot__line{margin-top:16px;max-width:38ch;font-size:.95rem}
.ss-foot__links{display:flex;flex-wrap:wrap;gap:14px 26px;align-content:start}
.ss-foot__links a{color:#E3ECF5;font-weight:600;font-size:.95rem}
.ss-foot__legal{max-width:var(--ss-wrap);margin:32px auto 0;padding:20px 24px 0;border-top:1px solid rgba(255,255,255,.16);font-size:.85rem}
.ss-foot__build{display:block;margin-top:6px;opacity:.6;font-family:var(--ss-mono);font-size:.8rem}

/* ── Phone ───────────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .ss-hero__grid,.ss-calc,.ss-foot__inner{grid-template-columns:1fr}
  /* The bar has to FIT. It did not: at 390px the wordmark, the call to action
     and the Menu control added up to 475px, so Menu sat off the right edge and
     a phone had no way to reach sign-in at all. Everything here is about the
     three of them fitting side by side. */
  .ss-nav__inner{padding:8px 16px;gap:10px;min-height:76px}
  .ss-nav__links{gap:10px;min-width:0}
  .ss-nav__links a:not(.ss-btn){display:none}
  .ss-nav__links a.ss-btn--sm{padding:9px 12px;font-size:13.5px}
  .ss-nav__menu{display:block;flex:0 0 auto}
  .ss-nav__menu>summary{padding:9px 11px;font-size:13.5px}
  /* The panel sits INSIDE .ss-nav__links, so the display:none above was more
     specific than the panel's own rule and matched every link in it: the Menu
     opened onto an empty box, which is why a phone had no sign-in and no
     sign-up. This selector is the specific one. */
  .ss-nav__links .ss-nav__menu-panel a:not(.ss-btn){display:block}
  .ss-wordmark{min-width:0;overflow:hidden}
  .ss-mark{max-height:66px}
}
@media (max-width:430px){
  .ss-nav .ss-mark__name{display:none}
}
@media (max-width:560px){
    .ss-mock__grid{grid-template-columns:repeat(2,1fr)}
  .ss-band{padding:44px 0}
  .ss-stage__board{padding:18px 16px 74px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}

/* ── The shop's own controls: collections, search, filters ───────────────── */
/* Nothing in this block is configured by a seller. The collections are the
   shop's own, and every filter is generated from the catalogue, so a shop that
   sells one kind of thing shows one control and a shop that sells many shows
   what it really holds. */
.ss-shop__basket{margin-left:auto;flex:0 0 auto}
.ss-cols{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 6px}
.ss-col{
  display:inline-block;padding:7px 14px;border:2px solid var(--ss-ink);border-radius:999px;
  background:var(--ss-paper);color:var(--ss-ink);font-size:.86rem;font-weight:700;text-decoration:none;
}
.ss-col:hover{background:var(--ss-ground);text-decoration:none}
.ss-col.is-on{background:var(--ss-ink);color:var(--ss-paper)}
.ss-cols__note{margin:10px 0 0;font-size:.95rem}

.ss-filters{margin:18px 0 26px;display:grid;gap:12px}
.ss-filters__row{display:flex;flex-wrap:wrap;align-items:end;gap:10px}
.ss-filters__row--pick{gap:14px}
.ss-filters__search{flex:1 1 240px}
.ss-filters__search input{
  width:100%;padding:10px 14px;border:3px solid var(--ss-ink);border-radius:12px;
  background:#fff;font:inherit;font-size:.95rem;
}
.ss-pick{display:grid;gap:4px;font-size:.78rem;font-weight:700;color:var(--ss-ink-2)}
.ss-pick select,.ss-pick input{
  padding:8px 12px;border:2px solid var(--ss-ink);border-radius:10px;background:#fff;font:inherit;font-size:.9rem;
}
.ss-pick input{width:110px}
.ss-filters__clear{align-self:center;font-size:.85rem;font-weight:700}
.ss-tags{display:flex;flex-wrap:wrap;gap:6px}
.ss-tag{
  font-size:.78rem;font-weight:700;padding:5px 11px;border-radius:999px;text-decoration:none;
  background:var(--ss-ground);color:var(--ss-ink-2);border:2px solid transparent;
}
.ss-tag:hover{border-color:var(--ss-ink);text-decoration:none}
.ss-tag.is-on{background:var(--ss-gold-soft);border-color:var(--ss-ink);color:var(--ss-ink)}

.ss-pages{display:flex;align-items:center;gap:14px;margin-top:26px}
.ss-pages__n{font-family:var(--ss-mono);font-size:.85rem;color:var(--ss-ink-2)}

/* ── The product page: the gallery and the option chips ──────────────────── */
.ss-item__media{display:grid;gap:12px}
.ss-thumbs{display:flex;flex-wrap:wrap;gap:8px}
.ss-thumb{
  width:64px;height:64px;padding:2px;border:2px solid var(--ss-ink);border-radius:10px;
  background:var(--ss-paper);cursor:pointer;overflow:hidden;
}
.ss-thumb img{width:100%;height:100%;object-fit:cover;display:block;border-radius:6px}
.ss-thumb.is-on{box-shadow:0 0 0 3px var(--ss-gold-soft)}
.ss-opt{border:0;padding:0;margin:0 0 16px}
.ss-opt legend{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ss-ink-2);margin-bottom:7px}
.ss-opt__row{display:flex;flex-wrap:wrap;gap:8px}
.ss-chip{position:relative;display:inline-block}
.ss-chip input{position:absolute;opacity:0;width:0;height:0}
.ss-chip span{
  display:inline-block;padding:8px 15px;border:2px solid var(--ss-ink);border-radius:10px;
  background:var(--ss-paper);font-size:.88rem;font-weight:700;cursor:pointer;
}
.ss-chip input:checked+span{background:var(--ss-ink);color:var(--ss-paper)}
.ss-chip input:focus-visible+span{outline:3px solid var(--ss-gold-soft);outline-offset:2px}
.ss-field--qty{max-width:130px}
.ss-item__sold{margin-top:10px;font-size:.9rem;font-weight:700;color:var(--ss-tomato)}

/* ── Inside one part of the bridge ───────────────────────────────────────── */
/* The second row appears only where a part holds more than one page, so a
   seller never reads a row of one. */
.ss-subtabs{display:flex;flex-wrap:wrap;gap:16px;margin:-6px 0 22px;font-size:.9rem}
.ss-subtabs a{color:var(--ss-ink-3);font-weight:700;text-decoration:none;padding:4px 0}
.ss-subtabs a:hover{color:var(--ss-ink)}
.ss-subtabs a.is-here{color:var(--ss-ink);box-shadow:inset 0 -3px 0 var(--ss-yellow)}

/* ── What buyers said ────────────────────────────────────────────────────── */
/* Only people who bought the thing can be in this list, so it needs no badge
   saying so on every line: the heading says it once. */
.ss-reviews{margin-top:48px;max-width:44rem}
.ss-reviews h2{font-size:1.3rem;margin-bottom:6px}
.ss-reviews__avg{color:var(--ss-ink-2);margin:0 0 20px}
.ss-review{border-top:2px solid var(--ss-line);padding:16px 0}
.ss-review__head{margin:0 0 8px;font-size:.9rem;color:var(--ss-ink-2)}
.ss-review p{margin:0 0 8px;line-height:1.7}
.ss-review__reply{margin-top:10px;padding-left:14px;border-left:3px solid var(--ss-gold-soft);color:var(--ss-ink-2)}

/* ── The motto under the name (founder, 6 September 2026) ────────────────── */
/* It belongs to the lockup, so it is stacked under the name rather than set
   beside it, and it never appears in the page copy. */
.ss-mark__lockup{display:inline-flex;flex-direction:column;justify-content:center;gap:1px;line-height:1}
/* Sentence case, not caps (founder, 6 September 2026). Caps made it a label
   under the name; in sentence case, at the wordmark's weight, the two lines
   read as one lockup. */
.ss-mark__motto{
  font-size:.73rem;font-weight:600;letter-spacing:.01em;
  color:var(--ss-ink-3);white-space:nowrap;
}
.ss-mark--stack .ss-mark__motto{font-size:.95rem}
.ss-bridgebar .ss-mark__motto,.ss-foot .ss-mark__motto{color:rgba(255,246,224,.72)}
/* A phone header has to fit the mark, one call to action and the menu control.
   The motto is the only thing on that row that is not load-bearing. */
@media (max-width:430px){.ss-nav .ss-mark__motto{display:none}}