/* Design tokens come from css/tokens.css, loaded before this file. Fonts via <link>. */
/* ================================================================
   Klaros — Public Page Styles
   Canonical light design system (see docs/design-system.md)
   ================================================================ */


/* —— Dark theme: OS preference —— */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* —— Subtle background texture (replaces neon orbs) —— */
.page-bg {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}

/* —— Card container —— */
.page-container {
  position: relative; z-index: 1;
  max-width: 640px; margin: 40px auto; padding: 0 16px;
  animation: page-fade-in 0.5s ease-out;
}

@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.page-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* —— Cover / Banner —— */
.page-cover {
  height: 160px;
  background: var(--gradient-primary);
  position: relative;
  overflow: hidden;
}
.page-cover img {
  width: 100%; height: 100%; object-fit: cover;
}
.page-cover::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 50%, var(--surface));
}

/* —— Hero section —— */
.page-hero {
  padding: 0 32px 24px;
  margin-top: -56px;
  position: relative;
  text-align: center;
}

.avatar-wrapper {
  display: inline-block; position: relative; margin-bottom: 14px;
}
.avatar-ring {
  width: 112px; height: 112px; border-radius: 50%;
  padding: 3px;
  background: var(--gradient-primary);
}
.avatar-img {
  width: 100%; height: 100%; border-radius: 50%;
  object-fit: cover; border: 3px solid var(--surface);
  background: var(--surface-2);
}
.avatar-placeholder {
  width: 100%; height: 100%; border-radius: 50%;
  border: 3px solid var(--surface);
  /* Brand green like the rest of the page; this was the violet accent, which made the very
     first thing you look at belong to a different product. */
  background: var(--gradient-primary);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', Georgia, serif; font-size: 2.25rem; font-weight: 700;
  color: white; text-transform: uppercase;
}

