/* Adonia Beauty Box — refreshed look, mobile-first. Functional classes (used by JS) are preserved: .plus/.minus/.disabled, .active, .no-no, .fix-it, .interval, .step, .input-cnt, .products_listed, .empty__state, .box-cnt, .freq-update, .live-region, .select-summary, .bb__step-1/2/3, .bb__stepp, .bb__steps, .loading-div, .bb__screens, #step__3, .back-to-box, .back-to-prods, .next-btn, #send__cart. */

.bb__boxes{
  --ao-ink:#221A26;
  --ao-rose:#D6296F;
  --ao-rose-deep:#A61C56;
  --ao-blush:#FBE9F0;
  --ao-cream:#FBF8F5;
  --ao-gold:#D9A441;
  --ao-gold-deep:#B8862E;
  --ao-line:#E7DFE0;
  --ao-radius:14px;
  color:var(--ao-ink);
}

.card__badge{display:none}
.bb__step-2,.bb__step-3{display:none}

/* ---------- Title / benefits ---------- */
.bb__title{text-align:center}
.bb__title h1{margin-bottom:6px;font-size:clamp(26px,5vw,38px);letter-spacing:-0.01em}
.bb__title small{display:block;font-size:1.6rem;font-weight:500;color:var(--ao-rose);margin-top:4px}
.bb__title h2{font-weight:400;font-size:2rem}
.bb__intro{display:none}

