/* JIČÍNZELÍ — Jičín Grey Shop · mobile-first dark street */

:root {
  --bg: #050605;
  --bg-2: #0c0f0b;
  --bg-3: #131811;
  --line: #1f2a1c;
  --line-2: #2c3a25;
  --ink: #f1ece2;
  --ink-mut: #9aa094;
  --ink-low: #5c6356;
  --green: #5fa83a;
  --green-2: #2f7a2b;
  --green-deep: #1a3f17;
  --yellow: #f5d013;
  --red: #b33636;
  --maxw: 1240px;
  --pad: 18px;
  --pad-lg: 28px;
  --radius: 4px;
  --shadow: 0 8px 28px rgba(0,0,0,0.55);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* gritty texture overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(95,168,58,0.08), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(95,168,58,0.05), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  mix-blend-mode: overlay;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* type */
h1, h2, h3, h4 {
  font-family: 'Oswald', 'Impact', 'Bebas Neue', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 12px;
  line-height: 1.05;
}
h1 { font-size: clamp(34px, 9vw, 72px); letter-spacing: -0.01em; }
h2 { font-size: clamp(24px, 5vw, 38px); letter-spacing: 0.04em; }
h3 { font-size: 18px; letter-spacing: 0.05em; }
.kicker { font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 0.35em; color: var(--green); text-transform: uppercase; }
.muted { color: var(--ink-mut); }
.small { font-size: 12px; }

/* layout */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); position: relative; z-index: 1; }
section { padding: 48px 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.section-head .more { color: var(--green); font-family: 'Oswald', sans-serif; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }

.icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: none; stroke: currentColor; }
.icon-lg { width: 28px; height: 28px; }

/* top trust bar */
.topbar {
  background: #000;
  border-bottom: 1px solid var(--line);
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mut);
}
.topbar .wrap { display: flex; gap: 18px; justify-content: center; align-items: center; padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap; }
.topbar .dot { color: var(--green); }

/* header */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: rgba(5,6,5,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 42px; height: 42px; flex: 0 0 42px; }
.brand-text { line-height: 1; }
.brand-text .b1 { font-family: 'Oswald', sans-serif; font-weight: 700; letter-spacing: 0.05em; font-size: 20px; text-transform: uppercase; }
.brand-text .b2 { font-size: 9px; color: var(--green); letter-spacing: 0.28em; text-transform: uppercase; }

.nav nav { display: none; }
.nav nav a {
  font-family: 'Oswald', sans-serif;
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); padding: 8px 0;
  border-bottom: 2px solid transparent;
}
.nav nav a.active { border-color: var(--green); color: var(--green); }
.nav nav a:hover { color: var(--green); }

.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.icon-btn {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius);
  position: relative;
}
.icon-btn:hover { color: var(--green); border-color: var(--green-2); }
.cart-count {
  position: absolute; top: -6px; right: -6px;
  background: var(--yellow); color: #000;
  font-family: 'Oswald', sans-serif; font-size: 10px; font-weight: 700;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
}
.menu-toggle { display: inline-flex; }

/* mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(6px);
  display: none;
}
.drawer.open { display: block; }
.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(86%, 360px); background: var(--bg-2);
  border-left: 1px solid var(--line);
  padding: 20px;
  transform: translateX(100%); transition: transform 0.25s ease;
}
.drawer.open .drawer-panel { transform: translateX(0); }
.drawer-panel .close { position: absolute; top: 14px; right: 14px; }
.drawer-panel nav { display: flex; flex-direction: column; gap: 4px; margin-top: 56px; }
.drawer-panel nav a {
  display: block; padding: 14px 0; border-bottom: 1px solid var(--line);
  font-family: 'Oswald', sans-serif; font-size: 18px; letter-spacing: 0.12em; text-transform: uppercase;
}
.drawer-panel nav a:hover, .drawer-panel nav a.active { color: var(--green); }

@media (min-width: 920px) {
  .nav nav { display: flex; gap: 22px; margin-left: 28px; }
  .menu-toggle { display: none; }
}

/* hero */
.hero { padding: 32px 0 24px; position: relative; }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }
.hero h1 { color: var(--ink); }
.hero .tagline {
  font-family: 'Oswald', sans-serif; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--green); font-size: 14px; margin-bottom: 18px;
}
.hero p.lead { color: var(--ink-mut); max-width: 540px; margin: 0 0 22px; }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }

