/* Sterling Guild: shared styles for every page. Order matters: base, homepage, then type and logo overrides. */
  :root {
    /* Tile colour must match the background of the product photos.
       If the feed images turn out not to be on white, change --tile only. */
    --page: #FFFFFF;
    --tile: #FFFFFF;
    --placeholder: #EDEDED;
    --ink: #000000;
    --muted: #6A6A6A;
    --faint: #B5B5B5;
    --rule: #DADADA;
    --field: #F4F4F4;
    --sans: "Jost", "Futura", "Century Gothic", "Helvetica Neue", Arial, sans-serif;
    --edge: clamp(1rem, 4vw, 3rem);
  }
  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0; background: var(--page); color: var(--ink);
    font: 400 1rem/1.45 var(--sans); -webkit-font-smoothing: antialiased;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  button, input { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
  :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  [hidden] { display: none !important; }

  /* ---- Top bar: name, search, filter. Stays on screen. ---- */
  .bar {
    position: sticky; top: 0; z-index: 10; background: var(--page);
    border-bottom: 1px solid var(--rule);
    padding: env(safe-area-inset-top, 0px) var(--edge) 0;
  }
  .bar-row { display: flex; align-items: center; gap: 0.5rem; height: 3.5rem; }
  .wordmark {
    margin-right: auto; white-space: nowrap; color: var(--ink); text-decoration: none;
    font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); font-weight: 600; font-stretch: 125%; letter-spacing: -0.01em;
  }
  .bar-btn {
    display: inline-flex; align-items: center; gap: 0.45rem; height: 2.75rem; padding: 0 0.5rem;
    font-size: 0.9375rem; font-weight: 500;
  }
  /* Below 400px Search shows its icon only; Filter keeps its word for the count. */
  @media (max-width: 399px) { #search-btn .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
  .bar-btn svg { width: 1rem; height: 1rem; }
  .bar-btn .badge {
    min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem; display: inline-grid; place-items: center;
    background: var(--ink); color: var(--page); font-size: 0.75rem; font-weight: 600;
  }
  .bar-btn .badge:empty { display: none; }
  .search-row { display: flex; gap: 0.5rem; align-items: center; padding-bottom: 0.75rem; }
  .search-row input {
    flex: 1; min-width: 0; height: 2.75rem; padding: 0 0.9rem; border: 0; background: var(--field);
    font-size: 16px; border-radius: 0; -webkit-appearance: none;
  }
  .search-row input:focus { outline: 2px solid var(--ink); outline-offset: -2px; }
  .search-row button { height: 2.75rem; padding: 0 0.5rem; font-weight: 500; }

  /* Top bar: search left, name centred, saved bag right. */
  .bar-row { display: grid !important; grid-template-columns: 1fr auto 1fr; }
  .bar-row #search-btn { justify-self: start; padding-left: 0; }
  .bar-row .wordmark { justify-self: center; margin: 0 !important; }
  .wordmark.placeholder { padding: 0.15rem 0.6rem; border: 1px dashed var(--muted); color: var(--muted); font-size: 0.875rem; font-stretch: 100%; letter-spacing: 0.04em; }
  .bar-row #bag-btn { justify-self: end; padding-right: 0; }

  /* Moving bar: one short message at a time. */
  .ticker {
    position: relative; height: 2.5rem; border-bottom: 1px solid var(--rule); overflow: hidden;
    font-size: 0.8125rem; font-weight: 500; text-align: center;
  }
  .ticker span {
    position: absolute; inset: 0; display: grid; place-items: center; padding: 0 var(--edge);
    opacity: 0; transform: translateX(calc(var(--sweep) * 3)); filter: blur(6px);
    transition: opacity var(--d-ticker) var(--glide), transform var(--d-ticker) var(--glide), filter var(--d-ticker) var(--glide);
  }
  .ticker span.on { opacity: 1; transform: none; filter: none; }
  .ticker span.out { opacity: 0; transform: translateX(calc(var(--sweep) * -3)); filter: blur(6px); }

  .crumbs { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 1rem var(--edge) 0; font-size: 0.8125rem; color: var(--muted); }
  .crumbs a { color: var(--ink); text-decoration: none; }
  .crumbs .sep { color: var(--faint); }

  /* Sort and Filter, side by side; they stay under the top bar while scrolling. */
  .controls {
    position: sticky; top: var(--bar-h, 3.5rem); z-index: 9; background: var(--page);
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; padding: 0.75rem var(--edge);
  }
  .ctl {
    position: relative; display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    height: 3rem; border: 1px solid var(--rule); background: var(--page);
    font-size: 0.9375rem; font-weight: 600; font-stretch: 112%; text-align: center; cursor: pointer;
  }
  .ctl svg { width: 1rem; height: 1rem; }
  .ctl select { position: absolute; inset: 0; width: 100%; opacity: 0; font-size: 16px; cursor: pointer; }
  .ctl:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
  .ctl .badge {
    min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem; display: inline-grid; place-items: center;
    background: var(--ink); color: var(--page); font-size: 0.75rem; font-weight: 600; font-stretch: 100%;
  }
  .ctl .badge:empty { display: none; }

  /* ---- Headline ---- */
  header { padding: clamp(1.25rem, 5vw, 3rem) var(--edge) clamp(1.25rem, 3vw, 2rem); }
  h1 {
    margin: 0; max-width: 11ch;
    font: 600 clamp(2rem, 8.5vw, 4.5rem)/1 var(--sans); font-stretch: 125%; letter-spacing: -0.02em;
  }

  .status { display: flex; align-items: baseline; gap: 1rem; margin: 0 var(--edge) 1rem; font-size: 0.8125rem; color: var(--muted); }
  .status button { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; font-size: 0.8125rem; }

  /* ---- Grid: watches share 1px rules, edge to edge ---- */
  .grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
    background: var(--rule); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  }
  @media (min-width: 760px)  { .grid { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 1200px) { .grid { grid-template-columns: repeat(4, 1fr); } }
  @media (min-width: 1600px) { .grid { grid-template-columns: repeat(5, 1fr); } }
  @media (min-width: 2200px) { .grid { grid-template-columns: repeat(6, 1fr); } }
  /* Very wide screens: keep text lines and the page edge comfortable. */
  @media (min-width: 1600px) { :root { --edge: 4rem; } }
  .grid > li { background: var(--page); min-width: 0; }
  .card { display: block; width: 100%; padding: 0 0 1.1rem; background: var(--page); }
  a.card { color: inherit; text-decoration: none; text-align: left; }   /* real watches: the card links to the watch's page */
  .tile { aspect-ratio: 1 / 1; background: var(--tile); display: grid; place-items: center; overflow: hidden; }
  .tile img { width: 100%; height: 100%; object-fit: contain; padding: 12%; }
  .tile .ph { width: 76%; aspect-ratio: 1; background: var(--placeholder); }
  .cap { display: block; padding: 0 clamp(0.75rem, 2vw, 1.25rem); overflow-wrap: anywhere; }
  .cap .brand { display: block; font-size: 0.75rem; color: var(--muted); }
  .cap .model {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    font-size: 0.875rem; line-height: 1.3;
  }
  .cap .price { display: block; margin-top: 0.5rem; font-size: 0.9375rem; font-weight: 600; font-stretch: 125%; font-variant-numeric: tabular-nums; }
  .cap .price.por { font-size: 0.875rem; font-weight: 400; font-stretch: 100%; }
  .test-tag {
    display: inline-block; margin-top: 0.5rem; padding: 0.15rem 0.45rem; border: 1px dashed #B42318; color: #B42318;
    font-size: 0.625rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  }
  .draft {
    display: inline-block; margin-top: 0.5rem; font-size: 0.6875rem; color: var(--muted);
    border: 1px dashed var(--muted); padding: 0.1rem 0.35rem;
  }
  .empty { grid-column: 1 / -1; padding: 3rem var(--edge); color: var(--muted); background: var(--page); }
  .empty button { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; margin-left: 0.5rem; }
  /* "Show more" under the Watches grid: the page draws about 24 watches at a time. */
  .more-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 0.5rem var(--edge) 3rem; }
  .more-wrap[hidden] { display: none; }
  .more-wrap p { margin: 0; font-size: 0.8125rem; color: var(--muted); }
  .more-wrap .btn { min-width: min(100%, 16rem); }

  /* ---- Filter sheet ---- */
  /* Side drawers. Each comes out from the side of the button that opens it:
     Filter (left button) from the left, Saved (bag, top right) from the right.
     They stop short of the far edge, so the watches stay visible beside them. */
  .sheet {
    width: min(440px, 86vw); max-width: none; height: 100%; max-height: 100%; margin: 0 0 0 auto; padding: 0;
    border: 0; border-left: 1px solid var(--rule); background: var(--page); color: var(--ink);
    display: none; flex-direction: column; box-shadow: -24px 0 48px rgba(0, 0, 0, 0.08);
  }
  .sheet[open] { display: flex; animation: drawer-from-right var(--d-mid) var(--glide); }
  .sheet.closing { animation: drawer-to-right var(--d-close) var(--ease-in) forwards; }
  .sheet.left { margin: 0 auto 0 0; border-left: 0; border-right: 1px solid var(--rule); box-shadow: 24px 0 48px rgba(0, 0, 0, 0.08); }
  .sheet.left[open] { animation: drawer-from-left var(--d-mid) var(--glide); }
  .sheet.left.closing { animation: drawer-to-left var(--d-close) var(--ease-in) forwards; }
  .sheet::backdrop { background: rgba(0, 0, 0, 0.22); animation: fade-in var(--d-mid) var(--glide); }
  @keyframes drawer-from-left  { from { transform: translateX(-100%); } to { transform: none; } }
  @keyframes drawer-to-left    { to   { transform: translateX(-100%); } }
  @keyframes drawer-from-right { from { transform: translateX(100%); } to { transform: none; } }
  @keyframes drawer-to-right   { to   { transform: translateX(100%); } }
  .sheet-head { padding-top: max(0.75rem, env(safe-area-inset-top, 0px)); }

  /* Hearts */
  .grid > li { position: relative; }
  .heart {
    position: absolute; top: 0.35rem; right: 0.35rem; z-index: 1;
    width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  }
  .heart svg, .save svg, .bag svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
  .heart[aria-pressed="true"] svg, .save[aria-pressed="true"] svg { fill: currentColor; }
  .save {
    display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1rem; height: 2.75rem;
    font-weight: 500; font-size: 0.9375rem;
  }
  @keyframes pop { 40% { transform: scale(1.14); } }
  .heart.pop svg, .save.pop svg { animation: pop 520ms var(--ease); }
  .heart svg path, .save svg path { transition: fill var(--d-short) var(--ease); }

  /* Saved list */
  .saved-row { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid var(--rule); }
  .saved-row .open-w { display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.9rem; align-items: center; min-width: 0; }
  .saved-row .tile { width: 4.5rem; aspect-ratio: 1; }
  .saved-row .tile .ph { width: 80%; }
  .saved-row .txt { min-width: 0; }
  .saved-row .b { display: block; font-size: 0.75rem; color: var(--muted); }
  .saved-row .m { display: block; font-size: 0.9375rem; font-weight: 500; }
  .saved-row .p { display: block; font-size: 0.875rem; font-weight: 600; font-stretch: 112%; margin-top: 0.2rem; }
  .saved-row .heart { position: static; }
  .saved-empty { padding: 2rem 0; color: var(--muted); max-width: 30ch; }
  .sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: max(0.75rem, env(safe-area-inset-top, 0px)) var(--edge) 0.75rem; border-bottom: 1px solid var(--rule);
  }
  .sheet-head h2 { margin: 0; font-size: 1.25rem; font-weight: 600; font-stretch: 112%; }
  .sheet-head button { height: 2.5rem; padding: 0 0.5rem; font-weight: 500; }
  .sheet-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 var(--edge); }
  .facet { border-bottom: 1px solid var(--rule); }
  .facet summary {
    display: flex; align-items: center; gap: 1rem; padding: 1.05rem 0; cursor: pointer; list-style: none;
  }
  .facet summary::-webkit-details-marker { display: none; }
  .facet summary .name { font-weight: 600; }
  .facet summary .current { margin-left: auto; color: var(--muted); font-size: 0.875rem; text-align: right; }
  .facet summary::after {
    content: ""; width: 0.45rem; height: 0.45rem; border-right: 1.5px solid; border-bottom: 1.5px solid;
    transform: rotate(45deg) translateY(-2px); flex: none;
  }
  .facet[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
  .facet-options { display: flex; flex-wrap: wrap; gap: 0.4rem; padding-bottom: 1.1rem; }
  .facet-options.long { display: block; padding-bottom: 0.5rem; }
  .opt {
    display: inline-flex; align-items: baseline; gap: 0.45rem; min-height: 2.5rem; padding: 0.55rem 0.85rem;
    background: var(--field); font-size: 0.9375rem; font-weight: 500;
  }
  .opt[aria-checked="true"] { background: var(--ink); color: var(--page); }
  .long .opt { display: flex; width: 100%; justify-content: space-between; background: none; padding: 0.7rem 0.6rem; border-bottom: 1px solid #EEEEEE; }
  .long .opt[aria-checked="true"] { background: var(--ink); }
  .sheet-foot {
    display: grid; grid-template-columns: auto 1fr; gap: 0.5rem;
    padding: 0.75rem var(--edge) max(0.75rem, env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--rule);
  }
  .sheet-foot .clear { height: 3.25rem; padding: 0 1rem; font-weight: 500; }
  .sheet-foot .show {
    height: 3.25rem; background: var(--ink); color: var(--page); text-align: center;
    font-weight: 600; font-stretch: 112%; font-variant-numeric: tabular-nums;
  }
  .sheet-foot .show:disabled { background: var(--field); color: var(--muted); cursor: default; }

  /* ---- Product view ---- */
  dialog.detail-dialog {
    border: 0; padding: 0; margin: auto; color: var(--ink); background: var(--page);
    width: min(1100px, 100%); max-height: 100%; overflow-y: auto;
  }
  dialog.detail-dialog::backdrop { background: rgba(0, 0, 0, 0.3); }
  @media (max-width: 759px) {
    dialog.detail-dialog { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; }
  }
  .detail { display: grid; position: relative; padding-top: env(safe-area-inset-top, 0px); }
  @media (min-width: 900px) { .detail { grid-template-columns: 1.1fr 1fr; align-items: start; } }
  .detail .g-slide { aspect-ratio: 1 / 1; }
  /* On phones the price and name must be visible without scrolling. */
  @media (max-width: 899px) {
    .detail .gallery { border-bottom: 1px solid var(--rule); }
    .detail .g-slide { aspect-ratio: auto; height: 44vh; height: 44svh; }
  }
  /* Phones on their side: the photo sits beside the details, not above them. */
  @media (max-width: 899px) and (orientation: landscape) and (max-height: 500px) {
    .detail { grid-template-columns: 1fr 1.2fr; align-items: start; }
    .detail .gallery { border-bottom: 0; position: sticky; top: 0; }
    .detail .g-slide { height: 100vh; height: 100svh; }
  }
  .detail-text { padding: clamp(1.25rem, 4vw, 3rem) var(--edge) 3rem; }
  .d-price {
    font: 600 clamp(2.25rem, 9vw, 2.5rem)/1 var(--sans); font-stretch: 125%; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
  .d-price.por { font-size: clamp(1.5rem, 5vw, 1.9rem); font-weight: 500; }
  .d-name { margin: 0.9rem 0 0; font-size: 1.35rem; font-weight: 500; line-height: 1.2; }
  .d-meta { margin-top: 0.35rem; font-size: 0.8125rem; color: var(--muted); }
  .panel { margin-top: 2rem; background: var(--field); padding: 0.25rem 1.25rem 1rem; }
  .panel h3 { margin: 1.25rem 0 0.35rem; font-size: 0.75rem; font-weight: 500; color: var(--muted); text-align: center; }
  .spec { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; padding: 0.7rem 0; border-bottom: 1px solid #E4E4E4; align-items: baseline; }
  .spec:last-child { border-bottom: 0; }
  .spec .k { text-align: right; color: var(--muted); font-size: 0.875rem; }
  .spec .v { font-size: 1.0625rem; font-weight: 600; font-stretch: 108%; line-height: 1.2; overflow-wrap: anywhere; }
  .spec .v.blank { color: var(--faint); font-weight: 400; }
  .retailer {
    display: flex; justify-content: center; align-items: center; margin-top: 1.5rem; height: 3.25rem;
    background: var(--ink); color: var(--page); text-decoration: none; font-weight: 600; font-stretch: 112%;
  }
  .retailer-note { margin: 0.75rem 0 0; font-size: 0.8125rem; color: var(--muted); }
  .retailer-note a { color: var(--muted); }
  .close {
    position: absolute; top: calc(env(safe-area-inset-top, 0px) + 0.75rem); right: 0.75rem;
    height: 2.5rem; padding: 0 0.95rem; background: var(--field); font-size: 0.875rem; font-weight: 500;
  }
  .gone { padding: clamp(3rem, 8vw, 5rem) var(--edge); }
  .gone h2 { margin: 0; font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 600; font-stretch: 112%; line-height: 1.1; }
  .gone p { color: var(--muted); max-width: 40ch; }
  dialog.detail-dialog[open] { animation: sweep-in var(--d-mid) var(--glide); }
  dialog.detail-dialog.closing { animation: sweep-out var(--d-close) var(--ease-in) forwards; }
  dialog.detail-dialog::backdrop { animation: fade-in var(--d-mid) var(--ease); }
  dialog.closing::backdrop { animation: fade-out var(--d-close) var(--ease-in) forwards; }

  /* ---- Text pages and footer ---- */
  .page { padding: clamp(2.5rem, 8vw, 5rem) var(--edge) 5rem; max-width: calc(62ch + 2 * var(--edge)); }
  .page .back { color: var(--muted); font-size: 0.875rem; text-decoration: none; }
  .page h1 { margin: 1.25rem 0 1.75rem; font-size: clamp(2.2rem, 7vw, 3.6rem); max-width: none; }
  .page h2 { margin: 2.25rem 0 0.75rem; font-size: 1.25rem; font-weight: 600; }
  .page p { margin: 0 0 1.1rem; line-height: 1.6; }
  .page .unwritten { color: var(--muted); }
  /* Footer: four short columns on wide screens, two then one on phones. */
  footer { margin-top: 3rem; padding: 2.5rem var(--edge) calc(2.5rem + env(safe-area-inset-bottom, 0px));
    background: var(--surface); border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.8125rem; }
  .foot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; max-width: 1200px; }
  @media (min-width: 900px) { .foot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .foot-grid h2 { margin: 0 0 0.85rem; font-size: 0.8125rem; font-weight: 600; color: var(--ink); }
  .foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
  .foot-grid a, .foot-grid button { color: var(--muted); text-decoration: none; font-size: 0.875rem; text-align: left; }
  @media (hover: hover) { .foot-grid a:hover, .foot-grid button:hover { color: var(--ink); } }
  .footer-links { display: grid; gap: 0.6rem; }
  .foot-trust li { color: var(--ink); }
  .foot-base { margin: 2.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--rule); max-width: 1200px; }
  footer p { margin: 0; }

  /* Data checks: development only, controlled by SHOW_DATA_CHECKS */
  .checks { margin: 2rem var(--edge); padding: 1.25rem; border: 1px dashed var(--muted); font-size: 0.8125rem; color: var(--muted); }
  .checks h3 { margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--ink); font-weight: 600; }
  .checks ul { margin: 0 0 1rem; padding-left: 1.1rem; }

  /* ================= Motion =================
     One movement for the whole site: things glide in from the right and
     settle slowly; things leaving glide out to the left. One easing, long
     soft finish, no bounce. All of it switches off for anyone whose device
     asks for reduced motion. Change the feel here, in one place. */
  :root {
    --ease: cubic-bezier(0.33, 1, 0.68, 1);       /* arriving: gentle start, long settle */
    --glide: cubic-bezier(0.65, 0, 0.35, 1);      /* moving across: eases in AND out, so you see it travel */
    --ease-in: cubic-bezier(0.55, 0, 0.8, 0.25);  /* leaving */
    --sweep: 32px;                                 /* how far things travel */
    --d-long: 1100ms; --d-mid: 800ms; --d-short: 420ms; --d-close: 460ms;
    --d-ticker: 1600ms;                            /* the moving bar's sweep */
    --stagger: 90ms;
  }
  @keyframes sweep-in  { from { opacity: 0; transform: translateX(var(--sweep)); } to { opacity: 1; transform: none; } }
  @keyframes sweep-out { to   { opacity: 0; transform: translateX(calc(var(--sweep) * -1)); } }
  @keyframes in-right  { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }
  @keyframes out-right { to   { opacity: 0; transform: translateX(48px); } }
  @keyframes in-up     { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
  @keyframes out-down  { to   { opacity: 0; transform: translateY(40px); } }
  @keyframes fade-in   { from { opacity: 0; } }
  @keyframes fade-out  { to { opacity: 0; } }

  /* Moving things never widen the page (clip, unlike hidden, keeps sticky bars working). */
  #catalogue, .page, footer { overflow-x: clip; }
  dialog.detail-dialog, .sheet { overflow-x: hidden; }

  /* Anything marked .sw sweeps in; --i sets its place in the queue. */
  .sw { animation: sweep-in var(--d-long) var(--ease) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }

  /* Watches: each card sweeps in as it scrolls into view, row by row. */
  .grid > li.rv > * { opacity: 0; transform: translateX(var(--sweep));
    transition: opacity var(--d-long) var(--ease), transform var(--d-long) var(--ease);
    transition-delay: calc(var(--i, 0) * var(--stagger)); }
  .grid > li.rv.in > * { opacity: 1; transform: none; }

  /* Photos fade up as they load; on a computer they drift larger on hover. */
  .tile img { opacity: 0; transition: opacity var(--d-long) var(--ease), transform var(--d-long) var(--ease); }
  .tile img.loaded { opacity: 1; }
  .tile .ph { transition: transform var(--d-long) var(--ease); }
  @media (hover: hover) {
    .card:hover .tile img, .card:hover .tile .ph { transform: scale(1.035); }
    .ctl, .bar-btn, .opt, .retailer { transition: background-color var(--d-short) var(--ease), color var(--d-short) var(--ease), opacity var(--d-short) var(--ease); }
    .retailer:hover { opacity: 0.85; }
  }
  /* Presses: everything you tap sinks slightly and fills smoothly, then
     glides back when you let go. */
  .menu-link, .mini, .foot-grid a, .foot-grid button,
  .ctl, .bar-btn, .opt, .retailer, .sheet-foot .show, .sheet-foot .clear, .heart, .save,
  .close, .sheet-head button, .status button, .empty button, .crumbs a, .footer-links a, .card .tile {
    transition: transform var(--d-short) var(--glide), background-color var(--d-short) var(--glide),
                color var(--d-short) var(--glide), border-color var(--d-short) var(--glide), opacity var(--d-short) var(--glide);
  }
  .ctl:active, .bar-btn:active, .opt:active, .retailer:active, .sheet-foot .show:active, .sheet-foot .clear:active,
  .close:active, .sheet-head button:active, .save:active { transform: scale(0.965); transition-duration: 120ms; }
  .heart:active { transform: scale(0.88); transition-duration: 120ms; }
  .ctl:active { border-color: var(--ink); }
  .card:active .tile { transform: scale(0.985); transition-duration: 160ms; }
  .opt[aria-checked="true"] { transition-duration: var(--d-mid); }
  /* The results button's text arrives with a small sweep whenever the number changes. */
  @keyframes tick { from { opacity: 0.2; transform: translateX(10px); } to { opacity: 1; transform: none; } }
  .sheet-foot .show.tick { animation: tick var(--d-mid) var(--ease); }


  /* ================= Dark footer =================
     Newsletter, a clear statement, contact, the link columns, then the
     policy links: the C W Sellors arrangement in this site's style. */
  footer.dark-foot { margin-top: 4rem; padding: 3rem var(--edge) calc(2.5rem + env(safe-area-inset-bottom, 0px));
    background: #141518; color: #A6A7AE; border-top: 0; }
  .foot-news { max-width: 640px; margin: 0 auto 2.75rem; text-align: center; }
  .foot-news h2 { margin: 0 0 1.1rem; color: #fff; font-size: 1.15rem; font-weight: 600; font-stretch: 112%; }
  .news-form { display: grid; gap: 0.6rem; }
  @media (min-width: 600px) { .news-form { grid-template-columns: 1fr auto; } }
  .news-form input { height: 3.1rem; padding: 0 1rem; border: 0; border-radius: var(--radius-xs); background: #fff; color: #000;
    font-size: 16px; text-align: center; }
  @media (min-width: 600px) { .news-form input { text-align: left; } }
  .news-form input:focus { outline: 2px solid #fff; outline-offset: 2px; }
  .news-form button { height: 3.1rem; padding: 0 1.6rem; border-radius: var(--radius-xs); border: 1px solid rgba(255, 255, 255, 0.55);
    color: #fff; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-align: center;
    transition: background-color var(--d-short) var(--glide), color var(--d-short) var(--glide), transform var(--d-short) var(--glide); }
  @media (hover: hover) { .news-form button:hover { background: #fff; color: #000; } }
  .news-form button:active { transform: scale(0.97); }
  .news-note { min-height: 1.3em; margin: 0.75rem 0 0 !important; font-size: 0.8125rem; color: #C9CAD0; }
  .foot-statement { margin: 0 auto 2.75rem !important; padding-bottom: 2.75rem; max-width: 24ch; text-align: center; color: #fff;
    font-size: clamp(1.05rem, 4.5vw, 1.5rem); font-weight: 600; font-stretch: 125%; letter-spacing: 0.14em; text-transform: uppercase;
    line-height: 1.35; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
  .foot-contact { margin: -1.25rem auto 2.75rem; text-align: center; color: #fff; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.875rem; }
  .foot-contact a { color: #fff; font-weight: 600; text-decoration: none; }
  footer.dark-foot .foot-grid { margin: 0 auto; max-width: 1200px; }
  footer.dark-foot .foot-grid h2 { color: #fff; }
  footer.dark-foot .foot-grid a, footer.dark-foot .foot-grid button { color: #A6A7AE; }
  @media (hover: hover) { footer.dark-foot .foot-grid a:hover, footer.dark-foot .foot-grid button:hover { color: #fff; } }
  footer.dark-foot .foot-trust li { color: #D6D7DC; }
  .foot-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; margin: 2.75rem 0 1rem; padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .foot-legal a { color: #C9CAD0; text-decoration: none; font-size: 0.8125rem; }
  @media (hover: hover) { .foot-legal a:hover { color: #fff; } }
  footer.dark-foot .foot-base { margin: 0 auto; padding: 0; border: 0; max-width: 60ch; text-align: center; }


  /* Menu: categories as folding sections; single-destination ones are plain links. */
  .menu-acc { border-bottom: 1px solid var(--rule); }
  .menu-acc > summary { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; cursor: pointer; list-style: none;
    font-size: 1.35rem; font-weight: 600; font-stretch: 112%; }
  .menu-acc > summary::-webkit-details-marker { display: none; }
  .menu-acc > summary::after { content: ""; width: 0.5rem; height: 0.5rem; border-right: 1.5px solid; border-bottom: 1.5px solid;
    transform: rotate(45deg) translateY(-3px); transition: transform var(--d-short) var(--glide); }
  .menu-acc[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
  .menu-acc .acc-body { padding: 0 0 0.9rem 0.25rem; }
  .menu-acc .acc-body .menu-link { font-size: 1rem; padding: 0.6rem 0; border-bottom: 0; }
  .menu-acc .acc-body .menu-acc { border-bottom: 0; }
  .menu-acc .acc-body .menu-acc > summary { font-size: 1rem; font-weight: 500; padding: 0.6rem 0; }
  .menu-link.soon .n { font-size: 0.75rem; }
  .menu-small { margin-top: 1.25rem; }
  .menu-small .menu-link { font-size: 0.9375rem; font-weight: 400; color: var(--muted); padding: 0.55rem 0; border-bottom: 0; }

  /* Category strip under the top bar (Goldsmiths-style). */
  .cats { display: flex; gap: 1.6rem; overflow-x: auto; scrollbar-width: none; padding: 0.95rem var(--edge);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); background: var(--page); }
  .cats::-webkit-scrollbar { display: none; }
  .cats a, .cats button { white-space: nowrap; color: var(--ink); text-decoration: none; font-size: 0.875rem; font-weight: 600; font-stretch: 112%;
    letter-spacing: 0.02em; transition: opacity var(--d-short) var(--glide); }
  .cats .sale { color: var(--sale); }
  .cats a:active, .cats button:active { opacity: 0.55; }
  /* Applied filters as removable chips, so it's clear what's being shown. */
  .chips { display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none; padding: 0 var(--edge) 0.75rem; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; display: inline-flex; align-items: center; gap: 0.45rem; height: 2rem; padding: 0 0.75rem;
    border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-1); font-size: 0.8125rem; font-weight: 500; white-space: nowrap; }
  .chip::after { content: "×"; font-size: 1rem; line-height: 1; color: var(--muted); }
  .chip:active { transform: scale(0.96); }
  .guide-head .sub { margin: 0.5rem 0 0; font-size: 0.8125rem; color: var(--muted); letter-spacing: 0; text-transform: none; }

  /* ================= Surfaces =================
     Light grey page, white cards that float on soft shadows, frosted bars.
     Photos sit on white, so the white cards still match cut-out product shots. */
  :root {
    --page: #F5F5F7;
    --surface: #FFFFFF;
    --field: #F0F0F2;
    --rule: #E3E3E6;
    --radius: 18px; --radius-s: 12px; --radius-xs: 10px;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 14px rgba(0, 0, 0, 0.05);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.05), 0 14px 34px rgba(0, 0, 0, 0.09);
    --shadow-3: 0 24px 70px rgba(0, 0, 0, 0.18);
    /* Sale colour: a deep bottle green. Ours, deliberately not Rolex's exact shade. */
    --sale: #1E4A38;
  }
  body { background: var(--page); }

  /* Frosted top bar and Sort/Filter row: the page shows softly through as you scroll. */
  .bar, .controls {
    background: rgba(245, 245, 247, 0.78);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  }
  .bar { border-bottom-color: rgba(0, 0, 0, 0.06); }
  .ticker { border-bottom-color: rgba(0, 0, 0, 0.05); }
  .search-row input { background: var(--surface); border-radius: var(--radius-xs); box-shadow: var(--shadow-1); }

  .ctl { background: var(--surface); border: 0; border-radius: var(--radius-s); box-shadow: var(--shadow-1); }
  .ctl:active { border-color: transparent; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }
  .ctl .badge, .bar-btn .badge { border-radius: 999px; }

  /* Watches: separate white cards with a soft shadow, instead of shared lines. */
  .grid {
    background: none; border: 0; padding: 0.25rem var(--edge) 2rem;
    gap: clamp(0.75rem, 2vw, 1.25rem);
  }
  .grid > li { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-1); overflow: hidden;
    transition: box-shadow var(--d-mid) var(--ease), transform var(--d-mid) var(--ease); }
  .grid > li.empty, .grid > .empty { background: none; box-shadow: none; }
  .card { background: var(--surface); }
  @media (hover: hover) { .grid > li:hover { box-shadow: var(--shadow-2); transform: translateY(-3px); } }

  /* Drawers and product view: white, rounded on the inner edge, deeper shadow. */
  .sheet { background: var(--surface); border: 0 !important; box-shadow: var(--shadow-3); border-radius: var(--radius) 0 0 var(--radius); }
  .sheet.left { border-radius: 0 var(--radius) var(--radius) 0; box-shadow: var(--shadow-3); }
  .opt { border-radius: var(--radius-xs); }
  .long .opt { border-radius: 0; }
  .long .opt[aria-checked="true"] { border-radius: var(--radius-xs); }
  .sheet-foot .show, .sheet-foot .clear { border-radius: var(--radius-s); }
  .saved-row .tile { border-radius: var(--radius-xs); }

  dialog.detail-dialog { background: var(--surface); }
  @media (min-width: 760px) { dialog.detail-dialog { border-radius: 24px; box-shadow: var(--shadow-3); } }
  .panel { border-radius: 16px; }
  .retailer { border-radius: var(--radius-s); }
  .close { border-radius: 999px; background: rgba(240, 240, 242, 0.9); }

  .checks { background: var(--surface); border-radius: var(--radius-s); }

  /* ---- Photo gallery: swipe on phones, arrows on computers ---- */
  .gallery { position: relative; background: var(--tile); }
  .g-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
  .g-track::-webkit-scrollbar { display: none; }
  .g-track:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
  .g-slide { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; display: block; position: relative; }
  .g-slide img, .g-slide .ph { position: absolute; inset: 0; margin: auto; }
  .g-slide img { width: 100%; height: 100%; }
  .g-slide .ph { width: 70%; height: auto; aspect-ratio: 1; max-height: 76%; }
  .g-dots { position: absolute; left: 50%; bottom: 0.9rem; transform: translateX(-50%); display: flex; gap: 6px; }
  .g-dots span { width: 6px; height: 6px; border-radius: 3px; background: rgba(0, 0, 0, 0.22);
    transition: width var(--d-mid) var(--glide), background-color var(--d-mid) var(--glide); }
  .g-dots span.on { width: 20px; background: var(--ink); }
  .g-arrow { position: absolute; top: 50%; width: 2.75rem; height: 2.75rem; margin-top: -1.375rem; border-radius: 50%;
    display: grid; place-items: center; background: rgba(255, 255, 255, 0.92); box-shadow: var(--shadow-1);
    opacity: 0; transition: opacity var(--d-mid) var(--glide), transform var(--d-short) var(--glide); }
  .g-arrow svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
  .g-prev { left: 1rem; } .g-next { right: 1rem; }
  .g-arrow:disabled { opacity: 0 !important; pointer-events: none; }
  @media (hover: hover) { .gallery:hover .g-arrow, .g-arrow:focus-visible { opacity: 1; } }
  @media (hover: none) { .g-arrow { display: none; } }
  .g-arrow:active { transform: scale(0.92); }

  /* ---- More like this ---- */
  .more { margin-top: 2.5rem; }
  .more h3 { margin: 0 0 0.9rem; font-size: 1.05rem; font-weight: 600; font-stretch: 112%; }
  .more-row { display: grid; grid-auto-flow: column; grid-auto-columns: 42%; gap: 0.75rem; overflow-x: auto;
    scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 0.25rem; }
  .more-row::-webkit-scrollbar { display: none; }
  @media (min-width: 900px) { .more-row { grid-auto-columns: 31%; } }
  .mini { scroll-snap-align: start; background: var(--surface); border-radius: var(--radius-s); box-shadow: var(--shadow-1);
    overflow: hidden; text-align: left; padding-bottom: 0.75rem; }
  .mini .tile .ph { width: 70%; }
  .mini .b { display: block; padding: 0 0.7rem; margin-top: 0.5rem; font-size: 0.6875rem; color: var(--muted); }
  .mini .m { display: block; padding: 0 0.7rem; font-size: 0.8125rem; line-height: 1.25;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .mini .p { display: block; padding: 0 0.7rem; margin-top: 0.35rem; font-size: 0.8125rem; font-weight: 600; font-stretch: 112%; }
  .mini:active { transform: scale(0.97); }

  /* Page title: one word, centred, like a department heading. */
  .guide-head { text-align: center; padding-top: clamp(1.5rem, 5vw, 3rem); padding-bottom: clamp(1.25rem, 3vw, 2rem); }
  .guide-head h1 { max-width: none; margin: 0 auto; font-size: clamp(2.25rem, 8vw, 4rem); letter-spacing: -0.02em; }

  /* ---- Sale ---- */
  .card { position: relative; }
  .sale-badge {
    position: absolute; top: 0.75rem; left: 0.75rem; z-index: 1; padding: 0.25rem 0.55rem; border-radius: 999px;
    background: var(--sale); color: var(--surface); font-size: 0.75rem; font-weight: 600; font-stretch: 112%;
    font-variant-numeric: tabular-nums;
  }
  .sale-badge.inline { position: static; display: inline-block; margin-left: 0.6rem; vertical-align: middle; }
  .cap .price .was, .mini .was { font-size: 0.8125rem; font-weight: 400; font-stretch: 100%; color: var(--muted); margin-left: 0.25rem; }
  .d-sale { margin-top: 0.6rem; font-size: 0.9375rem; color: var(--muted); }
  .cap .price.on-sale, .d-price.on-sale, .menu-link.sale { color: var(--sale); }

  /* ---- Menu ---- */
  .bar-left { justify-self: start; display: flex; align-items: center; gap: 0.25rem; }
  .bar-left .bar-btn { padding: 0 0.4rem; }
  .bar-left .bar-btn:first-child { padding-left: 0; }
  .bar-btn svg { width: 1.15rem; height: 1.15rem; }
  .menu-body { padding-bottom: 2rem; }
  .menu-body h3 { margin: 1.6rem 0 0.4rem; font-size: 0.75rem; font-weight: 600; color: var(--muted); }
  .menu-link { display: flex; justify-content: space-between; align-items: baseline; width: 100%; padding: 0.8rem 0;
    border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; font-size: 1.0625rem; font-weight: 500; }
  .menu-link .n { font-size: 0.8125rem; color: var(--muted); font-weight: 400; }
  .menu-link.big { font-size: 1.35rem; font-weight: 600; font-stretch: 112%; padding: 1rem 0; }

  /* Motion off: set by the script when the device asks for reduced motion
     (unless SHOW_MOTION_ANYWAY is on while building). */
  html.no-motion *, html.no-motion *::before, html.no-motion *::after { animation: none !important; transition: none !important; }
  html.no-motion .grid > li.rv > *, html.no-motion .tile img { opacity: 1 !important; transform: none !important; }
  html.no-motion .ticker span:not(.on) { opacity: 0 !important; }

  /* ================= Homepage ================= */
  a.bar-btn { color: var(--ink); text-decoration: none; }
  .hp section { padding: 0 var(--edge); }
  .hp-hero { padding-top: clamp(2rem, 7vw, 4.5rem); }
  .hp-hero h1 { max-width: 13ch; font-size: clamp(2.3rem, 8.5vw, 4.5rem); }
  .hp-hero p.lede { margin: 1.1rem 0 0; max-width: 36ch; font-size: clamp(1rem, 2.2vw, 1.15rem); color: var(--muted); }
  .hp-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
  .btn {
    display: inline-flex; align-items: center; justify-content: center; height: 3.25rem; padding: 0 1.6rem;
    border-radius: var(--radius-s); text-decoration: none; font-weight: 600; font-stretch: 112%;
    transition: transform var(--d-short) var(--glide), opacity var(--d-short) var(--glide), box-shadow var(--d-short) var(--glide);
  }
  .btn.primary { background: var(--ink); color: var(--surface); box-shadow: var(--shadow-1); }
  .btn.secondary { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
  .btn:active { transform: scale(0.965); transition-duration: 120ms; }
  @media (hover: hover) { .btn:hover { opacity: 0.88; } }

  /* Grey boxes standing in for photos until they exist. */
  .img-slot {
    position: relative; display: grid; place-items: center; text-align: center;
    background: repeating-linear-gradient(135deg, #E7E7EA 0 14px, #E2E2E6 14px 28px);
    border-radius: var(--radius); color: #8A8A90; font-size: 0.8125rem; font-weight: 500; overflow: hidden;
  }
  .img-slot span { padding: 0.35rem 0.7rem; background: rgba(255, 255, 255, 0.75); border-radius: 999px; }
  .hero-img { margin-top: clamp(1.75rem, 5vw, 3rem); aspect-ratio: 4 / 5; box-shadow: var(--shadow-1); }
  @media (min-width: 700px) { .hero-img { aspect-ratio: 16 / 9; } }
  @media (min-width: 1200px) { .hero-img { aspect-ratio: 21 / 9; } }

  .hp-section { margin-top: clamp(3.5rem, 10vw, 6rem); }
  .hp-section h2 { margin: 0 0 0.35rem; font-size: clamp(1.5rem, 4.5vw, 2.25rem); font-weight: 600; font-stretch: 112%; letter-spacing: -0.015em; }
  .hp-section .sub { margin: 0 0 1.4rem; color: var(--muted); max-width: 46ch; }

  /* Shop by style: big tiles you can swipe on phones, a row on computers. */
  .tiles { display: grid; grid-auto-flow: column; grid-auto-columns: 70%; gap: 0.9rem; overflow-x: auto;
    scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--edge) * -1); padding: 0.25rem var(--edge) 0.5rem; }
  .tiles::-webkit-scrollbar { display: none; }
  @media (min-width: 700px) { .tiles { grid-auto-columns: 40%; } }
  @media (min-width: 1100px) { .tiles { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); overflow: visible; } }
  .tile-link { scroll-snap-align: start; display: block; text-decoration: none; color: var(--ink);
    background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-1); overflow: hidden;
    transition: transform var(--d-mid) var(--ease), box-shadow var(--d-mid) var(--ease); }
  .tile-link .img-slot { aspect-ratio: 4 / 5; border-radius: 0; }
  .tile-link .label { display: flex; justify-content: space-between; align-items: center; padding: 0.95rem 1.1rem; font-weight: 600; font-stretch: 112%; }
  .tile-link .label svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
  .tile-link:active { transform: scale(0.98); }
  @media (hover: hover) { .tile-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); } }

  /* Shop by price: simple cards. */
  .price-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  @media (min-width: 900px) { .price-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .price-card { display: flex; align-items: flex-end; justify-content: space-between; min-height: 6.5rem; padding: 1.1rem;
    background: var(--surface); border-radius: var(--radius-s); box-shadow: var(--shadow-1); color: var(--ink); text-decoration: none;
    font-size: clamp(1.05rem, 3vw, 1.3rem); font-weight: 600; font-stretch: 112%;
    transition: transform var(--d-mid) var(--ease), box-shadow var(--d-mid) var(--ease); }
  .price-card svg { width: 1.1rem; height: 1.1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }
  .price-card:active { transform: scale(0.97); }
  @media (hover: hover) { .price-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); } }

  /* Brands: names, set like a printed list. */
  .brand-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--surface);
    border-radius: var(--radius); box-shadow: var(--shadow-1); overflow: hidden; }
  @media (min-width: 900px) { .brand-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .brand-list a { padding: 1.25rem 1.1rem; color: var(--ink); text-decoration: none; font-weight: 600; font-stretch: 112%;
    border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); transition: background-color var(--d-short) var(--glide); }
  @media (hover: hover) { .brand-list a:hover { background: var(--field); } }
  .brand-list a:active { background: var(--field); }
  .more-link { display: inline-block; margin-top: 1rem; color: var(--ink); font-weight: 600; text-decoration: none; }

  /* Wide picture band. */
  .band { aspect-ratio: 4 / 3; }
  @media (min-width: 700px) { .band { aspect-ratio: 21 / 9; } }

  /* How it works: three numbered steps. */
  .steps { display: grid; gap: 0.75rem; counter-reset: step; }
  @media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } }
  .step { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: 1.5rem 1.35rem 1.6rem; }
  .step::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 2rem; height: 2rem;
    border-radius: 50%; background: var(--ink); color: var(--surface); font-weight: 600; font-size: 0.875rem; margin-bottom: 1rem; }
  .step h3 { margin: 0 0 0.4rem; font-size: 1.1rem; font-weight: 600; font-stretch: 112%; }
  .step p { margin: 0; color: var(--muted); }

  /* Sections drift in as they scroll into view. */
  .rv-s { opacity: 0; transform: translateX(var(--sweep)); transition: opacity var(--d-long) var(--ease), transform var(--d-long) var(--ease); }
  .rv-s.in { opacity: 1; transform: none; }
  html.no-motion .rv-s { opacity: 1 !important; transform: none !important; }
  .hp { overflow-x: clip; padding-bottom: 1rem; }

  /* Category strip under the top bar (Goldsmiths-style). */
  .cats { display: flex; gap: 1.6rem; overflow-x: auto; scrollbar-width: none; padding: 0.95rem var(--edge);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); background: var(--page); }
  .cats::-webkit-scrollbar { display: none; }
  .cats a { white-space: nowrap; color: var(--ink); text-decoration: none; font-size: 0.875rem; font-weight: 600; font-stretch: 112%;
    letter-spacing: 0.02em; transition: opacity var(--d-short) var(--glide); }
  .cats a.sale { color: var(--sale); }
  .cats a.sale, .cats button.sale { margin: -0.3rem 0; padding: 0.3rem 0.75rem; background: var(--sale); color: #fff; border-radius: 8px; }
  .cats a:active { opacity: 0.55; }

  /* Sliding banner ("the tray"). */
  .hero { position: relative; margin-top: 0.75rem; }
  .hero-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    overscroll-behavior-x: contain; scroll-behavior: smooth; border-radius: var(--radius); box-shadow: var(--shadow-1); }
  .hero-track::-webkit-scrollbar { display: none; }
  .slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; aspect-ratio: 4 / 5; }
  @media (min-width: 900px) { .slide { aspect-ratio: 21 / 9; } }
  @media (max-height: 500px) and (orientation: landscape) { .slide { aspect-ratio: 21 / 9; } }
  .slide .img-slot { position: absolute; inset: 0; border-radius: 0; align-content: start; padding-top: 1.25rem; }
  .slide .img-slot .desk { display: none; }
  @media (min-width: 900px) { .slide .img-slot .phone { display: none; } .slide .img-slot .desk { display: inline; } }
  /* Text sits on a frosted card, readable on any photo. */
  .slide-card { position: absolute; left: 1rem; right: 1rem; bottom: 2.6rem; padding: 1.25rem 1.25rem 1.35rem;
    background: rgba(255, 255, 255, 0.78); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
    border-radius: var(--radius-s); box-shadow: var(--shadow-1); }
  @media (min-width: 900px) { .slide-card { left: 2.5rem; right: auto; bottom: 2.5rem; max-width: 30rem; padding: 1.75rem; } }
  .slide-card .kicker { display: block; font-size: 0.75rem; font-weight: 600; color: var(--muted); letter-spacing: 0.04em; }
  .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; }
  .slide-card h2 { margin: 0.3rem 0 0.9rem; font-size: clamp(1.6rem, 6vw, 2.6rem); line-height: 1.02; font-weight: 600; font-stretch: 125%; letter-spacing: -0.02em; }
  .slide-card .btn { height: 2.9rem; padding: 0 1.3rem; }

  /* Brand spotlight (src/_includes/spotlight.njk): two watches on black, then the brand, the collection's name in
     wide capitals, one line and a white button. Phones: stacked. Computers: picture left, words right. */
  .spotlight { display: grid; background: #000; color: #fff; border-radius: var(--radius, 14px); overflow: hidden; text-decoration: none; }
  .spotlight img { display: block; width: 100%; height: auto; }
  .sp-text { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0.4rem 1.5rem 2rem; }
  .sp-brand { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: #CDB27A; }
  .sp-title { margin-top: 0.7rem; font-family: var(--serif, Georgia, "Times New Roman", serif); font-size: clamp(1.9rem, 7vw, 2.9rem); line-height: 1.05; letter-spacing: 0.12em; text-transform: uppercase; }
  .sp-line { margin-top: 0.8rem; max-width: 26rem; font-size: 0.95rem; line-height: 1.45; color: rgba(255, 255, 255, 0.82); }
  .sp-btn { display: inline-flex; align-items: center; justify-content: center; margin-top: 1.4rem; height: 3rem; min-width: 14rem; padding: 0 1.6rem; border-radius: var(--radius-xs); background: #fff; color: #000; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; transition: background 0.2s; }
  .spotlight:hover .sp-btn, .spotlight:focus-visible .sp-btn { background: #E9E4D8; }
  @media (min-width: 800px) {
    .spotlight { grid-template-columns: 1.25fr 1fr; align-items: center; }
    .sp-text { padding: 2.5rem 2.5rem 2.5rem 1rem; }
  }
  .btn.sale { background: var(--sale); color: var(--surface); }
  .slide.on .slide-card > * { animation: sweep-in var(--d-long) var(--ease) both; }
  .slide.on .slide-card > *:nth-child(2) { animation-delay: 90ms; }
  .slide.on .slide-card > *:nth-child(3) { animation-delay: 180ms; }
  .hero-dots { display: flex; justify-content: center; gap: 6px; margin-top: 0.9rem; }
  .hero-dots button { width: 22px; height: 22px; display: grid; place-items: center; }
  .hero-dots span { width: 6px; height: 6px; border-radius: 3px; background: rgba(0, 0, 0, 0.22);
    transition: width var(--d-mid) var(--glide), background-color var(--d-mid) var(--glide); }
  .hero-dots button[aria-current="true"] span { width: 20px; background: var(--ink); }
  .hero .g-arrow { top: calc(50% - 1.1rem); }
  .hero .g-prev { left: calc(var(--edge) + 0.75rem); } .hero .g-next { right: calc(var(--edge) + 0.75rem); }
  @media (hover: hover) { .hero:hover .g-arrow, .hero .g-arrow:focus-visible { opacity: 1; } }

  /* Featured carousel: one watch at a time on phones, gliding side to side. */
  .feat-head { text-align: center; }
  .feat-head .kicker { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
  .feat-head h2 { margin: 0.4rem 0 0; padding-bottom: 1.25rem; border-bottom: 1px solid var(--rule); letter-spacing: 0.04em; }
  .feat { position: relative; margin-top: 1.5rem; }
  .feat-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; scroll-behavior: smooth; overscroll-behavior-x: contain; gap: 1rem; }
  .feat-track::-webkit-scrollbar { display: none; }
  @media (min-width: 900px) { .feat-track { grid-auto-columns: calc((100% - 2rem) / 3); } }
  .feat-item { scroll-snap-align: start; display: block; text-decoration: none; color: var(--ink); text-align: center;
    background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-1); padding-bottom: 1.5rem; overflow: hidden; }
  .feat-item .tile { aspect-ratio: 1; display: grid; place-items: center; background: var(--tile); }
  .feat-item .tile img { width: 100%; height: 100%; object-fit: contain; padding: 10%; opacity: 1; }
  .feat-item .tile .ph { width: 64%; aspect-ratio: 1; background: var(--placeholder); }
  .feat-item .fb { display: block; margin-top: 0.4rem; font-size: 0.75rem; color: var(--muted); letter-spacing: 0.04em; }
  .feat-item .fm { display: block; margin: 0.25rem 1.25rem 0; font-size: 1.05rem; font-weight: 500; }
  .feat-item .fp { display: block; margin-top: 0.6rem; font-size: 1.25rem; font-weight: 600; font-stretch: 112%; font-variant-numeric: tabular-nums; }
  .feat-item .fp.on-sale { color: var(--sale); }
  .feat-item .fp s { margin-left: 0.4rem; font-size: 0.875rem; font-weight: 400; color: var(--muted); }
  .feat-item .fp.por { font-size: 1rem; font-weight: 500; }
  .feat .g-arrow { top: 40%; }
  .feat .g-prev { left: 0.75rem; } .feat .g-next { right: 0.75rem; }
  @media (hover: hover) { .feat:hover .g-arrow, .feat .g-arrow:focus-visible { opacity: 1; } }
  .feat .hero-dots { margin-top: 1rem; }

  /* Recently viewed */
  .recent-row { display: grid; grid-auto-flow: column; grid-auto-columns: 40%; gap: 0.75rem; overflow-x: auto; scrollbar-width: none;
    scroll-snap-type: x mandatory; margin: 0 calc(var(--edge) * -1); padding: 0.25rem var(--edge) 0.5rem; }
  .recent-row::-webkit-scrollbar { display: none; }
  @media (min-width: 700px) { .recent-row { grid-auto-columns: 24%; } }
  @media (min-width: 1200px) { .recent-row { grid-auto-columns: 16%; } }
  .recent-row .mini { display: block; text-decoration: none; color: var(--ink); }
  .recent-row .tile { aspect-ratio: 1; display: grid; place-items: center; background: var(--tile); }
  .recent-row .tile img { width: 100%; height: 100%; object-fit: contain; padding: 12%; opacity: 1; }
  .recent-row .tile .ph { width: 70%; aspect-ratio: 1; background: var(--placeholder); }

  /* Photo banners with text on them. */
  .banner { position: relative; display: block; text-decoration: none; color: var(--ink); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow-1); aspect-ratio: 4 / 5; }
  @media (min-width: 700px) { .banner { aspect-ratio: 21 / 9; } }
  .banner .img-slot { position: absolute; inset: 0; border-radius: 0; align-content: start; padding-top: 1.25rem; }
  .banner .slide-card { bottom: 1rem; }
  .banner.dark { color: var(--surface); }
  .banner.dark .img-slot { background: repeating-linear-gradient(135deg, #1B1B1E 0 14px, #222226 14px 28px); color: #9A9AA2; }
  .banner.dark .img-slot span { background: rgba(255, 255, 255, 0.1); }
  .banner.dark .dark-text { position: absolute; inset: auto 0 0 0; padding: 2rem 1.5rem 2.25rem; text-align: center; }
  .banner.dark h2 { margin: 0 0 0.75rem; font-size: clamp(2rem, 8vw, 4rem); line-height: 1; font-weight: 600; font-stretch: 125%; letter-spacing: -0.02em; }
  .banner.dark .link { font-weight: 600; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
  @media (hover: hover) { .banner { transition: transform var(--d-mid) var(--ease), box-shadow var(--d-mid) var(--ease); }
    .banner:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); } }


  /* ================= Type: smaller, wider, tracked (Goldsmiths-style) =================
     Labels, headings and buttons in small spaced capitals (font: Jost, see Type v2);
     reading text stays in normal case. */
  .cats a, .cats button, .ctl, .btn, .retailer, .sheet-foot .show, .sheet-foot .clear, .news-form button,
  .menu-link.big, .menu-body > .menu-acc > summary, .sheet-head h2, .hp-section h2, .guide-head h1, .feat-head h2,
  .foot-grid h2, .facet summary .name, .menu-small h3, .panel h3, .slide-card .kicker, .feat-head .kicker,
  .banner.dark h2, .step h3, .price-card {
    text-transform: uppercase; letter-spacing: 0.12em; font-stretch: 125%;
  }
  .cats a, .cats button { font-size: 0.75rem; font-weight: 600; }
  .ctl, .btn, .retailer, .sheet-foot .show, .sheet-foot .clear { font-size: 0.75rem; font-weight: 600; }
  .menu-link.big, .menu-body > .menu-acc > summary { font-size: 0.875rem; font-weight: 600; padding: 1.05rem 0; }
  .menu-acc .acc-body .menu-link { font-size: 0.9375rem; }
  .menu-acc .acc-body .menu-acc > summary { font-size: 0.9375rem; font-weight: 500; text-transform: none; letter-spacing: 0; font-stretch: 100%; }
  .menu-acc.sale > summary { color: var(--sale); }
  .soon-tag { margin-left: 0.75rem; font-size: 0.625rem; font-weight: 500; color: var(--muted); letter-spacing: 0.1em; }
  .sheet-head h2 { font-size: 0.875rem; }
  .guide-head h1 { font-size: clamp(1.4rem, 5vw, 2rem); font-weight: 600; letter-spacing: 0.18em; }
  .hp-section h2, .feat-head h2 { font-size: clamp(0.9375rem, 2.6vw, 1.15rem); letter-spacing: 0.14em; }
  .facet summary .name { font-size: 0.75rem; }
  .menu-small h3, .panel h3, .slide-card .kicker, .feat-head .kicker { font-size: 0.625rem; letter-spacing: 0.16em; }
  .foot-grid h2 { font-size: 0.6875rem; letter-spacing: 0.14em; }
  .cap .brand, .feat-item .fb, .mini .b, .saved-row .b, .recent-row .b {
    text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.6875rem; font-weight: 600; font-stretch: 112%; color: var(--ink); }
  .cap .model { font-size: 0.8125rem; color: var(--muted); }
  .cap .price { font-size: 0.875rem; }
  .slide-card h1, .slide-card h2 { font-size: clamp(1.25rem, 4.6vw, 1.9rem) !important; letter-spacing: -0.005em !important; }
  .banner.dark h2 { font-size: clamp(1.3rem, 5vw, 2.2rem); letter-spacing: 0.14em; }
  .step h3 { font-size: 0.8125rem; }
  .price-card { font-size: 0.8125rem !important; }
  .d-price { font-size: clamp(1.6rem, 6vw, 2rem) !important; }
  .d-name { font-size: 1.05rem; }
  .feat-item .fm { font-size: 0.9375rem; color: var(--muted); }
  .feat-item .fp { font-size: 1.05rem; }

  /* ================= Type v2: Jost (a Futura-style face, like Goldsmiths') =================
     Calmer than the wide Archivo: no stretched letters, lighter weights, smaller sizes. */
  * { font-stretch: 100% !important; }
  .cats a, .cats button { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; }
  .ctl, .btn, .retailer, .sheet-foot .show, .sheet-foot .clear, .news-form button { font-weight: 500; letter-spacing: 0.16em; }
  .guide-head h1 { font-weight: 500; letter-spacing: 0.22em; }
  .hp-section h2, .feat-head h2, .sheet-head h2 { font-weight: 600; letter-spacing: 0.16em; }
  .menu-link.big, .menu-body > .menu-acc > summary { font-weight: 500; letter-spacing: 0.16em; }
  .facet summary .name { font-weight: 600; letter-spacing: 0.14em; }
  .cap .brand, .feat-item .fb, .mini .b, .saved-row .b, .recent-row .b { font-weight: 600; letter-spacing: 0.14em; }
  .cap .price, .feat-item .fp, .mini .p { font-weight: 600; }
  .d-price { font-size: clamp(1.5rem, 5.5vw, 1.75rem) !important; font-weight: 600 !important; letter-spacing: 0.01em !important; }
  .slide-card h1, .slide-card h2 { font-weight: 500 !important; letter-spacing: 0 !important; }
  .banner.dark h2 { font-weight: 500; letter-spacing: 0.18em; }
  .step h3, .price-card { font-weight: 600; letter-spacing: 0.14em; }
  .foot-statement { font-weight: 500 !important; letter-spacing: 0.2em !important; font-size: clamp(0.9375rem, 3.6vw, 1.25rem) !important; }
  .wordmark.placeholder { letter-spacing: 0.12em; }

  /* ================= Sterling Guild logo =================
     The gold logo was designed on black, so the top bar is black to show it
     exactly as drawn. Name on wider screens, SG monogram on narrow ones. */
  .bar { background: rgba(16, 16, 18, 0.94) !important; color: #fff; border-bottom-color: rgba(255, 255, 255, 0.08) !important; }
  .bar .bar-btn, .bar a.bar-btn, .bar #search-cancel { color: #fff; }
  .bar .bar-btn .badge { background: #D6B88C; color: #111; }
  .bar .search-row input { background: #fff; color: #000; }
  .wordmark.brand { display: flex; align-items: center; justify-content: center; padding: 0 !important; border: 0 !important; line-height: 0; }
  .wordmark.brand img { display: block; height: auto; }
  .wordmark.brand .wm-word { width: clamp(170px, 54vw, 290px); }   /* sharp vector lettering traced from the logo */
  .wordmark.brand .wm-mono { display: none; height: 34px; width: auto; }
  @media (max-width: 359px) { .wordmark.brand .wm-word { display: none; } .wordmark.brand .wm-mono { display: block; } }
  .foot-logo { display: block; width: min(240px, 62vw); height: auto; margin: 0 auto 2.25rem; }

  /* ================= Desktop navigation =================
     Wide screens: a long search box in the top bar and dropdown menus under it,
     instead of the menu and search buttons. Phones are unchanged. */
  .dnav, .dsearch { display: none; }
  @media (min-width: 1024px) {
    .bar .bar-left .bar-btn, .bar .search-row, .cats { display: none !important; }
    .bar .bar-left { display: flex; width: 100%; min-width: 0; }

    .dsearch { display: flex; align-items: center; gap: 0.6rem; width: 100%; max-width: 28rem; height: 2.4rem; padding: 0 1rem;
      border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); color: #fff;
      transition: background-color var(--d-short) var(--glide), border-color var(--d-short) var(--glide); }
    .dsearch svg { flex: none; width: 0.95rem; height: 0.95rem; opacity: 0.75; }
    .dsearch input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: inherit; font: inherit; font-size: 0.875rem; outline: none; }
    .dsearch input::placeholder { color: rgba(255, 255, 255, 0.55); }
    .dsearch input::-webkit-search-cancel-button { filter: invert(1); }
    .dsearch:focus-within { background: rgba(255, 255, 255, 0.14); border-color: rgba(214, 184, 140, 0.7); }

    .dnav { display: block; position: relative; z-index: 15; background: var(--surface); border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
    .dnav ul { list-style: none; margin: 0; padding: 0; }
    .dnav-row { display: flex; justify-content: center; gap: clamp(1.25rem, 2.6vw, 2.6rem); padding: 0 var(--edge); }
    .dnav-item { position: relative; }
    .dnav-item:has(.wide) { position: static; }
    .dnav-top { position: relative; display: block; padding: 1.05rem 0 0.95rem; color: var(--ink); text-decoration: none; white-space: nowrap;
      font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }
    .dnav-top.sale { color: var(--sale); }
    .dnav-row .dnav-top.sale { margin: 0.55rem 0; padding: 0.5rem 0.95rem 0.45rem; background: var(--sale); color: #fff; border-radius: var(--radius-xs, 10px); }
    .dnav-row .dnav-top.sale::after { display: none; }
    .dnav-row .dnav-top.sale:hover, .dnav-row .dnav-top.sale:focus-visible { background: #163A2C; }
    .dnav-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.55rem; height: 1px; background: currentColor;
      transform: scaleX(0); transform-origin: left; transition: transform var(--d-short) var(--glide); }
    .dnav-item.open > .dnav-top::after, .dnav-top:hover::after, .dnav-top:focus-visible::after { transform: scaleX(1); }
    .dnav-note { margin-left: 0.35rem; font-size: 0.5625rem; letter-spacing: 0.12em; color: var(--muted); }

    .dnav-panel { position: absolute; top: 100%; left: -1.5rem; min-width: 15rem; padding: 1.4rem 1.5rem 1.6rem;
      background: var(--surface); border-radius: 0 0 var(--radius-s) var(--radius-s); box-shadow: var(--shadow-2);
      opacity: 0; visibility: hidden; transform: translateY(-6px);
      transition: opacity var(--d-short) var(--ease), transform var(--d-short) var(--ease), visibility 0s linear var(--d-short); }
    .dnav-panel.wide { left: 0; right: 0; padding: 1.75rem var(--edge) 2rem; border-radius: 0 0 var(--radius) var(--radius);
      max-height: calc(100vh - 9rem); overflow-y: auto; border-top: 1px solid var(--rule); }
    .dnav-item.open > .dnav-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
    .dnav-cols { display: grid; grid-auto-flow: column; gap: 2.5rem; }
    .dnav-panel.wide .dnav-cols { grid-auto-flow: row; grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); max-width: 86rem; margin: 0 auto; }
    .dnav-panel.wide .dnav-col { grid-column: span 1; }
    .dnav-panel.wide .dnav-col.flow { grid-column: span var(--span, 2); }
    .dnav-col h3 { margin: 0 0 0.85rem; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
    .dnav-col.flow ul { columns: 2 9rem; column-gap: 1.5rem; }
    .dnav-panel.wide .dnav-col.flow[style] ul { columns: var(--span) 8rem; }
    .dnav-col li { break-inside: avoid; }
    .dnav-col a { display: inline-block; padding: 0.3rem 0; color: var(--ink); text-decoration: none; font-size: 0.875rem; white-space: nowrap;
      background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: background-size var(--d-short) var(--glide); }
    .dnav-col a:hover, .dnav-col a:focus-visible { background-size: 100% 1px; }
  }

/* Touch screens: frosted-glass blur makes scrolling stutter on iPhones, so these get a solid background instead.
   (Computers keep the frosted look.) Kept at the end so it wins over the blocks above. */
@media (hover: none) {
  .bar, .controls, .slide-card { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .controls { background: rgb(245, 245, 247); }
  .slide-card { background: rgba(255, 255, 255, 0.96); }
}

  /* ---- Saved (saved.js): the watch flies into the bag, the bag bounces, the counter pops, a note says "Saved" ---- */
  .sg-fly {   /* above the "Saved" note (z-index 1001), which sits next to the bag on phones and used to hide the landing */
    position: fixed; z-index: 1002; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; pointer-events: none;
    display: grid; place-items: center; background: #FFFFFF; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); will-change: transform, opacity;
  }
  .sg-fly img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
  .sg-fly svg { width: 26px; height: 26px; fill: #111111; }
  .bag.bump svg { animation: bag-bump 560ms cubic-bezier(0.34, 1.56, 0.64, 1); transform-origin: 50% 85%; }
  .bag.bump .badge { animation: badge-pop 560ms cubic-bezier(0.34, 1.56, 0.64, 1); }
  @keyframes bag-bump { 30% { transform: scale(1.3) rotate(-9deg); } 55% { transform: scale(0.94) rotate(4deg); } }
  @keyframes badge-pop { 0% { transform: scale(0.3); } 60% { transform: scale(1.3); } }
  .sg-toast {
    position: fixed; z-index: 1001; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: center; gap: 1rem; max-width: calc(100vw - 2rem); padding: 0.8rem 1.15rem;
    border-radius: 999px; background: #111111; color: #FFFFFF; font-size: 0.875rem; white-space: nowrap;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); opacity: 0; pointer-events: none; transform: translate(-50%, 1.5rem);
    transition: transform 320ms cubic-bezier(0.33, 1, 0.68, 1), opacity 320ms;
  }
  .sg-toast.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
  .sg-toast a { color: #D6B88C; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
  /* Phones and tablets: just under the top bar (near the bag), so it never covers the Buy button. */
  @media (max-width: 1023px) {
    .sg-toast { bottom: auto; top: calc(4.25rem + env(safe-area-inset-top, 0px)); transform: translate(-50%, -1.5rem); }
    .sg-toast.show { transform: translate(-50%, 0); }
  }
  @media (prefers-reduced-motion: reduce) { .sg-toast, .sg-toast.show { transition: opacity 200ms; transform: translate(-50%, 0); } }

/* ---- Watches page on computers: filters in a column on the left, always open (catalogue.js draws them).
   Phones and tablets keep the Filter button and slide-out panel. ---- */
.filter-side, .to-filters { display: none; }
@media (min-width: 1024px) {
  .cat-layout {
    display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); gap: clamp(1.75rem, 3vw, 3rem);
    align-items: start; padding: 0 var(--edge);
  }
  /* One scroll: the column moves with the page. catalogue.js sets its sticky "top" so that once you scroll
     past its end it stays on the side (bottom edge pinned), and shows "All filters" to jump back up. */
  .cat-layout > .side-col { align-self: stretch; }   /* full height, so the column can stay on the side */
  .filter-side { display: block; position: sticky; top: calc(var(--bar-h, 3.5rem) + 1rem); padding: 0.25rem 0.75rem 2rem 0; }
  .filter-side-head {
    display: flex; align-items: baseline; justify-content: space-between; padding: 0.6rem 0 0.4rem; border-bottom: 1px solid var(--rule);
  }
  .filter-side-head h2 { margin: 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
  .filter-side-head button { font-size: 0.8125rem; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .filter-side .facet summary { padding: 0.85rem 0; }
  .filter-side .facet summary .current { font-size: 0.8125rem; max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .filter-side .facet-options { gap: 0.35rem; padding-bottom: 0.9rem; }
  .filter-side .opt { min-height: 2.15rem; padding: 0.4rem 0.7rem; font-size: 0.8125rem; cursor: pointer; }
  .filter-side .facet-options.long { max-height: 17rem; overflow-y: auto; scrollbar-width: thin; }
  .filter-side .long .opt { padding: 0.5rem 0.6rem; }
  @media (hover: hover) {
    .filter-side .opt:not([aria-checked="true"]):hover { background: #E6E6E9; }
    .filter-side .long .opt:not([aria-checked="true"]):hover { background: var(--field); }
  }

  /* The results column: one toolbar (count on the left, Sort on the right, level with the "Filter" heading),
     then chosen-filter chips, then the watches. No side padding of its own (the layout has it); no Filter button. */
  .cat-results {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "status sort" "chips chips" "grid grid" "more more";
    align-items: center; column-gap: 1rem;
  }
  .cat-results .status { grid-area: status; margin: 0; padding: 0.25rem 0 0.9rem; font-size: 0.875rem; }
  .cat-results .controls {
    grid-area: sort; position: static; display: block; padding: 0.25rem 0 0.9rem;
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .cat-results #filter-btn { display: none; }
  .cat-results #sort-ctl {
    width: auto; height: 2.5rem; padding: 0 2.4rem 0 1rem; justify-content: flex-start;
    font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: none; font-weight: 500; white-space: nowrap;
  }
  .cat-results #sort-ctl::after {
    content: ""; position: absolute; right: 1rem; top: 50%; width: 0.4rem; height: 0.4rem; margin-top: -0.3rem;
    border-right: 1.5px solid; border-bottom: 1.5px solid; transform: rotate(45deg); pointer-events: none;
  }
  .cat-results .chips { grid-area: chips; padding: 0 0 0.9rem; flex-wrap: wrap; overflow: visible; }
  .cat-results .grid { grid-area: grid; }
  .cat-results .more-wrap { grid-area: more; }
  .cat-layout .grid { padding: 0.25rem 0 2rem; grid-template-columns: repeat(3, 1fr); }
  .cat-results .more-wrap { padding-left: 0; padding-right: 0; }
}
@media (min-width: 1500px) { .cat-layout .grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 2100px) { .cat-layout .grid { grid-template-columns: repeat(5, 1fr); } }

@media (min-width: 1024px) {
  .to-filters {
    position: sticky; z-index: 3; top: calc(var(--bar-h, 3.5rem) + 0.75rem); display: flex; align-items: center; gap: 0.5rem;
    width: calc(100% - 0.75rem); height: 2.75rem; margin-bottom: -2.75rem; padding: 0 1rem; border-radius: var(--radius-s, 12px);
    background: var(--ink); color: #FFFFFF; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); cursor: pointer;
    opacity: 0; transform: translateY(-0.5rem); pointer-events: none; transition: opacity 220ms, transform 220ms;
  }
  .to-filters.show { opacity: 1; transform: none; pointer-events: auto; }
  .to-filters svg { width: 0.9rem; height: 0.9rem; }
  .to-filters .n { margin-left: auto; min-width: 1.4rem; height: 1.4rem; padding: 0 0.35rem; border-radius: 999px; background: #D6B88C; color: #111111; display: grid; place-items: center; letter-spacing: 0; }
  .to-filters .n:empty { display: none; }
}

/* Filter options show how many watches each would give (catalogue.js syncSheet); 0 = greyed out, can't be picked. */
.opt .opt-n { font-size: 0.85em; opacity: 0.55; font-variant-numeric: tabular-nums; }
.long .opt .opt-n { margin-left: 1rem; }
.opt[aria-checked="true"] .opt-n { opacity: 0.75; }
.opt.zero { opacity: 0.38; cursor: default; }
.opt.zero:active { transform: none; }
@media (hover: hover) { .filter-side .opt.zero:hover { background: transparent !important; } }

/* Desktop Help menu: the last item, so its panel opens leftwards from its right edge (it ran off the screen at 1024px). */
@media (min-width: 1024px) {
  .dnav-item:last-child > .dnav-panel:not(.wide) { left: auto; right: -1.5rem; }
}

/* Homepage banner pictures (lib/hero-image.js) */
.img-slot.has-img { padding: 0; background: #0E0E10; }
.img-slot.has-img picture, .img-slot.has-img img { display: block; width: 100%; height: 100%; }
.img-slot.has-img img { object-fit: cover; }
/* Over the dark banner pictures a see-through card turns grey: keep it crisp white, with a thin gold line like the guides. */
.img-slot.has-img ~ .slide-card { background: rgba(255, 255, 255, 0.97); border-top: 3px solid #D6B88C; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.55); }

/* ===== Homepage picture tiles (src/index.njk, pictures from lib/home-images.js) ===== */
.pic-tiles { display: grid; gap: 0.75rem; margin-top: 1.25rem; }
.type-tiles { grid-auto-flow: column; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-left: calc(-1 * var(--edge)); margin-right: calc(-1 * var(--edge)); padding: 0 var(--edge) 0.25rem; scroll-padding: 0 var(--edge); }
.type-tiles::-webkit-scrollbar { display: none; }
@media (min-width: 700px) { .type-tiles { grid-auto-columns: 34%; } }
@media (min-width: 1024px) { .type-tiles { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); overflow: visible; margin: 1.25rem 0 0; padding: 0; } }
.brand-tiles { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .brand-tiles { grid-template-columns: repeat(4, 1fr); } }
.pic-tile { position: relative; display: block; overflow: hidden; border-radius: var(--radius); background: #0C0C0E; scroll-snap-align: start;
  color: #fff; text-decoration: none; box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.55); }
.pic-tile img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 900ms cubic-bezier(0.33, 1, 0.68, 1); }
.pic-text { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 0.3rem; padding: 2.5rem 1rem 1rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.72)); }
.pic-name { font-size: clamp(1rem, 2.6vw, 1.2rem); font-weight: 500; letter-spacing: 0.01em; }
.pic-go { display: inline-flex; align-items: center; gap: 0.4rem; color: #D6B88C; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.pic-go svg, .hf-go svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; }
@media (hover: hover) { .pic-tile:hover img, .price-tile:hover img, .hp-feature:hover img, .hp-guides a:hover img { transform: scale(1.045); } }
.price-tiles { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .price-tiles { grid-template-columns: repeat(4, 1fr); } }
.price-tile { display: block; overflow: hidden; border-radius: var(--radius); background: #fff; color: var(--ink); text-decoration: none; box-shadow: var(--shadow-1); }
.price-tile img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; transition: transform 900ms cubic-bezier(0.33, 1, 0.68, 1); }
.pt-text { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.8rem 1rem 0.95rem; }
.pt-name { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.pt-count { font-size: 0.8125rem; color: var(--muted); }
/* From our guides */
.hp-feature { display: grid; margin-top: 1.25rem; overflow: hidden; border-radius: var(--radius); background: #111113; color: #fff; text-decoration: none; }
.hp-feature img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 900ms cubic-bezier(0.33, 1, 0.68, 1); }
.hf-text { display: flex; flex-direction: column; justify-content: center; gap: 0.55rem; padding: 1.4rem 1.3rem 1.6rem; border-top: 3px solid #D6B88C; }
@media (min-width: 900px) { .hp-feature { grid-template-columns: 1.3fr 1fr; } .hf-text { padding: 2.25rem; border-top: 0; border-left: 3px solid #D6B88C; } }
.hf-kicker, .hg-kicker { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #D6B88C; }
.hf-title { font-size: clamp(1.35rem, 3.4vw, 1.9rem); font-weight: 500; line-height: 1.2; }
.hf-sub { color: #C9CAD0; line-height: 1.55; }
.hf-go { align-self: flex-start; margin-top: 0.5rem; padding: 0.75rem 1.2rem; border-radius: var(--radius-xs); background: #D6B88C; color: #111;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.hp-guides { display: grid; gap: 0.75rem; margin-top: 0.75rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .hp-guides { grid-template-columns: repeat(3, 1fr); } }
.hp-guides a { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius); background: #fff; color: var(--ink); text-decoration: none; box-shadow: var(--shadow-1); }
.hp-guides img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 900ms cubic-bezier(0.33, 1, 0.68, 1); }
.hp-guides .hg-kicker { padding: 0.9rem 1rem 0; color: #9A7B4F; }
.hp-guides .hg-title { padding: 0.3rem 1rem 1rem; font-weight: 500; line-height: 1.3; }
.hp-section .more-link { display: inline-block; margin-top: 1rem; }
/* Phones: a tidier banner card (Harry: "text box seems a bit off"): snug to the edges, one-line kicker, smaller heading. */
@media (max-width: 899px) {
  .slide-card { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; padding: 1rem 1.1rem 1.1rem; }
  .slide-card .kicker { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .slide-card h1, .slide-card h2 { margin: 0.25rem 0 0.75rem !important; }
  .slide-card .btn { height: 2.6rem; }
}

/* Pick up where you left off: arrows on computers (shown on hover, hidden at the ends) */
.recent-wrap { position: relative; }
.recent-wrap .g-arrow { top: calc(50% - 1.5rem); z-index: 2; }
.recent-wrap .g-prev { left: -0.5rem; } .recent-wrap .g-next { right: -0.5rem; }
@media (hover: hover) { .recent-wrap:hover .g-arrow, .recent-wrap .g-arrow:focus-visible { opacity: 1; } }
.recent-row .tile img { width: 88%; height: 88%; object-fit: contain; }

/* The saved panel on every page except the Watches page (saved.js): same look as the Watches page's list. */
#sg-saved .open-w { color: var(--ink); text-decoration: none; }
#sg-saved .saved-row .tile { display: grid; place-items: center; overflow: hidden; border-radius: var(--radius-xs); background: #fff; }
#sg-saved .saved-row .tile img { width: 90%; height: 90%; object-fit: contain; opacity: 1; }   /* the shared .tile img starts hidden until "loaded" */
#sg-saved .txt { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
#sg-saved .txt .b { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
#sg-saved .txt .m { font-size: 0.9375rem; line-height: 1.3; }
#sg-saved .txt .p { margin-top: 0.2rem; font-weight: 600; }
@media (hover: hover) { #sg-saved .open-w:hover .m { text-decoration: underline; text-underline-offset: 3px; } }

/* Find your type of watch and Shop by price (18 Oct, after Goldsmiths' brand tiles): close-up pictures with a big bold
   label centred at the bottom; a swipe row on phones and tablets, a grid on computers. */
.price-tiles { grid-template-columns: none; }
.type-tiles, .price-tiles { grid-auto-flow: column; grid-auto-columns: 46%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-left: calc(-1 * var(--edge)); margin-right: calc(-1 * var(--edge)); padding: 0 var(--edge) 0.25rem; scroll-padding: 0 var(--edge); }
.price-tiles::-webkit-scrollbar { display: none; }
@media (min-width: 700px) { .type-tiles, .price-tiles { grid-auto-columns: 30%; } }
@media (min-width: 1024px) {
  .type-tiles { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); overflow: visible; margin: 1.25rem 0 0; padding: 0; }
  .price-tiles { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; margin: 1.25rem 0 0; padding: 0; }
}
.pic-tile.big .pic-text { align-items: center; text-align: center; padding: 3rem 0.75rem 1.1rem; background: none; }
.pic-tile.big .pic-name { font-size: clamp(1.05rem, 3.8vw, 1.45rem); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.15;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55); }
.pic-tile.big .pic-go { font-size: 0.625rem; }

/* Back to top (nav.js): bottom right, above the sticky Buy bar on watch pages when that's showing. */
.to-top { position: fixed; z-index: 900; right: calc(1rem + env(safe-area-inset-right, 0px)); bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: rgba(20, 20, 22, 0.88); color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(0.75rem) scale(0.9); pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease, bottom 220ms ease, background-color 150ms ease; }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.to-top:hover, .to-top:focus-visible { background: #000; }
.to-top:active { transform: scale(0.92); }
body:has(.pp-sticky.show) .to-top { bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 1024px) { .to-top { right: 1.5rem; bottom: 1.5rem; width: 3.1rem; height: 3.1rem; } }

/* "Also 312 results for diamond in Jewellery →": inside the count line on the Watches and Jewellery pages when
   there is a search (assets/js/xshop.js). Watches and jewellery are never mixed; this only links across. */
.status .xshop { font-weight: 600; }
.status .xshop a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Layout shift (Cloudflare's CLS showed 12% "poor" on /watches/, /jewellery/ and /search/, 27 Oct 2026). These start
   empty and are filled by the page's script; until then they hold the height they'll have, so nothing below jumps.
   Measured on a phone (390px) and a computer (1366px). :empty stops applying the moment the script fills them. */
#grid:empty { min-height: 120vh; }
#crumbs:empty { min-height: 35px; }
#pick:empty { min-height: 386px; }
.cat-layout .status, .grid + .status, p.status { min-height: 19px; }
@media (max-width: 1023px) { #cats:empty { min-height: 49px; } }
@media (min-width: 1024px) { #pick:empty { min-height: 226px; } }

/* Shop jewellery (homepage): the four categories, a swipe row on phones like Shop by price, four across on computers. */
.jewel-tiles { grid-auto-flow: column; grid-auto-columns: 46%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-left: calc(-1 * var(--edge)); margin-right: calc(-1 * var(--edge)); padding: 0 var(--edge) 0.25rem; scroll-padding: 0 var(--edge); }
.jewel-tiles::-webkit-scrollbar { display: none; }
@media (min-width: 700px) { .jewel-tiles { grid-auto-columns: 30%; } }
@media (min-width: 1024px) { .jewel-tiles { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; margin: 1.25rem 0 0; padding: 0; } }

/* Collection cards (homepage, after Goldsmiths' homepage, 28 Oct 2026): a light picture, then a small heading, the title
   in capitals, one line and an underlined link, all centred. Two or three across on computers; a swipe row on phones. */
.col-cards { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; margin: 1.25rem calc(-1 * var(--edge)) 0; padding: 0 var(--edge) 0.25rem; scroll-padding: 0 var(--edge); }
.col-cards::-webkit-scrollbar { display: none; }
.col-cards + .col-cards { margin-top: 2rem; }
@media (min-width: 700px) { .col-cards.col-3 { grid-auto-columns: 46%; } }
@media (min-width: 1024px) {
  .col-cards { grid-auto-flow: row; overflow: visible; margin: 1.25rem 0 0; padding: 0; gap: 1.25rem; }
  .col-cards.col-2 { grid-template-columns: repeat(2, 1fr); }
  .col-cards.col-3 { grid-template-columns: repeat(3, 1fr); }
}
.col-card { display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--ink); text-decoration: none; scroll-snap-align: start; }
.col-img { display: block; width: 100%; overflow: hidden; background: #EEEAE4; }
.col-img img { display: block; width: 100%; height: auto; transition: transform 0.6s ease; }
@media (hover: hover) { .col-card:hover .col-img img { transform: scale(1.03); } }
.col-k { margin-top: 1.1rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.col-t { margin-top: 0.45rem; font-size: clamp(1rem, 2.2vw, 1.2rem); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.25; }
.col-l { margin-top: 0.45rem; font-size: 0.9375rem; color: var(--muted); line-height: 1.45; max-width: 30rem; }
.col-go { margin-top: 0.55rem; font-size: 0.9375rem; text-decoration: underline; text-underline-offset: 4px; }

/* The jewellery banner (homepage and guides, {% jbanner %}): pieces on dark brushed metal, then the name and a button.
   Wide (the homepage on a computer): the text sits on the black to the right of the pieces, after Goldsmiths' banners.
   Narrow (a guide's column, phones): the picture, then the text below it, so nothing squeezes onto the pieces. */
.jbanner { position: relative; display: block; overflow: hidden; border-radius: var(--radius); background: #000; color: #fff; text-decoration: none; margin: 1.5rem 0; container-type: inline-size; }
.g-body a.jbanner, .jbanner .jb-t, .jbanner .jb-l { color: #fff; text-decoration: none; }
.jbanner .jb-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.jbanner img { display: block; height: 100%; width: auto; max-width: none; }
.jb-text { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0.25rem 1.25rem 1.75rem; }
.jb-k { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: #CDB27A; }
.jb-t { margin-top: 0.55rem; font-family: var(--serif, Georgia, "Times New Roman", serif); font-size: clamp(1.6rem, 6cqi, 2.6rem); line-height: 1.08; letter-spacing: 0.12em; text-transform: uppercase; }
.jb-l { margin-top: 0.7rem; max-width: 24rem; font-size: 0.95rem; line-height: 1.45; color: rgba(255, 255, 255, 0.82); }
.jb-btn { display: inline-flex; align-items: center; justify-content: center; margin-top: 1.1rem; height: 3rem; padding: 0 1.8rem; white-space: nowrap; border-radius: var(--radius-xs); background: #fff; color: #000; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; transition: background 0.2s; }
.jbanner:hover .jb-btn, .jbanner:focus-visible .jb-btn { background: #E9E4D8; }
@container (min-width: 900px) {
  .jbanner .jb-img { aspect-ratio: auto; }
  .jbanner img { width: 100%; height: auto; }
  .jb-text { position: absolute; top: 0; right: 0; bottom: 0; width: 42%; justify-content: center; padding: 1.5rem 2rem; }
}