/**
 * MHM2-710 — "Customise Your Product" tab redesign (Claude Design 2a).
 * Scoped under .mb-cust (built by pdp-customise-2a.js). Overrides the legacy
 * dark Itoris DPO layout with the clean 2-column step-card + sidebar design.
 * Tokens shared with pdp-tabs-2a.css: Manrope, orange #ef7622.
 */
.mb-cust{
  --mbc-orange:#ef7622; --mbc-orange-dk:#c85a17; --mbc-ink:#16202b; --mbc-body:#4c565f;
  --mbc-muted:#828b93; --mbc-line:#e7e2d9; --mbc-surface:#faf8f4;
  font-family:Manrope,system-ui,sans-serif;color:var(--mbc-body);
  display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:26px;align-items:start;
}
.mb-cust *{box-sizing:border-box}
.mb-cust .mb-hidden{display:none !important}
/* When the Customise tab is active, unstick the site header so the sticky
   configurator sidebar isn't hidden behind it. Other tabs keep the sticky header. */
body.mb-cust-tab-active .page-header.sticky{position:static !important;top:auto !important;box-shadow:none !important}
.mb-cust__main{min-width:0;display:flex;flex-direction:column}
.mb-cust__main > *{margin-bottom:18px}
.mb-cust__main > *:last-child{margin-bottom:0}
.mb-cust__side{position:sticky;top:20px;display:flex;flex-direction:column;gap:16px;min-width:0}

/* ---- Step cards (each Itoris .fieldset section) ---- */
.mb-cust #itoris_dynamicproductoptions{counter-reset:mbstep;display:flex;flex-direction:column;background:none;border:none;padding:0;margin:0}
.mb-cust #itoris_dynamicproductoptions > *{margin-bottom:18px}
.mb-cust #itoris_dynamicproductoptions > *:last-child{margin-bottom:0}
.mb-cust .mb-cust__step{
  counter-increment:mbstep;
  background:#fff;border:1px solid var(--mbc-line) !important;border-radius:16px !important;
  padding:22px 24px;margin:0;position:relative;
}
/* neutralise the legacy dark Itoris section chrome */
.mb-cust .mb-cust__step,
.mb-cust .mb-cust__step .fieldset{background:#fff !important;color:var(--mbc-body) !important;box-shadow:none !important}
.mb-cust .section-title,.mb-cust h3.legend,.mb-cust .legend{
  display:flex;align-items:center;gap:12px;margin:0 0 16px;padding:0;border:none;background:none;
  font:700 17px/1.2 Manrope,sans-serif;color:var(--mbc-ink) !important;
}
.mb-cust .mb-cust__step > .section-title::before,
.mb-cust .mb-cust__step > h3.section-title::before,
.mb-cust .mb-cust__step > .legend::before{
  content:counter(mbstep);flex:none;
  width:28px;height:28px;border-radius:50%;background:var(--mbc-orange);color:#fff;
  font:700 14px/28px Manrope,sans-serif;text-align:center;
}
.mb-cust .mb-cust__step--untitled{padding-top:22px}

/* ---- grouped "Band Specifications" card (Plate/Type/Size merged) ---- */
.mb-cust .mb-cust__grouphead{counter-increment:mbstep;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--mbc-line);border-bottom:none !important;border-radius:16px 16px 0 0;padding:22px 24px 10px;margin-bottom:0 !important}
.mb-cust .mb-cust__grouphead::before{content:counter(mbstep);flex:none;width:28px;height:28px;border-radius:50%;background:var(--mbc-orange);color:#fff;font:700 14px/28px Manrope,sans-serif;text-align:center}
.mb-cust .mb-cust__grouphead .mb-grp-title{font:700 17px/1.2 Manrope,sans-serif;color:var(--mbc-ink)}
/* merge consecutive text sections (Primary + Secondary) into one card */
.mb-cust .mb-cust__step.mb-txtgrp{margin-bottom:0 !important;border-radius:0 !important}
.mb-cust .mb-cust__step.mb-txtgrp-first{border-radius:16px 16px 0 0 !important;border-bottom:none !important;padding-bottom:8px !important}
.mb-cust .mb-cust__step.mb-txtgrp-sub{counter-increment:none;border-top:none !important;padding-top:10px !important}
.mb-cust .mb-cust__step.mb-txtgrp-last{border-radius:0 0 16px 16px !important;margin-bottom:18px !important;padding-bottom:22px !important}
.mb-cust .mb-cust__step.mb-txtgrp-sub > .section-title{font:700 15px Manrope,sans-serif !important;color:var(--mbc-ink) !important;margin:0 0 14px !important}
.mb-cust .mb-cust__step.mb-txtgrp-sub > .section-title::before{display:none !important}
/* hide redundant Itoris field labels in ANY titled step card — the section
   (sub-)heading already titles them; keep per-line labels (Line 1…) and any
   untitled section's own field labels. */
.mb-cust .mb-cust__step:has(> .section-title) .field > h4{display:none !important}
.mb-cust .mb-cust__step:has(> .section-title) .mb-line-row .field > h4{display:block !important}
/* multi-colour options (Text Colour + 2nd/3rd infill, etc.): re-show each swatch
   group's own label so customers can tell the colours apart. Extra .mb-multi-swatch
   class beats the hide rule above (same specificity, later in source). */
.mb-cust .mb-cust__step.mb-multi-swatch:has(> .section-title) .field > h4{display:block !important;margin:2px 0 9px !important;padding:0 !important;border:none !important;min-height:0 !important}
.mb-cust .mb-cust__step.mb-multi-swatch .field > h4 label{font:600 12.5px/1.3 Manrope,sans-serif !important;color:var(--mbc-ink) !important;display:inline !important;float:none !important}
.mb-cust .mb-cust__step.mb-multi-swatch .field > h4 em{color:var(--mbc-orange-dk) !important;font-style:normal;margin-right:3px}
.mb-cust .mb-cust__step.mb-multi-swatch .field[id]{margin-bottom:4px}

/* Itoris field notes ("Text will appear…", "Maximum N characters"). They're
   useful hints but render inconsistently — dark grey on some products, white-on-
   white (invisible, leaving awkward empty space) on others. Force one muted,
   compact style so they're always a visible, tight hint (not empty space). */
.mb-cust #itoris_dynamicproductoptions .field .control > p.note,
.mb-cust #itoris_dynamicproductoptions .field .control > p.no-margin{
  color:var(--mbc-muted) !important;font:400 11.5px/1.4 Manrope,sans-serif !important;
  margin:6px 0 0 !important;padding:0 !important;
}
.mb-cust #itoris_dynamicproductoptions .field .control > p.note:empty,
.mb-cust #itoris_dynamicproductoptions .field .control > p.no-margin:empty{display:none !important}

