/* Mandugundu Seetharamayya Fireworks — catalog site
   Design tokens: a deep night-sky background (the thing fireworks are actually seen against) with
   marigold gold as the primary accent (the color of the festival itself, not a generic brand color)
   and a single crimson spark color used sparingly for price tags and emphasis. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --bg: #0b0e1a;
  --bg-elev: #141a2e;
  --bg-elev-2: #1b2340;
  --gold: #f4a91b;
  --gold-dim: #c98a15;
  --crimson: #e23b4e;
  --teal: #2dd4bf;
  --ink: #f5f1e8;
  --muted: #a9a4b8;
  --hairline: rgba(245, 241, 232, 0.12);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  background-image:
    radial-gradient(circle at 15% 8%, rgba(244, 169, 27, 0.10), transparent 40%),
    radial-gradient(circle at 85% 18%, rgba(226, 59, 78, 0.10), transparent 38%),
    radial-gradient(circle at 50% 95%, rgba(45, 212, 191, 0.06), transparent 45%);
  background-attachment: fixed;
}

a { color: inherit; text-decoration: none; }

/* ---------- spark field ----------
   A few small shells quietly going off in the background - a burst of color that expands and fades,
   each on its own unsynced timer, rather than literal fireworks competing with the page. Deliberately
   sparse (three) and deliberately quiet (small, soft-edged, mostly off-screen of the content columns).
   Performance: every element only ever animates opacity and transform (translate/scale), both
   compositor-only properties - no layout or paint cost, no JS animation loop, no canvas. Each burst's
   own long animation-duration doubles as its "rest" period: the pop happens in the first ~40% of the
   timeline and the rest just holds invisible, so three differing durations keep them from ever
   lining up. Reduced-motion users get this switched off entirely. */

.spark-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.burst {
  position: absolute;
  width: 0;
  height: 0;
  animation: burst-cycle 6s linear infinite;
}

.burst .flash {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  margin: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 169, 27, 0.95), rgba(244, 169, 27, 0) 70%);
  opacity: 0;
  animation-name: burst-flash;
  animation-duration: inherit;
  animation-delay: inherit;
  animation-iteration-count: inherit;
  animation-timing-function: linear;
  will-change: opacity, transform;
}

.burst .particle {
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 5px;
  margin: -2.5px;
  border-radius: 50%;
  box-shadow: 0 0 8px 2px currentColor;
  opacity: 0;
  animation-name: burst-particle;
  animation-duration: inherit;
  animation-delay: inherit;
  animation-iteration-count: inherit;
  animation-timing-function: cubic-bezier(0.1, 0.7, 0.3, 1);
  will-change: opacity, transform;
}

.burst .particle.p-gold    { background: var(--gold);    color: var(--gold); }
.burst .particle.p-crimson { background: var(--crimson); color: var(--crimson); }
.burst .particle.p-teal    { background: var(--teal);    color: var(--teal); }

/* burst-cycle exists only so every child can inherit one shared animation-duration/delay from its
   .burst parent via the explicit "inherit" longhands above - it has no visible effect of its own. */
@keyframes burst-cycle {
  100% { opacity: 1; }
}

@keyframes burst-flash {
  0%   { opacity: 0; transform: scale(0.2); }
  3%   { opacity: 0.85; transform: scale(0.7); }
  15%  { opacity: 0; transform: scale(2.4); }
  100% { opacity: 0; transform: scale(2.4); }
}

@keyframes burst-particle {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.4); }
  4%   { opacity: 1; transform: translate(0, 0) scale(0.9); }
  26%  { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(1.15); }
  46%  { opacity: 0; transform: translate(calc(var(--dx) * 1.3), calc(var(--dy) * 1.3)) scale(0.5); }
  100% { opacity: 0; transform: translate(calc(var(--dx) * 1.3), calc(var(--dy) * 1.3)) scale(0.5); }
}

@media (prefers-reduced-motion: reduce) {
  .burst .flash,
  .burst .particle {
    animation: none;
    opacity: 0;
  }
}

.wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

/* ---------- header ---------- */

header.site {
  padding: 28px 0 18px;
  border-bottom: 1px solid var(--hairline);
}

.brand-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.brand-name {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(22px, 4vw, 30px);
  letter-spacing: 0.2px;
  color: var(--ink);
}

.brand-name .te {
  display: block;
  font-size: 0.62em;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 3px;
}

.estd {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 5px 12px;
}

/* ---------- hero (index only) ---------- */

.hero {
  padding: 56px 0 40px;
  text-align: center;
}