.hero-art {
  position: relative; height: 320px;
  display: flex; align-items: center; justify-content: center;
}
.hero-art .skyline {
  position: absolute; inset: 0;
  background-image: linear-gradient(180deg, transparent 30%, var(--green-deep) 100%);
  opacity: 0.15;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200'><path d='M0 200 L0 140 L20 140 L20 100 L30 100 L30 80 L40 100 L40 140 L60 140 L60 110 L70 110 L70 70 L75 60 L80 70 L80 110 L110 110 L110 130 L130 130 L130 90 L135 80 L140 90 L140 130 L160 130 L160 110 L180 110 L180 80 L185 70 L190 80 L190 110 L220 110 L220 140 L240 140 L240 100 L245 90 L250 100 L250 140 L280 140 L280 120 L300 120 L300 90 L305 80 L310 90 L310 120 L330 120 L330 140 L360 140 L360 110 L380 110 L380 140 L400 140 L400 200 Z' fill='black'/></svg>");
  mask-size: cover;
}
.hero-art .pouch-wrap { position: relative; max-width: 260px; width: 100%; filter: drop-shadow(0 30px 40px rgba(0,0,0,0.6)); }
.hero-art .pouch-wrap svg { width: 100%; height: auto; }
.hero-art .hero-logo {
  position: relative; max-width: 460px; width: 100%; height: auto;
  filter: drop-shadow(0 24px 36px rgba(0,0,0,0.6)) drop-shadow(0 0 30px rgba(95,168,58,0.15));
}
@media (min-width: 880px) {
  .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 40px; }
  .hero { padding: 60px 0 32px; }
  .hero-art { height: 460px; }
}

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px;
  border: 1px solid var(--green-2);
  background: linear-gradient(180deg, var(--green) 0%, var(--green-2) 100%);
  color: #0a0a0a;
  font-family: 'Oswald', sans-serif;
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 700;
  border-radius: var(--radius);
  transition: transform 0.1s ease, box-shadow 0.2s ease;
  box-shadow: 0 6px 0 #0a0a0a, 0 8px 20px rgba(95,168,58,0.25);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 7px 0 #0a0a0a, 0 10px 24px rgba(95,168,58,0.35); }
