/* Seravine — navigation and footer (assets/sr/sr-nav-*.js). The CONTENT follows White Moon; the LOOK is
   only the maison's own: its tokens (--pearl, --ink, --wine, --gold, --gold-2, --f-crest, --f-disp,
   --f-body, --ease), its drape (.mega) with gold Cinzel h6 over serif .ml links, its ogee window (.win),
   its .lnk and .eyebrow, its .ft footer. Nothing here is taken from White Moon's styles or icons.
   Loaded after assets/demo/sv-*.css. */

/* ── bar: six links on the left of the crest from 1280px; the burger takes over below ── */
.srn-links { display: none; }
@media (min-width: 1280px) {
  .srn-links { display: flex; }
  .hdr .burger { display: none; }
}

/* ── drape layer ──
   The drapes and the search panel live in .srn-layer at the end of <body> (sr-nav-*.js), hung from the
   viewport at the header bar's box (--srn-t / --srn-l / --srn-r). Out of the header, no page's hero card
   (transforms, overflow:hidden, isolation) and no sticky toolbar can reshape, crop or cover them. */
.srn-layer { position: fixed; left: 0; right: 0; top: 0; height: 0; z-index: 58; }
.srn-layer .srn-mega,
.srn-layer .srn-search { position: fixed; top: var(--srn-t, var(--hdr)); left: var(--srn-l, 0); right: var(--srn-r, 0);
  max-height: calc(100vh - var(--srn-t, var(--hdr))); overflow-y: auto; overscroll-behavior: contain; }
/* the maison's drape opens on :hover inside .ni; out here it opens on .is-open, with the same fall */
.srn-layer .srn-mega.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .7s var(--ease), visibility 0s; }
.srn-ni.is-open > .hlk { opacity: 1; }
.srn-ni.is-open > .hlk::after { transform: scaleX(1); transform-origin: left; }

/* ── drape contents: the maison's columns (h6 + .ml) and a feature in its ogee window ── */
.srn-in { display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 18vw, 280px); column-gap: clamp(40px, 4vw, 72px); padding-block: 48px 56px; }
/* columns sized to their own lists (a two-column list is simply wider), the spare width shared between them */
.srn-cols { display: grid; grid-auto-flow: column; grid-auto-columns: max-content; justify-content: space-between; column-gap: clamp(28px, 3vw, 48px); align-items: start; }
.srn-cols:has(> .srn-col:nth-child(2):last-child) { justify-content: start; column-gap: clamp(64px, 7vw, 120px); }
.srn-then { margin-top: 30px; }
.srn-ls--2 { columns: 2; column-gap: 34px; }
/* The maison's drape link, as its own .ml draws it (serif, emerald italic and a slide on hover), under a
   class of its own: the home page's stylesheet also uses .ml — for its hero column, with 300px+ of top
   padding and flex layout — and on the home page that rule pulled every drape link apart. A long White
   Moon list needs the link a size down to keep a column on screen. */
.srn-ml { display: block; font-family: var(--f-disp); font-size: 18px; line-height: 1.6; white-space: nowrap; break-inside: avoid;
  transition: transform .5s var(--ease), color .4s; }
.srn-ml:hover { transform: translateX(10px); color: var(--wine); font-style: italic; }

.srn-feat { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; align-self: start; }
.srn-win { display: block; width: 100%; aspect-ratio: 4/5; margin-bottom: 8px; }
.srn-win img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease-out); }
.srn-feat:hover .srn-win img { transform: scale(1.06); }
.srn-eb { color: var(--gold); }
.srn-ft { font-size: 30px; line-height: 1.05; }
.srn-fx { font-size: 14px; line-height: 1.55; color: var(--mute); margin-bottom: 6px; }

/* ── search drape ── */
.srn-search { background: var(--pearl); color: var(--ink); border-top: 1px solid var(--line);
  box-shadow: 0 60px 80px -60px rgba(11,31,25,.5); animation: srnDrape .7s var(--ease) both; }
