/* =============================================================
   JASP · Fiche produit — même grammaire que la home Figma :
   fond gris arrondi 60, cartes blanches arrondies 60, pilules,
   labels bleus espacés, titres ZT Nature 72 / -4 %.
   ============================================================= */

.j-crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: calc(12 * var(--u));
  padding: calc(4 * var(--u)) var(--j-gutter) calc(32 * var(--u));
  font-size: max(13px, calc(20 * var(--u))); line-height: 1; color: var(--j-grey-text);
}
.j-crumb a:hover { color: var(--j-ink); }
.j-crumb [aria-current] { color: var(--j-ink); }

.j-pill {
  display: inline-flex; align-items: center; height: calc(48 * var(--u)); padding-inline: calc(22 * var(--u));
  border-radius: var(--j-radius-pill); font-size: max(13px, calc(20 * var(--u))); line-height: 1; white-space: nowrap;
}
.j-pill--lime { background: #d4ff5f; color: var(--j-ink); }
.j-pill--white { background: var(--j-white); color: var(--j-black); }
.j-pill--ink { background: var(--j-ink); color: var(--j-white); }
.j-pill--xs { height: calc(30 * var(--u)); padding-inline: calc(12 * var(--u)); font-size: max(11px, calc(16 * var(--u))); font-weight: 600; vertical-align: middle; }

/* ---------- Bloc d'achat ---------- */
.j-pdp__panel {
  display: grid; grid-template-columns: minmax(0, 1fr) calc(732 * var(--u)); gap: calc(24 * var(--u));
  align-items: start; padding: calc(56 * var(--u));
}
.j-pdp__gallery { position: sticky; top: calc(24 * var(--u)); }
.j-pdp__main {
  position: relative; height: calc(860 * var(--u)); border-radius: var(--j-radius-section);
  background: #eaeaea; overflow: hidden;
}
.j-pdp__main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 45%; transform: scale(1.18); }
.j-pdp__badges { position: absolute; top: calc(40 * var(--u)); left: calc(40 * var(--u)); display: flex; gap: calc(12 * var(--u)); }
.j-pdp__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(16 * var(--u)); margin-top: calc(16 * var(--u)); list-style: none; }
.j-pdp__thumb {
  display: block; width: 100%; aspect-ratio: 1; padding: 0; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; border-radius: calc(30 * var(--u)); background: #eaeaea;
}
.j-pdp__thumb.is-active { border-color: var(--j-ink); }
.j-pdp__thumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.6); }
.j-pdp__thumb-img--2 { object-position: 15% 30%; }
.j-pdp__thumb-img--3 { object-position: 85% 70%; }
.j-pdp__thumb-img--4 { object-position: 60% 95%; }

.j-pdp__buy {
  background: var(--j-white); border-radius: var(--j-radius-section);
  padding: calc(64 * var(--u)) calc(56 * var(--u)) calc(56 * var(--u));
}
.j-pdp__title { margin-top: calc(24 * var(--u)); }
.j-pdp__rating { display: inline-flex; align-items: center; gap: calc(12 * var(--u)); margin-top: calc(20 * var(--u)); font-size: max(13px, calc(20 * var(--u))); color: var(--j-grey-text); }
.j-pdp__rating img { height: calc(24 * var(--u)); width: auto; }
.j-pdp__pitch { margin-top: calc(28 * var(--u)); }
.j-pdp__dose {
  display: inline-flex; align-items: center; gap: calc(12 * var(--u)); margin-top: calc(32 * var(--u));
  padding: calc(16 * var(--u)) calc(24 * var(--u)); border-radius: var(--j-radius-pill); background: var(--j-grey-bg);
  font-size: max(13px, calc(20 * var(--u))); line-height: 1.2; color: var(--j-ink);
}
.j-pdp__dose strong { font-weight: 600; }
.j-pdp__dose-dot { flex: none; width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; background: #d4ff5f; box-shadow: 0 0 0 calc(5 * var(--u)) rgba(212, 255, 95, .35); }

.j-pdp__price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(16 * var(--u)); margin-top: calc(40 * var(--u)); }
.j-pdp__price { font-size: max(32px, calc(72 * var(--u))); line-height: .9; letter-spacing: -0.04em; color: var(--j-ink); }
.j-pdp__unit { font-size: max(13px, calc(22 * var(--u))); color: var(--j-grey-text); }

