/* SnackMap overlay (#snackmap) */
.sm { position: fixed; left: 0; right: 0; bottom: 0; top: var(--hh); z-index: 40; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; background: var(--pista); color: var(--teal); font-family: var(--f); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; -webkit-overflow-scrolling: touch }
.sm.open { opacity: 1; visibility: visible; transition: opacity .35s ease }
.sm[hidden] { display: none }
.sm * { box-sizing: border-box }
.sm button { font-family: var(--f); cursor: pointer }
.sm .wrap { max-width: 1440px; margin: 0 auto; padding: 0 clamp(16px, 4.4vw, 64px) }

/* hero */
.sm-hero { position: relative; background: var(--brick); color: var(--white); overflow: hidden }
.sm-hero .blob { opacity: .33; filter: blur(90px) }
.sm-hero .bl1 { width: 900px; height: 520px; left: -240px; top: -220px; background: var(--sun); animation: float1 16s ease-in-out infinite alternate }
.sm-hero .bl2 { width: 900px; height: 560px; right: -260px; bottom: -260px; background: var(--pista); animation: float2 19s ease-in-out infinite alternate }
.sm .sm-hgrid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 24px; align-items: center; padding-top: 44px; padding-bottom: 56px }
.sm-hgrid .label { background: var(--sun); color: var(--brick) }
.sm-h1 { margin: 18px 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-weight: 900; text-transform: uppercase; line-height: 1 }
.sm-h1 .we { font-size: clamp(24px, 3vw, 44px); letter-spacing: -.03em }
.sm-h1 .sd { display: inline-block; margin: 2px 0 12px -.06em; padding: .04em .18em .12em; border-radius: 14px; background: var(--sun); color: var(--brick); font-size: clamp(48px, 7.6vw, 110px); line-height: .95; letter-spacing: -.05em; transform: rotate(-2deg); box-shadow: 8px 8px 0 #6E1307 }
.sm-h1 .ln { font-size: clamp(24px, 3.5vw, 50px); letter-spacing: -.04em }
.sm-h1 .ln.y { color: var(--sun) }
.sm-sub { margin: 20px 0 0; font-size: clamp(14px, 1.3vw, 18px); font-weight: 800; line-height: 1.35; text-transform: uppercase; max-width: 34em }
.sm-art { position: relative; width: 100%; max-width: 560px; aspect-ratio: 580/520; justify-self: center }
.sm-art > * { position: absolute }
.sm-art .ring { left: 3%; top: 0; width: 90%; height: 100%; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .45); animation: smspin 40s linear infinite; transform: none }
.sm-art .disc { left: 10%; top: 8%; width: 76%; height: 84%; border-radius: 50%; background: var(--white); animation: none; transform: none }
.sm-art img { filter: drop-shadow(0 24px 26px rgba(60, 6, 0, .45)) }
.sm-art .p1 { left: 10%; top: 22%; width: 33%; transform: rotate(-12deg) }
.sm-art .p2 { left: 54%; top: 22%; width: 33%; transform: rotate(12deg) }
.sm-art .p3 { left: 31%; top: 12%; width: 37% }
.sm-art .f { filter: none; width: 19% }
.sm-art .f1 { left: 0; top: 2% }
.sm-art .f2 { left: 81%; top: 0; width: 17% }
.sm-art .f3 { left: 80%; top: 72% }
.sm-art .f4 { left: 2%; top: 76% }
.sm-bob { animation: smbob 3.6s ease-in-out infinite alternate }
.sm-bob2 { animation: smbob 4.4s ease-in-out -1.3s infinite alternate }
@keyframes smbob { from { translate: 0 -8px } to { translate: 0 8px } }
@keyframes smspin { to { rotate: 360deg } }
.sm-mq { position: relative; z-index: 2; left: 0; width: auto; margin: -30px -60px 0; height: 62px; background: var(--sun); color: var(--brick); transform: rotate(-1.2deg) }
.sm-mq .track span { font-size: 26px }

