/* Seravine — responsive pass (phone 375 · tablet 768 / 1024 · desktop 1280 / 1440). Loaded last (layout, after every page
   stylesheet) so it corrects layout only; colours, type families and the design's parts stay as they are. */

/* product card: the name sizes to the card it sits in (one wide card on a phone, four across a desktop, two in the
   atelier's list), at most three lines; was a fixed 27px that ran to 5–8 lines in narrow cards */
.pc{container-type:inline-size}
.pc .pc-n{font-size:clamp(17px,7.4cqi,27px);line-height:1.12;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}

/* collection toolbar: three rows now (shape · metal · price + sort) — kept in the flow instead of sticking over a
   quarter of the screen while the grid scrolls */
.tbar{position:relative;top:auto}

/* home · the houses: the house name fits its card on a phone ("ENGAGEMENT" ran past the card edge) */
@media (max-width:560px){
  .gp .nm{font-size:clamp(22px,6.6vw,34px);letter-spacing:.05em}
  .gp .gp-c{left:22px;right:22px}
}

/* home · questions: one column below 860px — the heading no longer sticks over the questions */
@media (max-width:860px){
  .faq>.stack{position:static!important}
}

/* the fixed Call / back-to-top buttons never sit over the last footer line */
@media (max-width:820px){
  .ft-b{padding-bottom:96px}
}

/* mobile menu: "About" (a link, not an accordion) took the old 44px of `.mm a.big` — same size as its neighbours now;
   the small account / wishlist / store / bag links get a full 44px tap height */
.srn-mm a.srn-big{font-size:clamp(30px,8vw,44px)}
.srn-mm-f{row-gap:0}
.srn-mm-f a,.srn-mm-f button{display:inline-flex;align-items:center;min-height:44px}

/* search results below 1000px: price and sort are not offered there and the grid-size buttons hide — the toolbar would
   be an empty white pill over the results */