.hero h1 {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: clamp(30px, 6vw, 48px);
  line-height: 1.12;
  margin: 0 0 14px;
}

.hero h1 .accent { color: var(--gold); }

.hero p.tag {
  color: var(--muted);
  font-size: 16px;
  max-width: 480px;
  margin: 0 auto;
}

/* ---------- pack grid ---------- */

.pack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  padding: 8px 0 60px;
}

.pack-card {
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.pack-card:hover {
  transform: translateY(-3px);
  border-color: rgba(244, 169, 27, 0.4);
}

.pack-card .thumb {
  /* The 12/16-type packs' photos are close-up spreads, so a slightly tighter frame fills nicely. */
  aspect-ratio: 16 / 9;
  background: var(--bg-elev-2);
  overflow: hidden;
  position: relative;
}

.pack-card .thumb-full {
  /* The 22/27-type packs are shot as a much wider spread, and nothing in that photo should be
     cropped away - a wider frame matches that shape and keeps the whole spread visible. */
  aspect-ratio: 20 / 7;
}

.pack-card .thumb img {
  width: 100%;
  height: 100%;
  /* The smaller packs' photos (12/16 types) are close-up enough that filling the frame reads well.
     The bigger packs (22/27 types) are shot as a much wider spread - filling the frame the same way
     cropped off a lot of the items, so those use .thumb-full instead to show the whole photo. */
  object-fit: cover;
  display: block;
}

.pack-card .thumb-full img {
  /* Shows the complete photo rather than cropping it to fill the frame - see note above. */
  object-fit: contain;
}

.pack-card .body {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.pack-card .count {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal);
  font-weight: 600;
}

.pack-card h2 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 21px;
  margin: 0;
}

.pack-card .price-row {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.price {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--gold);
}

.price small {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--muted);
}

.view-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 7px 14px;
}

.pack-card:hover .view-link {
  border-color: var(--gold);
  color: var(--gold);
}

/* ---------- build-your-own callout (index only) ---------- */

/* A clearly separate section below the 4 packs, not a line tucked into the hero - the packs and the
   full price list are two different ways to order, so they get two distinct visual blocks rather than
   competing for attention at the top of the page. */
.build-own {
  padding: 10px 0 60px;
}
.build-own-card {
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 36px 28px;
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}
.build-own-card .count {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal);
  font-weight: 600;
}
.build-own-card h2 {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: clamp(22px, 4vw, 28px);
  margin: 8px 0 10px;
}
.build-own-card p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 22px;
}

/* ---------- pack detail page ---------- */

/* Full-bleed banner using the pack's own poster at the top of its page - the poster already carries the
   shop's name and year, so this stands in for the plain text header on a detail page instead of
   repeating the brand name twice. Cropped to its top portion (object-position: top) since that's where
   the name/year sit on every poster; the gradient underneath keeps the back-link readable over whatever
   busy artwork is there, whatever the poster's own colors happen to be. */
/* Sticky, so the shop's own banner - not a plain nav bar - is what always stays pinned at the top of
   the page as the item ledger or price list scrolls underneath it. The "back" link now lives in normal
   flow just below it (see .detail-hero / .page-banner + .wrap .back-link), not inside this bar. */
.page-banner {
  position: sticky;
  top: 0;
  z-index: 30;
  width: 100%;
  /* Matches the proportion of each poster that's just its festive brand strip (roughly the top fifth) -
     an aspect-ratio keeps that same slice framed at any screen width, instead of a fixed pixel height
     that shows more or less of the poster depending on how wide the screen is. */
  aspect-ratio: 1094 / 158;
  overflow: hidden;
  border-bottom: 1px solid var(--hairline);
}
.page-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Every poster carries its own brand lockup in a festive strip near the top (a different crop per
     poster, since the artwork isn't uniform) - pin to the top so that strip is what shows rather than
     an arbitrary vertical slice. */
  object-position: center top;
  display: block;
}
.page-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 14, 26, 0.12) 0%, rgba(11, 14, 26, 0) 40%, rgba(11, 14, 26, 0.5) 100%);
}

/* The one bar directly under the (sticky) banner carries both navigation jobs that used to compete for
   space elsewhere: the "back" link (when the page has one) on the left, the language toggle on the
   right - one quiet strip instead of a back-link in the page body plus a toggle floated on the banner
   image. In normal flow, so it scrolls away with the page rather than staying pinned. */