/* explorer */
.sm .sm-ex { padding-top: 64px; padding-bottom: 72px }
.sm-where { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 36px }
.sm-where > span { font-size: 12px; font-weight: 900; letter-spacing: .2em; color: var(--mint-text) }
.sm-tog { display: flex; gap: 6px; padding: 6px; border-radius: 100px; background: var(--white); box-shadow: 0 14px 30px -20px rgba(8, 59, 56, .5) }
.sm-tog button { height: 56px; min-width: 200px; padding: 0 30px; border: 0; border-radius: 100px; background: transparent; color: var(--teal); font-size: 16px; font-weight: 900; letter-spacing: .12em; display: flex; align-items: center; justify-content: center; gap: 10px }
.sm-tog button[aria-pressed="true"].in { background: var(--teal); color: var(--white) }
.sm-tog button[aria-pressed="true"].wo { background: var(--indigo); color: var(--aqua) }
.sm-tog .soon { font-size: 10px; letter-spacing: .06em; padding: 5px 8px; border-radius: 4px; background: var(--cray); color: var(--white) }
.sm-grid { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 40px; align-items: start }

/* region / state tree */
.sm-tree { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 4px; padding: 22px 16px; border-radius: 22px; background: var(--white); box-shadow: 0 10px 24px -18px rgba(8, 59, 56, .4) }
.sm-tree .cap { font-size: 11px; font-weight: 900; letter-spacing: .18em; color: var(--mint-text); padding: 0 10px 8px }
.sm-row { min-height: 44px; display: flex; align-items: center; gap: 10px; width: 100%; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--teal); font-size: 14px; font-weight: 700; text-align: left }
.sm-row:hover { background: rgba(11, 79, 74, .08) }
.sm-row[aria-current="true"] { background: var(--teal); color: var(--white) }
.sm-row .n { margin-left: auto; font-size: 12px; font-weight: 800; opacity: .7 }
.sm-row.root { font-size: 16px; font-weight: 900 }
.sm-rg { margin-left: 16px; padding-left: 10px; border-left: 2px dashed #9FD27E; display: flex; flex-direction: column; gap: 2px }
.sm-rhead { display: flex; align-items: center }
.sm-car { width: 32px; height: 44px; flex: none; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; padding: 0 }
.sm-car svg { transition: transform .2s }
.sm-car[aria-expanded="true"] svg { transform: rotate(90deg) }
.sm-rhead .sm-row { text-transform: uppercase; letter-spacing: .02em }
.sm-rhead .sm-row.path { font-weight: 900 }
.sm-sts { margin: 0 0 6px 30px; padding-left: 10px; border-left: 2px dashed #9FD27E; display: flex; flex-direction: column; gap: 1px }
.sm-sts .sm-row { min-height: 40px; font-size: 13px }
.sm-sts .dot { width: 8px; height: 8px; border-radius: 50%; background: #9FD27E; flex: none }
.sm-sts .sm-row[aria-current="true"] .dot { background: var(--pink) }
.sm-sts .sm-row.soon { color: #5E8F72 }
.sm-sts .sm-row.soon .dot { background: transparent; border: 1.5px solid #9FD27E }

/* main column */
.sm-main { min-width: 0; display: flex; flex-direction: column; gap: 22px }
.sm-crumbs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.sm-crumbs button { min-height: 36px; padding: 0 2px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--mint-text); font-size: 13px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase }
.sm-crumbs button[aria-current="page"] { color: var(--teal); border-bottom-color: var(--pink) }
.sm-head { display: flex; align-items: flex-end; gap: 24px }
.sm-head h2 { margin: 0; font-size: clamp(38px, 4.6vw, 64px); line-height: .92; font-weight: 900; letter-spacing: -.045em; text-transform: uppercase }
.sm-head p { margin: 8px 0 0; font-size: 17px; font-weight: 600; color: var(--mint-text) }
.sm-head .all { margin-left: auto; flex: none; height: 48px; padding: 0 20px; border-radius: 4px; border: 2px solid var(--teal); background: transparent; color: var(--teal); font-size: 13px; font-weight: 900; letter-spacing: .06em }
.sm-chips { display: flex; flex-wrap: wrap; gap: 8px }
.sm-chip { height: 40px; padding: 0 16px; border-radius: 100px; border: 1.5px solid var(--white); background: var(--white); color: var(--teal); font-size: 13px; font-weight: 800; flex: none }
.sm-chip[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: var(--white) }
.sm-mob { display: none }

/* cards */
.sm-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px }
.sm-card { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--white); box-shadow: 0 10px 24px -18px rgba(8, 59, 56, .35); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s }
.sm-card:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: 0 26px 44px -18px rgba(8, 59, 56, .4) }
.sm-pic { position: relative; height: 230px; display: flex; align-items: center; justify-content: center; overflow: hidden }
.sm-pic img { transition: transform .5s cubic-bezier(.2, .9, .2, 1) }
.sm-card:hover .sm-pic img { transform: scale(1.08) rotate(-4deg) }
.sm-pic .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62% }
.sm-card:hover .sm-pic .photo { transform: scale(1.06) }
.sm-pic .pack { height: 206px; width: auto; filter: drop-shadow(0 16px 18px rgba(60, 6, 0, .35)) }
.sm-pic .art { width: 190px; height: 190px }
.sm-pic .where { position: absolute; left: 14px; top: 14px; height: 26px; display: flex; align-items: center; padding: 0 10px; border-radius: 4px; background: var(--teal); color: var(--white); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase }
.sm-pic .loc { position: absolute; right: 14px; bottom: 12px; font-size: 17px; font-weight: 700; color: var(--teal); background: rgba(255, 255, 255, .85); padding: 3px 10px; border-radius: 100px }
.sm-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1 }
.sm-body h3 { margin: 0; font-size: 20px; line-height: 1.05; font-weight: 900; letter-spacing: -.03em; text-transform: uppercase }
.sm-body p { margin: 0; font-size: 14px; line-height: 1.45; font-weight: 500; color: var(--mint-text); flex: 1 }
.sm-tags { display: flex; flex-wrap: wrap; gap: 6px }
.sm-tags span { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 100px; border: 1.5px solid #D9EFC8; background: var(--white) }
.sm-tags span.gi { background: var(--pink); border-color: var(--pink) }

/* "Wow!This" button */
.wow { margin-top: 4px; align-self: flex-start; height: 50px; padding: 0 20px 0 5px; border-radius: 100px; border: 2px solid var(--teal); background: var(--pink); color: var(--teal); font-size: 15px; font-weight: 900; letter-spacing: .03em; display: flex; align-items: center; gap: 10px; box-shadow: 3px 3px 0 var(--teal); transition: transform .2s, box-shadow .2s }
.wow:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--teal) }
.wow:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--teal) }
.wow .wi { width: 38px; height: 38px; border-radius: 50%; background: var(--white); display: flex; align-items: center; justify-content: center; animation: beat 2.4s ease-in-out infinite }
.wow[aria-pressed="true"] { background: var(--teal); color: var(--white); box-shadow: none }
@keyframes beat { 0%, 100% { transform: scale(1) } 12% { transform: scale(1.18) } 24% { transform: scale(1) } }
.sm-more { align-self: center; height: 52px; padding: 0 28px; border-radius: 4px; border: 0; background: var(--pink); color: var(--teal); font-size: 14px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase }

