/* ============================================================
   Dynova Beauty — landing page, photo upload and skin appearance report.

   Scoped under .beauty-site so nothing here can leak into the Health or
   Nutrition surfaces. Follows the same recipe as css/nutrition.css: the
   dark Dynova ground and the house violet carry the brand, and Beauty's
   own signature is the magenta the gateway already gives this panel —
   used for eyebrows, badges and highlights, never as the base.
   ============================================================ */

.beauty-site {
  --by-ink: #f7f8ff;
  --by-ink-soft: rgba(247, 248, 255, 0.88);
  --by-body: rgba(231, 235, 255, 0.62);
  --by-muted: rgba(231, 235, 255, 0.42);

  --by-page: #02071d;
  --by-band: #050b24;
  --by-surface: rgba(255, 255, 255, 0.04);
  --by-surface-alt: rgba(255, 255, 255, 0.07);
  --by-line: rgba(158, 143, 255, 0.16);
  --by-line-strong: rgba(158, 143, 255, 0.32);

  --by-violet: #826dff;
  --by-violet-deep: #5a47e6;
  --by-violet-light: #b3a6ff;
  --by-violet-soft: rgba(130, 109, 255, 0.16);
  --by-violet-line: rgba(130, 109, 255, 0.5);
  --by-violet-glow: rgba(130, 109, 255, 0.55);

  --by-rose: #c94fe0;
  --by-rose-light: #e79bf0;
  --by-rose-soft: rgba(201, 79, 224, 0.14);

  --by-ok: #4ade80;
  --by-danger: #fca5a5;

  --by-radius: 20px;
  --by-radius-sm: 12px;
  --by-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.8);
  --by-shadow-lg: 0 34px 66px -30px rgba(0, 0, 0, 0.85);

  background: var(--by-page);
  color: var(--by-body);
  font-family: Inter, system-ui, sans-serif;
}

.beauty-site *,
.beauty-site *::before,
.beauty-site *::after { box-sizing: border-box; }

/* main.css paints html/body white and restyles every heading with
   `!important` for the Health surface. Beauty is a dark surface, so it has
   to win those declarations back — the only !important rules here. */
html:has(body.beauty-site) { background-color: var(--by-page) !important; }
body.beauty-site {
  background-color: var(--by-page) !important;
  color: var(--by-body) !important;
  letter-spacing: normal !important;
}
.beauty-site :where(h1, h2, h3, h4) {
  color: var(--by-ink);
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
}

.by-shell {
  width: 100%;
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}
@media (min-width: 640px) {
  .by-shell { padding: 0 2rem; }
}

/* ---------- Navigation ---------- */
.by-nav {
  background: rgba(2, 7, 29, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--by-line);
}
.by-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 4.5rem;
}
.by-brand { display: inline-flex; align-items: center; text-decoration: none; }
/* .dn-brand__navbar-logo is sized globally in health-theme.css, which
   base.html loads on every surface. The logo already carries its own
   transparency, so drop the Health navbar's violet glow. */
.by-brand .dn-brand__navbar-logo { filter: none; }
.by-footer__brand .dn-brand__navbar-logo { height: 2.4rem; max-width: 8rem; }

.by-nav__links { display: none; align-items: center; gap: 1.9rem; }
.by-nav__link {
  color: rgba(255, 255, 255, 0.74);
  font-weight: 500;
  font-size: 0.92rem;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s ease;
}
.by-nav__link:hover { color: #fff; }

.by-nav__actions { display: flex; align-items: center; gap: 0.9rem; }
/* Scoped to beat .by-btn's own `display`, which is declared further down. */
.by-nav__actions .by-nav__cta { display: none; padding: 0.55rem 1.15rem; font-size: 0.85rem; }
.by-nav__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.74);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.18s ease;
}
.by-nav__icon:hover { color: #fff; }

@media (min-width: 900px) {
  .by-nav__links { display: flex; }
  .by-nav__actions .by-nav__cta { display: inline-flex; }
  .by-nav__icon--menu { display: none; }
  .beauty-site .by-mobile-nav { display: none !important; }
}

/* ---------- Buttons ---------- */
.by-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 650;
  font-size: 0.92rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.by-btn--lg { padding: 0.95rem 1.9rem; font-size: 1rem; }
.by-btn--block { width: 100%; }
.by-btn--primary { background: var(--by-violet); color: #fff; }
.by-btn--primary:hover { background: var(--by-violet-deep); transform: translateY(-1px); }
.by-btn--outline { border-color: rgba(255, 255, 255, 0.35); color: #fff; background: transparent; }
.by-btn--outline:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }
.by-btn--ghost { background: var(--by-surface); color: var(--by-ink-soft); border-color: var(--by-line); }
.by-btn--ghost:hover { border-color: var(--by-line-strong); color: var(--by-ink); background: var(--by-surface-alt); }
.by-btn:disabled { opacity: 0.5; cursor: wait; }
.by-btn--disabled { background: var(--by-surface-alt); color: var(--by-muted); border-color: var(--by-line); cursor: not-allowed; }
.by-btn:focus-visible,
.by-nav a:focus-visible,
.by-footer a:focus-visible {
  outline: 3px solid var(--by-rose);
  outline-offset: 3px;
}

/* ---------- Section furniture ---------- */
.by-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--by-rose-light);
}
.by-page { padding: 4.5rem 0; }
.by-section { margin-bottom: 4.5rem; scroll-margin-top: 6rem; }
.by-section:last-of-type { margin-bottom: 0; }
.by-section__head { margin-bottom: 2rem; max-width: 44rem; }
.by-section__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.by-section__title { font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 750; margin-top: 0.6rem; }
.by-section__lead { margin-top: 0.7rem; font-size: 1rem; line-height: 1.65; color: var(--by-body); }
.by-section__foot { margin-top: 2.25rem; text-align: center; }