.btn:active { transform: translateY(2px); box-shadow: 0 4px 0 #0a0a0a; }
.btn-ghost {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--ink);
  box-shadow: none;
}
.btn-ghost:hover { border-color: var(--green); color: var(--green); box-shadow: none; transform: none; }
.btn-yellow {
  background: linear-gradient(180deg, var(--yellow) 0%, #d4ae0a 100%);
  border-color: #b69300;
  color: #0a0a0a;
  box-shadow: 0 6px 0 #0a0a0a, 0 8px 20px rgba(245,208,19,0.18);
}
.btn-block { width: 100%; }

/* trust strip */
.trust {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 8px 0;
}
.trust .cell {
  background: var(--bg-2);
  padding: 14px 12px;
  display: flex; align-items: center; gap: 10px;
}
.trust .cell .icon-lg { color: var(--green); flex: 0 0 28px; }
.trust .cell strong { font-family: 'Oswald', sans-serif; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; display: block; }
.trust .cell span { font-size: 11px; color: var(--ink-mut); }
@media (min-width: 720px) { .trust { grid-template-columns: repeat(5, 1fr); } }

/* category grid */
.cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 720px) { .cats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .cats { grid-template-columns: repeat(6, 1fr); } }
.cat-card {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  transition: border-color 0.15s, transform 0.15s;
  overflow: hidden;
}
.cat-card:hover { border-color: var(--green); transform: translateY(-2px); }
.cat-card .label {
  font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 8px; min-height: 32px;
}
.cat-card .ph {
  height: 110px;
  background: radial-gradient(circle at 30% 30%, var(--bg-3), #000);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
}
.cat-card .ph svg { height: 90%; width: auto; }
.cat-card .corner {
  position: absolute; top: 8px; right: 8px;
  font-family: 'Oswald', sans-serif; font-size: 10px; letter-spacing: 0.15em;
  color: var(--green); border: 1px solid var(--green-2); padding: 2px 6px; border-radius: 3px;
}

/* product grid */
.products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 720px) { .products { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .products { grid-template-columns: repeat(4, 1fr); } }
.pcard {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  display: flex; flex-direction: column;
  position: relative;
  transition: border-color 0.15s, transform 0.15s;
}
.pcard:hover { border-color: var(--green-2); }
.pcard .img {
  height: 180px;
  background: radial-gradient(circle at 50% 35%, #131811, #000);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
  border: 1px solid var(--line);
}
.pcard .img svg { height: 88%; width: auto; }
.pcard .name {
  font-family: 'Oswald', sans-serif; font-size: 16px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 4px;
}
.pcard .desc { font-size: 12px; color: var(--ink-mut); margin-bottom: 12px; min-height: 32px; }
.pcard .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.pcard .price {
  font-family: 'Oswald', sans-serif; font-size: 22px; font-weight: 700; color: var(--yellow);
  letter-spacing: 0.04em;
}
.pcard .btn-detail {
  padding: 9px 14px;
  font-size: 11px;
  border: 1px solid var(--green-2);
  background: transparent;
  color: var(--green);
  font-family: 'Oswald', sans-serif; letter-spacing: 0.15em; text-transform: uppercase;
  border-radius: var(--radius);
  display: inline-flex; align-items: center; gap: 6px;
}
.pcard .btn-detail:hover { background: var(--green); color: #000; }

.badge-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.badge {
  font-family: 'Oswald', sans-serif; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 3px; border: 1px solid var(--line-2); color: var(--ink-mut);
}
.badge.b-green { color: var(--green); border-color: var(--green-2); }
.badge.b-yellow { color: var(--yellow); border-color: #b69300; }
.badge.b-red { color: var(--red); border-color: #6a2222; }

/* delivery / promo blocks */
.split { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 880px) { .split { grid-template-columns: 1fr 1fr; } }
.block {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  position: relative;
  overflow: hidden;
}
.block h3 { font-size: 22px; color: var(--green); }
.block .skyline-bg {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, var(--green-deep) 100%);
  opacity: 0.15;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200'><path d='M0 200 L0 140 L20 140 L20 100 L30 80 L40 100 L40 140 L60 140 L60 110 L70 70 L80 110 L80 140 L120 140 L120 90 L130 80 L140 90 L140 140 L170 140 L170 110 L180 80 L190 110 L190 140 L220 140 L220 100 L230 90 L240 100 L240 140 L280 140 L280 120 L290 90 L300 120 L300 140 L340 140 L340 110 L360 130 L400 130 L400 200 Z' fill='black'/></svg>");
  mask-size: cover; pointer-events: none;
}
.block .body { position: relative; }
.block .more { color: var(--green); font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 0.15em; }

.promo {
  display: grid; grid-template-columns: 1fr; gap: 18px; align-items: center;
}
@media (min-width: 540px) { .promo { grid-template-columns: 1fr 120px; } }
.promo .code {
  font-family: 'Oswald', sans-serif; font-size: 30px; color: var(--yellow); letter-spacing: 0.15em;
}
.promo .qr {
  background: #fff; padding: 8px; border-radius: 4px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
}
.promo .qr svg { width: 100%; height: 100%; }

/* why */
.why { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 720px) { .why { grid-template-columns: repeat(3, 1fr); } }
.why .card {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
}
.why .card .icon-wrap {
  width: 48px; height: 48px; border: 1px solid var(--green-2);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--green); border-radius: var(--radius); margin-bottom: 12px;
}
.why .card h3 { font-size: 16px; }
.why .card p { color: var(--ink-mut); font-size: 13px; margin: 0; }

/* legal box */
.legal-box {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  padding: 18px;
  border-radius: var(--radius);
}
.legal-box .icon-lg { color: var(--green); flex: 0 0 28px; margin-top: 2px; }
.legal-box h4 { font-family: 'Oswald', sans-serif; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 6px; }
.legal-box p { margin: 0; color: var(--ink-mut); font-size: 13px; }
.legal-box .arrow { margin-left: auto; color: var(--green); align-self: center; }

/* footer */
footer.site {
  border-top: 1px solid var(--line);
  background: #000;
  margin-top: 60px;
  padding: 36px 0 24px;
}
footer .grid {
  display: grid; grid-template-columns: 1fr; gap: 28px;
}
@media (min-width: 720px) { footer .grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr 0.8fr; } }
footer h4 {
  font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 0.22em;
  color: var(--green); text-transform: uppercase; margin: 0 0 12px;
}
footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
footer ul a { color: var(--ink-mut); font-size: 13px; }
footer ul a:hover { color: var(--green); }
footer .socials { display: flex; gap: 8px; margin-top: 10px; }
footer .socials a {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); color: var(--ink-mut); border-radius: var(--radius);
}
footer .socials a:hover { color: var(--green); border-color: var(--green-2); }
footer .footer-warning {
  margin-top: 28px;
  padding: 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--ink-mut);
  background: var(--bg-2);
}
footer .footer-warning strong { color: var(--ink); font-family: 'Oswald', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; margin-right: 6px; }
footer .copy {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  border-top: 1px solid var(--line);
  margin-top: 18px; padding-top: 18px;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-low);
  font-family: 'Oswald', sans-serif;
}
footer .copy .brand-strap { color: var(--green); }

