/* lux.css: round two's quieter layer over the Taste kit, loaded last. Square corners, no box or
   border round the earrings, smaller and lighter type, one-colour square buttons, more air. */

:root { --ly-scale: .8; }
html[data-radius] { --r-sm: 0px; --r-md: 0px; --r-lg: 0px; --r-btn: 0px; }   /* square everywhere: beats the kit's sharp scale (4 to 8px) */
@media (min-width: 1024px) { :root { --t-h2: clamp(30px, 1.2vw + 20px, 38px); --t-lead: 18px; } }

h1, h2, h3 { font-weight: 400; }
h1, h2 { letter-spacing: -0.022em; }
.hero--lux h1 { max-width: 13ch; line-height: 1.06; }
.hero--lux .hero__lead { font-size: 17px; max-width: 38ch; }
.hero--lux .hero__text > .btn-row { gap: var(--s-6); }
.section-head > p, .hero--pdp .hero__lead { color: var(--muted); }

/* the nav: no rule under it, the name spaced */
.nav { border-bottom: 0; }
.nav__logo { font: 500 18px/1 var(--font-text); letter-spacing: .2em; text-transform: uppercase; }
.nav--split .nav__logo { font-size: 20px; }
.btn--sm { height: 38px; padding-inline: var(--s-4); }

/* pictures of the earrings: on a quiet surface, no border, no corner */
.frame { border: 0; }
.frame--cut, .tile__media--cut, .hero__media--cut, .close__media--cut, .menu-card .panel { background: var(--surface); }
.ground-inverse .frame--cut { background: color-mix(in oklab, var(--bg) 92%, #fff); }

/* product tiles: the name and the price, small, on one line */
.tile { gap: var(--s-3); }
.tile__head h3 { letter-spacing: 0; }
.tile__price { font-size: 15px; color: var(--muted); }
a.tile:hover .tile__media > img { transform: none; }
/* the second picture: one earring alone, shown while the pointer is on the tile */
.tile__media--cut > img { transition: opacity .45s var(--ease); }
.tile__media--cut > .tile__alt { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; padding: 18%; }
a.tile:is(:hover, :focus-visible) .tile__media--cut:has(> .tile__alt) > .tile__main { opacity: 0; }
a.tile:is(:hover, :focus-visible) .tile__media--cut > .tile__alt { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tile__media--cut > img { transition: none; } }

/* compositions that fill what the screen leaves under the heading (desktop); a ratio below that */
@media (min-width: 1024px) {
  .grid.comp--trio.fill > .frame { --ratio: 0px !important; height: 100%; }
  .grid.comp--trio.fill, .grid.comp--pair.fill { align-items: stretch; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .grid.comp > .frame { --ratio: 75% !important; }
}

/* the order on a product page */
.hero--pdp .hero__media--cut > img { padding: 7%; }
.seg > span { min-width: 96px; justify-content: center; }
.order__price { font-family: var(--font-text); font-size: 22px; letter-spacing: 0; }
.order__add { width: 100%; height: 52px; }

/* FAQ and specs a step smaller */
.faq :is(.faq__item > h3) { font-size: 17px; }
.footer__lede { display: none; }

/* the centred hero (r5): the words centred at the top, the pair under them */
.hero--centre .hero__text { margin-inline: auto; text-align: center; }
.hero--centre h1, .hero--centre .hero__lead { margin-inline: auto; }
.hero--centre .hero__text > .btn-row { justify-content: center; }
@media (min-width: 1024px) { .hero--centre .hero-text { padding-top: var(--s-8, 64px); } }

/* the studs a little taller, so each row of the range fills its screen */
@media (min-width: 640px) { #range .grid--studs .tile { --tile-ratio: 3 / 4; } }

/* the split close-ups: the second picture the width of its column */
@media (min-width: 640px) { .tall-small .split-col__end .frame.small { width: 100%; margin-left: 0; } }

/* a phone: every tile's name over its price, the same in each row */
@media (max-width: 639px) { .tile__head { flex-direction: column; align-items: flex-start; gap: 2px; } }

/* a phone: the close with the name grows to hold it, the name across the column */
@media (max-width: 639px) {
  footer.closing:has(.close--word) { height: auto; min-height: 0; }
  footer.closing:has(.close--word) > .wrap { grid-template-rows: auto auto; }
  .close--word > .close__word { margin-top: var(--s-4); }
}

/* a phone: the split close-ups put their heading first */
@media (max-width: 639px) { .tall-small > .split-col { order: -1; } }

/* a phone: the odd last drop stays half width, the same size as the others */
@media (max-width: 639px) { #drops .grid > .tile:is(.span-3, .span-4):nth-child(odd of .tile):nth-last-child(1 of .tile) { grid-column: auto / span 6; } }

/* a phone: air between the studs and the drops */
@media (max-width: 639px) { #range #drops { margin-top: var(--s-7); } }

/* the product name a step smaller, so a long name still sets in three lines beside the order */
@media (min-width: 1024px) { .hero--pdp h1 { font-size: clamp(36px, 1.6vw + 24px, 48px); } }

/* the type the client chose (f4): Italiana for headings, Tenor Sans for the rest. Both come in one
   weight, so the browser never fakes a bold, and every heading keeps the face's own spacing */
html { font-synthesis-weight: none; }
h1, h2, h3:not(.tile__name > h3) { font-weight: 400; letter-spacing: 0; }
.nav__logo { font-family: var(--font-text); font-weight: 400; letter-spacing: .32em; }
.order__price { font-weight: 400; }