.by-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 700px) {
  .by-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .by-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .by-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .by-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .by-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Hero ---------- */
.by-hero {
  position: relative;
  overflow: hidden;
  padding: 4.5rem 0 5rem;
  background: var(--by-page);
  scroll-margin-top: 6rem;
}
.by-hero__glow {
  position: absolute;
  inset: -30% -20% auto -20%;
  height: 42rem;
  background:
    radial-gradient(42% 55% at 22% 32%, var(--by-violet-soft), transparent 70%),
    radial-gradient(38% 50% at 74% 22%, var(--by-rose-soft), transparent 72%);
  pointer-events: none;
}
.by-hero__inner { position: relative; display: grid; gap: 3rem; align-items: center; }
.by-hero__title {
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.04em;
  margin: 0.9rem 0 0;
  color: var(--by-ink);
}
.by-hero__accent {
  background: linear-gradient(100deg, var(--by-rose-light), var(--by-violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.by-hero__lead {
  margin-top: 1.15rem;
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--by-body);
  max-width: 38rem;
}
.by-hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }
.by-hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1.25rem;
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--by-line);
  list-style: none;
}
.by-hero__stats b { display: block; color: #fff; font-size: 0.98rem; font-weight: 700; }
.by-hero__stats span { display: block; margin-top: 0.2rem; font-size: 0.82rem; color: var(--by-muted); }
.by-hero__visual { display: none; }

/* Sample-report card in the hero. Decorative — aria-hidden in the markup. */
.by-sample {
  background: linear-gradient(165deg, rgba(201, 79, 224, 0.10), transparent 55%), var(--by-surface-alt);
  border: 1px solid var(--by-line-strong);
  border-radius: var(--by-radius);
  padding: 1.5rem;
  box-shadow: var(--by-shadow);
}
.by-sample__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.by-sample__eyebrow {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--by-muted);
}
.by-sample__name { display: block; margin-top: 0.4rem; color: var(--by-ink); font-size: 1.02rem; font-weight: 700; }
.by-sample__tag {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--by-rose-light);
  background: var(--by-rose-soft);
  border: 1px solid rgba(201, 79, 224, 0.28);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
}
.by-sample__list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.85rem; }
.by-sample__list li { display: flex; align-items: center; gap: 0.7rem; font-size: 0.88rem; }
.by-sample__list b { color: var(--by-ink-soft); font-weight: 600; }
.by-sample__list i { margin-left: auto; font-style: normal; color: var(--by-muted); font-size: 0.82rem; }
.by-sample__list .is-muted b { color: var(--by-muted); }
.by-sample__dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--by-line-strong);
  flex-shrink: 0;
}
.by-sample__dot--a { background: var(--by-violet); }
.by-sample__dot--b { background: var(--by-rose); }
.by-sample__dot--c { background: var(--by-rose-light); }
.by-sample__foot {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--by-line);
  font-size: 0.78rem;
  color: var(--by-muted);
}
.by-sample__pulse {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--by-rose);
  box-shadow: 0 0 0 4px var(--by-rose-soft);
}

@media (min-width: 1000px) {
  .by-hero__inner { grid-template-columns: 1.15fr 0.85fr; }
  .by-hero__visual { display: block; }
}

/* ---------- How it works ---------- */
.by-band {
  background: var(--by-band);
  padding: 4rem 0;
  border-block: 1px solid var(--by-line);
  scroll-margin-top: 4.5rem;
}
.by-steps {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}
@media (min-width: 800px) {
  .by-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.by-step {
  background: var(--by-surface);
  border: 1px solid var(--by-line);
  border-radius: var(--by-radius);
  padding: 1.6rem;
}
.by-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  margin-bottom: 1rem;
  background: var(--by-violet-soft);
  border: 1px solid var(--by-line-strong);
  color: var(--by-rose-light);
  font-weight: 800;
  font-size: 0.9rem;
}
.by-step h3 { font-size: 1.08rem; font-weight: 700; margin-bottom: 0.5rem; }
.by-step p { font-size: 0.93rem; line-height: 1.65; color: var(--by-body); }