/* empty states */
.sm-empty { border-radius: 22px; padding: 44px 40px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; background: var(--violet); color: var(--indigo) }
.sm-empty .label { background: var(--indigo); color: var(--aqua) }
.sm-empty p { margin: 0; font-size: 30px; line-height: 1.05; font-weight: 900; letter-spacing: -.03em; text-transform: uppercase; max-width: 520px }
.sm-empty button { height: 48px; padding: 0 22px; border-radius: 4px; border: 0; background: var(--indigo); color: var(--white); font-size: 13px; font-weight: 900; letter-spacing: .06em }
.sm-empty.t { background: var(--white); color: var(--teal); flex-direction: row; align-items: center }
.sm-empty.t p { font-size: 20px; text-transform: none; letter-spacing: 0; flex: 1 }
.sm-empty.t button { background: transparent; border: 2px solid var(--teal); color: var(--teal) }

/* world (coming soon) */
.sm-world { position: relative; min-height: 760px; border-radius: 28px; background: var(--indigo); color: var(--white); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; text-align: center; padding: 80px 32px }
.sm-world .blob { opacity: .25; filter: blur(90px) }
.sm-world .label { position: relative; background: var(--aqua); color: var(--indigo) }
.sm-world h2 { position: relative; margin: 0; font-size: clamp(46px, 7.4vw, 104px); line-height: .9; font-weight: 900; letter-spacing: -.05em; text-transform: uppercase }
.sm-world p { position: relative; margin: 6px 0 0; font-size: clamp(15px, 1.4vw, 20px); line-height: 1.5; font-weight: 600; color: #CFC6EE; max-width: 600px }
.sm-world .row { position: relative; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center }
.sm-world .row button { height: 56px; padding: 0 28px; border-radius: 4px; font-size: 15px; font-weight: 900; letter-spacing: .06em }

/* tray (unused in current markup, kept as-is) */
.sm-tray { position: sticky; bottom: 0; z-index: 5; background: var(--teal); color: var(--white); box-shadow: 0 -10px 30px rgba(8, 59, 56, .25) }
.sm-tray .wrap { display: flex; align-items: center; gap: 28px; padding-top: 18px; padding-bottom: 18px }
.sm-tray .k { font-size: 12px; font-weight: 900; letter-spacing: .16em; color: var(--pink) }
.sm-tray .c { font-size: 28px; font-weight: 900; letter-spacing: -.03em; text-transform: uppercase; white-space: nowrap }
.sm-picks { flex: 1; min-width: 0; display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none }
.sm-picks::-webkit-scrollbar { display: none }
.sm-pick { flex: none; height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 6px 0 16px; border-radius: 100px; background: var(--pista); color: var(--teal); font-size: 13px; font-weight: 800; white-space: nowrap }
.sm-pick small { font-weight: 600; opacity: .75; font-size: 13px }
.sm-pick button { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--teal); display: flex; align-items: center; justify-content: center }
.sm-tray .none { font-size: 15px; font-weight: 600; color: #CDEFE6 }
.sm-tray .go { flex: none; height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 26px; border-radius: 4px; background: var(--sun); color: var(--brick); text-decoration: none; font-size: 15px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase }

/* responsive */
@media (max-width: 820px) {
  .sm .sm-hgrid { grid-template-columns: 1fr; padding-top: 26px; padding-bottom: 40px; gap: 6px }
  .sm-art { max-width: 360px; margin-top: 10px }
  .sm-mq { height: 44px; margin-top: -22px }
  .sm-mq .track span { font-size: 18px }
  .sm .sm-ex { padding-top: 36px; padding-bottom: 48px }
  .sm-tog .soon .l { display: none }
  .sm-where { margin-bottom: 22px }
  .sm-tog { width: 100% }
  .sm-tog button { flex: 1; min-width: 0; height: 50px; padding: 0 10px; font-size: 14px }
  .sm-tog .soon { font-size: 8px }
  .sm-grid { grid-template-columns: 1fr; gap: 0 }
  .sm-tree { display: none }
  .sm-mob { display: flex; flex-direction: column; gap: 10px }
  .sm-mob .sm-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none }
  .sm-mob .sm-chips::-webkit-scrollbar { display: none }
  .sm-mob .rg .sm-chip { border-radius: 4px; text-transform: uppercase; font-weight: 900; font-size: 12px; letter-spacing: .06em }
  .sm-mob .sm-chip[aria-pressed="true"].st { background: var(--pink); border-color: var(--teal); color: var(--teal) }
  .sm-head { flex-direction: column; align-items: flex-start; gap: 12px }
  .sm-head .all { margin-left: 0 }
  .sm-main > .sm-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none }
  .sm-cards { grid-template-columns: 1fr; gap: 14px }
  .sm-card { flex-direction: row; border-radius: 18px }
  .sm-pic { width: 128px; height: auto; min-height: 170px; flex: none }
  .sm-pic .art { width: 110px; height: 110px }
  .sm-pic .pack { height: 136px }
  .sm-pic .loc { display: none }
  .sm-pic .where { left: 8px; top: 8px; font-size: 9px; height: 22px; padding: 0 7px }
  .sm-body { padding: 14px; gap: 6px }
  .sm-body h3 { font-size: 16px }
  .sm-body p { font-size: 12px }
  .sm-tags { display: none }
  .wow { height: 44px; font-size: 13px; gap: 8px }
  .wow .wi { width: 32px; height: 32px }
  .sm-empty { padding: 26px 22px }
  .sm-empty p { font-size: 22px }
  .sm-empty.t { flex-direction: column; align-items: stretch }
  .sm-world { min-height: 540px; padding: 48px 20px }
  .sm-tray .wrap { gap: 12px; padding-top: 12px; padding-bottom: 12px }
  .sm-picks { display: none }
  .sm-tray .c { font-size: 19px }
  .sm-tray .go { margin-left: auto; height: 50px; padding: 0 16px; font-size: 12px }
}

@media (prefers-reduced-motion: reduce) {
  .sm-bob, .sm-bob2, .sm-art .ring, .wow .wi, .sm-hero .blob { animation: none }
}