/* /shop page design: the home page's language (giant Maratype, PickleMe script, dot-grid black, cream, full-bleed
 * orange, 3px rules, wave dividers, white message bubbles), applied to a store. Loaded after shop.css.
 * Each product section is themed with custom properties: cream, black or orange. */

.st { --nav: var(--gn-nav-h, 64px); --wv: clamp(48px, 8vw, 112px); background: #0c0c0c; }
.st a { text-decoration: none; }

/* ---------- hero ---------- */
.st-hero { position: relative; overflow: hidden; background: #0c0c0c; color: #f2e9dc; min-height: min(88vh, 860px); display: flex; flex-direction: column; justify-content: center; padding: 34px 0 44px; }
.st-hero::before { content: ''; position: absolute; inset: -60%; background-image: radial-gradient(#191919 1.8px, transparent 1.8px); background-size: 52px 52px; }
.st-big { position: relative; margin: 0; font: 400 clamp(140px, 30vw, 480px)/.78 var(--gn-ma); letter-spacing: -1vw; text-align: center; text-transform: uppercase; text-shadow: 1vw 1vw 0 rgba(0, 0, 0, .55); }
.st-script { position: relative; z-index: 2; margin-top: -6vw; text-align: center; pointer-events: none; }
.st-script span { display: inline-block; font: 400 clamp(56px, 11vw, 170px)/1 var(--gn-pk); color: #ff3b1f; transform: rotate(-4deg); text-shadow: 0 0 60px rgba(255, 59, 31, .35); }
.st-hero-p { position: absolute; left: clamp(20px, 2.4vw, 34px); bottom: 44px; z-index: 3; max-width: 340px; margin: 0; font-size: 18px; line-height: 1.55; color: #b7b1a4; }
.st-tiles { position: absolute; right: clamp(20px, 2.4vw, 34px); top: 52%; transform: translateY(-50%); width: min(200px, 13vw); display: flex; flex-direction: column; gap: 14px; z-index: 3; }
.st-tiles img { width: 100%; border: 3px solid #f2e9dc; background: #0c0c0c; }
.st-tiles img:nth-child(1) { transform: rotate(2deg); }
.st-tiles img:nth-child(2) { transform: rotate(-2deg); }
@media (max-width: 900px) { .st-tiles { display: none; } .st-hero-p { position: relative; left: auto; bottom: auto; margin: 26px 20px 0; max-width: 46ch; } .st-hero { justify-content: flex-start; min-height: 0; padding-bottom: 46px; } }

/* ---------- jump bar ---------- */
.st-jump { position: sticky; top: var(--nav); z-index: 40; background: #0c0c0c; border-top: 1px solid #2a2a2a; border-bottom: 1px solid #2a2a2a; }
.st-jump-in { display: flex; gap: 8px; overflow-x: auto; padding: 8px clamp(20px, 2.4vw, 34px); scrollbar-width: none; max-width: 1440px; margin: 0 auto; }
.st-jump-in::-webkit-scrollbar { display: none; }
.st-jump a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 36px; padding: 0 15px; border: 1.5px solid #3a3a3a; border-radius: 20px; color: #f2e9dc; font: 400 14px/1 var(--gn-ma); letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; }
.st-jump a:hover { border-color: #ff3b1f; }
.st-jump a[aria-current="true"] { background: #ff3b1f; border-color: #ff3b1f; color: #fff; }
.st-jump a:focus-visible { outline: 3px solid #ff3b1f; outline-offset: 2px; }

/* ---------- ticker ---------- */
.st-tick { background: #ff3b1f; color: #0c0c0c; border-top: 3px solid #0c0c0c; overflow: hidden; white-space: nowrap; }
.st-tick-t { display: inline-flex; animation: st-mq 38s linear infinite; }
.st-tick span { padding: 16px 0; font: 400 clamp(20px, 2.2vw, 30px)/1 var(--gn-ma); letter-spacing: 2px; text-transform: uppercase; }
.st-tick span::after { content: '✱'; margin: 0 clamp(20px, 3vw, 44px); color: #f2e9dc; }
@keyframes st-mq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .st-tick-t { animation: none; } .st-tick { overflow-x: auto; } }

/* ---------- product sections ---------- */
.st-prod { position: relative; padding: clamp(28px, 4vw, 64px) 0 clamp(56px, 7vw, 110px); background-color: var(--bg); color: var(--fg); scroll-margin-top: calc(var(--nav) + 50px); font-family: var(--gn-sans); }
.st-prod.t-cream { --bg: #f2e9dc; --fg: #26231e; --mute: #4a463e; --line: #26231e; --edge: #26231e; --shadow: rgba(38, 35, 30, .18); --accent: #ff3b1f; --bubble: #fffdf6; --btn: #ff3b1f; --btn-h: #d32f13; --btn-fg: #fff; --dot: #e3dbc6; --dotsz: 26px; --dotr: 2px; }
.st-prod.t-black { --bg: #0c0c0c; --fg: #f2e9dc; --mute: #b7b1a4; --line: #3a3a3a; --edge: #f2e9dc; --shadow: rgba(255, 59, 31, .5); --accent: #ff3b1f; --bubble: #f2e9dc; --btn: #ff3b1f; --btn-h: #d32f13; --btn-fg: #fff; --dot: #191919; --dotsz: 52px; --dotr: 1.8px; }
.st-prod.t-orange { --bg: #ff3b1f; --fg: #0c0c0c; --mute: rgba(12, 12, 12, .8); --line: #0c0c0c; --edge: #0c0c0c; --shadow: rgba(12, 12, 12, .35); --accent: #f2e9dc; --bubble: #fffdf6; --btn: #0c0c0c; --btn-h: #26231e; --btn-fg: #f2e9dc; --dot: transparent; --dotsz: 26px; --dotr: 2px; }
.st-prod { background-image: radial-gradient(var(--dot) var(--dotr), transparent calc(var(--dotr) + .4px)); background-size: var(--dotsz) var(--dotsz); }
.st-wave { display: block; width: 100%; margin-bottom: -1px; }
.st-in { max-width: 1440px; margin: 0 auto; padding: 0 clamp(20px, 2.4vw, 34px); position: relative; }

.st-meta { font: 400 12px/1 var(--gn-sans); letter-spacing: 2.4px; text-transform: uppercase; color: var(--mute); }
.st-h2 { margin: clamp(26px, 3vw, 46px) 0 0; padding-top: .04em; font: 400 clamp(52px, 10.5vw, 176px)/.86 var(--gn-ma); letter-spacing: -.3vw; text-transform: uppercase; overflow-wrap: anywhere; }
.st-kick { display: inline-block; margin-top: 12px; font: 400 clamp(32px, 4.4vw, 66px)/1 var(--gn-pk); color: var(--accent); transform: rotate(-3deg); transform-origin: left; }
.st-tag { display: inline-block; margin-left: 14px; padding: 8px 14px; background: #0c0c0c; color: #f2e9dc; font: 400 16px/1 var(--gn-ma); letter-spacing: 2px; text-transform: uppercase; vertical-align: middle; }
.t-black .st-tag { background: #ff3b1f; color: #fff; }

.st-main { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 88px); margin-top: clamp(30px, 4vw, 60px); align-items: start; }
@media (max-width: 900px) { .st-main { grid-template-columns: minmax(0, 1fr); } }
.st-main > *, .st-low > * { min-width: 0; }

/* gallery */
.st-gal { border: 3px solid var(--edge); box-shadow: 12px 12px 0 var(--shadow); background: var(--bg); color: var(--fg); }
@media (min-width: 901px) { .st-gal { position: sticky; top: calc(var(--nav) + 70px); } }
.st-view { position: relative; }
.st-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; background: #0c0c0c; outline-offset: -4px; }
.st-track::-webkit-scrollbar { display: none; }
.st-track:focus-visible { outline: 3px solid #ff3b1f; }
.st-slide { flex: 0 0 100%; aspect-ratio: 4 / 5; scroll-snap-align: center; scroll-snap-stop: always; margin: 0; background: #0c0c0c; }
.st-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.st-bar { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 3px solid var(--edge); }
.st-cap { flex: 1; min-width: 0; font: 400 clamp(17px, 1.5vw, 21px)/1.1 var(--gn-ma); letter-spacing: .5px; text-transform: uppercase; }
.st-cap small { display: block; margin-bottom: 4px; font: 700 11px/1 var(--gn-sans); letter-spacing: 2px; color: var(--mute); }
.st-arrow { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--edge); background: transparent; color: var(--fg); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.st-arrow svg { width: 20px; height: 20px; }
.st-arrow:hover:not([disabled]) { background: #ff3b1f; border-color: #ff3b1f; color: #0c0c0c; }
.st-arrow[disabled] { opacity: .3; cursor: default; }
.st-arrow:focus-visible { outline: 3px solid #ff3b1f; outline-offset: 2px; }
.st-thumbs { display: flex; gap: 6px; overflow-x: auto; padding: 10px 14px 14px; border-top: 2px dashed var(--line); scrollbar-width: thin; }
.st-thumbs button { flex: 0 0 54px; height: 68px; padding: 0; border: 2px solid var(--edge); background: #0c0c0c; opacity: .55; cursor: pointer; overflow: hidden; }
.st-thumbs button[aria-current="true"] { opacity: 1; border-color: #ff3b1f; box-shadow: 3px 3px 0 var(--shadow); }
.st-thumbs button:focus-visible { outline: 3px solid #ff3b1f; outline-offset: 2px; }
.st-thumbs img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

/* about + buy */
.st-lead { margin: 0; max-width: 56ch; font-size: clamp(18px, 1.55vw, 23px); line-height: 1.6; font-weight: 500; }
.st-about-h { margin: 0 0 14px; font: 400 14px/1 var(--gn-ma); letter-spacing: 3px; text-transform: uppercase; color: var(--accent); }
.st-inc { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(20px, 3vw, 44px); counter-reset: i; }
.st-inc li { counter-increment: i; display: flex; gap: 12px; align-items: baseline; padding: 15px 0 17px; border-top: 2px solid var(--line); font-size: 15.5px; line-height: 1.45; }
.st-inc li::before { content: counter(i, decimal-leading-zero); flex: 0 0 auto; font: 400 15px/1 var(--gn-ma); letter-spacing: 1px; color: var(--accent); }
@media (max-width: 560px) { .st-inc { grid-template-columns: 1fr; } }
.st-buy { display: flex; flex-wrap: wrap; gap: 22px 34px; align-items: flex-end; justify-content: space-between; margin-top: 30px; padding-top: 26px; border-top: 3px solid var(--line); }
.st-from { font: 700 12px/1 var(--gn-sans); letter-spacing: 2.4px; text-transform: uppercase; color: var(--mute); }
.st-price { display: block; margin-top: 8px; font: 400 clamp(56px, 6.6vw, 104px)/.9 var(--gn-ma); letter-spacing: -.5px; }
.st-price small { font-size: .26em; letter-spacing: 1px; color: var(--mute); margin-left: 10px; text-transform: uppercase; }
.st-price s { font-size: .32em; color: var(--mute); margin-left: 12px; }
.st-acts { display: flex; flex-wrap: wrap; gap: 12px; }
.st-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 15px 30px; border: 2px solid var(--btn); border-radius: 32px; background: var(--btn); color: var(--btn-fg); font: 400 20px/1 var(--gn-ma); letter-spacing: 1px; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.st-btn:hover { background: var(--btn-h); border-color: var(--btn-h); }
.st-btn.ghost { background: transparent; color: var(--fg); border-color: var(--fg); }
.st-btn.ghost:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.st-btn:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; }
.st-btn.sm { min-height: 44px; padding: 10px 22px; font-size: 16px; }
.st-fine { margin: 14px 0 0; font-size: 13px; color: var(--mute); }

/* faq + community */
.st-low { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 88px); margin-top: clamp(50px, 6.5vw, 100px); align-items: start; }
@media (max-width: 900px) { .st-low { grid-template-columns: minmax(0, 1fr); } }
.st-sec-h { margin: 0 0 22px; font: 400 clamp(38px, 5.2vw, 78px)/.9 var(--gn-ma); letter-spacing: -.2px; text-transform: uppercase; }
.st-sec-h em { font: 400 .5em/1 var(--gn-pk); color: var(--accent); margin-left: 12px; letter-spacing: 0; text-transform: none; display: inline-block; transform: rotate(-3deg); }
.st-faq { border-bottom: 3px solid var(--line); }
.st-faq details { border-top: 3px solid var(--line); }
.st-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 4px; cursor: pointer; list-style: none; font-size: clamp(17px, 1.6vw, 22px); font-weight: 500; line-height: 1.3; }
.st-faq summary::-webkit-details-marker { display: none; }
.st-faq summary::after { content: '+'; flex: 0 0 auto; font: 400 36px/1 var(--gn-ma); color: var(--accent); }
.st-faq details[open] summary::after { content: '–'; }
.st-faq summary:hover { color: var(--accent); }
.st-faq summary:focus-visible { outline: 3px solid #ff3b1f; outline-offset: 2px; }
.st-faq p { margin: 0; padding: 0 4px 24px; max-width: 64ch; font-size: 16.5px; line-height: 1.65; color: var(--mute); }
.st-com + .st-com { margin-top: clamp(34px, 4vw, 56px); }
.st-sum { display: flex; align-items: baseline; gap: 14px; margin: -8px 0 16px; flex-wrap: wrap; }
.st-sum b { font: 400 clamp(46px, 5vw, 72px)/.9 var(--gn-ma); }
.st-sum span { color: var(--mute); font-size: 15px; }
.st-stars { color: var(--accent); letter-spacing: 3px; font-size: 20px; white-space: nowrap; }
.t-cream .st-stars { color: #d32f13; }
.st-b { margin: 0 0 12px; padding: 16px 22px 18px; background: var(--bubble); color: #26231e; border-radius: 22px; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); }
.st-b .who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 6px; font: 400 18px/1.1 var(--gn-ma); letter-spacing: .5px; text-transform: uppercase; }
.st-b .who .st-stars { color: #d32f13; font-size: 17px; }
.st-b .who time { margin-left: auto; font: 400 12px/1 var(--gn-sans); letter-spacing: 1px; color: #6a655b; text-transform: none; }
.st-b p { margin: 0; font-size: 16px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.st-ver { padding: 4px 9px; border-radius: 12px; background: #e7f6ec; color: #1c5c38; font: 700 10.5px/1 var(--gn-sans); letter-spacing: 1.2px; text-transform: uppercase; }
.st-empty { margin: 0 0 14px; color: var(--mute); font-size: 16px; line-height: 1.6; max-width: 46ch; }
.st-real { display: inline-block; margin: 0 0 18px; color: var(--fg); font-size: 15px; text-decoration: underline !important; text-underline-offset: 4px; text-decoration-color: var(--accent) !important; text-decoration-thickness: 2px !important; }
.st-real:hover { color: var(--accent); }

/* forms */
.st-form { margin-top: 18px; padding: 22px; border: 3px solid var(--edge); background: var(--bg); }
.st-form[hidden] { display: none; }
.st-f { margin: 0 0 16px; }
.st-f label, .st-f .lab { display: block; margin-bottom: 6px; font: 700 12px/1.2 var(--gn-sans); letter-spacing: 1.6px; text-transform: uppercase; }
.st-f .opt { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--mute); }
.st-i, .st-t { width: 100%; padding: 13px 14px; border: 2px solid var(--edge); border-radius: 8px; background: #fffdf6; color: #26231e; font: 400 16px/1.4 var(--gn-sans); }
.t-black .st-i, .t-black .st-t { border-color: #f2e9dc; }
.st-t { min-height: 120px; resize: vertical; }
.st-i:focus, .st-t:focus { outline: 3px solid #ff3b1f; outline-offset: 2px; }
.st-i[aria-invalid="true"], .st-t[aria-invalid="true"] { border-color: #b3260e; background: #fdf1ee; }
.st-h { margin: 5px 0 0; font-size: 13px; color: var(--mute); }
.st-e { margin: 6px 0 0; font-size: 13.5px; font-weight: 700; color: #b3260e; padding: 6px 10px; background: #fffdf6; border-left: 4px solid #b3260e; }
.st-rate { display: flex; gap: 8px; flex-wrap: wrap; }
.st-rate label { position: relative; margin: 0; }
.st-rate input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.st-rate span { display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 0 16px; border: 2px solid var(--edge); border-radius: 24px; font: 400 18px/1 var(--gn-ma); letter-spacing: 1px; text-transform: none; }
.st-rate span i { font-style: normal; color: var(--accent); }
.st-rate input:checked + span { background: var(--fg); color: var(--bg); }
.st-rate input:checked + span i { color: #ff3b1f; }
.st-rate input:focus-visible + span { outline: 3px solid #ff3b1f; outline-offset: 2px; }
.st-consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; margin-bottom: 16px; }
.st-consent input { flex: 0 0 auto; width: 22px; height: 22px; margin: 1px 0 0; accent-color: #ff3b1f; }
.st-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.st-ok { padding: 16px 18px; border: 3px solid var(--edge); background: var(--bubble); color: #1c5c38; font-weight: 700; margin-top: 18px; }
.st-msg { margin: 0 0 14px; padding: 12px 14px; background: #fffdf6; color: #6d1608; border-left: 4px solid #b3260e; font-size: 14px; font-weight: 700; }

/* ---------- foot note ---------- */
.st-end { background: #0c0c0c; color: #b7b1a4; padding: clamp(36px, 5vw, 70px) clamp(20px, 2.4vw, 34px) 10px; position: relative; }
.st-end p { max-width: 70ch; margin: 0 auto; font-size: 14px; line-height: 1.7; text-align: center; }
.st-end .big { font: 400 clamp(40px, 7vw, 110px)/.9 var(--gn-pk); color: #ff3b1f; text-align: center; display: block; margin-bottom: 18px; transform: rotate(-3deg); text-shadow: 0 0 60px rgba(255, 59, 31, .3); }
.st-ruler { height: 34px; margin-top: 34px; background: repeating-linear-gradient(90deg, #3a3a3a 0 1px, transparent 1px 20px); border-top: 1px solid #2a2a2a; opacity: .8; }

/* ---------- contact + slim page heroes ---------- */
.st-hero.s { min-height: 0; padding: 60px 0 76px; }
.st-hero.s .st-big { font-size: clamp(72px, 17vw, 270px); }
.st-hero.s .st-script { margin-top: -3.4vw; }
.st-hero.s .st-script span { font-size: clamp(44px, 8vw, 128px); }
.st-hero.s .st-hero-p { position: relative; left: auto; bottom: auto; margin: 26px auto 0; text-align: center; max-width: 52ch; padding: 0 20px; }
.ct-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(30px, 5vw, 88px); align-items: start; }
@media (max-width: 900px) { .ct-grid { grid-template-columns: minmax(0, 1fr); } }
.ct-form { padding: clamp(20px, 3vw, 34px); border: 3px solid var(--edge); background: var(--bubble); box-shadow: 12px 12px 0 var(--shadow); color: #26231e; }
.ct-form .st-f label, .ct-form .st-f .lab { color: #26231e; }
.ct-form .st-h, .ct-form .st-f .opt { color: #4a463e; }
.ct-form .st-consent { color: #26231e; }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 600px) { .ct-row { grid-template-columns: 1fr; } }
select.st-i { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #26231e 50%), linear-gradient(135deg, #26231e 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.ct-side h2 { margin: 0 0 14px; font: 400 clamp(30px, 3.4vw, 48px)/.95 var(--gn-ma); text-transform: uppercase; }
.ct-card { margin: 0 0 18px; padding: 20px 22px; border: 3px solid var(--edge); background: var(--bubble); color: #26231e; box-shadow: 8px 8px 0 var(--shadow); }
.ct-card h3 { margin: 0 0 6px; font: 400 15px/1 var(--gn-ma); letter-spacing: 2.4px; text-transform: uppercase; color: #d32f13; }
.ct-card p { margin: 0 0 12px; font-size: 15px; line-height: 1.55; }
.ct-card p:last-child { margin-bottom: 0; }
.ct-card a.plain { color: #26231e; font-weight: 700; text-decoration: underline; text-decoration-color: #ff3b1f; text-decoration-thickness: 2px; text-underline-offset: 4px; overflow-wrap: anywhere; }
.ct-wa { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 14px 26px; border: 2px solid #25d366; border-radius: 14px; background: #25d366; color: #0c3d20; font: 400 20px/1 var(--gn-ma); letter-spacing: 1px; text-transform: uppercase; box-shadow: 6px 6px 0 rgba(38, 35, 30, .18); }
.ct-wa:hover { background: #1fb457; border-color: #1fb457; }
.ct-wa:focus-visible { outline: 3px solid #26231e; outline-offset: 3px; }
.ct-done h2 { margin: 0 0 10px; font: 400 clamp(34px, 4vw, 56px)/.95 var(--gn-ma); text-transform: uppercase; color: #1c5c38; }
.ct-done p { margin: 0 0 18px; font-size: 16px; line-height: 1.6; }
.st-hero.s .st-big { letter-spacing: -.4vw; }