/*
 * MediBloom shop: product card, shop collections (/shop, /shop/{slug}),
 * the catalog listing block, and the product page.
 * Builds on base.css tokens; nothing here styles another area's markup.
 */

:root { --mb-card-teal: #098c97; --mb-price-teal: #128986; --mb-card-frame: linear-gradient(to right, #aaaaac 0%, #ebeced 23%, #c5e2e4 47%, #fff 71%, #ccc 100%); }

/* ------------------------------------------------------------------ product card */
.mb-card {
  position: relative; display: flex; flex-direction: column; align-items: center;
  min-width: 0; text-align: center;
  background: var(--mb-white); border-radius: 20px;
  box-shadow: 0 0 95px rgba(46, 105, 124, .18);
}
.mb-card[hidden] { display: none; }
.mb-card-link { display: flex; flex-direction: column; align-items: center; width: 100%; color: inherit; text-decoration: none; }
.mb-card-media { display: block; width: 100%; }
.mb-card-media img {
  display: block; width: 100%; height: auto; aspect-ratio: 445 / 449; object-fit: cover;
  padding: 5px; border-radius: 20px; background: var(--mb-card-frame);
}
/* Collection bands (the "extra" products): the bottle cut-out standing on
   the teal-and-silver studio set inside the silver frame, placed like the
   original shop photos (centred, ~71% tall, resting on the floor line). */
.mb-card-media {
  position: relative; aspect-ratio: 297 / 300; padding: 5px; border-radius: 20px;
  background: url("../img/shop/studio-bg.webp") center / cover content-box, var(--mb-card-frame);
  background-clip: content-box, border-box;
}
/* Sized by percentages of the frame so it scales at every width: a tall
   bottle is held by the 71% height, a wide jar (CBD Cream) by the 62% width. */
.mb-card-media img {
  position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%);
  width: 62%; height: 71%; padding: 0; border-radius: 0;
  aspect-ratio: auto; object-fit: contain; object-position: center bottom;
  background: none;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .35));
}
.mb-card-title {
  width: 100%; padding: 40px 15px 10px;
  font-family: var(--mb-font); font-size: 30px; font-weight: 800; line-height: 1.2;
  text-transform: uppercase; color: var(--mb-card-teal);
}
.mb-card-price {
  display: block; margin-bottom: 10px; padding: 0 10px;
  font-family: var(--mb-font); font-size: 20px; font-weight: 600; line-height: 1.5; color: var(--mb-card-teal);
}
.mb-card-action {
  display: inline-block; margin: 0 0 51px; padding: 0; border: 0; background: none;
  font-family: var(--mb-font); font-size: 20px; font-weight: 700; line-height: 1;
  text-transform: uppercase; text-decoration: underline; color: #0f1625; cursor: pointer;
}
.mb-card-action:hover { color: var(--mb-teal-strong); }
.mb-card-link:hover .mb-card-title { color: var(--mb-teal); }

@media (max-width: 1366px) { .mb-card-title { font-size: 28px; padding: 35px 10px 10px; } }
@media (max-width: 767px) {
  .mb-card-title { padding: 25px 10px 10px; font-size: 26px; }
  .mb-card-action { margin-bottom: 30px; }
}

/* ------------------------------------------------------------------ shop intro */
.mb-shop-intro { padding: 70px 0 60px; }
.mb-shop-intro-text {
  max-width: 1265px; margin-inline: auto; text-align: center;
  font-size: 26px; font-weight: 600; line-height: 1.5; color: var(--mb-grey);
}
@media (max-width: 767px) {
  .mb-shop-intro { padding: 30px 0; }
  .mb-shop-intro-text { font-size: 20px; }
}

