/* The jewellery catalogue, the buyer's page (HANDOVER.md §4z20), in the shop's own colours: the
   --client-* tokens src/tenant-theme.js writes into the page, with the platform's as fallbacks.
   Light only, like every client board. Phone first. Laid out to Codex's approved catalogue design
   (30 Sep 2026): the header and the credits line stay the site's own. Also the shop's product
   pages (/products, src/catalogue/site.js), which share the cards, chips and piece layout. */
:root {
  --cb-primary: var(--client-primary, #14213d);
  --cb-on-primary: var(--client-on-primary, #fff);
  --cb-accent: var(--client-accent, var(--cb-primary));
  --cb-bg: var(--client-bg, #fff);
  --cb-surface: var(--client-surface, #fff);
  --cb-surface-alt: var(--client-surface-alt, #f2f8fd);
  --cb-ink: var(--client-ink, #111);
  --cb-muted: var(--client-muted, #6b7280);
  --cb-line: var(--client-line, #e2e8f0);
  --cb-control: var(--client-control, #828997);
  /* The shop's own meaning colours (src/tenant-theme.js checks them at 4.5:1 on every ground). */
  --cb-warn: var(--warning, #8a5700);
  --cb-alert: var(--danger, #a63d40);
  color-scheme: light;
  font: 16px/1.5 Inter, 'Segoe UI', Arial, sans-serif;
}
* { box-sizing: border-box; }
body.cb { margin: 0; background: var(--cb-bg); color: var(--cb-ink); }
.cb-skip { position: absolute; left: -999px; }
.cb-skip:focus { left: 16px; top: 8px; z-index: 50; background: var(--cb-surface); padding: 8px 12px; }
button, input, select { font: inherit; }
:focus-visible { outline: 3px solid var(--cb-accent); outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }

/* The site's own header (a stand-in in the design; this one stays). */
.cb-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--cb-line); background: var(--cb-surface); position: sticky; top: 0; z-index: 10; }
.cb-brand { display: flex; align-items: center; gap: 10px; color: var(--cb-ink); text-decoration: none; min-width: 0; }
.cb-brand__mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--cb-primary); color: var(--cb-on-primary); font-weight: 700; flex: none; }
.cb-brand__logo { width: 36px; height: 36px; object-fit: contain; border-radius: 8px; flex: none; }
.cb-brand__name { font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-brand__name small { font-weight: 500; color: var(--cb-muted); }
.cb-top__end { display: flex; align-items: center; gap: 4px; flex: none; }
.cb-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; color: var(--cb-accent); font-size: 14px; text-decoration: none; border-radius: 5px; }
.cb-link:hover { text-decoration: underline; }

/* The page head: the shop, the collection, and today's rate beside it. */
.cb-main { max-width: 1280px; margin: 0 auto; padding: 24px 16px 40px; }
.cb-head { padding: 8px 0 20px; }
.cb-eyebrow { font-size: 12px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--cb-muted); font-weight: 600; margin: 0 0 10px; }
.cb-head h1 { font-size: 32px; line-height: 1.2; font-weight: 500; letter-spacing: -1px; overflow-wrap: anywhere; }
.cb-intro { margin-top: 16px; max-width: 560px; color: var(--cb-muted); }
.cb-rate { margin-top: 20px; font-size: 14px; color: var(--cb-muted); }
.cb-rate--paused { color: var(--cb-warn); }
.cb-rate--held { visibility: hidden; }
/* Its line kept before the script writes it (§4z121), so nothing below moves when it does. */
.cb-rate:empty { min-height: 1.5em; min-height: 1lh; }
.cb-loading { color: var(--cb-muted); padding: 32px 0; text-align: center; }
.cb-rate__retry { margin-top: 8px; }

/* Skeletons while the catalogue or a piece loads: the space kept, nothing to read (gap review B15). */
.cb-skel .cb-card__photo, .cb-skel__box, .cb-skel__line { background: var(--cb-surface-alt); }
.cb-skel__box { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; }
.cb-skel__line { display: block; height: 14px; margin: 16px 0 0; border-radius: 4px; width: 80%; }
.cb-skel__line--short { width: 50%; margin-top: 10px; }
/* The card's own parts with nothing to read (§4z121): their room kept, a quiet bar where words go. */
.cb-skel__text { color: transparent; background: var(--cb-surface-alt); border-radius: 4px; width: 80%; }
.cb-card__meta.cb-skel__text { width: 55%; }
.cb-price.cb-skel__text { width: 65%; }
.cb-count.cb-skel__text { display: inline-block; width: 6em; }
.cb-btn.cb-skel__btn { color: transparent; background: var(--cb-surface-alt); border-color: transparent; cursor: default; }
@media (prefers-reduced-motion: no-preference) {
  .cb-skel .cb-card__photo, .cb-skel__box, .cb-skel__line, .cb-skel__text, .cb-skel__btn { animation: cb-pulse 1.4s ease-in-out infinite; }
}
@keyframes cb-pulse { 50% { opacity: 0.55; } }

/* Chips: categories, photos. Selected is a solid fill. */
.cb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.cb-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 10px 14px; border: 1px solid var(--cb-control); border-radius: 6px; background: var(--cb-surface); color: var(--cb-ink); font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; }
.cb-chip:hover { border-color: var(--cb-primary); }
.cb-chip[aria-pressed='true'], a.cb-chip[aria-current='page'] { background: var(--cb-primary); border-color: var(--cb-primary); color: var(--cb-on-primary); font-weight: 600; }
.cb-tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 20px 0; }
.cb-count { font-size: 14px; color: var(--cb-muted); }

/* Buttons. */
.cb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 10px 16px; border: 1px solid var(--cb-control); border-radius: 6px; background: var(--cb-surface); color: var(--cb-ink); font-size: 14px; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; overflow-wrap: anywhere; }
.cb-btn:hover { border-color: var(--cb-primary); }
.cb-btn--primary, .cb-btn[aria-pressed='true'] { background: var(--cb-primary); border-color: var(--cb-primary); color: var(--cb-on-primary); }
.cb-btn--block { width: 100%; }
.cb-btn[disabled] { cursor: not-allowed; color: var(--cb-muted); background: var(--cb-surface-alt); border-color: var(--cb-line); }
.cb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }
.cb-actions--center { justify-content: center; }

/* Photo cards. */
.cb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; list-style: none; margin: 0; padding: 0; }
.cb-card { display: flex; flex-direction: column; min-width: 0; }
.cb-card__open { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; flex: 1; padding: 0; border: 0; background: none; font: inherit; text-align: left; color: inherit; cursor: pointer; text-decoration: none; min-height: 44px; }
.cb-card__photo { position: relative; display: block; overflow: hidden; aspect-ratio: 1 / 1; border-radius: 8px; background: var(--cb-surface-alt); }
.cb-card__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cb-card__noimg { display: grid; place-items: center; width: 100%; height: 100%; aspect-ratio: 1 / 1; padding: 12px; text-align: center; font-size: 14px; color: var(--cb-muted); background: var(--cb-surface-alt); }
.cb-card__title { display: block; margin: 16px 0 6px; font-size: 16px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.cb-card__meta { display: block; min-height: 1.5em; margin: 0 0 10px; font-size: 14px; color: var(--cb-muted); }
.cb-card__price { display: block; }
.cb-card .cb-btn { width: 100%; margin-top: 12px; font-size: 12px; padding: 10px 6px; }
.cb-badge { position: absolute; top: 12px; left: 12px; padding: 4px 9px; border: 1px solid var(--cb-line); border-radius: 4px; background: var(--cb-surface); color: var(--cb-ink); font-size: 12px; font-weight: 600; }

/* Prices: final, GST included; "Ask for price" and the wait carry the same weight. */
.cb-price { display: block; margin: 6px 0; font-size: 24px; line-height: 1.25; font-weight: 700; letter-spacing: -0.3px; font-variant-numeric: lining-nums tabular-nums; }
.cb-gst { display: block; font-size: 12px; color: var(--cb-muted); }
.cb-more { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 32px 0; }

/* The list bar: quiet, above everything, only while pieces are chosen. */
.cb-basket { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); width: min(600px, calc(100% - 32px)); z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; background: var(--cb-surface); border: 1px solid var(--cb-primary); border-radius: 10px; box-shadow: 0 8px 30px color-mix(in srgb, var(--cb-ink) 10%, transparent); }
.cb-basket span { font-size: 12px; }
.cb-basket .cb-btn { font-size: 12px; }
body.cb:has(.cb-basket:not([hidden])) { padding-bottom: 96px; }

/* Sheets: a piece, filters, the enquiry. A bottom sheet on a phone. */
.cb-dialog { width: 100%; max-width: 100%; max-height: 92dvh; margin: auto 0 0; padding: 0; border: 1px solid var(--cb-line); border-radius: 14px 14px 0 0; background: var(--cb-surface); color: var(--cb-ink); overflow: auto; }
.cb-dialog::backdrop { background: color-mix(in srgb, var(--cb-ink) 40%, transparent); }
.cb-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; border-bottom: 1px solid var(--cb-line); position: sticky; top: 0; background: var(--cb-surface); z-index: 2; }
.cb-dialog__head h2 { font-size: 24px; line-height: 1.3; font-weight: 600; letter-spacing: -0.4px; overflow-wrap: anywhere; }
.cb-dialog__close { flex: none; white-space: nowrap; }
#cb-dialog-body { padding: 20px; }