/* age gate */
.gate {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.gate-card {
  max-width: 460px; width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-top: 3px solid var(--green);
  padding: 32px 24px;
  text-align: center;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.gate-card .badge-18 {
  width: 64px; height: 64px; border: 2px solid var(--green); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--green); font-family: 'Oswald', sans-serif; font-size: 22px; font-weight: 700;
  margin-bottom: 16px;
}
.gate-card h2 { font-size: 26px; margin-bottom: 8px; }
.gate-card p { color: var(--ink-mut); font-size: 13px; margin: 0 0 22px; }
.gate-actions { display: grid; gap: 10px; }
.gate-actions .btn-ghost { color: var(--ink-mut); }
.gate .small { color: var(--ink-low); margin-top: 16px; }

/* product detail */
.pdp {
  display: grid; grid-template-columns: 1fr; gap: 22px;
}
@media (min-width: 880px) { .pdp { grid-template-columns: 1.05fr 1fr; } }
.pdp .gallery {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  display: flex; align-items: center; justify-content: center;
  min-height: 360px;
}
.pdp .gallery svg { max-width: 340px; width: 100%; height: auto; }
.pdp .info h1 { font-size: clamp(28px, 5vw, 44px); }
.pdp .price-row {
  display: flex; align-items: center; gap: 14px; margin: 14px 0 18px;
}
.pdp .price-row .price { font-family: 'Oswald', sans-serif; font-size: 36px; color: var(--yellow); }
.pdp .price-row .stock { font-size: 12px; color: var(--green); letter-spacing: 0.15em; text-transform: uppercase; font-family: 'Oswald', sans-serif; }
.pdp .info > p { color: var(--ink-mut); }

.qty {
  display: inline-flex; align-items: center; border: 1px solid var(--line-2);
  border-radius: var(--radius); margin-right: 10px;
}
.qty button { width: 40px; height: 44px; background: transparent; border: 0; color: var(--ink); font-size: 18px; }
.qty input { width: 44px; height: 44px; background: transparent; border: 0; color: var(--ink); text-align: center; font-family: 'Oswald', sans-serif; font-size: 16px; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.docs {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-top: 22px;
  background: var(--bg-2);
}
.docs details {
  border-bottom: 1px solid var(--line);
}
.docs details:last-child { border-bottom: 0; }
.docs summary {
  cursor: pointer; padding: 14px 18px;
  font-family: 'Oswald', sans-serif; font-size: 13px; letter-spacing: 0.15em; text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
  list-style: none;
}
.docs summary::-webkit-details-marker { display: none; }
.docs summary::after { content: '+'; margin-left: auto; color: var(--green); font-size: 18px; }
.docs details[open] summary::after { content: '−'; }
.docs .doc-body { padding: 0 18px 16px; color: var(--ink-mut); font-size: 13px; }

/* forms */
form { display: grid; gap: 14px; }
.field label {
  font-family: 'Oswald', sans-serif; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-mut); display: block; margin-bottom: 6px;
}
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 12px 14px;
  font: inherit;
  border-radius: var(--radius);
  font-size: 14px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(95,168,58,0.15);
}
.field textarea { min-height: 110px; resize: vertical; }
.row-2 { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 540px) { .row-2 { grid-template-columns: 1fr 1fr; } }

