:root {
  --ink: #1f2430;
  --muted: #6b7280;
  --line: #e5e7eb;
  --bg: #f7f7f5;
  --panel: #ffffff;
  --brand: #b45309;
  --brand-dark: #92400e;
  --success: #15803d;
  --success-bg: #dcfce7;
  --error: #b91c1c;
  --error-bg: #fee2e2;
  --radius: 10px;
  --gutter: clamp(16px, 4vw, 72px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
}
/* Shop pages sit on white, matching the header once it has scrolled; admin keeps --bg. */
body.storefront { background: var(--panel); }
img { max-width: 100%; display: block; }
a { color: var(--brand-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 0.5em; }
p { margin: 0 0 1em; }

/* Full screen width; the side gutter scales with the viewport. */
.container { width: 100%; padding: 0 var(--gutter); }

/* ---- header ---- */
/* At the top of the page the header carries a 5% tint of the button colour;
   once the page scrolls (.scrolled, set in app.js) it fades slowly back to white. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background-color: rgba(180, 83, 9, 0.05); /* --brand at 5% */
  /* No bottom border: the header blends into the white page as one surface. */
  transition: background-color 0.8s ease;
}
.site-header.scrolled { background-color: var(--panel); }
.site-header .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 16px;
}
.brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 16px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
}
.brand:hover { text-decoration: none; }
.brand-logo { width: 100px; height: auto; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-tagline {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brand); margin-top: 3px;
}
.brand::before,
.brand::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid var(--brand);
  transition: width 0.25s ease, height 0.25s ease;
}
.brand::before {
  top: -6px;
  right: -6px;
  border-width: 2px 2px 0 0; /* top + right edge */
}
.brand::after {
  bottom: -6px;
  left: -6px;
  border-width: 0 0 2px 2px; /* bottom + left edge */
}
.brand:hover::before,
.brand:hover::after {
  width: 56px; /* horizontal edge elongates ~4x on hover; right/left stay anchored so it grows toward the text */
  height: 56px; /* vertical edge elongates ~4x on hover; top/bottom stay anchored so it grows toward the text */
}
.nav-links { display: flex; align-items: center; gap: 18px; }
.nav-links a {
  position: relative;
  display: inline-block;
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  padding-bottom: 2px;
}
.nav-links a:hover { text-decoration: none; }
.nav-links a.btn { color: #fff; padding-bottom: 6px; }
.nav-links a.btn::after { display: none; }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}
.nav-links a:hover::after { transform: scaleX(1); }
.cart-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  background: var(--brand); color: #fff; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; margin-left: 4px;
}

/* ---- layout ---- */
main.page { padding: clamp(20px, 3vw, 40px) 0 64px; }
/* Footer: the text sits in the middle of a row of grey keepsake silhouettes (cameras,
   photo albums, photobooks, prints, pocket watches, wristwatches) running out to the left
   and right - none behind the words. Each side is a single flex row that wraps: an icon
   that doesn't fully fit drops to a second row, which is clipped away, so only whole
   icons ever show. */
.site-footer {
  padding: 16px 0; text-align: center; color: var(--muted); font-size: 0.85rem;
  border-top: 1px solid var(--line); margin-top: 24px; background: #fff;
}
.site-footer .container {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
  padding-inline: clamp(10px, 1.5vw, 24px); /* icons run out close to the page edges */
}
.footer-text { flex: 0 1 auto; max-width: 480px; }
.footer-parade {
  flex: 1 1 0; min-width: 0; height: 60px; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: flex-end; align-content: flex-start;
  justify-content: space-between; /* first icon beside the text, last at the page edge */
  gap: 200px clamp(16px, 2.4vw, 34px); /* big row gap pushes the overflow row well out of view */
}
.footer-parade-left { flex-direction: row-reverse; } /* nearest-the-text first on both sides */
.footer-parade img { flex: 0 0 auto; width: auto; max-height: 60px; }
@media (max-width: 760px) {
  .site-footer .container { flex-wrap: wrap; justify-content: center; gap: 10px; }
  .footer-parade-left { display: none; }
  .footer-text { flex-basis: 100%; max-width: none; }
  .footer-parade-right { flex-basis: 100%; height: 50px; justify-content: space-between; }
  .footer-parade img { max-height: 44px; }
}
/* Short pages: keep the footer at the bottom of the screen, not mid-page. */
body.storefront { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body.storefront > main.page { flex: 1 0 auto; }

/* ---- alerts / flash ---- */
.alert {
  padding: 12px 16px; border-radius: var(--radius); margin-bottom: 20px; font-size: 0.92rem;
}
.alert-success { background: var(--success-bg); color: var(--success); }
.alert-error { background: var(--error-bg); color: var(--error); }

/* ---- buttons ---- */
.btn {
  display: inline-block; padding: 10px 18px; border-radius: 8px; border: 1px solid transparent;
  font-weight: 600; font-size: 0.92rem; cursor: pointer; background: var(--brand); color: #fff;
}
.btn:hover { background: var(--brand-dark); text-decoration: none; }
.btn-secondary { background: var(--panel); color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { background: #f2f2f0; }
.btn-danger { background: var(--error); color: #fff; }
.btn-danger:hover { background: #991b1b; }
.btn-sm { padding: 6px 12px; font-size: 0.82rem; }
.btn-block { width: 100%; text-align: center; }
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #fff; color: var(--ink); border-color: var(--line);
}
.btn-google:hover { background: #f7f7f5; text-decoration: none; }
.btn-google svg { flex-shrink: 0; }

.auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--muted); font-size: 0.82rem; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---- forms ---- */
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.88rem; }
.field .hint { color: var(--muted); font-size: 0.8rem; margin-top: 4px; }
input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=number], textarea, select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 0.95rem; font-family: inherit; background: #fff; color: var(--ink);
}
textarea { resize: vertical; }
.form-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; max-width: 480px;
}
.checkbox-row { display: flex; align-items: center; gap: 8px; }
.checkbox-row input { width: auto; }