/* A piece's photos: one in view, the others a swipe or a Photo button away. */
.cb-photos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 8px; background: var(--cb-surface-alt); }
.cb-photos::-webkit-scrollbar { display: none; }
.cb-photos img, .cb-photos .cb-card__noimg { flex: none; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; scroll-snap-align: start; }
.cb-chips--photos { margin: 16px 0 0; }
.cb-detail { margin-top: 20px; }
.cb-detail__price .cb-price { font-size: 32px; letter-spacing: -0.6px; margin: 0 0 4px; }
.cb-detail__price .cb-gst { font-size: 14px; }
.cb-specs { margin: 16px 0; font-size: 14px; }
.cb-specs div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--cb-line); }
.cb-specs dt { color: var(--cb-muted); }
.cb-specs dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.cb-desc { margin: 16px 0; white-space: pre-line; }
.cb-stack { display: grid; gap: 12px; }
.cb-note { display: block; margin: 12px 0; font-size: 14px; line-height: 1.6; color: var(--cb-muted); }
.cb-banner { margin: 16px 0; padding: 16px 20px; border: 1px solid var(--cb-line); border-left: 3px solid var(--cb-primary); border-radius: 6px; background: var(--cb-surface-alt); font-size: 14px; }

/* The enquiry list and forms. */
.cb-list { list-style: none; margin: 0 0 8px; padding: 0; }
.cb-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--cb-line); font-size: 14px; }
.cb-list li .cb-note { margin: 8px 0 0; }
.cb-form { display: grid; gap: 0; margin-top: 12px; }
.cb-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.cb-field { display: grid; gap: 8px; margin-bottom: 18px; font-size: 14px; min-width: 0; }
.cb-field input, .cb-field select { width: 100%; min-width: 0; min-height: 48px; padding: 12px; border: 1px solid var(--cb-control); border-radius: 6px; background: var(--cb-surface); color: var(--cb-ink); }
.cb-field input:disabled { background: var(--cb-surface-alt); }
.cb-check { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 0; margin-bottom: 8px; font-size: 14px; cursor: pointer; }
.cb-check input { width: 22px; height: 22px; flex: none; accent-color: var(--cb-primary); }
.cb-error { color: var(--cb-alert); font-size: 14px; min-height: 1em; margin-bottom: 12px; }
.cb-error:empty { margin: 0; }
.cb-field-error { color: var(--cb-alert); font-size: 14px; }
.cb-field-error:empty { display: none; }
.cb-field input[aria-invalid='true'] { border-color: var(--cb-alert); }
/* The mobile number: +91 shown on its own, ten digits typed beside it (otp-login). */
.cb-phone { display: flex; align-items: stretch; min-width: 0; }
.cb-phone__cc { display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--cb-control); border-right: 0; border-radius: 6px 0 0 6px; background: var(--cb-surface-alt); color: var(--cb-ink); font-weight: 600; }
.cb-field .cb-phone input { border-radius: 0 6px 6px 0; }
#cb-filters .cb-actions { margin-top: 4px; }