.page-name {
  font-family: 'Fraunces', Georgia, serif; font-size: 1.65rem; font-weight: 700;
  color: var(--text); margin-bottom: 4px; letter-spacing: -0.02em;
}
.page-headline {
  font-size: var(--text-md); color: var(--text-secondary); margin-bottom: 10px;
}
.page-location {
  font-size: var(--text-sm); color: var(--dim);
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.page-whatsapp-line {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: var(--text-base); font-weight: 600; color: #25D366;
  text-decoration: none; margin-bottom: 8px;
}
.page-whatsapp-line:hover { text-decoration: underline; }

.page-stats {
  display: flex; justify-content: center; gap: 24px; margin-top: 14px;
  padding-top: 14px; border-top: 1px solid var(--border);
}
.stat-item { text-align: center; }
.stat-value {
  font-family: 'Fraunces', Georgia, serif; font-size: 1.2rem; font-weight: 700;
  color: var(--primary);
}
.stat-label { font-size: var(--text-2xs); color: var(--dim); text-transform: uppercase; letter-spacing: 0.08em; }

/* —— Claim banner —— */
.claim-banner {
  margin: 0 24px 16px; padding: 12px 16px; border-radius: var(--radius-sm);
  background: rgba(217,119,6,0.08); border: 1px solid rgba(217,119,6,0.18);
  display: flex; align-items: center; gap: 10px;
  font-size: var(--text-sm); color: var(--amber);
}
.claim-banner a {
  color: var(--amber); text-decoration: underline; font-weight: 600;
  transition: var(--transition);
}
.claim-banner a:hover { color: var(--amber); opacity: 0.8; }

/* —— CTA button row (card pages) —— */
.cta-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px;
  margin: 0 24px 20px;
}
.cta-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); text-decoration: none;
  font-size: var(--text-base); font-weight: 600;
  font-family: 'Inter', sans-serif; cursor: pointer;
  transition: var(--transition);
}
.cta-btn:hover {
  transform: translateY(-1px); border-color: var(--border-light);
  background: var(--surface-3);
}
.cta-btn.cta-whatsapp { background: rgba(37,211,102,0.10); border-color: rgba(37,211,102,0.25); color: #25D366; }
.cta-btn.cta-primary { background: var(--primary); color: #fff; border: none; }
.cta-btn.cta-primary:hover { background: var(--primary-dark); }

/* —— QR card section (card pages) —— */
.qr-card-section {
  padding: 24px 32px; border-top: 1px solid var(--border);
  text-align: center;
  background: var(--surface-2);
}
.qr-card-title {
  font-size: var(--text-sm); font-weight: 700; color: var(--dim);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px;
}
.qr-card-box {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px; background: #fff; border-radius: var(--radius-sm);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.qr-card-box svg { display: block; }
/* Collapsed by default: the QR is the owner's tool for showing their screen, not something a
   visitor who just scanned a code needs a screenful of. */
.qr-card-section.qr-collapsed .qr-card-body { display: none; }
.qr-card-toggle {
  background: none; border: 0; cursor: pointer; padding: 4px 2px;
  font-family: inherit; font-size: 0.8rem; font-weight: 600;
  color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px;
}
.qr-card-toggle:hover { color: var(--primary); }

/* Claim teaser as chips: says "there is more here" in a fraction of the height a full field list
   took, on a page that should be mostly card. */
.claim-field-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.claim-field-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 0.78rem; color: var(--text-secondary); cursor: pointer;
  transition: var(--transition);
}
.claim-field-chip:hover { border-color: var(--primary); color: var(--text); }
.claim-field-chip.more { cursor: default; opacity: 0.7; }
.qr-card-hint {
  margin-top: 10px; font-size: var(--text-sm); color: var(--text-secondary);
  line-height: 1.5;
}

/* —— Trial CTA (card pages) —— */
.trial-cta-section {
  padding: 28px 32px; border-top: 1px solid var(--border);
  text-align: center;
  background: linear-gradient(135deg, var(--primary-glow), var(--accent-glow));
}
.trial-cta-title {
  font-family: 'Fraunces', Georgia, serif; font-size: 1.15rem; font-weight: 700;
  color: var(--text); margin-bottom: 4px;
}
.trial-cta-desc { font-size: var(--text-sm); color: var(--dim); margin-bottom: 16px; }
.trial-cta-btn {
  display: inline-block; padding: 12px 26px; border-radius: var(--radius-sm);
  background: var(--primary); color: #fff; font-weight: 700;
  font-size: 0.9rem; text-decoration: none;
  transition: var(--transition);
}
.trial-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px var(--primary-glow); background: var(--primary-dark); }

/* —— Ownership strip (card pages) —— */
.own-strip {
  margin: 0 24px 20px; padding: 16px 18px; border-radius: var(--radius-sm);
  /* Brand green like every other action here. This was violet, which made the single most
     important control on the card look like it belonged to a different product. */
  background: var(--surface-2);
  border: 1px solid var(--border); border-left: 3px solid var(--primary);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
.own-copy { flex: 1 1 200px; min-width: 0; }
.own-title { font-size: 0.9rem; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.own-desc { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.5; }
.own-btn {
  flex: 0 0 auto; padding: 10px 18px; border-radius: var(--radius-sm);
  background: var(--primary); border: 0; color: #fff;
  font-family: inherit; font-size: var(--text-sm); font-weight: 700; cursor: pointer;
  transition: var(--transition);
}
.own-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px var(--primary-glow); }
.own-btn:disabled { opacity: 0.6; cursor: default; }
.own-result { flex: 1 1 100%; font-size: var(--text-sm); line-height: 1.5; }
.own-result:empty { display: none; }
/* The confirm step is the whole point of the strip once pressed, so the link is a full-width
   target rather than an inline anchor someone has to hunt for on a phone. */
.own-wa-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin: 10px 0 0; padding: 12px 14px;
  text-decoration: none;
}
.own-fineprint { margin-top: 8px; font-size: 0.75rem; color: var(--dim); }

/* —— Ask-about-Klaros dock ——
   Fixed rather than in-flow: it is an offer, not part of the card's content, and it must stay
   reachable on a long page without pushing the owner's own material down. */
.ask-dock {
  position: fixed; right: 18px; bottom: 18px; z-index: 40;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  max-width: calc(100vw - 36px);
}
.ask-bubble {
  position: relative; max-width: 280px;
  background: var(--surface-solid, var(--surface)); border: 1px solid var(--border-light);
  border-radius: 14px; padding: 16px 18px 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
}
.ask-bubble.collapsed { display: none; }
.ask-bubble-text { font-size: 0.84rem; color: var(--text); line-height: 1.5; padding-right: 14px; }
.ask-close {
  position: absolute; top: 6px; right: 8px; background: none; border: 0;
  color: var(--dim); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 2px 4px;
}
.ask-close:hover { color: var(--text); }
.ask-send {
  display: inline-block; margin-top: 12px; padding: 9px 16px; border-radius: var(--radius-sm);
  background: #25D366; color: #06281a; font-size: 0.82rem; font-weight: 700; text-decoration: none;
}
.ask-fab {
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: #25D366; color: #06281a;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(37,211,102,.35);
  transition: var(--transition);
}
.ask-fab:hover { transform: translateY(-2px); }
/* Owner-only, and deliberately quieter than the WhatsApp launcher: editing is a thing you go and
   do, not a thing the page should be selling you. Same dock so the two never collide. */
.own-edit-fab {
  order: -1;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 999px;
  background: var(--surface-solid, var(--surface));
  border: 1px solid var(--border-light); color: var(--text);
  font-size: 0.8rem; font-weight: 600; text-decoration: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.14);
}
.own-edit-fab:hover { border-color: var(--primary); color: var(--primary); }
@media (max-width: 480px) {
  .ask-dock { right: 12px; bottom: 12px; }
  .ask-bubble { max-width: calc(100vw - 24px); }
}
.own-result.ok { color: var(--primary); }
.own-result.err { color: var(--red); }