@media (max-width:1000px){
  .tbar:has(#srPrice[hidden]):has(#sort[hidden]):not(:has(#srShapeF:not([hidden]))):not(:has(#shapeF:not([hidden]))){display:none}
}

/* product page on a phone: a ring with eight photographs put eight 64px thumbnails in one row and pushed the gallery
   and the details to 536px (sideways scroll) — the row now scrolls inside its own width */
@media (max-width:980px){
  .pd{grid-template-columns:minmax(0,1fr)}
  .pd>*{min-width:0}
}
@media (max-width:560px){
  .gal{grid-template-columns:minmax(0,1fr)}
  .gal .thumbs{overflow-x:auto;scrollbar-width:none;min-width:0;padding-bottom:2px}
  .gal .thumbs::-webkit-scrollbar{display:none}
  .gal .thumbs .th{flex:0 0 64px}
}

/* sticky buy bar: the long store names ran to four lines and pushed "Choose this setting" / "Add to bag" off the
   edge — one line with an ellipsis, the button keeps its width */
.buybar #bbN{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buybar .wrap>.btn,.buybar #bbAdd{flex-shrink:0}
@media (max-width:560px){
  .buybar .wrap{gap:12px;min-height:66px}
  .buybar #bbN{font-size:17px!important}
  .buybar #bbAdd{padding-inline:18px;min-height:44px}
}

/* product title: the design's 52–88px display size was drawn for short names; the store's names run to 90 characters
   and stood 11 lines tall beside the gallery — sized to the column, still the crest capitals */
.pd .info h1#pName{font-size:clamp(28px,2.9vw,44px);line-height:1.08}

/* the fixed Call / back-to-top buttons lift above the product page's buy bar while it is showing */
.srn-call,.srn-top{transition:bottom .5s var(--ease)}
body:has(.buybar.on) .srn-call,body:has(.buybar.on) .srn-top{bottom:96px}
@media (max-width:560px){ body:has(.buybar.on) .srn-call,body:has(.buybar.on) .srn-top{bottom:84px} }
/* on the dark bands (footer, dial, standards) the dark Call button keeps a visible edge */
.srn-call{box-shadow:0 0 0 1px rgba(220,205,170,.38),0 10px 24px -12px rgba(0,0,0,.5)}

/* the header lives inside the hero card (#heroCard: home .hcard, listing .chc, about .cine), whose isolation kept the
   pinned header's z-index inside the card — later sections (the oath, questions, product grid) slid OVER the header
   while scrolling. The card now sits above the page content, below the menu drapes (58) and the Call buttons (70). */
#heroCard{z-index:57}
@media (max-width:820px){ body:has(.buybar.on) .ft-b{padding-bottom:160px} }
/* desktop too: the copyright line clears the fixed Call button */
@media (min-width:821px){ .ft-b{padding-bottom:84px} }

/* article / policy lists: the item was a flex row, so a bold lead-in ("Colour") and its sentence became two columns —
   the sentence squeezed into a narrow strip on a phone. Block item, the gold diamond hung in the margin. */
.sr-prose li{display:block;position:relative;padding-left:18px}
.sr-prose li::before{position:absolute;left:0;top:0}

/* header (desktop, from 1280px): the six links shared either side of the crest — three on the left, three on the right
   before the icons — instead of all six crowding the left half. The crest stays on the centre line. */
.hr .srn-icons{display:flex;align-items:center;gap:10px}
.hr .srn-links--r{display:none}
@media (min-width:1280px){
  .hr .srn-links--r{display:flex}
  .hdr .hr{gap:clamp(20px,2.4vw,44px)}
}

/* listing toolbar rows (shape · metal): from 600px they wrap onto a second line instead of running off the edge
   ("Emera…" cut at 768 and 1280); on a phone they keep scrolling sideways with a fade that shows there is more */
@media (min-width:600px){
  #srShapeF,#shapeF{flex-wrap:wrap;overflow-x:visible;row-gap:4px}
}
@media (max-width:599px){
  #srShapeF,#shapeF{overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
  #shapeF::-webkit-scrollbar{display:none}
}

/* home · the houses below 860px: the sideways gallery snapped to the first card on load and hid its own intro
   ("Five houses" + All collections) off the left edge — the intro is a snap point at the start */
@media (max-width:860px){
  .gal-intro{scroll-snap-align:start}
}

/* listing grid on a tablet in landscape (1001–1279px): three pieces a row (four were ~140px cards); the grid-size
   buttons return from 1280px */
@media (min-width:1001px) and (max-width:1279px){
  #grid.grid{--cols:3!important}
  .tbar .dens{display:none}
}

/* home · the opening curtain: one pearl veil (its middle panel was near-black #141414, which read as a broken photo with
   no header or text around it); the gold ring and a wine "S" draw in its centre, then the three panels lift as before */
.hcard .intro i:nth-child(2){background:#F3EEE6}
.hcard .intro i{border-right-color:rgba(11,31,25,.06)}
.hcard .intro text{fill:var(--wine)}

/* listing hero (from 600px — tablets too): a category photograph is portrait (1200×1500) and the hero is ~3:1 — cover cut a thin strip
   out of its middle and blew it up 1.7× (a blurred close-up). A portrait photo now stands whole-height on the right of
   the card and melts into the ink on its left edge; the title sits on the ink. Landscape photos (All, Search) stay
   full-bleed; phones keep the full-bleed photo, which fits a tall card. */
@media (min-width:600px){
  .chc .bgi img.port{left:auto;right:0;width:clamp(260px,46%,980px);object-position:50% 36%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%);mask-image:linear-gradient(90deg,transparent 0,#000 34%)}
  .chc:has(.bgi img.port)::after{background:linear-gradient(0deg,rgba(11,31,25,.55),transparent 38%)}
  .chc:has(.bgi img.port){background:radial-gradient(120% 140% at 0% 0%,#163a30 0%,var(--ink) 60%)}
}
@media (min-width:600px){
  /* each photograph framed on its piece: the bracelet and the pendant sit low in theirs */
  .chc .bgi img.port[data-k="bracelets"]{object-position:50% 74%}
  .chc .bgi img.port[data-k="necklaces"]{object-position:50% 72%}
  .chc .bgi img.port[data-k="wedding"]{object-position:50% 30%}
  /* the header's right-hand links and icons stay legible over a light photograph */
  .chc:has(.bgi img.port)::after{background:linear-gradient(180deg,rgba(11,31,25,.62) 0,rgba(11,31,25,.18) 16%,transparent 30%),linear-gradient(0deg,rgba(11,31,25,.55),transparent 38%)}
}
@media (min-width:600px) and (max-width:860px){
  /* tablet portrait: the title column keeps clear of the photograph */
  .chc:has(.bgi img.port) .chc-t{max-width:60%}
}