/* ---- cards / grid ---- */
/* auto-fit: the cards stretch to use the full width instead of leaving empty slots. */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
/* Catalogues that start small (watches): cards keep their size and line up from the left. */
.grid.grid-fill { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
}
.card-image-frame { overflow: hidden; }
.card img { aspect-ratio: 4/3; object-fit: cover; background: #eee; display: block; transition: transform 0.5s ease; }
.card:hover img { transform: scale(1.05); }
.card-placeholder {
  aspect-ratio: 4/3; background: #eee; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 0.85rem;
}
.card-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-body h3 { font-size: 1rem; }
.price { font-weight: 700; color: var(--brand-dark); }
.muted { color: var(--muted); font-size: 0.85rem; }

/* ---- tables ---- */
table { width: 100%; border-collapse: collapse; background: var(--panel); border-radius: var(--radius); overflow: hidden; }
th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
th { background: #f3f2ef; font-weight: 600; }
tr:last-child td { border-bottom: none; }

/* ---- status badges ---- */
.badge { display: inline-block; white-space: nowrap; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; text-transform: capitalize; }
.item-message { margin-top: 6px; padding: 6px 10px; border-left: 3px solid var(--brand); background: rgba(180,83,9,0.05); font-size: 0.88rem; font-style: italic; white-space: normal; max-width: 420px; overflow-wrap: anywhere; }
.item-message strong { font-style: normal; }
.badge-pending, .badge-awaiting_payment { background: #fef3c7; color: #92400e; }
.badge-paid, .badge-processing, .badge-ready { background: #dbeafe; color: #1e40af; }
.badge-completed { background: var(--success-bg); color: var(--success); }
.badge-cancelled, .badge-failed { background: var(--error-bg); color: var(--error); }

/* ---- photo uploader ---- */
.uploader { border: 2px dashed var(--line); border-radius: var(--radius); padding: 18px; text-align: center; }
.uploader.dragover { border-color: var(--brand); background: #fff7ed; }
.photo-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.photo-thumb { position: relative; width: 88px; height: 88px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.photo-thumb button {
  position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%;
  border: none; background: rgba(0,0,0,0.65); color: #fff; font-size: 0.75rem; cursor: pointer; line-height: 1;
}

/* ---- photobook detail gallery ---- */
.gallery-frame { overflow: hidden; border-radius: 10px; }
.gallery-main { aspect-ratio: 4/3; object-fit: cover; width: 100%; display: block; transition: transform 0.5s ease; }
.gallery-frame:hover .gallery-main { transform: scale(1.05); }
.gallery-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.gallery-thumb {
  width: 72px; height: 72px; object-fit: cover; border-radius: 8px; cursor: pointer;
  border: 2px solid transparent; opacity: 0.7;
}
.gallery-thumb:hover, .gallery-thumb.active { opacity: 1; border-color: var(--brand); }

.two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 760px) { .two-col { grid-template-columns: 1fr; } }

.spinner {
  display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(0,0,0,0.15);
  border-top-color: var(--brand); border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- home picture window ----
   The panel scrolls with the page while the photo inside it stays put. The photo is a
   position:fixed layer clipped to the panel by clip-path (background-attachment: fixed
   is ignored by iOS Safari). `cover` fills the viewport without repeating or distorting,
   cropping evenly around the centre. */
.photo-window {
  position: relative;
  height: clamp(240px, 36vw, 640px);
  margin: 0 0 clamp(26px, 3vw, 44px);
  border-radius: var(--radius);
  clip-path: inset(0 round var(--radius));
  background-color: #e9e4dc;
}
.photo-window::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("../img/background.jpg") center center / cover no-repeat;
}

/* ---- home intro ---- */
.intro {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(22px, 3vw, 44px) clamp(18px, 3.5vw, 56px);
  margin-bottom: clamp(26px, 3vw, 44px);
  display: grid; gap: 4px 48px;
  grid-template-columns: 1fr;
  grid-template-areas: "main" "steps" "cta";
}
.intro-main { grid-area: main; }
.intro-cta { grid-area: cta; }
.intro-steps {
  grid-area: steps; list-style: none; padding: 0; margin: 0 0 22px;
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  color: var(--ink); font-size: 0.95rem; font-weight: 600;
}
.intro-steps strong { color: var(--brand); font-weight: 800; }
@media (min-width: 1025px) {
  .intro {
    grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr);
    grid-template-areas: "main steps" "cta steps";
    align-items: center;
  }
  .intro-steps {
    flex-direction: column; flex-wrap: nowrap; margin: 0; gap: 16px;
    padding: clamp(20px, 2vw, 32px); border-radius: var(--radius);
    background: rgba(180, 83, 9, 0.05); /* same 5% brand tint as the header */
    color: var(--ink); font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.1rem);
  }
}
.intro-eyebrow {
  margin: 0 0 6px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--brand);
}
.intro h1 { font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.75rem); margin-bottom: 12px; }
.intro-lead { font-size: clamp(0.98rem, 0.92rem + 0.3vw, 1.2rem); color: #374151; max-width: 62ch; }
/* scroll-margin clears the sticky header when a menu link or button jumps to the section. */
.section-title { font-size: clamp(1.35rem, 1.1rem + 0.9vw, 2rem); scroll-margin-top: 130px; }
.section-title.catalogue-next { margin-top: clamp(40px, 5vw, 64px); }
.section-lead { margin: -4px 0 18px; font-size: 0.95rem; }
.intro-cta { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- mobile ---- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); }
.table-wrap table { min-width: 560px; }

.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 10px; margin-right: -10px;
  background: transparent; border: none; cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-logout { display: inline; margin: 0; }

/* Tablets: three photobooks per row. */
@media (min-width: 761px) and (max-width: 1024px) {
  .grid, .grid.grid-fill { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
/* Large monitors: roomier cards. */
@media (min-width: 1600px) {
  .grid { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 28px; }
  body { font-size: 1.05rem; }
}

@media (max-width: 760px) {
  .site-header .bar { flex-wrap: wrap; padding-block: 12px; }
  .brand { font-size: 1.05rem; gap: 10px; padding: 4px 12px; }
  .brand-logo { width: 72px; }
  .brand-tagline { font-size: 0.6rem; letter-spacing: 0.14em; }
  .brand:hover::before, .brand:hover::after { width: 14px; height: 14px; } /* no hover on touch */
  .nav-toggle { display: flex; }
  .nav-links {
    display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0;
    margin-top: 10px; border-top: 1px solid var(--line);
  }
  .nav-links.open { display: flex; }
  .nav-links > a { padding: 14px 4px; border-bottom: 1px solid var(--line); }
  .nav-links > a::after { display: none; }
  .nav-links > a.btn { margin-top: 12px; padding: 12px; text-align: center; border-bottom: none; }
  .nav-logout { display: block; margin-top: 12px; }
  .nav-logout .btn { width: 100%; padding: 12px; }

  main.page { padding-bottom: 48px; }
  h1 { font-size: 1.5rem; }
  .intro-steps { flex-direction: column; }
  .photo-window::before { background-image: url("../img/background-mobile.jpg"); } /* 1600px copy, lighter on data */
  .section-title { scroll-margin-top: 100px; }

  /* 16px inputs stop iOS Safari zooming in on focus */
  input[type=text], input[type=email], input[type=password], input[type=tel],
  input[type=number], textarea, select { font-size: 16px; padding: 12px; }
  .btn { padding: 12px 18px; }
  .btn-sm { padding: 8px 12px; }
  .form-card { padding: 20px 16px; max-width: 100%; }

  .grid, .grid.grid-fill { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .card-body { padding: 10px 12px; }
  .card-body h3 { font-size: 0.92rem; }
  .card:hover img, .gallery-frame:hover .gallery-main { transform: none; }  /* no sticky hover zoom on touch */

  .gallery-thumbs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .gallery-thumb { flex-shrink: 0; width: 60px; height: 60px; }
  .photo-thumb { width: calc(25% - 8px); height: auto; aspect-ratio: 1; }
  .photo-thumb button { width: 26px; height: 26px; font-size: 0.9rem; }

  th, td { padding: 10px; }
}
@media (max-width: 360px) {
  .grid, .grid.grid-fill { grid-template-columns: 1fr; }
}
.footer-link { color: var(--muted); }
.footer-link:hover { color: var(--brand-dark); }

/* Privacy policy / terms pages */
.legal { max-width: 760px; margin: 0 auto; line-height: 1.65; }
.legal h1 { margin-bottom: 4px; }
.legal h2 { font-size: 1.1rem; margin: 24px 0 6px; }
.legal p, .legal ul { margin: 0 0 10px; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 4px; }

/* Customer edit / cancel of unpaid orders */
.order-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.order-actions form { margin: 0; }
.editing-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(180, 83, 9, 0.08); border: 1px solid rgba(180, 83, 9, 0.3);
  border-radius: 8px; padding: 12px 16px; margin: 0 0 18px;
}
.editing-banner form { margin: 0; }

/* ---- storefront theme: "old money" ----
   Shop pages only (admin untouched). Cream pages, burgundy headings with copper script
   accents, gold detailing; the header is a solid burgundy band carrying the gold logo
   and name. Fonts: Instrument Serif (tall,
   condensed display serif) for headings, Pinyon Script for flourishes, Jost for text.
   The menu links keep the system font - only their colours follow the header.
   Admin pages (body.dm-admin) share the tokens and the main-area rules below; the
   sidebar is themed in admin.css. */
body.storefront, body.dm-admin {
  --cream: #f5eee0;
  --cream-deep: #ece1cb;
  --paper: #fffaf1;
  --line-warm: #e3d5bb;
  --burgundy: #5c1424;
  --burgundy-dark: #430e1a;
  --copper: #b87a48;
  --gold: #e6cc85;
  --gold-light: #f4e6b8;
  --gold-deep: #b08a3e;
  --text-warm: #3b2f2a;
  --muted-warm: #7d6e62;
  --header-bg: #5a1320;
  --header-ink: #efe0c2;
  --brand: var(--burgundy);
  --brand-dark: var(--burgundy-dark);
  --line: var(--line-warm);
  --panel: var(--paper);
  font-family: "Jost", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--cream);
  color: var(--text-warm);
}

/* Header: a burgundy band at the top of the page. Once the page scrolls (.scrolled, set in
   app.js) it fades over 0.8s into frosted cream glass that blends into the page, and
   everything on it inverts from gold/cream to burgundy - name, tagline, menu, buttons and
   the logo (two stacked images cross-fade, since an <img> can't change colour). */
body.storefront .site-header {
  --hdr-fade: 0.8s ease;
  background-color: var(--header-bg);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--header-ink);
  transition: background-color var(--hdr-fade), backdrop-filter var(--hdr-fade), -webkit-backdrop-filter var(--hdr-fade);
}
body.storefront .site-header.scrolled {
  background-color: rgba(245, 238, 224, 0.72); /* --cream, see-through */
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
body.storefront .brand,
body.storefront .brand-tagline,
body.storefront .nav-links a,
body.storefront .site-header .btn,
body.storefront .cart-badge {
  transition: color var(--hdr-fade), background-color var(--hdr-fade), border-color var(--hdr-fade);
}
body.storefront .brand::before,
body.storefront .brand::after { transition: width 0.25s ease, height 0.25s ease, border-color var(--hdr-fade); }
body.storefront .nav-toggle span { transition: transform 0.2s ease, opacity 0.2s ease, background-color var(--hdr-fade); }

body.storefront .brand { color: var(--gold); }
body.storefront .brand-name {
  font-family: "Instrument Serif", Georgia, serif; font-weight: 400;
  font-size: 1.7rem; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1;
}
body.storefront .brand-tagline {
  font-family: "Jost", sans-serif; color: var(--gold-light);
  font-weight: 500; letter-spacing: 0.32em; margin-top: 6px;
}
/* Shared with the admin sidebar, whose logo cross-fades the same way on phones. */
:is(body.storefront, body.dm-admin) .brand-logo-wrap { position: relative; display: block; flex-shrink: 0; }
:is(body.storefront, body.dm-admin) .brand-logo-wrap .brand-logo { transition: opacity var(--hdr-fade); }
:is(body.storefront, body.dm-admin) .brand-logo-burgundy { position: absolute; inset: 0; opacity: 0; }
body.storefront .brand::before,
body.storefront .brand::after { border-color: var(--gold); }
body.storefront .nav-links a { color: var(--header-ink); }
body.storefront .nav-links a:hover { color: var(--gold); }
body.storefront .nav-links a::after { background: var(--gold); }
body.storefront .nav-links a.btn,
body.storefront .site-header .btn {
  background: var(--gold); color: var(--header-bg); border-color: var(--gold);
}
body.storefront .nav-links a.btn:hover,
body.storefront .site-header .btn:hover { background: var(--gold-light); color: var(--header-bg); }
body.storefront .site-header .btn-secondary {
  background: transparent; color: var(--gold); border-color: rgba(230, 204, 133, 0.6);
}
body.storefront .site-header .btn-secondary:hover { background: rgba(230, 204, 133, 0.12); color: var(--gold-light); }
body.storefront .cart-badge { background: var(--gold); color: var(--header-bg); }
body.storefront .nav-toggle span { background: var(--gold); }

/* Scrolled: the inverse - burgundy on cream glass. */
body.storefront .site-header.scrolled .brand,
body.storefront .site-header.scrolled .brand-tagline,
body.storefront .site-header.scrolled .nav-links a { color: var(--burgundy); }
body.storefront .site-header.scrolled .nav-links a:hover { color: var(--copper); }
body.storefront .site-header.scrolled .nav-links a::after { background: var(--burgundy); }
body.storefront .site-header.scrolled .brand::before,
body.storefront .site-header.scrolled .brand::after { border-color: var(--burgundy); }
body.storefront .site-header.scrolled .brand-logo-gold { opacity: 0; }
body.storefront .site-header.scrolled .brand-logo-burgundy { opacity: 1; }
body.storefront .site-header.scrolled .nav-links a.btn,
body.storefront .site-header.scrolled .btn { background: var(--burgundy); color: var(--gold-light); border-color: var(--burgundy); }
body.storefront .site-header.scrolled .nav-links a.btn:hover,
body.storefront .site-header.scrolled .btn:hover { background: var(--burgundy-dark); color: var(--gold); }
body.storefront .site-header.scrolled .btn-secondary { background: transparent; color: var(--burgundy); border-color: var(--burgundy); }
body.storefront .site-header.scrolled .btn-secondary:hover { background: var(--burgundy); color: var(--gold-light); }
body.storefront .site-header.scrolled .cart-badge { background: var(--burgundy); color: var(--gold-light); }
body.storefront .site-header.scrolled .nav-toggle span { background: var(--burgundy); }

@media (max-width: 760px) {
  body.storefront .brand-name { font-size: 1.3rem; }
  body.storefront .nav-links { border-top-color: rgba(230, 204, 133, 0.3); }
  body.storefront .nav-links > a { border-bottom-color: rgba(230, 204, 133, 0.18); }
  body.storefront .site-header.scrolled .nav-links { border-top-color: rgba(92, 20, 36, 0.2); }
  body.storefront .site-header.scrolled .nav-links > a { border-bottom-color: rgba(92, 20, 36, 0.12); }
}

/* Headings: tall condensed serif, burgundy, capitals for page and section titles. */
:is(body.storefront, body.dm-admin) main h1,
:is(body.storefront, body.dm-admin) main h2,
:is(body.storefront, body.dm-admin) main h3 {
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-weight: 400;
  color: var(--burgundy);
}
:is(body.storefront, body.dm-admin) main h1,
:is(body.storefront, body.dm-admin) main h2 {
  text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.05;
}
:is(body.storefront, body.dm-admin) main h1 { font-size: clamp(2.1rem, 1.6rem + 2.4vw, 3.6rem); }
:is(body.storefront, body.dm-admin) main h2 { font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.6rem); }
:is(body.storefront, body.dm-admin) main h3 { font-size: 1.45rem; letter-spacing: 0.01em; }
/* A short gold rule under page and section titles. */
:is(body.storefront, body.dm-admin) main h1::after,
:is(body.storefront, body.dm-admin) main .section-title::after,
:is(body.storefront, body.dm-admin) main .legal h1::after {
  content: "";
  display: block;
  width: 64px;
  height: 1px;
  margin-top: 14px;
  background: var(--gold-deep);
  box-shadow: 0 3px 0 -1px rgba(176, 138, 62, 0.35);
}
:is(body.storefront, body.dm-admin) .card:hover { text-decoration: none; }
/* Card titles: compact body font, shown exactly as typed in the admin. */
:is(body.storefront, body.dm-admin) main .card-body h3 {
  font-family: "Jost", system-ui, sans-serif; font-weight: 500; font-size: 1rem;
  line-height: 1.35; letter-spacing: 0;
  color: var(--burgundy); transition: color 0.25s ease;
}
@media (max-width: 760px) { :is(body.storefront, body.dm-admin) main .card-body h3 { font-size: 0.9rem; } }
:is(body.storefront, body.dm-admin) .card:hover .card-body h3 { color: var(--copper); }

/* Script flourishes in copper. */
body.storefront .intro-eyebrow {
  font-family: "Pinyon Script", cursive; text-transform: none; letter-spacing: 0;
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); font-weight: 400; color: var(--copper);
}
body.storefront .intro-lead { color: var(--text-warm); }
body.storefront .intro-steps strong {
  font-family: "Pinyon Script", cursive; font-weight: 400; font-size: 1.35em; color: var(--copper);
}
:is(body.storefront, body.dm-admin) .muted { color: var(--muted-warm); }
:is(body.storefront, body.dm-admin) .price { font-weight: 600; color: var(--burgundy); letter-spacing: 0.02em; }
:is(body.storefront, body.dm-admin) main a:not(.btn):not(.card) { color: var(--burgundy); }
:is(body.storefront, body.dm-admin) main a:not(.btn):not(.card):hover { color: var(--copper); }