/* ------------------------------------------------------------------ collection bands */
.mb-shop-bands { padding-bottom: 50px; }
.mb-collection {
  position: relative; padding: 120px var(--mb-gutter) 0;
  background: #d3d6d6; color: #000;
  overflow-x: clip; /* the photo bleeds 450px past the edge */
}
.mb-collection--dark { background: #080e1e; color: var(--mb-white); }
/* The photo bleeds past the edge on its side and stops 30% short of the other. */
.mb-collection-photo { position: absolute; inset: 0 30% auto -450px; height: min(100%, 844px); overflow: hidden; }
.mb-collection--right .mb-collection-photo { inset: 0 -450px auto 30%; }
.mb-collection-photo img { width: 100%; height: 100%; object-fit: cover; }
.mb-collection-inner {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  max-width: var(--mb-shell); margin-inline: auto;
}
.mb-collection-card { display: flex; flex-direction: column; gap: 60px; grid-column: 2; min-width: 0; }
.mb-collection--right .mb-collection-card { grid-column: 1; }
.mb-collection-copy { display: flex; flex-direction: column; gap: 10px; }
.mb-collection-title {
  font-family: var(--mb-font); font-size: var(--mb-fs-h2); font-weight: 500; line-height: 1;
  text-transform: uppercase; color: #3f6165;
}
.mb-collection--dark .mb-collection-title { color: var(--mb-white); }
.mb-collection-title .mb-teal { color: var(--mb-teal); }
.mb-collection-text { font-size: 18px; font-weight: 500; line-height: 1.5; letter-spacing: .75px; }
/* The cards hang 50px into the next band, over its top padding. */
.mb-collection-grid {
  position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 40px 35px;
  margin-bottom: -50px;
}
.mb-collection-empty {
  margin-bottom: 120px; padding: 24px; border-radius: 20px;
  background: rgba(255, 255, 255, .6); color: var(--mb-deep); font-weight: 500;
}
.mb-collection--dark .mb-collection-empty { background: rgba(255, 255, 255, .08); color: var(--mb-white); }

@media (max-width: 1024px) {
  .mb-collection { padding: 0 var(--mb-gutter) 80px; }
  .mb-collection-photo, .mb-collection--right .mb-collection-photo {
    position: static; inset: auto; height: auto; display: block; margin: 0 calc(-1 * var(--mb-gutter)) 24px;
  }
  .mb-collection-photo img { height: auto; aspect-ratio: 1734 / 743; }
  .mb-collection-inner { grid-template-columns: 1fr; max-width: 700px; }
  .mb-collection-card, .mb-collection--right .mb-collection-card { grid-column: 1; gap: 40px; }
  .mb-collection-grid { margin-bottom: 0; }
  .mb-collection-empty { margin-bottom: 0; }
}
@media (max-width: 767px) {
  .mb-collection-photo, .mb-collection--right .mb-collection-photo { margin-inline: 0; }
  .mb-collection-text { font-size: 16px; }
  .mb-collection-grid { grid-template-columns: 1fr; gap: 30px 20px; }
}

/* ------------------------------------------------------------------ catalog listing block */
.mb-products-hero { padding: 80px var(--mb-gutter) 24px; text-align: center; }
.mb-products-title { font-size: var(--mb-fs-h2); font-weight: 400; line-height: 1.1; text-transform: uppercase; color: var(--mb-deep); }
.mb-products-intro { max-width: 900px; margin: 16px auto 0; font-size: 18px; font-weight: 600; line-height: 1.5; color: var(--mb-grey); }
.mb-products-disclaimer { max-width: 900px; margin: 12px auto 0; font-size: 12px; color: var(--mb-muted); }
.mb-products-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-block: 24px; }
.mb-products-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.mb-chip {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 20px;
  border: 1px solid #adc8c0; border-radius: 50px; background: var(--mb-white);
  font-family: var(--mb-font-alt); font-size: 14px; font-weight: 600; text-transform: uppercase; color: var(--mb-deep);
}
.mb-chip:hover { border-color: var(--mb-teal); }
.mb-chip[aria-current="page"] { border-color: var(--mb-teal-strong); background: var(--mb-teal-strong); color: var(--mb-white); font-weight: 600; }
.mb-select, .mb-products-sort-select {
  min-height: 44px; padding: 8px 36px 8px 16px; border: 1px solid #adc8c0; border-radius: 10px;
  background: var(--mb-white); font-family: var(--mb-font-alt); font-size: 14px;
}
.mb-products-results { padding-bottom: 40px; }
.mb-products-grid, .mb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 35px; }
.mb-products-footer-row { display: flex; justify-content: center; padding-bottom: 80px; }
.mb-products-empty { padding: 40px 0; text-align: center; }
.mb-link { color: var(--mb-teal-strong); text-decoration: underline; }
@media (max-width: 1024px) { .mb-products-grid, .mb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .mb-products-grid, .mb-grid { grid-template-columns: 1fr; gap: 30px; } }

