/* Tanning Lotions page only (classes prefixed .lo-). Shared pieces (hero, bands, cards, buttons,
   kicker, icon rings, review strip, dialog shell) live in core.css.
   Layout follows the original page: hero, "Our Most Loved Lotions" (8 cards, 4 by 2), the four
   features in one hairline box, the review strip. View details opens a native dialog per lotion. */

/* ---------- 1. hero ---------- */
/* "Premium Lotions." is part of the h1 (for search and screen readers) but keeps the kicker look */
.lo-hero h1 .lo-hero__kicker { display: flex; width: fit-content; margin: 0 0 var(--s-2); }

/* ---------- 2. our most loved lotions ---------- */
.lo-loved { padding-bottom: clamp(56px, 2.5rem + 3vw, 96px); }

.lo-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 40px;
  margin-bottom: clamp(32px, 1.5rem + 2vw, 56px);
}
.lo-head h2 { margin: 0; }
.lo-head__note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding-bottom: 6px;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--fg-2);
}

.lo-grid { list-style: none; margin: 0; padding: 0; }
.lo-grid > li { display: flex; min-width: 0; }

/* the card: a light product panel on top, centred copy, the View details button at the bottom */
.lo-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: 10px;
  text-align: center;
}
.lo-card:has(.lo-card__btn:focus-visible) { border-color: var(--line-strong); }

/* product panel, shared with the dialog: soft ivory to lilac, a faint floor shadow under the bottle */
.lo-panel {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(172deg, #fcf6f9 0%, #f5e9f4 58%, #ebe5f7 100%);
}
.lo-panel::after {
  content: "";
  position: absolute;
  left: 26%;
  right: 26%;
  bottom: calc(9% - 7px);
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(18, 10, 46, 0.26), rgba(18, 10, 46, 0));
}
.lo-panel img {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 9%;
  width: auto;
  height: 80%;
  max-width: 84%;
  object-fit: contain;
  object-position: 50% 100%;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  filter: drop-shadow(0 6px 8px rgba(18, 10, 46, 0.16));
  transition: transform 0.6s var(--ease);
}
.lo-panel--wide img { height: 64%; }
.lo-panel--wide::after { left: 18%; right: 18%; }
.lo-panel--slim::after { left: 34%; right: 34%; }

.lo-card__media { aspect-ratio: 1 / 1; }
@media (prefers-reduced-motion: no-preference) {
  .lo-card:hover .lo-panel img { transform: translateX(-50%) scale(1.03); }
}

.lo-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding: 24px 14px 10px;
}
.lo-card__brand {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.lo-card__name {
  margin: 0;
  font-size: clamp(1.3125rem, 1.15rem + 0.4vw, 1.5rem);
  line-height: 1.15;
  font-variation-settings: "opsz" 24;
}
.lo-card__text {
  margin: 12px 0 24px;
  max-width: 32ch;
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-2);
  text-wrap: balance;
}
.lo-card__name + .lo-card__text { margin-top: 12px; } /* beats the core heading + p gap */
@media (min-width: 1280px) { .lo-card__text { font-size: 17px; } }

/* View details: the button's ::after covers the whole card, so a tap anywhere opens the details,
   while the button stays the single focusable control */
.lo-card__btn { position: static; width: 100%; margin-top: auto; }
.lo-card__btn::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--radius); }
.lo-card__btn:hover { transform: none; }
.lo-card:hover .lo-card__btn { border-color: var(--accent); background: rgba(255, 81, 214, 0.08); }
/* without JavaScript the dialogs cannot open, so the button is not offered (the copy is all on the card) */
html:not(.js) .lo-card__btn { display: none; }

