/************************************************************
 *  BASE.CSS - Global / shared styles for all pages
 *  - Variables, fonts, resets, layout
 *  - Carousel, footer, modal, animations
 *  - Testimonials, text selection, generic dark theme bits
 ************************************************************/

/* ----------------------------------------------------------
1) RESET & GLOBAL LAYOUT (shared)
---------------------------------------------------------- */
/* Tokens (--spacing-*, --color-*, the store's --bg/--fg/--gold… and the seven
   store-only --v2-* names) are defined in css/tokens.css and nowhere else. Every
   page that links this file links tokens.css, then base.css, first. */

/* CUSTOM FONTS (shared) */
@font-face {
  font-family: 'Josefin_Medium';
  src: url('../fonts/JosefinSans-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Josefin_Bold';
  src: url('../fonts/JosefinSans-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Josefin_Light';
  src: url('../fonts/JosefinSans-Light.ttf') format('truetype');
}

/* RESET (shared) */
/* The reset (*, html/body, body, main) lives in css/base.css. */

/* ----------------------------------------------------------
3) CAROUSEL (shared – used on index and elsewhere)
---------------------------------------------------------- */
.carousel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
  gap: var(--spacing-medium);
  padding: var(--spacing-medium);
  background: inherit;
  justify-content: center; /* also centers when few items */
}
.carousel-section-title {
  grid-column: 1 / -1;
  font-family: 'Josefin_Bold', 'Josefin Sans', Arial, sans-serif;
  font-size: 22px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-base);
  margin: 24px 0 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.carousel-section-title:first-child {
  margin-top: 4px;
}
.store-v2 .carousel-section-title {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  font-family: 'Josefin_Bold', 'Josefin Sans', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--v2-section-title);
  padding: 0 4px 16px;
  border-bottom: 1px solid var(--line);
  transition: border-color 200ms ease;
  user-select: none;
}
/* The row is a flex container; the real control is the <button> inside the
   <h2>. Both are unstyled so the row renders exactly as before. */
.store-v2 .carousel-section-heading {
  all: unset;
  display: flex;
  align-items: center;
  align-self: stretch;
  min-width: 0;
}
.store-v2 .carousel-section-toggle {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  gap: 14px;
}
.store-v2 .carousel-section-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 2px;
}
.store-v2 .carousel-section-label {
  flex: 0 0 auto;
}
.store-v2 .carousel-section-count {
  flex: 0 0 auto;
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--muted);
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  line-height: 1;
  min-width: 22px;
  text-align: center;
}
.store-v2 .carousel-section-chevron {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-left: auto;
  color: var(--muted);
  transition: transform 240ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
.store-v2 .carousel-section.collapsed .carousel-section-chevron {
  transform: rotate(-90deg);
}
.store-v2 .carousel-section-title:hover .carousel-section-chevron,
.store-v2 .carousel-section-title:hover .carousel-section-count {
  color: var(--fg);
}
#carousel.single-card {
  display: flex; justify-content: center; align-items: center;
  min-height: calc(100vh - 120px);
}
#carousel.single-card .carousel-item { max-width: 320px; width: 100%; }