/* ---------- Panels ---------- */
.by-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (min-width: 900px) {
  .by-layout { grid-template-columns: 1.15fr 1fr; }
}
.by-panel {
  background: var(--by-surface);
  border: 1px solid var(--by-line);
  border-radius: var(--by-radius);
  padding: 1.7rem;
  box-shadow: var(--by-shadow);
}
.by-panel--soft {
  background:
    linear-gradient(160deg, var(--by-rose-soft), transparent 60%),
    var(--by-surface-alt);
  border-color: var(--by-line-strong);
}
.by-panel--error {
  border-color: rgba(252, 165, 165, 0.35);
  background: linear-gradient(160deg, rgba(252, 165, 165, 0.07), transparent 60%), var(--by-surface);
}
.by-panel--error h2 { color: var(--by-danger); }
.by-panel--error p:first-of-type { color: var(--by-ink-soft); line-height: 1.65; }
.by-panel h2 {
  font-size: 1.35rem;
  font-weight: 650;
  margin: 0.6rem 0 1rem;
}
.by-panel h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.6rem; }
.by-panel p { line-height: 1.65; margin: 1rem 0; color: var(--by-body); }
.by-panel p:last-child { margin-bottom: 0; }
.by-muted {
  font-size: 0.85rem !important;
  color: var(--by-muted);
  line-height: 1.65;
}

/* ---------- What this is / isn't ---------- */
.by-check-list { list-style: none; margin: 1.2rem 0; padding: 0; display: grid; gap: 0.8rem; }
.by-check-list li {
  position: relative;
  padding-left: 1.85rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--by-ink-soft);
}
.by-check-list li::before {
  position: absolute;
  left: 0;
  top: -0.05rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
}
.by-check-list .is-yes::before {
  content: "✓";
  background: rgba(74, 222, 128, 0.14);
  color: var(--by-ok);
}
.by-check-list .is-no::before {
  content: "×";
  background: rgba(255, 255, 255, 0.06);
  color: var(--by-muted);
}
.by-check-list .is-no { color: var(--by-body); }

.by-tip-head { display: flex; align-items: center; gap: 0.55rem; }
.by-tip-head::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.by-tip-head.is-yes::before { background: var(--by-ok); }
.by-tip-head.is-no::before { background: var(--by-danger); }

/* ---------- The 11 categories ---------- */
.by-topics { list-style: none; margin: 0; padding: 0; }
.by-topic { position: relative; padding-top: 1.5rem; }
.by-topic__num {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--by-rose-light);
  margin-bottom: 0.55rem;
}
.by-topic h3 { font-size: 1.02rem; margin-bottom: 0.5rem; }
.by-topic p { margin: 0; font-size: 0.9rem; line-height: 1.65; }

/* ---------- Skin profile cross-promo ---------- */
.by-promo {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: var(--by-radius);
  border: 1px solid var(--by-line-strong);
  background:
    radial-gradient(60% 90% at 8% 12%, var(--by-violet-soft), transparent 60%),
    radial-gradient(50% 80% at 96% 100%, var(--by-rose-soft), transparent 65%),
    var(--by-surface-alt);
}
.by-promo__copy h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); margin: 0.5rem 0 0.75rem; }
.by-promo__copy p { margin: 0; font-size: 0.95rem; line-height: 1.65; color: var(--by-body); max-width: 34rem; }
@media (min-width: 800px) {
  .by-promo { flex-direction: row; align-items: center; justify-content: space-between; gap: 2rem; }
  .by-promo .by-btn { flex-shrink: 0; }
}

/* ---------- Limits note ---------- */
.by-note {
  margin-top: 1.5rem;
  padding: 1.7rem;
  border: 1px dashed var(--by-line-strong);
  border-radius: var(--by-radius);
  background: rgba(255, 255, 255, 0.02);
}
.by-note h3 { font-size: 1.02rem; margin-bottom: 0.75rem; }
.by-note p { font-size: 0.92rem; line-height: 1.7; color: var(--by-body); margin: 0 0 0.9rem; }
.by-note p:last-child { margin-bottom: 0; }

/* ---------- Upload + form ---------- */
.by-upload {
  display: block;
  padding: 1.5rem;
  border: 1px dashed var(--by-line-strong);
  border-radius: var(--by-radius-sm);
  font-weight: 600;
  color: var(--by-ink-soft);
  background: rgba(130, 109, 255, 0.05);
  transition: border-color 0.18s ease, background 0.18s ease;
}
.by-upload:hover {
  border-color: var(--by-violet);
  background: var(--by-violet-soft);
}
.by-upload input {
  display: block;
  max-width: 100%;
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--by-body);
}
.by-upload input::file-selector-button {
  background: var(--by-violet-soft);
  color: var(--by-ink);
  border: 1px solid var(--by-line-strong);
  border-radius: 8px;
  padding: 0.45rem 0.8rem;
  margin-right: 0.7rem;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}
#by-camera { margin-top: 1.1rem; }

.by-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.8rem;
  line-height: 1.6;
  margin: 1.5rem 0;
  color: var(--by-body);
}
.by-consent input {
  margin-top: 0.2rem;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--by-violet);
  /* A default checkbox renders as a bright white block on this ground, so
     the unchecked state is drawn to match the panels around it. */
  appearance: none;
  border: 1px solid var(--by-line-strong);
  border-radius: 5px;
  background: var(--by-surface-alt);
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.by-consent input:hover { border-color: var(--by-violet); }
.by-consent input:checked {
  background: var(--by-violet) center / 0.7rem no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 4.5'/%3E%3C/svg%3E");
  border-color: var(--by-violet);
}
.by-consent input:focus-visible {
  outline: 3px solid var(--by-rose);
  outline-offset: 2px;
}
.by-error { color: var(--by-danger); font-size: 0.85rem; }

.by-preview {
  max-width: 100%;
  max-height: 460px;
  border-radius: var(--by-radius-sm);
  border: 1px solid var(--by-line);
  margin-top: 1rem;
  object-fit: contain;
  background: var(--by-band);
}