/* tablets: two roomy columns, a slightly wider panel */
@media (min-width: 560px) and (max-width: 1023.98px) {
  .lo-card__media { aspect-ratio: 5 / 4; }
  .lo-card { padding: 12px; }
  .lo-card__body { padding: 28px 20px 12px; }
}
/* phones: two columns, tighter padding so the copy keeps a comfortable measure */
@media (max-width: 559.98px) {
  .lo-head { margin-bottom: 28px; }
  .lo-card { padding: 7px; }
  .lo-card__body { padding: 18px 6px 5px; }
  .lo-card__brand { letter-spacing: 0.06em; text-transform: none; font-size: 13px; margin-bottom: 4px; }
  .lo-card__name { font-size: 1.1875rem; line-height: 1.2; }
  .lo-card__text { margin-bottom: 18px; font-size: 15px; line-height: 1.5; text-wrap: pretty; }
  .lo-card__name + .lo-card__text { margin-top: 8px; }
  .lo-card__btn { padding: 0 8px; letter-spacing: 0.1em; }
}

/* ---------- detail dialog ---------- */
dialog.lo-modal { width: min(860px, calc(100vw - 32px)); }
.lo-modal .modal__close { z-index: 3; background: var(--navy-2); border-color: var(--line); }
.lo-modal .modal__close:hover { border-color: var(--accent); }
.lo-modal__in { display: grid; grid-template-columns: minmax(0, 1fr); }
.lo-modal__media { height: clamp(220px, 34vh, 300px); border-radius: 0; }
.lo-modal__body { padding: 28px clamp(20px, 1rem + 2vw, 32px) clamp(24px, 1rem + 2vw, 32px); }
.lo-modal__body .kicker { margin-bottom: 10px; }
.lo-modal__title {
  margin: 0;
  font-size: clamp(1.875rem, 1.5rem + 1.2vw, 2.625rem);
  line-height: 1.08;
  font-variation-settings: "opsz" 30;
}
.lo-modal__text { margin: 16px 0 0; font-size: var(--fs-lede); line-height: 1.55; color: var(--fg-2); text-wrap: pretty; }
.lo-modal__stock {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 24px 0 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.45;
  color: var(--fg);
  text-wrap: balance;
}
@media (min-width: 680px) {
  .lo-modal__in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .lo-modal__media { height: auto; min-height: 440px; }
  .lo-modal__media img { height: 72%; bottom: 11%; }
  .lo-modal__media.lo-panel--wide img { height: 56%; }
  .lo-modal__media::after { bottom: calc(11% - 7px); }
  .lo-modal__body { align-self: center; padding: 56px 48px 48px 44px; }
  .lo-modal__stock { margin-top: 28px; }
}

/* ---------- 3. features and the review strip ---------- */
.lo-why { padding-top: 0; }
.lo-features {
  list-style: none;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 8px 20px;
  border-radius: var(--radius-lg);
}
.lo-feature {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: 18px;
  padding: 22px 0;
}
.lo-feature + .lo-feature { border-top: 1px solid var(--line-soft); }
.lo-feature .icon-ring { margin: 0; width: 48px; height: 48px; }
.lo-feature__title {
  margin: 2px 0 0;
  font-size: 1.3125rem;
  line-height: 1.2;
  font-variation-settings: "opsz" 22;
}
.lo-feature__title + .lo-feature__text { margin-top: 6px; }
.lo-feature__text { margin: 0; font-size: 16px; line-height: 1.55; color: var(--fg-2); text-wrap: pretty; }

@media (min-width: 560px) {
  .lo-features { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; padding: 40px 0; }
  .lo-feature { display: block; padding: 0 clamp(20px, 3vw, 32px); text-align: center; }
  .lo-feature + .lo-feature { border-top: 0; }
  .lo-feature:nth-child(2n) { border-left: 1px solid var(--line-soft); }
  .lo-feature .icon-ring { width: 52px; height: 52px; margin: 0 auto 20px; }
  .lo-feature__title { margin: 0; }
  .lo-feature__title + .lo-feature__text { margin-top: 10px; }
  .lo-feature__text { max-width: 28ch; margin-inline: auto; text-wrap: balance; }
}
@media (min-width: 1024px) {
  .lo-features { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 48px 0 52px; }
  .lo-feature:nth-child(n) { border-left: 0; padding: 0 28px; }
  .lo-feature + .lo-feature { border-left: 1px solid var(--line-soft); }
}

.lo-why .review-cta-box { margin-top: clamp(16px, 0.75rem + 0.6vw, 24px); }