:root { color-scheme: dark; --paper: #f3f3f3; --black: #080808; --header-height: 104px; --footer-height: 160px; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--black); color: var(--paper); font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 7px; }
::selection { background: #fff; color: #000; }
.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; }
.skip-link { position: fixed; top: -100px; left: 20px; padding: 16px; background: white; color: black; z-index: 20; }
.skip-link:focus { top: 16px; }
.micro { font-family: "Courier New", monospace; font-size: 10px; line-height: 1.5; letter-spacing: 1px; font-weight: 700; }
.site-shell { min-height: 100svh; display: flex; flex-direction: column; }
.route-stage { position: relative; isolation: isolate; flex: 1; display: flex; flex-direction: column; min-width: 0; }
.route-wipe { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: #080808; animation: route-uncover .38s cubic-bezier(.65,0,.25,1) both; }
.route-stage > main { animation: route-arrive .34s ease-out both; }
@keyframes route-uncover { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }
@keyframes route-arrive { from { opacity: .55; } to { opacity: 1; } }
@media(prefers-reduced-motion: reduce) { .route-wipe { display: none; } }
.site-header { position: relative; z-index: 5; height: var(--header-height); flex-shrink: 0; padding: 0 4.4%; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #2a2a2a; background: var(--black); }
.wordmark { display: flex; align-items: center; min-height: 44px; }
.wordmark img { display: block; width: 148px; height: 74px; object-fit: contain; }
.site-nav { display: flex; gap: 38px; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 11px; letter-spacing: 1px; font-weight: 700; text-transform: uppercase; position: relative; color: #aaa; transition: color .2s; }
.site-nav a::after { content: ""; position: absolute; height: 1px; left: 0; right: 0; bottom: 4px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: #fff; }
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.menu-toggle { display: none; }
.hero { min-height: 440px; height: calc(100svh - var(--header-height) - var(--footer-height)); position: relative; overflow: hidden; padding: 45px 4.4%; display: flex; align-items: center; justify-content: center; isolation: isolate; background: #050505; }
.hero-media { position: absolute; inset: 0; background: #050505; z-index: -1; }
.hero-grain { position: absolute; inset: 0; z-index: -1; background-image: url("/textures/film-grain.svg"); background-repeat: repeat; opacity: .065; pointer-events: none; }
.hero-brand { width: 100%; text-align: center; animation: logo-arrive 1.25s cubic-bezier(.16,1,.3,1) both; }
.logo-art { position: relative; width: min(77vw, 1040px); margin: 0 auto; }
.hero-logo { width: 100%; height: auto; display: block; }
.hero .logo-art { max-width: calc(max(80px, 100svh - var(--header-height) - var(--footer-height) - 170px) * 2.2); }
.hero-store { display: inline-flex; align-items: center; justify-content: space-between; gap: 38px; min-height: 44px; margin-top: 24px; padding: 0 20px; border: 1px solid #666; color: #eee; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; transition: background .2s, color .2s, border-color .2s; }
.hero-store span { font-size: 18px; transition: transform .2s; }
.hero-store:hover { background: #eee; color: #080808; border-color: #eee; }
.hero-store:hover span { transform: translate(2px,-2px); }
.logo-sheen { position: absolute; inset: 0; pointer-events: none; opacity: 0; -webkit-mask: url("/brand/field-supply-white.webp") center / 100% 100% no-repeat; mask: url("/brand/field-supply-white.webp") center / 100% 100% no-repeat; background-image: linear-gradient(110deg, transparent 37%, rgb(60 60 60 / 42%) 44%, rgb(220 220 220 / 60%) 48%, #fff 50%, rgb(80 80 80 / 34%) 54%, transparent 62%); background-size: 300% 100%; background-repeat: no-repeat; animation: silver-sweep 1.5s .65s cubic-bezier(.35,0,.2,1) both; }
.corner { position: absolute; top: 50%; height: 14px; width: 14px; opacity: .55; animation: detail-arrive 1s .25s both; }
.corner::before, .corner::after { content:""; position: absolute; background: #999; }
.corner::before { width: 14px; height: 1px; top: 7px; }.corner::after { width: 1px; height: 14px; left: 7px; }
.corner-left { left: 4.4%; }.corner-right { right: 4.4%; }
.intro-line { position: absolute; left: 4.4%; right: 4.4%; height: 1px; background: #777; opacity: 0; pointer-events: none; animation: line-arrive 1.2s cubic-bezier(.2,.6,.3,1) both; }
.intro-line-top { top: 30px; transform-origin: left; }.intro-line-bottom { bottom: 30px; transform-origin: right; }
.site-footer { min-height: var(--footer-height); flex-shrink: 0; margin-top: auto; border-top: 1px solid #2a2a2a; padding: 22px 4.4% 18px; color: #969696; }
.drop-signup { display: grid; grid-template-columns: 1fr minmax(300px,480px); gap: 30px; align-items: start; }
.drop-signup h2 { margin: 12px 0 0; font-size: 19px; letter-spacing: -.3px; font-weight: 700; color: var(--paper); }
.signup-controls { display: flex; border: 1px solid #777; min-height: 46px; }
.signup-controls:focus-within { border-color: white; }
.signup-controls input { width: 100%; min-width: 0; border: 0; background: transparent; color: white; padding: 12px 14px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; border-radius: 0; }
.signup-controls input::placeholder { color: #999; opacity: 1; }
.signup-controls input:focus-visible { outline: 2px solid white; outline-offset: -3px; }
.signup-controls button { flex-shrink: 0; min-height: 44px; border: 0; border-left: 1px solid #777; padding: 0 20px; background: #f3f3f3; color: #080808; font-size: 11px; font-weight: 700; cursor: pointer; }
.signup-controls button:hover { background: #d5d5d5; }.signup-controls button:disabled { opacity: .6; cursor: default; }.signup-controls button span { margin-left: 15px; font-size: 15px; }
.signup-status { min-height: 16px; margin: 8px 0 0; font-size: 10px; line-height: 1.6; color: #aaa; }
.footer-copyright { margin-top: 22px; font-size: 9px; }
.interior-page { flex: 1; width: 100%; max-width: 1600px; align-self: center; padding: 65px 4.4% 70px; }
.interior-heading { border-bottom: 1px solid #2a2a2a; padding-bottom: 30px; }
.interior-heading h1 { font-family: Impact, "Arial Narrow", sans-serif; font-size: clamp(55px, 6vw, 88px); font-weight: 400; line-height: 1; letter-spacing: 1px; text-transform: uppercase; margin: 0; }
.about-content { min-height: 300px; display: flex; gap: clamp(32px, 6vw, 96px); align-items: center; justify-content: center; padding-top: 55px; }
.about-copy { max-width: 38ch; }
.about-copy h2 { margin: 0; font-size: clamp(25px, 3vw, 40px); line-height: 1.12; letter-spacing: -.035em; }
.about-year { margin: 10px 0 0; color: #bbb; }
.contact-email { display: inline-flex; align-items: center; min-height: 44px; margin-top: clamp(28px, 5vw, 64px); font-size: clamp(22px, 4vw, 48px); letter-spacing: -.035em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.contact-email:hover { text-decoration-thickness: 2px; }
.about-statement { margin: 24px 0 0; font-size: 17px; line-height: 1.55; }
@media (max-width: 640px) {
  .about-content { flex-direction: column; text-align: center; }
  .about-content .about-emblem { width: min(210px, 58vw); }
}
.game-link { font-size: 13px; color: #bbb; min-height: 44px; display: inline-flex; align-items: center; gap: 12px; }.game-link:hover { color: #fff; text-decoration: underline; text-underline-offset: 5px; }
.about-emblem { display: block; width: min(300px, 65vw); height: auto; }
.store-content { min-height: 270px; display: flex; align-items: center; }
.coming-soon { font-size: clamp(26px, 4.5vw, 64px); letter-spacing: -1px; font-weight: 700; margin: 0; }
.coming-soon span { color: #777; }
.page-enter { animation: content-arrive .65s cubic-bezier(.16,1,.3,1) both; }
@keyframes logo-arrive { from { opacity: 0; transform: translateY(16px) scale(.96); filter: blur(5px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
@keyframes silver-sweep { 0% { background-position: 100% 0; opacity: 0; } 12% { opacity: 1; } 82% { opacity: 1; } 100% { background-position: 0% 0; opacity: 0; } }
@keyframes detail-arrive { from { opacity: 0; transform: scale(.6); } to { opacity: .55; transform: scale(1); } }
@keyframes line-arrive { 0% { transform: scaleX(0); opacity: 0; } 35% { opacity: .5; } 75% { transform: scaleX(1); opacity: .35; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes content-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media(max-width: 800px) {
 :root { --header-height: 84px; }.wordmark img { width: 120px; height: 60px; }.site-nav { gap: 24px; }.hero { min-height: 330px; }.logo-art { width: 85vw; }.corner { display: none; }
}
@media(max-width: 640px) {
 :root { --footer-height: 192px; }
 .site-header { padding: 0 22px; }
 .menu-toggle { display: inline-flex; gap: 15px; align-items: center; min-height: 44px; background: none; border: 0; padding: 0 2px; color: white; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; }
 .menu-icon { width: 20px; height: 14px; position: relative; display: block; }.menu-icon i { position: absolute; width: 20px; height: 1px; background: white; left: 0; transition: transform .2s, top .2s; }.menu-icon i:first-child { top: 3px; }.menu-icon i:last-child { top: 11px; }.menu-icon.is-open i:first-child { top: 7px; transform: rotate(45deg); }.menu-icon.is-open i:last-child { top: 7px; transform: rotate(-45deg); }
 .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #080808; border-bottom: 1px solid #444; padding: 18px 22px 25px; gap: 4px; }
 .site-nav.is-open { display: flex; flex-direction: column; }.site-nav a { min-height: 49px; font-size: 13px; }.site-nav a::after { right: auto; width: 24px; }
 .hero { padding: 40px 22px; min-height: 250px; }.logo-art { width: 100%; }.site-footer { padding: 20px 22px 16px; }.intro-line { left: 22px; right: 22px; }
 .drop-signup { grid-template-columns: 1fr; gap: 14px; }.drop-signup h2 { margin: 0; font-size: 17px; }.signup-controls input { font-size: 16px; padding: 12px; }.signup-controls button { padding: 0 15px; }.signup-controls button span { margin-left: 10px; }.signup-status { font-size: 9px; }.footer-copyright { margin-top: 20px; font-size: 8px; }
 .interior-page { padding: 45px 22px 55px; }.interior-heading { padding-bottom: 25px; }.about-content { padding-top: 45px; }.store-content { min-height: 230px; }
}
@media(prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .intro-line, .logo-sheen { display: none; } }

/* Local store layout exploration: every item is visibly a sample. */
.preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 8px 4.4%; min-height: 45px; border-bottom: 1px solid #333; background: #161616; font-family: "Courier New", monospace; font-size: 9px; letter-spacing: .7px; }
.preview-bar > span { color: #bbb; }.preview-separator { color: #666; padding: 0 8px; }
.preview-bar button { color: #fff; background: transparent; border: 0; min-height: 32px; font: inherit; font-weight: 700; white-space: nowrap; cursor: pointer; }.preview-bar button:hover { text-decoration: underline; text-underline-offset: 4px; }
.store-page { padding-top: 40px; padding-bottom: 45px; }
.store-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding-bottom: 24px; }.store-heading .micro { color: #aaa; padding-bottom: 7px; }
.store-filters { display: flex; justify-content: space-between; align-items: center; gap: 15px; min-height: 80px; }.store-filters > div { display: flex; gap: 8px; }.store-filters button { background: transparent; color: #999; border: 1px solid transparent; padding: 0 18px; min-height: 40px; font-size: 11px; cursor: pointer; }.store-filters button[aria-pressed="true"] { color: #fff; border-color: #777; }.store-filters button:hover { color: #fff; border-color: #555; }.store-filters > span { font-family: "Courier New", monospace; font-size: 9px; color: #999; letter-spacing: 1px; }
.product-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; }
.product-card { display: block; min-width: 0; }.product-card:focus-visible { outline-offset: 5px; }
.product-placeholder { position: relative; aspect-ratio: 1.65; background: #e3e3e3; color: #666; overflow: hidden; border: 1px solid #d5d5d5; }
.product-placeholder svg { display: block; width: 100%; height: 100%; transition: transform .45s cubic-bezier(.2,.6,.3,1); }.product-card:hover svg { transform: scale(1.035); }
.placeholder-label, .placeholder-caption { position: absolute; left: 20px; font-family: "Courier New", monospace; font-weight: 700; letter-spacing: 1px; font-size: 9px; z-index: 1; }.placeholder-label { top: 19px; }.placeholder-caption { bottom: 17px; font-size: 8px; color: #707070; }
.sample-fabric { fill: #333; stroke: #555; stroke-width: 1.5; }.sample-stitch { stroke: #888; stroke-width: 1; stroke-dasharray: 4 4; }.sample-fold { stroke: #777; stroke-width: 1.2; }.sample-buckle { stroke: #111; fill: #505050; stroke-width: 4; }
.product-placeholder[data-color="White"] .sample-fabric { fill: #f8f8f8; stroke: #aaa; }.product-placeholder[data-color="White"] .sample-buckle { fill: #ddd; stroke: #aaa; }
.product-card-info { display: flex; justify-content: space-between; gap: 15px; padding: 22px 0 0; }.product-category { font-family: "Courier New", monospace; font-size: 9px; color: #aaa; letter-spacing: 1px; text-transform: uppercase; }.product-card-info h2 { font-size: 23px; letter-spacing: -.5px; margin: 8px 0; font-weight: 700; }.sample-design { color: #999; font-size: 11px; }.product-card-price { display: flex; flex-direction: column; align-items: end; justify-content: space-between; font-size: 12px; padding: 2px 0 4px; }.product-card-arrow { font-size: 25px; transition: transform .2s; }.product-card:hover .product-card-arrow { transform: translate(2px,-2px); }
.product-page { padding-top: 30px; padding-bottom: 55px; }.store-back { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-bottom: 25px; font-size: 11px; color: #bbb; }.store-back:hover { color: white; }
.product-detail-grid { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(300px,.8fr); gap: 7%; align-items: start; }.product-gallery .product-placeholder { aspect-ratio: 1.08; }.product-gallery p { font-size: 10px; color: #999; line-height: 1.6; margin: 14px 0 0; }.product-detail-info { padding-top: 7px; }.product-detail-info h1 { font-family: Impact, "Arial Narrow", sans-serif; font-size: clamp(43px,4.4vw,68px); text-transform: uppercase; line-height: 1.05; letter-spacing: .5px; font-weight: 400; margin: 18px 0 20px; }.detail-price { margin: 0 0 22px; font-size: 19px; }.preview-explanation { font-size: 12px; line-height: 1.75; color: #aaa; margin: 0; }
.sample-colors { border: 0; border-top: 1px solid #333; padding: 26px 0 0; margin: 28px 0 23px; min-width: 0; }.sample-colors legend { float: left; width: 100%; padding: 0; margin-bottom: 15px; font-size: 12px; }.sample-colors legend span { color: #999; margin-left: 12px; }.sample-colors > div { display: flex; gap: 10px; clear: both; }.color-choice { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 15px; border: 1px solid #444; background: transparent; color: #bbb; font-size: 11px; cursor: pointer; }.color-choice[aria-pressed="true"] { border-color: #fff; color: #fff; }.color-swatch { display: inline-block; height: 12px; width: 12px; border: 1px solid #777; background: #151515; }.color-swatch[data-color="White"] { background: #eee; }
.quantity-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 23px; font-size: 12px; }.quantity-control { display: flex; border: 1px solid #555; align-items: center; }.quantity-control button { width: 44px; height: 44px; border: 0; background: transparent; color: #fff; cursor: pointer; font-size: 18px; }.quantity-control button:disabled { color: #666; cursor: default; }.quantity-control output { width: 35px; text-align: center; font-size: 12px; }
.store-button { min-height: 52px; width: 100%; padding: 15px 20px; background: #f3f3f3; color: #080808; border: 1px solid #f3f3f3; text-align: center; font-size: 12px; font-weight: 700; cursor: pointer; transition: background .2s; }.store-button > span { float: right; font-size: 16px; }.store-button:hover { background: #d5d5d5; }.store-button.secondary { background: transparent; color: #fff; border-color: #666; }.store-button.secondary:hover { background: #222; }.bag-feedback { min-height: 35px; margin: 10px 0 12px; color: #ccc; font-size: 11px; line-height: 1.5; }
.product-details { border-top: 1px solid #333; font-size: 12px; }.product-details:last-child { border-bottom: 1px solid #333; }.product-details summary { cursor: pointer; padding: 20px 0; }.product-details p { color: #aaa; font-size: 12px; line-height: 1.7; margin: 0 0 20px; }
html:has(.preview-bag[open]) { overflow: hidden; }
.preview-bag { position: fixed; inset: 0 0 0 auto; width: min(500px,100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; padding: 0; background: #101010; color: #fff; border: 0; border-left: 1px solid #444; overflow: hidden; box-shadow: -20px 0 80px rgb(0 0 0 / 25%); }
.preview-bag[open] { animation: bag-arrive .35s cubic-bezier(.16,1,.3,1) both; }
.preview-bag::backdrop { background: rgb(0 0 0 / 50%); animation: bag-shade-in .35s both; }
.preview-bag.is-closing { animation: bag-leave .22s ease-in both; }
.preview-bag.is-closing::backdrop { animation: bag-shade-out .22s ease-in both; }
.bag-inner { height: 100%; display: flex; flex-direction: column; }
.bag-header { padding: 28px; border-bottom: 1px solid #333; flex-shrink: 0; }
.bag-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 16px; }
.bag-heading .micro { color: #999; font-size: 9px; }
.bag-heading h2 { font-size: 27px; letter-spacing: -.7px; margin: 7px 0 0; font-weight: 700; }
.bag-count { color: #999; font-size: 18px; font-weight: 400; letter-spacing: 0; margin-left: 5px; }
.bag-close { flex-shrink: 0; width: 44px; height: 44px; border: 1px solid #444; background: none; color: white; font-size: 25px; cursor: pointer; transition: border-color .2s, background .2s; }
.bag-close:hover { border-color: #aaa; background: #222; }
.bag-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 28px; }
.bag-empty { height: 100%; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 35px 0; color: #aaa; }
.bag-empty svg { color: #777; }.bag-empty p { margin: 0; font-size: 14px; }
.bag-items { list-style: none; padding: 0; margin: 0; }
.bag-items li { display: grid; grid-template-columns: 100px minmax(0,1fr); align-items: start; gap: 20px; border-bottom: 1px solid #333; padding: 28px 0; }
.bag-thumbnail { position: relative; }
.bag-thumbnail .product-placeholder { aspect-ratio: 1; }
.bag-thumbnail .placeholder-label, .bag-thumbnail .placeholder-caption { display: none; }
.bag-thumbnail > span { position: absolute; bottom: 7px; left: 8px; font-family: 'Courier New', monospace; font-size: 7px; letter-spacing: .7px; color: #666; }
.bag-item-info { min-width: 0; }
.bag-item-title { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.bag-item-title strong { font-size: 15px; }.bag-item-title > span { color: #ccc; font-size: 11px; white-space: nowrap; }
.bag-item-color { display: block; margin: 10px 0 15px; color: #999; font-size: 11px; }
.bag-item-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bag-item-actions .quantity-control button { width: 36px; height: 44px; }.bag-item-actions .quantity-control output { width: 27px; }
.bag-remove { background: none; border: 0; min-height: 44px; color: #aaa; padding: 10px 0; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; font-size: 11px; }.bag-remove:hover { color: #fff; }
.bag-footer { flex-shrink: 0; padding: 24px 28px max(24px,env(safe-area-inset-bottom)); border-top: 1px solid #333; background: #101010; }
.bag-note { font-size: 10px; color: #999; margin: 14px 0 0; text-align: center; line-height: 1.6; }
.preview-bag :focus-visible { outline-offset: 3px; }
@keyframes bag-arrive { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes bag-leave { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes bag-shade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bag-shade-out { from { opacity: 1; } to { opacity: 0; } }
@media(max-width:640px) { .bag-header { padding: 22px; }.bag-scroll { padding: 0 22px; }.bag-footer { padding: 20px 22px max(20px,env(safe-area-inset-bottom)); }.bag-items li { grid-template-columns: 80px minmax(0,1fr); gap: 16px; }.bag-item-title { flex-direction: column; }.bag-heading h2 { font-size: 24px; } }
@media(max-width:900px) { .product-detail-grid { gap: 30px; grid-template-columns: minmax(0,1fr) minmax(280px,1fr); }.product-placeholder { aspect-ratio: 1.3; }.product-detail-info h1 { font-size: 43px; }.placeholder-caption { font-size: 7px; letter-spacing: .5px; } }
@media(max-width:640px) {
 .preview-bar { padding: 7px 22px; font-size: 8px; letter-spacing: .2px; gap: 10px; }.preview-bar > span { max-width: 160px; line-height: 1.7; }.preview-separator { padding: 0 3px; }
 .store-page { padding-top: 30px; }.store-heading { align-items: start; flex-direction: column; gap: 14px; }.store-heading .micro { font-size: 9px; padding: 0; }.store-filters { min-height: 73px; gap: 5px; }.store-filters > div { gap: 2px; }.store-filters button { padding: 0 9px; font-size: 10px; min-height: 44px; }.store-filters > span { font-size: 8px; letter-spacing: 0; }
 .product-grid { gap: 16px; }.product-placeholder { aspect-ratio: .93; }.placeholder-label { left: 10px; top: 12px; font-size: 7px; letter-spacing: .3px; }.placeholder-caption { left: 10px; right: 8px; bottom: 10px; font-size: 6px; line-height: 1.6; letter-spacing: .2px; }.product-card-info { padding-top: 16px; gap: 6px; flex-wrap: wrap; }.product-category { font-size: 8px; letter-spacing: .4px; }.product-card-info h2 { font-size: 17px; margin: 6px 0; letter-spacing: -.2px; }.sample-design { font-size: 10px; }.product-card-price { flex-direction: row; align-items: center; width: 100%; padding-top: 8px; font-size: 11px; }.product-card-arrow { font-size: 21px; }
 .product-page { padding-top: 15px; }.store-back { margin-bottom: 16px; }.product-detail-grid { grid-template-columns: 1fr; gap: 30px; }.product-gallery .product-placeholder { aspect-ratio: 1.25; }.product-gallery .placeholder-label { font-size: 8px; left: 15px; }.product-gallery .placeholder-caption { font-size: 7px; left: 15px; }.product-detail-info { padding: 0; }.product-detail-info h1 { font-size: 48px; margin-top: 12px; }
}

/* Individual design listings; availability is illustrative, never live inventory. */
.catalog-preview-note { margin: -3px 0 24px; font-size: 11px; color: #999; line-height: 1.6; }
.product-card-link { display: block; }
.product-card .product-placeholder { aspect-ratio: 1; }
.product-card .placeholder-label { left: 14px; top: 15px; font-size: 8px; }
.product-card .placeholder-caption { left: 14px; right: 12px; bottom: 13px; font-size: 7px; line-height: 1.6; }
.placeholder-design { position: absolute; top: 14%; right: 8%; color: #ccc; font-family: Impact, 'Arial Narrow', sans-serif; font-size: clamp(65px,8vw,130px); line-height: 1; pointer-events: none; }
.product-placeholder svg { position: relative; }
.bag-thumbnail .placeholder-design { font-size: 34px; }
.product-card-info { padding-top: 20px; align-items: center; }
.product-card-info h2 { font-size: 23px; }
.card-availability { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin: 23px 0 14px; font-size: 11px; }
.design-status { font-size: 11px; color: #eee; }
.design-status > span { color: #999; }
.design-status[data-status="sold-out"] { color: #999; }
.quick-add { width: 100%; min-height: 46px; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid #666; background: transparent; color: #eee; font-size: 11px; text-align: left; cursor: pointer; transition: background .2s, color .2s; }
.quick-add span { font-size: 20px; line-height: 1; }
.quick-add:hover:enabled { background: #eee; color: #080808; border-color: #eee; }
.quick-add:disabled, .store-button:disabled { border-color: #333; color: #888; background: #151515; cursor: default; }
.detail-availability { border-top: 1px solid #333; padding-top: 22px; margin: 25px 0; }
@media(max-width:1100px) { .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px 24px; }.product-card .product-placeholder { aspect-ratio: 1.25; } }
@media(max-width:640px) {
 .product-grid { gap: 28px 16px; }.product-card .product-placeholder { aspect-ratio: 1; }.product-card-info { align-items: start; flex-wrap: nowrap; padding-top: 16px; }.product-card-info h2 { font-size: 19px; }.product-card-arrow { font-size: 18px; }
 .product-card .placeholder-label { left: 9px; top: 11px; font-size: 6px; }.product-card .placeholder-caption { left: 9px; right: 8px; bottom: 10px; font-size: 6px; }
 .sample-design { font-size: 9px; line-height: 1.6; display: block; }.card-availability { gap: 8px; margin: 18px 0 12px; font-size: 10px; }.design-status { font-size: 10px; }.quick-add { font-size: 10px; padding: 10px; min-height: 46px; }.quick-add span { font-size: 16px; }.catalog-preview-note { font-size: 10px; }
}

/* Phone polish: legible controls, comfortable tap targets, and short-screen menus. */
@media(max-width:640px) {
 .menu-toggle { font-size: 12px; padding: 0 4px; }
 .site-nav { max-height: calc(100dvh - var(--header-height)); overflow-y: auto; overscroll-behavior: contain; }
 .site-nav a { font-size: 14px; }
 .preview-bar { padding-top: 2px; padding-bottom: 2px; }
 .preview-bar button { min-height: 44px; padding: 0 4px; font-size: 10px; }
 .store-filters { flex-wrap: wrap; padding: 16px 0; gap: 10px; }
 .store-filters > div { width: 100%; display: grid; grid-template-columns: auto 1fr 1fr; gap: 6px; }
 .store-filters button { min-width: 44px; font-size: 12px; padding: 0 8px; }
 .store-filters > span { width: 100%; text-align: right; font-size: 10px; }
 .catalog-preview-note { font-size: 12px; margin-bottom: 20px; }
 .product-category { font-size: 9px; }
 .sample-design { font-size: 11px; }
 .card-availability { align-items: start; flex-direction: column; font-size: 12px; }
 .design-status { font-size: 12px; }
 .quick-add { font-size: 12px; min-height: 52px; gap: 6px; }
 .product-card { display: flex; flex-direction: column; }
 .product-card .quick-add { margin-top: auto; }
 .store-back { font-size: 13px; }
 .product-detail-info h1 { font-size: clamp(34px,10vw,48px); overflow-wrap: anywhere; }
 .preview-explanation, .product-details, .product-details p { font-size: 14px; }
 .quantity-row, .store-button { font-size: 14px; }
 .product-gallery p, .bag-feedback { font-size: 12px; }
 .bag-item-actions .quantity-control button { width: 44px; }
 .bag-items li { grid-template-columns: 64px minmax(0,1fr); gap: 14px; }
 .bag-item-color, .bag-item-title > span, .bag-remove { font-size: 12px; }
 .bag-remove { min-width: 44px; }
 .bag-note { font-size: 11px; }
 .signup-status { font-size: 11px; }
 .footer-copyright { font-size: 9px; }
 .site-footer { padding-bottom: max(20px,env(safe-area-inset-bottom)); }
}
@media(max-height:450px) and (max-width:900px) {
 .bag-header { padding: 14px 22px; }.bag-heading { margin-bottom: 8px; }.bag-heading h2 { font-size: 22px; }
 .bag-footer { padding: 12px 22px max(12px,env(safe-area-inset-bottom)); }.bag-note { margin-top: 8px; }
}

.launch { --footer-height: 56px; }
.launch .site-footer { padding-block: 18px; }
.launch .footer-copyright { margin: 0; }
@media(max-width:640px) {
  .launch .site-nav { position: static; display:flex; flex-direction:row; padding:0; border:0; gap:14px; }
  .launch .site-nav a { font-size:11px; }
  .launch .wordmark img { width:80px; }
}
@media(max-width:380px) {
  .launch .site-header { padding-inline:12px; }
  .launch .site-nav { gap:10px; }
  .launch .wordmark img { width:64px; }
}