@keyframes srnDrape { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.srn-search-in { padding-block: 34px 44px; }
.srn-sf { display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.srn-sf > svg { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.srn-sf input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: 300 clamp(24px, 3vw, 36px)/1.2 var(--f-disp); outline: none; padding: 6px 0; }
.srn-sf input::placeholder { color: var(--mute); opacity: .8; }
.srn-sf input::-webkit-search-cancel-button { display: none; }
.srn-sf .lnk { color: var(--wine); flex: none; }
.srn-sf button[type="submit"] { padding: 0 0 6px; border: 0; background: none; color: var(--wine); align-self: center; }
@media (max-width: 600px) { .srn-sf button[type="submit"] { display: none; } }
.srn-sx { flex: none; color: var(--ink); }
.srn-sx svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.srn-search h6 { margin: 0 0 12px; font: 500 10px var(--f-crest); letter-spacing: .32em; text-transform: uppercase; color: var(--gold); }
.srn-sug { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px 56px; margin-top: 26px; }
.srn-sug:empty { display: none; }
.srn-l { list-style: none; margin: 0; padding: 0; }
.srn-l a { display: flex; justify-content: space-between; gap: 18px; width: 100%; font-family: var(--f-disp); font-size: 17px; line-height: 1.75; transition: transform .5s var(--ease), color .4s; }
.srn-l a:hover { transform: translateX(6px); color: var(--wine); font-style: italic; }
.srn-pr { flex: none; font: 400 13px var(--f-body); color: var(--mute); font-style: normal; }
.srn-allres { grid-column: 1 / -1; justify-self: start; color: var(--wine); }
.srn-none { margin: 0; color: var(--mute); font-family: var(--f-disp); font-size: 20px; }

/* ── full-screen menu (the maison's .mm): its big serif lines, each opening to its submenu ── */
.srn-mm-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; }
.srn-mm .icn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.srn-acc { display: flex; flex-direction: column; }
.srn-mm .srn-big { font-family: var(--f-disp); font-weight: 300; font-size: clamp(30px, 8vw, 44px); line-height: 1.25; padding: 6px 0; color: inherit; }
.srn-at { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 16px; background: none; border: 0; text-align: left; cursor: pointer; }
.srn-at[aria-expanded="true"] { color: var(--gold-2); font-style: italic; }
.srn-pm { position: relative; flex: none; width: 18px; height: 18px; }
.srn-pm::before, .srn-pm::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--gold-2); transition: transform .6s var(--ease); }
.srn-pm::after { transform: rotate(90deg); }
.srn-at[aria-expanded="true"] .srn-pm::after { transform: rotate(0deg); }
.srn-ab { display: grid; gap: 26px; padding: 10px 0 30px; border-bottom: 1px solid var(--line-d); margin-bottom: 8px; }
.srn-ab[hidden] { display: none; }
.srn-all { justify-self: start; color: var(--gold-2); }
.srn-mm h6 { margin: 0 0 12px; font: 500 10px var(--f-crest); letter-spacing: .32em; text-transform: uppercase; color: var(--gold-2); }
.srn-mcol h6 ~ h6 { margin-top: 26px; }
.srn-mm .srn-ml { color: var(--pearl); white-space: normal; }
.srn-mm .srn-ml:hover { color: var(--gold-2); }
.srn-mm .srn-ls--2 { column-gap: 22px; }
.srn-mm-f { display: flex; flex-wrap: wrap; gap: 14px 26px; margin-top: 36px; color: rgba(244,243,238,.78); }
.srn-mm-f a:hover { color: var(--gold-2); }
/* tablets and small laptops (the menu runs to 1279px): the groups sit side by side like the drape's
   columns instead of each spanning the whole screen; a two-column list takes two tracks */
@media (min-width: 700px) {
  .srn-ab { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); column-gap: 48px; row-gap: 30px; align-items: start; }
  .srn-all { grid-column: 1 / -1; }
  .srn-mcol:has(.srn-ls--2) { grid-column: span 2; }
}

/* ── footer (SRNAV.footer): White Moon's content in the maison's own footer ──
   Laid out as the maison's footer always was: an eyebrow over a display line, plain contact lines in
   its muted pearl, social as its underlined .lnk words, then the .ft-l columns — no icons. */
.srf-brand { max-width: 460px; }
.srf .eyebrow { color: var(--gold-2); }
.srf-blurb { margin: 26px 0 0; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.2; color: var(--pearl); }
.srf-lines { display: flex; flex-direction: column; gap: 4px; margin-top: 26px; }
.srf-lines a { color: rgba(244,243,238,.65); font-size: 14px; line-height: 1.8; transition: color .3s; }
.srf-lines a:hover { color: var(--pearl); }
.srf-soc { display: flex; gap: 26px; margin-top: 22px; }
.srf-soc .lnk { color: var(--gold-2); }
.srf nav { min-width: 0; }

/* ── 1280–1599: the same bar and drapes on a tighter measure (last, so it wins over the rules above);
   White Moon's Engagement Rings drape (four lists, three of them two-column) needs it to 1599px ── */
@media (min-width: 1280px) and (max-width: 1599px) {
  .srn-links { gap: 20px; }
  .srn-cols { column-gap: 24px; }
  .srn-ls--2 { column-gap: 24px; }
  .srn-ml { font-size: 17px; }
}

/* ── features this store does not have (see sections/sr-page.liquid) ──
   Compare: the collection/search script still draws its .cmpb buttons, tray and modal; salon booking,
   live viewing, invented reviews and "ask a jeweller" stay in the page for their scripts but never show. */
.cmpb, .tray, .cmpm { display: none !important; }
#salon[hidden], #compare[hidden], #viewing[hidden], #lettersSec[hidden], #askP[hidden] { display: none !important; }

/* ── header icons: White Moon's row of plain line icons (sr-nav-*.js SRNAV.icons / SRNAV.cart), drawn in
   the header's own ink, with the maison's gold count badge ── */
.hr:has(.srn-ic) { gap: 4px; }
.srn-ic { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 40px;
  background: none; border: 0; padding: 0; color: inherit; cursor: pointer; transition: opacity .3s, transform .4s var(--ease); }