/* Camera capture frame: a fixed portrait window so the alignment guide
   drawn over it always lines up, whatever aspect ratio the device camera
   actually streams at. The video crops to fill it (object-fit: cover);
   the guide is purely visual and plays no part in the analysis itself. */
.by-camera-frame {
  position: relative;
  margin-top: 1rem;
  width: 100%;
  max-width: 22rem;
  aspect-ratio: 3 / 4;
  border-radius: var(--by-radius-sm);
  overflow: hidden;
  border: 1px solid var(--by-line);
  background: var(--by-band);
}
.by-camera-frame #by-video,
.by-camera-frame #by-camera-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* A front camera reads mirrored to how it feels to look in a mirror;
     flipping the preview only, not the file capture-canvas.js draws from,
     keeps the capture faithful while the framing feels natural to align to. */
  transform: scaleX(-1);
}
/* Sits directly over #by-video: when JS can drive it (canvas + rAF
   available), it paints a live blurred-background / sharp-face preview and
   visually covers the plain video underneath. If anything about that setup
   fails, the canvas is simply never unhidden and the plain mirrored video
   shows through exactly as before — the blur is pure enhancement, nothing
   about the capture path depends on it. */
.by-camera-frame #by-camera-canvas { background: transparent; }
.by-camera-guide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.by-camera-guide__oval {
  fill: none;
  stroke: var(--by-rose-light);
  stroke-width: 2;
  stroke-dasharray: 6 7;
  opacity: 0.9;
}
.by-camera-guide__line {
  stroke: var(--by-rose-light);
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
  opacity: 0.7;
}
.by-camera-guide__bracket {
  fill: none;
  stroke: #fff;
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0.85;
}
.by-camera-hint {
  margin-top: 0.75rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--by-muted);
  max-width: 22rem;
}

.by-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.3rem; }

/* ---------- Result ---------- */
.by-result-top {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  max-width: 750px;
}
.by-result-photo {
  width: 150px;
  height: 180px;
  object-fit: contain;
  background: var(--by-band);
  border: 1px solid var(--by-line);
  border-radius: var(--by-radius-sm);
}
.by-results-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.3rem;
}
.by-recs { margin-top: 1.3rem; }
.by-recs h2 { margin-bottom: 0.4rem; }
.by-recs__grid { margin-top: 1.4rem; }
.by-recs__item { display: flex; flex-direction: column; gap: 0.6rem; }
.by-recs__reason {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--by-muted);
  padding: 0 0.2rem;
}
.by-metric h3 { font-size: 1rem; font-weight: 650; margin-bottom: 0.9rem; }
.by-badge {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--by-rose-light);
  background: var(--by-rose-soft);
  border: 1px solid rgba(201, 79, 224, 0.28);
  border-radius: 7px;
  padding: 0.35rem 0.6rem;
}
.by-metric__score {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.85rem 0 1rem;
}
.by-metric__score-bar {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--by-line);
  overflow: hidden;
}
.by-metric__score-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--by-violet), var(--by-rose));
}
.by-metric__score-num {
  flex-shrink: 0;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--by-ink-soft);
  min-width: 3rem;
  text-align: right;
}
.by-metric p { font-size: 0.9rem; color: var(--by-body); }
.by-metric small { color: var(--by-muted); font-size: 0.7rem; }
/* "Not assessable" is the absence of a reading, so the card steps back
   instead of carrying the magenta a real observation gets. */
.by-metric--unknown {
  background: rgba(255, 255, 255, 0.015);
  border-style: dashed;
}
.by-metric--unknown h3 { color: var(--by-ink-soft); }
.by-metric--unknown .by-badge {
  color: var(--by-muted);
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--by-line);
}
.by-metric--unknown p { color: var(--by-muted); }
.by-tips {
  list-style: disc;
  padding-left: 1.2rem;
  color: var(--by-body);
  line-height: 1.7;
  display: grid;
  gap: 0.6rem;
  font-size: 0.92rem;
}

/* ---------- Footer ---------- */
.by-footer {
  background: var(--by-band);
  border-top: 1px solid var(--by-line);
  padding: 3.5rem 0 2rem;
  font-size: 0.9rem;
}
.by-footer__grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .by-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .by-footer__grid { grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); }
}
.by-footer__about {
  margin-top: 1rem;
  max-width: 24rem;
  line-height: 1.7;
  color: var(--by-body);
  font-size: 0.88rem;
}
.by-footer__title {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--by-muted);
  margin-bottom: 1rem;
}
.by-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.by-footer__links a {
  color: var(--by-body);
  text-decoration: none;
  font-size: 0.88rem;
  transition: color 0.18s ease;
}
.by-footer__links a:hover { color: var(--by-rose-light); }
.by-footer__links--plain li { color: var(--by-body); font-size: 0.88rem; }
.by-footer__bottom {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--by-line);
  color: var(--by-muted);
  font-size: 0.78rem;
  line-height: 1.7;
}
.by-footer__disclaimer { margin-top: 0.75rem; max-width: 60rem; }