.bb__benefits{text-align:center;margin:18px 0 28px}
.bb__benefits ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
.bb__benefits ul li{list-style:none;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;font-size:13.5px;color:var(--ao-ink);background:var(--ao-blush);border-radius:999px;font-family:var(--font-heading-family)}
.bb__benefits ul li:before{content:' ';width:16px;height:16px;display:inline-block;background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xMiAwYzYuNjIzIDAgMTIgNS4zNzcgMTIgMTJzLTUuMzc3IDEyLTEyIDEyLTEyLTUuMzc3LTEyLTEyIDUuMzc3LTEyIDEyLTEyem0wIDFjNi4wNzEgMCAxMSA0LjkyOSAxMSAxMXMtNC45MjkgMTEtMTEgMTEtMTEtNC45MjktMTEtMTEgNC45MjktMTEgMTEtMTF6bTcgNy40NTdsLTkuMDA1IDkuNTY1LTQuOTk1LTUuODY1Ljc2MS0uNjQ5IDQuMjcxIDUuMDE2IDguMjQtOC43NTIuNzI4LjY4NXoiLz48L3N2Zz4=');background-repeat:no-repeat;background-size:contain;filter:invert(16%) sepia(58%) saturate(4000%) hue-rotate(316deg) brightness(85%)}

/* ---------- Progress track ---------- */
.bb__steps{margin-bottom:32px}
.steps{display:flex;justify-content:center;align-items:flex-start;width:100%;max-width:460px;margin:0 auto;position:relative}
.steps::before{content:'';position:absolute;top:15px;left:15%;right:15%;height:2px;background:var(--ao-line);z-index:0}
.steps .step{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;background:none;padding:0;font-weight:500;position:relative;z-index:1}
.steps .step .step-num{width:30px;height:30px;border-radius:50%;background:#fff;border:2px solid var(--ao-line);color:#8a8087;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;transition:background .2s,border-color .2s,color .2s}
.steps .step .step-label{font-size:12.5px;color:#8a8087;font-family:var(--font-heading-family)}
.steps .step.active .step-num{background:var(--ao-rose);border-color:var(--ao-rose);color:#fff}
.steps .step.active .step-label{color:var(--ao-ink);font-weight:600}
.steps .step:not(.active):not(.no-no) .step-num{border-color:var(--ao-rose-deep);color:var(--ao-rose-deep)}
.step:not(.active):not(.no-no){cursor:pointer}
.no-no{cursor:not-allowed}

/* ---------- Layout shell ---------- */
.bb__boxes.page-width{margin:0 auto}
@media (min-width:1401px){.bb__boxes.page-width{max-width:1100px}}
@media (max-width:1400px) and (min-width:1100px){.bb__boxes.page-width{max-width:90%}}
@media (max-width:1099px) and (min-width:750px){.bb__boxes.page-width{max-width:95%}}
@media (max-width:749px){.bb__boxes.page-width{max-width:96%}}

.next-btn svg{width:14px;height:14px;display:inline;vertical-align:middle}

/* ---------- Step 1: box type cards ---------- */
@media screen and (min-width:749px){.bb__options{display:flex;gap:24px;align-items:stretch}}
.bb__options .box{flex:1;text-align:left;border:1px solid var(--ao-line);border-radius:var(--ao-radius);overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:box-shadow .2s,border-color .2s}
.bb__options .box:hover{border-color:var(--ao-rose);box-shadow:0 8px 24px rgba(34,26,38,.08)}
.box-media{position:relative}
.box-media img{width:100%;display:block}
.box-save-pill{position:absolute;top:12px;left:12px;background:var(--ao-gold);color:#fff;font-size:12px;font-weight:700;letter-spacing:.03em;padding:5px 11px;border-radius:999px;text-transform:uppercase}
.box-body{padding:20px 20px 24px;display:flex;flex-direction:column;flex:1}
.bb__options .box h4{text-transform:none;font-family:var(--font-bold);font-size:21px;margin:0 0 2px;color:var(--ao-ink)}
.box-sub{margin:0 0 10px;font-size:14px;color:var(--ao-rose);font-weight:600}
.box-desc{flex:1}
.box-desc p{margin:0 0 16px;font-size:14px;line-height:1.6;color:#5c5560;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.bb__price{margin-bottom:16px;line-height:normal;display:flex;align-items:baseline;gap:10px}
.bb__price .orig_price{font-size:1.5rem;color:#a79fa4;font-weight:400;text-decoration:line-through}
.bb__price .new_price{font-size:22px;color:var(--ao-ink);font-family:var(--font-bold);font-weight:600}
.bb__options button.next-btn{background:var(--ao-ink);color:#fff;border:0;border-radius:999px;padding:14px 22px;text-transform:none;line-height:1;font-size:15px;font-weight:600;letter-spacing:normal;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:auto}
.bb__options button.next-btn:hover{background:var(--ao-rose-deep)}

/* ---------- Step 2: product grid ---------- */
.products-contain{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card__media img{width:100%;height:auto;border-radius:10px 10px 0 0}
.bb__products-layout{display:grid;grid-template-columns:1fr 220px;gap:24px;align-items:start}

.product-select .card{text-align:center;padding:0;border:1px solid var(--ao-line);border-radius:var(--ao-radius);background:#fff;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.product-select .card__content{padding:14px 14px 16px}
.product-select.is-selected .card{border-color:var(--ao-rose);box-shadow:0 0 0 2px var(--ao-blush)}
.product-select .card .card__heading{margin:0 0 2px;text-transform:none;font-weight:600;font-size:14.5px;line-height:1.3}
.product-select .card .card__sub{display:block;font-size:11.5px;color:var(--ao-rose);font-weight:600;margin-bottom:4px}
.product-select .card .card__description p{font-weight:400;font-style:normal;font-size:12.5px;letter-spacing:normal;color:#8a8087;line-height:1.4;max-width:none;margin:0 0 8px}
.rating{margin-top:2px}
.rating-text,.rating-count{font-size:11px;color:#8a8087}

.input-number{display:grid;grid-template-columns:40px 1fr 40px;max-width:none;width:100%;margin:10px 0 6px;position:relative; gap: 5px;}
.input-number .minus,.input-number .plus{width:40px;height:40px;background:#ffd3e4;border-radius:50%;border:1px solid #d5aebe; display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ao-rose-deep)}
.input-number .minus svg,.input-number .plus svg{width:14px;height:14px;display:inline-block}
.input-number .minus.disabled,.input-number .plus.disabled{opacity:.4;cursor:not-allowed}
.input-number input{height:36px;width:100%;text-align:center;font-size:15px;font-weight:600;border:1px solid var(--ao-line);border-radius:8px;display:inline-block;vertical-align:middle;-moz-appearance:textfield;line-height:36px;color:var(--ao-ink)}
@media (max-width:749px){
  .input-number{grid-template-columns:44px 1fr 44px}
  .input-number .minus,.input-number .plus{width:44px;height:44px}
  .input-number input{height:44px;line-height:44px}
}
.input-number.sold-out{opacity:.55}
.input-number.sold-out input{background:#f4f2f1;cursor:not-allowed}
.card--sold-out .card__media img{filter:grayscale(1);opacity:.55}
.sold-out-label{color:#a11d3f;font-weight:700;font-size:12px;letter-spacing:.02em;margin:2px 0 0}

.orig_price{font-size:11.5px;color:#a79fa4;display:block;margin-top:2px}

/* ---------- Sticky / floating summary ---------- */
.select-summary{position:relative}
.select-summary .live-region{border:1px solid var(--ao-line);border-radius:var(--ao-radius);padding:18px;text-align:center;top:16px;background:#fff}
.select-summary .live-region.fix-it{position:fixed}
.products_listed h5{text-transform:none;font-weight:600;letter-spacing:normal;font-size:13px;margin:0 0 10px;color:#8a8087}
.empty__state{font-size:14px;line-height:1.5;color:var(--ao-ink);margin:0 0 14px}
.empty__state .box-cnt{color:var(--ao-rose)}
#step__3{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:black;font-size:15px;text-transform:none;font-weight:600;color:#fff;letter-spacing:normal;border:0;border-radius:999px;padding:14px;line-height:1;cursor:pointer}
#step__3 svg{width:16px;height:16px;color:#fff}
#step__3:disabled{background:#efeaec;color:#b3a9ae;cursor:not-allowed}
#step__3:hover:not(:disabled){background:var(--ao-rose-deep)}
.back-to-box,.back-to-prods{margin-top:10px;color:#8a8087;font-size:13px}

.prod-list{display:grid;grid-template-columns:34px 1fr;gap:8px;border:1px solid var(--ao-line);border-radius:10px;padding:6px 8px;position:relative;margin-bottom:8px;align-items:center;text-align:left}
.prod-list img{border-radius:6px}
.prod-list .details{font-size:12px;color:var(--ao-ink);line-height:1.3}
.prod-list .cntr{position:absolute;width:20px;height:20px;line-height:20px;font-size:11px;border-radius:50%;background:var(--ao-rose);color:#fff;bottom:-4px;right:-4px; text-align: center;}
@media (max-width:749px),(max-width:1099px) and (min-width:750px){
  .prod-list{grid-template-columns:1fr;padding:0;border:0}
  .prod-list .details{display:none}
}
.products_listed{margin-bottom:12px}
@media (max-width:749px),(max-width:1099px) and (min-width:750px){
  .products_listed{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
  .products_listed h5{display:none}
}
@media (max-width:1099px) and (min-width:750px){.products_listed{grid-template-columns:repeat(5,1fr)}}

/* ---------- Step 3: frequency ---------- */
.bb__freq{background:var(--ao-cream);border:1px solid var(--ao-line);border-radius:var(--ao-radius);padding:28px 20px;text-align:center;margin-bottom:50px}
.bb__freq h4{font-size:19px;letter-spacing:normal;font-weight:600;margin:0 0 20px}
.bb__freq h4 small{display:block;font-family:inherit;font-style:normal;font-weight:400;font-size:14px;color:#8a8087;margin-top:4px}
.bb__freq .intervals{display:grid;max-width:480px;grid-template-columns:repeat(4,1fr);gap:6px;margin:0 auto;background:#fff;border:1px solid var(--ao-line);border-radius:999px;padding:5px}
.bb__freq .intervals .interval{font-size:15px;color:var(--ao-ink);padding:10px 6px;background:transparent;border:0;border-radius:999px;line-height:1.2}
.bb__freq .intervals .interval small{display:block;font-size:11px;color:#8a8087;line-height:normal}
.bb__freq .intervals .interval.active{background:var(--ao-rose);color:#fff}
.bb__freq .intervals .interval.active small{color:#fbdce9}
.bb__freq .intervals .interval:hover{cursor:pointer}
.bb__freq .description p{font-size:14.5px;letter-spacing:normal;color:var(--ao-ink);margin-top:20px}
.bb__freq .description p .freq-update{font-weight:700;color:var(--ao-rose);text-decoration:none}
.bb__freq button{border-radius:999px;padding:15px 28px;background:var(--ao-ink);border:none;color:#fff;font-size:14px;text-transform:none;cursor:pointer;font-weight:600;letter-spacing:normal;display:inline-flex;align-items:center;gap:8px;margin-top:20px}
.bb__freq button:hover{background:var(--ao-rose-deep)}
.bb__freq button svg{width:13px;height:13px;color:#fff}
div#prod__summary{display:flex;max-width:320px;gap:8px;align-items:center;justify-content:center;margin:16px auto 0;flex-wrap:wrap}
div#prod__summary .prod-list{grid:none;border:0;padding:0}
div#prod__summary .prod-list .details{display:none}
div#prod__summary .prod-list img{max-height:64px;border-radius:8px}

/* ---------- Screens / loading ---------- */
.bb__screens{position:relative;height:auto;min-height:400px;margin-bottom:50px}
.loading-div{display:none;background:var(--ao-cream);text-align:center;padding:60px 20px;position:absolute;z-index:9999;width:100%;top:0;left:0;border-radius:var(--ao-radius)}
.loading-div .txt{font-size:18px;color:var(--ao-ink);margin-bottom:16px;font-weight:600}
.loading-div .spinners{width:110px;height:110px;background:#fff;border-radius:50%;padding-top:20px;margin:0 auto;border:1px solid var(--ao-rose)}
.loading-div .txt2{font-size:15px;margin-top:16px;letter-spacing:normal;color:var(--ao-rose-deep)}

.fake-link{font-size:13px;display:block;text-align:center;padding:10px;font-weight:500;text-transform:none;color:var(--ao-ink)}
.fake-link svg{width:12px;height:12px;vertical-align:middle}
.fake-link:hover{text-decoration:underline}

p.lead{text-align:center;color:#5c5560;font-size:15px}
@media (min-width:750px){p.lead{max-width:90%;margin:10px auto}}

/* ---------- Mobile-specific ---------- */
@media (max-width:749px),(max-width:1099px) and (min-width:750px){
  .hide-on-mobile{display:none}
  .show-on-mobile{display:block}
  .bb__benefits{margin-bottom:18px}
  .bb__title{text-align:center;padding-top:6px}
  .bb__title h1{margin-top:0}
  .bb__title h1 small{max-width:90%;margin:0 auto}
  .products-contain{grid-template-columns:repeat(2,1fr)}
  .bb__products-layout{display:block;position:relative;padding-bottom:110px}
  .select-summary.js-floating{position:fixed;width:92%;left:4%;right:4%;bottom:12px;z-index:50;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;will-change:transform}
  .select-summary.js-floating .live-region{padding:12px 16px;box-shadow:0 8px 30px rgba(34,26,38,.18)}
  .select-summary.js-floating .live-region .products_listed{display:none}
  .empty__state{font-size:13px;margin-bottom:10px}
  .empty__state .hide-on-mobile{display:none}
  #step__3{min-height:48px}
}
@media (max-width:1099px) and (min-width:750px){
  .products-contain{grid-template-columns:repeat(3,1fr);gap:10px}
  .select-summary.js-floating{max-width:80%;left:10%;right:10%}
}