/* spec steps sit side-by-side in a grid forming the body of the one card */
.mb-cust .mb-spec-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;background:#fff;border:1px solid var(--mbc-line);border-top:none;border-radius:0 0 16px 16px;padding:6px 24px 22px;margin-bottom:18px}
.mb-cust .mb-spec-grid .mb-cust__step.mb-grp{counter-increment:none;border:none !important;border-radius:0 !important;padding:0 !important;margin:0 !important;background:none !important;min-width:0}
.mb-cust .mb-spec-grid .mb-cust__step.mb-grp .section-title{display:block !important;font:600 12.5px Manrope,sans-serif !important;color:var(--mbc-muted) !important;letter-spacing:.02em;margin:0 0 8px !important}
.mb-cust .mb-spec-grid .mb-cust__step.mb-grp .section-title::before{display:none !important}
.mb-cust .mb-spec-grid .mb-cust__step.mb-grp .field h4{display:none}
@media(max-width:860px){.mb-cust .mb-spec-grid{grid-template-columns:1fr;gap:14px;padding-bottom:18px}}

/* ---- generic field layout inside a step ---- */
/* form-list: block stacking (no inner scroll/clip). Multiple text lines are
   moved by JS into a real <div class="mb-line-row"> so they sit side by side
   reliably — flexing native table elements is unstable, so we don't. */
.mb-cust .form-list,.mb-cust table.form-list{width:100% !important;border-collapse:collapse;display:block;max-height:none !important;overflow:visible !important}
.mb-cust .form-list tbody,.mb-cust .form-list tr{display:block !important;max-height:none !important;overflow:visible !important}
.mb-cust .form-list tr.fields{margin:0 0 14px !important}
.mb-cust .form-list tr.fields:last-child{margin-bottom:0 !important}
.mb-cust .form-list td{display:block !important;width:100% !important;float:none !important;padding:0 !important;border:none !important;vertical-align:top;margin:0}
.mb-cust .form-list td:empty,.mb-cust .form-list td .field.empty{display:none !important}
/* side-by-side text lines (Line 1 / Line 2 / Line 3) on desktop + tablet */
/* ID-scoped width:100% — a theme rule under #itoris collapses plain divs to 0 */
.mb-cust #itoris_dynamicproductoptions .mb-line-row{display:flex !important;flex-wrap:wrap;gap:14px;margin:0 0 4px;width:100% !important;box-sizing:border-box}
/* ID-scoped so it beats theme's `#itoris_dynamicproductoptions .field{display:table}` */
.mb-cust #itoris_dynamicproductoptions .mb-line-row > .field{display:block !important;flex:1 1 200px !important;width:auto !important;min-width:0;margin:0 !important}
.mb-cust #itoris_dynamicproductoptions .mb-line-row > .field.mb-hidden{display:none !important}
/* uniform line-label height so every input aligns across the row (Line 1's
   required-asterisk label otherwise collapses to 0 → its input sits higher) */