.j-pdp__options, .j-pdp__variants { margin: calc(32 * var(--u)) 0 0; padding: 0; border: 0; min-width: 0; }
.j-pdp__legend { margin-bottom: calc(14 * var(--u)); padding: 0; font-weight: 700; font-size: max(11px, calc(18 * var(--u))); letter-spacing: .2em; text-transform: uppercase; color: var(--j-grey-nav); }
.j-option {
  position: relative; display: grid; grid-template-columns: calc(28 * var(--u)) 1fr auto; align-items: center; gap: calc(20 * var(--u));
  padding: calc(24 * var(--u)) calc(28 * var(--u)); border: 2px solid #ececec; border-radius: calc(30 * var(--u));
  cursor: pointer; transition: border-color .2s ease, background-color .2s ease;
}
.j-option + .j-option { margin-top: calc(12 * var(--u)); }
.j-option input, .j-chip input { position: absolute; opacity: 0; pointer-events: none; }
.j-option__radio { width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: 50%; border: 2px solid #c9c9c9; display: grid; place-items: center; }
.j-option__radio::after { content: ''; width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; background: var(--j-ink); transform: scale(0); transition: transform .2s ease; }
.j-option:has(input:checked) { border-color: var(--j-ink); background: #fafafa; }
.j-option:has(input:checked) .j-option__radio { border-color: var(--j-ink); }
.j-option:has(input:checked) .j-option__radio::after { transform: scale(1); }
.j-option:has(input:focus-visible) { outline: 2px solid var(--j-blue); outline-offset: 3px; }
.j-option__text strong { display: flex; flex-wrap: wrap; align-items: center; gap: calc(10 * var(--u)); font-weight: 600; font-size: max(15px, calc(24 * var(--u))); line-height: 1.1; color: var(--j-ink); }
.j-option__text small { display: block; margin-top: calc(6 * var(--u)); font-size: max(12px, calc(18 * var(--u))); line-height: 1.3; color: var(--j-grey-text); }
.j-option__price { font-size: max(15px, calc(24 * var(--u))); color: var(--j-ink); white-space: nowrap; }

.j-pdp__chips { display: flex; flex-wrap: wrap; gap: calc(12 * var(--u)); }
.j-chip span {
  display: inline-flex; align-items: center; height: calc(56 * var(--u)); padding-inline: calc(28 * var(--u));
  border: 2px solid #e6e6e6; border-radius: var(--j-radius-pill); cursor: pointer;
  font-size: max(14px, calc(22 * var(--u))); color: var(--j-black); transition: border-color .2s ease;
}
.j-chip input:checked + span { border-color: var(--j-ink); background: var(--j-grey-bg); }
.j-chip input:focus-visible + span { outline: 2px solid var(--j-blue); outline-offset: 3px; }
.j-chip input:disabled + span { opacity: .4; text-decoration: line-through; cursor: not-allowed; }

.j-pdp__actions { display: flex; gap: calc(16 * var(--u)); margin-top: calc(32 * var(--u)); }
.j-qty { flex: none; display: flex; align-items: center; height: calc(72 * var(--u)); border: 2px solid #e6e6e6; border-radius: var(--j-radius-pill); }
.j-qty button { width: calc(52 * var(--u)); height: 100%; border: 0; background: none; cursor: pointer; font-size: max(18px, calc(28 * var(--u))); color: var(--j-ink); }
.j-qty input { width: calc(44 * var(--u)); border: 0; background: none; text-align: center; font-family: var(--j-font); font-size: max(15px, calc(24 * var(--u))); color: var(--j-ink); -moz-appearance: textfield; }
.j-qty input::-webkit-outer-spin-button, .j-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.j-pdp__add { flex: 1; height: calc(72 * var(--u)); border: 0; cursor: pointer; }
.j-pdp__add:disabled { opacity: .5; cursor: not-allowed; }
.j-pdp__express { margin-top: calc(16 * var(--u)); }
.j-preview-express { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(10 * var(--u)); }
.j-preview-express span { display: grid; place-items: center; height: calc(56 * var(--u)); border-radius: var(--j-radius-pill); background: var(--j-grey-bg); font-size: max(12px, calc(18 * var(--u))); color: var(--j-grey-nav); }

.j-pdp__stock { display: flex; align-items: center; gap: calc(12 * var(--u)); margin-top: calc(28 * var(--u)); font-size: max(13px, calc(20 * var(--u))); color: var(--j-ink); }
.j-pdp__stock span { width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%; background: #1b9e5a; box-shadow: 0 0 0 calc(4 * var(--u)) rgba(27, 158, 90, .18); }
.j-pdp__trust { display: grid; gap: calc(18 * var(--u)); margin-top: calc(28 * var(--u)); padding-top: calc(28 * var(--u)); border-top: 2px solid #f0f0f0; list-style: none; }
.j-pdp__trust li { display: flex; align-items: center; gap: calc(16 * var(--u)); font-size: max(13px, calc(20 * var(--u))); line-height: 1.3; color: var(--j-grey-text); }
.j-pdp__trust img { flex: none; width: calc(30 * var(--u)); height: calc(28 * var(--u)); object-fit: contain; }
.j-pdp__trust strong { font-weight: 600; color: var(--j-ink); }
.j-pdp__legal { margin-top: calc(28 * var(--u)); padding: calc(24 * var(--u)) calc(28 * var(--u)); border-radius: calc(30 * var(--u)); background: var(--j-grey-bg); font-size: max(12px, calc(17 * var(--u))); line-height: 1.45; color: var(--j-grey-nav); }

.j-pdp__sticky { display: none; }

/* Contenu d'une routine */
.j-bundle { margin-top: calc(32 * var(--u)); padding: calc(28 * var(--u)) calc(32 * var(--u)); border-radius: calc(30 * var(--u)); background: var(--j-grey-bg); }
.j-bundle__head { display: flex; justify-content: space-between; gap: calc(16 * var(--u)); font-size: max(13px, calc(20 * var(--u))); color: var(--j-grey-nav); }
.j-bundle__head strong { font-weight: 600; color: var(--j-ink); }
.j-bundle ul { display: grid; gap: calc(14 * var(--u)); margin-top: calc(20 * var(--u)); padding-bottom: calc(20 * var(--u)); border-bottom: 2px solid #e6e6e6; list-style: none; }
.j-bundle li { display: flex; align-items: center; gap: calc(14 * var(--u)); font-size: max(14px, calc(22 * var(--u))); color: var(--j-ink); }
.j-bundle__dot { flex: none; width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; background: var(--j-blue); }
.j-bundle__name { flex: 1; }
.j-bundle__price { color: var(--j-grey-text); }
.j-bundle__sum { display: flex; align-items: center; justify-content: space-between; gap: calc(16 * var(--u)); margin-top: calc(18 * var(--u)); font-size: max(13px, calc(20 * var(--u))); color: var(--j-grey-nav); }
.j-bundle__sum s { color: var(--j-ink); }

/* =============================================================
   Sections de contenu de la fiche (bénéfices, formule, composition,
   mode d'emploi, comparatif, FAQ, précautions)
   ============================================================= */
.j-sec { padding-top: calc(200 * var(--u)); }
.j-sec .j-head .j-title-2 { width: calc(780 * var(--u)); }
.j-sec .j-head__aside { width: calc(453.53 * var(--u)); }
.j-sec__body { margin-top: calc(99.89 * var(--u)); }

/* Bénéfices : 3 cartes grises */
.j-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(8.28 * var(--u)); list-style: none; }
.j-benefit {
  display: flex; flex-direction: column; min-height: calc(560 * var(--u));
  padding: calc(56 * var(--u)) calc(48 * var(--u)) calc(40 * var(--u)) calc(56 * var(--u));
  border-radius: var(--j-radius-section); background: var(--j-grey-bg);
}
.j-benefit .j-subtitle { margin-top: calc(48 * var(--u)); }
.j-benefit:not(:has(.j-claim)) { min-height: 0; padding-bottom: calc(56 * var(--u)); }
.j-benefit .j-text { margin-top: calc(20 * var(--u)); }
.j-claim { margin-top: auto; padding: calc(22 * var(--u)) calc(26 * var(--u)); border-radius: calc(30 * var(--u)); background: var(--j-white); }
.j-claim p:first-child { font-weight: 700; font-size: max(11px, calc(16 * var(--u))); letter-spacing: .2em; text-transform: uppercase; color: var(--j-blue); }
.j-claim p + p { margin-top: calc(8 * var(--u)); font-size: max(13px, calc(20 * var(--u))); line-height: 1.35; color: var(--j-ink); }
.j-icon-circle {
  display: grid; place-items: center; flex: none; width: calc(85.65 * var(--u)); height: calc(85.65 * var(--u));
  border-radius: 50%; background: #d4ff5f; color: var(--j-ink);
  font-weight: 600; font-size: max(16px, calc(28 * var(--u))); letter-spacing: -0.02em;
}
.j-icon-circle img { width: auto; height: calc(40 * var(--u)); }

/* Formule : grand fond bleu nuit, 4 choix numérotés */
.j-formula { padding: calc(105.75 * var(--u)) calc(95.8 * var(--u)) calc(96 * var(--u)); background: var(--j-ink); color: var(--j-white); }
.j-formula .j-label { color: #d4ff5f; }
.j-formula .j-title-2 { margin-top: calc(24 * var(--u)); width: calc(900 * var(--u)); color: var(--j-white); }
.j-formula__grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8.28 * var(--u)); margin-top: calc(99.89 * var(--u)); list-style: none; }
.j-formula__item { padding: calc(48 * var(--u)) calc(56 * var(--u)); border-radius: var(--j-radius-section); background: rgba(255, 255, 255, .06); }
.j-formula__num { font-size: max(24px, calc(48 * var(--u))); line-height: .9; letter-spacing: -0.04em; color: #d4ff5f; }
.j-formula__item .j-subtitle { margin-top: calc(28 * var(--u)); color: var(--j-white); }
.j-formula__item .j-text { margin-top: calc(18 * var(--u)); color: rgba(255, 255, 255, .62); }
.j-formula__plain { margin-top: calc(28 * var(--u)); padding: calc(20 * var(--u)) calc(24 * var(--u)); border-radius: calc(30 * var(--u)); background: rgba(212, 255, 95, .1); font-size: max(13px, calc(20 * var(--u))); line-height: 1.4; color: var(--j-white); }
.j-formula__plain strong { color: #d4ff5f; font-weight: 600; }

/* Composition : fiche technique */
.j-compo { padding: calc(56 * var(--u)); }
.j-compo__card { background: var(--j-white); border-radius: var(--j-radius-section); padding: calc(24 * var(--u)) calc(56 * var(--u)) calc(16 * var(--u)); }
.j-compo__row { display: grid; grid-template-columns: 1.3fr 1.2fr .7fr .6fr; align-items: center; gap: calc(24 * var(--u)); padding: calc(28 * var(--u)) 0; border-bottom: 2px solid #f0f0f0; }
.j-compo__row:last-child { border-bottom: 0; }
.j-compo__row--head { padding: calc(16 * var(--u)) 0; font-weight: 700; font-size: max(11px, calc(16 * var(--u))); letter-spacing: .2em; text-transform: uppercase; color: var(--j-grey-nav); }
.j-compo__name { font-weight: 600; font-size: max(16px, calc(32 * var(--u))); line-height: 1; letter-spacing: -0.02em; color: var(--j-ink); }
.j-compo__form { font-size: max(13px, calc(22 * var(--u))); color: var(--j-grey-text); }
.j-compo__qty { text-align: right; font-size: max(16px, calc(32 * var(--u))); letter-spacing: -0.02em; color: var(--j-ink); }
.j-compo__vnr { justify-self: end; }
.j-compo__note { margin: calc(28 * var(--u)) calc(56 * var(--u)) 0; font-size: max(12px, calc(18 * var(--u))); line-height: 1.45; color: var(--j-grey-nav); }
.j-compo__meta { display: flex; justify-content: space-between; gap: calc(20 * var(--u)); margin-bottom: calc(8 * var(--u)); padding: calc(20 * var(--u)) 0; border-bottom: 2px solid #f0f0f0; font-size: max(13px, calc(20 * var(--u))); color: var(--j-grey-nav); }
.j-compo__meta strong { color: var(--j-ink); font-weight: 600; }

/* Mode d'emploi : 3 étapes */
.j-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(8.28 * var(--u)); list-style: none; }
.j-steps:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
.j-steps:has(> :nth-child(4):last-child) .j-step { padding: calc(48 * var(--u)) calc(40 * var(--u)); }
.j-step { padding: calc(56 * var(--u)); border-radius: var(--j-radius-section); background: var(--j-grey-bg); }
.j-step .j-subtitle { margin-top: calc(48 * var(--u)); }
.j-step .j-text { margin-top: calc(20 * var(--u)); }

/* Comparatif */
.j-compare { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8.28 * var(--u)); list-style: none; }
.j-compare__card { padding: calc(56 * var(--u)); border-radius: var(--j-radius-section); background: var(--j-grey-bg); }
.j-compare__card--us { background: var(--j-ink); color: var(--j-white); }
.j-compare__card--us .j-label { color: #d4ff5f; }
.j-compare__card .j-subtitle { margin-top: calc(20 * var(--u)); }
.j-compare__card--us .j-subtitle { color: var(--j-white); }
.j-compare__rows { margin-top: calc(40 * var(--u)); list-style: none; }
.j-compare__rows li { display: flex; justify-content: space-between; gap: calc(20 * var(--u)); padding: calc(22 * var(--u)) 0; border-top: 2px solid rgba(14, 49, 62, .08); font-size: max(14px, calc(22 * var(--u))); color: var(--j-grey-nav); }
.j-compare__card--us .j-compare__rows li { border-top-color: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .62); }
.j-compare__rows strong { font-weight: 400; color: var(--j-ink); text-align: right; }
.j-compare__card--us .j-compare__rows strong { color: var(--j-white); }

/* FAQ */
.j-faq { display: grid; grid-template-columns: calc(560 * var(--u)) 1fr; gap: calc(80 * var(--u)); padding: calc(105.75 * var(--u)) calc(95.8 * var(--u)) calc(96 * var(--u)); }
.j-faq .j-title-2 { margin-top: calc(24 * var(--u)); }
.j-faq__help { margin-top: calc(32 * var(--u)); }
.j-faq__help .j-btn { margin-top: calc(24 * var(--u)); }
.j-faq__list { display: grid; gap: calc(12 * var(--u)); list-style: none; }
.j-faq__item { border-radius: calc(40 * var(--u)); background: var(--j-white); }
.j-faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: calc(24 * var(--u));
  padding: calc(28 * var(--u)) calc(28 * var(--u)) calc(28 * var(--u)) calc(40 * var(--u)); cursor: pointer; list-style: none;
  font-weight: 600; font-size: max(16px, calc(28 * var(--u))); line-height: 1.15; letter-spacing: -0.02em; color: var(--j-ink);
}
.j-faq__item summary::-webkit-details-marker { display: none; }
.j-faq__item summary::after {
  content: '+'; flex: none; display: grid; place-items: center; width: calc(52 * var(--u)); height: calc(52 * var(--u));
  border-radius: 50%; background: var(--j-grey-bg); font-weight: 400; font-size: max(18px, calc(30 * var(--u))); transition: transform .25s ease, background-color .25s ease;
}
.j-faq__item[open] summary::after { transform: rotate(45deg); background: #d4ff5f; }
.j-faq__item .j-text { padding: 0 calc(96 * var(--u)) calc(36 * var(--u)) calc(40 * var(--u)); }

/* Précautions */
.j-care { display: grid; grid-template-columns: calc(560 * var(--u)) 1fr; gap: calc(80 * var(--u)); padding: calc(80 * var(--u)) calc(95.8 * var(--u)); border: 2px solid #ececec; background: var(--j-white); }
.j-care .j-title-2 { margin-top: calc(24 * var(--u)); }
.j-care__intro { font-weight: 600; font-size: max(15px, calc(24 * var(--u))); line-height: 1.3; color: var(--j-ink); }
.j-care ul { display: grid; gap: calc(16 * var(--u)); margin-top: calc(28 * var(--u)); list-style: none; }
.j-care li { position: relative; padding-left: calc(32 * var(--u)); }
.j-care li::before { content: ''; position: absolute; left: 0; top: .5em; width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%; background: var(--j-blue); }

/* =============================================================
   Écrans étroits
   ============================================================= */
@media (max-width: 989px) {
  .j-crumb { padding: 4px 16px 14px; }
  .j-pdp__panel { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 10px; }
  .j-pdp__gallery { position: static; }
  .j-pdp__main { height: 340px; border-radius: 24px; }
  .j-pdp__badges { top: 16px; left: 16px; }
  .j-pill { height: 34px; padding-inline: 14px; }
  .j-pdp__thumbs { gap: 8px; margin-top: 8px; }
  .j-pdp__thumb { border-radius: 14px; }
  .j-pdp__buy { padding: 26px 20px 22px; border-radius: 24px; }
  .j-option { grid-template-columns: 22px 1fr auto; padding: 16px; gap: 12px; border-radius: 18px; }
  .j-option__radio { width: 22px; height: 22px; }
  .j-option__radio::after { width: 11px; height: 11px; }
  .j-chip span { height: 44px; padding-inline: 18px; }
  .j-qty { height: 54px; }
  .j-qty button { width: 40px; }
  .j-qty input { width: 32px; }
  .j-pdp__add { height: 54px; }
  .j-preview-express span { height: 44px; }
  .j-pdp__legal { border-radius: 16px; padding: 14px 16px; }
  .j-pdp__sticky {
    position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--j-white);
    box-shadow: 0 -8px 24px rgba(14, 49, 62, .12); transform: translateY(110%); transition: transform .3s ease;
  }
  .j-pdp__sticky.is-visible { transform: none; }
  .j-pdp__sticky-title { flex: 1; min-width: 0; font-weight: 600; font-size: 15px; color: var(--j-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .j-pdp__sticky-price { font-size: 15px; color: var(--j-ink); }
  .j-pdp__sticky .j-btn { height: 44px; }

  .j-sec { padding-top: 64px; }
  .j-sec .j-head .j-title-2, .j-sec .j-head__aside, .j-formula .j-title-2 { width: auto; }
  .j-sec__body { margin-top: 28px; }
  .j-benefits, .j-steps, .j-steps:has(> :nth-child(4):last-child), .j-compare, .j-formula__grid { grid-template-columns: 1fr; gap: 8px; }
  .j-benefit, .j-benefit:not(:has(.j-claim)) { min-height: 0; padding: 28px 22px 22px; border-radius: 24px; }
  .j-benefit .j-subtitle, .j-step .j-subtitle { margin-top: 20px; }
  .j-claim { margin-top: 20px; border-radius: 16px; }
  .j-icon-circle { width: 52px; height: 52px; }
  .j-icon-circle img { height: 26px; }
  .j-formula { padding: 36px 16px; }
  .j-formula__grid { margin-top: 28px; }
  .j-formula__item, .j-step, .j-steps:has(> :nth-child(4):last-child) .j-step, .j-compare__card { padding: 26px 22px; border-radius: 24px; }
  .j-compo { padding: 10px; }
  .j-compo__card { padding: 8px 18px; border-radius: 24px; }
  .j-compo__row { grid-template-columns: 1fr auto; gap: 6px 12px; }
  .j-compo__row--head { display: none; }
  .j-compo__form { grid-column: 1; }
  .j-compo__qty { grid-column: 2; grid-row: 1; }
  .j-compo__vnr { grid-column: 2; grid-row: 2; }
  .j-compo__note { margin: 16px 10px 0; }
  .j-faq, .j-care { grid-template-columns: 1fr; gap: 24px; padding: 36px 16px; }
  .j-faq__item { border-radius: 20px; }
  .j-faq__item summary { padding: 18px 16px 18px 20px; }
  .j-faq__item summary::after { width: 36px; height: 36px; }
  .j-faq__item .j-text { padding: 0 20px 22px; }
  .j-care { border-radius: 24px; }
  body:has(.j-pdp) { padding-bottom: 72px; }
}