.lang-bar {
  width: 100%;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--hairline);
}
.lang-bar-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 9px 20px;
}
.lang-bar-inner .back-link {
  margin: 0 auto 0 0;
}
.lang-toggle {
  display: inline-flex;
  gap: 3px;
  background: rgba(245, 241, 232, 0.06);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 3px;
}
.lang-btn {
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  background: none;
  border: none;
}
.lang-btn.active { background: var(--gold); color: #241503; }

.detail-hero {
  padding: 28px 0 10px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--muted);
}
.back-link:hover { color: var(--gold); }

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  padding: 24px 0 50px;
}

@media (min-width: 760px) {
  .detail-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

.detail-media {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.detail-image {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--bg-elev);
  /* The pack photo is the first thing a visitor sees for this pack, and these shots are laid out
     wide and short - shown at their natural height they read as a thin strip, not a centerpiece.
     A taller frame gives the photo real presence without cropping any items out of view - "contain"
     below shows the whole photo, letterboxed on the card's own background if there's space left over. */
  aspect-ratio: 3 / 2;
}
.detail-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* The price-list graphic behind this button isn't loaded until it's clicked - see pack-gallery.js. */
.more-photos-btn {
  width: 100%;
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 13px;
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.more-photos-btn:hover,
.more-photos-btn.open { border-color: var(--gold); color: var(--gold); }

.gallery-extra {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--bg-elev);
}
.gallery-extra img { width: 100%; display: block; }
.gallery-extra.hidden { display: none; }

.detail-info .count {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal);
  font-weight: 600;
}

.detail-info h1 {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: clamp(26px, 4vw, 34px);
  margin: 8px 0 4px;
}

.detail-price {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 30px;
  color: var(--gold);
  margin: 10px 0 22px;
}
.detail-price small {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--muted);
}

.item-ledger {
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 6px 20px;
}

.item-ledger .row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 14.5px;
}
.item-ledger .row:last-child { border-bottom: none; }

.item-ledger .row .name { color: var(--ink); }
.item-ledger .row .qty {
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.order-cta {
  margin-top: 24px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* .btn is also used on <button> elements (not just the <a> links it was first written for), which
   carry their own browser chrome (white background, default border, system font) unless explicitly
   cleared - without this reset a <button class="btn btn-outline"> renders as an opaque white pill with
   near-invisible light-on-white text instead of picking up this stylesheet's colors. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14.5px;
  font-family: 'Inter', sans-serif;
  padding: 12px 20px;
  border-radius: 999px;
  background: none;
  border: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.btn-gold {
  background: var(--gold);
  color: #241503;
}
.btn-gold:hover { background: #ffb82e; }

.btn-outline {
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--ink);
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- order estimator ---------- */

.estimate-intro {
  padding: 24px 0 4px;
}
.estimate-intro h1 {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: clamp(24px, 4.5vw, 32px);
  margin: 0 0 8px;
}
.estimate-intro p {
  color: var(--muted);
  font-size: 15px;
  max-width: 540px;
  line-height: 1.5;
  margin: 0;
}

.search-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 18px 0 6px;
}
.search-field {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}
.search-field input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  padding: 11px 26px 11px 2px;
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
}
.search-field input::placeholder { color: var(--muted); }
.search-field input:focus { outline: none; border-bottom-color: var(--gold); }

.search-clear {
  position: absolute;
  right: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elev-2);
  border-radius: 999px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
}
.search-clear:hover { color: var(--gold); }

.toggle-all {
  background: none;
  border: none;
  padding: 10px 2px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.toggle-all:hover { color: var(--gold); }

/* Lets a customer abandon their picks while still browsing items, not only from the cart screen. Only
   shown once there's something to clear. */
.clear-items {
  background: none;
  border: none;
  padding: 10px 2px;
  color: var(--crimson);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0.85;
}
.clear-items:hover { opacity: 1; }

.section-list {
  padding: 10px 0 110px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.section-block {
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  overflow: hidden;
}
.section-block[open] { border-color: rgba(244, 169, 27, 0.35); }

.section-block summary {
  list-style: none;
  cursor: pointer;
  padding: 15px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.section-block summary::-webkit-details-marker { display: none; }

.section-block summary .s-title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 17px;
}
.section-block summary .s-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}
.section-block summary .s-count {
  background: var(--bg-elev-2);
  border-radius: 999px;
  padding: 3px 10px;
}
.section-block summary .s-cart-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--gold);
  color: #241503;
  border-radius: 999px;
  padding: 3px 10px 3px 8px;
  font-weight: 700;
}
.section-block summary .s-cart-badge svg { display: block; }
.section-block summary .chev {
  transition: transform 0.18s ease;
  color: var(--muted);
}
.section-block[open] summary .chev { transform: rotate(180deg); }

