/* Shared look for the secondary product pages (malchut.html, silver.html).
   One stylesheet so both pages read as the same store, a notch lighter than
   the homepage but with room to breathe and explain. */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Google Sans Flex', -apple-system, sans-serif; color: #1C1710; background: #FDFAF3; -webkit-font-smoothing: antialiased; line-height: 1.6; }
img { display: block; max-width: 100%; }

/* Line breaking. Left to itself the browser was stranding single words on a
   line of their own and breaking mid-clause. 'pretty' spends a little layout
   time avoiding orphans, 'balance' evens the lines of short blocks like
   headings. Both degrade to normal wrapping where unsupported. */
p, li, figcaption { text-wrap: pretty; }
/* balance only on headings. Applied to body copy it evens the line lengths by
   breaking mid-phrase, which is the opposite of what was wanted. */
h1, h2, h3, .pp-step-h { text-wrap: balance; }
a { color: inherit; }

.wrap { max-width: 1120px; margin-inline: auto; padding-inline: 22px; }
.hd { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; border-bottom: 1px solid rgba(28,23,16,0.1); }
/* One image, the designer's own vertical lockup: mark above the wordmark, in
   their spacing. Stacking the mark and the wordmark by hand read as two assets
   pushed together, because that is what it was. */
.brand { display: block; text-decoration: none; transition: opacity .2s ease; }
.brand:hover { opacity: .72; }
.brand img { display: block; width: auto; height: 78px; }
@media (max-width: 600px) { .brand img { height: 56px; } }
.hd-r { display: flex; align-items: center; gap: 22px; }
.back { font-size: 13px; letter-spacing: .06em; color: #5A5142; text-decoration: none; }
.back:hover { color: #1C1710; }
.cart-link { position: relative; text-decoration: none; font-size: 13px; letter-spacing: .06em; color: #1C1710; }
.cart-link [data-cart-count] { display: none; margin-inline-start: 5px; background: #1C1710; color: #fff; border-radius: 9px; padding: 1px 7px; font-size: 11px; }

.pd { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; padding: 44px 0; }
/* A grid track sized 1fr still refuses to go below its content's min-content
   width, and a scrolling row of photographs reports a very wide one. Without
   this the gallery pushes its own column past the viewport. */
.pd > * { min-width: 0; }

/* ---------------------------------------------------------------------------
   THE GALLERY.

   Measured on a 390px phone before this existed: the photograph rendered at
   72x90 and each thumbnail at 3x3, because .pd had no breakpoint at all and
   the buying column's min-content ate the other column. Nothing overflowed, so
   every horizontal-overflow check passed while the page was unusable.

   The track is one horizontally scrolling row of full-width slides with CSS
   scroll snapping, which is the swipe every shopper already tries on a phone
   without being told to, and it costs no javascript to do. On the desktop the
   same track is driven by clicking a thumbnail.
   --------------------------------------------------------------------------- */
.gallery { position: relative; }
.gallery-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-slide { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 4/5;
  overflow: hidden; background: #EDE6D8; }
.gallery-slide img { width: 100%; height: 100%; object-fit: cover; }

/* Where in the set you are. Thumbnails say it on the desktop; on a phone they
   are below the fold of the photograph, so the dots say it in place. */
.gallery-dots { display: none; justify-content: center; gap: 7px; margin-top: 12px; }
.gallery-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(28,23,16,0.22);
  transition: background .25s ease, transform .25s ease; }
.gallery-dots i.on { background: #1C1710; transform: scale(1.25); }
/* Says which size is in the picture. Someone browsing the gallery at 15 mm can
   land on the 25 mm photograph and think that is what they are buying.
   Deliberately outside .gallery-main, which is a fixed aspect ratio with
   overflow hidden and would clip it away. */
.pd-cap { font-size: 12.5px; letter-spacing: .04em; color: #756E5F; margin-top: 10px; text-align: center; min-height: 1em; }
/* A row that scrolls, not a grid that divides. Seven photographs across a
   phone as a grid gave 3px targets; as a strip they stay 56px and the row
   simply runs off the edge, which is also the cue that there are more. */
.thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto;
  scrollbar-width: none; scroll-behavior: smooth; }
.thumbs::-webkit-scrollbar { display: none; }
.thumbs button { flex: 0 0 auto; width: 74px; padding: 0; border: 1px solid transparent;
  background: none; cursor: pointer; aspect-ratio: 1/1; overflow: hidden;
  transition: border-color .2s ease, opacity .2s ease; opacity: .62; }
.thumbs button:hover { opacity: 1; }
.thumbs button.on { border-color: #1C1710; opacity: 1; }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }

.tag { font-size: 12px; letter-spacing: .22em; color: #866B2F; margin-bottom: 12px; }
.pd h1 { font-family: 'Karantina','Google Sans Flex',sans-serif; font-weight: 400; font-size: clamp(40px,6vw,66px); line-height: .92; }
.lead { font-size: 16px; line-height: 1.95; color: #3A342A; margin-top: 20px; }
.kicker { font-size: 13px; color: #756E5F; margin-top: 14px; }

/* ---------------------------------------------------------------------------
   The buying column.

   The complaint was that everything was jammed together with nothing to
   breathe. Two causes, and the spacing was only one of them.

   The other was repetition. The price appeared on each metal, again on each
   size, and again as the total: five numbers competing for the one job the
   big number already does. The gift box was stated twice, once as its own row
   and once inside the spec line. Every one of those had to be read and
   dismissed before a shopper could get to the decision.

   So the options carry names only and the price is said once, large, where
   the eye lands before the button. Each group gets real room around it, and
   the label sits well clear of its options.
   --------------------------------------------------------------------------- */

.pp-group { margin-top: 40px; }
.pp-label { font-size: 10.5px; letter-spacing: .26em; color: #756E5F; margin: 0 0 18px; }

/* --- metal: the colour, and its name --- */
.pp-swatches { display: flex; gap: 40px; }
.pp-swatch { display: flex; align-items: center; gap: 12px; padding: 0; border: 0;
  background: none; cursor: pointer; font-family: inherit; font-size: 15px; color: #756E5F;
  white-space: nowrap; transition: color .2s ease; }
.pp-swatch .dot { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(28,23,16,0.14); transition: box-shadow .2s ease; }
.pp-swatch[data-tone="gold"] .dot { background: linear-gradient(140deg,#E8C87A,#C0983F 55%,#96742F); }
.pp-swatch[data-tone="silver"] .dot { background: linear-gradient(140deg,#EDEFF1,#C3C9CF 55%,#A7AEB5); }
.pp-swatch.on { color: #1C1710; }
.pp-swatch.on .dot { box-shadow: 0 0 0 2px #FDFAF3, 0 0 0 3px #1C1710; }

/* --- size and length --- */
.pp-chips { display: flex; gap: 34px; flex-wrap: wrap; }
.pp-chip { padding: 0 0 9px; border: 0; border-bottom: 1px solid transparent; background: none;
  cursor: pointer; font-family: inherit; font-size: 15px; color: #756E5F; text-align: start;
  transition: color .2s ease, border-color .2s ease; }
.pp-chip:hover { color: #1C1710; }
.pp-chip.on { color: #1C1710; border-bottom-color: #1C1710; }
/* the only sub-label left is the one that is not a price */
.pp-chip .pp-sub { display: block; font-size: 11.5px; color: #756E5F; margin-top: 5px; letter-spacing: .02em; }

.pp-step { margin-top: 40px; padding: 0; background: none; border: 0; }
.pp-step-h { display: none; }
.pp-step-sub { font-size: 12.5px; line-height: 1.75; color: #756E5F; margin: 18px 0 0; max-width: 46ch; }

/* --- the price, alone, with room --- */
.price-box { margin-top: 44px; padding-top: 30px; border-top: 1px solid rgba(28,23,16,0.1);
  background: none; }
.pp-lines { display: none; }
.pp-total { display: flex; align-items: baseline; gap: 14px; }
.pp-total .l { font-size: 10.5px; letter-spacing: .26em; color: #756E5F; }
.pp-total .n { font-size: 38px; font-weight: 400; letter-spacing: -.015em; color: #1C1710; line-height: 1; }

/* --- the actions --- */
/* Sharp full-width slabs are what a 2012 checkout looked like. These get a
   soft radius, room to breathe inside, weight in the type, and a lift on
   hover so they read as something you press rather than a coloured band. */
.pp-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }

/* The buttons.
   The gradient, the inset highlight and the lift on hover were doing an
   impression of metal and landing on 2013 instead. A house that sells the real
   thing has no business faking a shine on a button. Flat ink, a hairline
   outline for the secondary, and nothing moves: the only change on hover is
   the fill, which is what a restrained shop does. */
.pp-wa { display: block; text-align: center; padding: 19px 24px; margin: 0; text-decoration: none;
  font-size: 15.5px; font-weight: 500; letter-spacing: .06em; color: #FDFAF3;
  background: #1C1710; border: 1px solid #1C1710; border-radius: 2px; cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease; }
.pp-wa:hover { background: #2E2719; border-color: #2E2719; }
.pp-wa:active { background: #120E09; }
/* The metal chosen tints the line, not the whole button: enough to answer
   "which one am I buying", quiet enough not to shout. */
.pp-wa[data-metal="gold"] { border-block-end-color: #C0983F; }
.pp-wa[data-metal="silver"] { border-block-end-color: #BCC2C8; }

.pp-add { display: block; width: 100%; padding: 18px 24px; border: 1px solid rgba(28,23,16,0.28);
  border-radius: 2px; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 500;
  letter-spacing: .06em; color: #1C1710; background: transparent;
  transition: border-color .2s ease, background .2s ease; }
.pp-add:hover { border-color: #1C1710; background: rgba(28,23,16,0.04); }
.pp-add:disabled { opacity: .4; cursor: default; }
.pp-confirm { display: none; margin-top: 16px; text-align: center; font-size: 13.5px; color: #1C1710; }
.pp-confirm a { text-decoration: underline; white-space: nowrap; }

/* --- the fine print, which had no rules at all --- */
/* .pp-wa-terms and .pp-note carried no CSS anywhere in the project, so they
   inherited the body: 16px, full ink, three default underlines. That made the
   consent sentence the loudest text in the column after the price and put the
   hierarchy exactly backwards. Fine print has to be legible and reachable,
   not compete with the button it sits under. #756E5F is the darkest of the
   muted tones and clears AA on the cream at this size (4.85:1). */
.pp-wa-terms { max-width: 40ch; margin: 16px auto 0; text-align: center;
  font-size: 11.5px; line-height: 1.75; color: #756E5F; text-wrap: pretty; }
.pp-wa-terms a { color: inherit; text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: rgba(117,110,95,0.45); transition: text-decoration-color .2s ease; }
.pp-wa-terms a:hover { text-decoration-color: currentColor; }

/* This is a statement about the number, so it sits under the number. Left at
   the very bottom of the block it hung below the icon grid with nothing to
   attach to and read as leftover. */
.pp-note { margin: 9px 0 0; text-align: start; font-size: 11.5px;
  line-height: 1.7; letter-spacing: .03em; color: #756E5F; }

/* The silver page ends with a link across to the gold model. It was wearing
   .pp-note, so shrinking the fine print would have shrunk the one thing in
   that corner meant to be clicked. Its own class, one step up. */
.pp-crosslink { margin: 20px 0 0; text-align: center; font-size: 13px; }
.pp-crosslink a { color: #5A5142; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(90,81,66,0.4); transition: color .2s ease, text-decoration-color .2s ease; }
.pp-crosslink a:hover { color: #1C1710; text-decoration-color: currentColor; }

/* Narrow screens: the same rhythm, a little tighter. */
@media (max-width: 600px) {
  .pp-group, .pp-step { margin-top: 32px; }
  .pp-label { margin-bottom: 14px; }
  .pp-chips { gap: 24px; }
  .pp-swatches { gap: 28px; }
  .price-box { margin-top: 34px; padding-top: 24px; }
  .pp-total .n { font-size: 33px; }
}

/* ---- the story, and the facts under it ----
   These rules were lost when the buying column was rewritten, which left the
   four facts stacking into a single right-aligned column: a grocery list.
   Restored as a four-up grid, and restyled to match the calmer column above:
   the number leads, the label sits under it, and space does the separating. */
.story { max-width: 720px; margin-inline: auto; padding: 64px 0 0; text-align: center; }
.story h2 { font-family: 'Karantina','Google Sans Flex',sans-serif; font-weight: 400;
  font-size: clamp(30px,4vw,44px); line-height: 1; margin-bottom: 20px; }
.story p { font-size: 16.5px; line-height: 2; color: #3A342A; }
.story-lead { margin-bottom: 0; }
.story .gimatria + p { margin-top: 34px; }

/* ---- the gematria, as a diagram rather than a sentence ----
   Two sums written out in prose read as a hedge of brackets. Drawn, they are
   the product's whole argument in one glance: the letters at display size,
   their values under them, and the number both sums arrive at inside the star.

   The first attempt copied the homepage's dark treatment. On the homepage that
   is a full-bleed band, so it reads as a chapter of the site; dropped into a
   cream page as a rounded slab it read as a widget pasted in, and most of its
   area was empty. Here the diagram carries itself with air and hairlines, in
   the same ink-on-cream the rest of this page is already speaking.

   The one gold is the star and the values, which is also the object: a gold
   frame with the 14 sitting in its middle. */
.gimatria { margin-top: 40px; padding: 46px 0 44px;
  border-block: 1px solid rgba(28,23,16,0.11);
  display: flex; align-items: center; justify-content: center;
  gap: clamp(26px,6vw,74px); flex-wrap: wrap; }

.gm-word { display: grid; grid-template-columns: repeat(5,auto); justify-content: center;
  align-items: center; column-gap: 15px; row-gap: 13px; direction: rtl; }
/* the three values belong under the three letters, not under the plus signs */
.gm-word > :nth-child(6) { grid-column: 1; }
.gm-word > :nth-child(7) { grid-column: 3; }
.gm-word > :nth-child(8) { grid-column: 5; }
.gm-l { font-size: clamp(38px,4.8vw,54px); line-height: 1; font-weight: 300; color: #1C1710; }
.gm-op { font-size: 19px; font-weight: 300; color: #B3AA96; }
/* #866B2F clears AA on the cream at this size (4.84:1) */
.gm-v { font-size: 13px; letter-spacing: .1em; color: #866B2F; }

.gm-star svg polygon { stroke-width: 1.35; }
.gm-star { position: relative; width: clamp(118px,14vw,152px); aspect-ratio: 1/1;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #C0983F; }
.gm-star svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.gm-n { position: relative; font-size: clamp(32px,3.8vw,40px); line-height: 1;
  font-weight: 400; color: #1C1710; }

/* Narrow: a column, not a wrap. Left to wrap, the first sum and the star
   shared a row and the second sum was orphaned underneath, which broke the
   symmetry the whole diagram rests on. Stacked, the star still sits between
   the two sums and the reading order survives. */
@media (max-width: 640px) {
  .gimatria { flex-direction: column; flex-wrap: nowrap; gap: 26px; padding: 38px 0 36px; }
  .gm-word { column-gap: 12px; }
  .gm-star { width: 112px; }
}

.details { display: grid; grid-template-columns: repeat(4,1fr); gap: 40px 30px;
  max-width: 900px; margin: 64px auto 0; padding: 40px 0 72px; }
.details .d { text-align: center; }
.details .d .n { font-family: 'Karantina','Google Sans Flex',sans-serif; font-weight: 400;
  font-size: 40px; line-height: 1; color: #1C1710; }
.details .d .l { font-size: 12.5px; line-height: 1.6; color: #756E5F; margin-top: 10px; }

@media (max-width: 700px) {
  .details { grid-template-columns: repeat(2,1fr); gap: 34px 20px; margin-top: 44px; padding: 32px 0 56px; }
  .story { padding-top: 48px; }
}

/* ---- live spec line, gift box, instalments, trust rows ---- */
/* the spec is a quiet line of text, not another framed box */
.pp-spec { font-size: 12.5px; line-height: 1.6; color: #756E5F; background: none;
  border: 0; border-top: 1px solid rgba(28,23,16,0.1); padding: 9px 0 0; margin-top: 14px; }
.pp-instal { font-size: 12.5px; color: #5A5142; margin-top: 5px; text-align: center; }
.pp-giftrow { margin-top: 10px; }
/* the last hard-edged rectangle in a column of soft pills, which is exactly
   how it read: a radius puts it back in the same family */
.pp-gift { display: flex; align-items: center; gap: 9px; cursor: pointer;
  font-size: 13px; color: #1C1710; border: 1px solid rgba(28,23,16,0.16);
  border-radius: 12px; padding: 11px 14px; transition: border-color .2s ease; }
.pp-gift:hover { border-color: rgba(28,23,16,0.45); }
.pp-gift input { width: 15px; height: 15px; accent-color: #1C1710; cursor: pointer; flex-shrink: 0; }
.pp-gift span:first-of-type { flex: 1; }
.pp-gift-price { color: #5A5142; font-size: 12.5px; }
.pp-gift-inc { display: block; font-size: 12.5px; color: #756E5F; padding: 0;
  background: none; }
/* four short promises read better across two columns than down one */
.pp-trust { list-style: none; margin: 26px 0 0; padding: 20px 0 0;
  border-top: 1px solid rgba(28,23,16,0.1);
  display: grid; grid-template-columns: 1fr 1fr; gap: 13px 16px; }
.pp-trust li { font-size: 12.5px; color: #5A5142; display: inline-flex; align-items: center; gap: 8px; }

/* One icon box, everywhere. The span carries the size so the SVG can stay a
   plain 24x24 and inherit the colour of the text it sits beside. */
.ic { display: inline-flex; flex-shrink: 0; color: #866B2F; }
.ic svg { width: 100%; height: 100%; display: block; }

/* ---- FAQ ---- */
.faq { max-width: 760px; margin-inline: auto; padding: 46px 0 10px;
  border-top: 1px solid rgba(28,23,16,0.1); }
.faq h2 { font-family: 'Karantina','Google Sans Flex',sans-serif; font-weight: 400;
  font-size: clamp(28px,4vw,42px); margin-bottom: 20px; text-align: center; }
.faq details { border-bottom: 1px solid rgba(28,23,16,0.1); padding: 4px 0; }
.faq summary { cursor: pointer; font-size: 16px; padding: 14px 0; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: #866B2F; font-size: 20px; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq p { font-size: 15px; line-height: 1.9; color: #3A342A; margin: 0 0 16px; }
.faq a { text-decoration: underline; }

.pp-deadline { font-size: 13px; color: #8A5A1E; background: #FBF3E4; text-align: center;
  padding: 9px 12px; margin-top: 12px; }

/* The one fact on this page a shopper is most likely to misread. */
.pp-emph { color: #1C1710; font-weight: 600; }

/* ---- sticky buy bar: mobile only ----
   Promoting it to desktop was a patch over the real problem, which was that
   this column had too much in it. The column is condensed instead. */
.pp-bar { display: none; }
@media (max-width: 768px) {
  .pp-bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: #FDFAF3; border-top: 1px solid rgba(28,23,16,0.16);
    box-shadow: 0 -6px 22px rgba(28,23,16,0.10); padding: 10px 14px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .pp-bar-in { display: flex; align-items: center; gap: 12px; }
  .pp-bar-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
  .pp-bar-txt span { font-size: 12px; color: #5A5142; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pp-bar-txt strong { font-size: 18px; font-weight: 500; color: #1C1710; }
  .pp-bar-add { flex-shrink: 0; border: none; cursor: pointer; font-family: inherit;
    font-size: 14px; letter-spacing: .08em; color: #241C0C; padding: 14px 22px;
    background: linear-gradient(120deg,#7A5A21 0%,#B08D3E 24%,#FFDB74 50%,#B08D3E 76%,#7A5A21 100%); }
  body { padding-bottom: 78px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* A visible focus ring on every interactive thing, in the brand ink rather
   than the browser default blue. */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #1C1710;
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   THE CART, ON ITS OWN PAGE.

   It used to be the lower half of a 420px drawer, sharing that width with a
   full product configurator. There was no room left to separate the summary
   from the list, so the total, the terms and the button all ran into the items
   above them and the whole panel felt like a cupboard.

   Here the list and the summary are two columns with real space between them,
   and the summary is a bordered block of its own that stays in view while the
   list is scrolled. The separation is the point.
   --------------------------------------------------------------------------- */
.ck-head { padding: 48px 0 34px; border-bottom: 1px solid rgba(28,23,16,0.1); }
.ck-head h1 { font-family: 'Karantina','Google Sans Flex',sans-serif; font-weight: 400;
  font-size: clamp(40px,6vw,62px); line-height: 1; }
.ck-head p { font-size: 12.5px; letter-spacing: .12em; color: #756E5F; margin-top: 12px; }

.ck { display: grid; grid-template-columns: 1fr 400px; gap: 60px; align-items: start;
  padding: 40px 0 80px; }

/* --- the lines --- */
.ck-list { min-width: 0; }
.ck-item, .ci { display: flex; gap: 24px; align-items: flex-start;
  padding: 26px 0; border-bottom: 1px solid rgba(28,23,16,0.09); }
.ci:first-child { padding-top: 6px; }
.ci-txt { flex: 1; min-width: 0; }
.ci-txt h2 { font-size: 17px; font-weight: 500; line-height: 1.35; color: #1C1710; }
.ci-txt p { font-size: 13px; line-height: 1.7; color: #756E5F; margin-top: 6px; }

.ci-qty { display: inline-flex; align-items: center; gap: 4px; margin-top: 16px;
  border: 1px solid rgba(28,23,16,0.18); border-radius: 999px; padding: 3px; }
.ci-qty button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: none;
  cursor: pointer; font-family: inherit; font-size: 16px; line-height: 1; color: #1C1710;
  transition: background .2s ease; }
.ci-qty button:hover { background: rgba(28,23,16,0.07); }
.ci-qty span { min-width: 26px; text-align: center; font-size: 14px; color: #1C1710; }

.ci-end { text-align: end; flex-shrink: 0; }
.ci-sum { font-size: 17px; font-weight: 500; color: #1C1710; white-space: nowrap; }
.ci-rm { margin-top: 12px; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 12px; color: #8A8170; text-decoration: underline;
  text-underline-offset: 3px; transition: color .2s ease; }
.ci-rm:hover { color: #1C1710; }

/* --- the summary, deliberately a block of its own --- */
.ck-sum { position: sticky; top: 26px; border: 1px solid rgba(28,23,16,0.13);
  border-radius: 18px; padding: 30px 28px 26px; background: #F7F3E9; }
.ck-sum-l { font-size: 10.5px; letter-spacing: .26em; color: #756E5F; margin-bottom: 22px; }
.ck-total { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.ck-total span { font-size: 13px; color: #3A342A; }
.ck-total .n { font-size: 32px; font-weight: 400; letter-spacing: -.015em; color: #1C1710; line-height: 1; }
.ck-note { font-size: 11.5px; letter-spacing: .03em; color: #756E5F; margin-top: 9px; }

.ck-terms { display: flex; align-items: flex-start; gap: 11px; cursor: pointer;
  margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(28,23,16,0.12);
  font-size: 11.5px; line-height: 1.75; color: #5A5142; }
.ck-terms input { width: 17px; height: 17px; margin-top: 2px; flex-shrink: 0;
  accent-color: #1C1710; cursor: pointer; }
.ck-terms a { color: inherit; text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: rgba(90,81,66,0.45); }
.ck-terms a:hover { text-decoration-color: currentColor; }

/* The label is the longest string on the page and it wraps badly: measured at
   301px inside a 272px button before the column was widened. The column now
   gives it 306 and the type sits at 14.5, with balance as the backstop so a
   narrow phone gets two even lines rather than one orphaned word. */
.ck-buy { display: block; margin-top: 22px; text-align: center; padding: 18px 18px;
  text-decoration: none; font-size: 14.5px; font-weight: 500; letter-spacing: .06em;
  line-height: 1.4; text-wrap: balance; color: #FDFAF3; border-radius: 2px;
  background: #1C1710; border: 1px solid #1C1710;
  transition: background .25s ease, border-color .25s ease, opacity .2s ease; }
.ck-buy:hover { background: #2E2719; border-color: #2E2719; }
.ck-buy:active { background: #120E09; }
.ck-buy.off { opacity: .35; cursor: default; }
.ck-buy.off:hover { background: #1C1710; border-color: #1C1710; }

.ck-why { font-size: 11.5px; color: #756E5F; text-align: center; margin-top: 12px; }
.ck-err { font-size: 12.5px; color: #B23B2E; text-align: center; margin-top: 12px; }

.ck-trust { list-style: none; margin: 24px 0 0; padding: 20px 0 0;
  border-top: 1px solid rgba(28,23,16,0.12);
  display: grid; grid-template-columns: 1fr 1fr; gap: 13px 14px; }
.ck-trust li { font-size: 12px; color: #5A5142; display: inline-flex; align-items: center; gap: 8px; }
/* Elsewhere .ic is sized by an inline style on the span. Here the markup is
   clean, so the size belongs in the sheet: without it the SVG fills its box
   and the row turns into four enormous glyphs. */
.ck-trust .ic { width: 17px; height: 17px; }

/* --- nothing in it --- */
.ck-empty { padding: 74px 0 96px; text-align: center; }
.ck-empty p { font-size: 17px; color: #756E5F; }
.ck-empty-cta { display: inline-block; margin-top: 24px; font-size: 14px; letter-spacing: .06em;
  color: #1C1710; text-decoration: underline; text-underline-offset: 5px;
  text-decoration-color: rgba(28,23,16,0.3); }
.ck-empty-cta:hover { text-decoration-color: currentColor; }

.ft { padding: 30px 0 44px; border-top: 1px solid rgba(28,23,16,0.1); text-align: center; }
.ft p { font-size: 12px; color: #756E5F; }
.ft a { text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(117,110,95,0.4); }

@media (max-width: 900px) {
  /* Summary first on a phone: the number and the button are what the page is
     for, and burying them under the list means scrolling to find out there is
     a checkout at all. */
  .ck { grid-template-columns: 1fr; gap: 34px; padding: 30px 0 64px; }
  .ck-sum { position: static; order: -1; }
  .ck-head { padding: 34px 0 26px; }
}

/* ---------------------------------------------------------------------------
   THE PHONE.

   .pd had no breakpoint, so every phone got the desktop's two columns. This is
   the fix the rest of the mobile work hangs off: one column, photograph first
   and full width, exactly the order every jewellery site in this market uses.

   820 rather than 768: at 800px the two columns are already too narrow to hold
   a photograph and a configurator side by side.
   --------------------------------------------------------------------------- */
@media (max-width: 820px) {
  /* The order a phone actually wants: the photograph, then the two decisions
     that change it, then the rest of the photographs, then the price and the
     button. Choosing silver should repaint the picture you are already looking
     at, not the picture you have to scroll back up to.

     Both column wrappers and the gallery go display:contents, which dissolves
     them into the one column so every piece can be ordered independently.
     Nothing about the desktop grid changes. */
  /* align-items:start is inherited from the desktop rule and means flex-start
     on the cross axis here, which let every row shrink to its content: the
     thumbnail strip sized to all seven thumbnails and put 158px off the side. */
  .pd { display: flex; flex-direction: column; align-items: stretch; gap: 0;
    padding: 24px 0 40px; }
  .pd > div, .gallery { display: contents; }

  .gallery-track { order: 1; }
  .gallery-dots  { order: 2; margin-top: 12px; }
  .pd-cap        { order: 3; }
  .tag           { order: 4; margin-top: 26px; }
  .pd h1         { order: 5; }
  .lead          { order: 6; }
  /* .proof has to be numbered too: an unordered flex child defaults to 0 and
     was landing above the photograph, claiming the topography before anyone
     had seen the object. */
  .proof         { order: 7; }
  .kicker        { order: 8; }
  .buy-choose    { order: 9; }
  .thumbs        { order: 10; margin-top: 26px; }
  .buy-rest      { order: 11; }

  /* The bleed moves to the track, since .gallery is no longer a box. */
  .gallery-track { margin-inline: -22px; }
  .thumbs { padding-inline: 0; }

  /* The photograph was 4:5 of the full width, 488px on a 390px phone, and with
     the header above it that left the first thing you choose at 829px on the
     gold page and 1048 on ממלכת דוד: a whole screen of scrolling before the
     page admitted there was anything to decide. Capped against the viewport
     instead, so a shorter phone gets a shorter photograph rather than the same
     one pushing everything further down. object-fit keeps it filled. */
  /* 38vh, chosen by measuring rather than by taste: it is the largest cap that
     still puts the first choice above the fold on all three product pages
     (651, 691 and 835 against an 844 viewport). */
  .gallery-slide { max-height: 38vh; }

  /* Two things between the photograph and the first choice that a phone can
     do without. .how-to tells you to choose a finish and add to cart, which
     the controls immediately under it already say by existing; the ordinary
     kicker is content and stays. And the proof strip keeps its number but
     loses its label line and some padding: it is a signpost here, not a
     section. */
  .kicker.how-to { display: none; }
  .proof { margin-top: 16px; padding: 12px 14px; }
  .proof .k { display: none; }
  .proof .v { font-size: 13.5px; }
  .proof .go { margin-top: 7px; }
  .gallery-dots { margin-top: 9px; }
  .pd-cap { margin-top: 8px; }
  .tag { margin-top: 18px; }
  .gallery-dots { display: flex; }
  .pd-cap { margin-top: 12px; }
  .thumbs { padding-inline: 22px; }
  .thumbs button { width: 62px; }
  .pd h1 { font-size: clamp(38px,11vw,52px); }
  .lead { font-size: 15.5px; line-height: 1.85; margin-top: 16px; }

  /* Touch targets. Measured before this: the size chips were 45x29, the header
     links 27x21 and 93x21, all well under the 44px a finger needs. The visible
     shape is unchanged; the reachable area is not. */
  .pp-chip { min-height: 44px; padding-bottom: 12px; }
  .pp-swatch { min-height: 44px; }
  .cart-link, .back { display: inline-flex; align-items: center; min-height: 44px; }

  /* The header was 97px tall on a phone, which is a tenth of the screen spent
     on a logo before anything is sold. */
  .hd { padding: 12px 0; }
  .brand img { height: 44px; }
  .hd-r { gap: 16px; }
  .back { font-size: 12.5px; }

  .story { padding-top: 34px; }
  .story p { font-size: 15.5px; line-height: 1.9; }
}

/* A finger is not a mouse: the strip only fades the unselected thumbnails
   where there is something to hover with. */
@media (hover: none) {
  .thumbs button { opacity: 1; }
}

/* The one path out of an article about something that is not for sale yet. */
.art-cta { margin: 46px 0 10px; padding: 34px 30px; border: 1px solid rgba(28,23,16,0.13);
  border-radius: 18px; background: #F7F3E9; text-align: center; }
.art-cta .l { font-size: 10.5px; letter-spacing: .26em; color: #756E5F; margin-bottom: 14px; }
.art-cta h2 { font-family: 'Karantina','Google Sans Flex',sans-serif; font-weight: 400;
  font-size: clamp(28px,4vw,40px); line-height: 1; margin-bottom: 12px; }
.art-cta p { font-size: 15.5px; line-height: 1.8; color: #3A342A; max-width: 42ch; margin-inline: auto; }
.art-cta a { display: inline-block; margin-top: 24px; padding: 15px 30px; border-radius: 2px;
  text-decoration: none; font-size: 14.5px; font-weight: 500; letter-spacing: .06em;
  color: #FDFAF3; background: #1C1710; border: 1px solid #1C1710;
  transition: background .25s ease, border-color .25s ease; }
.art-cta a:hover { background: #2E2719; border-color: #2E2719; }
@media (max-width: 600px) { .art-cta { padding: 28px 20px; margin-inline: 0; } }

/* Three short columns that explain what an object is. Used on the ממלכת דוד
   page, where the shape is a map and a map needs saying out loud. */
.explain { display: grid; grid-template-columns: repeat(3,1fr); gap: 44px;
  max-width: 1000px; margin: 10px auto 0; padding: 34px 0 76px; }
.explain h3 { font-family: 'Karantina','Google Sans Flex',sans-serif; font-weight: 400;
  font-size: clamp(26px,3vw,34px); line-height: 1.05; margin-bottom: 14px; }
.explain p { font-size: 15.5px; line-height: 1.95; color: #3A342A; }
.explain p + p { margin-top: 14px; }
.explain .src { font-size: 12.5px; line-height: 1.75; color: #756E5F;
  border-top: 1px solid rgba(28,23,16,0.12); padding-top: 12px; margin-top: 18px; }
@media (max-width: 820px) {
  .explain { grid-template-columns: 1fr; gap: 34px; padding: 24px 0 54px; }
  .explain p { font-size: 15px; }
}

/* The second explain block sits under the first, so it is two columns rather
   than three and does not restate the rule above it. */
.explain-2 { grid-template-columns: repeat(2,1fr); max-width: 860px; padding-top: 6px; }
@media (max-width: 820px) { .explain-2 { grid-template-columns: 1fr; } }
/* A closing note, narrower than the story it follows. */
.story-tight { max-width: 620px; padding-top: 18px; }
.story-tight p + p { margin-top: 18px; }

/* The chain has no price yet, and the total above this is the pendant alone.
   Directly above the button, because that is where the misunderstanding would
   otherwise be paid for. Not an error colour: nothing has gone wrong, the
   customer simply needs to know what the number covers. */
.pp-quote { margin-top: 20px; padding: 15px 17px; border-radius: 3px;
  background: #F6EFE0; border-inline-start: 3px solid #C0983F; }
.pp-quote .h { font-size: 14px; font-weight: 500; color: #1C1710; margin-bottom: 5px; }
.pp-quote p { font-size: 13px; line-height: 1.7; color: #5A4B2C; }
.pp-quote[hidden] { display: none; }

/* The one claim that justifies the price, carried above the decision instead
   of two screens below it. A link, not a box of copy: it says the thing and
   offers the proof rather than trying to be the proof. */
.proof { display: block; margin-top: 22px; padding: 15px 17px; text-decoration: none;
  border: 1px solid rgba(28,23,16,0.14); border-radius: 3px; background: #FAF6EC;
  transition: border-color .2s ease, background .2s ease; }
.proof:hover { border-color: rgba(28,23,16,0.32); background: #F7F1E3; }
.proof .k { display: block; font-size: 10.5px; letter-spacing: .24em; color: #866B2F; margin-bottom: 8px; }
.proof .v { display: block; font-size: 14px; line-height: 1.7; color: #1C1710; }
.proof .go { display: block; font-size: 12.5px; color: #756E5F; margin-top: 9px;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(117,110,95,0.4); }
.proof:hover .go { color: #1C1710; text-decoration-color: currentColor; }
#how { scroll-margin-top: 20px; }

/* A citation, small and set apart, for the one sentence on the site that makes
   a claim about a contested term. */
.explain .ref { font-size: 11px; color: #866B2F; margin-inline-start: 5px;
  text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.explain .ref::before { content: '['; }
.explain .ref::after { content: ']'; }

/* One article on its own line, rather than a two-column grid with a gap where
   its neighbour used to be. */
.explain-1up { grid-template-columns: 1fr; max-width: 640px; padding-top: 6px; }

/* ---------------------------------------------------------------------------
   ZOOM ON HOVER.

   This is the one product whose whole argument is detail you have to get close
   to, so the gallery lets you. The image scales inside its own frame and the
   origin follows the cursor, which is the pattern every jewellery site uses
   and the only one that needs no extra chrome on the page.

   Exactly 2x, not more: the smallest photograph in the catalogue is 1023px
   against a 510px frame, so 2x is the last factor that still shows real
   detail. Past it the browser would be inventing pixels and calling it a
   close-up.

   hover + fine only. A touch screen reports neither, so a phone never enters
   this and the swipe keeps working untouched.
   --------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .gallery-slide { cursor: zoom-in; }
  .gallery-slide img { transition: transform .45s cubic-bezier(.22,.7,.3,1); }
  .gallery-slide.zoom img { transform: scale(2); transition-duration: .2s; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-slide img { transition: none; }
}