/* ---------- Mobile menu ---------- */
/* base.html styles .mobile-nav for the light Health surface; repaint it. */
.beauty-site .by-mobile-nav { background: var(--by-page); }
.beauty-site .by-mobile-nav .mobile-nav__top { border-bottom-color: var(--by-line); }
.beauty-site .by-mobile-nav .mobile-nav__close { background: var(--by-surface); color: var(--by-ink-soft); }
.beauty-site .by-mobile-nav .mobile-nav__close:hover { background: var(--by-surface-alt); color: #fff; }
.beauty-site .by-mobile-nav .mobile-nav__link { color: var(--by-ink); border-bottom-color: var(--by-line); }
.beauty-site .by-mobile-nav .mobile-nav__link:hover,
.beauty-site .by-mobile-nav .mobile-nav__link:focus { color: var(--by-rose-light); }
.beauty-site .by-mobile-nav .mobile-nav__link svg { color: var(--by-muted); }
.beauty-site .by-mobile-nav .mobile-nav__link:hover svg { color: var(--by-rose-light); }
.beauty-site .by-mobile-nav .mobile-nav__user { border-top-color: var(--by-line); }
.beauty-site .by-mobile-nav .mobile-nav__signin { border-color: var(--by-line-strong); color: var(--by-ink); }
.beauty-site .by-mobile-nav .mobile-nav__signin:hover { border-color: var(--by-rose); color: var(--by-rose-light); }
.beauty-site .by-mobile-nav .mobile-nav__footer { color: var(--by-muted); }
.beauty-site .by-mobile-nav .lang-switcher { background: var(--by-surface) !important; }
.beauty-site .by-mobile-nav .lang-switcher__btn { color: var(--by-body) !important; }
.beauty-site .by-mobile-nav .lang-switcher__btn.is-active { background: var(--by-violet) !important; color: #fff !important; }

[hidden] { display: none !important; }

@media (max-width: 800px) {
  .by-results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .by-page { padding: 3rem 0; }
  .by-hero { padding: 3rem 0 3.5rem; }
}

@media (max-width: 500px) {
  .by-results-grid { grid-template-columns: 1fr; }
  .by-panel { padding: 1.25rem; }
  .by-result-top { align-items: flex-start; flex-direction: column; }
  .by-result-photo { width: 120px; height: 150px; }
}


/* ============================================================
   Skin Profile questionnaire (/beauty/cilt-profili/) — admin-driven form
   rendered by templates/beauty/skin_questionnaire.html + _skin_question.html
   and templates/beauty/skin_questionnaire_done.html.

   Same structure and behaviour as Nutrition's assessment form (css/nutrition.css
   + js/nutrition-form.js): a sticky progress bar, per-section fieldsets,
   client-side conditional questions mirrored by server-side validation.
   Ported here with by-* naming so it paints in Beauty's own palette instead
   of importing nutrition.css.
   ============================================================ */

.by-shell--narrow { max-width: 52rem; }
.by-page--form { padding: 3rem 0 5rem; }

.by-form-head { text-align: center; margin-bottom: 1.5rem; }
.by-form-head__title { font-size: clamp(1.45rem, 3.6vw, 1.95rem); font-weight: 720; }
.by-form-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem 1.1rem;
  margin-top: 0.9rem;
}
.by-fact {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font-size: 0.8rem;
  color: var(--by-muted);
}
.by-fact b { color: var(--by-ink-soft); font-weight: 700; }
.by-fact svg { width: 0.85rem; height: 0.85rem; }
.by-fact--lock { color: var(--by-rose); }

.by-form-note-toggle { font-size: 0.8rem; }
.by-form-note-toggle summary {
  cursor: pointer;
  color: var(--by-violet-light);
  font-weight: 600;
  list-style: none;
}
.by-form-note-toggle summary::-webkit-details-marker { display: none; }
.by-form-note-toggle summary:hover { text-decoration: underline; }
.by-form-note-toggle > div {
  margin-top: 0.85rem;
  padding: 1rem 1.15rem;
  border-radius: var(--by-radius-sm);
  background: var(--by-violet-soft);
  text-align: left;
}
.by-form-note-toggle p { font-size: 0.86rem; line-height: 1.65; color: var(--by-ink-soft); margin-bottom: 0.6rem; }
.by-form-note-toggle p:last-child { margin-bottom: 0; }

.by-form {
  position: relative;
  background: var(--by-surface);
  border: 1px solid var(--by-line);
  border-radius: 24px;
  padding: 1.75rem 1.25rem;
  box-shadow: var(--by-shadow-lg);
}
@media (min-width: 720px) { .by-form { padding: 2.5rem 2.75rem; } }

/* Progress rides at the top of the card and sticks under the navbar so the
   visitor always knows where they are in a long form. */
.by-progress {
  position: sticky;
  top: 4.5rem;
  z-index: 5;
  margin: -1.75rem -1.25rem 2rem;
  padding: 1.15rem 1.25rem 0.9rem;
  background: rgba(13, 13, 36, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--by-line);
  border-radius: 24px 24px 0 0;
}
@media (min-width: 720px) { .by-progress { margin: -2.5rem -2.75rem 2.5rem; padding: 1.35rem 2.75rem 1.1rem; } }
.by-progress__bar { height: 5px; border-radius: 999px; background: var(--by-line); overflow: hidden; }
.by-progress__bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--by-violet), var(--by-rose));
  transition: width 0.28s ease;
}
.by-progress__steps { display: flex; gap: 0.4rem; margin-top: 0.9rem; overflow-x: auto; padding-bottom: 0.25rem; }
.by-progress__dot {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--by-line);
  background: var(--by-surface);
  color: var(--by-muted);
  font-size: 0.76rem;
  font-weight: 650;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.by-progress__dot-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem; height: 1.15rem;
  border-radius: 999px;
  background: var(--by-line);
  color: var(--by-ink-soft);
  font-size: 0.68rem;
}
.by-progress__dot.is-current { border-color: var(--by-violet-line); color: var(--by-violet-light); background: var(--by-violet-soft); }
.by-progress__dot.is-current .by-progress__dot-num { background: var(--by-violet); color: #fff; }
.by-progress__dot.is-done { color: var(--by-violet-light); }
.by-progress__dot.is-done .by-progress__dot-num { background: var(--by-violet); color: #fff; }

.by-step-panel { border: 0; padding: 0; margin: 0 0 2rem; min-width: 0; }
.by-step-panel__legend { display: flex; align-items: center; gap: 0.85rem; padding: 0; margin-bottom: 0.5rem; }
.by-step-panel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: var(--by-radius-sm);
  background: var(--by-violet-soft);
  font-size: 1.25rem;
}
.by-step-panel__count {
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--by-muted);
  margin-bottom: 0.2rem;
}
.by-step-panel__legend b { font-size: 1.2rem; font-weight: 740; color: var(--by-ink); }
.by-step-panel__desc { font-size: 0.92rem; line-height: 1.65; margin-bottom: 1.75rem; }

