.orobela-bb{--gold:#b9945b;--ink:#151515;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(340px,.55fr);gap:28px;padding:28px;background:linear-gradient(135deg,#fbfaf8,#f4f0ea);border:1px solid #e8e0d4;border-radius:28px;color:var(--ink);box-shadow:0 24px 80px rgba(0,0,0,.08);font-family:Inter,Arial,sans-serif}.orobela-bb *{box-sizing:border-box}.orobela-bb__preview{position:sticky;top:20px;align-self:start;text-align:center}.orobela-bb__eyebrow{text-transform:uppercase;letter-spacing:.24em;color:var(--gold);font-size:12px;font-weight:700}.orobela-bb h2{font-family:Georgia,serif;font-weight:400;font-size:clamp(30px,4vw,58px);margin:8px 0 0}.orobela-bb canvas{width:100%;height:auto;display:block;background:transparent!important;filter:drop-shadow(0 18px 24px rgba(0,0,0,.10));touch-action:none;cursor:grab}.orobela-bb canvas.is-dragging{cursor:grabbing}.orobela-bb__metrics{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.orobela-bb__metrics span{background:#fff;border:1px solid #eee1cf;border-radius:999px;padding:9px 13px;font-size:12px}.orobela-bb__controls{background:rgba(255,255,255,.88);backdrop-filter:blur(12px);border:1px solid #eee2d3;border-radius:24px;padding:20px;box-shadow:0 18px 50px rgba(0,0,0,.06);position:sticky;top:20px;max-height:calc(100vh - 40px);display:flex;flex-direction:column;overflow:hidden}.orobela-bb__section{border-bottom:1px solid #eee;padding:0 0 18px;margin-bottom:18px;flex:0 0 auto}.orobela-bb__section h3{text-transform:uppercase;letter-spacing:.18em;font-size:12px;margin:0 0 12px;color:#7b6b56}.orobela-bb__pills{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.orobela-bb button{cursor:pointer}.orobela-bb__pills button{border:1px solid #e5d8c8;background:#fff;border-radius:16px;padding:12px 10px;font-weight:700}.orobela-bb__pills button small{display:block;font-weight:400;color:#777;margin-top:3px}.orobela-bb .is-active{border-color:var(--gold)!important;box-shadow:0 0 0 1px var(--gold) inset}.orobela-bb__section:has(.orobela-bb__beads){flex:1 1 auto;min-height:210px;overflow:hidden}.orobela-bb__beads{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-height:none;height:100%;overflow:auto;padding-right:4px}.orobela-bb__beads button{border:1px solid #eadfce;background:#fff;border-radius:20px;padding:14px 10px;text-align:center;transition:.2s}.orobela-bb__beads button:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.08)}.orobela-bb__beads button:disabled{opacity:.35;cursor:not-allowed}.orobela-bb__beads img{height:76px;width:76px;object-fit:contain;display:block;margin:0 auto 8px;filter:drop-shadow(0 12px 14px rgba(0,0,0,.28))}.orobela-bb__beads span{display:block;font-weight:700;font-size:12px}.orobela-bb__beads small{color:#8c785c}.orobela-bb__list em{color:#888}.orobela-bb__list div{display:grid;grid-template-columns:auto 34px 1fr auto auto auto;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid #f0ece6;font-size:13px}.orobela-bb__list img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 4px 5px rgba(0,0,0,.18))}.obb-grip{color:#b9945b;cursor:grab;font-weight:800;letter-spacing:-3px}.orobela-bb__list button{width:28px;height:28px;border:1px solid #e2d5c4;background:#fff;border-radius:50%}.orobela-bb__summary{margin-top:auto!important;margin-bottom:0!important;padding:16px 0 0!important;border-bottom:0!important;background:linear-gradient(180deg,rgba(255,255,255,.80),#fff 22%);box-shadow:0 -14px 28px rgba(255,255,255,.96);position:sticky;bottom:0;z-index:4}.orobela-bb__total{display:flex;justify-content:space-between;align-items:center;margin:14px 0;font-size:16px}.orobela-bb__total strong{font-size:30px;font-family:Georgia,serif}.orobela-bb__add{width:100%;border:0;border-radius:999px;background:#111;color:#fff;padding:16px 18px;text-transform:uppercase;letter-spacing:.14em;font-weight:800}.orobela-bb__clear{width:100%;border:1px solid #ddd;background:#fff;border-radius:999px;padding:13px;margin-top:10px}.orobela-bb [data-obb-notice]{min-height:20px;color:#8a5f1e;font-size:13px;text-align:center}@media(max-width:900px){.orobela-bb{grid-template-columns:1fr;padding:14px;border-radius:18px}.orobela-bb__preview{position:relative;top:0}.orobela-bb__controls{padding:15px;position:relative;top:0;max-height:none;overflow:visible}.orobela-bb__pills{grid-template-columns:1fr}.orobela-bb__beads{grid-template-columns:repeat(2,1fr);max-height:none}.orobela-bb__list div{grid-template-columns:auto 30px 1fr auto auto auto}.orobela-bb h2{font-size:34px}}

/* v2.3.2: selected beads live under the canvas; right panel keeps cart actions sticky */
.orobela-bb__tray{margin-top:16px;background:rgba(255,255,255,.9);border:1px solid #eee2d3;border-radius:22px;padding:16px;text-align:left;box-shadow:0 14px 34px rgba(0,0,0,.045)}
.orobela-bb__tray h3{text-transform:uppercase;letter-spacing:.16em;font-size:12px;margin:0 0 12px;color:#7b6b56}.orobela-bb__tray .orobela-bb__list{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px}.orobela-bb__tray .orobela-bb__list em{padding:12px;color:#888}.orobela-bb__tray .orobela-bb__list div{display:grid;grid-template-columns:auto 30px minmax(135px,1fr) auto;min-width:220px;gap:8px;align-items:center;border:1px solid #eee2d3;border-radius:999px;background:#fff;padding:7px 9px;font-size:12px;box-shadow:0 6px 14px rgba(0,0,0,.04)}
.orobela-bb__tray .orobela-bb__list img{width:30px;height:30px}.orobela-bb__tray .orobela-bb__list .obb-grip{font-size:12px}.orobela-bb__summary{flex:0 0 auto!important;}

/* v2.4.0: professional collapsible editing flow */
.orobela-bb__section.obb-accordion{padding:0;margin-bottom:12px;border:1px solid #eee2d3;border-radius:18px;background:rgba(255,255,255,.72);overflow:hidden}
.obb-accordion__head{width:100%;display:flex;align-items:center;gap:10px;border:0;background:transparent;padding:15px 14px;text-align:left;text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:800;color:#6f604d}
.obb-accordion__head .obb-step{width:24px;height:24px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:#f3eee7;color:#111;letter-spacing:0;font-size:12px}
.obb-accordion.is-open .obb-accordion__head .obb-step{background:#111;color:#fff}
.obb-accordion__head i{margin-left:auto;width:10px;height:10px;border-right:1.5px solid #111;border-bottom:1.5px solid #111;transform:rotate(45deg);transition:.2s ease}
.obb-accordion.is-open .obb-accordion__head i{transform:rotate(225deg);margin-top:6px}
.obb-accordion__body{display:none;padding:0 14px 16px}
.obb-accordion.is-open .obb-accordion__body{display:block}
.orobela-bb__section.obb-accordion:has(.orobela-bb__beads){flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.orobela-bb__section.obb-accordion:has(.orobela-bb__beads).is-open{min-height:260px}
.orobela-bb__section.obb-accordion:has(.orobela-bb__beads) .obb-accordion__body{min-height:0;overflow:hidden;flex:1 1 auto}
.orobela-bb__section.obb-accordion:has(.orobela-bb__beads).is-open .obb-accordion__body{display:flex;flex-direction:column}
.orobela-bb__beads [data-add-bead]{-webkit-user-drag:none;user-select:none;touch-action:none}
.orobela-bb__beads [data-add-bead] img{pointer-events:none}
.orobela-bb__summary{position:sticky!important;bottom:0!important;z-index:10!important;border-top:1px solid #eee2d3!important;padding-top:18px!important}

/* v2.4.1: separated bead groups and cleaner drag preview */
.orobela-bb__beads{display:block;overflow:auto;padding-right:6px}
.obb-bead-group{margin:0 0 18px}.obb-bead-group h4{margin:0 0 10px;text-transform:uppercase;letter-spacing:.16em;font-size:11px;color:#7b6b56}.obb-bead-group__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.orobela-bb canvas.is-dragging{cursor:grabbing}


/* v2.4.3: keep the Choose Beads accordion collapsed without a blank flex area; only expand when active */
.orobela-bb__section.obb-accordion:has(.orobela-bb__beads){flex:0 0 auto!important;min-height:0!important;display:block!important;}
.orobela-bb__section.obb-accordion:has(.orobela-bb__beads).is-open{flex:1 1 auto!important;min-height:320px!important;display:flex!important;flex-direction:column!important;}
.orobela-bb__section.obb-accordion:not(.is-open) .obb-accordion__body{display:none!important;}
.orobela-bb__section.obb-accordion:has(.orobela-bb__beads).is-open .obb-accordion__body{display:flex!important;flex-direction:column!important;min-height:0!important;overflow:hidden!important;}
.orobela-bb__section.obb-accordion:has(.orobela-bb__beads).is-open .orobela-bb__beads{display:block!important;min-height:260px!important;overflow:auto!important;}

/* v2.4.6: compact professional controls, unified bracelet summary, tighter header */
.orobela-bb h2{margin:0!important;line-height:1.05!important;}
.orobela-bb__eyebrow{margin-bottom:6px!important;}
.orobela-bb__tray{margin-top:8px!important;padding:12px 14px!important;border-radius:18px!important;}
.orobela-bb__tray .orobela-bb__metrics{justify-content:flex-start!important;margin:0 0 12px!important;padding-bottom:10px!important;border-bottom:1px solid #f0e6d8!important;}
.orobela-bb__tray .orobela-bb__metrics span{padding:7px 11px!important;font-size:11px!important;background:#fbfaf8!important;}
.orobela-bb__tray h3{margin-bottom:8px!important;}
.orobela-bb__summary{padding-top:12px!important;}
.orobela-bb__total{margin:8px 0 10px!important;font-size:13px!important;}
.orobela-bb__total strong{font-size:24px!important;line-height:1!important;}
.orobela-bb__add{padding:12px 16px!important;border-radius:16px!important;font-size:12px!important;letter-spacing:.12em!important;box-shadow:0 10px 22px rgba(0,0,0,.12)!important;}
.orobela-bb__clear{padding:10px 14px!important;margin-top:8px!important;border-radius:16px!important;font-size:13px!important;}
.orobela-bb [data-obb-notice]{min-height:16px!important;margin:8px 0 0!important;font-size:12px!important;}


/* v2.5.0: professional compact desktop + Nilaya-inspired mobile layout */
.orobela-bb{grid-template-columns:minmax(0,1fr) minmax(286px,.36fr)!important;gap:18px!important;padding:18px!important;align-items:start!important;}
.orobela-bb__preview{top:12px!important;}
.orobela-bb h2{margin:0!important;line-height:1!important;}
.orobela-bb h3{margin:0!important;}
.orobela-bb__eyebrow{font-size:10px!important;letter-spacing:.32em!important;margin:0 0 6px!important;}
.orobela-bb__controls{padding:14px!important;border-radius:22px!important;top:12px!important;max-height:calc(100vh - 24px)!important;}
.obb-accordion__head{padding:12px 12px!important;font-size:11px!important;letter-spacing:.18em!important;}
.obb-accordion__head .obb-step{width:22px!important;height:22px!important;font-size:11px!important;}
.obb-accordion__body{padding:0 10px 12px!important;}
.orobela-bb__pills{gap:8px!important;}
.orobela-bb__pills button{padding:10px 8px!important;border-radius:13px!important;font-size:12px!important;}
.orobela-bb__section.obb-accordion:has(.orobela-bb__beads).is-open{min-height:250px!important;}
.orobela-bb__section.obb-accordion:has(.orobela-bb__beads).is-open .orobela-bb__beads{min-height:210px!important;}
.obb-bead-group{margin-bottom:14px!important;}
.obb-bead-group h4{font-size:10px!important;margin-bottom:8px!important;}
.obb-bead-group__grid{gap:9px!important;}
.orobela-bb__beads button{border-radius:16px!important;padding:10px 8px!important;}
.orobela-bb__beads img{width:60px!important;height:60px!important;margin-bottom:6px!important;}
.orobela-bb__beads span{font-size:11px!important;line-height:1.25!important;}
.orobela-bb__beads small{font-size:10px!important;}
.orobela-bb__summary{padding-top:10px!important;}
.orobela-bb__add{min-height:42px!important;}
.orobela-bb__clear{min-height:36px!important;}

/* v2.6.0: editorial desktop layout + compact professional builder menu */
.orobela-bb{
  --obb-font-display:"Cormorant Garamond","EB Garamond",Georgia,serif;
  --obb-font-ui:"DM Sans","Helvetica Neue",Arial,sans-serif;
  --obb-ink:#111;
  --obb-muted:#5c554c;
  --obb-gold:#a47a3d;
  --obb-line:#ebe6dc;
  font-family:var(--obb-font-ui)!important;
  grid-template-columns:228px minmax(560px,1.15fr) 268px!important;
  gap:16px!important;
  padding:18px 20px!important;
  align-items:stretch!important;
  background:linear-gradient(135deg,#fbfaf8 0%,#f6f2eb 100%)!important;
}
.orobela-bb h2,
.orobela-bb h3{margin:0!important;}
.orobela-bb__info{
  position:sticky!important;
  top:12px!important;
  align-self:start!important;
  display:flex!important;
  flex-direction:column!important;
  padding:20px 18px!important;
  background:rgba(255,255,255,.62)!important;
  border:1px solid #eee2d3!important;
  border-radius:22px!important;
  box-shadow:0 18px 50px rgba(0,0,0,.045)!important;
}
.orobela-bb__info .orobela-bb__eyebrow{
  display:block!important;
  text-align:left!important;
  margin:0 0 12px!important;
  color:var(--obb-gold)!important;
  font-family:var(--obb-font-ui)!important;
  font-size:9px!important;
  font-weight:600!important;
  letter-spacing:.34em!important;
  line-height:1.3!important;
}
.orobela-bb__info h2{
  padding:0!important;
  text-align:left!important;
  font-family:var(--obb-font-display)!important;
  font-size:clamp(32px,2.5vw,46px)!important;
  font-weight:500!important;
  line-height:1!important;
  letter-spacing:-.02em!important;
  color:var(--obb-ink)!important;
}
.orobela-bb__product-copy{
  margin-top:20px!important;
  padding-top:18px!important;
  border-top:1px solid var(--obb-line)!important;
  color:var(--obb-muted)!important;
  display:grid!important;
  gap:8px!important;
  font-size:13px!important;
  line-height:1.55!important;
}
.orobela-bb__product-copy strong{
  font-family:var(--obb-font-display)!important;
  font-size:24px!important;
  font-weight:500!important;
  color:var(--obb-ink)!important;
  line-height:1!important;
}
.orobela-bb__info-metrics{display:none!important;}
.orobela-bb__info .orobela-bb__summary{
  margin-top:auto!important;
  position:sticky!important;
  bottom:14px!important;
  z-index:20!important;
  padding:14px 0 0!important;
  border-top:1px solid #eadfce!important;
  background:transparent!important;
  box-shadow:none!important;
}
.orobela-bb__info .orobela-bb__total{
  margin:0 0 14px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:4px!important;
}
.orobela-bb__info .orobela-bb__total span{
  font-size:10px!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  color:var(--obb-muted)!important;
  font-weight:600!important;
  line-height:1!important;
}
.orobela-bb__info .orobela-bb__total strong,
.orobela-bb__total strong,
.orobela-bb [data-obb-total]{
  font-family:var(--obb-font-ui)!important;
  font-size:32px!important;
  font-weight:700!important;
  font-variant-numeric:tabular-nums lining-nums!important;
  font-feature-settings:"tnum" 1,"lnum" 1!important;
  color:var(--obb-ink)!important;
  letter-spacing:0!important;
  line-height:1.1!important;
  display:block!important;
  white-space:nowrap!important;
}
.orobela-bb__info .orobela-bb__add{
  border-radius:0!important;
  min-height:46px!important;
  padding:13px 14px!important;
  font-family:var(--obb-font-ui)!important;
  font-size:11px!important;
  font-weight:600!important;
  letter-spacing:.14em!important;
  box-shadow:none!important;
}
.orobela-bb__info .orobela-bb__clear{
  border-radius:0!important;
  min-height:40px!important;
  margin-top:10px!important;
  padding:10px 12px!important;
  background:transparent!important;
  border:1px solid var(--obb-line)!important;
  font-family:var(--obb-font-ui)!important;
  font-size:11px!important;
  letter-spacing:.06em!important;
  color:var(--obb-muted)!important;
}
.orobela-bb__preview{
  position:relative!important;
  top:0!important;
  align-self:start!important;
  padding:0!important;
  min-width:0!important;
}
.orobela-bb__preview canvas{
  max-height:calc(100vh - 160px)!important;
  min-height:min(72vh,680px)!important;
  object-fit:contain!important;
}
.orobela-bb__tray{
  margin-top:10px!important;
  padding:12px!important;
  border-radius:16px!important;
}
.orobela-bb__tray h3{
  font-family:var(--obb-font-ui)!important;
  font-size:10px!important;
  letter-spacing:.18em!important;
  color:var(--obb-ink)!important;
  text-transform:uppercase!important;
  font-weight:600!important;
  margin:0 0 10px!important;
}
.orobela-bb__controls{
  width:100%!important;
  padding:12px!important;
  border-radius:22px!important;
  top:12px!important;
  max-height:calc(100vh - 24px)!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}
.orobela-bb__pills button{
  font-family:var(--obb-font-ui)!important;
  font-size:12px!important;
  font-weight:500!important;
  border:1px solid var(--obb-line)!important;
  border-radius:10px!important;
  padding:11px 10px!important;
  background:#fff!important;
}
.orobela-bb__pills button.is-active{
  border-color:var(--obb-ink)!important;
  background:var(--obb-ink)!important;
  color:#fff!important;
  box-shadow:none!important;
}
.orobela-bb__pills button small{color:var(--obb-muted)!important;font-weight:400!important;}
.orobela-bb__pills button.is-active small{color:rgba(255,255,255,.75)!important;}
.obb-accordion__head{
  color:var(--obb-ink)!important;
  font-family:var(--obb-font-ui)!important;
  font-size:11px!important;
  letter-spacing:.16em!important;
  font-weight:600!important;
  padding:14px 12px!important;
}
.obb-accordion__head .obb-step{background:#111!important;color:#fff!important;}
.obb-accordion:not(.is-open) .obb-accordion__head .obb-step{background:#f3eee7!important;color:#111!important;}
.obb-bead-group h4{
  color:var(--obb-muted)!important;
  font-family:var(--obb-font-ui)!important;
  font-size:10px!important;
  letter-spacing:.18em!important;
  text-transform:uppercase!important;
  font-weight:600!important;
  margin:0 0 10px!important;
}
.obb-bead-group__grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
.orobela-bb__beads button{
  border-radius:12px!important;
  padding:8px 6px 10px!important;
  border:1px solid var(--obb-line)!important;
  background:#fff!important;
  transition:border-color .2s ease,box-shadow .2s ease!important;
}
.orobela-bb__beads button:hover:not(:disabled){
  border-color:#d4c9b8!important;
  box-shadow:0 8px 20px rgba(0,0,0,.06)!important;
  transform:none!important;
}
.orobela-bb__beads img{width:44px!important;height:44px!important;margin-bottom:6px!important;}
.orobela-bb__beads span{
  display:block!important;
  font-size:10px!important;
  line-height:1.25!important;
  font-weight:500!important;
  color:var(--obb-ink)!important;
}
.orobela-bb__beads small,
.orobela-bb__beads .obb-bead-price{
  display:block!important;
  margin-top:3px!important;
  font-size:11px!important;
  font-weight:600!important;
  color:var(--obb-ink)!important;
}
.orobela-bb__section.obb-accordion:has(.orobela-bb__beads).is-open{min-height:0!important;flex:1 1 auto!important;}
.orobela-bb__section.obb-accordion:has(.orobela-bb__beads).is-open .orobela-bb__beads{min-height:0!important;}

/* v2.7.6: desktop focus mode — compact steps 1+2, beads fill panel */
@media(min-width:901px){
  .orobela-bb__controls.obb-focus-beads{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    gap:6px 8px!important;
    padding:8px 10px 10px!important;
  }
  .orobela-bb__controls.obb-focus-beads [data-obb-section="size"],
  .orobela-bb__controls.obb-focus-beads [data-obb-section="bead-size"]{
    margin-bottom:0!important;
    border:1px solid var(--obb-line)!important;
    border-radius:10px!important;
    overflow:hidden!important;
    min-height:0!important;
  }
  .orobela-bb__controls.obb-focus-beads [data-obb-section="beads"]{
    grid-column:1/-1!important;
    grid-row:2!important;
    min-height:0!important;
    margin-bottom:0!important;
    border:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }
  .orobela-bb__controls.obb-focus-beads .obb-accordion:not(.is-open) .obb-accordion__head{
    padding:8px 10px!important;
    font-size:9px!important;
    letter-spacing:.1em!important;
    min-height:0!important;
  }
  .orobela-bb__controls.obb-focus-beads .obb-accordion:not(.is-open) .obb-step{
    width:18px!important;
    height:18px!important;
    font-size:9px!important;
  }
  .orobela-bb__controls.obb-focus-beads .obb-accordion:not(.is-open) .obb-accordion__head i{
    width:7px!important;
    height:7px!important;
  }
  .orobela-bb__controls.obb-focus-beads .obb-accordion:not(.is-open) .obb-head-label{
    font-weight:700!important;
    letter-spacing:.04em!important;
    text-transform:none!important;
  }
  .orobela-bb__controls.obb-focus-beads [data-obb-section="beads"].is-open{
    flex:1 1 auto!important;
    min-height:0!important;
  }
  .orobela-bb__controls.obb-focus-beads [data-obb-section="beads"].is-open .obb-accordion__head{
    padding:10px 12px!important;
    flex:0 0 auto!important;
  }
  .orobela-bb__controls.obb-focus-beads [data-obb-section="beads"].is-open .obb-accordion__body{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    display:flex!important;
    flex-direction:column!important;
    padding:0 0 4px!important;
  }
  .orobela-bb__controls.obb-focus-beads [data-obb-section="beads"].is-open .orobela-bb__beads{
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;
  }
}

@media(max-width:1100px){
  .orobela-bb{grid-template-columns:210px minmax(440px,1fr) 250px!important;gap:12px!important;padding:14px!important;}
  .orobela-bb__info h2{font-size:30px!important;}
  .orobela-bb__preview canvas{min-height:min(64vh,560px)!important;}
  .obb-bead-group__grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}

@media(max-width:900px){
  .orobela-bb{
    --obb-mobile-bar:76px;
    --obb-mobile-canvas:36vh;
    display:block!important;
    gap:0!important;
    padding:0!important;
    padding-bottom:calc(var(--obb-mobile-bar) + env(safe-area-inset-bottom,0px))!important;
    background:#f8f7f5!important;
    min-height:100vh!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  .orobela-bb__tray,
  .orobela-bb.obb-mobile .orobela-bb__tray{display:none!important;}
  .orobela-bb__preview{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    z-index:30!important;
    height:var(--obb-mobile-canvas)!important;
    background:#f8f7f5!important;
    padding:10px 10px 0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
  }
  .orobela-bb__preview canvas{
    min-height:0!important;
    max-height:100%!important;
    height:auto!important;
    width:100%!important;
    filter:drop-shadow(0 8px 18px rgba(0,0,0,.08))!important;
  }
  .orobela-bb__controls{
    position:fixed!important;
    top:var(--obb-mobile-canvas)!important;
    left:0!important;
    right:0!important;
    bottom:calc(var(--obb-mobile-bar) + env(safe-area-inset-bottom,0px))!important;
    z-index:45!important;
    padding:0!important;
    border:0!important;
    border-top:1px solid #ebe8e3!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:#fff!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
  }
  .orobela-bb__section.obb-accordion{
    margin:0!important;
    border:0!important;
    border-bottom:1px solid #eee8df!important;
    border-radius:0!important;
    background:#fff!important;
  }
  .orobela-bb__section.obb-accordion:not(.is-open) .obb-accordion__body{
    display:none!important;
    height:0!important;
    overflow:hidden!important;
    padding:0!important;
    margin:0!important;
  }
  .orobela-bb__section.obb-accordion.is-open .obb-accordion__body{
    display:block!important;
    overflow:visible!important;
    padding:12px 0 14px!important;
  }
  .orobela-bb__section.obb-accordion:has(.orobela-bb__beads),
  .orobela-bb__section.obb-accordion:has(.orobela-bb__beads).is-open{
    flex:none!important;
    min-height:0!important;
    display:block!important;
  }
  .obb-accordion__head{
    position:sticky!important;
    top:0!important;
    z-index:3!important;
    font-size:11px!important;
    color:#111!important;
    background:#fff!important;
    padding:13px 16px!important;
    letter-spacing:.14em!important;
    border-bottom:1px solid #f3eee7!important;
    box-shadow:0 1px 0 rgba(255,255,255,.9)!important;
  }
  .obb-accordion.is-open .obb-accordion__head{
    background:#fff!important;
    border-bottom-color:#eee8df!important;
  }
  .obb-accordion__head .obb-step{
    width:20px!important;
    height:20px!important;
    font-size:10px!important;
    background:#f3eee7!important;
    color:#111!important;
  }
  .obb-accordion.is-open .obb-accordion__head .obb-step{background:#111!important;color:#fff!important;}
  .orobela-bb__pills{
    display:flex!important;
    gap:8px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:0 16px 4px!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-x:contain!important;
    scroll-snap-type:x proximity!important;
    scrollbar-width:none!important;
    touch-action:pan-x!important;
  }
  .orobela-bb__pills::-webkit-scrollbar{display:none!important;}
  .orobela-bb__pills button{
    flex:0 0 auto!important;
    min-width:96px!important;
    padding:10px 12px!important;
    border-radius:12px!important;
    border:1px solid #e8e0d4!important;
    font-size:12px!important;
    background:#fff!important;
    scroll-snap-align:start!important;
    touch-action:manipulation!important;
  }
  .orobela-bb__pills button.is-active{
    border-color:#111!important;
    background:#111!important;
    color:#fff!important;
    box-shadow:none!important;
  }
  .orobela-bb__pills button.is-active small{color:rgba(255,255,255,.72)!important;}
  .orobela-bb__pills button small{font-size:10px!important;margin-top:2px!important;}
  .obb-bead-group h4{
    font-size:10px!important;
    background:#f3eee7!important;
    text-align:left!important;
    margin:0!important;
    padding:10px 16px!important;
    color:#6f604d!important;
    font-weight:800!important;
    letter-spacing:.16em!important;
    text-transform:uppercase!important;
  }
  .orobela-bb__beads{
    display:block!important;
    max-height:none!important;
    background:#faf9f7!important;
    padding:0!important;
    overflow:visible!important;
  }
  .obb-bead-group{margin:0!important;border-bottom:1px solid #eee8df!important;}
  .obb-bead-group__grid{
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    gap:0!important;
    padding:0 0 6px!important;
    scroll-snap-type:x mandatory!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-x:contain!important;
    scrollbar-width:none!important;
    touch-action:pan-x!important;
    width:100%!important;
    max-width:100%!important;
  }
  .obb-bead-group__grid::-webkit-scrollbar{display:none!important;}
  .orobela-bb__beads [data-add-bead]{
    touch-action:manipulation!important;
    -webkit-user-drag:none!important;
    user-select:none!important;
  }
  .orobela-bb__beads button{
    flex:0 0 80px!important;
    width:80px!important;
    min-height:92px!important;
    border:0!important;
    border-right:1px solid #eee8df!important;
    border-radius:0!important;
    background:#fff!important;
    padding:10px 6px!important;
    scroll-snap-align:start!important;
  }
  .orobela-bb__beads img{width:44px!important;height:44px!important;margin-bottom:5px!important;}
  .orobela-bb__beads span{font-size:9px!important;line-height:1.15!important;text-transform:uppercase!important;letter-spacing:.02em!important;}
  .orobela-bb__beads small{display:none!important;}
  .orobela-bb__section.obb-accordion:has(.orobela-bb__beads).is-open .obb-accordion__body{
    display:block!important;
    overflow:visible!important;
    flex:none!important;
    min-height:0!important;
  }
  .orobela-bb__section.obb-accordion:has(.orobela-bb__beads).is-open .orobela-bb__beads{
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }
  .orobela-bb__info{
    order:100!important;
    min-height:0!important;
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100vw!important;
    max-width:100vw!important;
    margin:0!important;
    margin-left:calc(50% - 50vw)!important;
    top:auto!important;
    z-index:50!important;
    display:block!important;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))!important;
    padding-left:max(16px,env(safe-area-inset-left,0px))!important;
    padding-right:max(16px,env(safe-area-inset-right,0px))!important;
    border:0!important;
    border-top:1px solid #e3ddd4!important;
    border-radius:0!important;
    background:#fff!important;
    backdrop-filter:blur(16px)!important;
    -webkit-backdrop-filter:blur(16px)!important;
    box-shadow:0 -10px 40px rgba(0,0,0,.12)!important;
  }
  .orobela-bb__info .orobela-bb__eyebrow,
  .orobela-bb__info h2,
  .orobela-bb__product-copy,
  .orobela-bb__info-metrics{display:none!important;}
  .orobela-bb__info .orobela-bb__summary{
    display:grid!important;
    grid-template-columns:minmax(76px,auto) 1fr!important;
    grid-column:1/-1!important;
    gap:12px!important;
    align-items:stretch!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    position:relative!important;
    bottom:auto!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .orobela-bb__info .orobela-bb__total{
    grid-column:1!important;
    margin:0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-self:center!important;
    gap:2px!important;
  }
  .orobela-bb__info .orobela-bb__total span{
    display:block!important;
    font-size:9px!important;
    letter-spacing:.14em!important;
    text-transform:uppercase!important;
    color:#8a7f72!important;
    font-weight:700!important;
  }
  .orobela-bb__info .orobela-bb__total strong,
  .orobela-bb__info [data-obb-total]{
    font-family:var(--obb-font-ui)!important;
    font-size:22px!important;
    font-weight:700!important;
    font-variant-numeric:tabular-nums lining-nums!important;
    font-feature-settings:"tnum" 1,"lnum" 1!important;
    letter-spacing:0!important;
    color:#111!important;
    line-height:1.1!important;
    white-space:nowrap!important;
  }
  .orobela-bb__info .orobela-bb__add{
    grid-column:2!important;
    align-self:stretch!important;
    min-height:48px!important;
    border-radius:12px!important;
    font-size:11px!important;
    font-weight:800!important;
    letter-spacing:.14em!important;
    box-shadow:0 10px 24px rgba(0,0,0,.16)!important;
  }
  .orobela-bb__info .orobela-bb__clear{display:none!important;}
  .orobela-bb__info [data-obb-notice]{
    grid-column:1/-1!important;
    margin:4px 0 0!important;
    min-height:0!important;
    font-size:11px!important;
    text-align:center!important;
  }

  /* Mobile focus mode — compact steps 1+2, 2-column bead grid fills panel */
  .orobela-bb.obb-mobile-focus-beads{--obb-mobile-canvas:30vh!important;}
  .orobela-bb__controls.obb-focus-beads{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    gap:6px!important;
    padding:6px 8px 8px!important;
    overflow:hidden!important;
  }
  .orobela-bb__controls.obb-focus-beads [data-obb-section="size"],
  .orobela-bb__controls.obb-focus-beads [data-obb-section="bead-size"]{
    margin:0!important;
    border:1px solid #ebe8e3!important;
    border-radius:10px!important;
    overflow:hidden!important;
  }
  .orobela-bb__controls.obb-focus-beads .obb-accordion:not(.is-open) .obb-accordion__head{
    position:static!important;
    padding:8px 10px!important;
    font-size:9px!important;
    letter-spacing:.08em!important;
    min-height:0!important;
    border-bottom:0!important;
    box-shadow:none!important;
  }
  .orobela-bb__controls.obb-focus-beads .obb-accordion:not(.is-open) .obb-step{
    width:18px!important;
    height:18px!important;
    font-size:9px!important;
  }

  .obb-head-label{
    padding-left: 5px;
  }

  .orobela-bb__controls.obb-focus-beads .obb-accordion:not(.is-open) .obb-head-label{
    font-weight:700!important;
    letter-spacing:.03em!important;
    text-transform:none!important;
  }
  .orobela-bb__controls.obb-focus-beads .obb-accordion:not(.is-open) .obb-accordion__head i{
    width:7px!important;
    height:7px!important;
  }
  .orobela-bb__controls.obb-focus-beads [data-obb-section="beads"]{
    grid-column:1/-1!important;
    grid-row:2!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    border:0!important;
  }
  .orobela-bb__controls.obb-focus-beads [data-obb-section="beads"].is-open .obb-accordion__head{display:none!important;}
  .orobela-bb__controls.obb-focus-beads [data-obb-section="beads"].is-open .obb-accordion__body{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    padding:0!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .orobela-bb__controls.obb-focus-beads .obb-bead-group h4{
    padding:8px 12px!important;
    font-size:9px!important;
  }
  .orobela-bb__controls.obb-focus-beads .obb-bead-group__grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    padding:8px 10px 10px!important;
    overflow:visible!important;
    touch-action:auto!important;
  }
  .orobela-bb__controls.obb-focus-beads .orobela-bb__beads button{
    flex:none!important;
    width:100%!important;
    min-height:0!important;
    border:1px solid #ebe8e3!important;
    border-right:1px solid #ebe8e3!important;
    border-radius:10px!important;
    padding:8px 6px 10px!important;
    background:#fff!important;
  }
  .orobela-bb__controls.obb-focus-beads .orobela-bb__beads img{
    width:40px!important;
    height:40px!important;
    margin-bottom:4px!important;
  }
  .orobela-bb__controls.obb-focus-beads .orobela-bb__beads span{
    font-size:9px!important;
    text-transform:none!important;
    line-height:1.2!important;
  }
  .orobela-bb__controls.obb-focus-beads .orobela-bb__beads small,
  .orobela-bb__controls.obb-focus-beads .orobela-bb__beads .obb-bead-price{
    display:block!important;
    font-size:10px!important;
    font-weight:700!important;
    color:#111!important;
    margin-top:2px!important;
  }
}

@media(max-width:480px){
  .orobela-bb{--obb-mobile-canvas:34vh;}
  .orobela-bb.obb-mobile-focus-beads{--obb-mobile-canvas:28vh!important;}
  .orobela-bb__preview canvas{max-height:var(--obb-mobile-canvas)!important;}
  .orobela-bb__info .orobela-bb__total strong,
  .orobela-bb__info [data-obb-total]{font-size:20px!important;}
}

/* v3.1 mobile + rope centered fixes */
@media(max-width:900px){
  .orobela-bb{
    display:flex!important;
    flex-direction:column!important;
    gap:0!important;
    padding:0!important;
    border-radius:0!important;
    border-left:0!important;
    border-right:0!important;
    box-shadow:none!important;
    margin-top:0!important;
    overflow:visible!important;
    --obb-mobile-bar:76px;
    --obb-mobile-canvas:34vh;
    padding-bottom:calc(var(--obb-mobile-bar) + env(safe-area-inset-bottom,0px))!important;
  }
  .orobela-bb__preview{
    order:1!important;
    position:relative!important;
    top:0!important;
    margin:0!important;
    padding:0!important;
    z-index:1!important;
    background:#f8f6f2!important;
  }
  .orobela-bb__preview canvas{
    display:block!important;
    width:100%!important;
    height:var(--obb-mobile-canvas)!important;
    min-height:220px!important;
    max-height:360px!important;
    object-fit:contain!important;
    margin:0 auto!important;
    padding:0!important;
    touch-action:none!important;
  }
  .orobela-bb__tray{display:none!important;}
  .orobela-bb__controls{
    order:2!important;
    position:relative!important;
    top:auto!important;
    max-height:none!important;
    width:100%!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:#fff!important;
    overflow:visible!important;
    display:block!important;
  }
  .orobela-bb__controls.obb-focus-beads{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    grid-template-rows:auto auto!important;
    gap:6px!important;
    padding:8px!important;
    overflow:visible!important;
  }
  .orobela-bb__controls.obb-focus-beads [data-obb-section="beads"]{
    grid-column:1/-1!important;
    grid-row:2!important;
    display:block!important;
    overflow:visible!important;
  }
  .orobela-bb__controls.obb-focus-beads [data-obb-section="beads"].is-open .obb-accordion__head{
    display:block!important;
    padding:10px 12px!important;
    background:#eee9e2!important;
    border-radius:0!important;
    border:0!important;
    font-size:10px!important;
    color:#111!important;
  }
  .orobela-bb__controls.obb-focus-beads [data-obb-section="beads"].is-open .obb-accordion__body,
  .orobela-bb__section.obb-accordion:has(.orobela-bb__beads).is-open .obb-accordion__body{
    display:block!important;
    padding:0!important;
    overflow:visible!important;
    min-height:0!important;
  }
  .orobela-bb__beads,
  .orobela-bb__controls.obb-focus-beads [data-obb-section="beads"].is-open .orobela-bb__beads{
    display:block!important;
    min-height:0!important;
    max-height:none!important;
    height:auto!important;
    overflow:visible!important;
    padding:0!important;
  }
  .obb-bead-group{margin:0!important;border-bottom:1px solid #e9e4dc!important;background:#fff!important;}
  .obb-bead-group h4,
  .orobela-bb__controls.obb-focus-beads .obb-bead-group h4{
    padding:10px 14px!important;
    margin:0!important;
    background:#eee9e2!important;
    color:#111!important;
    font-size:11px!important;
    letter-spacing:.14em!important;
    font-weight:800!important;
    text-transform:uppercase!important;
  }
  .obb-bead-group__grid,
  .orobela-bb__controls.obb-focus-beads .obb-bead-group__grid{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:0!important;
    scroll-snap-type:x proximity!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-x!important;
    scrollbar-width:none!important;
  }
  .obb-bead-group__grid::-webkit-scrollbar{display:none!important;}
  .orobela-bb__beads button,
  .orobela-bb__controls.obb-focus-beads .orobela-bb__beads button{
    flex:0 0 96px!important;
    width:96px!important;
    min-width:96px!important;
    min-height:120px!important;
    border:0!important;
    border-right:1px solid #e9e4dc!important;
    border-radius:0!important;
    background:#fff!important;
    padding:12px 8px!important;
    scroll-snap-align:start!important;
    touch-action:none!important;
    user-select:none!important;
    -webkit-user-select:none!important;
  }
  .orobela-bb__beads img,
  .orobela-bb__controls.obb-focus-beads .orobela-bb__beads img{
    width:54px!important;
    height:54px!important;
    margin:0 auto 8px!important;
  }
  .orobela-bb__beads span,
  .orobela-bb__controls.obb-focus-beads .orobela-bb__beads span{
    font-size:10px!important;
    line-height:1.15!important;
    text-transform:uppercase!important;
    font-weight:800!important;
    letter-spacing:.01em!important;
  }
  .orobela-bb__beads small,
  .orobela-bb__controls.obb-focus-beads .orobela-bb__beads small{
    display:block!important;
    font-size:10px!important;
    margin-top:3px!important;
    font-weight:700!important;
    color:#111!important;
  }
  .orobela-bb__info{
    order:3!important;
    position:fixed!important;
    left:0!important; right:0!important; bottom:0!important;
    width:100vw!important; max-width:100vw!important;
    margin:0!important; margin-left:calc(50% - 50vw)!important;
    z-index:99!important;
    padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px))!important;
    border-radius:0!important;
    border:0!important;
    border-top:1px solid #ddd6cc!important;
    background:#fff!important;
    box-shadow:0 -10px 34px rgba(0,0,0,.14)!important;
  }
  .orobela-bb__info .orobela-bb__summary{display:grid!important;grid-template-columns:minmax(78px,auto) 1fr!important;gap:12px!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;}
  .orobela-bb__info .orobela-bb__total strong,.orobela-bb__info [data-obb-total]{font-size:22px!important;}
  .orobela-bb__info .orobela-bb__add{min-height:50px!important;border-radius:12px!important;}
}

/* v3.2.0: mobile canvas should own its own space; controls never overlay it. */
@media(max-width:900px){
  .orobela-bb{
    --obb-mobile-canvas:42vh!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:visible!important;
    min-height:0!important;
  }
  .orobela-bb.obb-mobile-focus-beads{
    --obb-mobile-canvas:42vh!important;
  }
  .orobela-bb__preview{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    order:1!important;
    z-index:1!important;
    min-height:300px!important;
    height:auto!important;
    padding:6px 0 10px!important;
    overflow:visible!important;
    flex:0 0 auto!important;
  }
  .orobela-bb__preview canvas{
    width:100%!important;
    height:var(--obb-mobile-canvas)!important;
    min-height:300px!important;
    max-height:440px!important;
    display:block!important;
    object-fit:contain!important;
    margin:0 auto!important;
  }
  .orobela-bb__controls,
  .orobela-bb__controls.obb-focus-beads{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    order:2!important;
    z-index:2!important;
    margin-top:0!important;
    transform:none!important;
    max-height:none!important;
  }
}

@media(max-width:480px){
  .orobela-bb,
  .orobela-bb.obb-mobile-focus-beads{--obb-mobile-canvas:40vh!important;}
  .orobela-bb__preview{min-height:285px!important;}
  .orobela-bb__preview canvas{min-height:285px!important;max-height:420px!important;}
}


/* v3.3 mobile bead tray scroll + tail rope alignment refinements */
@media(max-width:900px){
  .orobela-bb__section[data-obb-section="beads"] .obb-accordion__head{
    padding-left:14px!important;
  }
  .orobela-bb__section[data-obb-section="beads"] .obb-accordion__body,
  .orobela-bb__section[data-obb-section="beads"] .orobela-bb__beads{
    overflow-x:hidden!important;
  }
  .orobela-bb__section[data-obb-section="beads"] .obb-bead-group h4{
    padding-left:14px!important;
  }
  .orobela-bb__controls.obb-focus-beads .obb-bead-group__grid,
  .obb-mobile-focus-beads .obb-bead-group__grid,
  .orobela-bb__section[data-obb-section="beads"] .obb-bead-group__grid{
    display:flex!important;
    flex-wrap:nowrap!important;
    grid-template-columns:none!important;
    gap:0!important;
    padding:0 0 8px 14px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-x:contain!important;
    scroll-snap-type:x proximity!important;
    scrollbar-width:none!important;
    touch-action:pan-x!important;
    max-width:100%!important;
  }
  .orobela-bb__controls.obb-focus-beads .obb-bead-group__grid::-webkit-scrollbar,
  .obb-mobile-focus-beads .obb-bead-group__grid::-webkit-scrollbar,
  .orobela-bb__section[data-obb-section="beads"] .obb-bead-group__grid::-webkit-scrollbar{display:none!important;}
  .orobela-bb__controls.obb-focus-beads .orobela-bb__beads button,
  .obb-mobile-focus-beads .orobela-bb__beads button,
  .orobela-bb__section[data-obb-section="beads"] .orobela-bb__beads button{
    flex:0 0 96px!important;
    width:96px!important;
    min-width:96px!important;
    max-width:96px!important;
    border-radius:0!important;
    border:0!important;
    border-right:1px solid #eee8df!important;
    scroll-snap-align:start!important;
  }
}


/* v3.4.0: mobile horizontal bead rail + polished menu/subheader spacing */
@media(max-width:900px){
  .orobela-bb__controls.obb-focus-beads{
    gap:8px!important;
    padding:10px 12px 12px!important;
    background:#faf8f5!important;
  }
  .orobela-bb__controls.obb-focus-beads [data-obb-section="size"],
  .orobela-bb__controls.obb-focus-beads [data-obb-section="bead-size"]{
    border:1px solid #e7ded2!important;
    border-radius:12px!important;
    background:#fff!important;
    box-shadow:0 6px 18px rgba(26,18,10,.045)!important;
  }
  .orobela-bb__controls.obb-focus-beads .obb-accordion:not(.is-open) .obb-accordion__head{
    min-height:44px!important;
    padding:10px 12px!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    letter-spacing:.02em!important;
    background:#fff!important;
  }
  .orobela-bb__controls.obb-focus-beads .obb-accordion:not(.is-open) .obb-step{
    flex:0 0 18px!important;
    background:#f1ece5!important;
    color:#6a5641!important;
  }
  .orobela-bb__controls.obb-focus-beads .obb-accordion:not(.is-open) .obb-head-label{
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  .orobela-bb__controls.obb-focus-beads [data-obb-section="beads"]{
    border:1px solid #e7ded2!important;
    border-radius:0!important;
    background:#fff!important;
    overflow:hidden!important;
    box-shadow:0 8px 22px rgba(26,18,10,.05)!important;
  }
  .orobela-bb__controls.obb-focus-beads [data-obb-section="beads"].is-open .obb-accordion__head,
  .orobela-bb__section[data-obb-section="beads"] .obb-accordion__head{
    padding:13px 18px!important;
    background:#fff!important;
    border-bottom:1px solid #e7ded2!important;
    letter-spacing:.16em!important;
    box-shadow:none!important;
  }
  .orobela-bb__section[data-obb-section="beads"] .obb-accordion__body,
  .orobela-bb__section[data-obb-section="beads"] .orobela-bb__beads{
    overflow-x:visible!important;
    width:100%!important;
    max-width:100%!important;
  }
  .obb-bead-group,
  .orobela-bb__controls.obb-focus-beads .obb-bead-group{
    background:#fff!important;
    border-bottom:1px solid #ece5dc!important;
  }
  .obb-bead-group h4,
  .orobela-bb__controls.obb-focus-beads .obb-bead-group h4,
  .orobela-bb__section[data-obb-section="beads"] .obb-bead-group h4{
    padding:12px 18px!important;
    background:linear-gradient(90deg,#f4efe8,#ebe5dc)!important;
    color:#1b1713!important;
    border-top:1px solid #f8f4ef!important;
    border-bottom:1px solid #e2dacd!important;
    font-size:10px!important;
    letter-spacing:.18em!important;
    font-weight:900!important;
  }
  .obb-bead-group__grid,
  .orobela-bb__controls.obb-focus-beads .obb-bead-group__grid,
  .obb-mobile-focus-beads .obb-bead-group__grid,
  .orobela-bb__section[data-obb-section="beads"] .obb-bead-group__grid{
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:8px 14px 10px 18px!important;
    gap:0!important;
    max-width:100%!important;
    width:100%!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-x:contain!important;
    scroll-snap-type:x proximity!important;
    touch-action:pan-x!important;
    scrollbar-width:thin!important;
  }
  .obb-bead-group__grid::-webkit-scrollbar,
  .orobela-bb__controls.obb-focus-beads .obb-bead-group__grid::-webkit-scrollbar,
  .obb-mobile-focus-beads .obb-bead-group__grid::-webkit-scrollbar,
  .orobela-bb__section[data-obb-section="beads"] .obb-bead-group__grid::-webkit-scrollbar{
    height:3px!important;
    display:block!important;
  }
  .obb-bead-group__grid::-webkit-scrollbar-thumb,
  .orobela-bb__controls.obb-focus-beads .obb-bead-group__grid::-webkit-scrollbar-thumb,
  .obb-mobile-focus-beads .obb-bead-group__grid::-webkit-scrollbar-thumb,
  .orobela-bb__section[data-obb-section="beads"] .obb-bead-group__grid::-webkit-scrollbar-thumb{
    background:#d6cabc!important;
    border-radius:999px!important;
  }
  .orobela-bb__beads [data-add-bead],
  .orobela-bb__beads button,
  .orobela-bb__controls.obb-focus-beads .orobela-bb__beads button,
  .obb-mobile-focus-beads .orobela-bb__beads button,
  .orobela-bb__section[data-obb-section="beads"] .orobela-bb__beads button{
    touch-action:pan-x!important;
    -ms-touch-action:pan-x!important;
    flex:0 0 96px!important;
    width:96px!important;
    min-width:96px!important;
    max-width:96px!important;
  }
  .orobela-bb__beads img{pointer-events:none!important;}
}

/* v3.5.0: bead-size options always visible on mobile/tablet; bead catalog scroll unchanged */
@media(max-width:900px){
  .orobela-bb__controls.obb-focus-beads [data-obb-section="bead-size"].is-open{
    overflow:visible!important;
  }
  .orobela-bb__controls.obb-focus-beads [data-obb-section="bead-size"].is-open .obb-accordion__body,
  .orobela-bb__section[data-obb-section="bead-size"].is-open .obb-accordion__body{
    display:block!important;
    overflow:visible!important;
    max-height:none!important;
    height:auto!important;
    padding:4px 16px 16px!important;
  }
  .orobela-bb__controls.obb-focus-beads [data-obb-section="bead-size"] .orobela-bb__pills,
  .orobela-bb__section[data-obb-section="bead-size"] .orobela-bb__pills{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:8px!important;
    overflow:visible!important;
    max-height:none!important;
    height:auto!important;
    padding:0!important;
  }
  .orobela-bb__controls.obb-focus-beads [data-obb-section="bead-size"] .orobela-bb__pills button,
  .orobela-bb__section[data-obb-section="bead-size"] .orobela-bb__pills button{
    min-width:0!important;
    width:100%!important;
    padding:13px 6px!important;
    border-radius:11px!important;
    white-space:nowrap!important;
  }
}

/* v3.6.0: pin controls above cart on mobile; stone/gold toggle only */
.obb-bead-cats{display:none;}
.obb-bead-empty{margin:0;padding:12px 16px;font-size:12px;color:#8a7f72;text-align:center;}

@media(max-width:900px){
  .orobela-bb.obb-mobile{
    --obb-mobile-cart-gap:4px;
    --obb-mobile-dock:200px;
    padding-bottom:0!important;
  }
  .orobela-bb.obb-mobile .orobela-bb__preview{
    min-height:0!important;
    padding:4px 0 0!important;
    margin-bottom:0!important;
  }
  .orobela-bb.obb-mobile .orobela-bb__preview canvas{
    height:calc(87dvh - var(--obb-mobile-bar) - var(--obb-mobile-dock) - var(--obb-mobile-cart-gap) - env(safe-area-inset-bottom,0px) - 8px)!important;
    min-height:280px!important;
    max-height:none!important;
  }
  .orobela-bb.obb-mobile .orobela-bb__controls{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:calc(var(--obb-mobile-bar) + 10px + var(--obb-mobile-cart-gap) + env(safe-area-inset-bottom,0px))!important;
    top:auto!important;
    z-index:80!important;
    width:100%!important;
    max-width:100vw!important;
    max-height:min(55vh,420px)!important;
    margin:0!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    box-shadow:0 -8px 32px rgba(0,0,0,.08)!important;
  }
  .orobela-bb.obb-mobile [data-obb-section="beads"].is-open .obb-accordion__body{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
  }
  .orobela-bb.obb-mobile [data-obb-section="beads"].is-open .obb-bead-cats{
    display:inline-flex!important;
    align-self:center!important;
    width:auto!important;
    max-width:calc(100% - 24px)!important;
    margin:0 auto 10px!important;
    padding:3px!important;
    border:1px solid #e7ded2!important;
    border-radius:999px!important;
    background:#f6f2eb!important;
    gap:0!important;
  }
  .orobela-bb.obb-mobile .obb-bead-cats button{
    border:0!important;
    background:transparent!important;
    border-radius:999px!important;
    padding:7px 18px!important;
    font-size:10px!important;
    font-weight:700!important;
    letter-spacing:.12em!important;
    text-transform:uppercase!important;
    color:#6f604d!important;
    line-height:1!important;
    min-height:0!important;
    box-shadow:none!important;
  }
  .orobela-bb.obb-mobile .obb-bead-cats button.is-active{
    background:#111!important;
    color:#fff!important;
  }
  .orobela-bb.obb-mobile [data-obb-section="beads"].is-open .obb-bead-group h4{display:none!important;}
  .orobela-bb.obb-mobile [data-obb-section="bead-size"].is-open .obb-accordion__body{
    padding:4px 16px 16px!important;
  }
  .orobela-bb.obb-mobile [data-obb-section="size"].is-open .obb-accordion__body{
    padding:4px 16px 16px!important;
  }
  .orobela-bb.obb-mobile [data-obb-section="bead-size"] .orobela-bb__pills{
    padding:0!important;
  }
}

/* asset loading bar */
.orobela-bb__preview{position:relative!important;}
.obb-loader{
  position:absolute;
  inset:0;
  z-index:6;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:24px;
  background:rgba(248,246,242,.94);
  transition:opacity .35s ease,visibility .35s ease;
}
.orobela-bb.obb-is-ready .obb-loader{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.obb-loader__track{
  width:min(260px,72%);
  height:3px;
  border-radius:999px;
  background:#e7ded2;
  overflow:hidden;
}
.obb-loader__bar{
  height:100%;
  width:0;
  border-radius:999px;
  background:linear-gradient(90deg,#a47a3d,#111);
  transition:width .25s ease;
}
.obb-loader__label{
  font-size:11px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#6f604d;
}
.orobela-bb.obb-is-loading .orobela-bb__preview canvas{
  opacity:.35;
  transition:opacity .35s ease;
}
.orobela-bb.obb-is-ready .orobela-bb__preview canvas{opacity:1;}

/* open accordions: no bottom border on section or header */
.orobela-bb__section.obb-accordion.is-open{
  border-bottom:0!important;
}
.orobela-bb__section.obb-accordion.is-open .obb-accordion__head{
  border-bottom:0!important;
  box-shadow:none!important;
}
@media(max-width:900px){
  .orobela-bb__section.obb-accordion.is-open{
    border-bottom:0!important;
  }
  .orobela-bb__section.obb-accordion.is-open .obb-accordion__head,
  .orobela-bb__controls.obb-focus-beads [data-obb-section].is-open .obb-accordion__head,
  .orobela-bb__section[data-obb-section].is-open .obb-accordion__head{
    border-bottom:0!important;
    box-shadow:none!important;
  }
  .orobela-bb.obb-mobile [data-obb-section="beads"] .obb-accordion__head,
  .orobela-bb__section[data-obb-section="beads"] .obb-accordion__head,
  .orobela-bb__controls.obb-focus-beads [data-obb-section="beads"] .obb-accordion__head{
    padding:13px 16px!important;
  }
}