/* light theme: page layer for shop */
@media (prefers-color-scheme: light) {
/* from <style 1> */
html .vs-strip:where(:not(.hero *):not(.hero)) { border: 1px solid rgba(255,0,25,0.45); background: linear-gradient(90deg,rgba(255,59,78,.12),rgba(255,59,78,.02) 60%),#ffffff; }
html .vs-mark:where(:not(.hero *):not(.hero)) { color: #0b0d12; }
html .vs-mark em:where(:not(.hero *):not(.hero)) { color: #c20013; }
html .vs-sub:where(:not(.hero *):not(.hero)) { color: #4b4b4b; }
html .vs-clocklab:where(:not(.hero *):not(.hero)) { color: #646464; }
html .vs-clock:where(:not(.hero *):not(.hero)) { color: #0b0d12; }
html .vs-btn:where(:not(.hero *):not(.hero)) { border: 1px solid rgba(255,0,25,0.6); color: #c20013; }
html .vs-btn:hover:where(:not(.hero *):not(.hero)) { color: #0b0d12; }
/* from <style 2> */
html .ms-strip:where(:not(.hero *):not(.hero)) { background: linear-gradient(90deg,rgba(94,196,232,.10),rgba(94,196,232,.02) 62%),#ffffff; }
html .ms-strip:hover:where(:not(.hero *):not(.hero)) { border-color: rgba(8,109,149,0.5); }
html .ms-badge:where(:not(.hero *):not(.hero)) { border: 1px solid rgba(8,109,149,0.4); color: var(--accent-ink); }
html .ms-badge small:where(:not(.hero *):not(.hero)) { color: rgba(8,109,149,0.75); }
html .ms-title:where(:not(.hero *):not(.hero)) { color: #0b0d12; }
html .ms-sub:where(:not(.hero *):not(.hero)) { color: #4b4b4b; }
/* --- hand fixes for shop --- */
/* ---- shop: hand fixes (group: browse) ---- */

/* Category pills: active pill was ink-on-ink (styles.css sets color:#000 on a var(--text) fill) */
html .shop-filters .pill { background: #ffffff !important; border-color: var(--line-strong) !important; color: var(--text-2) !important; }
html .shop-filters .pill:hover { border-color: var(--text-2) !important; color: var(--text) !important; }
html .shop-filters .pill.active { background: var(--text) !important; border-color: var(--text) !important; color: #ffffff !important; }

/* Sort select: white capsule with the same hairline as the search field; its chevron had turned page-grey */
html .shop-toolbar .sort select { background: #ffffff !important; border: 1px solid var(--line-strong) !important; color: var(--text) !important; }
html .shop-toolbar .search input { border-color: var(--line-strong) !important; }
html .shop-toolbar .sort select:hover, html .shop-toolbar .sort select:focus { background: #f7f9fb !important; border-color: var(--text-2) !important; }
html .shop-toolbar .search input:focus { border-color: var(--accent-ink) !important; }
html .shop-toolbar .sort::after { border-right-color: var(--text) !important; border-bottom-color: var(--text) !important; }

/* Bundle & Save / same-day cards: white cards with a faint cyan wash instead of a blue-grey slab */
html .sp-card { background: linear-gradient(135deg, rgba(94,196,232,0.09) 0%, rgba(94,196,232,0.015) 100%), #ffffff !important;
  border: 1px solid var(--line) !important; box-shadow: 0 8px 24px rgba(16,24,40,0.05) !important; }
html .sp-card:hover { border-color: rgba(8,109,149,0.35) !important; box-shadow: 0 10px 28px rgba(16,24,40,0.08) !important; }
html .sp-badge { background: radial-gradient(circle at 32% 26%, rgba(94,196,232,0.22) 0%, rgba(94,196,232,0.06) 100%), #ffffff !important; }

/* Vault Sale strip: soft shadow like the other cards */
html .vs-strip { box-shadow: 0 8px 24px rgba(16,24,40,0.05); }
html .vs-btn:hover { background: #d92d3a !important; border-color: #d92d3a !important; color: #ffffff !important; }

/* Membership strip: hairline + soft shadow; the inline-styled tier names were near-white on white */
html .ms-strip { border-color: var(--line) !important; box-shadow: 0 8px 24px rgba(16,24,40,0.05); }
html .ms-strip:hover { border-color: rgba(8,109,149,0.45) !important; }
html .ms-sub b[style*="c8d2de"] { color: var(--text) !important; }
html .ms-badge { background: rgba(94,196,232,0.10) !important; }

/* Phone: the promo cards sit in a horizontal scroller that clips their shadow into a grey band */
@media (max-width: 760px) {
  html .sp-card, html .sp-card:hover { box-shadow: none !important; }
}

}