.by-questions { display: grid; gap: 2.1rem; }
.by-q { display: block; }
.by-q__label { display: block; margin-bottom: 0.75rem; }
.by-q__title { display: block; font-size: 1rem; font-weight: 680; color: var(--by-ink); line-height: 1.45; }
.by-q__req { color: var(--by-danger); font-style: normal; margin-left: 0.15rem; }
.by-q__help { display: block; margin-top: 0.3rem; font-size: 0.84rem; line-height: 1.5; color: var(--by-muted); }
.by-q__hint { margin-top: 0.55rem; font-size: 0.8rem; color: var(--by-muted); }
.by-q__error { margin-top: 0.55rem; font-size: 0.83rem; font-weight: 600; color: var(--by-danger); }
.by-q.has-error .by-input,
.by-q.has-error .by-option__box { border-color: var(--by-danger); }

.by-input {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--by-line);
  border-radius: var(--by-radius-sm);
  background: var(--by-surface);
  color: var(--by-ink);
  font-size: 0.98rem;
  font-family: inherit;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.by-input::placeholder { color: rgba(255, 255, 255, 0.32); }
.by-input:focus {
  outline: none;
  border-color: var(--by-violet);
  box-shadow: 0 0 0 3px rgba(130, 109, 255, 0.16);
}
.by-input--area { resize: vertical; min-height: 6rem; line-height: 1.6; }
.by-select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.5) 50%), linear-gradient(135deg, rgba(255,255,255,0.5) 50%, transparent 50%); background-position: calc(100% - 1.15rem) 1.25rem, calc(100% - 0.8rem) 1.25rem; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.5rem; }

.by-input-group { position: relative; display: flex; align-items: center; }
/* The unit sits inside the field, so it has to be bounded: an over-long
   value typed into the admin would otherwise collide with the placeholder. */
.by-input-group__unit {
  position: absolute;
  right: 1rem;
  max-width: 5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--by-muted);
  pointer-events: none;
}
.by-input-group .by-input { padding-right: 6.25rem; }

.by-options { display: grid; gap: 0.7rem; grid-template-columns: 1fr; }
@media (min-width: 560px) {
  .by-options--2 { grid-template-columns: repeat(2, 1fr); }
  .by-options--3 { grid-template-columns: repeat(3, 1fr); }
}
.by-option { display: block; cursor: pointer; }
.by-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.by-option__box {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 100%;
  padding: 0.95rem 1rem;
  border: 1.5px solid var(--by-line);
  border-radius: var(--by-radius-sm);
  background: var(--by-surface);
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
.by-option:hover .by-option__box { border-color: var(--by-line-strong); }
/* Bounded for the same reason: this slot is for one emoji, not a sentence. */
.by-option__icon {
  font-size: 1.3rem;
  line-height: 1.2;
  flex: 0 0 auto;
  max-width: 1.75rem;
  overflow: hidden;
  white-space: nowrap;
}
.by-option__text { flex: 1; min-width: 0; }
.by-option__text b { display: block; font-size: 0.94rem; font-weight: 650; color: var(--by-ink); line-height: 1.4; }
.by-option__text small { display: block; margin-top: 0.2rem; font-size: 0.8rem; line-height: 1.45; color: var(--by-muted); }
.by-option__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem; height: 1.35rem;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1.5px solid var(--by-line);
  color: transparent;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.by-option__tick svg { width: 0.75rem; height: 0.75rem; }
.by-option input:checked + .by-option__box {
  border-color: var(--by-violet);
  background: var(--by-violet-soft);
  box-shadow: 0 0 0 3px rgba(130, 109, 255, 0.13);
}
.by-option input:checked + .by-option__box .by-option__tick {
  background: var(--by-violet);
  border-color: var(--by-violet);
  color: #fff;
}
.by-option input:focus-visible + .by-option__box { outline: 2px solid var(--by-violet); outline-offset: 2px; }

.by-scale { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.by-scale__item { flex: 1 1 2.5rem; min-width: 2.5rem; cursor: pointer; }
.by-scale__item input { position: absolute; opacity: 0; width: 0; height: 0; }
.by-scale__item span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.9rem;
  border: 1.5px solid var(--by-line);
  border-radius: var(--by-radius-sm);
  background: var(--by-surface);
  font-weight: 700;
  color: var(--by-ink-soft);
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.by-scale__item:hover span { border-color: var(--by-line-strong); }
.by-scale__item input:checked + span { background: var(--by-violet); border-color: var(--by-violet); color: #fff; }
.by-scale__item input:focus-visible + span { outline: 2px solid var(--by-violet); outline-offset: 2px; }


.by-q--contact {
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--by-line);
}
.by-form-note {
  margin-top: 2rem;
  padding: 0.95rem 1.1rem;
  border-radius: var(--by-radius-sm);
  background: var(--by-violet-soft);
  color: var(--by-ink-soft);
  font-size: 0.88rem;
  line-height: 1.55;
}

.by-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: flex-end;
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--by-line);
}
.by-form-actions .by-btn { flex: 1 1 auto; }
@media (min-width: 560px) { .by-form-actions .by-btn { flex: 0 0 auto; } }
.by-form-actions #by-prev { margin-right: auto; }
.by-form-legal { margin-top: 1.25rem; font-size: 0.78rem; line-height: 1.55; color: var(--by-muted); text-align: center; }