/* ------------------------------------------------------------------ product page */
.mb-pd-band {
  height: 520px;
  background: var(--mb-night) var(--mb-pd-band) 50% 100% / cover no-repeat;
}
.mb-pd { position: relative; z-index: 2; margin-top: -265px; padding: 0 var(--mb-gutter); }
.mb-pd-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 100px;
  max-width: var(--mb-shell); margin-inline: auto;
}
.mb-pd-left { display: flex; flex-direction: column; gap: 60px; min-width: 0; }
.mb-pd-right { display: flex; flex-direction: column; gap: 160px; min-width: 0; }

/* Gallery */
.mb-pd-gallery { display: flex; flex-direction: column; gap: 10px; }
/* Each photo is a bottle cut-out, staged on the studio set (like the shop
   cards): the frame carries the backdrop, the image is contained inside. */
.mb-pd-main {
  position: relative; aspect-ratio: 445 / 449; overflow: hidden; border-radius: 20px;
  background: url("../img/shop/studio-bg.webp") center / cover;
}
.mb-pd-main img {
  position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%);
  display: block; width: 70%; height: 80%; object-fit: contain; object-position: center bottom;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .4)); cursor: zoom-in;
}
.mb-pd-arrow {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--mb-deep);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .2); transition: background-color .2s ease, transform .2s ease;
}
.mb-pd-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.mb-pd-arrow--prev { left: 14px; }
.mb-pd-arrow--next { right: 14px; }
.mb-pd-counter {
  position: absolute; left: 15px; top: 15px;
  padding: 4px 12px; border-radius: 50px; background: rgba(14, 38, 41, .7); color: #fff;
  font-size: 12px; font-weight: 600; letter-spacing: .5px;
}
.mb-pd-zoom {
  position: absolute; top: 15px; right: 15px; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; background: var(--mb-white); color: #333; pointer-events: none;
}
.mb-pd-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.mb-pd-thumb {
  position: relative; aspect-ratio: 1; padding: 0; border: 2px solid transparent; border-radius: 14px; overflow: hidden;
  background: url("../img/shop/studio-bg.webp") center / cover; opacity: .75; transition: opacity .2s ease, border-color .2s ease;
}
.mb-pd-thumb:hover { opacity: 1; }
.mb-pd-thumb img {
  position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%);
  width: 70%; height: 80%; object-fit: contain; object-position: center bottom;
}
/* A square studio photo is the whole scene: it fills the frame, no staging. */
.mb-pd-main.is-photo img,
.mb-pd-thumb.is-photo img {
  inset: 0; transform: none; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: none;
}
.mb-pd-thumb[aria-pressed="true"] { opacity: 1; }
.mb-pd-thumb[aria-pressed="true"] { border-color: var(--mb-teal); }