/* Surfaces: warm paper on cream, hairline borders. */
:is(body.storefront, body.dm-admin) .card,
body.storefront .intro,
:is(body.storefront, body.dm-admin) .form-card,
:is(body.storefront, body.dm-admin) table { background: var(--paper); border-color: var(--line-warm); }
:is(body.storefront, body.dm-admin) .card img,
:is(body.storefront, body.dm-admin) .card-placeholder { background: var(--cream-deep); }
@media (min-width: 1025px) {
  body.storefront .intro-steps { background: rgba(92, 20, 36, 0.04); }
}
:is(body.storefront, body.dm-admin) input[type=text], :is(body.storefront, body.dm-admin) input[type=email], :is(body.storefront, body.dm-admin) input[type=password],
:is(body.storefront, body.dm-admin) input[type=tel], :is(body.storefront, body.dm-admin) input[type=number], :is(body.storefront, body.dm-admin) select, :is(body.storefront, body.dm-admin) textarea {
  background: #fffdf8; border-color: #d9c9aa;
}
:is(body.storefront, body.dm-admin) input:focus, :is(body.storefront, body.dm-admin) select:focus, :is(body.storefront, body.dm-admin) textarea:focus {
  outline: 2px solid rgba(92, 20, 36, 0.25); outline-offset: 1px; border-color: var(--burgundy);
}
:is(body.storefront, body.dm-admin) .field label { color: var(--burgundy); font-weight: 600; }
:is(body.storefront, body.dm-admin) th {
  background: rgba(92, 20, 36, 0.06); color: var(--burgundy);
  font-weight: 600; letter-spacing: 0.04em;
}
:is(body.storefront, body.dm-admin) td { border-color: var(--line-warm); }
:is(body.storefront, body.dm-admin) .item-message {
  font-family: "Instrument Serif", Georgia, serif; font-size: 1.05rem;
  color: var(--text-warm); border-left-color: var(--copper);
  background: rgba(184, 122, 72, 0.08);
}
:is(body.storefront, body.dm-admin) .item-message strong { font-family: "Jost", sans-serif; color: var(--burgundy); }