/* —— Connect form (card pages) —— */
.connect-form { display: flex; flex-direction: column; gap: 8px; max-width: 380px; margin: 0 auto; }
.connect-form .subscribe-btn { width: 100%; }

/* —— Returning-visitor "remembered" state (card pages) —— */
.welcome-back {
  max-width: 380px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.welcome-back-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 20px;
  background: var(--primary-glow); border: 1px solid rgba(5,150,105,0.25);
  color: var(--primary-dark); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.02em;
}
.welcome-back-note { font-size: var(--text-base); color: var(--text-secondary); line-height: 1.6; }
.welcome-back-reset {
  background: none; border: none; color: var(--dim);
  font-size: 0.76rem; font-family: 'Inter', sans-serif; cursor: pointer;
  text-decoration: underline; padding: 4px;
  transition: var(--transition);
}
.welcome-back-reset:hover { color: var(--text-secondary); }

/* —— Sections —— */
.page-section {
  padding: 24px 32px; border-top: 1px solid var(--border);
  animation: section-reveal 0.5s ease-out both;
}
.page-section:nth-child(2) { animation-delay: 0.08s; }
.page-section:nth-child(3) { animation-delay: 0.16s; }
.page-section:nth-child(4) { animation-delay: 0.24s; }
.page-section:nth-child(5) { animation-delay: 0.32s; }