/* Feature checklist (key benefits) */
.mb-pd-feats { display: flex; flex-direction: column; }
.mb-pd-feat { position: relative; display: flex; align-items: flex-start; gap: 30px; }
.mb-pd-feat + .mb-pd-feat { margin-top: 25px; padding-top: 25px; }
.mb-pd-feat + .mb-pd-feat::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--mb-rule-gradient);
}
.mb-pd-feat img { flex: none; width: 72px; height: auto; }
.mb-pd-feat span { padding-top: 8px; font-size: 23px; font-weight: 700; line-height: 1.5; letter-spacing: .75px; color: #000; }

/* Title block, on the dark band */
.mb-pd-head { display: flex; flex-direction: column; gap: 20px; min-height: 196px; }
.mb-pd-title {
  padding-bottom: 5px; font-family: var(--mb-font); font-size: var(--mb-fs-display); font-weight: 700; line-height: 1.12;
  text-transform: uppercase; color: var(--mb-white); overflow-wrap: anywhere;
}
.mb-pd-title.mb-rule { padding-bottom: 15px; }
.mb-pd-title--long { font-size: calc(var(--mb-fs-display) * .72); overflow-wrap: break-word; }
.mb-pd-sub {
  font-family: var(--mb-font-alt); font-size: 18px; font-weight: 500; line-height: 1.5; letter-spacing: 1px;
  text-transform: uppercase; color: var(--mb-white);
}

/* Buy box */
.mb-pd-buybox { display: flex; flex-direction: column; gap: 20px; max-width: 560px; }
.mb-pd-lede { font-size: 18px; line-height: 1.5; letter-spacing: .75px; color: #000; }
.mb-pd-lede p { margin: 0 0 12px; }
.mb-pd-price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.mb-pd-price { font-family: var(--mb-font); font-size: var(--mb-fs-h2); font-weight: 500; line-height: 1; color: var(--mb-price-teal); }
.mb-pd-price-note { font-size: 14px; color: var(--mb-grey); }
.mb-pd-price-note:empty { display: none; }
.mb-pd-buy { display: flex; flex-direction: column; gap: 14px; }
.mb-pd-options { margin: 0; padding: 0; border: 0; min-width: 0; }
.mb-pd-legend {
  float: none; width: auto; margin: 0 0 0 2px; padding: 0 0 10px;
  font-family: var(--mb-font); font-size: 30px; font-weight: 400; line-height: 1.2; letter-spacing: 0;
  text-transform: none; color: #144133;
}
.mb-pd-choices { display: flex; flex-wrap: wrap; gap: 14px 24px; }
.mb-pd-choices--stack { flex-direction: column; gap: 0; }
.mb-choice { position: relative; display: inline-flex; cursor: pointer; }
.mb-choice[hidden] { display: none; }
.mb-choice--wide { display: flex; width: 100%; }
.mb-choice + .mb-choice--wide { margin-top: -1px; }
.mb-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.mb-choice-box {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  width: 100%; min-height: 48px; padding: 13px 27px;
  border: 1px solid #adc8c0; background: var(--mb-white); color: #000;
  font-family: var(--mb-font-alt); font-size: 17px; line-height: 1.2; text-align: center; text-transform: uppercase;
  transition: background-color .2s, color .2s, border-color .2s;
}
.mb-choice--wide .mb-choice-box { text-transform: none; }
.mb-choice:hover .mb-choice-box { border-color: var(--mb-teal); }
.mb-choice input:checked + .mb-choice-box { position: relative; z-index: 1; border-color: var(--mb-teal-strong); background: var(--mb-teal-strong); color: var(--mb-white); }
.mb-choice input:focus-visible + .mb-choice-box { outline: 2px solid var(--mb-teal); outline-offset: 2px; }
.mb-choice input:disabled + .mb-choice-box { opacity: .5; cursor: not-allowed; }
.mb-plan-badge {
  display: inline-flex; padding: 2px 10px; border-radius: 50px;
  background: var(--mb-sky); color: var(--mb-night); font-size: 12px; font-weight: 700; text-transform: uppercase;
}

.mb-pd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding-top: 26px; }
.mb-pd-actions .mb-btn { gap: 46px; padding: 23px; font-size: 24px; text-transform: none; }
.mb-qty {
  display: inline-flex; align-items: center; height: 70px; padding: 0 6px;
  border: 1px solid #adc8c0; border-radius: 20px; background: var(--mb-white);
}
.mb-qty-btn {
  width: 44px; height: 44px; padding: 0; border: 0; background: none;
  font-size: 24px; line-height: 1; color: #144133;
}
.mb-qty-value { min-width: 32px; font: 600 18px/1 var(--mb-font); text-align: center; color: #000; }
.mb-pd-trust { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--mb-grey); }
.mb-pd-trust li::before { content: "✓ "; color: var(--mb-teal-strong); font-weight: 700; }

/* Customer quotes under the buy box, under a teal rule. */
.mb-pd-quotes { position: relative; padding-top: 78px; }
.mb-pd-quotes::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--mb-rule-gradient);
}