.carousel-item {
  background: var(--color-card-bg);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: flex; flex-direction: column;
  text-align: center;
  padding: var(--spacing-medium);
  transition: transform 0.3s, box-shadow 0.3s;
  max-width: 300px; /* mobile-card sizing everywhere */
  width: 100%;
  margin: 0 auto;
}
.carousel-item:hover { transform: translateY(-4px); box-shadow: 0 6px 18px rgba(0,0,0,0.15); }
.img-container { position: relative; width: 100%; padding-top: 75%; overflow: hidden; margin-bottom: var(--spacing-medium); }
.carousel-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.image-indicator { display: flex; justify-content: center; margin-bottom: var(--spacing-medium); }
.indicator-dot { width: 8px; height: 8px; margin: 0 var(--spacing-small); border-radius: 50%; background-color: #ccc; transition: background-color 0.3s; }
/* Dots are <button>s (keyboard-reachable); strip the UA button chrome. */
button.indicator-dot { appearance: none; -webkit-appearance: none; padding: 0; border: 0; font: inherit; line-height: 0; }
.indicator-dot.active { background-color: #333; }
.title { font-family: 'Josefin_Bold'; font-size: 20px; color: var(--color-text-base); margin-bottom: var(--spacing-small); line-height: 1.4; }
.description {
  font-family: 'Josefin_Light'; font-size: 16px; color: var(--color-text-subtle);
  line-height: 1.5; margin-bottom: var(--spacing-medium);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
/* Desktop column sizing */
@media (min-width: 768px) {
  .carousel {
    display: grid;
    grid-template-columns: repeat(auto-fit, 300px);
    gap: var(--spacing-medium);
    justify-content: center;
    padding: var(--spacing-medium);
  }
}

/* ----------------------------------------------------------
4) FOOTER & STICKY BOTTOM (shared)
---------------------------------------------------------- */
.footer-elements {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto; padding: 12px; border-top: 1px solid #eee; background: #fff;
}

/* Price display */
.price-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.price { 
  font-family: 'Josefin_Medium'; 
  font-size: 20px; 
  color: #ffd700; 
  background: none; 
  border: none; 
  transition: transform 0.2s;
  margin: 0;
  line-height: 1;
}

.actual-price {
  font-family: 'Josefin_Bold';
  font-size: 14px;
  color: #888;
  margin: 0;
  line-height: 1;
}

.price:hover { transform: scale(1.05); }

/* Dark mode price */
.dark-theme .price {
  color: #ffd700;
}

.dark-theme .actual-price {
  color: #999;
}
.vote-container { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.heart-button { width: 32px; height: 32px; background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.2s, box-shadow 0.2s; }
.heart-button:hover { transform: scale(1.1); }
.heart-button::before {
  content: ""; display: block; width: 100%; height: 100%;
  background-color: #ccc; clip-path: polygon(50% 0%,100% 50%,50% 100%,0% 50%);
  transition: background-color 0.3s, transform 0.2s;
}
.heart-button.liked::before { background-color: #e63946; transform: scale(1.2); }
.likes-count { font-family: 'Josefin_Medium'; font-size: 12px; color: #555; white-space: nowrap; text-align: center; }
.likes-count.updated { animation: votePop 0.4s ease; }
@keyframes votePop { 0%{transform:scale(1)} 50%{transform:scale(1.3)} 100%{transform:scale(1)} }

/* No bare `footer` rule — see css/footer.css. */

/* Modal styles removed - using purchase-modal instead */

/* Animations section removed - unused styles */

/* Testimonials and shared text styles removed - not used in store page */

/* ----------------------------------------------------------
8A) COVER FLOW COLLAGE (shared block used by About page; safe here)
---------------------------------------------------------- */
.about-hero-collage {
  display:flex; flex-wrap:nowrap; gap:12px; overflow-x:auto; width:100vw;
  margin-left: calc(50% - 50vw); padding: var(--spacing-medium) 0; scroll-behavior:smooth;
}
.collage-slice { flex:0 0 auto; width:300px; height:200px; position:relative; overflow:hidden; border-radius:6px; transition: transform 0.4s ease; }
.collage-slice img { width:100%; height:100%; object-fit:cover; transform: scale(1.6); transition: transform 0.3s ease; }
.collage-slice:hover img { transform: scale(1.4); }
@media (max-width: 768px) {
  .about-hero-collage { gap:8px; padding: calc(1.5 * var(--spacing-medium)) 0; }
  .collage-slice { width:150px; height:150px; }
  .collage-slice img { transform: scale(1.3); }
}

/* ----------------------------------------------------------
10) Cart Button & Mini Panel
---------------------------------------------------------- */
.cart-button-container {
  position: relative;
  flex-shrink: 0;
}

.cart-button {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid #ff8c00;
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 60px;
}

.cart-button:hover {
  background: #fff5e6;
  border-color: #ff6b00;
  transform: translateY(-2px);
}

.cart-icon {
  font-size: 24px;
  color: #ff8c00;
}

.cart-label {
  font-family: 'Josefin_Medium', Arial, sans-serif;
  font-size: 12px;
  color: #ff8c00;
  font-weight: 600;
}

.cart-button.in-cart {
  background: rgba(76, 175, 80, 0.15);
  border-color: #4caf50;
}

.cart-button.in-cart .cart-icon {
  color: #4caf50;
}

.cart-button.in-cart .cart-label {
  color: #4caf50;
}

/* Dark mode cart button */
.dark-theme .cart-button {
  background: rgba(26, 26, 26, 0.95);
  border-color: #ffd700;
}

.dark-theme .cart-button:hover {
  background: rgba(40, 40, 40, 0.95);
  border-color: #ffed4e;
}

.dark-theme .cart-icon {
  color: #ffd700;
}

.dark-theme .cart-label {
  color: #ffd700;
}

.dark-theme .cart-button.in-cart {
  background: rgba(76, 175, 80, 0.2);
  border-color: #4caf50;
}

.dark-theme .cart-button.in-cart .cart-icon {
  color: #4caf50;
}

.dark-theme .cart-button.in-cart .cart-label {
  color: #4caf50;
}

/* The size/gender picker moved to css/fitPicker.css. */

/* ----------------------------------------------------------
Image Zoom Modal
---------------------------------------------------------- */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  animation: fadeIn 0.3s ease;
}

.modal.active {
  display: flex;
}

.modal-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 85vw;
  max-height: 85vh;
}

.modal-image-container img {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 8px;
  user-select: none;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  color: white;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  z-index: 10;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  z-index: 10;
}

.modal-nav:hover {
  background: rgba(255, 255, 255, 0.3);
}

.modal-nav-left {
  left: 16px;
}

.modal-nav-right {
  right: 16px;
}

@media (max-width: 768px) {
  .modal-image-container {
    max-width: 95vw;
    max-height: 80vh;
  }
  .modal-nav {
    width: 40px;
    height: 40px;
    font-size: 24px;
  }
  .modal-nav-left { left: 8px; }
  .modal-nav-right { right: 8px; }
  .modal-close { top: 12px; right: 12px; width: 40px; height: 40px; }
}


@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ----------------------------------------------------------
Skeleton Loading Cards
---------------------------------------------------------- */
.skeleton-card { pointer-events: none; }
.skeleton-image {
  width: 100%;
  padding-top: 75%;
  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
  margin-bottom: var(--spacing-medium);
}
.skeleton-text {
  height: 14px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
  margin-bottom: var(--spacing-medium);
}
.skeleton-title { width: 65%; height: 20px; }
.skeleton-desc { width: 90%; }
.skeleton-price { width: 35%; height: 18px; margin-top: var(--spacing-large); }

@keyframes shimmer { to { background-position: -200% 0; } }

.dark-theme .skeleton-image,
.dark-theme .skeleton-text {
  background: linear-gradient(90deg, #2a2a2a 25%, #333 50%, #2a2a2a 75%);
  background-size: 200% 100%;
}

/* ----------------------------------------------------------
Sustainability Alert Modal
---------------------------------------------------------- */
.sustainability-alert-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
}

.sustainability-alert-modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sustainability-alert-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(3, 3, 3, 0.78);
  backdrop-filter: blur(7px);
  animation: fadeIn 0.3s ease;
}

.sustainability-alert-content {
  position: relative;
  background: linear-gradient(150deg, rgba(24, 24, 20, 0.98), rgba(11, 12, 10, 0.98));
  border: 1px solid rgba(181, 147, 90, 0.42);
  border-radius: 18px;
  padding: 30px 34px;
  max-width: 480px;
  margin: 20px;
  box-shadow: 0 28px 74px rgba(0,0,0,0.56);
  animation: slideUp 0.3s ease;
  text-align: center;
}

.sustainability-alert-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(181, 147, 90, 0.16);
  border: 1px solid rgba(181, 147, 90, 0.34);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.sustainability-alert-leaf {
  width: 36px;
  height: 36px;
  fill: #d4b684;
}

.sustainability-alert-content h2 {
  font-family: 'Josefin_Bold', Arial, sans-serif;
  font-size: 2rem;
  color: #ede8df;
  margin-bottom: 12px;
  letter-spacing: 0.01em;
}

.sustainability-alert-content p {
  font-family: 'Josefin_Medium', Arial, sans-serif;
  font-size: 1rem;
  color: rgba(237, 232, 223, 0.8);
  line-height: 1.6;
  margin-bottom: 12px;
}

.sustainability-limit-copy strong {
  color: #d4b684;
}

.sustainability-context-copy {
  color: rgba(237, 232, 223, 0.92);
}

.sustainability-reason {
  font-size: 0.92rem;
  color: rgba(237, 232, 223, 0.62);
  font-style: normal;
}

.sustainability-alert-actions {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}

.alert-btn {
  flex: 1;
  padding: 13px 18px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: 'Josefin_Medium', Arial, sans-serif;
  font-size: 0.98rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.alert-btn-secondary {
  background: rgba(255, 255, 255, 0.03);
  color: rgba(237, 232, 223, 0.84);
  border-color: rgba(181, 147, 90, 0.34);
}

.alert-btn-secondary:hover {
  background: rgba(181, 147, 90, 0.14);
}

.alert-btn-primary {
  background: linear-gradient(135deg, #be9d66, #a6844f);
  color: #111;
  border-color: rgba(212, 182, 132, 0.84);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}

.alert-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.42);
}

@media (max-width: 640px) {
  .sustainability-alert-content {
    margin: 14px;
    padding: 26px 20px;
    border-radius: 16px;
  }

  .sustainability-alert-content h2 {
    font-size: 1.75rem;
  }

  .sustainability-alert-actions {
    flex-direction: column;
  }
}

/* Dark theme: Sustainability Alert */
.dark-theme .sustainability-alert-content {
  background: linear-gradient(150deg, rgba(24, 24, 20, 0.98), rgba(11, 12, 10, 0.98));
  box-shadow: 0 28px 74px rgba(0,0,0,0.56);
}
.dark-theme .sustainability-alert-content h2 { color: #ede8df; }
.dark-theme .sustainability-alert-content p { color: rgba(237, 232, 223, 0.8); }
.dark-theme .sustainability-reason { color: rgba(237, 232, 223, 0.62); }
.dark-theme .alert-btn-secondary {
  background: rgba(255, 255, 255, 0.03);
  color: rgba(237, 232, 223, 0.84);
  border-color: rgba(181, 147, 90, 0.34);
}
.dark-theme .alert-btn-secondary:hover { background: rgba(181, 147, 90, 0.14); }

/* ----------------------------------------------------------
11) Text Selection (shared)
---------------------------------------------------------- */
::selection { background-color: var(--color-accent); color:#fff; }
.dark-theme ::selection { background-color:#ffd700; color:#111; }

/* ----------------------------------------------------------
12) Store Banner (for filtered store views)
---------------------------------------------------------- */
.store-banner {
  background: none;
  padding: 28px 8px 8px;
  margin: 0 0 12px;
  text-align: center;
  color: var(--color-text, #221b12);
}
.store-banner-content { max-width: 720px; margin: 0 auto; }
.store-banner-name {
  font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 2.8rem);
  letter-spacing: .02em;
  line-height: 1.1;
  margin: 0 0 4px;
}
.store-banner-count {
  font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--color-accent, #a8843c);
  margin: 0 0 10px;
}
.store-banner-count::after {
  content: ''; display: block; width: min(38%, 220px); height: 1px; margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, var(--color-accent, #a8843c), transparent);
}
.store-banner-promo {
  margin: 12px auto 0; max-width: 34em; font-style: italic; font-size: 1.02rem;
  color: var(--color-accent, #a8843c);
}
.store-banner-link {
  display: inline-block;
  font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-size: .92rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-accent, #a8843c);
  text-decoration: none;
  transition: opacity .2s;
}

.store-banner-link:hover {
  color: #ffa500;
  text-decoration: underline;
}

/* Store Empty State */
.store-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--color-text-subtle);
}

.store-empty h2 {
  font-family: 'Josefin_Bold', sans-serif;
  font-size: 24px;
  margin-bottom: 12px;
  color: var(--color-text-base);
}

.store-empty p {
  font-size: 16px;
  margin-bottom: 24px;
}

.store-back-link {
  display: inline-block;
  background: var(--color-accent);
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.2s, box-shadow 0.2s;
}

.store-back-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 140, 0, 0.3);
}

/* Dark theme adjustments */
.dark-theme .store-banner { background: none; color: var(--color-text, #ede8df); }

.dark-theme .store-empty h2 {
  color: #fff;
}

/* ----------------------------------------------------------
13) Product Store Link
---------------------------------------------------------- */
.product-store-link {
  display: block;
  font-size: 12px;
  color: var(--color-text-subtle);
  text-decoration: none;
  margin: -4px 0 8px 0;
  transition: color 0.2s;
}

.product-store-link:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.dark-theme .product-store-link {
  color: rgba(255, 255, 255, 0.6);
}

.dark-theme .product-store-link:hover {
  color: var(--color-accent);
}

/* ----------------------------------------------------------
14) Store 2.0 (scoped, feature-safe visual upgrade)
---------------------------------------------------------- */
/* Store palette: css/tokens.css (.store-v2 and html.dark-theme .store-v2). */

.store-v2 html,
.store-v2 body,
body.store-v2 {
  background: radial-gradient(circle at 22% 14%, rgba(181, 147, 90, 0.14), transparent 36%),
              radial-gradient(circle at 78% 82%, rgba(181, 147, 90, 0.1), transparent 42%),
              var(--bg);
  color: var(--fg);
}

.store-v2 main {
  padding: 24px 20px 48px;
}

.store-v2 .carousel {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 0;
  max-width: 1720px;
  margin: 0 auto;
  grid-template-columns: none;
  justify-content: initial;
}

.store-v2 .carousel-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.store-v2 .carousel-section-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 32px;
  transition: opacity 200ms ease;
}

.store-v2 .carousel-section.collapsed .carousel-section-items,
.store-v2 .carousel-section.collapsed .section-facets {
  display: none;
}

/* In-section sub-chip facets (Theme / Park / Tags) — sits between the
   section heading and the items grid. Hidden by default; revealed by the
   Refine toggle in the section header. Rows hide automatically when the
   facet has fewer than 2 distinct values in this section. */
.store-v2 .section-facets {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 4px 16px;
  max-height: 800px;
  overflow: hidden;
  transition: max-height 280ms cubic-bezier(0.2, 0.7, 0.2, 1), padding 220ms ease, opacity 200ms ease;
  opacity: 1;
}
.store-v2 .section-facets.collapsed {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  pointer-events: none;
}

/* Refine toggle on each section header. */
.store-v2 .carousel-section-refine {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-family: 'Josefin_Medium', 'Josefin Sans', Arial, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
/* `hidden` must beat the inline-flex display above — Refine is a real <button>
   now, and a rendered-but-"hidden" one would be a focusable no-op. (This also
   lets the 0-count pill actually hide, as the JS always intended.) */
.store-v2 .carousel-section-refine[hidden],
.store-v2 .carousel-section-refine .refine-count[hidden] {
  display: none;
}
.store-v2 .carousel-section-refine:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.store-v2 .carousel-section-refine:hover {
  color: var(--fg);
  border-color: var(--muted);
  background: var(--line);
}
.store-v2 .carousel-section-refine.has-active {
  color: var(--fg);
  border-color: var(--fg);
}
.store-v2 .carousel-section-refine .refine-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--fg);
  color: var(--surface-2);
  font-family: 'Josefin_Bold', 'Josefin Sans', Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 0;
}
.store-v2 .carousel-section-refine .refine-chevron {
  width: 12px;
  height: 12px;
  transition: transform 240ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
.store-v2 .carousel-section-refine[aria-expanded="true"] .refine-chevron {
  transform: rotate(180deg);
}
/* The big chevron at the end (collapse the whole section) sits to the right
   of Refine. Keep its left margin small so the two don't crowd each other. */
.store-v2 .carousel-section-title .carousel-section-chevron {
  margin-left: 8px;
}
.store-v2 .section-facet-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.store-v2 .section-facet-label {
  flex: 0 0 auto;
  font-family: 'Josefin_Bold', 'Josefin Sans', Arial, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  min-width: 54px;
}
.store-v2 .section-facet-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.store-v2 .section-facet-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg);
  font-family: 'Josefin_Medium', 'Josefin Sans', Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.store-v2 .section-facet-chip:hover {
  border-color: var(--muted);
  background: var(--line);
}
.store-v2 .section-facet-chip:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.store-v2 .section-facet-chip.selected {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--surface-2);
}
.store-v2 .section-facet-chip.selected .section-facet-count {
  color: var(--surface-2);
  opacity: 0.7;
}
.store-v2 .section-facet-count {
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.store-v2 .carousel-section.collapsed .carousel-section-title {
  border-bottom-color: transparent;
}

.store-v2 .carousel-item {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  text-align: left;
  padding: 0;
  overflow: visible;
  max-width: none;
  margin: 0;
}

.store-v2 .carousel-item:hover {
  transform: none;
  box-shadow: none;
}

.store-v2 .img-container {
  width: 100%;
  padding-top: 125%;
  margin: 0;
  background: var(--v2-image-bg);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--v2-image-border);
}

.store-v2 .carousel-image {
  border-radius: 8px;
  transition: transform 200ms ease;
}

.store-v2 .carousel-item:hover .carousel-image {
  transform: scale(1.02);
}

.store-v2 .image-meta-pill {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--v2-overlay-bg);
  color: var(--v2-overlay-fg);
  font-family: 'Josefin_Light', Arial, sans-serif;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}

.store-v2 .new-badge {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--v2-new-bg);
  color: var(--v2-new-fg);
  font-family: 'Josefin_Bold', 'Josefin Sans', Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.store-v2 .heart-button {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 999px;
  background: var(--v2-overlay-bg);
  color: var(--v2-overlay-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.store-v2 .heart-button::before {
  content: none;
}

.store-v2 .heart-button.liked {
  color: #111;
}

.store-v2 .image-indicator {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  z-index: 3;
}

.store-v2 .indicator-dot {
  position: relative;
  width: 4px;
  height: 4px;
  margin: 0;
  background: rgba(255, 255, 255, 0.55);
}

/* Invisible 17px hit area around the 5px dot; the visual size is unchanged. */
.store-v2 .indicator-dot::before {
  content: "";
  position: absolute;
  inset: -6px;
}

.store-v2 .indicator-dot.active {
  background: rgba(34, 34, 34, 0.75);
}

/* A focus ring that reads on any photo: white ring inside a dark halo. */
.store-v2 .indicator-dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.6);
}

.store-v2 .product-copy {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 12px;
}

.store-v2 .title {
  color: var(--fg);
  font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 3px;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: balance;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.store-v2 .title-link {
  color: inherit;
  text-decoration: none;
  transition: color 160ms ease;
}
.store-v2 .title-link:hover {
  color: var(--gold-bright);
}

.store-v2 .product-store-link {
  display: none;
}

.store-v2 .description {
  color: var(--muted);
  font-family: 'Josefin_Light', Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 8px;
  min-height: 0;
  line-height: 1.5;
  display: block;
  overflow: hidden;
  white-space: normal;
}

.store-v2 .footer-elements {
  border: none;
  background: transparent;
  padding: 0;
  gap: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0;
}

.store-v2 .price-container {
  gap: 0;
}

.store-v2 .price {
  display: none;
}

.store-v2 .actual-price {
  color: var(--fg);
  font-family: 'Josefin_Medium', Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
}

.store-v2 .cart-button-container {
  position: relative;
}

.store-v2 .cart-link {
  /* A <button>, not a link: it opens the fit picker, it does not navigate. */
  background: none;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-family: 'Josefin_Light', Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  padding-bottom: 2px;
}

.store-v2 .cart-link.in-cart {
  color: var(--good);
}

.store-v2 .cart-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.38;
}

.store-v2 .cart-link {
  cursor: pointer;
}

/* Was a hard-coded near-white, which is invisible on the ivory theme. */
.store-v2 .cart-link:hover {
  color: var(--fg);
}

.store-v2 .cart-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.store-v2 .cart-link.in-cart:hover {
  color: #2b7a4b;
}

.store-v2 .cart-link-icon {
  display: none;
  font-size: 12px;
  line-height: 1;
}

.store-v2 .cart-label {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.store-v2 .store-banner { background: none; border: 0; }

.store-v2 .store-banner-link {
  color: var(--gold-bright);
}

.store-v2 .store-empty,
.store-v2 .store-empty h2,
.store-v2 .store-empty p {
  color: var(--fg);
}

.store-v2 .store-back-link {
  background: linear-gradient(135deg, #be9d66, #a6844f);
  color: #111;
}

@media (max-width: 768px) {
  .store-v2 main {
    padding: 20px 16px 40px;
  }
}

@media (min-width: 640px) {
  .store-v2 .carousel-section-items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .store-v2 .carousel-section-items {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1600px) {
  .store-v2 .carousel-section-items {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Neutralise the legacy dark-theme card-footer band on the store-v2 layout.
   header.css:524 sets a #222 box that beats .store-v2 .footer-elements via
   the `html.dark-theme` prefix; scope our reset the same way to win. */
html.dark-theme body.store-v2 .footer-elements,
html.dark-theme .store-v2 .footer-elements {
  background: transparent;
  border-top: 0;
  padding: 0;
}

/* ----------------------------------------------------------
15) Cart 2.0 (scoped, no logic changes)
---------------------------------------------------------- */
.cart-v2 .cart-page-wrapper {
  background: radial-gradient(circle at 20% 16%, rgba(181, 147, 90, 0.14), transparent 40%),
              radial-gradient(circle at 80% 82%, rgba(181, 147, 90, 0.1), transparent 45%),
              #080907;
}

.cart-v2 .cart-page {
  max-width: 1240px;
  margin: 0 auto;
  padding: 26px 20px 54px;
}

.cart-v2 .cart-header h1 {
  color: var(--gold-bright);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: clamp(1.7rem, 3vw, 2.35rem);
}

.cart-v2 .cart-summary-bar,
.cart-v2 .cart-item,
.cart-v2 .cart-summary-panel {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), transparent 44%), var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.42);
  border-radius: 12px;
}

.cart-v2 .cart-summary-bar-title {
  color: rgba(237, 232, 223, 0.56);
}

.cart-v2 .cart-summary-bar-details,
.cart-v2 .cart-item-meta,
.cart-v2 .payment-prompt,
.cart-v2 .cart-form-label,
.cart-v2 .cart-consent-text {
  color: var(--v2-muted);
}

.cart-v2 .cart-summary-bar-total {
  color: rgba(237, 232, 223, 0.64);
}

.cart-v2 .cart-summary-bar-total-value,
.cart-v2 .cart-item-price,
.cart-v2 .cart-summary-title {
  color: var(--gold-bright);
}

.cart-v2 .cart-summary-title {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cart-v2 .cart-item-title {
  color: var(--fg);
}

.cart-v2 .cart-item-remove {
  color: #de7b7b;
}

.cart-v2 .cart-item-remove:hover {
  color: #f09999;
}

.cart-v2 .cart-form-input {
  background: #0f100d;
  border-color: rgba(181, 147, 90, 0.34);
  color: var(--fg);
}

.cart-v2 .cart-form-input:focus {
  border-color: var(--gold-bright);
}

.cart-v2 .cart-form-input::placeholder {
  color: rgba(237, 232, 223, 0.4);
}

.cart-v2 .cart-consent-box {
  background: rgba(181, 147, 90, 0.08);
  border-color: rgba(181, 147, 90, 0.3);
}

.cart-v2 .cart-consent-text a {
  color: var(--gold-bright);
}

.cart-v2 .cart-checkout-btn {
  background: linear-gradient(135deg, #be9d66, #a6844f);
  color: #111;
  border: 1px solid rgba(212, 182, 132, 0.78);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
}

.cart-v2 .cart-checkout-btn:hover {
  box-shadow: 0 8px 22px rgba(181, 147, 90, 0.35);
}

.cart-v2 .cart-back-btn {
  background: linear-gradient(135deg, #be9d66, #a6844f);
  color: #111;
}

.cart-v2 .cart-back-btn:hover {
  box-shadow: 0 8px 20px rgba(181, 147, 90, 0.34);
}

.cart-v2 .cart-empty h2,
.cart-v2 .cart-empty p {
  color: var(--fg);
}

.cart-v2 footer {
  border-top: 1px solid rgba(181, 147, 90, 0.14);
}

/* Mobile checkout notch + sheet parity */
@media (max-width: 768px) {
  .cart-v2 .mobile-checkout-notch {
    background: linear-gradient(135deg, rgba(190, 157, 102, 0.98), rgba(166, 132, 79, 0.96));
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.48);
    color: #111;
  }

  .cart-v2 .mobile-bottom-sheet {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), transparent 48%), #11120f;
    border-top: 1px solid rgba(181, 147, 90, 0.34);
  }

  .cart-v2 .mobile-sheet-header,
  .cart-v2 .mobile-sheet-content,
  .cart-v2 .mobile-sheet-footer {
    border-color: rgba(181, 147, 90, 0.2);
  }
}

/* ----------------------------------------------------------
16) Store controls polish (scoped)
---------------------------------------------------------- */
.store-v2 .header {
  background: linear-gradient(180deg, rgba(10, 11, 9, 0.96), rgba(10, 11, 9, 0.82));
  border: none;
  border-bottom: 1px solid rgba(181, 147, 90, 0.18);
  border-radius: 0;
  margin: 0;
  padding: 1.75rem 2rem 1.1rem;
  box-shadow: none;
}

.store-v2 .header-top {
  align-items: flex-end;
}

.store-v2 .header-brand {
  gap: 0.18rem;
}

/* The store header is dark in BOTH themes (the gradient above; html.dark-theme
   paints it #080808 via header.css), so the brand text uses the night golds as
   literals. The light-theme --gold tokens are dark-on-light inks and
   measured 2.3:1 (title) / 2.7:1 (subtitle) here. Title ≥ 6.4:1 and subtitle
   ≥ 5.4:1 against the darkest point of the gradient. */
.store-v2 .header-title {
  font-size: clamp(1.55rem, 4vw, 2.1rem);
  color: #eccf9c;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
}

.store-v2 .header-subtitle {
  color: #d4b684;
  font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 0.78rem;
  font-style: italic;
  letter-spacing: 0.28em;
  opacity: 0.9;
  text-transform: lowercase;
}

.store-v2 .header-controls {
  gap: 10px;
}

.store-v2 .cart-nav-button {
  color: rgba(237, 232, 223, 0.82);
}

.store-v2 .cart-nav-button:hover {
  color: var(--gold-bright);
}

.store-v2 .cart-badge {
  background: linear-gradient(135deg, #be9d66, #a6844f);
  color: #111;
}

.store-v2 #filter-toggle,
.store-v2 .fab-menu,
.store-v2 .theme-toggle-icon {
  color: rgba(237, 232, 223, 0.82);
}

.store-v2 #filter-toggle:hover,
.store-v2 .fab-menu:hover,
.store-v2 .theme-toggle-icon:hover {
  color: var(--gold-bright);
}

@media (max-width: 768px) {
  .store-v2 .header {
    padding: 1.4rem 1.1rem 1rem;
  }
}

/* Filter-modal styling lives entirely in kaaykoFilterModal.css now —
   that file owns the .store-v2 .filter-* and .chip rules. */

/* The site footer lives in css/footer.css (.site-footer, and .is-light for the
   light store pages). There is deliberately no `.store-v2 footer` rule here:
   it out-specified the shared component (0,1,1 beats 0,1,0) and repainted the
   footer as a dark gradient with uppercase text on a cream page. */
/* ----------------------------------------------------------
16) Purchase-funnel ergonomics (touch targets + bag toast)
   No palette changes — these rules only grow hit areas and add
   the post-add "Go to bag" affordance.
---------------------------------------------------------- */

/* The money button on a 2-up mobile grid was ~11×60px. The link keeps its
   exact typographic look; an invisible pseudo-element gives it a 44px-tall,
   44px-wide hit area that stays inside the 32px grid row gap. */
.store-v2 .cart-link {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.store-v2 .cart-link::before {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
  min-width: 44px;
  border-radius: 6px;
}

.store-v2 .cart-link:active::before {
  background: currentColor;
  opacity: 0.08;
}

/* Section headers and refine chips are tapped too — keep them thumb-sized. */
.store-v2 .carousel-section-title {
  min-height: 44px;
}
.store-v2 .section-facet-chip,
.store-v2 .carousel-section-refine {
  min-height: 32px;
}
.store-v2 .indicator-dot {
  cursor: pointer;
}

/* Retry control on the animal PDP error state (was a CSP-blocked
   `javascript:` link, now a real button — match the old link's look). */
.animal-v2 .animal-empty .animal-retry {
  margin-top: 12px;
  min-height: 44px;
  padding: 0 4px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  color: var(--fg);
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

/* ----------------------------------------------------------
17) Accessibility utilities (skip link, live-region text, focus rings,
   keyboard-reachable gallery controls). No palette changes: the skip link
   uses ivory/black/gold literals so it reads on the dark header in both themes.
---------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: -9999px;
  z-index: 20000;
  padding: 12px 18px;
  border-radius: 6px;
  background: #f5efe2;
  color: #1a1815;
  font-family: 'Josefin_Medium', 'Josefin Sans', Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.skip-link:focus,
.skip-link:focus-visible {
  left: 12px;
  outline: 2px solid #d4b684;
  outline-offset: 2px;
}

/* The skip-link target only ever takes programmatic focus; no ring on a landmark. */
.store-v2 main[tabindex="-1"]:focus {
  outline: none;
}

/* PDP thumbnails are <button>s: strip the UA chrome, keep the tile look. */
.product-v2 button.product-thumb {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
}
.product-v2 .product-thumb img {
  display: block;
}
.product-v2 .product-thumb:focus-visible,
.product-v2 .product-gallery-main:focus-visible,
.animal-v2 .variant-img:focus-visible,
.animal-v2 .animal-hero-art:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ──────────────────────────────────────────────────────────
   Sold out — still on display, not purchasable.
   Distinct from hidden (isAvailable:false), which the server no longer
   returns at all. Checkout enforces this independently in pricing.js.
   ────────────────────────────────────────────────────────── */

.store-v2 .sold-out-flag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(20, 18, 15, 0.92);
  color: #f2ebdc;
  font-family: 'Josefin_Medium', 'Josefin Sans', Arial, sans-serif;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* The photo dims, the words stay legible. */
.store-v2 .carousel-item.is-sold-out .image-container img { opacity: .55; }

.store-v2 .cart-button-container.is-sold-out .cart-link {
  color: var(--muted);
  cursor: not-allowed;
}

.store-v2 .cart-button-container.is-sold-out .cart-link::after { opacity: .18; }


/* Featured products (Firestore `featured: true`): they lead the grid and carry a badge.
   Placed bottom-left so it clears the votes pill (top-left), the NEW badge (top-centre)
   and the heart control (top-right). */
.store-v2 .carousel-item.is-featured { position: relative; }
.store-v2 .carousel-item .featured-flag {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 4;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--v2-overlay-bg);
  color: var(--v2-overlay-fg);
  font-family: 'Josefin_Bold', 'Josefin Sans', Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}


/* ==========================================================================
   Browse toolbar — one mixed grid, narrowed here rather than split into
   per-type sections. Josefin + --v2 tokens, same as the rest of the store.
   ========================================================================== */
.store-v2 .browse-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  max-width: 100%;
}

.store-v2 .browse-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.store-v2 .browse-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.store-v2 .browse-chip:hover { border-color: var(--gold); color: var(--fg); }
.store-v2 .browse-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.store-v2 .browse-chip[aria-pressed="true"] {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

.store-v2 .browse-chip-count {
  font-size: 11px;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

.store-v2 .browse-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}

.store-v2 .browse-search,
.store-v2 .browse-sort {
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 13px;
  max-width: 100%;
}

.store-v2 .browse-search { min-width: 0; width: 190px; }
.store-v2 .browse-search::placeholder { color: var(--muted); opacity: 0.8; }
.store-v2 .browse-search:focus-visible,
.store-v2 .browse-sort:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.store-v2 .browse-count {
  margin: 0;
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Coming soon — one line under the grid naming what is on its way and its price.
   Not a card, not a form: nothing to click and nothing to join. */
.store-v2 .coming-soon {
  width: 100%;
  margin: 0;                       /* .store-v2 .carousel is a flex column with its own gap */
  padding: 22px 0 0;
  border-top: 1px solid var(--line);
  text-align: center;
}
.store-v2 .coming-soon-eyebrow {
  margin: 0 0 8px;
  font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.store-v2 .coming-soon-items {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
  font-family: 'Josefin_Medium', 'Josefin Sans', Arial, sans-serif;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--fg);
}
.store-v2 .coming-soon-price {
  margin-left: 8px;
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.store-v2 .coming-soon-note {
  margin: 8px 0 0;
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 13px;
  color: var(--muted);
}

/* Clear everything the shopper has narrowed by; hidden until something is. */
.store-v2 .browse-clear {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-family: 'Josefin_Medium', 'Josefin Sans', Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.store-v2 .browse-clear:hover { border-color: var(--gold); color: var(--gold); }
.store-v2 .browse-clear:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Nothing matched: say so in the shop's voice and offer the way back. */
.store-v2 .browse-empty {
  width: 100%;
  padding: 56px 16px;
  text-align: center;
}
.store-v2 .browse-empty-title {
  margin: 0 0 8px;
  font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
  font-weight: 500;
  font-size: clamp(24px, 3vw, 32px);
  color: var(--fg);
}
.store-v2 .browse-empty-copy {
  margin: 0 auto 20px;
  max-width: 44ch;
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}
.store-v2 .browse-empty-btn {
  min-height: 44px;
  padding: 0 24px;
  border: 1px solid var(--fg);
  border-radius: 999px;
  background: var(--fg);
  color: var(--bg);
  font-family: 'Josefin_Medium', 'Josefin Sans', Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.store-v2 .browse-empty-btn:hover { opacity: 0.88; }
.store-v2 .browse-empty-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.store-v2 .store-grid.is-empty { display: none; }

/* Hidden cards must leave the grid flow, or they hold empty tracks open. */
.store-v2 .store-grid .carousel-item[hidden] { display: none !important; }

/* Dark mode: unselected controls carry a gentle gold tint so they read as
   interactive without shouting. The selected state stays high-contrast. */
html.dark-theme .store-v2 .browse-chip,
html.dark-theme .store-v2 .browse-search,
html.dark-theme .store-v2 .browse-sort {
  border-color: rgba(212, 182, 132, 0.34);
  color: var(--gold);
}
html.dark-theme .store-v2 .browse-chip:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
}
html.dark-theme .store-v2 .browse-chip[aria-pressed="true"] {
  background: var(--gold);
  border-color: var(--gold);
  color: #16120a;
}
html.dark-theme .store-v2 .browse-search::placeholder { color: rgba(212, 182, 132, 0.65); }

@media (max-width: 700px) {
  .store-v2 .browse-toolbar { gap: 10px; }
  .store-v2 .browse-controls { width: 100%; }
  .store-v2 .browse-search { flex: 1 1 140px; width: auto; }
  .store-v2 .browse-sort { flex: 0 1 auto; }
  .store-v2 .browse-count { width: 100%; }
}

/* One staggered entrance, and none at all for anyone who asked for less. */
@media (prefers-reduced-motion: reduce) {
  .store-v2 .carousel-item,
  .store-v2 .carousel-item.animate {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   Arcade widget — the per-product mini-game on the product page.
   Same Cormorant/Josefin pairing and --v2 tokens as everything else.
   ========================================================================== */
.arcade-slot { display: block; max-width: 100%; }
.arcade-loading {
  margin: 0;
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 13px;
  color: var(--muted);
}

.arcade-card {
  margin: 0 auto 26px;
  max-width: 640px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.arcade-eyebrow {
  margin: 0;
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}

.arcade-title {
  margin: 0;
  font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
  font-weight: 600;
  font-size: clamp(20px, 3vw, 26px);
  line-height: 1.2;
  color: var(--fg);
}

.arcade-copy, .arcade-feedback, .arcade-fine, .arcade-label {
  margin: 0;
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  color: var(--muted);
}
.arcade-copy { font-size: 14.5px; line-height: 1.6; }
.arcade-feedback { font-size: 13.5px; font-style: italic; min-height: 1em; }
.arcade-fine { font-size: 12px; opacity: .8; }
.arcade-fine a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.arcade-label { font-size: 12px; }

.arcade-options { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.arcade-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.arcade-btn {
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, opacity 150ms ease;
}
.arcade-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.arcade-btn:disabled { opacity: .45; cursor: default; }
.arcade-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.arcade-input {
  flex: 1 1 180px;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 14px;
}
.arcade-input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.arcade-card.is-won { border-color: var(--gold); }
.arcade-code { margin: 0; }
.arcade-code code {
  display: inline-block;
  padding: 8px 14px;
  border: 1px dashed var(--gold);
  border-radius: 8px;
  font-family: 'Courier New', monospace;
  font-size: 17px;
  letter-spacing: .1em;
  color: var(--gold);
  word-break: break-all;
}

/* Dark mode: unselected controls carry the same gentle gold tint as the store. */
html.dark-theme .arcade-btn,
html.dark-theme .arcade-input {
  border-color: rgba(212, 182, 132, 0.34);
  color: var(--gold);
}
html.dark-theme .arcade-btn:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--gold-bright);
}

@media (max-width: 560px) {
  .arcade-card { padding: 16px; }
  .arcade-form { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) { .arcade-btn { transition: none; } }

/* ==========================================================================
   The two machines, on a product page.
   store-about.css dresses the About-page pair; this dresses the one on a PDP
   and in the cart. Both use the same markup so the games do not care which.
   The screen is a CRT in either theme — a game that borrows the page's own
   ink ends up drawing dark on dark, which is how this went wrong once already.
   ========================================================================== */
.store-v2 .arcade-game { margin: 0; }

.store-v2:not(.about-v2) .cab {
  display: flex; flex-direction: column;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface, #14120c);
  overflow: hidden;
}

.store-v2:not(.about-v2) .cab-marquee {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--machine-key, #b5935a) 16%, transparent), transparent);
  border-bottom: 1px solid var(--line);
}
.store-v2:not(.about-v2) .cab-name {
  margin: 0;
  font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 19px; font-weight: 500; letter-spacing: .01em;
  color: var(--machine-lit, var(--gold));
}
.store-v2:not(.about-v2) .cab-lamps { display: flex; gap: 5px; flex: 0 0 auto; }
.store-v2:not(.about-v2) .cab-lamps i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--machine-lit, var(--gold)); opacity: .45;
}
@media (prefers-reduced-motion: no-preference) {
  .store-v2:not(.about-v2) .cab-lamps i { animation: cabLampPdp 1.8s ease-in-out infinite; }
  .store-v2:not(.about-v2) .cab-lamps i:nth-child(2) { animation-delay: .25s; }
  .store-v2:not(.about-v2) .cab-lamps i:nth-child(3) { animation-delay: .5s; }
}
@keyframes cabLampPdp { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

.store-v2:not(.about-v2) .cab-body { padding: 12px 12px 0; }

.store-v2:not(.about-v2) .cab-stage {
  position: relative;
  height: var(--cab-h, 200px);
  border-radius: 10px;
  background: #0a0c0a;
  border: 1px solid var(--line);
  overflow: hidden;
}
.store-v2:not(.about-v2) .cab-canvas {
  display: block; width: 100%; height: 100%;
  touch-action: none; cursor: pointer;
}
.store-v2:not(.about-v2) .cab-canvas:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* Scanlines belong to the glass, never to the game: pointer-events off, or the
   first tap of every run lands on a decoration. */
.store-v2:not(.about-v2) .cab-scanlines {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg,
    rgba(0,0,0,.20) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}

.store-v2:not(.about-v2) .cab-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 14px; text-align: center;
  background: rgba(8, 10, 8, .68);
}
.store-v2:not(.about-v2) .cab-overlay[hidden] { display: none; }
.store-v2:not(.about-v2) .cab-how {
  margin: 0; font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 13.5px; line-height: 1.5; color: #efe6d4; max-width: 30ch;
}
.store-v2:not(.about-v2) .cab-play {
  padding: 9px 22px; border: 1px solid var(--machine-lit, var(--gold)); border-radius: 999px;
  background: transparent; color: var(--machine-lit, var(--gold));
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.store-v2:not(.about-v2) .cab-play:hover:not(:disabled) {
  background: var(--machine-lit, var(--gold)); color: #0a0c0a;
}
.store-v2:not(.about-v2) .cab-play:disabled { opacity: .45; cursor: default; }
.store-v2:not(.about-v2) .cab-play:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* The side placard. It is a contained tile in its own row — the art used to be a
   background on the whole panel and the caption sat on top of it, unreadable. */
.store-v2:not(.about-v2) .cab-panel {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 2px;
  min-width: 0;
}
.store-v2:not(.about-v2) .cab-art {
  flex: 0 0 auto; width: 46px; height: 46px;
  border-radius: 8px; object-fit: cover;
  border: 1px solid var(--line);
  background: #0a0c0a;
}
.store-v2:not(.about-v2) .cab-slot {
  flex: 0 0 auto; width: 3px; height: 26px; border-radius: 2px;
  background: color-mix(in srgb, var(--machine-lit, #b5935a) 55%, transparent);
}
.store-v2:not(.about-v2) .cab-blurb {
  margin: 0; min-width: 0;
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 12.5px; line-height: 1.5; color: var(--muted);
  overflow-wrap: anywhere;
}
.store-v2:not(.about-v2) .cab-result {
  margin: 0; padding: 0 14px 12px;
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 13px; color: var(--gold); min-height: 1em;
}

/* ── The three games, as one row of tabs ──────────────────────────────────
   A row, never a stack: three cards down the page reads as three sections to
   scroll past, and only one of them is ever playable at a time. Below 380px
   the row scrolls sideways inside itself rather than wrapping, so the tabs
   stay on one line and the page never grows a horizontal scrollbar.          */
.store-v2 .arcade-tabs {
  display: flex;
  gap: 6px;
  margin: 6px 0 12px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  overflow-x: auto;
  scrollbar-width: none;
}
.store-v2 .arcade-tabs::-webkit-scrollbar { display: none; }

.store-v2 .arcade-tab {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  gap: 1px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.store-v2 .arcade-tab-name { font-size: 13.5px; }
.store-v2 .arcade-tab-hint {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; opacity: .7;
}
.store-v2 .arcade-tab:hover:not(:disabled) { color: var(--gold); }
.store-v2 .arcade-tab[aria-selected="true"] {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  color: var(--gold);
}
.store-v2 .arcade-tab:disabled { opacity: .38; cursor: not-allowed; }
.store-v2 .arcade-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* The card had no rhythm of its own: eyebrow, title, tabs, game and fine print all
   sat flush against each other. One gap, set once, rather than margins per element. */
.store-v2 .arcade-card { display: grid; gap: 14px; }
.store-v2 .arcade-card > * { margin: 0; }
.store-v2 .arcade-card .arcade-tabs { margin: 2px 0 0; }
.store-v2 .arcade-card .arcade-feedback:empty { display: none; }

.store-v2 .arcade-panel {
  min-width: 0;
  /* Held steady while the next game loads, so the page cannot collapse and snap back. */
  transition: opacity .18s ease;
}
.store-v2 .arcade-panel.is-loading { opacity: .35; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .store-v2 .arcade-panel { transition: none; } }

/* ── The cabinet's own keys ───────────────────────────────────────────────
   Real buttons, not "tap the picture". A long press on a canvas starts a text
   selection and pops the callout menu on a phone, which makes hold-to-climb
   unplayable; a button with touch-action and user-select off does not.       */
.store-v2 .cab-controls {
  display: flex;
  gap: 8px;
  padding: 10px 12px 0;
}
.store-v2 .cab-key {
  flex: 1 1 0;
  min-width: 0;
  padding: 12px 8px;
  border: 1px solid var(--machine-lit, var(--gold));
  border-radius: 10px;
  background: color-mix(in srgb, var(--machine-lit, #b5935a) 10%, transparent);
  color: var(--machine-lit, var(--gold));
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .09s ease, transform .09s ease;
}
.store-v2 .cab-key.is-hold { padding: 16px 8px; font-size: 13px; }
.store-v2 .cab-key:disabled { opacity: .32; cursor: default; }
.store-v2 .cab-key.is-down:not(:disabled) {
  background: var(--machine-lit, var(--gold));
  color: #0a0c0a;
  transform: translateY(1px);
}
.store-v2 .cab-key:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .store-v2 .cab-key { transition: none; } }

/* In a tab there is no offer to accept, so there is no summary to draw. */
.store-v2 .beg-card.is-bare { border: 0; background: transparent; border-radius: 0; }
.store-v2 .beg-card.is-bare .beg-body { padding: 0; }

/* ==========================================================================
   The Beggathon — a typing race, so an instrument rather than a cartoon.
   Order: the street, the three numbers on their OWN strip in page colours,
   the track, his line, the paper, the two keys, and the answer on its own
   sheet below. Nothing legible is ever painted over the canvas: on a phone the
   scene is 170px tall and in light mode the page's ink is near-black, which is
   how the numbers became unreadable. Every width is fluid and every child has
   min-width: 0, so no border runs out of its card at 320px.
   ========================================================================== */
.store-v2 .beg { display: flex; flex-direction: column; gap: 14px; min-width: 0; max-width: 100%; }

.store-v2 .beg-scene {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #0A0912;
  aspect-ratio: 16 / 7;
  min-height: 150px;
  min-width: 0;
  transition: border-color 200ms ease;
}
.store-v2 .beg-canvas { display: block; width: 100%; height: 100%; }

/* The numbers. Page tokens, tabular, large — readable in both themes, and never
   fighting the picture for the same pixels. */
.store-v2 .beg-meter {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 12px;
  padding: 12px 14px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  min-width: 0;
}
.store-v2 .beg-stat {
  display: grid; gap: 2px; min-width: 0;
  text-align: center;
}
.store-v2 .beg-stat b {
  font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
  font-weight: 600; font-size: clamp(26px, 7vw, 34px); line-height: 1;
  color: var(--fg); font-variant-numeric: tabular-nums;
}
.store-v2 .beg-stat span {
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
.store-v2 .beg-stat.is-low b { color: #d87a4f; }

.store-v2 .beg-track {
  grid-column: 1 / -1;
  position: relative;
  height: 8px; margin: 6px 10px 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--fg) 10%, transparent);
  overflow: visible;
}
.store-v2 .beg-track i {
  display: block; height: 100%; width: 0; border-radius: 4px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright, var(--gold)));
  transition: width 120ms linear;
}
.store-v2 .beg-track em {
  position: absolute; top: 50%; left: 0;
  transform: translate(-50%, -50%);
  font-style: normal; font-size: 16px; line-height: 1;
  color: var(--gold-bright, var(--gold));
  transition: left 120ms linear;
  pointer-events: none;
}
.store-v2 .beg-track::after {
  /* the postbox, at the far end */
  content: ""; position: absolute; right: -4px; top: 50%;
  width: 8px; height: 16px; transform: translateY(-50%);
  border-radius: 3px 3px 1px 1px; background: #8C2F24;
}
.store-v2 .beg-track.is-there i { background: var(--gold-bright, var(--gold)); }
.store-v2 .beg-track-note {
  grid-column: 1 / -1; margin: 0;
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 12px; letter-spacing: .04em; color: var(--muted);
  text-align: center;
}
.store-v2 .beg-track-note [data-reach] { color: var(--fg); }

.store-v2 .beg-react {
  margin: 0;
  min-height: 1.6em;
  text-align: center;
  font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(17px, 4.6vw, 20px); font-style: italic; font-weight: 500; line-height: 1.4;
  color: var(--gold);
  text-wrap: balance;
  overflow-wrap: anywhere;
}

/* He reacts in the frame, too: a lift when you are quick, a dimming when you
   stall, and a flush of red when you have said something you should not have. */
.store-v2 .beg-scene.is-hot { border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.store-v2 .beg-scene.is-stalled ~ .beg-react { color: var(--muted); }
.store-v2 .beg-scene.is-warned { border-color: #b4653f; }
.store-v2 .beg-scene.is-warned ~ .beg-react { color: #d87a4f; }

.store-v2 .beg-label, .store-v2 .beg-note, .store-v2 .beg-fine, .store-v2 .beg-rules {
  margin: 0;
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 13px; line-height: 1.55;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.store-v2 .beg-fine { font-size: 12px; }
.store-v2 .beg-rules a, .store-v2 .beg-fine a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }

.store-v2 .beg-input {
  width: 100%; min-width: 0; resize: vertical;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  color: var(--fg);
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 16px; line-height: 1.6;          /* 16px: iOS does not zoom the page */
}
.store-v2 .beg-input::placeholder { color: var(--muted); opacity: .8; }
.store-v2 .beg-input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.store-v2 .beg-input:disabled { opacity: .6; }

.store-v2 .beg-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 0;
}

.store-v2 .beg-start, .store-v2 .beg-post {
  min-height: 46px; padding: 10px 18px;
  border-radius: 999px;
  font-family: 'Josefin Sans', Futura, Avenir, sans-serif;
  font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, opacity 150ms ease;
  min-width: 0; white-space: nowrap;
}
.store-v2 .beg-start {
  border: 1px solid var(--gold);
  background: transparent; color: var(--gold);
}
.store-v2 .beg-start:hover:not(:disabled) { background: var(--gold); color: var(--gold-ink, var(--bg)); }
.store-v2 .beg-start:disabled { opacity: .45; cursor: default; }
.store-v2 .beg-start:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Post it is the same control, lit, and only reachable once the letter is at
   the slot — so the disabled state is doing real work and has to look deliberate. */
.store-v2 .beg-post {
  border: 1px solid var(--gold);
  background: var(--gold);
  color: var(--gold-ink, #141210);
}
.store-v2 .beg-post:hover:not(:disabled) { background: var(--gold-bright, var(--gold)); }
.store-v2 .beg-post:disabled { opacity: .3; cursor: default; }
.store-v2 .beg-post:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* The answer: his reply on paper, or what is left once it has burnt. Its own
   sheet under the street, full width, in its own colours. */
.store-v2 .beg-answer {
  padding: 18px;
  border-radius: 10px;
  min-width: 0;
  animation: beg-unfold .45s cubic-bezier(.2,.8,.2,1) both;
}
.store-v2 .beg-answer[hidden] { display: none; }
.store-v2 .beg-answer.is-paper {
  background: #F4EEDF; color: #1E1810;
  box-shadow: 0 10px 34px rgba(0,0,0,.35), 0 0 0 1px rgba(181,147,90,.55);
}
.store-v2 .beg-answer.is-ash {
  background: #201B16; color: #E4D9C0;
  box-shadow: 0 10px 34px rgba(0,0,0,.45), 0 0 0 1px rgba(180,101,63,.55);
}
@keyframes beg-unfold {
  from { transform: scaleY(.15) translateY(-14%); opacity: 0; }
  to { transform: none; opacity: 1; }
}
/* The panel is on its own paper, so the type inside it follows the paper. */
.store-v2 .beg-answer .beg-verdict,
.store-v2 .beg-answer .beg-head { color: inherit; }
.store-v2 .beg-answer .beg-eyebrow { color: #7a6030; }
.store-v2 .beg-answer.is-ash .beg-eyebrow { color: #d9bd7b; }
.store-v2 .beg-answer .beg-axis-name,
.store-v2 .beg-answer .beg-axis-note,
.store-v2 .beg-answer .beg-axis-weight,
.store-v2 .beg-answer .beg-tally,
.store-v2 .beg-answer .beg-fine,
.store-v2 .beg-answer .beg-refuse-why { color: color-mix(in srgb, currentColor 78%, transparent); }
.store-v2 .beg-answer .beg-axis-score { color: inherit; }
.store-v2 .beg-answer .beg-axis-bar { background: color-mix(in srgb, currentColor 12%, transparent); border-color: transparent; }
.store-v2 .beg-answer .beg-axis-bar i { background: #7a6030; }
.store-v2 .beg-answer.is-ash .beg-axis-bar i { background: #d9bd7b; }
.store-v2 .beg-answer .beg-code code { color: #7a6030; border-color: #7a6030; font-size: clamp(14px, 4.2vw, 17px); }
.store-v2 .beg-answer .beg-tally b { color: inherit; font-weight: 600; }
.store-v2 .beg-answer .beg-refused { border-left-color: #b4653f; background: transparent; padding-left: 12px; }
@media (prefers-reduced-motion: reduce) {
  .store-v2 .beg-answer { animation: none; }
  .store-v2 .beg-track i, .store-v2 .beg-track em { transition: none; }
}

@media (max-width: 480px) {
  .store-v2 .beg-scene { aspect-ratio: 16 / 9; }
  .store-v2 .beg-meter { padding: 10px 10px 10px; gap: 6px 8px; }
  .store-v2 .beg-answer { padding: 14px; }
}

/* ── The cart panel it now lives in ─────────────────────────────────────── */
.store-v2 .beg-host { margin: 18px 0 0; min-width: 0; }

.store-v2 .beg-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface, #14120c);
  overflow: hidden;
}
.store-v2 .beg-summary {
  display: grid; gap: 3px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}
.store-v2 .beg-summary::-webkit-details-marker { display: none; }
.store-v2 .beg-summary::marker { content: ""; }
.store-v2 .beg-summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

.store-v2 .beg-eyebrow {
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold);
}
.store-v2 .beg-head {
  margin: 0;
  font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 20px; font-weight: 500; line-height: 1.25;
  color: var(--fg);
}
.store-v2 .beg-card[open] .beg-summary { border-bottom: 1px solid var(--line); }
.store-v2 .beg-body { display: grid; gap: 14px; padding: 16px; min-width: 0; }

.store-v2 .beg-verdict {
  margin: 0;
  font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 22px; font-style: italic; font-weight: 500;
  color: var(--gold-bright, var(--gold));
}

/* The man's arithmetic, shown so it can be argued with. */
.store-v2 .beg-axes {
  margin: 14px 0 0; padding: 0; list-style: none;
  display: grid; gap: 14px;
}
.store-v2 .beg-axis {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name score" "bar bar" "note weight";
  gap: 7px 12px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
}
.store-v2 .beg-axis:last-child { padding-bottom: 0; border-bottom: 0; }
.store-v2 .beg-axis-name {
  grid-area: name;
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 13.5px; color: var(--fg);
}
.store-v2 .beg-axis-score {
  grid-area: score;
  font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 20px; color: var(--gold);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.store-v2 .beg-axis-bar {
  grid-area: bar;
  display: block; height: 5px; border-radius: 3px;
  background: color-mix(in srgb, var(--fg) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
  overflow: hidden;
}
.store-v2 .beg-axis-bar i {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright, var(--gold)));
}
.store-v2 .beg-axis-note {
  grid-area: note;
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 12px; color: var(--muted); overflow-wrap: anywhere;
}
.store-v2 .beg-axis-weight {
  grid-area: weight;
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 11px; letter-spacing: .08em; color: var(--muted); white-space: nowrap;
}
.store-v2 .beg-tally {
  margin: 4px 0 0;
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 13px; line-height: 1.55; color: var(--muted);
}
.store-v2 .beg-tally b { color: var(--gold); font-weight: 400; }

.store-v2 .beg-code { margin: 0; }
.store-v2 .beg-code code {
  display: inline-block; padding: 8px 14px; max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere;
  border: 1px dashed var(--gold); border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px; letter-spacing: .08em; color: var(--gold);
}
.store-v2 .beg-won { display: grid; gap: 8px; min-width: 0; }
.store-v2 .beg-refused {
  display: grid; gap: 6px;
  padding: 12px 14px;
  border-left: 2px solid #b4653f;
  background: color-mix(in srgb, #b4653f 8%, transparent);
  border-radius: 0 8px 8px 0;
}
.store-v2 .beg-refuse-why {
  margin: 0;
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 13.5px; line-height: 1.55; color: var(--fg);
}

html.dark-theme .store-v2 .beg-input { border-color: rgba(212, 182, 132, 0.34); }

@media (max-width: 560px) {
    .store-v2 .beg-body { padding: 14px; }
  .store-v2 .beg-head { font-size: 18px; }
}

/* ==========================================================================
   The discount-code field and the line it produces, in the cart.
   ========================================================================== */
.store-v2 .co-reward { display: grid; gap: 6px; margin: 14px 0 0; min-width: 0; }
.store-v2 .co-reward-row { display: flex; gap: 8px; align-items: stretch; min-width: 0; }
.store-v2 .co-reward-row .co-input {
  flex: 1 1 auto; min-width: 0;
  text-transform: uppercase; letter-spacing: .06em;
}
.store-v2 .co-reward-btn {
  flex: 0 0 auto;
  padding: 0 18px;
  border: 1px solid var(--gold); border-radius: 10px;
  background: transparent; color: var(--gold);
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer;
}
.store-v2 .co-reward-btn:hover:not(:disabled) { background: var(--gold); color: var(--bg); }
.store-v2 .co-reward-btn:disabled { opacity: .45; cursor: default; }
.store-v2 .co-reward-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.store-v2 .co-reward-note {
  margin: 0;
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 12px; line-height: 1.5; color: var(--muted);
}
.store-v2 .co-money-row.is-discount { color: var(--gold); }
.store-v2 .co-money-row.is-discount[hidden] { display: none; }
/* The paste penalty. Shown, never hidden — nobody is quietly charged more. */
.store-v2 .co-money-row.is-surcharge { color: #b4653f; }
.store-v2 .co-money-row.is-surcharge[hidden] { display: none; }

.store-v2 .beg-penalty {
  margin: 0; padding: 12px 14px;
  border-left: 3px solid #b4653f;
  background: color-mix(in srgb, #b4653f 10%, transparent);
  border-radius: 0 8px 8px 0;
  font-family: 'Josefin_Light', 'Josefin Sans', Arial, sans-serif;
  font-size: 13.5px; line-height: 1.55; color: var(--fg);
}
.store-v2 .beg-penalty b { color: #d87a4f; font-weight: 400; }
.store-v2 .beg-refused.is-charged { border-left-color: #d87a4f; }