/* Buttons: burgundy with cream lettering; secondary is an outline. */
:is(body.storefront, body.dm-admin) main .btn {
  background: var(--burgundy); color: var(--gold-light); border-color: var(--burgundy);
  font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.82rem;
  border-radius: 2px; padding: 11px 20px;
}
:is(body.storefront, body.dm-admin) main .btn:hover { background: var(--burgundy-dark); color: var(--gold); }
:is(body.storefront, body.dm-admin) main .btn-secondary {
  background: transparent; color: var(--burgundy); border-color: var(--burgundy);
}
:is(body.storefront, body.dm-admin) main .btn-secondary:hover { background: var(--burgundy); color: var(--gold-light); }
:is(body.storefront, body.dm-admin) main .btn-danger { background: var(--error); border-color: var(--error); color: #fff; }
:is(body.storefront, body.dm-admin) main .btn-google {
  background: #fff; color: var(--ink); border-color: var(--line-warm);
  text-transform: none; letter-spacing: 0; font-size: 0.92rem;
}
:is(body.storefront, body.dm-admin) main .btn-sm { padding: 7px 14px; font-size: 0.74rem; }

body.storefront .site-footer { color: var(--muted-warm); background: var(--cream-deep); border-top-color: var(--line-warm); }
body.storefront .footer-link:hover { color: var(--burgundy); }

/* ---- Lipa na M-Pesa Paybill: summary on the order page + popup form ---- */
.paybill-summary { margin: 0 0 18px; display: grid; gap: 8px; }
.paybill-summary > div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.paybill-summary dt { color: var(--muted); }
.paybill-summary dd { margin: 0; font-weight: 700; letter-spacing: 0.03em; }
.pay-dialog {
  width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: inherit;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}
.pay-dialog::backdrop { background: rgba(30, 10, 15, 0.55); }
.pay-dialog-body { position: relative; padding: 26px 24px 22px; }
.pay-dialog h2 { margin: 0 0 12px; padding-right: 32px; }
.pay-dialog-close {
  position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: none; background: none;
  font-size: 1.6rem; line-height: 1; color: var(--muted); cursor: pointer; border-radius: 50%;
}
.pay-dialog-close:hover { background: rgba(0, 0, 0, 0.06); color: inherit; }
.pay-steps { margin: 0 0 18px; padding-left: 20px; line-height: 1.7; }
.pay-figure { font-size: 1.08rem; letter-spacing: 0.04em; }
.pay-dialog .alert { margin-bottom: 14px; }
@media (max-width: 480px) { .pay-dialog-body { padding: 22px 16px 18px; } }
:is(body.storefront, body.dm-admin) main .pay-dialog h2 { font-size: 1.8rem; margin: 0 0 12px; }
.badge-to-verify { margin-top: 4px; background: #fde68a; color: #78350f; }
/* STK popup: registered number + "Use a different number" link. */
.stk-phone { margin-bottom: 16px; }
.stk-phone p { margin: 0 0 4px; }
.stk-phone-number { font-size: 1.25rem; }
.link-button {
  padding: 0; border: none; background: none; cursor: pointer; font: inherit; font-size: 0.88rem;
  color: var(--brand); text-decoration: underline; text-underline-offset: 3px;
}
.link-button:hover { color: var(--brand-dark); }
.field .link-button { margin-top: 8px; }
[hidden] { display: none !important; }
.pay-alt { margin: 14px 0 0; font-size: 0.88rem; color: var(--muted); text-align: center; }

/* ---- Photobook page: "Make it yours" ordering steps ---- */
.order-builder { margin-top: 48px; padding-top: 8px; scroll-margin-top: 110px; }
.order-step {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 22px 24px; margin-top: 18px; scroll-margin-top: 110px;
}
.step-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.step-head h3 { margin: 2px 0 4px; }
.step-head p { margin: 0; }
.step-num {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand); color: #fff; font-weight: 600; font-size: 1.05rem;
}
body.storefront .step-num { background: var(--burgundy); color: var(--gold-light); font-family: "Instrument Serif", Georgia, serif; font-size: 1.3rem; }

/* Cover style cards: a little book drawing shows what each style looks like. */
.cover-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cover-option { cursor: pointer; }
.cover-option input { position: absolute; opacity: 0; pointer-events: none; }
.cover-option-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; height: 100%;
  padding: 16px 10px 14px; border: 2px solid var(--line); border-radius: var(--radius); background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
body.storefront .cover-option-card { background: #fffdf8; }
.cover-option:hover .cover-option-card { border-color: var(--copper, var(--brand)); }
.cover-option input:checked + .cover-option-card {
  border-color: var(--brand); box-shadow: 0 0 0 3px rgba(92, 20, 36, 0.12); transform: translateY(-2px);
}
.cover-option input:focus-visible + .cover-option-card { outline: 2px solid var(--brand); outline-offset: 2px; }
.cover-option-name { font-weight: 600; color: var(--brand); }
.cover-option-desc { font-size: 0.82rem; color: var(--muted); line-height: 1.35; }
.cover-option input:checked + .cover-option-card .cover-option-name::before { content: "\2713  "; }

.cover-mock {
  position: relative; width: 62px; height: 78px; border-radius: 2px 5px 5px 2px; margin-bottom: 4px;
  background: var(--burgundy, #5c1424); box-shadow: inset 5px 0 0 rgba(0, 0, 0, 0.22), 0 3px 8px rgba(0, 0, 0, 0.18);
}
.cm-photo, .cm-title { position: absolute; display: none; }
.cm-photo {
  left: 12px; right: 8px; top: 12px; height: 38px; border-radius: 2px;
  background: linear-gradient(160deg, #f4e6b8 0%, #d8b48a 55%, #b87a48 100%);
}
.cm-title { left: 14px; right: 10px; height: 4px; border-radius: 2px; background: var(--gold, #e6cc85); box-shadow: 0 7px 0 -1px rgba(230, 204, 133, 0.6); }
.cover-mock--title .cm-title { display: block; top: 32px; }
.cover-mock--photo .cm-photo { display: block; }
.cover-mock--both .cm-photo { display: block; }
.cover-mock--both .cm-title { display: block; top: 58px; }

/* Preview + the fields the chosen style needs. */
.cover-workspace { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; margin-top: 22px; align-items: start; }
.cover-workspace.is-plain .cover-fields { display: none; }
.cover-workspace.is-plain { grid-template-columns: 220px; }
.cover-preview-label { margin: 0 0 8px; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.cover-preview {
  position: relative; width: 200px; aspect-ratio: 4 / 5; border-radius: 3px 8px 8px 3px; overflow: hidden;
  background: var(--burgundy, #5c1424); box-shadow: inset 9px 0 0 rgba(0, 0, 0, 0.22), 0 14px 30px rgba(0, 0, 0, 0.22);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 18px 16px 18px 26px;
}
.cp-photo {
  display: none; width: 100%; flex: 1; min-height: 0; border-radius: 2px; overflow: hidden;
  background: rgba(255, 255, 255, 0.12); border: 1px dashed rgba(244, 230, 184, 0.5);
  align-items: center; justify-content: center;
}
.cp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-photo-empty { color: rgba(244, 230, 184, 0.8); font-size: 0.8rem; text-align: center; padding: 8px; }
.cp-title {
  display: none; max-width: 100%; text-align: center; color: var(--gold, #e6cc85); overflow-wrap: anywhere;
  font-family: "Instrument Serif", Georgia, serif; font-size: 1.35rem; line-height: 1.1; letter-spacing: 0.04em; text-transform: uppercase;
}
.cover-preview[data-type="photo"] .cp-photo, .cover-preview[data-type="both"] .cp-photo { display: flex; }
.cover-preview[data-type="title"] .cp-title, .cover-preview[data-type="both"] .cp-title { display: block; }
.cover-preview[data-type="title"] .cp-title { font-size: 1.7rem; }

.cover-picker { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.cover-pick { position: relative; width: 84px; height: 84px; border-radius: 8px; overflow: hidden; cursor: pointer; border: 3px solid transparent; }
.cover-pick input { position: absolute; opacity: 0; pointer-events: none; }
.cover-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-pick:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(92, 20, 36, 0.15); }
.cover-pick:has(input:checked)::after {
  content: "Cover"; position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 0; text-align: center;
  background: var(--brand); color: #fff; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.cover-pick-tag {
  position: absolute; top: 4px; left: 4px; padding: 1px 6px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.92); color: var(--brand); font-size: 0.62rem; font-weight: 600;
}
.field .cover-upload-btn, .cover-upload-btn { cursor: pointer; display: inline-block; width: auto; margin: 0; }
.cover-upload-btn + .upload-status { margin-left: 10px; font-size: 0.88rem; }

/* Cover choice summary in the cart, checkout and order pages. */
.item-cover { margin-top: 6px; font-size: 0.88rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.item-cover img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); }
.item-cover-title { font-family: "Instrument Serif", Georgia, serif; font-size: 1.05rem; }

@media (max-width: 860px) {
  .cover-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cover-workspace, .cover-workspace.is-plain { grid-template-columns: 1fr; }
  .cover-preview-wrap { display: flex; flex-direction: column; align-items: center; }
  .cover-preview { width: 170px; }
}
@media (max-width: 480px) {
  .order-step { padding: 18px 14px 20px; }
  .cover-pick { width: calc(25% - 8px); height: auto; aspect-ratio: 1; }
}

/* Order page: progress of an M-Pesa prompt, shown outside the popup too. */
.alert-info { background: rgba(176, 138, 62, 0.12); color: var(--text-warm, #3b2f2a); border-left: 3px solid var(--gold-deep, #b08a3e); }
.stk-page-status { margin: 12px 0 0; font-size: 0.92rem; }

/* Footer: the shop's other names / what it sells, for people searching (see Seo::ALTERNATE_NAMES). */
.footer-aka { margin: 4px 0 0; font-size: 0.82em; opacity: 0.85; }

/* ---- "Rate us" panel, just above the footer (storefront) ---- */
.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; }
.review-panel { margin: 56px 0 0; scroll-margin-top: 110px; }
.review-card {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr); gap: clamp(24px, 4vw, 64px);
  align-items: start; padding: clamp(24px, 3.5vw, 44px);
  background: var(--paper, #fffaf1); border: 1px solid var(--line-warm, #e3d5bb); border-radius: var(--radius);
  box-shadow: inset 0 0 0 6px var(--paper, #fffaf1), inset 0 0 0 7px rgba(176, 138, 62, 0.35); /* thin gold inner frame */
}
.review-eyebrow { margin: 0; font-family: "Pinyon Script", cursive; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); color: var(--copper, #b87a48); line-height: 1; }
body.storefront .review-intro h2 { margin: 6px 0 14px; }
body.storefront .review-intro h2::after { display: none; }
.review-lead { margin: 0 0 18px; color: var(--muted-warm, #7d6e62); line-height: 1.6; max-width: 520px; }
.review-summary { margin: 0 0 18px; color: var(--text-warm, #3b2f2a); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rv-stars { letter-spacing: 2px; font-size: 1.05rem; }
.rv-star { color: #d9c9aa; }
.rv-star.is-on { color: var(--gold-deep, #b08a3e); }
.review-quotes { display: grid; gap: 14px; }
.review-quote { margin: 0; padding: 14px 18px; background: rgba(245, 238, 224, 0.6); border-left: 3px solid var(--gold-deep, #b08a3e); border-radius: 2px; }
.review-quote p { margin: 6px 0 6px; font-family: "Instrument Serif", Georgia, serif; font-size: 1.15rem; line-height: 1.4; color: var(--text-warm, #3b2f2a); }
.review-quote footer { font-size: 0.85rem; color: var(--muted-warm, #7d6e62); }
.review-google { margin-top: 18px; }

.review-form { background: #fffdf8; border: 1px solid var(--line-warm, #e3d5bb); border-radius: var(--radius); padding: 20px 20px 16px; }
body.storefront .review-form h3 { margin: 0 0 10px; }
.review-form .alert { margin-bottom: 12px; }
.review-form .hint { margin: 10px 0 0; }
.rv-picker { border: 0; margin: 0 0 12px; padding: 0; }
.rv-picker legend { padding: 0; margin-bottom: 4px; font-weight: 600; color: var(--burgundy, #5c1424); font-size: 0.92rem; }
/* Stars are written 5..1 and laid out reversed, so ":checked ~ label" lights a star and every one before it. */
.rv-picker-stars { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.rv-picker-stars input { position: absolute; opacity: 0; pointer-events: none; }
.rv-picker-stars label { font-size: 2rem; line-height: 1; color: #d9c9aa; cursor: pointer; transition: color 0.15s ease, transform 0.15s ease; }
.rv-picker-stars label:hover, .rv-picker-stars label:hover ~ label,
.rv-picker-stars input:checked ~ label { color: var(--gold-deep, #b08a3e); }
.rv-picker-stars label:hover { transform: scale(1.12); }
.rv-picker-stars input:focus-visible + label { outline: 2px solid var(--burgundy, #5c1424); outline-offset: 2px; border-radius: 2px; }
.rv-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 860px) { .review-card { grid-template-columns: 1fr; } }

/* Admin: reviews list */
.nav-count { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 6px; border-radius: 999px; background: var(--gold, #e6cc85); color: var(--burgundy, #5c1424); font-size: 0.75rem; font-weight: 700; text-align: center; line-height: 20px; }
.admin-rating { color: var(--gold-deep, #b08a3e); white-space: nowrap; letter-spacing: 1px; }
.review-filters a.active { font-weight: 700; text-decoration: underline; }
/* The panel sits outside <main>, so give it the theme's heading and button styles directly. */
body.storefront .review-panel h2, body.storefront .review-panel h3 {
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif; font-weight: 400; color: var(--burgundy);
}
body.storefront .review-panel h2 { text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.05; font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); }
body.storefront .review-panel h3 { font-size: 1.45rem; letter-spacing: 0.01em; }
body.storefront .review-panel .btn {
  background: var(--burgundy); color: var(--gold-light); border-color: var(--burgundy);
  font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.82rem; border-radius: 2px; padding: 11px 20px;
}
body.storefront .review-panel .btn:hover { background: var(--burgundy-dark); color: var(--gold); }
body.storefront .review-panel .btn-secondary { background: transparent; color: var(--burgundy); }
body.storefront .review-panel .btn-secondary:hover { background: var(--burgundy); color: var(--gold-light); }
body.storefront .review-panel .hint { color: var(--muted-warm); font-size: 0.85rem; }
body.storefront .review-panel .field label { color: var(--burgundy); font-weight: 600; }

/* Floating WhatsApp button (layouts/app.php) - round icon, bottom right on every shop page. */
.whatsapp-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25d366; color: #fff; text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.whatsapp-float svg { width: 32px; height: 32px; flex: none; }
.whatsapp-float:hover, .whatsapp-float:focus-visible {
  background: #1ebe5b; color: #fff; transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}
.whatsapp-float:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (max-width: 760px) {
  .whatsapp-float { right: 16px; bottom: 16px; width: 54px; height: 54px; }
  .whatsapp-float svg { width: 30px; height: 30px; }
}
@media print { .whatsapp-float { display: none; } }
@media (prefers-reduced-motion: reduce) { .whatsapp-float { transition: none; } }

/* ---- watch photo zoom (watches/show.php + app.js) ---- */
.gallery-zoomable { position: relative; cursor: zoom-in; }
.gallery-main-watch { aspect-ratio: 1 / 1; }           /* watch photos are ~square - don't crop the dial */
/* Photo column no wider than 76vh so the whole square photo fits on screen; details sit right beside it. */
@media (min-width: 761px) { .two-col-watch { grid-template-columns: minmax(0, 76vh) minmax(280px, 1fr); gap: 40px; } }
.gallery-zoomable:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.zoom-hint {
  position: absolute; right: 12px; bottom: 12px; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 255, 255, 0.88); color: #333;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); pointer-events: none;
}
.zoom-hint svg { width: 22px; height: 22px; }

body.zoom-open { overflow: hidden; }
.zoom-viewer {
  position: fixed; inset: 0; z-index: 1000; background: rgba(10, 6, 6, 0.94);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.zoom-stage { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: pinch-zoom; }
.zoom-stage img {
  max-width: min(94vw, 1400px); max-height: 84vh; object-fit: contain; display: block;
  cursor: zoom-in; user-select: none; -webkit-user-drag: none; transition: transform 0.25s ease;
}
.zoom-viewer.is-zoomed .zoom-stage img { cursor: grab; touch-action: none; }
.zoom-viewer.is-zoomed .zoom-stage img:active { transition: none; }
.zoom-close {
  position: absolute; top: 14px; right: 16px; z-index: 1; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer;
}
.zoom-close:hover, .zoom-close:focus-visible { background: rgba(0, 0, 0, 0.85); }
.zoom-tip { color: rgba(255, 255, 255, 0.7); font-size: 0.85rem; margin: 8px 0 16px; }
@media (prefers-reduced-motion: reduce) {
  .zoom-stage img, .card img, .gallery-main { transition: none; }
  .card:hover img, .gallery-frame:hover .gallery-main { transform: none; }
}