@media (max-width: 1366px) { .mb-pd-row { gap: 0 60px; } }
@media (max-width: 1024px) {
  .mb-pd-band { height: 395px; }
  .mb-pd { margin-top: -260px; }
  .mb-pd-row { display: flex; flex-direction: column; gap: 40px; max-width: 700px; }
  .mb-pd-left, .mb-pd-right { display: contents; }
  .mb-pd-gallery { order: 1; }
  .mb-pd-head { order: 2; min-height: 0; }
  .mb-pd-buybox { order: 3; max-width: none; }
  .mb-pd-ingredients { order: 4; }
  .mb-pd-quotes { order: 5; }
  .mb-pd-feats { order: 6; }
  .mb-pd-title, .mb-pd-sub { color: #000; }
  .mb-pd-feat { flex-direction: column; align-items: center; text-align: center; gap: 16px; }
  .mb-pd-feat span { padding-top: 0; font-size: 18px; }
}
@media (max-width: 767px) {
  .mb-pd-legend { font-size: 20px; }
  .mb-pd-choices { gap: 14px; }
  .mb-choice-box { font-size: 16px; padding: 12px 20px; }
  .mb-pd-actions { flex-direction: column; align-items: flex-start; padding-top: 16px; }
  .mb-pd-actions .mb-btn { padding: 15px 20px; font-size: 20px; gap: 25px; }
  .mb-pd-sub { font-size: 16px; }
  .mb-pd-lede { font-size: 16px; }
  .mb-pd-quotes { padding-top: 40px; }
  /* Three thumbnails across; more than three scroll sideways instead of wrapping. */
  .mb-pd-thumbs {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .mb-pd-thumbs::-webkit-scrollbar { display: none; }
  .mb-pd-thumb { flex: 0 0 calc((100% - 20px) / 3); scroll-snap-align: start; }
}

/* Detail tabs: description, supplement facts, reviews */
.mb-pd-tabs { padding-block: 100px 40px; }
.mb-tablist { display: flex; flex-wrap: wrap; gap: 8px 32px; border-bottom: 1px solid #d6d2cb; }
.mb-tab {
  margin-bottom: -1px; padding: 14px 0; border: 0; border-bottom: 3px solid transparent; background: none;
  font-family: var(--mb-font-alt); font-size: 16px; font-weight: 700; text-transform: uppercase; color: var(--mb-grey);
}
.mb-tab[aria-selected="true"] { border-bottom-color: var(--mb-teal-strong); color: var(--mb-deep); }
.mb-tabpanel { padding-top: 32px; font-size: 17px; line-height: 1.6; color: #222; }
.mb-tabpanel[hidden] { display: none; }
.mb-pd-prose > * + * { margin-top: 12px; }
.mb-pd-prose ul { list-style: disc; padding-left: 20px; }
.mb-pd-prose ol { list-style: decimal; padding-left: 20px; }
.mb-pd-h3 { margin: 28px 0 12px; font-size: 22px; font-weight: 600; color: var(--mb-deep); }
.mb-pd-benefits { display: grid; gap: 10px; }
.mb-pd-benefits li { display: flex; gap: 10px; align-items: flex-start; }
.mb-pd-benefits .mb-icon { flex: none; width: 18px; height: 18px; margin-top: 4px; color: var(--mb-teal-strong); }
.mb-pd-warnings { list-style: disc; padding-left: 20px; }
.mb-facts { max-width: 640px; }
.mb-facts-title { font-size: 26px; font-weight: 700; color: var(--mb-deep); }
.mb-facts-sub { margin: 6px 0 14px; color: var(--mb-grey); }
.mb-facts-box { border: 2px solid var(--mb-deep); border-radius: 12px; padding: 16px; background: var(--mb-white); }
.mb-table-scroll { overflow-x: auto; }
.mb-facts-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.mb-facts-table th, .mb-facts-table td { padding: 10px 8px; border-bottom: 1px solid #e3ded6; text-align: left; }
.mb-facts-table thead th { border-bottom: 3px solid var(--mb-deep); font-weight: 700; }
.mb-facts-table td { text-align: right; }
.mb-facts-foot, .mb-pd-label-note { margin-top: 12px; font-size: 13px; color: var(--mb-grey); }

/* Stars: grey row with a teal overlay clipped to the rating. */
.mb-stars { position: relative; display: inline-block; width: 5.5em; height: 1em; font-size: 18px; vertical-align: middle; }
.mb-stars::before, .mb-stars-fill {
  content: ""; position: absolute; inset: 0 auto 0 0; height: 1em;
  -webkit-mask: url("../img/icons/star-solid.svg") 0 0 / 1.1em 1em repeat-x; mask: url("../img/icons/star-solid.svg") 0 0 / 1.1em 1em repeat-x;
}
.mb-stars::before { width: 100%; background: #d6d2cb; }
.mb-stars-fill { display: block; background: #f5b301; }
.mb-stars-lg { font-size: 26px; }
.mb-stars-md { font-size: 16px; }
.mb-fill-0 { width: 0; } .mb-fill-2 { width: 2%; } .mb-fill-4 { width: 4%; } .mb-fill-6 { width: 6%; } .mb-fill-8 { width: 8%; }
.mb-fill-10 { width: 10%; } .mb-fill-12 { width: 12%; } .mb-fill-14 { width: 14%; } .mb-fill-16 { width: 16%; } .mb-fill-18 { width: 18%; }
.mb-fill-20 { width: 20%; } .mb-fill-22 { width: 22%; } .mb-fill-24 { width: 24%; } .mb-fill-26 { width: 26%; } .mb-fill-28 { width: 28%; }
.mb-fill-30 { width: 30%; } .mb-fill-32 { width: 32%; } .mb-fill-34 { width: 34%; } .mb-fill-36 { width: 36%; } .mb-fill-38 { width: 38%; }
.mb-fill-40 { width: 40%; } .mb-fill-42 { width: 42%; } .mb-fill-44 { width: 44%; } .mb-fill-46 { width: 46%; } .mb-fill-48 { width: 48%; }
.mb-fill-50 { width: 50%; } .mb-fill-52 { width: 52%; } .mb-fill-54 { width: 54%; } .mb-fill-56 { width: 56%; } .mb-fill-58 { width: 58%; }
.mb-fill-60 { width: 60%; } .mb-fill-62 { width: 62%; } .mb-fill-64 { width: 64%; } .mb-fill-66 { width: 66%; } .mb-fill-68 { width: 68%; }
.mb-fill-70 { width: 70%; } .mb-fill-72 { width: 72%; } .mb-fill-74 { width: 74%; } .mb-fill-76 { width: 76%; } .mb-fill-78 { width: 78%; }
.mb-fill-80 { width: 80%; } .mb-fill-82 { width: 82%; } .mb-fill-84 { width: 84%; } .mb-fill-86 { width: 86%; } .mb-fill-88 { width: 88%; }
.mb-fill-90 { width: 90%; } .mb-fill-92 { width: 92%; } .mb-fill-94 { width: 94%; } .mb-fill-96 { width: 96%; } .mb-fill-98 { width: 98%; }
.mb-fill-100 { width: 100%; }

.mb-rv-summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 32px; align-items: center; margin-bottom: 32px; padding: 24px; border-radius: 20px; background: var(--mb-white); }
.mb-rv-avg { font-size: 48px; font-weight: 600; line-height: 1; color: var(--mb-deep); }
.mb-rv-total { margin-top: 6px; font-size: 14px; color: var(--mb-grey); }
.mb-dist { display: grid; gap: 6px; }
.mb-dist-row { display: grid; grid-template-columns: 60px 1fr 44px; align-items: center; gap: 10px; font-size: 13px; }
.mb-dist-track { height: 8px; border-radius: 4px; background: #e7e3dc; overflow: hidden; }
.mb-dist-bar { display: block; height: 100%; background: var(--mb-teal-strong); }
.mb-rv-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.mb-rv-cta-title { font-weight: 600; color: var(--mb-deep); }
.mb-rv-cta .mb-btn, .mb-rv-more .mb-btn {
  gap: 0; padding: 12px 22px; font-size: 14px;
}
.mb-rv-cta .mb-btn::after, .mb-rv-more .mb-btn::after { display: none; }
.mb-rv-list { display: grid; gap: 16px; }
.mb-review { padding: 20px 24px; border-radius: 16px; background: var(--mb-white); }
.mb-review[hidden] { display: none; }
.mb-review-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; margin-bottom: 8px; }
.mb-review-name { font-weight: 600; color: var(--mb-deep); }
.mb-review-tag { font-size: 13px; color: var(--mb-grey); }
.mb-review-title { margin: 8px 0 4px; font-size: 17px; font-weight: 600; }
.mb-review-body { color: #333; }
.mb-rv-more { display: flex; justify-content: center; margin-top: 20px; }
@media (max-width: 767px) {
  .mb-rv-summary { grid-template-columns: 1fr; text-align: center; }
  .mb-rv-score, .mb-rv-cta { align-items: center; justify-items: center; }
  .mb-rv-cta { align-items: center; }
}

/* Product FAQ (the product's own group) */
.mb-pd-faq { padding: 40px 0; }
.mb-pd-faq .mb-shell { max-width: 900px; }
.mb-pd-faq-title { margin-bottom: 30px; font-size: var(--mb-fs-h2); font-weight: 400; line-height: 1.1; text-transform: uppercase; color: var(--mb-deep); }

/* You may also like */
.mb-pd-related { padding: 60px 0 80px; }
.mb-pd-related-title, .mb-pd-cats-title {
  margin-bottom: 50px; text-align: center;
  font-family: var(--mb-font); font-size: var(--mb-fs-display); font-weight: 400; line-height: 1.12;
  text-transform: uppercase; color: var(--mb-deep);
}
.mb-pd-related-title { font-size: var(--mb-fs-h2); }
.mb-pd-related-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 30px; }
.mb-pd-related-grid .mb-card-title { font-size: 22px; padding: 28px 10px 8px; }
.mb-pd-related-grid .mb-card-price, .mb-pd-related-grid .mb-card-action { font-size: 17px; }
.mb-pd-related-grid .mb-card-action { margin-bottom: 30px; }
@media (max-width: 1024px) { .mb-pd-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .mb-pd-related-grid { grid-template-columns: 1fr; } }

/* The home category cards, headed here; their press row is home-only. */
.mb-pd-cats { padding-top: 80px; }
.mb-pd-cats-title { margin-bottom: 0; padding-inline: var(--mb-gutter); }
.mb-pd-cats .mb-press { display: none; }
.mb-pd-cats .mb-collections { margin-top: 0; padding-top: 50px; background: none; }
@media (max-width: 767px) { .mb-qty { height: 56px; border-radius: 16px; } }

/* ------------------------------------------------------------------ shop flagships (shop-mains) */
/* Deep teal band with soft glows, one glass card per collection flagship. */
.mb-mains {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 96px 0 104px;
  color: var(--mb-white);
  background:
    radial-gradient(55% 70% at 12% 0%, rgba(62, 177, 176, .38), transparent 62%),
    radial-gradient(45% 60% at 100% 100%, rgba(163, 205, 212, .22), transparent 60%),
    linear-gradient(160deg, #0e2629 0%, #143a40 52%, #0a1c1f 100%);
}
/* Silver hairlines framing the band. */
.mb-mains::before, .mb-mains::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px;
  background: var(--mb-silver); opacity: .7;
}
.mb-mains::before { top: 0; }
.mb-mains::after { bottom: 0; }

.mb-mains-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.mb-mains-eyebrow {
  margin-bottom: 14px; font-family: var(--mb-font-alt); font-size: 14px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; color: var(--mb-sky);
}
.mb-mains-title {
  font-size: var(--mb-fs-h2); font-weight: 500; line-height: 1.08; text-transform: uppercase; color: var(--mb-white);
}
.mb-mains-lead { margin-top: 18px; font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .72); }

.mb-mains-grid {
  display: grid; gap: 24px;
  grid-template-columns: repeat(min(var(--mb-mains-count, 4), 4), minmax(0, 1fr));
}
.mb-main { min-width: 0; }
.mb-main-link {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 22px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.mb-main-link:hover, .mb-main-link:focus-visible {
  transform: translateY(-6px); border-color: rgba(163, 205, 212, .45);
  box-shadow: 0 26px 50px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .24);
}
.mb-main-media { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #0b2124; }
.mb-main-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.mb-main-link:hover .mb-main-media img { transform: scale(1.05); }
/* Pair shot: the smaller count on the left, smaller and in front, just
   overlapping the larger count, which stands bigger on the right. Sized in
   percentages of the frame so the staging holds at every width. */
.mb-main-media--pair { background: var(--mb-pair-bg, url("../img/shop/studio-bg.webp")) center / cover; }
.mb-main-media--pair .mb-main-bottle {
  position: absolute; width: auto; max-width: 46%;
  object-fit: contain; object-position: center bottom;
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .4));
}
.mb-main-media--pair .mb-main-bottle--front { left: 13%; bottom: 8%; height: 70%; z-index: 2; }
.mb-main-media--pair .mb-main-bottle--back { right: 10%; bottom: 10%; height: 76%; z-index: 1; }
.mb-main-link:hover .mb-main-media--pair .mb-main-bottle { transform: none; }
.mb-main-link:hover .mb-main-media--pair .mb-main-bottle--front { transform: translateY(-4px); }
.mb-main-chip {
  position: absolute; left: 14px; top: 14px; padding: 6px 12px; border-radius: 50px;
  background: var(--mb-silver); color: var(--mb-ink);
  font-family: var(--mb-font-alt); font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
}
.mb-main-body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 22px 22px 24px; }
.mb-main-name { font-size: 22px; font-weight: 700; line-height: 1.2; text-transform: uppercase; color: var(--mb-white); }
.mb-main-line {
  font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .66);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mb-main-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; }
.mb-main-price { font-size: 16px; font-weight: 600; white-space: nowrap; color: var(--mb-sky); }
.mb-main-cta {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  padding: 10px 16px; border-radius: 12px; background: var(--mb-silver); color: var(--mb-ink);
  font-family: var(--mb-font-alt); font-size: 13px; font-weight: 700; text-transform: uppercase;
}
.mb-main-cta::after { content: ""; width: 7px; height: 11px; background: url("../img/brand/btn-arrow.png") center / 100% no-repeat; }

@media (max-width: 1200px) {
  .mb-main-name { font-size: 19px; }
}
@media (max-width: 1024px) {
  .mb-mains { padding: 72px 0 80px; }
  .mb-mains-grid { grid-template-columns: repeat(min(var(--mb-mains-count, 4), 2), minmax(0, 1fr)); }
}
/* Phones: a swipeable row with the next card peeking in. */
@media (max-width: 640px) {
  .mb-mains { padding: 56px 0 64px; }
  .mb-mains-head { margin-bottom: 32px; }
  .mb-mains-lead { font-size: 16px; }
  .mb-mains-grid {
    display: flex; gap: 14px; margin-inline: calc(-1 * var(--mb-gutter)); padding: 4px var(--mb-gutter) 18px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .mb-mains-grid::-webkit-scrollbar { display: none; }
  .mb-main { flex: 0 0 78%; scroll-snap-align: center; }
  .mb-main:only-child { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .mb-main-link, .mb-main-media img { transition: none; }
}

/* ------------------------------------------------------------------ category page: flagship in focus */
.mb-mains--single { padding: 88px 0; }
.mb-feature {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center;
}
.mb-feature-media { display: block; }
.mb-feature-media .mb-main-media {
  border-radius: 26px; overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .38), 0 0 0 1px rgba(255, 255, 255, .14);
}
.mb-feature-body { display: flex; flex-direction: column; gap: 18px; }
.mb-feature-body .mb-mains-eyebrow { margin-bottom: 0; }
.mb-feature-name {
  font-size: var(--mb-fs-h2); font-weight: 700; line-height: 1.05; text-transform: uppercase; color: var(--mb-white);
}
.mb-feature-line { font-family: var(--mb-font-alt); font-size: 18px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--mb-sky); }
.mb-feature-text { font-size: 17px; line-height: 1.7; color: rgba(255, 255, 255, .78); }
.mb-feature-text p + p { margin-top: .8em; }
.mb-feature-points { display: grid; gap: 10px; }
.mb-feature-points li {
  position: relative; padding-left: 30px; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .88);
}
.mb-feature-points li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 18px; height: 18px; border-radius: 50%;
  background: var(--mb-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.mb-feature-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 32px; margin-top: 10px; }
.mb-feature-price { font-size: 28px; font-weight: 700; color: var(--mb-sky); white-space: nowrap; }

@media (max-width: 1024px) {
  .mb-feature { gap: 40px; }
  .mb-feature-name { font-size: 40px; }
}
@media (max-width: 767px) {
  .mb-mains--single { padding: 56px 0 64px; }
  .mb-feature { grid-template-columns: 1fr; gap: 32px; }
  .mb-feature-name { font-size: 32px; }
  .mb-feature-line { font-size: 15px; }
  .mb-feature-price { font-size: 24px; }
}

/* Bottle count choices (split variants): compact square-ish boxes. */
.mb-pd-choices--count .mb-choice-box { min-width: 64px; justify-content: center; text-align: center; }
.mb-choice.is-unavailable { opacity: .35; }
.mb-choice.is-unavailable .mb-choice-box { cursor: not-allowed; text-decoration: line-through; }

/* The size + bottle pickers sit in one wrapper; space them like the buy box rows. */
.mb-pd-buy [data-variant-picker] { display: flex; flex-direction: column; gap: inherit; }

/* Description (no tabs) and the supplement facts beside the buy box. */
.mb-pd-desc { padding-top: 64px; padding-bottom: 24px; }
.mb-pd-desc-title {
  margin-bottom: 18px; font-size: 32px; font-weight: 500; line-height: 1.1; text-transform: uppercase; color: var(--mb-deep);
}
.mb-pd-desc .mb-pd-prose { max-width: 980px; font-size: 16px; line-height: 1.7; }
.mb-pd-ingredients { margin-top: 8px; }
@media (max-width: 767px) { .mb-pd-desc { padding-top: 40px; } .mb-pd-desc-title { font-size: 26px; } }