/* Pages instead of the list: the passcode, "not available", "enquiry ready". */
.cb-card-box { background: var(--cb-surface); border: 1px solid var(--cb-line); border-radius: 10px; padding: 20px; margin: 0 auto 20px; min-width: 0; }
.cb-card-box h2 { font-size: 24px; line-height: 1.3; font-weight: 600; letter-spacing: -0.4px; margin-bottom: 12px; }
.cb-card-box > p { font-size: 14px; }
.cb-card-box--gate { max-width: 480px; }
.cb-card-box--narrow { max-width: 640px; }
.cb-card-box .cb-form { margin-top: 16px; }
.cb-message { margin: 24px 0; padding: 20px; border: 1px solid var(--cb-line); border-radius: 8px; background: var(--cb-surface-alt); font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; }
.cb-state { padding: 40px 20px; text-align: center; border: 1px solid var(--cb-line); border-radius: 10px; }
.cb-state h2 { font-size: 24px; line-height: 1.3; font-weight: 600; letter-spacing: -0.4px; }
.cb-state p { max-width: 460px; margin: 16px auto; color: var(--cb-muted); }

/* The credits line: the site's own. */
.cb-foot { max-width: 1280px; margin: 0 auto; padding: 0 16px 24px; }

@media (min-width: 768px) {
  .cb-main { padding: 32px 24px 100px; }
  .cb-foot { padding: 0 24px 24px; }
  .cb-top { padding: 16px 24px; }
  .cb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; }
  .cb-card__title { font-size: 18px; }
  .cb-card .cb-btn { font-size: 14px; padding: 10px 16px; }
  .cb-head h1 { font-size: 48px; letter-spacing: -1.4px; }
  .cb-dialog { width: min(640px, calc(100% - 32px)); max-height: 90dvh; margin: auto; border-radius: 12px; }
  .cb-dialog__head { padding: 20px 24px; }
  #cb-dialog-body { padding: 24px; }
  #cb-dialog-body > .cb-photos, #cb-dialog-body > .cb-chips--photos { max-width: 330px; margin-left: auto; margin-right: auto; }
  .cb-form-grid { gap: 0 20px; }
  .cb-card-box { padding: 24px; }
  .cb-state { padding: 64px 24px; }
  .cb-basket { padding: 14px 20px; gap: 16px; }
  .cb-basket span, .cb-basket .cb-btn { font-size: 14px; }
  .cb-foot { padding: 0 24px 24px; }
}
@media (min-width: 1100px) {
  .cb-main { padding: 40px 48px 100px; }
  .cb-head { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 32px; align-items: end; padding: 20px 0 28px; }
  .cb-head .cb-rate { margin-top: 0; border-left: 1px solid var(--cb-line); padding-left: 24px; }
  .cb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cb-foot { padding: 0 48px 24px; }
}
@media (max-width: 420px) {
  .cb-link { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* The shop's product pages (§4z20 part 4): breadcrumbs, pages, a piece's own page. */
.cb-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; margin: 0 0 24px; padding: 0; font-size: 14px; }
.cb-crumbs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border: 1px solid var(--cb-control); border-radius: 6px; color: var(--cb-ink); font-weight: 600; text-decoration: none; }
.cb-crumbs a:hover { border-color: var(--cb-primary); }
.cb-crumbs li[aria-current] { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
.cb-pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 32px 0; }
.cb-pager .cb-count { color: var(--cb-ink); }
.cb-piece { display: grid; gap: 24px; }
.cb-piece__info h1 { font-size: 32px; line-height: 1.2; font-weight: 500; letter-spacing: -0.8px; overflow-wrap: anywhere; }
.cb-piece__info .cb-detail__price { margin-top: 20px; }
.cb-piece__info .cb-rate { margin-top: 4px; }
.cb-piece .cb-chips--photos { margin-top: 16px; }
@media (min-width: 800px) {
  .cb-piece { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; gap: 48px; }
  .cb-piece__info h1 { font-size: 32px; }
}