.mb-cust #itoris_dynamicproductoptions .mb-line-row > .field > h4{
  display:block !important;height:20px !important;min-height:20px !important;line-height:20px !important;
  margin:0 0 7px !important;padding:0 !important;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.mb-cust #itoris_dynamicproductoptions .mb-line-row > .field > h4 label,
.mb-cust #itoris_dynamicproductoptions .mb-line-row > .field > h4 em{
  font:600 12.5px/20px Manrope,sans-serif !important;display:inline !important;float:none !important;color:var(--mbc-ink) !important;vertical-align:baseline !important;
}
.mb-cust #itoris_dynamicproductoptions .mb-line-row > .field > h4 em{color:var(--mbc-orange-dk) !important;margin-right:2px}
@media(max-width:600px){.mb-cust .mb-line-row > .field{flex:1 1 100%}}
/* Logo/artwork file upload ("I want to upload logo now"). The file input's own
   label ("Upload logo") is narrow and wraps to two lines — keep it on one line. */
.mb-cust #itoris_dynamicproductoptions .field label.label[for*="_file"]{
  display:block !important;width:auto !important;white-space:nowrap !important;float:none !important;
  font:600 12.5px/1.3 Manrope,sans-serif !important;color:var(--mbc-ink) !important;margin:0 0 8px !important;
}
.mb-cust #itoris_dynamicproductoptions .field label.label[for*="_file"] span{white-space:nowrap !important}
/* style the native file input into a branded button so it matches the tab. */
.mb-cust #itoris_dynamicproductoptions input[type="file"]{
  font:500 13px/1.4 Manrope,sans-serif !important;color:var(--mbc-body) !important;
  background:none !important;border:none !important;padding:2px 0 !important;min-height:0 !important;max-width:100%;
}
.mb-cust #itoris_dynamicproductoptions input[type="file"]::file-selector-button,
.mb-cust #itoris_dynamicproductoptions input[type="file"]::-webkit-file-upload-button{
  font:600 13px Manrope,sans-serif;color:var(--mbc-orange-dk);background:#fff;
  border:1px solid var(--mbc-line);border-radius:10px;padding:10px 18px;margin-right:12px;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.mb-cust #itoris_dynamicproductoptions input[type="file"]:hover::file-selector-button,
.mb-cust #itoris_dynamicproductoptions input[type="file"]:hover::-webkit-file-upload-button{
  background:var(--mbc-orange);border-color:var(--mbc-orange);color:#fff;
}
/* Smooth reveal/hide of conditional text-line fields when switching the
   Single/Double/Three-Lines options (otherwise they pop in/out with the raw
   display:none toggle). @starting-style + transition-behavior:allow-discrete let
   the field fade+slide to/from display:none; unsupported browsers degrade to the
   instant toggle. The display:none end-state comes from the .mb-hidden rule above. */