.srn-ic:hover { opacity: .65; }
.srn-ic svg { width: 19px; height: 19px; }
.srn-cnt { position: absolute; top: 3px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--gold); color: var(--ink);
  font: 500 9.5px/16px var(--f-body); text-align: center; }
.srn-cnt[hidden] { display: none; }
.srn-cnt.bump { animation: bump .6s var(--ease); }

/* ── product card details (SRNAV.card): White Moon's ribbon, swatches and price row in the maison's card ── */
.srn-off { position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--wine); color: var(--pearl); padding: 7px 12px; border-radius: 999px; }
.srn-pcb { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.srn-sws { display: flex; gap: 8px; }
.srn-sw { width: 15px; height: 15px; }
.srn-sw[data-srn-href]:hover, .srn-sw[data-srn-href]:focus-visible { outline: none; box-shadow: inset 0 0 0 1px rgba(20,33,28,.16), 0 0 0 3px var(--pearl), 0 0 0 4px var(--wine); }
.srn-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; margin-top: auto; }
.srn-pk { color: var(--mute); }
.srn-was { font-family: var(--f-disp); font-size: 17px; color: var(--mute); }
.srn-ends { display: inline-flex; align-items: center; gap: 7px; color: var(--wine); }
.srn-ends i { width: 6px; height: 6px; border-radius: 50%; background: var(--wine); animation: srnPulse 1.6s ease-in-out infinite; }
@keyframes srnPulse { 50% { opacity: .25; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { .srn-ends i { animation: none; } }

/* ── wishlist drawer ── */
.srw-lock{overflow:hidden}
.srw{position:fixed;inset:0;z-index:300}
.srw-scrim{position:absolute;inset:0;background:rgba(11,31,25,.45);opacity:0;transition:opacity .35s}
.srw-panel{position:absolute;top:0;right:0;bottom:0;width:min(440px,100vw);background:var(--pearl);color:var(--text);display:flex;flex-direction:column;gap:18px;padding:26px clamp(20px,3vw,32px) 28px;transform:translateX(100%);transition:transform .45s var(--ease-out,ease);box-shadow:-30px 0 60px -30px rgba(11,31,25,.5);overflow-y:auto}
.srw.on .srw-scrim{opacity:1}
.srw.on .srw-panel{transform:none}
.srw-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.srw-head h2{font-size:34px;line-height:1.05;margin:6px 0 4px}
.srw-eb{color:var(--gold)}
.srw-n{color:var(--mute)}
.srw-x{background:none;border:0;cursor:pointer;width:40px;height:40px;display:grid;place-items:center;color:var(--text);flex-shrink:0}
.srw-x svg,.srw-rm svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.3}
.srw-q input{width:100%;min-height:44px;border:1px solid var(--line);border-radius:999px;background:transparent;padding:0 18px;font-size:15px}
.srw-q input:focus{outline:none;border-color:var(--wine)}
.srw-list{display:flex;flex-direction:column}
.srw-row{display:grid;grid-template-columns:84px 1fr auto;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.srw-im{display:block;aspect-ratio:4/5;background:var(--vellum);overflow:hidden;border-radius:10px}
.srw-im img{width:100%;height:100%;object-fit:cover}
.srw-t{display:flex;flex-direction:column;gap:6px;min-width:0}
.srw-t .disp{font-size:20px;line-height:1.15;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.srw-t .disp:hover{color:var(--wine)}
.srw-t .num{font-size:15px}
.srw-t s{color:var(--mute);font-size:13px}
.srw-t .lnk{color:var(--wine)}
.srw-rm{background:none;border:1px solid var(--line);border-radius:50%;width:38px;height:38px;display:grid;place-items:center;cursor:pointer;color:var(--mute);transition:color .3s,border-color .3s}
.srw-rm:hover{color:var(--wine);border-color:var(--wine)}
.srw-empty{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:30px 0}
.srw-empty .disp{font-size:28px}
.srw-empty span{color:var(--mute);font-size:15px}
.srw-none{color:var(--mute);padding:20px 0}
.srn-mm-f button{background:none;border:0;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer}

/* ── Call now + back to top ── */
.srn-call{position:fixed;left:18px;bottom:18px;z-index:70;display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 20px 0 16px;border-radius:999px;background:var(--ink,#0B1F19);color:var(--pearl);box-shadow:0 16px 32px -18px rgba(11,31,25,.6);transition:transform .4s var(--ease-out,ease),bottom .4s}
.srn-call svg{width:18px;height:18px;fill:none;stroke:var(--gold-2,#DCCDAA);stroke-width:1.4;stroke-linejoin:round}
.srn-call:hover{transform:translateY(-2px)}
.srn-top{position:fixed;right:18px;bottom:18px;z-index:70;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--pearl);color:var(--wine);display:grid;place-items:center;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .35s,transform .35s,bottom .4s;box-shadow:0 16px 32px -18px rgba(11,31,25,.45)}
.srn-top svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4}
.srn-top.on{opacity:1;pointer-events:auto;transform:none}
body:has(.buybar.on) .srn-call,body:has(.buybar.on) .srn-top{bottom:100px}
@media (max-width:560px){.srn-call{padding:0;width:46px;justify-content:center}.srn-call span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}