/* Qlean PDP v2 ("qo-" = Qlean offer). Source of truth: Paper file 01M0AAMKAW7GYGD2288WRSZ8C5, boards 02 / 03 / 04.
   Mobile first. Every value below was read off the boards with get_jsx, not eyeballed. */

.qo {
  --qo-ruby: #831422;
  --qo-ruby-deep: #5F0F1A;
  --qo-sunset: #D44C18;
  --qo-ink: #1C1C1C;
  --qo-soft: #6B6660;
  --qo-strike: #A89F98;
  --qo-rule: #EFE2DA;
  --qo-rule-2: #DDD6C9;
  --qo-blush: #FBE9E0;
  --qo-cream: #FDF6F1;
  --qo-tan: #F2E6DE;
  --qo-gold: #E0A23C;
  --qo-green: #1A8F4A;
  --qo-red: #D11F2F;
  --qo-white: #FFFFFF;
  --qo-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --qo-radius: 12px;
  --qo-max: 1280px;
  font-family: var(--qo-font);
  color: var(--qo-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.qo *, .qo *::before, .qo *::after { box-sizing: border-box; }
.qo p, .qo h1, .qo h2, .qo h3, .qo ul { margin: 0; }
.qo ul { padding: 0; list-style: none; }
.qo button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.qo img { display: block; max-width: 100%; }
.qo a { color: inherit; text-decoration: none; }
.qo .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- layout ---------- */
.qo-wrap { width: 100%; max-width: var(--qo-max); margin: 0 auto; padding: 0 16px; }
.qo-section { padding: 44px 0; }
.qo-section--cream { background: var(--qo-cream); }
.qo-section--white { background: var(--qo-white); }
.qo-eyebrow { color: var(--qo-sunset); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; line-height: 15px; text-transform: uppercase; }
.qo-h2 { color: var(--qo-ruby); font-size: 26px; font-weight: 700; line-height: 32px; }
.qo-lead { color: var(--qo-soft); font-size: 14px; line-height: 22px; }
.qo-head { display: flex; flex-direction: column; gap: 12px; }

@media (min-width: 990px) {
  .qo-wrap { padding: 0 80px; max-width: calc(var(--qo-max) + 160px); }
  .qo-section { padding: 72px 0; }
  .qo-eyebrow { font-size: 12px; line-height: 16px; }
  .qo-h2 { font-size: 36px; line-height: 44px; }
  .qo-lead { font-size: 16px; line-height: 25px; }
  .qo-head--center { align-items: center; text-align: center; gap: 10px; }
}

/* ---------- product section ---------- */
.qo-product { padding-bottom: 24px; background: var(--qo-white); }
.qo-note { color: var(--qo-soft); font-size: 12px; line-height: 17px; text-align: center; }
.qo-note[hidden] { display: none; }
.qo-gallery__slide:not(.is-on), .qo-gallery__thumb:not(.is-on) { display: none; }
.qo-pack__art img[hidden] { display: none; }
.qo-gift[hidden] { display: none; }
.qo-btn[hidden] { display: none; }
.qo-product__grid { display: flex; flex-direction: column; }
@media (min-width: 990px) {
  .qo-product { padding-top: 18px; padding-bottom: 60px; box-shadow: 0 2px 3px rgba(0,0,0,.2); position: relative; z-index: 1; }
  .qo-product__grid { flex-direction: row; gap: 30px; align-items: flex-start; }
  .qo-product__left { width: 50%; flex: 0 0 50%; position: sticky; top: 24px; }
  .qo-product__right { width: 50%; flex: 0 0 50%; }
}

/* gallery */
.qo-gallery { margin: 0 -16px; }
.qo-gallery__main { position: relative; background: var(--qo-cream); overflow: hidden; }
.qo-gallery__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.qo-gallery__track::-webkit-scrollbar { display: none; }
.qo-gallery__slide { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 1 / 1; }
.qo-gallery__slide img { width: 100%; height: 100%; object-fit: cover; }
.qo-gallery__count { position: absolute; left: 16px; bottom: 13px; height: 22px; padding: 0 10px; border-radius: 999px; background: var(--qo-white); color: var(--qo-ruby); font-size: 11px; font-weight: 600; line-height: 22px; }
.qo-gallery__arrow { display: none; }
.qo-gallery__thumbs { display: flex; gap: 8px; padding: 10px 16px 0; overflow-x: auto; scrollbar-width: none; }
.qo-gallery__thumbs::-webkit-scrollbar { display: none; }
.qo-gallery__thumb { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 8px; overflow: hidden; background: var(--qo-cream); border: 2px solid transparent; }
.qo-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.qo-gallery__thumb[aria-current="true"] { border-color: var(--qo-ruby); }
@media (min-width: 990px) {
  .qo-gallery { margin: 0; display: flex; flex-direction: column; gap: 16px; }
  .qo-gallery__main { border-radius: 14px; }
  .qo-gallery__count { display: none; }
  .qo-gallery__arrow { display: flex; position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 999px; background: var(--qo-white); align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
  .qo-gallery__arrow--prev { left: 22px; }
  .qo-gallery__arrow--next { right: 22px; }
  .qo-gallery__thumbs { padding: 0; gap: 12px; }
  .qo-gallery__thumb { flex-basis: 84px; width: 84px; height: 84px; border-radius: 10px; }
}

/* featured review card */
.qo-review { background: var(--qo-cream); border-radius: var(--qo-radius); padding: 14px; display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.qo-review[hidden] { display: none; }
.qo-review--desktop { display: none; }
@media (min-width: 990px) { .qo-review--desktop:not([hidden]) { display: flex; } .qo-review--mobile { display: none !important; } }
.qo-review__head { display: flex; align-items: center; gap: 12px; }
.qo-review__photo { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; flex: 0 0 56px; }
.qo-review__stars { display: flex; gap: 2px; }
.qo-review__stars svg { width: 16px; height: 16px; }
.qo-review__badge { color: var(--qo-green); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; line-height: 14px; }
.qo-review__quote { font-size: 14px; font-weight: 600; line-height: 21px; }
.qo-review__name { color: var(--qo-soft); font-size: 12px; line-height: 17px; }
@media (min-width: 990px) {
  .qo-review { flex-direction: row; align-items: flex-start; gap: 18px; padding: 20px; border-radius: 14px; margin-top: 0; }
  .qo-review__photo { width: 96px; height: 96px; flex-basis: 96px; border-radius: 10px; }
  .qo-review__body { display: flex; flex-direction: column; gap: 8px; }
  .qo-review__quote { font-size: 16px; line-height: 24px; }
  .qo-review__name { font-size: 13px; line-height: 18px; }
  .qo-review__badge { font-size: 11px; line-height: 15px; }
}

/* title box */
.qo-title { display: flex; flex-direction: column; gap: 10px; padding: 18px 0 18px; }
.qo-title__h1 { color: var(--qo-ruby); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 32px; }
.qo-title__rating { display: flex; align-items: center; gap: 8px; min-height: 18px; }
.qo-title__rating[hidden] { display: none; }
.qo-title__stars { display: flex; gap: 3px; }
.qo-title__stars svg { width: 16px; height: 16px; }
.qo-title__rating-text { color: var(--qo-soft); font-size: 13px; font-weight: 600; line-height: 18px; }
.qo-title__sub { color: var(--qo-soft); font-size: 15px; line-height: 21px; }
.qo-ticks { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.qo-ticks li { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 20px; }
.qo-ticks svg { flex: 0 0 auto; }
@media (min-width: 990px) {
  .qo-title { padding: 0 0 22px; gap: 12px; }
  .qo-title__h1 { font-size: 35px; line-height: 42px; letter-spacing: -0.015em; }
  .qo-title__sub { font-size: 16px; line-height: 22px; }
  .qo-title__rating-text { font-size: 14px; }
  .qo-ticks { gap: 12px; padding: 0 0 26px; }
  .qo-ticks li { font-size: 15px; gap: 12px; }
}

/* offer box */
.qo-offer { display: flex; flex-direction: column; gap: 16px; padding-bottom: 20px; }
.qo-label { color: var(--qo-ruby); font-size: 11px; font-weight: 700; letter-spacing: 0.07em; line-height: 15px; text-transform: uppercase; }
.qo-block { display: flex; flex-direction: column; gap: 9px; }
@media (min-width: 990px) { .qo-label { font-size: 12px; line-height: 16px; } .qo-block { gap: 10px; } }

/* scent picker */
.qo-scents { display: flex; gap: 8px; }
.qo-scent { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; border: 1px solid var(--qo-rule); border-radius: 10px; overflow: hidden; background: var(--qo-white); }
.qo-scent--on { border: 2px solid var(--qo-ruby); }
.qo-scent__img { width: 100%; height: 72px; display: flex; align-items: center; justify-content: center; background: var(--qo-blush); }
.qo-scent__img img { width: 72px; height: 72px; object-fit: contain; }
.qo-scent--ssl .qo-scent__img { background: #FDF0DE; }
.qo-scent--un .qo-scent__img { background: #F2EEEA; }
.qo-scent__name { height: 38px; display: flex; align-items: center; color: var(--qo-soft); font-size: 11px; font-weight: 500; line-height: 15px; text-align: center; padding: 0 4px; }
.qo-scent--on .qo-scent__name { color: var(--qo-ruby); font-weight: 700; }
@media (min-width: 990px) {
  .qo-scents { gap: 12px; }
  .qo-scent__img { height: 112px; }
  .qo-scent__img img { width: 112px; height: 112px; }
  .qo-scent__name { font-size: 13px; line-height: 17px; }
}

/* pack picker */
.qo-packs { display: flex; flex-direction: column; gap: 10px; }
.qo-pack { position: relative; display: flex; flex-direction: column; border: 2px solid var(--qo-rule); border-radius: 12px; overflow: hidden; background: var(--qo-white); text-align: left; width: 100%; }
.qo-pack[aria-checked="true"] { border-color: var(--qo-ruby); background: var(--qo-blush); }
.qo-pack__badge { height: 20px; display: flex; align-items: center; justify-content: center; background: var(--qo-blush); color: var(--qo-ruby); font-size: 10px; font-weight: 700; letter-spacing: 0.09em; line-height: 14px; }
.qo-pack__badge--hot { background: var(--qo-ruby); color: var(--qo-white); }
.qo-pack__badge:empty { display: none; }
.qo-pack__row { display: flex; align-items: center; gap: 10px; padding: 12px; }
.qo-pack__art { display: flex; align-items: flex-end; gap: 2px; flex: 0 0 auto; height: 44px; }
.qo-pack__art img { height: 44px; width: 44px; object-fit: contain; }
.qo-pack__art img.qo-pack__art--sm { height: 32px; width: 32px; }
@media (max-width: 989px) {
  .qo-pack:not([data-qo-pack="3"]) .qo-pack__art img:not(:first-child) { display: none; }
  .qo-pack[data-qo-pack="3"] .qo-pack__art img:not(:last-child) { display: none; }
}
.qo-pack__info { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qo-pack__name { color: var(--qo-ruby); font-size: 15px; font-weight: 700; line-height: 20px; }
.qo-pack__meta { color: var(--qo-soft); font-size: 11px; line-height: 15px; }
.qo-pack__price { display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto; }
.qo-pack__now { color: var(--qo-ruby); font-size: 18px; font-weight: 700; line-height: 24px; }
.qo-pack__was { color: var(--qo-strike); font-size: 11px; line-height: 15px; text-decoration: line-through; }
@media (min-width: 990px) {
  .qo-packs { flex-direction: row; gap: 11px; }
  .qo-pack { flex: 1 1 0; border-radius: 10px; }
  .qo-pack__badge { height: 22px; }
  .qo-pack__row { flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 8px 10px 14px; }
  .qo-pack__art { height: 58px; justify-content: center; }
  .qo-pack__art img { height: 56px; width: 56px; }
  .qo-pack__art img.qo-pack__art--sm { height: 40px; width: 40px; }
  .qo-pack__info { align-items: center; }
  .qo-pack__price { flex-direction: row; align-items: baseline; gap: 6px; }
  .qo-pack__now { font-size: 19px; line-height: 26px; }
  .qo-pack__was { font-size: 12px; line-height: 16px; }
}

/* gifts */
.qo-gifts { display: flex; flex-direction: column; gap: 9px; }
.qo-gift { display: flex; align-items: center; gap: 12px; padding: 10px; border: 2px solid var(--qo-rule); border-radius: 12px; background: var(--qo-white); }
.qo-gift--on { border-color: var(--qo-gold); }
.qo-gift__img { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 8px; background: var(--qo-cream); display: flex; align-items: center; justify-content: center; }
.qo-gift__img img { width: 54px; height: 54px; object-fit: contain; }
.qo-gift__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; }
.qo-gift__name { color: var(--qo-ruby); font-size: 14px; font-weight: 700; line-height: 19px; }
.qo-gift__with { color: var(--qo-soft); font-size: 12px; line-height: 17px; }
.qo-gift__tag { width: 48px; height: 20px; border-radius: 4px; display: flex; align-items: center; justify-content: center; background: var(--qo-blush); color: var(--qo-ruby); font-size: 10px; font-weight: 800; letter-spacing: 0.06em; line-height: 14px; }
.qo-gift--on .qo-gift__tag { background: var(--qo-gold); color: #17161A; }
.qo-gift__check { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 999px; border: 1.5px solid var(--qo-rule-2); background: var(--qo-white); display: flex; align-items: center; justify-content: center; }
.qo-gift--on .qo-gift__check { background: var(--qo-green); border-color: var(--qo-green); }
.qo-gift__check svg { display: none; }
.qo-gift--on .qo-gift__check svg { display: block; }
@media (min-width: 990px) {
  .qo-gifts { flex-direction: row; gap: 12px; }
  .qo-gift { flex: 1 1 0; padding: 12px; gap: 14px; }
  .qo-gift__img { width: 76px; height: 76px; flex-basis: 76px; }
  .qo-gift__img img { width: 64px; height: 64px; }
  .qo-gift__tag { width: 52px; height: 22px; font-size: 11px; }
}

/* delivery frequency */
.qo-freq { display: flex; flex-direction: column; gap: 9px; }
.qo-mode { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 2px solid var(--qo-rule); border-radius: 12px; background: var(--qo-white); cursor: pointer; }
.qo-mode--sub[data-on="true"] { border-color: var(--qo-ruby); background: var(--qo-blush); }
.qo-mode__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.qo-mode__left { display: flex; align-items: center; gap: 9px; }
.qo-radio { width: 18px; height: 18px; flex: 0 0 18px; border-radius: 999px; border: 2px solid var(--qo-rule-2); background: var(--qo-white); display: flex; align-items: center; justify-content: center; }
.qo-radio::after { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--qo-ruby); opacity: 0; }
[data-on="true"] > .qo-mode__top .qo-radio { border-color: var(--qo-ruby); }
[data-on="true"] > .qo-mode__top .qo-radio::after { opacity: 1; }
.qo-mode__name { font-size: 14px; font-weight: 500; line-height: 20px; }
.qo-mode--sub .qo-mode__name { color: var(--qo-ruby); font-size: 15px; font-weight: 700; line-height: 21px; }
.qo-mode__price { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.qo-mode__now { font-size: 16px; font-weight: 700; line-height: 21px; }
.qo-mode--sub .qo-mode__now { color: var(--qo-ruby); font-size: 18px; line-height: 23px; }
.qo-mode__pl { color: var(--qo-soft); font-size: 11px; line-height: 15px; }
.qo-mode__body { display: none; flex-direction: column; gap: 10px; }
.qo-mode--sub[data-on="true"] .qo-mode__body { display: flex; }
.qo-select { position: relative; height: 44px; border: 1px solid var(--qo-rule); border-radius: 10px; background: var(--qo-white); }
.qo-select select { appearance: none; -webkit-appearance: none; width: 100%; height: 100%; padding: 0 36px 0 14px; border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 500; color: var(--qo-ink); cursor: pointer; }
.qo-select svg { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.qo-mode__perks { display: flex; flex-direction: column; gap: 6px; }
.qo-mode__perks li { display: flex; align-items: center; gap: 8px; color: var(--qo-soft); font-size: 13px; line-height: 18px; }
.qo-mode__perks svg { flex: 0 0 auto; }
@media (min-width: 990px) {
  .qo-mode { padding: 16px 18px; border-radius: 14px; gap: 12px; }
  .qo-radio { width: 20px; height: 20px; flex-basis: 20px; } .qo-radio::after { width: 10px; height: 10px; }
  .qo-mode__name { font-size: 15px; line-height: 21px; }
  .qo-mode--sub .qo-mode__name { font-size: 16px; line-height: 22px; }
  .qo-mode__now { font-size: 17px; line-height: 22px; }
  .qo-mode--sub .qo-mode__now { font-size: 19px; line-height: 24px; }
  .qo-mode__pl { font-size: 12px; line-height: 16px; }
  .qo-select { height: 46px; } .qo-select select { font-size: 14px; padding-left: 16px; }
  .qo-mode__perks li { font-size: 14px; line-height: 19px; gap: 9px; }
}

/* CTAs */
.qo-ctas { display: flex; flex-direction: column; gap: 10px; padding-top: 2px; }
.qo-btn { display: flex; align-items: center; justify-content: center; height: 56px; border-radius: 999px; font-size: 16px; font-weight: 700; letter-spacing: 0.02em; line-height: 22px; width: 100%; transition: opacity .15s; }
.qo .qo-btn--solid, .qo .qo-btn--solid:disabled, .qo .qo-btn--solid:hover { background: var(--qo-ruby); color: var(--qo-white); border: 0; }
.qo .qo-btn--outline, .qo .qo-btn--outline:disabled, .qo .qo-btn--outline:hover { background: var(--qo-white); color: var(--qo-ruby); border: 2px solid var(--qo-ruby); }
.qo .qo-btn:disabled { opacity: .55; cursor: not-allowed; }
.qo .qo-btn:hover { opacity: .92; }
.qo .qo-add, .qo .qo-add:hover { background: var(--qo-white); color: var(--qo-ruby); }
.qo .qo-add[data-done="true"] { background: var(--qo-ruby); color: var(--qo-white); }
.qo-stock { display: flex; align-items: center; justify-content: center; gap: 14px; padding-top: 4px; flex-wrap: wrap; }
.qo-stock__in { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; line-height: 17px; }
.qo-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--qo-green); }
.qo-stock__eta { color: var(--qo-soft); font-size: 12px; line-height: 17px; }
.qo-assure { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.qo-assure li { display: flex; align-items: center; gap: 7px; color: var(--qo-soft); font-size: 12px; font-weight: 600; line-height: 17px; }
.qo-assure a { color: var(--qo-ruby); text-decoration: underline; display: inline-flex; align-items: center; gap: 6px; }
@media (min-width: 990px) {
  .qo-ctas { gap: 10px; padding-top: 8px; }
  .qo-btn { height: 58px; font-size: 17px; line-height: 23px; }
  .qo-stock__in, .qo-stock__eta, .qo-assure li { font-size: 13px; line-height: 18px; }
}

/* accordions */
.qo-acc { display: flex; flex-direction: column; padding-top: 8px; }
.qo-acc details { border-top: 1px solid var(--qo-rule); }
.qo-acc details:last-child { border-bottom: 1px solid var(--qo-rule); }
.qo-acc summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: 14px 0; color: var(--qo-ruby); font-size: 15px; font-weight: 600; line-height: 20px; cursor: pointer; }
.qo-acc summary::-webkit-details-marker { display: none; }
.qo-acc summary svg { flex: 0 0 auto; transition: transform .2s; }
.qo-acc details[open] summary svg { transform: rotate(45deg); }
.qo-acc__body { padding: 0 0 16px; color: var(--qo-ink); font-size: 14px; line-height: 22px; }
.qo-acc__body p { margin: 0 0 10px; } .qo-acc__body p:last-child { margin: 0; }
.qo-acc__body ul { list-style: disc; padding-left: 18px; margin: 0 0 10px; }
@media (min-width: 990px) { .qo-acc { padding-top: 26px; } }

/* badges row (desktop only) */
.qo-badges { display: none; }
@media (min-width: 990px) {
  .qo-badges { display: flex; justify-content: space-between; padding: 26px 0; }
  .qo-badges li { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600; line-height: 16px; }
}

/* pairs with */
.qo-pairs { background: var(--qo-cream); border-radius: var(--qo-radius); padding: 14px; display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.qo-pairs__title { color: var(--qo-ruby); font-size: 15px; font-weight: 700; line-height: 20px; }
.qo-pairs__row { display: flex; align-items: center; gap: 10px; }
.qo-pairs__arrow { width: 22px; height: 22px; flex: 0 0 22px; display: flex; align-items: center; justify-content: center; }
.qo-pairs__track { flex: 1 1 auto; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.qo-pairs__track::-webkit-scrollbar { display: none; }
.qo-pair { flex: 0 0 100%; scroll-snap-align: start; display: flex; align-items: center; gap: 12px; background: var(--qo-white); border-radius: 10px; padding: 12px 12px 12px 12px; min-height: 88px; }
.qo-pair__img { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 3px; background: var(--qo-cream); overflow: hidden; }
.qo-pair__img img { width: 100%; height: 100%; object-fit: contain; }
.qo-pair__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qo-pair__name { color: var(--qo-ruby); font-size: 13px; font-weight: 700; line-height: 18px; }
.qo-pair__sub { color: var(--qo-soft); font-size: 12px; line-height: 17px; }
.qo-pair__price { color: var(--qo-sunset); font-size: 14px; font-weight: 700; line-height: 19px; }
.qo-add { flex: 0 0 auto; height: 34px; min-width: 70px; padding: 0 12px; border-radius: 999px; border: 1.4px solid var(--qo-ruby); background: var(--qo-white); color: var(--qo-ruby); font-size: 11px; font-style: italic; font-weight: 800; letter-spacing: 0.03em; display: inline-flex; align-items: center; justify-content: center; }
.qo-add[data-done="true"] { background: var(--qo-ruby); color: var(--qo-white); }
@media (min-width: 990px) {
  .qo-pairs { padding: 20px; border-radius: 14px; margin-top: 0; }
  .qo-pair { min-height: 96px; gap: 16px; padding: 12px 16px 12px 14px; }
  .qo-pair__img { width: 68px; height: 68px; flex-basis: 68px; }
  .qo-pair__name { font-size: 14px; line-height: 19px; } .qo-pair__sub { font-size: 13px; line-height: 18px; } .qo-pair__price { font-size: 15px; line-height: 20px; }
  .qo-add { height: 36px; min-width: 78px; font-size: 13px; }
}

/* sticky bar (mobile) */
.qo-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 78px; padding: 0 16px; background: var(--qo-white); border-top: 1px solid var(--qo-rule); transform: translateY(110%); transition: transform .25s; padding-bottom: env(safe-area-inset-bottom); }
.qo-sticky[data-show="true"] { transform: translateY(0); }
.qo-sticky__info { display: flex; flex-direction: column; gap: 1px; }
.qo-sticky__label { color: var(--qo-soft); font-size: 11px; font-weight: 500; line-height: 15px; }
.qo-sticky__price { color: var(--qo-ruby); font-size: 17px; font-weight: 700; line-height: 23px; }
.qo-sticky .qo-btn { width: auto; flex: 1 1 auto; max-width: 222px; height: 52px; font-size: 15px; line-height: 20px; }
@media (min-width: 990px) { .qo-sticky { display: none; } }

/* ---------- comparison ---------- */
.qo-compare { border: 1.5px solid var(--qo-ruby); border-radius: 12px; overflow: hidden; background: var(--qo-white); }
.qo-compare__head { background: var(--qo-tan); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.qo-compare__title { color: var(--qo-ruby); font-size: 24px; font-weight: 800; line-height: 30px; }
.qo-compare__img { border-radius: 10px; overflow: hidden; background: #E8D9CC; aspect-ratio: 318 / 150; }
.qo-compare__img img { width: 100%; height: 100%; object-fit: cover; }
.qo-compare__pills { display: flex; align-items: center; justify-content: center; gap: 12px; }
.qo-pill { height: 28px; padding: 0 14px; border-radius: 999px; background: var(--qo-white); color: var(--qo-ruby); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; line-height: 28px; }
.qo-pill--muted { color: var(--qo-soft); }
.qo-compare__vs { color: var(--qo-ruby); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; }
.qo-compare__row { display: flex; align-items: center; border-top: 1px solid var(--qo-rule); padding: 12px 16px; }
.qo-compare__claim { flex: 1 1 auto; font-size: 13px; font-weight: 500; line-height: 18px; }
.qo-compare__cell { flex: 0 0 60px; display: flex; align-items: center; justify-content: center; }
@media (min-width: 990px) {
  .qo-compare { max-width: 1100px; margin: 0 auto; border-radius: 14px; }
  .qo-compare__head { flex-direction: row; align-items: center; justify-content: space-between; height: 320px; padding: 0 48px; }
  .qo-compare__title { font-size: 34px; line-height: 42px; letter-spacing: 0.01em; width: 440px; }
  .qo-compare__right { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 520px; }
  .qo-compare__img { width: 520px; height: 236px; aspect-ratio: auto; }
  .qo-pill { height: 30px; line-height: 30px; padding: 0 16px; font-size: 12px; }
  .qo-compare__vs { font-size: 12px; }
  .qo-compare__row { height: 62px; padding: 0 0 0 48px; }
  .qo-compare__claim { flex: 0 0 652px; font-size: 15px; line-height: 20px; }
  .qo-compare__cell { flex-basis: 200px; }
  .qo-compare__cell svg { transform: scale(1.25); }
}

/* ---------- how to ---------- */
.qo-steps { display: flex; flex-direction: column; gap: 16px; padding-top: 4px; }
.qo-step { display: flex; flex-direction: column; gap: 10px; }
.qo-step__img { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 358 / 240; background: var(--qo-cream); }
.qo-step__img img { width: 100%; height: 100%; object-fit: cover; }
.qo-step__num { position: absolute; left: 14px; bottom: 14px; width: 40px; height: 40px; border-radius: 999px; background: var(--qo-ruby); color: var(--qo-white); font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.qo-step__text { font-size: 15px; font-weight: 600; line-height: 21px; }
@media (min-width: 990px) {
  .qo-steps { flex-direction: row; gap: 24px; padding-top: 0; }
  .qo-step { flex: 1 1 0; gap: 14px; }
  .qo-step__img { aspect-ratio: 1 / 1; border-radius: 14px; }
  .qo-step__num { left: 18px; bottom: 18px; width: 44px; height: 44px; font-size: 20px; }
  .qo-step__text { font-size: 17px; line-height: 24px; }
}

/* ---------- real loads (UGC) ---------- */
.qo-ugc__title { color: var(--qo-ruby); font-size: 22px; font-weight: 700; line-height: 28px; text-align: center; }
.qo-ugc__track { display: flex; align-items: center; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 0; }
.qo-ugc__track::-webkit-scrollbar { display: none; }
.qo-ugc__card { position: relative; flex: 0 0 104px; width: 104px; height: 186px; border-radius: 8px; overflow: hidden; background: var(--qo-ink); scroll-snap-align: center; cursor: pointer; }
.qo-ugc__card--lead { flex-basis: 130px; width: 130px; height: 232px; border-radius: 10px; }
.qo-ugc__card video, .qo-ugc__card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qo-ugc__sound { position: absolute; left: 8px; bottom: 8px; width: 24px; height: 24px; border-radius: 999px; background: var(--qo-ink); display: flex; align-items: center; justify-content: center; }
.qo-ugc__sound svg { width: 10px; height: 10px; }
.qo-ugc__nav { display: flex; align-items: center; justify-content: center; gap: 18px; padding-top: 6px; }
.qo-ugc__nav button { width: 28px; height: 20px; display: flex; align-items: center; justify-content: center; }
@media (min-width: 990px) {
  .qo-ugc__title { font-size: 30px; line-height: 38px; }
  .qo-ugc__track { justify-content: center; gap: 16px; }
  .qo-ugc__card { flex-basis: 216px; width: 216px; height: 384px; border-radius: 10px; }
  .qo-ugc__card--lead { flex-basis: 256px; width: 256px; height: 456px; border-radius: 12px; }
  .qo-ugc__sound { width: 30px; height: 30px; left: 10px; bottom: 10px; } .qo-ugc__sound svg { width: 12px; height: 12px; }
}

/* ---------- FAQ ---------- */
.qo-faq { display: flex; flex-direction: column; gap: 16px; }
.qo-faq__list { border: 1px solid var(--qo-rule); border-radius: 12px; overflow: hidden; background: var(--qo-white); }
.qo-faq__item { border-bottom: 1px solid var(--qo-rule); }
.qo-faq__item:last-child { border-bottom: 0; }
.qo-faq__item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; font-size: 15px; font-weight: 600; line-height: 21px; cursor: pointer; }
.qo-faq__item summary::-webkit-details-marker { display: none; }
.qo-faq__item[open] summary { color: var(--qo-ruby); font-weight: 700; }
.qo-faq__item summary svg { flex: 0 0 auto; }
.qo-faq__item[open] summary svg path.qo-faq__v { display: none; }
.qo-faq__a { padding: 0 18px 18px; font-size: 14px; line-height: 22px; }
.qo-faq__a p { margin: 0 0 10px; } .qo-faq__a p:last-child { margin: 0; }
.qo-faq__a ul { margin: 10px 0 0; display: flex; flex-direction: column; gap: 4px; }
@media (min-width: 990px) {
  .qo-faq { flex-direction: row; align-items: flex-start; gap: 64px; }
  .qo-faq__head { flex: 0 0 400px; }
  .qo-faq__list { flex: 1 1 auto; border-radius: 14px; }
  .qo-faq__item summary { padding: 20px 24px; font-size: 16px; line-height: 22px; }
  .qo-faq__a { padding: 0 24px 22px; max-width: 768px; }
}

/* ---------- routine ---------- */
.qo-routine { display: flex; flex-direction: column; gap: 12px; }
.qo-rt { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--qo-cream); }
.qo-rt__img { width: 72px; height: 72px; flex: 0 0 72px; border-radius: 8px; background: var(--qo-white); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.qo-rt__img img { width: 60px; height: 60px; object-fit: contain; }
.qo-rt__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qo-rt__name { color: var(--qo-ruby); font-size: 13px; font-weight: 700; line-height: 18px; }
.qo-rt__sub { color: var(--qo-soft); font-size: 11px; line-height: 15px; }
.qo-rt__price { color: var(--qo-sunset); font-size: 14px; font-weight: 700; line-height: 19px; }
@media (min-width: 990px) {
  .qo-routine { flex-direction: row; gap: 24px; padding-top: 4px; }
  .qo-rt { flex: 1 1 0; flex-direction: column; align-items: stretch; gap: 14px; padding: 18px; border-radius: 14px; }
  .qo-rt__img { width: 100%; height: 280px; flex-basis: auto; border-radius: 10px; }
  .qo-rt__img img { width: 200px; height: 200px; }
  .qo-rt__name { font-size: 18px; line-height: 25px; } .qo-rt__sub { font-size: 14px; line-height: 21px; }
  .qo-rt__foot { display: flex; align-items: center; justify-content: space-between; }
  .qo-rt__price { font-size: 18px; line-height: 24px; }
  .qo-rt .qo-add { height: 40px; min-width: 96px; }
}

/* Klaviyo signup popup: suppressed on this template only (same fix as the landers) */
div[class*="kl-private-reset-css"] { display: none !important; }

/* ---------- reviews (live from Yotpo) ---------- */
.qo-reviews .qo-wrap { display: flex; flex-direction: column; gap: 16px; }
.qo-reviews__title { color: var(--qo-ruby); font-size: 24px; font-weight: 700; line-height: 30px; }
.qo-reviews__head { display: flex; flex-direction: column; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--qo-rule); }
.qo-reviews__h { font-size: 13px; font-weight: 600; line-height: 18px; margin-bottom: 8px; }
.qo-reviews__hint { color: var(--qo-soft); font-size: 12px; line-height: 17px; }
.qo-reviews__bars { display: flex; flex-direction: column; gap: 8px; }
.qo .qo-reviews__bar { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; }
.qo-reviews__bar-label { flex: 0 0 46px; font-size: 12px; line-height: 17px; }
.qo-reviews__bar-track { flex: 1 1 auto; height: 10px; border-radius: 999px; background: #F2EEE6; overflow: hidden; }
.qo-reviews__bar-fill { display: block; height: 10px; background: var(--qo-gold); transition: width .3s; }
.qo-reviews__bar-count { flex: 0 0 28px; color: var(--qo-soft); font-size: 11px; text-align: right; }
.qo-reviews__bar[aria-pressed="true"] .qo-reviews__bar-label { color: var(--qo-ruby); font-weight: 700; }
.qo-reviews__stars { display: flex; gap: 3px; } .qo-reviews__stars svg { width: 16px; height: 16px; }
.qo-reviews__stars--lg svg { width: 22px; height: 22px; }
.qo-reviews__overall { display: flex; flex-direction: column; gap: 6px; }
.qo-reviews__overall-text { font-size: 13px; font-weight: 600; line-height: 18px; }
.qo .qo-reviews__write-btn, .qo .qo-reviews__write-btn:hover { height: 38px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--qo-ruby); color: var(--qo-ruby); font-size: 12px; font-weight: 700; background: var(--qo-white); }
.qo-reviews__panel { border: 1px solid var(--qo-rule); border-radius: 12px; padding: 8px 12px; }
.qo-reviews__panel[hidden] { display: none; }
.qo-reviews__tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qo-reviews__sort { position: relative; display: inline-flex; align-items: center; height: 36px; border: 1px solid var(--qo-rule-2); border-radius: 6px; padding: 0 10px; }
.qo-reviews__sort select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; font: inherit; font-size: 12px; padding-right: 18px; color: var(--qo-ink); }
.qo-reviews__sort svg { position: absolute; right: 10px; pointer-events: none; }
.qo .qo-reviews__clear { color: var(--qo-ruby); font-size: 12px; font-weight: 600; text-decoration: underline; }
.qo-reviews__list { display: flex; flex-direction: column; border-top: 1px solid var(--qo-rule); }
.qo-reviews__row { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--qo-rule); }
.qo-reviews__who { display: flex; align-items: baseline; gap: 8px; order: 3; }
.qo-reviews__name { font-size: 12px; font-weight: 600; line-height: 17px; }
.qo-reviews__meta { color: var(--qo-soft); font-size: 11px; line-height: 15px; }
.qo-reviews__body { display: flex; flex-direction: column; gap: 6px; }
.qo-reviews__rtitle { color: var(--qo-ruby); font-size: 15px; font-weight: 700; line-height: 21px; }
.qo-reviews__text { font-size: 13px; line-height: 20px; }
.qo-reviews__imgs { display: flex; gap: 6px; flex-wrap: wrap; }
.qo-reviews__img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; }
.qo-reviews__empty { color: var(--qo-soft); font-size: 13px; padding: 14px 0; }
.qo .qo-reviews__more, .qo .qo-reviews__more:hover { height: 50px; border-radius: 999px; border: 1.5px solid var(--qo-ruby); color: var(--qo-ruby); font-size: 14px; font-weight: 700; width: 100%; background: var(--qo-white); }
.qo-reviews__more[hidden], .qo-reviews__empty[hidden], .qo-reviews__clear[hidden] { display: none; }
@media (min-width: 990px) {
  .qo-reviews .qo-wrap { gap: 24px; }
  .qo-reviews__title { font-size: 30px; line-height: 38px; }
  .qo-reviews__head { flex-direction: row; gap: 32px; padding-bottom: 24px; }
  .qo-reviews__snapshot, .qo-reviews__overall { flex: 0 0 400px; }
  .qo-reviews__write { flex: 1 1 auto; }
  .qo-reviews__h { font-size: 14px; line-height: 20px; }
  .qo-reviews__bar-track { flex: 0 0 240px; }
  .qo-reviews__row { flex-direction: row; gap: 32px; padding: 22px 0; }
  .qo-reviews__who { flex: 0 0 200px; flex-direction: column; gap: 4px; order: 0; }
  .qo-reviews__name { font-size: 13px; line-height: 18px; } .qo-reviews__meta { font-size: 12px; line-height: 17px; }
  .qo-reviews__body { flex: 1 1 auto; max-width: 760px; }
  .qo-reviews__rtitle { font-size: 17px; line-height: 24px; } .qo-reviews__text { font-size: 14px; line-height: 21px; }
  .qo-reviews__more { height: 56px; font-size: 15px; }
}

/* ---------- theme chrome on this template only: announcement bar, header, footer to the boards' values ---------- */
.announcement-bar.color-scheme { --background: 95 15 26 / 1.0; --background-without-opacity: 95 15 26; --text-color: 255 255 255; --accent: 255 255 255; --border-color: 95 15 26; background-color: #5F0F1A; color: #fff; }
.announcement-bar.color-scheme * { font-family: 'Poppins', system-ui, sans-serif; font-weight: 600; letter-spacing: 0.01em; }
.header.color-scheme { --text-color: 131 20 34; --accent: 131 20 34; --background: 255 255 255 / 1.0; --background-without-opacity: 255 255 255; --border-color: 239 226 218; background-color: #fff; color: #831422; }
.header.color-scheme .header__primary-nav a, .header.color-scheme .header__secondary-nav a, .header.color-scheme .header__primary-nav button { color: #831422; font-family: 'Poppins', system-ui, sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.header.color-scheme svg { color: #831422; }
.footer.color-scheme { --background: 253 246 241 / 1.0; --background-without-opacity: 253 246 241; --text-color: 28 28 28; --accent: 131 20 34; --border-color: 239 226 218; --button-background: 131 20 34; --button-text-color: 255 255 255; background-color: #FDF6F1; color: #1C1C1C; }
.footer.color-scheme .h6, .footer.color-scheme .footer__block .h6 { color: #831422; font-family: 'Poppins', system-ui, sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.footer.color-scheme a, .footer.color-scheme p, .footer.color-scheme li { color: #1C1C1C; font-family: 'Poppins', system-ui, sans-serif; font-size: 14px; line-height: 20px; letter-spacing: 0; text-transform: none; }
.footer.color-scheme .text-subdued, .footer.color-scheme .text-subdued p { color: #6B6660; }
.footer.color-scheme .input { background: #fff; border: 1px solid #DDD6C9; border-radius: 999px; color: #1C1C1C; }
.footer.color-scheme .floating-label { color: #A89F98; }
.footer.color-scheme .button { background: #831422; color: #fff; border-radius: 999px; font-family: 'Poppins', system-ui, sans-serif; font-weight: 700; letter-spacing: 0.03em; text-transform: none; }
.footer.color-scheme .footer__aside, .footer.color-scheme [class*="footer__aside"] { border-top: 1px solid #EFE2DA; }

/* badges row: four even slots, a filled circle behind each icon */
@media (min-width: 990px) {
  .qo .qo-badges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 30px 0 22px; }
  .qo .qo-badges li { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; line-height: 15px; min-width: 0; }
  .qo .qo-badges svg { width: 34px; height: 34px; flex: 0 0 34px; background: var(--qo-cream); border-radius: 999px; }
}