.check {
  display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-mut);
}
.check input { margin-top: 3px; }

.notice {
  border: 1px dashed var(--line-2);
  padding: 14px;
  border-radius: var(--radius);
  font-size: 12px; color: var(--ink-mut);
}
.notice strong { color: var(--ink); font-family: 'Oswald', sans-serif; letter-spacing: 0.1em; text-transform: uppercase; font-size: 11px; }

/* page header */
.page-head { padding: 28px 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.page-head .crumbs {
  font-family: 'Oswald', sans-serif; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-mut); margin-bottom: 8px;
}
.page-head .crumbs a:hover { color: var(--green); }

/* cart */
.cart-table { display: grid; gap: 12px; }
.cart-item {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px;
}
.cart-item .ph { background: #000; border: 1px solid var(--line); height: 64px; display: flex; align-items: center; justify-content: center; }
.cart-item .ph svg { height: 90%; width: auto; }
.cart-item .name { font-family: 'Oswald', sans-serif; font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; }
.cart-item .meta { color: var(--ink-mut); font-size: 12px; }
.cart-item .price { font-family: 'Oswald', sans-serif; color: var(--yellow); font-size: 18px; }
.cart-totals {
  border-top: 1px solid var(--line); margin-top: 18px; padding-top: 18px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.cart-totals .total { font-family: 'Oswald', sans-serif; font-size: 28px; color: var(--yellow); }

.empty-cart { text-align: center; color: var(--ink-mut); padding: 40px 20px; }

/* misc */
.dot-sep::before { content: '·'; margin: 0 8px; color: var(--green); }
.flash {
  background: var(--green); color: #000; padding: 10px 14px;
  border-radius: var(--radius); font-family: 'Oswald', sans-serif;
  font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase;
}
.flash.err { background: var(--red); color: #fff; }

/* utility */
.center { text-align: center; }
.mt-2 { margin-top: 12px; } .mt-3 { margin-top: 20px; } .mt-4 { margin-top: 32px; }
.mb-2 { margin-bottom: 12px; } .mb-3 { margin-bottom: 20px; } .mb-4 { margin-bottom: 32px; }
.hide-mobile { display: none; }
@media (min-width: 720px) { .hide-mobile { display: initial; } .hide-desk { display: none; } }