.mb-cust #itoris_dynamicproductoptions .mb-line-row > .field{
  transition:opacity .26s ease, transform .26s ease, display .26s allow-discrete !important;
}
@starting-style{
  .mb-cust #itoris_dynamicproductoptions .mb-line-row > .field{opacity:0;transform:translateY(-8px) scale(.985)}
}
.mb-cust #itoris_dynamicproductoptions .mb-line-row > .field.mb-hidden{
  opacity:0 !important;transform:translateY(-8px) scale(.985) !important;
}
@media (prefers-reduced-motion:reduce){
  .mb-cust #itoris_dynamicproductoptions .mb-line-row > .field{transition:none !important;transform:none !important}
}
.mb-cust .field{margin:0}
.mb-cust .field .field.empty{display:none}
.mb-cust .field h4{margin:0 0 6px !important}
.mb-cust .field h4 label,.mb-cust .field > label{font:600 12.5px Manrope,sans-serif !important;color:var(--mbc-ink) !important}
.mb-cust em,.mb-cust .required em{color:var(--mbc-orange-dk)}
/* text inputs / selects / textarea (!important beats theme #id input rules) */
.mb-cust input[type="text"],.mb-cust input[type="email"],.mb-cust input[type="number"],
.mb-cust select,.mb-cust textarea{
  width:100% !important;font:500 14px/1.2 Manrope,sans-serif !important;color:var(--mbc-ink) !important;
  border:1px solid #d9d3c8 !important;border-radius:10px !important;padding:11px 13px !important;
  background:#fff !important;min-height:44px !important;height:auto !important;box-sizing:border-box !important;
}
.mb-cust textarea{min-height:96px !important;resize:vertical}
.mb-cust input::placeholder,.mb-cust textarea::placeholder{color:var(--mbc-muted) !important;opacity:1;font-weight:500}
.mb-cust select{appearance:none !important;-webkit-appearance:none !important;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23828b93' d='M1 1l5 5 5-5'/></svg>") !important;background-repeat:no-repeat !important;background-position:right 14px center !important;padding-right:34px !important}
.mb-cust input:focus,.mb-cust select:focus,.mb-cust textarea:focus{outline:none;border-color:var(--mbc-orange) !important;box-shadow:0 0 0 3px rgba(239,118,34,.12) !important}
/* Itoris font picker is a custom .nice-select widget (so options render in-font)
   — style it to match the native selects (Bracelet Size etc). */
.mb-cust .nice-select{
  width:100% !important;height:auto !important;min-height:44px !important;
  display:flex !important;align-items:center;box-sizing:border-box !important;float:none !important;
  border:1px solid #d9d3c8 !important;border-radius:10px !important;
  padding:11px 34px 11px 13px !important;background-color:#fff !important;
  font:500 14px/1.2 Manrope,sans-serif !important;color:var(--mbc-ink) !important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23828b93' d='M1 1l5 5 5-5'/></svg>") !important;
  background-repeat:no-repeat !important;background-position:right 14px center !important;
}
.mb-cust .nice-select::after{display:none !important}
.mb-cust .nice-select .current{font:inherit !important;color:inherit !important}
.mb-cust .nice-select.open{border-color:var(--mbc-orange) !important;box-shadow:0 0 0 3px rgba(239,118,34,.12) !important}
.mb-cust .nice-select .list{width:100% !important;border:1px solid var(--mbc-line) !important;border-radius:10px !important;box-shadow:0 8px 20px rgba(20,32,43,.14) !important;margin-top:6px !important;max-height:300px;overflow:auto;background:#fff !important}
.mb-cust .nice-select .option{padding:9px 14px !important;font-size:14px !important;line-height:1.35 !important;min-height:0 !important}
.mb-cust .nice-select .option:hover,.mb-cust .nice-select .option.focus,.mb-cust .nice-select .option.selected.focus{background:var(--mbc-surface) !important;color:var(--mbc-ink) !important}

/* ---- colour swatch grid ---- */
.mb-cust .mb-cust__swatches{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.mb-cust .mb-cust__swatches .field.choice{margin:0;padding:0;position:relative;display:block;cursor:pointer}
.mb-cust .mb-cust__swatches .field.choice input{position:absolute;opacity:0;width:0;height:0;margin:0}
/* Swatch label (colour name + price) → styled dark hover tooltip above the swatch.
   Selectors carry .label (+ needed) to out-specify the theme's .hover-show-label
   white-box tooltip rule, which is (1,4,1) at !important. */
.mb-cust #itoris_dynamicproductoptions .mb-cust__swatches .field.choice > label.label{
  position:absolute !important;left:50% !important;right:auto !important;top:auto !important;bottom:calc(100% + 9px) !important;transform:translateX(-50%) translateY(3px);
  display:block !important;width:max-content !important;max-width:190px;height:auto !important;overflow:visible !important;
  background:var(--mbc-ink) !important;color:#fff !important;border:none !important;
  font:600 11.5px/1.35 Manrope,sans-serif !important;padding:6px 10px !important;border-radius:8px !important;
  white-space:nowrap;text-align:center;margin:0 !important;
  opacity:0;visibility:hidden;pointer-events:none;z-index:60 !important;
  box-shadow:0 8px 20px -8px rgba(20,32,43,.45) !important;transition:opacity .14s ease,transform .14s ease,visibility .14s;
}
.mb-cust #itoris_dynamicproductoptions .mb-cust__swatches .field.choice > label.label::before{display:none !important}
.mb-cust #itoris_dynamicproductoptions .mb-cust__swatches .field.choice > label.label::after{
  content:"" !important;position:absolute;top:100%;left:50%;transform:translateX(-50%);margin:0 !important;
  width:0 !important;height:0 !important;border:5px solid transparent !important;border-top-color:var(--mbc-ink) !important;
}
.mb-cust #itoris_dynamicproductoptions .mb-cust__swatches .field.choice > label.label .price-notice,
.mb-cust #itoris_dynamicproductoptions .mb-cust__swatches .field.choice > label.label .price{color:#ffcfa3 !important;font-weight:700 !important;font-size:11.5px !important}
@media(hover:hover){
  .mb-cust #itoris_dynamicproductoptions .mb-cust__swatches .field.choice:hover > label.label{opacity:1 !important;visibility:visible !important;transform:translateX(-50%) translateY(0)}
}
.mb-cust .mb-cust__swatches .itoris-dynamicoptions-thumbnail-color{
  width:44px !important;height:44px !important;border-radius:13px;
  border:1.6px solid rgba(0,0,0,.16);box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
  transition:transform .12s,box-shadow .12s,border-color .12s;
}
/* white / very-light swatches get a bolder border so they're clearly visible */
.mb-cust .mb-cust__swatches .itoris-dynamicoptions-thumbnail-color.mb-swatch-light{border:2px solid rgba(0,0,0,.45) !important}
.mb-cust .mb-cust__swatches .field.choice:hover .itoris-dynamicoptions-thumbnail-color{transform:scale(1.08)}
.mb-cust .mb-cust__swatches .field.choice.is-checked .itoris-dynamicoptions-thumbnail-color{
  border-color:var(--mbc-orange);
  box-shadow:0 0 0 3px rgba(239,118,34,.28), 0 6px 14px rgba(20,32,43,.14);
}
/* pop-in check badge on the selected swatch only */
.mb-cust .mb-cust__swatches .field.choice.is-checked::after{
  content:"✓";position:absolute;top:-5px;right:-5px;z-index:2;
  width:17px;height:17px;border-radius:50%;background:var(--mbc-orange);color:#fff;
  font:700 10px/17px Manrope,sans-serif;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.28);
  animation:mbPop .18s cubic-bezier(.34,1.56,.64,1);
}
@keyframes mbPop{0%{transform:scale(0)}100%{transform:scale(1)}}
/* char counter turns orange near the limit */
.mb-cust .mb-cust__count--warn{color:var(--mbc-orange-dk);font-weight:600}
/* logo image swatches (white logos → dark tile so they're visible) */
.mb-cust .mb-cust__swatches .itoris-dynamicoptions-thumbnail-image{
  display:block !important;width:auto !important;height:38px !important;max-width:170px;object-fit:contain !important;
  background:#2b3440;border:1.6px solid var(--mbc-line);border-radius:10px;padding:11px 16px;box-sizing:content-box !important;
  transition:transform .12s,box-shadow .12s,border-color .12s;
}
.mb-cust .mb-cust__swatches .field.choice:hover .itoris-dynamicoptions-thumbnail-image{transform:scale(1.04)}
.mb-cust .mb-cust__swatches .field.choice.is-checked .itoris-dynamicoptions-thumbnail-image{
  border-color:var(--mbc-orange);box-shadow:0 0 0 3px rgba(239,118,34,.28), 0 6px 14px rgba(20,32,43,.14);
}
.mb-cust .mb-cust__selected{margin-top:11px;font-size:13px;color:var(--mbc-muted)}
.mb-cust .mb-cust__selected b{color:var(--mbc-ink);font-weight:700}