.section-items {
  border-top: 1px solid var(--hairline);
}

.item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hairline);
}
.item-row:last-child { border-bottom: none; }

.item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.item-code {
  font-size: 11px;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.item-name {
  font-size: 14.5px;
  color: var(--ink);
}
.item-row.in-cart .item-name { color: var(--gold); }

.item-price {
  font-size: 13.5px;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  min-width: 72px;
  text-align: right;
}
.item-price b { color: var(--ink); font-weight: 600; }

.qty-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.qty-btn {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elev-2);
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
}
.qty-btn:hover { background: rgba(244, 169, 27, 0.18); color: var(--gold); }
.qty-btn:disabled { opacity: 0.3; background: transparent; }
.qty-value {
  min-width: 28px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.unavailable-pill {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: rgba(169, 164, 184, 0.14);
  border-radius: 999px;
  padding: 6px 12px;
  white-space: nowrap;
  flex-shrink: 0;
}
.item-row.unavailable { opacity: 0.5; }

.order-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: var(--bg-elev);
  border-top: 1px solid var(--hairline);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
}
.order-bar-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.order-bar-info {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.order-bar-info .count {
  font-size: 12px;
  color: var(--muted);
}
.order-bar-info .total {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--gold);
}

/* Netlify's own "Powered by Netlify" badge (if enabled on the site) floats fixed in the bottom-right
   corner with a very high z-index of its own - not something this stylesheet can push behind, and
   squeezing this bar's main button in next to it just makes the button look like an afterthought.
   On narrow screens, where the bar runs edge to edge and would otherwise butt right up against that
   corner, lift the whole bar clear of it instead - a visible gap reads as intentional, not a squeeze. */
@media (max-width: 640px) {
  .order-bar { bottom: 52px; }
}

.cart-view { padding: 24px 0 110px; }
.cart-view h1 {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: clamp(22px, 4vw, 28px);
  margin: 0 0 6px;
}
.cart-view .tag {
  color: var(--muted);
  font-size: 14.5px;
  max-width: 520px;
  margin: 0 0 20px;
  line-height: 1.5;
}

.cart-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  background: var(--bg-elev);
  border: 1px dashed var(--hairline);
  border-radius: 14px;
}

.cart-list {
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  overflow: hidden;
}

.cart-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--hairline);
}
.cart-row:last-child { border-bottom: none; }
.cart-row .item-main { flex: 1; }
.cart-row .line-total {
  min-width: 66px;
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cart-row .remove-btn {
  color: var(--muted);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.cart-row .remove-btn:hover { color: var(--crimson); }

.cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 18px 2px 6px;
  font-family: 'Fraunces', serif;
}
.cart-total-row .label { color: var(--muted); font-size: 15px; }
.cart-total-row .value { font-weight: 700; font-size: 26px; color: var(--gold); }

.cart-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.hidden { display: none !important; }

/* ---------- footer ---------- */

footer.site {
  border-top: 1px solid var(--hairline);
  padding: 34px 0 48px;
  color: var(--muted);
  font-size: 14px;
}

footer.site .addr-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  margin-bottom: 18px;
}

@media (min-width: 640px) {
  footer.site .addr-grid { grid-template-columns: 1fr 1fr; }
}

footer.site h3 {
  font-family: 'Fraunces', serif;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Live view-count badge: a quiet line under the address block, not a loud stat. Starts hidden and is
   only revealed once real numbers come back from the database - never shows a "0" placeholder, which
   would look broken rather than just quiet. The dot's pulse is opacity-only (compositor-only, same
   restraint as the spark field) and switches off under reduced motion. */
.view-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  font-size: 12.5px;
  color: var(--muted);
  /* This is the very last thing on the page, and Netlify's own "Powered by Netlify" badge sits fixed
     in the bottom-right corner of the viewport - with no clearance, that badge covers this line once
     someone scrolls all the way down. The margin below gives it room to sit above the badge instead. */
  margin-bottom: 44px;
}
.view-stats .vs-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.view-stats .vs-sep { opacity: 0.5; }
.view-stats .vs-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 5px 1px var(--teal);
  animation: vs-pulse 2.2s ease-in-out infinite;
}
@keyframes vs-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .view-stats .vs-dot { animation: none; opacity: 0.8; }
}

.phones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.phones a {
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.phones a:hover { border-color: var(--gold); color: var(--gold); }