.by-page--done { padding-top: 4rem; }
.by-done {
  background: var(--by-surface);
  border: 1px solid var(--by-line);
  border-radius: var(--by-radius);
  padding: 3rem 1.5rem;
  text-align: center;
  box-shadow: var(--by-shadow);
  margin-bottom: 4rem;
}
.by-done__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem; height: 4rem;
  border-radius: 999px;
  background: var(--by-rose-soft);
  color: var(--by-rose);
  margin-bottom: 1.5rem;
}
.by-done__mark svg { width: 1.9rem; height: 1.9rem; }
.by-done__title { font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 760; }
.by-done__body { margin-top: 1rem; max-width: 36rem; margin-left: auto; margin-right: auto; }
.by-done__body p { font-size: 0.98rem; line-height: 1.7; margin-bottom: 0.8rem; }
.by-done__facts {
  display: grid;
  gap: 1rem;
  margin: 2rem auto 0;
  padding: 1.35rem;
  max-width: 34rem;
  border-radius: var(--by-radius-sm);
  background: var(--by-surface-alt);
  text-align: left;
}
.by-done__facts dt { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--by-muted); }
.by-done__facts dd { margin: 0.25rem 0 0; font-size: 0.98rem; font-weight: 700; color: var(--by-ink); }
.by-done__hint { margin-top: 1.25rem; font-size: 0.85rem; line-height: 1.6; color: var(--by-muted); max-width: 34rem; margin-left: auto; margin-right: auto; }
.by-done__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 2rem; }
@media (min-width: 560px) { .by-done__facts { grid-template-columns: repeat(2, 1fr); } }


/* ============================================================
   Product cards (/beauty/urunler/, and the "recommended for you" strip on
   the result page) — same card shape as Nutrition's storefront
   (css/nutrition.css .nt-card*), ported with by-* naming and Beauty's own
   violet/rose palette instead of nutrition's violet/mint.
   ============================================================ */

.by-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--by-surface);
  border: 1px solid var(--by-line);
  border-radius: var(--by-radius);
  overflow: hidden;
  box-shadow: var(--by-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.by-card:hover { transform: translateY(-3px); box-shadow: var(--by-shadow-lg); border-color: var(--by-violet-line); background: var(--by-surface-alt); }
.by-card--featured { border-color: var(--by-violet); box-shadow: 0 24px 50px -30px var(--by-violet-glow); }
.by-card__badge {
  position: absolute;
  top: 0.9rem; left: 0.9rem;
  z-index: 2;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--by-violet);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.by-card--featured .by-card__badge { background: var(--by-rose); color: var(--by-page); }
.by-card__badge--static { position: static; display: inline-block; margin-bottom: 0.85rem; }

.by-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: linear-gradient(160deg, rgba(130, 109, 255, 0.16), rgba(201, 79, 224, 0.08));
  overflow: hidden;
}
.by-card__media img { width: 100%; height: 100%; object-fit: cover; }
.by-card__placeholder { width: 33%; max-width: 5.5rem; color: rgba(255, 255, 255, 0.2); }

.by-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.35rem 1.35rem 1.5rem; }
.by-card__title { font-size: 1.12rem; font-weight: 730; line-height: 1.3; }
.by-card__title a { color: inherit; text-decoration: none; }
.by-card__title a:hover { color: var(--by-violet-light); }
.by-card__tagline { margin-top: 0.45rem; font-size: 0.9rem; line-height: 1.55; color: var(--by-body); }

.by-card__list { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; gap: 0.55rem; }
.by-card__list li { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.86rem; line-height: 1.5; }
.by-card__list svg { width: 1rem; height: 1rem; flex: 0 0 auto; margin-top: 0.2rem; color: var(--by-rose); }