@keyframes section-reveal {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.section-title {
  font-family: 'Fraunces', Georgia, serif; font-size: var(--text-2xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--dim); margin-bottom: 12px;
}

.page-bio {
  font-size: 0.9rem; color: var(--text-secondary); line-height: 1.7;
  white-space: pre-line;
}

/* —— Social links —— */
.social-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px;
}
.social-link {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); text-decoration: none;
  font-size: var(--text-base); font-weight: 500;
  transition: var(--transition);
}
.social-link:hover {
  background: var(--surface-3); border-color: var(--border-light);
  transform: translateY(-1px);
}
.social-link .icon { font-size: var(--text-lg); }
.social-link.website { color: var(--primary); }
.social-link.linkedin { color: #0A66C2; }
.social-link.twitter { color: #1DA1F2; }
.social-link.instagram { color: #E4405F; }
.social-link.github { color: var(--text); }
.social-link.email { color: var(--amber); }
.social-link.whatsapp { color: #25D366; }

/* —— Updates feed —— */
.updates-feed { display: flex; flex-direction: column; gap: 12px; }
.update-card {
  padding: 16px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border);
  transition: var(--transition);
}
.update-card:hover { border-color: var(--border-light); }
.update-title {
  font-weight: 600; font-size: var(--text-base); color: var(--text); margin-bottom: 6px;
}
.update-body { font-size: var(--text-base); color: var(--text-secondary); line-height: 1.6; }
.update-meta {
  font-size: var(--text-xs); color: var(--dim); margin-top: 8px;
  display: flex; align-items: center; gap: 6px;
}
.updates-empty {
  text-align: center; padding: 20px; color: var(--dim); font-size: var(--text-base);
}

/* —— Custom fields —— */
.custom-fields { display: flex; flex-direction: column; gap: 8px; }
.custom-field {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.custom-field:last-child { border-bottom: none; }
.custom-field.trust-field {
  background: var(--primary-glow);
  border: 1px solid rgba(5,150,105,0.15);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.field-icon { font-size: 1rem; opacity: 0.9; }
.field-label { font-size: var(--text-sm); color: var(--dim); text-transform: uppercase; letter-spacing: 0.05em; }
.field-value { font-size: var(--text-base); color: var(--text); font-weight: 500; }

/* —— Subscribe section —— */
.subscribe-section {
  padding: 28px 32px; border-top: 1px solid var(--border);
  text-align: center;
}
.subscribe-title {
  font-family: 'Fraunces', Georgia, serif; font-size: 1.05rem; font-weight: 600;
  color: var(--text); margin-bottom: 6px;
}
.subscribe-desc { font-size: var(--text-sm); color: var(--dim); margin-bottom: 16px; }
.subscribe-form { display: flex; gap: 8px; max-width: 380px; margin: 0 auto; }
.subscribe-input {
  flex: 1; padding: 11px 14px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); font-size: var(--text-base); font-family: 'Inter', sans-serif;
  outline: none; transition: var(--transition);
}
.subscribe-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.subscribe-input::placeholder { color: var(--dim); }
.subscribe-btn {
  padding: 11px 20px; border-radius: var(--radius-sm); border: none;
  background: var(--primary); color: #fff; font-weight: 600;
  font-size: var(--text-base); cursor: pointer; white-space: nowrap;
  transition: var(--transition); font-family: 'Inter', sans-serif;
}
.subscribe-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px var(--primary-glow); background: var(--primary-dark); }
.subscribe-btn:active { transform: translateY(0); }
.subscribe-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.subscribe-success {
  color: var(--primary-dark); font-size: var(--text-base); font-weight: 500;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.subscribe-error {
  color: var(--red); font-size: var(--text-sm); font-weight: 500;
  text-align: center; padding: 8px 12px; margin-bottom: 8px;
  background: rgba(220,38,38,0.06); border-radius: var(--radius-sm);
}

/* —— Share button —— */
.share-bar {
  display: flex; justify-content: center; padding: 16px 32px;
  border-top: 1px solid var(--border);
}
.share-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 20px;
  background: transparent; border: 1px solid var(--border);
  color: var(--text-secondary); font-size: var(--text-sm); cursor: pointer;
  transition: var(--transition); font-family: 'Inter', sans-serif;
}
.share-btn:hover { background: var(--surface-2); color: var(--text); }

/* —— Footer —— */
.page-footer {
  text-align: center; padding: 24px 32px;
  border-top: 1px solid var(--border);
}
.footer-brand {
  font-size: var(--text-xs); color: var(--dim);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.footer-brand a { color: var(--primary); text-decoration: none; font-weight: 600; }
.footer-brand-link {
  display: flex; align-items: center; gap: 6px;
  transition: var(--transition);
}
.footer-brand-link:hover { transform: translateY(-1px); }
.footer-logo { height: 20px; width: auto; vertical-align: middle; }
.footer-brand .uni-logo {
  font-family: 'Fraunces', Georgia, serif; font-weight: 800; font-size: var(--text-md);
  background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* —— Loading skeleton —— */
.skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, rgba(128,128,128,0.06) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s infinite; border-radius: var(--radius-xs); }
@keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton-avatar { width: 112px; height: 112px; border-radius: 50%; margin: 0 auto 14px; }
.skeleton-text { height: 16px; margin-bottom: 8px; }
.skeleton-text.lg { height: 24px; width: 60%; margin: 0 auto 8px; }
.skeleton-text.sm { height: 12px; width: 40%; margin: 0 auto; }

/* —— Error state —— */
.error-state {
  text-align: center; padding: 60px 32px;
}
.error-icon { font-size: 3rem; margin-bottom: 16px; opacity: 0.4; }
.error-title { font-family: 'Fraunces', Georgia, serif; font-size: var(--text-xl); font-weight: 700; margin-bottom: 8px; }
.error-desc { color: var(--dim); font-size: var(--text-base); }

/* —— Claim fields teaser (unclaimed card pages) —— */
.claim-fields-section {
  background: linear-gradient(135deg, var(--primary-glow), rgba(109,40,217,0.04));
}
.claim-fields-desc {
  font-size: var(--text-base); color: var(--text-secondary); line-height: 1.6; margin-bottom: 16px;
}
.claim-fields-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px;
}
.claim-field-cat-label {
  grid-column: 1 / -1;
  font-size: var(--text-2xs); color: var(--dim); text-transform: uppercase;
  letter-spacing: 0.08em; font-weight: 700;
  padding-top: 8px; margin-top: 2px;
}
.claim-field-cat-label:first-child { padding-top: 0; margin-top: 0; }
.claim-field-teaser {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border);
  cursor: pointer; transition: var(--transition);
  position: relative;
}
.claim-field-teaser:hover {
  border-color: var(--primary); background: var(--primary-glow);
  transform: translateY(-1px);
}
.claim-field-teaser:active { transform: translateY(0); }
.claim-field-teaser:hover::after {
  content: '✎'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: var(--text-xs); color: var(--primary); opacity: 0.7;
}
.claim-field-icon {
  width: 36px; height: 36px; border-radius:var(--radius);
  background: var(--surface-2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-lg); flex-shrink: 0;
}
.claim-field-info { min-width: 0; }
.claim-field-label {
  font-size: var(--text-2xs); color: var(--dim); text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 2px;
}
.claim-field-value {
  font-size: var(--text-base); color: var(--text); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.claim-field-value.empty { color: var(--dim); font-style: italic; font-weight: 400; }

/* —— Responsive —— */
@media (max-width: 680px) {
  .page-container { margin: 16px auto; padding: 0 8px; }
  .page-hero, .page-section, .subscribe-section, .qr-card-section, .share-bar, .page-footer { padding-left: 20px; padding-right: 20px; }
  .page-cover { height: 130px; }
  .page-name { font-size: 1.35rem; }
  .social-grid { grid-template-columns: repeat(2, 1fr); }
  .subscribe-form { flex-direction: column; }
  .claim-banner, .own-strip { margin: 0 16px 12px; }
  .cta-row { margin: 0 16px 16px; }
}

/* —— Print —— */
/* ── Product detail page ───────────────────────────────────────────────────────────────────────
   Replaces the business-card layout this page had borrowed. That gave a product a 160px letterbox
   band with a gradient fading its lower half into the background, which hid the one thing the page
   exists to show. One markup order, two shapes: stacked on a phone, image beside detail on a wide
   screen. Decided here rather than on the server, so the server never guesses a viewport. */

.product {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 16px;
}

.product-media { min-width: 0; }

/* The space is reserved before a single byte of the photograph arrives, so nothing below it moves
   when it lands. The img also carries width/height for the same reason. */
.product-photo,
.product-photo-empty {
  width: 100%;
  /* `height: auto` is what lets aspect-ratio win over the img's height ATTRIBUTE. Without it the
     element kept the attribute's 600px while the width shrank to the viewport, so on a phone the
     hero rendered 362x600 instead of the declared ratio. The attributes are still there, and still
     reserve the space that keeps CLS at zero; this just stops them fixing the final height.

     4:5 rather than square: sarees and most apparel are photographed portrait, and a square crop
     cuts the ends off the drape. It is also the ratio every major storefront settled on. */
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
  background: var(--surface-2);
}

.product-photo-empty { background: var(--gradient-primary); }

.product-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.product-thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  overflow: hidden;
  scroll-snap-align: start;
  transition: border-color 0.15s ease;
}

.product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-thumb.is-active { border-color: var(--primary); }
.product-thumb:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.product-detail { min-width: 0; }

.product-shop {
  margin: 0 0 6px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.product-name {
  margin: 0 0 10px;
  font-family: var(--font-display, inherit);
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--text);
}

.product-price {
  margin: 0 0 6px;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
}

.product-stock { margin: 0 0 14px; font-size: 0.9rem; color: var(--text-secondary); }
.product-stock.is-out { color: var(--danger, var(--text-secondary)); }

.product-section { margin-top: 22px; }
.product-desc { margin: 0; color: var(--text-secondary); line-height: 1.6; }

/* Wide screens: the photograph beside the decision, rather than the decision pushed below the
   fold. 520px keeps the image large without letting it dominate a desktop window. */
@media (min-width: 900px) {
  /* The shared card container is capped at 640px, which is right for a business card and far too
     narrow for two columns. Asking for a 520px image inside it left about sixty pixels for the
     detail column, and the product name wrapped one character per line. Caught by screenshotting
     the page rather than by any structural check: there was no overflow, and the breakpoint was
     present and applied. */
  .page-container-wide { max-width: 1040px; }

  .product {
    /* Proportional, not a fixed 520px, so the columns cannot outgrow whatever contains them. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    padding: 28px;
  }
  .product-name { font-size: 1.9rem; }
  /* A measure of roughly 70 characters. Full-width prose across half a desktop window is hard to
     read, and this description runs long. */
  .product-desc { max-width: 62ch; }
}

/* The price a sale replaced. Muted and struck, never the same weight as the price being charged. */
.price-was {
  margin-left: 8px;
  color: var(--text-secondary);
  font-weight: 400;
  text-decoration: line-through;
}

/* ── Product gallery and variants ──────────────────────────────────────────────────────────────
   Added 2026-09-18. The page showed one photograph of products that averaged 2.8, and nothing at
   all of a variant group. Both follow Baymard's product-page findings: show the range rather than
   hide it, and keep option selection visible rather than inside a control that has to be opened. */

.product-thumbs {
  display: flex;
  gap: 8px;
  padding: 12px 16px 0;
  overflow-x: auto;
  /* Momentum scrolling with the strip snapping to a thumbnail, so a half-cut photograph is never
     the resting state on a narrow phone. */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.product-thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  overflow: hidden;
  scroll-snap-align: start;
  transition: border-color 0.15s ease;
}

.product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-thumb.is-active { border-color: var(--primary); }
.product-thumb:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.product-shop {
  margin: 0 0 4px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.variant-row { display: flex; flex-wrap: wrap; gap: 8px; }

.variant-chip {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 0.9rem;
  text-decoration: none;
}

.variant-chip.is-current {
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}

/* Greyed and struck through, never removed: a customer who returns for the option that was out of
   stock must still be able to see it exists and ask about it. Deliberately still a link. */
.variant-chip.is-unavailable {
  color: var(--text-secondary);
  border-style: dashed;
  text-decoration: line-through;
}

@media print {
  body { background: white; color: black; }
  .page-bg, .subscribe-section, .share-bar { display: none; }
  .page-card { box-shadow: none; border: 1px solid #ddd; }
}