/* Inside the shop's site (Harshal, 1 Oct 2026): the jewellery pages wear the board's header, menu
   and phone tab bar (src/site-chrome.js). The page keeps the site's 1280 px box with 24 px sides,
   and on a phone nothing sits under the pinned tab bar: the page ends above it and the list bar
   rides above it. */
body.cb-site .client-header a { text-decoration: none; }
body.cb-site .client-header .client-brand__name { font-size: inherit; letter-spacing: inherit; line-height: 1.2; }
@media (min-width: 1100px) {
  body.cb-site .cb-main { padding: 40px 24px 100px; }
  body.cb-site .cb-foot { padding: 0 24px 24px; }
}
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
  body.cb-site { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  body.cb-site .cb-basket { bottom: calc(80px + env(safe-area-inset-bottom)); }
  body.cb-site:has(.cb-basket:not([hidden])) { padding-bottom: calc(160px + env(safe-area-inset-bottom)); }
}

/* The collection's own cover above its pieces (HANDOVER.md §4z40). */
.cb-cover {
  margin: 0 0 24px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--client-surface-alt, #f2f8fd);
}
.cb-cover img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: cover;
}
/* The footer comes with the list (§4z121): it never slides up past a shorter answer than the shape. */
body:has(#cb-app[aria-busy='true']) .cb-foot { display: none; }
/* A state in place of the list starts where the list's count row does (§4z121). */
#cb-app > .cb-state:first-child { margin-top: 20px; }