.by-card__foot { margin-top: auto; padding-top: 1.4rem; }
.by-card__price { display: flex; align-items: baseline; gap: 0.55rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.by-card__price-old { color: var(--by-muted); text-decoration: line-through; font-size: 0.92rem; }
.by-card__price-now { color: var(--by-ink); font-size: 1.55rem; font-weight: 780; }
.by-card__price-soon { color: var(--by-muted); font-weight: 650; }
.by-card__form { margin: 0; }
.by-card__more {
  display: block;
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--by-muted);
  text-decoration: none;
}
.by-card__more:hover { color: var(--by-violet-light); }


/* ============================================================
   Product detail page (/beauty/urunler/<slug>/) — ported from Nutrition's
   .nt-detail* (css/nutrition.css) with by-* naming. No gallery/spec-table/
   FAQ machinery: Beauty's catalogue is intentionally flatter than
   Nutrition's.
   ============================================================ */

/* ---------- Breadcrumb ---------- */
.by-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.83rem;
  color: var(--by-muted);
  margin-bottom: 1.75rem;
}
.by-breadcrumb a { color: inherit; text-decoration: none; }
.by-breadcrumb a:hover { color: var(--by-violet-light); }
.by-breadcrumb b { color: var(--by-ink); font-weight: 650; }

/* ---------- Product detail ---------- */
.by-detail { display: grid; gap: 2rem; margin-bottom: 4rem; }
.by-detail__figure {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: linear-gradient(160deg, rgba(130, 109, 255, 0.16), rgba(201, 79, 224, 0.08));
  border: 1px solid var(--by-line);
  border-radius: var(--by-radius);
  overflow: hidden;
}
.by-detail__figure img { width: 100%; height: 100%; object-fit: cover; }
.by-detail__soldout {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0.7rem;
  text-align: center;
  background: rgba(10, 10, 31, 0.85);
  color: #fff;
  font-weight: 700;
  font-size: 0.88rem;
}
.by-thumbs { display: flex; gap: 0.6rem; margin-top: 0.85rem; overflow-x: auto; padding-bottom: 0.25rem; }
.by-thumb {
  flex: 0 0 4.5rem;
  height: 4.5rem;
  border-radius: var(--by-radius-sm);
  border: 2px solid var(--by-line);
  background: var(--by-surface);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
}
.by-thumb img { width: 100%; height: 100%; object-fit: cover; }
.by-thumb.is-active { border-color: var(--by-violet); }

.by-detail__buy {
  background: var(--by-surface);
  border: 1px solid var(--by-line);
  border-radius: var(--by-radius);
  padding: 1.75rem 1.5rem 2rem;
  box-shadow: var(--by-shadow);
}
.by-detail__title { font-size: clamp(1.55rem, 4vw, 2.15rem); font-weight: 760; line-height: 1.18; }
.by-detail__tagline { margin-top: 0.7rem; font-size: 1rem; line-height: 1.6; }
.by-detail__price { display: flex; align-items: baseline; gap: 0.65rem; flex-wrap: wrap; margin: 1.4rem 0 0.6rem; }
.by-detail__price-now { font-size: 2.1rem; font-weight: 800; color: var(--by-ink); }
.by-detail__stock { display: flex; align-items: center; gap: 0.5rem; font-size: 0.87rem; font-weight: 600; }
.by-detail__stock.is-in { color: var(--by-rose); }
.by-detail__stock.is-out { color: var(--by-danger); }
.by-dot { width: 0.55rem; height: 0.55rem; border-radius: 999px; background: currentColor; }
.by-detail__list { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: 0.65rem; }
.by-detail__list li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.93rem; line-height: 1.55; }
.by-detail__list svg { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; margin-top: 0.15rem; color: var(--by-rose); }
.by-detail__desc { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--by-line); }
.by-detail__desc p { font-size: 0.94rem; line-height: 1.7; margin-bottom: 0.9rem; }
.by-detail__desc p:last-child { margin-bottom: 0; }

.by-buy-form { display: grid; gap: 0.85rem; margin-top: 1.5rem; }
.by-qty { display: inline-flex; align-items: center; border: 1px solid var(--by-line); border-radius: 999px; overflow: hidden; width: fit-content; }
.by-qty__btn {
  width: 2.75rem; height: 2.75rem;
  border: 0;
  background: var(--by-surface-alt);
  color: var(--by-ink-soft);
  font-size: 1.15rem;
  cursor: pointer;
  font-family: inherit;
}
.by-qty__btn:hover { background: var(--by-violet-soft); color: var(--by-violet-light); }
.by-qty__input {
  width: 3.5rem;
  height: 2.75rem;
  border: 0;
  text-align: center;
  font-weight: 700;
  color: var(--by-ink);
  background: var(--by-surface);
  -moz-appearance: textfield;
}
.by-qty__input::-webkit-outer-spin-button,
.by-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.by-callout {
  margin-top: 1.4rem;
  padding: 0.95rem 1.1rem;
  border-radius: var(--by-radius-sm);
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.35);
  color: #fcd34d;
  font-size: 0.88rem;
  line-height: 1.55;
}

@media (min-width: 900px) {
  .by-detail { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
  .by-detail__buy { padding: 2.25rem 2.25rem 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .beauty-site * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}