/* Checkout below-the-fold sections; loaded without blocking render. */

.sec { padding-block: 40px; }

.sec-h {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
  margin-bottom: 36px;
}

.sec-h h2 { font-size: clamp(30px, 3.6vw, 48px); }

.sec-h p {
  font-size: 16px;
  color: var(--secondary-text);
}

.pfacts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.pfacts div {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.pfacts__icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px; border-radius: 12px; background: color-mix(in srgb, var(--secondary) 12%, var(--surface)); color: var(--secondary); }
.pfacts__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.pfacts b {
  display: block;
  margin-bottom: 6px;
}

.pfacts p {
  font-size: 14px;
  color: var(--secondary-text);
}

.ing {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.ing div {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.ing .n {
  font-family: var(--display);
  font-size: 22px;
  color: var(--secondary);
}

.ing .amt {
  font-family: var(--display);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
}

.ing .nm { font-weight: 700; }
.ing .nm span { font-weight: 400; color: var(--muted-text); }

.ing p {
  font-size: 14px;
  color: var(--secondary-text);
}

/* Intro on the left, the always-open review form (with its star picker) on the right. */
.rv {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 40px;
  align-items: start;
  padding: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.rv h3 {
  margin-top: 8px;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.rv p {
  max-width: 52ch;
  margin-top: 8px;
  color: var(--secondary-text);
}

.rv__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rv__form h4 {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 800;
}

.rv__rating {
  margin: 0;
  padding: 0;
  border: 0;
}

.rv__rating .l {
  font-size: 12.5px;
  color: var(--muted-text);
}

/* Stars run 5→1 in the markup and are shown reversed, so a hovered or checked star lights every lower one. */
.rv__stars {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.rv__stars label {
  display: inline-flex;
  padding: 0 2px;
  line-height: 1;
  color: var(--border);
  cursor: pointer;
  transition: color .15s ease;
}

.rv__stars input:checked ~ label,
.rv__stars label:hover,
.rv__stars label:hover ~ label { color: var(--star); }

.rv__stars input:focus-visible + label { outline: 2px solid var(--main); outline-offset: 2px; border-radius: 4px; }
.rv__stars svg { width: 30px; height: 30px; fill: currentColor; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; }

.rv__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.rv__form textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px 13px;
  border: 1px solid color-mix(in srgb, var(--muted-text) 45%, var(--surface));
  border-radius: var(--radius-sm);
  background: var(--surface);
  font: inherit;
  font-size: 15.5px;
  resize: vertical;
}

.rv__form textarea:focus { border-color: var(--main); outline: 0; box-shadow: 0 0 0 4px color-mix(in srgb, var(--main) 14%, transparent); background: #fff; }

.rv__form .btn { align-self: flex-start; }

.rv__status { margin: 0; }

.rv__status.is-ok { color: var(--success); }

.rv__status.is-err { color: var(--danger); }

.faqg {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 56px;
  padding-top: 40px;
}

.faqg .aside h2 { font-size: clamp(30px, 3.6vw, 48px); }

.faqg .aside p {
  margin-top: 12px;
  color: var(--secondary-text);
}

.acc details { border-bottom: 1px solid var(--border); }
.acc details:first-child { border-top: 1px solid var(--border); }

.acc summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 17px;
  font-size: 15.5px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.acc summary::-webkit-details-marker { display: none; }

.acc summary .faq__toggle { width: 22px; height: 22px; }

.acc details > div {
  max-width: 64ch;
  padding-bottom: 18px;
  font-size: 14.5px;
  color: var(--secondary-text);
}

@media (max-width: 900px) {
  .pfacts { grid-template-columns: 1fr 1fr; }
  .ing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faqg { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 760px) {
  .rv { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
  .rv__row { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .pfacts,
  .ing { grid-template-columns: 1fr; }
}

/* Extended checkout (?ext=1): without / with comparison. */
.cmp { padding-bottom: 20px; }

/* Same heading as the reviews block: kicker and title, left-aligned. */
.cmp__head { margin-bottom: 28px; }

.cmp__head h3 {
  margin-top: 8px;
  font-family: var(--display);
  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: 800;
  letter-spacing: -.02em;
}

.cmp__head h3 em,
.cmp__side h3 em { font-style: normal; color: var(--main); }

.cmp__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.cmp__side {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--main-background);
}

.cmp__side--with {
  border: 1.5px solid var(--main);
  background: color-mix(in srgb, var(--flag) 55%, var(--surface));
}

.cmp__image {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.cmp__image--empty {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--border) 55%, var(--surface));
  color: var(--muted-text);
}

.cmp__image--empty svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.2; }

.cmp__body { padding: 28px 32px 32px; }

.cmp__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.cmp__side--with .cmp__badge { border-color: var(--main); background: var(--main); color: var(--light-text); }

.cmp__badge svg { width: 13px; height: 13px; fill: currentColor; }

/* Same size as the section and reviews titles. */
.cmp__side h3 {
  margin-top: 18px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.12;
}

.cmp__side:not(.cmp__side--with) h3 em { color: var(--danger); }

.cmp__side ul {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.cmp__side li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; }

.cmp__side li i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--surface));
  border-radius: 50%;
  background: var(--surface);
  color: var(--danger);
}

.cmp__side--with li i { border-color: var(--main); background: var(--main); color: var(--light-text); }

.cmp__side li svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.cmp__side li p { color: var(--secondary-text); font-size: 15px; line-height: 1.6; }

.cmp__side li b { color: var(--main-text); }

@media (max-width: 860px) {
  .cmp__grid { grid-template-columns: 1fr; }
  .cmp__body { padding: 22px 20px 24px; }
}

/* Extended checkout (?ext=1): customer reviews, 3x2 on desktop. */
.cr { padding-top: 20px; padding-bottom: 20px; }
.cr__head { margin-bottom: 28px; }
.cr__head h3 { margin-top: 8px; font-family: var(--display); font-size: clamp(30px, 3.6vw, 48px); font-weight: 800; letter-spacing: -.02em; }
.cr__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cr__card { position: relative; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 26px 24px 22px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.cr__quote { position: absolute; top: 20px; right: 20px; width: 28px; height: 28px; fill: color-mix(in srgb, var(--secondary) 18%, transparent); stroke: none; }
.cr__stars { display: flex; gap: 3px; }
.cr__star { width: 18px; height: 18px; fill: none; stroke: var(--star); stroke-width: 1.6; stroke-linejoin: round; }
.cr__star.is-on { fill: var(--star); }
.cr__card h4 { margin: 2px 0 0; font-family: var(--display); font-size: 18px; font-weight: 800; color: var(--main-text); }
.cr__card blockquote { flex: 1; margin: 0; color: var(--secondary-text); font-size: 15px; line-height: 1.6; }
.cr__card figcaption { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--border); }
.cr__avatar { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; background: color-mix(in srgb, var(--secondary) 14%, var(--surface)); color: var(--secondary); }
.cr__avatar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cr__card figcaption b { display: block; color: var(--main-text); font-size: 14px; }
.cr__card figcaption small { display: inline-flex; align-items: center; gap: 4px; color: var(--muted-text); font-size: 12.5px; }
.cr__card figcaption small svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Extended checkout (?ext=1): ready-to-ship band before the footer. */
.rts { margin-top: 56px; padding: 64px 0; background: color-mix(in srgb, var(--main) 6%, var(--surface)); }
.rts + footer.site { margin-top: 0; }
.rts__inner { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.rts__icon { width: 36px; height: 36px; fill: none; stroke: var(--main); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rts h2 { margin: 0; font-family: var(--display); font-size: clamp(28px, 3.4vw, 44px); font-weight: 800; letter-spacing: -.02em; color: var(--main-text); }
.rts__text { margin: 0; min-height: 1.6em; color: var(--secondary-text); font-size: 17px; }
.rts__text b { color: var(--main-text); font-variant-numeric: tabular-nums; }
.rts__cta { width: min(100%, 520px); margin-top: 8px; text-transform: uppercase; letter-spacing: .03em; }

@media (max-width: 860px) {
  .cr__grid { grid-template-columns: 1fr; }
  .rts { padding: 44px 0; }
}

@media (min-width: 861px) and (max-width: 1100px) {
  .cr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}