/* ============================================================
   P. P. Jewellers — style.css
   Mobile-first, responsive. Theme: black + gold like reference.
   ============================================================ */

:root {
  --gold: #E8B923;
  --gold-bright: #F6D34A;
  --gold-dark: #C9931B;
  --gold-grad: linear-gradient(135deg, #F6D34A 0%, #E8B923 45%, #C9931B 100%);
  --bg: #f3f1ec;
  --bg-dark: #0d0d0d;
  --card: #ffffff;
  --ink: #1b1b1b;
  --muted: #77716a;
  --line: #e9e4da;
  --green: #1e9e4a;
  --red: #d43a2f;
  --shadow: 0 2px 10px rgba(0, 0, 0, .07);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, .18);
  --nav-h: 64px;
  --radius: 14px;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
/* The fixed offers ribbon is styled with high specificity; make sure a
   plain [hidden] (Home-only ribbon) still removes it completely. */
.offers-ribbon[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  /* Reserve room for the fixed bottom nav + always-on top header/social bar:
     the header block scrolls away never, so content must start below it. */
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 46px);
  padding-top: var(--fixed-top-h, 0px);
}

[hidden] { display: none !important; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ================= HEADER ================= */
/* The header and social bar are pinned to the top of every page: they
   stay fixed while the page scrolls, and the body compensates with
   padding-top (see body) so nothing ever slides underneath them.
   `position: fixed` (not sticky) because their parent sits at the very
   top of the document and never scrolls themselves. */
.app-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  background: var(--bg-dark);
  min-height: 132px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.brand { display: flex; flex-direction: column; align-items: center; gap: 8px; }

.brand-logo {
  width: clamp(72px, 18vw, 92px);
  aspect-ratio: 1;
  flex: none;
  overflow: hidden;
  border-radius: 12px;
  background: #080704;
  box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(232, 185, 35, .4);
}

.brand-logo img { width: 100%; height: 100%; object-fit: contain; object-position: center; }

.brand-name {
  color: #fff;
  font-size: clamp(1.05rem, 4.8vw, 1.35rem);
  font-weight: 700;
  letter-spacing: clamp(.6px, .5vw, 1.5px);
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
}

/* ================= SOCIAL BAR ================= */
.social-bar {
  position: fixed;
  top: auto; /* JS pins it right below the header */
  left: 0; right: 0;
  z-index: 40;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #fff;
  padding: 10px 8px;
  box-shadow: var(--shadow);
}

.social { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; transition: transform .15s ease; }
.social:hover { transform: translateY(-2px); }
.social svg { width: 27px; height: 27px; }
.social.instagram { color: #d6249f; }
.social.instagram svg { color: #d6249f; }
.social.call { filter: none; }

/* ================= OFFERS RIBBON ================= */
/* The ribbon is part of the fixed top stack: pinned right below the
   header + social bar (its top is set by js/fixed-top.js from the
   measured header pair), so it stays visible while scrolling too. */
.offers-ribbon {
  position: fixed;
  left: 0; right: 0;
  top: var(--header-pair-h, 196px); /* js/fixed-top.js keeps this exact */
  z-index: 39;
  background: linear-gradient(90deg, #7e0e17, #a3121f, #7e0e17);
  color: #fff;
  font-weight: 700;
  letter-spacing: .6px;
  padding: 11px 0;
  overflow: hidden;
  white-space: nowrap;
}

.ribbon-track { display: inline-block; padding-left: 100%; animation: ribbon-scroll 18s linear infinite; }
@keyframes ribbon-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* ================= HOME ADVERTISEMENTS ================= */
.home-ad-list { display: grid; gap: 12px; max-width: 980px; margin: 12px auto 0; padding: 0 14px; }
.home-ad { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.home-ad-image img { display: block; width: 100%; max-height: 360px; object-fit: cover; }

/* Home banner carousel */
.banner-carousel { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.banner-track { display: flex; transition: transform .45s ease; }
/* Every slide shares one height, and the image is letterboxed inside it
   (object-fit: contain, centered) — nothing is cropped, cut, or pushed
   out of frame, whatever the picture's aspect ratio. */
.banner-slide { flex: 0 0 100%; min-width: 100%; height: clamp(220px, 40vw, 380px); background: #fff; cursor: zoom-in; }
.banner-slide img {
  display: block; width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  user-select: none; -webkit-user-drag: none;
}
.banner-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: rgba(17, 17, 17, .45); color: #fff;
  font-size: 1.4rem; line-height: 1; display: grid; place-items: center;
  padding: 0 0 3px; cursor: pointer;
}
.banner-arrow.prev { left: 10px; }
.banner-arrow.next { right: 10px; }
.banner-arrow:active { transform: translateY(-50%) scale(.92); }
.banner-counter {
  position: absolute; right: 12px; bottom: 10px;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(17, 17, 17, .5); color: #fff;
  font-size: .78rem; font-weight: 600; letter-spacing: .4px;
}
@media (prefers-reduced-motion: reduce) { .banner-track { transition: none; } }

/* Fullscreen popup advertisement (opens once per visit on Home) */
.popup-ad-overlay { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 18px; }
.popup-ad-overlay[hidden] { display: none; }
.popup-ad-backdrop { position: absolute; inset: 0; background: rgba(12, 10, 6, .84); }
body.popup-ad-open { overflow: hidden; }
.popup-ad-card { position: relative; margin: 0; max-width: min(94vw, 900px); animation: popup-ad-in .25s ease; }
@keyframes popup-ad-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.popup-ad-card img {
  display: block; max-width: 100%; max-height: 80vh; width: auto; height: auto;
  object-fit: contain; border-radius: 14px; background: #fff;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .5);
}
.popup-ad-close {
  position: absolute; top: -14px; right: -14px; width: 38px; height: 38px;
  border: 0; border-radius: 50%; background: #111; color: #fff;
  font-size: 1.25rem; line-height: 1; display: grid; place-items: center;
  padding: 0 0 2px; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
}
.popup-ad-close:active { transform: scale(.92); }
@media (prefers-reduced-motion: reduce) { .popup-ad-card { animation: none; } }

/* Popup notification: an admin message sent to registered users.
   Sits above everything (z-index 95), never covers the registration
   gate (the gate is z-index higher), and reads well on any screen. */
.user-message-overlay { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 18px; }
.user-message-overlay[hidden] { display: none; }
.user-message-backdrop { position: absolute; inset: 0; background: rgba(12, 10, 6, .8); }
body.user-message-open { overflow: hidden; }
.user-message-card {
  position: relative; width: min(100%, 420px); max-height: min(88vh, 640px);
  overflow-y: auto; padding: 20px; border-radius: 16px; background: #fffdf6;
  border: 1px solid #e7dfc9; box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
  animation: popup-ad-in .25s ease;
}
@media (prefers-reduced-motion: reduce) { .user-message-card { animation: none; } }
.user-message-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.user-message-bell { font-size: 1.3rem; }
.user-message-head h2 { flex: 1; font-size: 1.08rem; margin: 0; }
.user-message-close {
  flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: #f0e9d8; color: var(--ink); font-size: 1.2rem; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
}
.user-message-body { font-size: .95rem; line-height: 1.55; color: var(--ink); }
.user-message-body p.msg-text { margin: 0 0 8px; white-space: pre-wrap; font-weight: 600; }
.user-message-body img.msg-image { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid #eee; background: #fff; }
.user-message-body a.msg-video { display: block; word-break: break-all; color: #795b08; font-weight: 700; }
.user-message-actions { display: flex; justify-content: flex-end; margin-top: 16px; }
.user-message-actions .btn { min-width: 110px; }
@media (max-width: 560px) {
  .user-message-overlay { padding: 12px; }
  .user-message-card { padding: 16px; }
}
.home-ad-video { padding: 15px 18px; background: linear-gradient(120deg, #fffdf5, #fff); }
.home-ad-video a { color: #795b08; font-weight: 700; text-decoration: none; }
.home-ad-video a:hover { text-decoration: underline; }
.home-ad-text { padding: 16px 18px; background: linear-gradient(120deg, #fff8df, #fff); }
.home-ad-text h2 { color: #6a4e08; font-size: 1.08rem; margin-bottom: 6px; }
.home-ad-text p { color: var(--ink); line-height: 1.5; white-space: pre-wrap; }

/* ================= MAIN / VIEWS ================= */
.app-main { padding: 14px 14px 22px; max-width: 980px; margin: 0 auto; }

.view { display: none; animation: fade-in .28s ease; }
.view.active { display: block; }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ================= RATE CARDS ================= */
.rates-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (min-width: 640px) { .rates-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }

.rate-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--line);
}

.rate-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.rate-name { font-size: .92rem; color: var(--ink); font-weight: 600; }
.rate-sub { font-size: .78rem; color: var(--muted); font-weight: 500; }
.rate-icon { width: 46px; height: 46px; flex: none; border-radius: 10px; background: #fdf7e3; display: grid; place-items: center; overflow: hidden; }
.rate-icon img { width: 38px; height: 38px; object-fit: contain; }

.rate-price { font-size: 1.55rem; font-weight: 800; letter-spacing: .3px; color: var(--ink); }
.rate-price .rupee { color: var(--ink); font-weight: 700; }
.rate-price .paise { color: #b9b2a6; font-weight: 700; }
.rate-price .sup { font-size: .8rem; }

.rate-hl { display: flex; gap: 16px; font-size: .78rem; color: var(--muted); }
.rate-hl b { color: var(--ink); font-weight: 700; }
.rate-updated { font-size: .72rem; color: #a39c90; }

.rate-card.flash-up { animation: flashUp 1.1s ease; }
.rate-card.flash-down { animation: flashDown 1.1s ease; }
@keyframes flashUp { 0% { box-shadow: 0 0 0 3px rgba(30, 158, 74, .55); } 100% { box-shadow: var(--shadow); } }
@keyframes flashDown { 0% { box-shadow: 0 0 0 3px rgba(212, 58, 47, .55); } 100% { box-shadow: var(--shadow); } }

/* ================= MCX SECTION ================= */
.mcx-section { margin-top: 18px; }

.mcx-note {
  margin: 10px 4px 0;
  font-size: .74rem;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}

.mcx-row { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.mcx-card {
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 18px 12px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.mcx-icon { width: 54px; height: 34px; }
.mcx-icon img { width: 100%; height: 100%; object-fit: contain; }

.mcx-title { font-weight: 700; font-size: 1.02rem; }

.mcx-price { font-size: 1.45rem; font-weight: 800; }
.mcx-price .paise { color: #b9b2a6; }

.mcx-delta { font-size: .95rem; font-weight: 700; color: var(--green); }
.mcx-delta.down { color: var(--red); }

.mcx-live-bubble {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #f5c6d0;
  color: #8c2233;
  font-weight: 800;
  font-size: .95rem;
  padding: 9px 16px;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
  z-index: 2;
  letter-spacing: .5px;
}

/* ================= GALLERY ================= */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (min-width: 700px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (min-width: 960px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }

.gallery-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease;
}

.gallery-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.gallery-thumb { aspect-ratio: 1 / 1; background: linear-gradient(160deg, #f8f4ea, #efe8d8); display: grid; place-items: center; overflow: hidden; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.gallery-card:hover .gallery-thumb img { transform: scale(1.06); }

.gallery-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(255, 255, 255, .92);
  padding: 8px 10px;
  font-weight: 700;
  font-size: .92rem;
  text-align: center;
}

/* ================= VIDEO ================= */
.video-grid { display: grid; gap: 18px; max-width: 640px; margin: 0 auto; }

.video-tile {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #3a3a3a;
  box-shadow: var(--shadow);
  cursor: pointer;
  border: none;
  padding: 0;
  width: 100%;
}

.video-tile img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.video-tile:hover img { opacity: 1; }

.video-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.video-play span {
  width: 64px; height: 64px;
  background: rgba(255, 255, 255, .92);
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
  transition: transform .15s ease;
}
.video-tile:hover .video-play span { transform: scale(1.08); }

.video-play svg { width: 30px; height: 30px; margin-left: 4px; fill: #1b1b1b; }

.video-title {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px 12px 10px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .75));
  color: #fff;
  font-size: .85rem;
  font-weight: 600;
  text-align: left;
}

/* ================= MENU ================= */
.menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 700px) { .menu-grid { grid-template-columns: repeat(3, 1fr); } }

.menu-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink);
  transition: transform .15s ease, box-shadow .15s ease;
}

.menu-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.menu-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(160deg, #fdf7e3, #f6ecd2); font-size: 1.5rem; }
.menu-item .arrow { color: var(--gold-dark); font-weight: 700; }

/* ================= BANK DETAILS ================= */
.bank-details-head { display: grid; justify-items: center; gap: 12px; padding: 22px 12px 28px; text-align: center; }
.bank-details-head h1 { font-size: clamp(1.8rem, 7vw, 2.8rem); }
.bank-details-back { justify-self: start; border: 0; background: transparent; color: var(--gold-dark); font: inherit; font-weight: 700; }
.bank-details-icon { display: grid; place-items: center; width: 76px; height: 76px; margin-top: 4px; border: 2px solid var(--ink); border-radius: 14px; background: linear-gradient(145deg, #fff8d9, #efd049); font-size: 2.6rem; }
.bank-details-card { overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: #fff; box-shadow: var(--shadow-lg); }
.bank-detail-row { display: grid; grid-template-columns: minmax(110px, .9fr) minmax(0, 1.1fr); align-items: center; gap: 18px; min-height: 108px; padding: 24px clamp(18px, 5vw, 52px); }
.bank-detail-row + .bank-detail-row { border-top: 1px solid #f3f0e9; }
.bank-detail-row strong { font-size: clamp(1rem, 4vw, 1.35rem); }
.bank-detail-row span { font-size: clamp(.96rem, 3.8vw, 1.25rem); overflow-wrap: anywhere; text-align: right; }
.bank-details-empty { padding: 30px 20px; color: var(--muted); text-align: center; }
.bank-qr { display: grid; justify-items: center; gap: 14px; padding: 26px 20px 32px; border-top: 1px solid var(--line); text-align: center; }
.bank-qr h2 { font-size: 1.1rem; }
.bank-qr img { width: min(100%, 320px); max-height: 380px; object-fit: contain; }
/* The QR itself is a button: tapping it starts a UPI payment. */
button.bank-qr-image {
  border: 0;
  padding: 10px;
  background: #fff;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
  transition: transform .14s ease, box-shadow .14s ease;
}
button.bank-qr-image:active { transform: scale(.98); }
button.bank-qr-image img { display: block; width: min(70vw, 300px); max-height: 360px; }
.bank-qr-hint { margin: 0; font-size: .84rem; color: #8a8374; max-width: 340px; }
.bank-qr-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.bank-qr-actions .lb-action { background: #fff; border-color: var(--line); color: #3d372b; }
.bank-qr-actions .lb-action:hover, .bank-qr-actions .lb-action:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: #231a02;
}
@media (max-width: 460px) {
  .bank-detail-row { grid-template-columns: 1fr; gap: 6px; min-height: 0; }
  .bank-detail-row span { text-align: left; }
}

/* ================= MODALS ================= */
.modal { position: fixed; inset: 0; display: none; z-index: 60; }
.modal.open { display: block; }

/* The category gallery stacks on top of the page but below the slideshow */
.modal.gallery-view-modal { z-index: 61; }
.modal#lightbox { z-index: 70; }

.modal-backdrop { position: absolute; inset: 0; background: rgba(10, 8, 4, .6); backdrop-filter: blur(2px); }

.modal-card {
  position: relative;
  z-index: 2;
  background: #fff;
  width: min(92vw, 720px);
  margin: 7vh auto 0;
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: pop-in .22s ease;
}

@keyframes pop-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: var(--bg-dark);
  color: #fff;
}

.modal-head h3 { font-size: 1.05rem; letter-spacing: .5px; }

.modal-close {
  border: none;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 1.15rem;
  line-height: 1;
}

.modal-body { padding: 16px; }

/* ================= GST CALCULATOR ================= */
.modal.gst-modal { z-index: 65; overflow-y: auto; background: #fffaff; }
.modal.gst-modal .modal-backdrop { background: #fffaff; backdrop-filter: none; }
.modal.gst-modal .modal-card {
  width: min(90vw, 560px);
  max-height: calc(100dvh - 24px);
  margin: max(12px, 3vh) auto 24px;
  overflow-y: auto;
  background: #fffaff;
  box-shadow: none;
}
.modal.gst-modal .modal-head {
  position: absolute;
  top: 4px;
  right: 6px;
  z-index: 3;
  padding: 0;
  background: transparent;
}
.modal.gst-modal .modal-head h3 { display: none; }
.modal.gst-modal .modal-close { color: #555; background: transparent; font-size: 1.5rem; }
.modal.gst-modal .modal-body { padding: 0 0 20px; }
.gst-panel {
  margin: 0 auto;
  padding: clamp(18px, 3.5vw, 26px);
  width: 100%;
  border: 1px solid #e7e3e3;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}
.gst-form { display: grid; gap: 18px; }
.gst-fieldset { min-width: 0; border: 0; }
.gst-fieldset legend, .gst-weight-label {
  display: block;
  margin-bottom: 9px;
  color: #222;
  font-size: .98rem;
  font-weight: 600;
}
.gst-carat-fieldset { margin-bottom: 2px; }
.gst-carat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.gst-carat { position: relative; min-width: 0; cursor: pointer; }
.gst-carat input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.gst-carat span {
  display: grid;
  place-items: center;
  min-height: 52px;
  padding: 7px 5px;
  border: 1px solid #555;
  border-radius: 11px;
  color: #222;
  font-size: clamp(.86rem, 3.5vw, .98rem);
  font-weight: 400;
  line-height: 1.25;
  text-align: center;
  transition: background .15s ease, border-color .15s ease;
}
.gst-carat input:checked + span { background: #ffdc36; border-color: #d0a900; }
.gst-carat input:focus-visible + span { outline: 3px solid rgba(30, 80, 180, .32); outline-offset: 2px; }
.gst-radio-row { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(20px, 5vw, 34px); padding: 0 6px; }
.gst-radio-row label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: .94rem; font-weight: 400; }
.gst-radio-row input[type="radio"] {
  appearance: none;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 2px solid #555;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  flex: none;
}
.gst-radio-row input[type="radio"]:checked::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: #555; }
.gst-radio-row input[type="radio"]:focus-visible { outline: 3px solid rgba(30, 80, 180, .28); outline-offset: 2px; }
.gst-custom-group { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 170px; min-width: 0; }
.gst-custom-input {
  flex: 1 1 auto;
  width: 90px;
  min-width: 0;
  max-width: 120px;
  padding: 5px 9px;
  border: 1.5px solid #555;
  border-radius: 9px;
  outline: 0;
  background: #fff;
  color: #111;
  font: inherit;
  font-size: .94rem;
}
.gst-custom-input:focus { border-color: #1e50b4; }
.gst-custom-input::placeholder { color: #999; }
.gst-pct-wrap {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid #555;
  border-radius: 9px;
  background: #fff;
}
.gst-pct-wrap:focus-within { border-color: #1e50b4; }
.gst-pct-wrap input {
  width: 64px;
  min-width: 0;
  padding: 5px 2px 5px 9px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #111;
  font: inherit;
  font-size: .94rem;
}
.gst-pct-wrap span { flex: none; padding: 0 9px 0 4px; color: #555; font-size: .94rem; }
.gst-weight-label { margin: 0; }
.gst-weight-wrap { display: flex; align-items: center; gap: 12px; }
.gst-weight-wrap input {
  width: 100%;
  min-width: 0;
  padding: 8px 2px 6px;
  border: 0;
  border-bottom: 1.5px solid #555;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: #111;
  font: inherit;
  font-size: 1.05rem;
}
.gst-weight-wrap input:focus { border-bottom-color: #1e50b4; }
.gst-weight-wrap span { flex: none; font-size: .98rem; }
.gst-error { min-height: 0; margin: -10px 0 0; color: #b4232f; font-size: .82rem; font-weight: 500; }
.gst-error:empty { display: none; }
.gst-actions { display: flex; gap: 14px; margin-top: -2px; }
.gst-actions button {
  flex: 1;
  min-height: 46px;
  border: 1.5px solid;
  border-radius: 14px;
  background: #fff;
  color: #111;
  font-size: .93rem;
  font-weight: 500;
}
.gst-reset { border-color: #25249a !important; }
.gst-calculate { border-color: #267d35 !important; }
.gst-actions button:active { transform: scale(.98); }
.gst-result {
  padding: 14px;
  border: 1px solid #f0e2b6;
  border-radius: 12px;
  background: #fffaf0;
  font-size: .92rem;
}
.gst-result > div:not(.gst-result-title) { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
.gst-result-title { margin-bottom: 8px; font-size: 1rem; font-weight: 600; }
.gst-result .gst-total { margin-top: 5px; padding-top: 10px !important; border-top: 1px solid #dfd5ba; font-size: 1rem; }
.gst-result small { display: block; margin-top: 8px; color: #716b5e; line-height: 1.4; }
/* ---- OLD GOLD RATE CALCULATOR ---- */
.ogc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
}
.ogc-field { display: block; min-width: 0; }
.ogc-field > span:first-child {
  display: block;
  margin-bottom: 7px;
  color: #222;
  font-size: .94rem;
  font-weight: 600;
}
.ogc-field .gst-weight-wrap input { font-size: 1rem; }
.ogc-readout output {
  width: 100%;
  min-width: 0;
  padding: 8px 2px 6px;
  border-bottom: 1.5px dashed #b9b2a6;
  color: #111;
  font-size: 1.05rem;
  font-weight: 600;
}
.ogc-net-amount {
  grid-column: 1 / -1;
  margin-top: 2px;
  padding: 14px 16px;
  border: 1px solid #f0e2b6;
  border-radius: 12px;
  background: #fffaf0;
}
.ogc-net-amount > span:first-child { margin-bottom: 6px; }
.ogc-net-amount .ogc-readout output {
  padding: 0;
  border: 0;
  color: #8a5a00;
  font-size: 1.35rem;
}
@media (max-width: 460px) {
  .ogc-grid { grid-template-columns: 1fr; }
  .ogc-net-amount { grid-column: auto; }
}
@media (max-width: 380px) {
  .gst-form { gap: 20px; }
  .gst-carat-grid { gap: 8px; }
  .gst-carat span { min-height: 58px; border-radius: 12px; }
  .gst-radio-row { gap: 12px; padding: 0 2px; }
  .gst-radio-row label { gap: 6px; font-size: .9rem; }
  .gst-radio-row input[type="radio"] { width: 22px; height: 22px; }
  .gst-custom-group { flex-basis: 100%; }
  .gst-custom-input { max-width: 130px; }
  .gst-actions { gap: 10px; }
}

/* In-app GST calculation popup */
.modal.gst-result-modal { z-index: 80; display: none; }
.modal.gst-result-modal.open { display: grid; place-items: center; padding: 20px; }
.modal.gst-result-modal .modal-backdrop { background: rgba(10, 8, 4, .58); backdrop-filter: blur(2px); }
.gst-result-card {
  z-index: 2;
  width: min(100%, 380px);
  max-height: min(80dvh, 620px);
  margin: 0;
  overflow: hidden;
  border: 1px solid #eadfd7;
  border-radius: 14px;
  background: #fffdfb;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .24);
  animation: pop-in .18s ease;
}
.gst-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #eee5df;
}
.gst-result-head h3 { margin: 0; font-size: 1.05rem; font-weight: 600; color: #222; }
.gst-result-close { flex: none; color: #55483f; background: transparent; }
.gst-result-body { overflow-y: auto; padding: 12px 16px 4px; }
.gst-result-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; color: #4a4541; font-size: .91rem; line-height: 1.35; }
.gst-result-row span { min-width: 0; }
.gst-result-row b { flex: none; color: #27221f; font-weight: 600; text-align: right; }
.gst-result-total { margin-top: 4px; padding-top: 11px; border-top: 1px solid #e8ddd6; color: #201b18; font-size: .98rem; }
.gst-result-total b { color: #7b411f; font-size: 1.03rem; }
.gst-result-tax-note { margin: 4px 0 8px; color: #71665e; font-size: .82rem; }
.gst-result-footer { display: flex; justify-content: flex-end; padding: 10px 16px 14px; }
.gst-result-ok { min-width: 76px; min-height: 40px; padding: 8px 18px; border: 0; border-radius: 999px; background: #8d4b24; color: #fff; font: inherit; font-size: .9rem; font-weight: 600; }
.gst-result-ok:hover { background: #713817; }
.gst-result-ok:focus-visible, .gst-result-close:focus-visible { outline: 3px solid rgba(141, 75, 36, .35); outline-offset: 2px; }

/* ================= MANDATORY REGISTRATION GATE ================= */
.reg-overlay {
  position: fixed;
  inset: 0;
  z-index: 100; /* above every modal (lightbox is 70) */
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    radial-gradient(900px 480px at 50% -10%, #3a2f10 0%, transparent 60%),
    rgba(10, 8, 4, .82);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .25s ease;
}
.reg-overlay.show { opacity: 1; }

/* [hidden] must actually hide: the display:grid above would otherwise
   override the UA's [hidden] { display:none } and leave an invisible,
   click-blocking full-screen layer over the site after registering. */
.reg-overlay[hidden] { display: none; }

.reg-card {
  position: relative;
  width: min(92vw, 380px);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
  padding: 26px 24px 22px;
  text-align: center;
  animation: reg-pop .24s ease;
}

/* Close without submitting — the popup returns on the next visit. */
.reg-close {
  position: absolute; top: -14px; right: -12px; width: 34px; height: 34px;
  border: 0; border-radius: 50%; background: #111; color: #fff;
  font-size: 1.15rem; line-height: 1; display: grid; place-items: center;
  padding: 0 0 2px; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
}
.reg-close:active { transform: scale(.92); }
@keyframes reg-pop { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }

.reg-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-bottom: 12px;
}
.reg-brand img {
  width: clamp(48px, 14vw, 64px);
  aspect-ratio: 1;
  height: auto;
  flex: none;
  object-fit: contain;
  border-radius: 10px;
  background: #080704;
}
.about-logo {
  width: clamp(76px, 24vw, 108px);
  aspect-ratio: 1;
  height: auto;
  margin-inline: auto; /* the img is display:block (global rule), so text-align:center alone can't center it */
  object-fit: contain;
  border-radius: 12px;
  background: #080704;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
}
.reg-brand span {
  font-weight: 800;
  letter-spacing: .6px;
  font-size: 1rem;
}

.reg-card h2 {
  font-size: 1.25rem;
  letter-spacing: .5px;
  margin-bottom: 6px;
}
.reg-sub {
  font-size: .84rem;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 14px;
}

.reg-field {
  display: grid;
  gap: 5px;
  text-align: left;
  margin-bottom: 12px;
}
.reg-field span {
  font-size: .8rem;
  font-weight: 700;
}
.reg-field input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 1rem;
  font-family: inherit;
  background: #fffdf8;
}
.reg-field input:focus {
  outline: 2px solid #E8B92355;
  border-color: var(--gold-dark);
}
.reg-field input.invalid { border-color: var(--red); }

.reg-error {
  min-height: 1.2em;
  color: var(--red);
  font-size: .82rem;
  font-weight: 600;
  text-align: left;
  margin-bottom: 6px;
}

.reg-submit {
  width: 100%;
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .3px;
  color: #231a02;
  background: var(--gold-grad);
  box-shadow: 0 6px 18px rgba(201, 147, 27, .35);
}
.reg-submit:disabled {
  opacity: .7;
  cursor: wait;
}

/* While the gate is up the page cannot scroll. */
body.reg-locked { overflow: hidden; }

@media (max-height: 620px) {
  .reg-card { padding: 18px 20px 16px; }
  .reg-sub { margin-bottom: 10px; }
}

/* ---- Category gallery view: every photo of one category ----
   A bottom sheet on phones, a centred card on desktop: the header holds
   the back arrow, the category name + photo count and the × close; the
   grid below scrolls under it. */
.gallery-view-card {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: min(100%, 980px);
  height: 100%;
  margin: 0 auto;
  background: var(--bg);
  animation: sheet-up .24s ease;
}
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 720px) {
  .gallery-view-card {
    height: auto; max-height: 92vh;
    margin-top: 4vh;
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
  }
}

.gallery-view-head {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  background: var(--bg-dark);
  color: #fff;
  flex: none;
}
.gallery-view-back {
  border: none;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 1.15rem;
  line-height: 1;
  flex: none;
}
.gallery-view-back:hover { background: rgba(255, 255, 255, .28); }
.gallery-view-titles { min-width: 0; flex: 1; }
.gallery-view-titles h3 { font-size: 1.02rem; letter-spacing: .5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gallery-view-count { font-size: .76rem; color: var(--gold); font-weight: 600; }
.gallery-view-head .modal-close { flex: none; width: 38px; height: 38px; font-size: 1.3rem; }

.btn-gold {
  border: none;
  background: var(--gold-grad);
  color: #231a02;
  font-weight: 700;
  font-size: .82rem;
  padding: 9px 14px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
}
.btn-gold:active { transform: scale(.97); }

/* Full-width start button on phones (own wrapped row in the header),
   inline pill in the header on wider screens */
.gallery-view-start { flex: 1 1 100%; }
@media (min-width: 720px) {
  .gallery-view-start { flex: 0 0 auto; }
}

.gallery-view-empty {
  display: none;
  flex: 1 1 100%;
  margin: 0;
  padding: 18px 12px;
  background: #fffdf4;
  border: 1px dashed #d8cba4;
  border-radius: 12px;
  color: #8a6d1a;
  font-size: .85rem;
  text-align: center;
}
.gallery-view-empty[hidden] { display: none; }
.gallery-view-empty:not([hidden]) { display: block; flex: none; }

.gallery-view-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.gallery-view-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 560px) { .gallery-view-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 16px; } }
@media (min-width: 960px) { .gallery-view-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.gallery-view-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.gallery-view-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.gallery-view-thumb:hover img { transform: scale(1.05); }
.gallery-view-thumb.current { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232, 185, 35, .35); }

/* Item weight and Sold badge, saved with the image in the Admin Panel.
   Both are sized to be noticed at a glance on every screen: large, bold
   text with a strong outline/shadow so they stay legible over any photo. */
.gallery-view-thumb .weight-tag,
.lightbox-info .weight-tag {
  background: rgba(0, 0, 0, .72); color: #fff;
  font-size: 1rem; font-weight: 800; line-height: 1;
  padding: 7px 14px; border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, .85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
  pointer-events: none;
}
.gallery-view-thumb .weight-tag { position: absolute; left: 8px; bottom: 8px; }
.gallery-view-thumb .sold-tag,
.lightbox-info .sold-tag {
  background: #c0392b; color: #fff;
  font-size: 1.05rem; font-weight: 800; line-height: 1; letter-spacing: 1px;
  text-transform: uppercase;
  padding: 8px 16px; border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, .9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
  pointer-events: none;
}
.gallery-view-thumb .sold-tag { position: absolute; left: 8px; top: 8px; }
.gallery-view-thumb.sold img { opacity: .8; }
.lightbox-info {
  display: flex; gap: 10px; align-items: center; justify-content: center;
  margin-top: 10px;
}
.lightbox-info .weight-tag,
.lightbox-info .sold-tag { position: static; font-size: 1.15rem; padding: 9px 18px; }
.lightbox-info[hidden] { display: none; }

/* Keep the badges noticeable but proportional on small phones. */
@media (max-width: 560px) {
  .gallery-view-thumb .weight-tag,
  .gallery-view-thumb .sold-tag { font-size: .85rem; padding: 5px 11px; }
  .lightbox-info .weight-tag,
  .lightbox-info .sold-tag { font-size: 1rem; padding: 7px 15px; }
}

/* ---- Gallery viewer: one image at a time, on any screen ----
   The figure fills the viewport as a centred column, so the image scales
   to the space left between the top bar (counter + ×) and the caption.
   Safe-area padding keeps the controls clear of phone notches and bars. */
.lightbox-figure {
  position: relative;
  z-index: 2;
  width: min(96vw, 880px);
  height: 100%;
  margin: 0 auto;
  /* The extra bottom padding reserves a strip for the Download / Share
     action pills so they never sit on top of the caption. */
  padding: calc(58px + env(safe-area-inset-top, 0px)) 12px calc(78px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lightbox-figure img {
  flex: 0 1 auto;
  min-height: 0;
  width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 12px;
  background: #111;
}
/* Re-run on every step so moving between photos fades rather than jumps. */
.lightbox-figure img.lb-step { animation: lb-in .22s ease; }
@keyframes lb-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }

.lightbox-figure figcaption {
  color: #fff;
  text-align: center;
  padding: 10px 8px 0;
  font-weight: 600;
  font-size: .92rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .65);
}

/* Close (×): pinned to the top-right of the viewport so it is always in the
   same place and never hidden behind the photo. */
.lightbox-close {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: 12px;
  z-index: 4;
  width: 42px; height: 42px;
  font-size: 1.5rem;
  background: var(--gold);
  color: #231a02;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
.lightbox-close:hover, .lightbox-close:focus-visible { background: #fff; }

/* Image navigation: ‹ › step through the category, the counter tells you
   where you are, the ← → arrow keys and a swipe do the same thing. */
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px; height: 44px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 1.7rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  backdrop-filter: blur(3px);
  transition: background .16s ease, color .16s ease;
}
.lightbox-nav:hover, .lightbox-nav:focus-visible { background: var(--gold); color: #231a02; }
/* Overlaid just inside the photo on phones/tablets … */
.lightbox-nav.prev { left: 16px; }
.lightbox-nav.next { right: 16px; }
/* … and moved into the gutter once the screen is wide enough to hold them. */
@media (min-width: 1020px) { .lightbox-nav.prev { left: -60px; } .lightbox-nav.next { right: -60px; } }

.lightbox-counter {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top, 0px));
  left: 16px;
  z-index: 3;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
}
.lightbox-counter:empty { display: none; }

/* Download + Share: a centred pill bar near the bottom of the viewer,
   clear of the caption above and of phone gesture bars below. */
.lightbox-actions {
  position: absolute;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  left: 0; right: 0;
  z-index: 4;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 12px;
}
.lb-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  backdrop-filter: blur(3px);
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .12s ease;
}
.lb-action svg { flex: 0 0 auto; }
.lb-action:hover, .lb-action:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: #231a02;
}
.lb-action:active { transform: scale(.97); }
.lb-action.busy { opacity: .55; pointer-events: none; }
/* Very short screens: tuck the labels away, the icons still read. */
@media (max-height: 560px) { .lb-action .lb-label { display: none; } .lb-action { padding: 10px 14px; } }

/* Video player: centred in the viewport (not pushed down by the 8vh offset).
   The width is also capped so the 16:9 frame never gets taller than the
   visible screen — landscape phones are short, so the player fits fully. */
.modal#videoModal.open { display: grid; place-items: center; padding: 12px; }
.video-modal-card {
  width: min(94vw, 900px);
  width: min(94vw, 900px, calc((100vh - 24px) * 16 / 9)); /* older WebViews: vh */
  width: min(94vw, 900px, calc((100dvh - 24px) * 16 / 9));
  margin: 0;
  padding: 0;
}
.video-frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.video-modal-card .modal-close { position: absolute; top: 8px; right: 8px; z-index: 3; background: rgba(0, 0, 0, .55); }

/* ================= BOTTOM NAV ================= */
.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--bg-dark);
  border-top: 2px solid var(--gold);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  z-index: 50;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: #cfc9bd;
  font-size: .72rem;
  font-weight: 600;
  transition: color .2s ease, background .2s ease;
}

.nav-item svg { width: 23px; height: 23px; }

.nav-item.active { background: var(--gold-grad); color: #231a02; }
.nav-item:not(.active):hover { color: var(--gold-bright); }

/* ================= FOOTER ================= */
.app-footer {
  position: fixed;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  left: 0; right: 0;
  background: #fff;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  padding: 5px 12px;
  font-size: .72rem;
  color: var(--muted);
  z-index: 49;
}

.app-footer .heart { color: #d43a2f; }

/* discreet footer links (privacy / developer credit) */
.privacy-link { opacity: .55; font-size: .68rem; color: inherit; text-decoration: none; }
.dev-credit { color: inherit; text-decoration: none; }
.dev-credit:hover { text-decoration: underline; }
.privacy-link:hover { opacity: 1; }

/* ================= PRIVACY PAGE ================= */
.privacy-main { padding: 16px 16px calc(var(--nav-h) + 70px); }
.privacy-policy { max-width: 720px; margin: 0 auto; color: var(--ink, #1a1a1a); background: #fff; border-radius: 16px; padding: 24px 20px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.privacy-policy h1 { font-size: 1.4rem; margin: 0 0 12px; }
.privacy-policy h2 { font-size: 1.05rem; margin: 22px 0 8px; }
.privacy-policy p, .privacy-policy li { font-size: .92rem; line-height: 1.6; margin: 0 0 10px; }
.privacy-policy ul { padding-left: 20px; margin: 0 0 12px; }
.privacy-policy a { color: inherit; }

/* ================= UTILITIES ================= */
.empty-note { text-align: center; color: var(--muted); font-size: .9rem; padding: 24px 10px; grid-column: 1 / -1; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Larger screens: header becomes a row */
@media (min-width: 700px) {
  .app-header { min-height: 112px; flex-direction: row; justify-content: center; padding: 16px 24px; }
  .brand { flex-direction: row; gap: 16px; }
  .brand-logo { width: clamp(76px, 7vw, 92px); }
  .brand-name { font-size: clamp(1.45rem, 2.6vw, 1.8rem); text-align: left; }
}

@media (max-width: 360px) {
  .app-header { min-height: 116px; padding: 10px 12px; }
  .brand { gap: 6px; }
  .brand-logo { width: 68px; }
  .brand-name { font-size: 1rem; letter-spacing: .5px; }
}

@media (min-width: 700px) and (max-width: 760px) {
  .app-header { padding-inline: 10px; }
  .brand { gap: 10px; }
  .brand-logo { width: 72px; }
  .brand-name { font-size: 1.4rem; }
}

/* Matches whatever fixed-header height the current breakpoint yields.
   These are only no-JS fallbacks: js/fixed-top.js measures the real
   stack and overrides them, including the gap below the offers ribbon.
   They MUST be declared on html, not body: a body-scoped declaration
   shadows the value JS sets on the root element, which previously froze
   the desktop offset at the stale 166px fallback and pushed the first
   rate cards under the offers ribbon. As an html-level fallback it is
   always beaten by the inline style fixed-top.js writes on <html>. */
@media (min-width: 700px) {
  html { --fixed-top-h: 166px; } /* 146px stack + 20px ribbon gap */
}
@media (max-width: 360px) {
  html { --fixed-top-h: 170px; } /* 150px stack + 20px ribbon gap */
}