/* ---- text-radio group as segmented pills (!important beats theme's #id label rules) ---- */
.mb-cust .mb-cust__segmented{display:inline-flex !important;flex-wrap:wrap;gap:4px;background:var(--mbc-surface) !important;border:1px solid var(--mbc-line) !important;border-radius:10px !important;padding:4px !important;margin:0 !important;list-style:none;width:auto !important}
.mb-cust .mb-cust__segmented .field.choice{margin:0 !important;padding:0 !important;background:none !important;border:none !important}
.mb-cust .mb-cust__segmented .field.choice input{position:absolute !important;opacity:0 !important;width:0 !important;height:0 !important;margin:0 !important}
.mb-cust .mb-cust__segmented .field.choice > label{
  display:block !important;cursor:pointer;margin:0 !important;padding:9px 16px !important;border-radius:7px !important;
  font:600 13.5px Manrope,sans-serif !important;color:var(--mbc-body) !important;white-space:nowrap;transition:background .12s,color .12s;line-height:1.1 !important;
}
.mb-cust .mb-cust__segmented .field.choice.is-checked > label{background:#fff !important;color:var(--mbc-ink) !important;box-shadow:0 1px 2px rgba(0,0,0,.1) !important}

/* ---- char counter ---- */
.mb-cust .mb-cust__count{margin-top:6px;font-size:12px;color:var(--mbc-muted)}

/* ---- font "Aa" preview ---- */
.mb-cust .mb-cust__fontpreview{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding:14px 16px;background:var(--mbc-surface);border:1px solid var(--mbc-line);border-radius:10px}
.mb-cust .mb-cust__aa{font-size:26px;line-height:1;color:var(--mbc-ink)}
.mb-cust .mb-cust__fontname{font-size:13px;color:var(--mbc-muted)}

/* ---- live preview (dark card + CSS band) ---- */
.mb-cust__preview{background:#16202b;border-radius:14px;padding:20px}
.mb-cust__preview .mb-prev__label{color:#9aa4ad;font:700 11px/1 Manrope,sans-serif;letter-spacing:.13em;text-transform:uppercase;margin:0 0 14px}
/* engraving renders DIRECTLY on the band (no plate box) — matches real silicone */
.mb-cust__preview .mb-band{min-height:132px;border-radius:70px;display:flex;align-items:center;justify-content:center;padding:22px 40px;transition:background .25s}
.mb-cust__preview .mb-band__text{display:flex;flex-direction:column;align-items:center;gap:4px;font-weight:700;font-size:20px;line-height:1.16;text-align:center;word-break:break-word;max-width:100%;color:#16202b}
.mb-cust__preview .mb-band__text.is-empty{color:rgba(255,255,255,.9);font-style:italic;font-weight:500;font-size:14px}
.mb-cust__preview .mb-band__line{display:block;max-width:100%}
.mb-cust__preview .mb-prev__note{color:#7e8890;font-size:11.5px;line-height:1.5;margin:14px 0 0}

/* ---- "Your configuration" summary (injected into .product-options-bottom) ---- */
.mb-cust .mb-sum{margin:0 0 4px}
.mb-cust .mb-sum__h{margin:0 0 12px;font:700 15px Manrope,sans-serif;color:var(--mbc-ink)}
.mb-cust .mb-sum__rows{display:flex;flex-direction:column}
.mb-cust .mb-sum__row{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid #f1ede6;font-size:13px}
.mb-cust .mb-sum__k{color:var(--mbc-muted)}
.mb-cust .mb-sum__v{color:var(--mbc-ink);font-weight:600;text-align:right}
.mb-cust .mb-sum__v.is-empty{color:var(--mbc-muted);font-weight:400;font-style:italic}
.mb-cust .mb-sum__subtotal{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 4px}
.mb-cust .mb-sum__subtotal span{font:700 15px Manrope,sans-serif;color:var(--mbc-ink)}
.mb-cust .mb-sum__price{font:800 24px Manrope,sans-serif;color:var(--mbc-ink)}

/* ---- trust lines ---- */
.mb-cust .mb-cust__trust{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.mb-cust .mb-cust__trust-l{font-size:12px;color:var(--mbc-muted);line-height:1.4}

/* ---- sidebar cards ---- */
.mb-cust__side .box-tocart,.mb-cust__side .product-options-bottom{margin:0}
/* neutral quantity stepper (override the theme's blue +/- buttons) */
.mb-cust__side .field.qty > .label{display:none !important}
.mb-cust__side .field.qty .input-group{display:inline-flex;align-items:center;border:1px solid var(--mbc-line);border-radius:10px;overflow:hidden;background:#fff}
.mb-cust__side .field.qty .input-group__addon{background:none !important;border:none !important;padding:0}
.mb-cust__side .field.qty .input-group__button{background:var(--mbc-surface) !important;border:none !important;box-shadow:none !important;width:42px;height:44px;min-width:0;padding:0;margin:0;position:relative;cursor:pointer}
.mb-cust__side .field.qty .input-group__button:hover{background:#f1ece4 !important}
.mb-cust__side .field.qty .input-group__icon{display:none !important}
.mb-cust__side .field.qty .input-group__button::before{color:var(--mbc-ink);font:600 18px/1 Manrope,sans-serif;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.mb-cust__side .field.qty .input-group__button--decrease::before{content:"−"}
.mb-cust__side .field.qty .input-group__button--increase::before{content:"+"}
.mb-cust__side .field.qty .input-group input,.mb-cust__side .field.qty input.qty{border:none !important;text-align:center;width:56px;height:44px;font:600 15px Manrope,sans-serif;color:var(--mbc-ink);background:#fff;box-shadow:none !important;padding:0}
.mb-cust__side .product-options-bottom{
  background:#fff;border:1px solid var(--mbc-line);border-radius:14px;padding:20px;
}
.mb-cust__side .box-tocart .fieldset{display:flex;flex-direction:column;gap:12px;margin:0}
.mb-cust__side #product-addtocart-button,
.mb-cust__side .box-tocart button.action.primary{
  width:100%;background:var(--mbc-orange);border-color:var(--mbc-orange);border-radius:10px;
  padding:15px;font:700 15px Manrope,sans-serif;
}
.mb-cust__side #product-addtocart-button:hover{background:var(--mbc-orange-dk);border-color:var(--mbc-orange-dk)}

/* ---- responsive: single column; preview on top, steps, then summary + Add to Cart ---- */
@media(max-width:900px){
  .mb-cust{grid-template-columns:1fr;gap:16px}
  .mb-cust__side{display:contents} /* dissolve so children order within the grid */
  .mb-cust__preview{order:-1}
  .mb-cust__main{order:0}
  .mb-cust__summary{order:2}
  .mb-cust__side .product-options-bottom{order:3}
}

/* ============ Mediband Plus help icon + tooltip (design: Mediband Plus Help Tooltip) ============
   The membership explainer moves out of the flow into a ? help icon beside the
   step title. Desktop = hover/click tooltip (right of icon); tablet = tap
   (below-left); mobile = tap bottom sheet. Scoped under #itoris_dynamicproductoptions
   with !important so the theme's ID-level rules can't override the widget. */
/* order:1 keeps the icon after the section title's required-asterisk ::after (order:0) → "title * ?" */
.mb-cust #itoris_dynamicproductoptions .helpwr{position:relative;display:inline-flex;margin-left:2px;vertical-align:middle;text-align:left;order:1}
.mb-cust #itoris_dynamicproductoptions .helpbtn{
  width:24px !important;height:24px !important;min-width:24px;border-radius:50% !important;border:none !important;
  background:#fbe7d6 !important;color:#c85a17 !important;font:800 13px/1 Manrope,sans-serif !important;
  cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 !important;margin:0 !important;flex:none;
  box-shadow:none !important;transition:background .15s,color .15s,transform .12s;text-transform:none !important;
}
.mb-cust #itoris_dynamicproductoptions .helpbtn:hover{background:#ef7622 !important;color:#fff !important;transform:scale(1.08)}
.mb-cust #itoris_dynamicproductoptions .helpwr.open .helpbtn{background:#ef7622 !important;color:#fff !important}
.mb-cust #itoris_dynamicproductoptions .helpbtn:focus-visible{outline:2px solid #ef7622;outline-offset:2px}
.mb-cust #itoris_dynamicproductoptions .tipbackdrop{display:none}
.mb-cust #itoris_dynamicproductoptions .tip{
  position:absolute;left:34px;top:-12px;width:400px;max-width:400px;background:#fff !important;
  border:1px solid #e7e2d9 !important;border-radius:15px !important;
  box-shadow:0 6px 14px -6px rgba(20,32,43,.14),0 18px 44px -14px rgba(20,32,43,.26) !important;
  padding:0 !important;margin:0 !important;opacity:0;visibility:hidden;transform:translateX(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:200;text-align:left;
}
.mb-cust #itoris_dynamicproductoptions .tip::before{content:"";position:absolute;left:-7px;top:19px;width:12px;height:12px;background:#fdf4ec;border-left:1px solid #e7e2d9;border-bottom:1px solid #e7e2d9;transform:rotate(45deg)}
@media(hover:hover){.mb-cust #itoris_dynamicproductoptions .helpwr:hover .tip{opacity:1;visibility:visible;transform:translateX(0)}}
.mb-cust #itoris_dynamicproductoptions .helpwr.open .tip{opacity:1;visibility:visible;transform:translateX(0)}
.mb-cust #itoris_dynamicproductoptions .tip-h{display:flex;align-items:center;gap:10px;padding:15px 18px !important;background:#fdf4ec !important;border-bottom:1px solid #f4e3d2 !important;border-radius:14px 14px 0 0}
.mb-cust #itoris_dynamicproductoptions .tip-h .gift{width:32px;height:32px;border-radius:9px;background:#ef7622 !important;color:#fff !important;display:flex;align-items:center;justify-content:center;flex:none}
.mb-cust #itoris_dynamicproductoptions .tip-h .gift svg{width:17px;height:17px;display:block}
.mb-cust #itoris_dynamicproductoptions .tip-h .tt{font:800 14px/1.3 Manrope,sans-serif !important;color:#16202b !important}
.mb-cust #itoris_dynamicproductoptions .tip-h .ts{font:600 11px/1.3 Manrope,sans-serif !important;color:#c85a17 !important;text-transform:uppercase;letter-spacing:.07em;margin-top:2px}
.mb-cust #itoris_dynamicproductoptions .tip-b{padding:16px 18px 18px !important;display:flex;flex-direction:column;gap:15px}
.mb-cust #itoris_dynamicproductoptions .tip-b .trow{display:flex;gap:11px;margin:0}
.mb-cust #itoris_dynamicproductoptions .tip-b .trow .tn{flex:none;width:21px;height:21px;border-radius:50%;background:#f4f1ec !important;color:#67707a !important;font:800 11px/21px Manrope,sans-serif !important;display:flex;align-items:center;justify-content:center;margin-top:1px;text-transform:none}
.mb-cust #itoris_dynamicproductoptions .tip-b .trow p{margin:0 !important;font:500 12.5px/1.55 Manrope,sans-serif !important;color:#4c565f !important}
.mb-cust #itoris_dynamicproductoptions .tip-b .trow b{color:#16202b !important;font-weight:700}
.mb-cust #itoris_dynamicproductoptions .tip-b .deboss{margin-top:8px;background:#16202b !important;border-radius:9px;padding:10px 14px !important;text-align:center}
.mb-cust #itoris_dynamicproductoptions .tip-b .deboss div{font:600 11.5px/1.7 ui-monospace,Menlo,Consolas,monospace !important;color:#c8d0d8 !important;letter-spacing:.5px;margin:0}
.mb-cust #itoris_dynamicproductoptions .tip-b .warnline{background:#fff5ee !important;border:1px solid #f7dcc6 !important;border-radius:9px;padding:9px 12px !important;font:400 12px/1.5 Manrope,sans-serif !important;color:#9a5a22 !important;margin-top:8px}
.mb-cust #itoris_dynamicproductoptions .tip-f{display:flex;align-items:center;gap:8px;padding:13px 18px !important;border-top:1px solid #f2ede4 !important;font:500 12.5px/1.5 Manrope,sans-serif !important;color:#4c565f !important;flex-wrap:wrap}
.mb-cust #itoris_dynamicproductoptions .tip-f a{color:#c85a17 !important;font-weight:700 !important;text-decoration:none !important}
.mb-cust #itoris_dynamicproductoptions .tip-f a:hover{text-decoration:underline !important}
.mb-cust #itoris_dynamicproductoptions .tip-f .code{font:800 11.5px ui-monospace,Menlo,Consolas,monospace !important;background:#fbe7d6 !important;color:#c85a17 !important;border:1px dashed #ef9a5c !important;border-radius:6px;padding:3px 8px !important;letter-spacing:.08em}
.mb-cust #itoris_dynamicproductoptions .tip-x{display:none;position:absolute;right:12px;top:12px;width:30px;height:30px;border-radius:50% !important;border:none !important;background:rgba(22,32,43,.06) !important;color:#67707a !important;font:400 16px/1 Manrope,sans-serif !important;cursor:pointer;align-items:center;justify-content:center;padding:0 !important;margin:0 !important;box-shadow:none !important;z-index:2}
.mb-cust #itoris_dynamicproductoptions .hintrow{margin-top:12px;font:400 12px/1.4 Manrope,sans-serif !important;color:#a7aeb5 !important;display:flex;align-items:center;gap:7px}
.mb-cust #itoris_dynamicproductoptions .hintrow svg{width:14px;height:14px;color:#ef7622;flex:none}
/* tablet: anchor below the icon, left-aligned so it never clips off-screen */
@media(max-width:1024px){
  .mb-cust #itoris_dynamicproductoptions .tip{left:-12px;right:auto;top:34px;width:min(400px,78vw)}
  .mb-cust #itoris_dynamicproductoptions .tip::before{left:16px;right:auto;top:-7px;transform:rotate(135deg)}
}
/* mobile: fixed bottom sheet with dimmed backdrop + visible close button */
@media(max-width:640px){
  .mb-cust #itoris_dynamicproductoptions .tipbackdrop{display:block;position:fixed;inset:0;background:rgba(22,32,43,.44);opacity:0;visibility:hidden;transition:opacity .2s;z-index:190}
  .mb-cust #itoris_dynamicproductoptions .helpwr.open .tipbackdrop{opacity:1;visibility:visible}
  .mb-cust #itoris_dynamicproductoptions .tip{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;border-radius:20px 20px 0 0 !important;border:none !important;transform:translateY(14px);transition:opacity .22s ease,transform .22s ease,visibility .22s}
  .mb-cust #itoris_dynamicproductoptions .tip::before{display:none}
  .mb-cust #itoris_dynamicproductoptions .helpwr.open .tip{transform:translateY(0)}
  .mb-cust #itoris_dynamicproductoptions .tip-h{border-radius:20px 20px 0 0;padding:17px 54px 17px 20px !important}
  .mb-cust #itoris_dynamicproductoptions .tip-b{padding:17px 20px !important;max-height:52vh;overflow-y:auto}
  .mb-cust #itoris_dynamicproductoptions .tip-x{display:flex}
}