/* pearl.css: the few page rules the kit leaves to the page, for cut-out jewellery photographs.
   The client's earrings are cut from their backgrounds, so every picture stands on the section's own
   surface (no box shadow, no gradient) and is never cropped by object-fit: cover. */

/* a cut-out never fills its box by cover: it sits whole on the surface, with air round it */
img.cut, .tile__media--cut > img, .piece-cut > img, .hero__media--cut > img, .close__media--cut > img,
.menu-card .panel > img.cut { object-fit: contain; }

/* frames that hold a cut-out or a crop of one */
.frame--cut { padding: 0; }
.frame--cut > img.cut { position: absolute; inset: 9%; width: 82%; height: 82%; max-width: none; }
.frame--cut > img.crop {
  position: absolute; inset: 10%; width: 80%; height: 80%; max-width: none; object-fit: contain;
  transform: scale(var(--cz, 1)); transform-origin: var(--cx, 50%) var(--cy, 50%);
}
.split-col__end .frame.small { width: calc(50% - var(--gutter) / 2); margin-left: auto; }   /* three columns, on column 10's line */
.grid--even { align-items: stretch; }
.grid--even > .frame { align-self: stretch; }
.grid--top > .frame--cut { align-self: start; }

/* product tiles: the pair whole on the surface */
.tile__media--cut > img { padding: 12%; }
.tile__media--cut { background: var(--surface); }

/* the menu panel's picture cards */
.menu-card .panel { background: var(--surface); position: relative; overflow: clip; }
.menu-card .panel > img.cut { position: absolute; inset: 0; width: 100%; height: 100%; padding: 10%; }

/* the triptych hero: each piece a cut-out on the surface */
.ly-collage .ly-piece.piece-cut > img { object-fit: contain; padding: 9%; }

/* the product page's split hero: the pair on the surface */
.hero__media--cut > img { padding: 8%; }
.hero--split .hero__media--cut { background: var(--surface); }

/* the closing photograph: a cut-out down to the links */
.close__media--cut > img { padding: 4% 8%; }

/* one picture across the viewport, as tall as the screen leaves under the heading */
.bleed {
  margin-inline: calc(50% - 50vw); position: relative; background: var(--surface);
  height: clamp(280px, calc(var(--ly-fit) - var(--ly-head, 160px) - var(--ly-head-gap)), 720px);
}
.bleed > img { position: absolute; inset: 8% 0; width: 100%; height: 84%; max-width: none; object-fit: contain; }
@media (max-width: 1023px) { .bleed { height: 60vw; } }

/* the order box on a product page */
.order { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
.order__sizes { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.order__sizes > legend { width: 100%; padding: 0; margin-bottom: var(--s-2); color: var(--muted); }
.seg { position: relative; }
.seg > input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg > span {
  display: inline-flex; align-items: center; height: var(--btn-h-sm, 40px); padding: 0 var(--s-4);
  border: 1px solid var(--line-strong); border-radius: var(--r-btn, var(--r-sm)); font-size: var(--t-small); font-weight: 500;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.seg > input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.seg > input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.order__price { font: var(--display-weight) var(--t-h3)/1.2 var(--font-display); letter-spacing: var(--display-tracking); font-variant-numeric: tabular-nums; }
.order__price .t-small { font-family: var(--font-text); letter-spacing: 0; }
.order > .btn-row { margin-top: var(--s-2); }
.hero--product .hero__head > .order { grid-column: 9 / -1; margin-top: 0; }
@media (max-width: 1023px) { .hero--product .hero__head > .order { grid-column: 1 / -1; } }

/* the subscribe line in the footer */
.subscribe { display: flex; align-items: end; gap: var(--s-2); flex-wrap: wrap; }
.subscribe > .field { flex: 1 1 220px; }

.faq--tight { margin-top: var(--s-7); }

/* skip link: hidden until it has focus */
.skip { position: absolute; left: var(--s-4); top: -60px; z-index: 100; padding: var(--s-2) var(--s-4); border-radius: var(--r-sm); background: var(--ink); color: var(--bg); }
.skip:focus { top: var(--s-3); }

/* the bag: a sheet from the right, in the page's colours */
.bag { margin: 0 0 0 auto; height: 100dvh; max-height: none; width: min(420px, 100vw); padding: var(--s-6); border: 0; border-left: 1px solid var(--line);
       background: var(--bg); color: var(--ink); display: none; }
.bag[open] { display: flex; flex-direction: column; gap: var(--s-5); }
.bag::backdrop { background: rgb(0 0 0 / .32); }
.bag__head { display: flex; justify-content: space-between; align-items: baseline; }
.bag__list { display: grid; gap: var(--s-4); }
.bag__row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--s-4); align-items: center; }
.bag__row img { width: 64px; height: 64px; object-fit: contain; background: var(--surface); border-radius: var(--r-sm); padding: 6px; }
.bag__foot { margin-top: auto; display: grid; gap: var(--s-3); border-top: 1px solid var(--line); padding-top: var(--s-5); }
.bag__total { display: flex; justify-content: space-between; font-weight: 500; }
.bag__close { background: none; border: 0; color: var(--ink); cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 4px; }

/* close-word: the name sized by bag.js to the width of the .wrap or the height the close leaves,
   whichever is smaller; this is the size before the face loads */
.close__word > span { display: inline-block; }

/* the product page's stage hero: the name and its line on the left, the order on the right, the pair
   on the stage under them */
@media (min-width: 1024px) {
  html .hero.hero--pdp.hero--product .hero__head > div:first-child { display: block; grid-column: 1 / span 7; align-self: end; }
  html .hero.hero--pdp.hero--product .hero__head > div:first-child > .hero__lead { margin-top: var(--s-4); max-width: 46ch; }
  html .hero.hero--pdp.hero--product .hero__head > .order { grid-column: 9 / -1; grid-row: 1; align-self: end; gap: var(--s-3); }
  .hero--pdp.hero--product .order > .btn-row > .btn--secondary { display: none; }
}
/* the kit's .86 line clips a descender (the y of the name): give the line its full height */
.close__word { line-height: 1.04; padding-bottom: .02em; }

/* a phone: compositions go two-up so each section stays one screen */
@media (max-width: 639px) {
  .grid.comp > .frame { grid-column: auto / span 6; --ratio: 100% !important; }
  .grid.comp--trio > .frame:first-child { grid-column: 1 / -1; --ratio: 64% !important; }
  .tall-small > .frame { --ratio: 80% !important; }
  .tall-small .split-col__end .frame.small { width: 100%; margin-left: 0; margin-top: var(--s-5); --ratio: 50% !important; }
  .care__pic { display: none; }
}

/* a placeholder reads at the page's muted contrast, never the browser's light grey */
.field input::placeholder { color: var(--muted); opacity: 1; }
/* the brand band's second line in its ink: grey on a strong colour reads washed out */
.ground-brand { --muted: var(--ink); }

/* a pair of frames takes what the screen leaves under its heading (desktop) */
@media (min-width: 1024px) {
  .grid.comp--pair.fill > .frame { --ratio: 0px !important; height: 100%; }
}

/* a phone: product tiles square, name and price only, so seven fit two screens without clipping */
@media (max-width: 639px) {
  :is(#range, #more) .tile { --tile-ratio: 1 / 1; }
  #range .tile__facts { display: none; }
}