/* Marom Bracelet Builder — all rules scoped under .mbb-app, all classes mbb-* */
.mbb-app{
  --mbb-ground:#F1EDE6; --mbb-surface:#FBF9F5; --mbb-surface-2:#F4F0E8;
  --mbb-ink:#211E19; --mbb-muted:#6E6656; --mbb-line:#DED7C8;
  --mbb-gold:#A9834B; --mbb-gold-soft:#C6A25E; --mbb-gold-lo:#B08843;
  --mbb-enamel:#AF382F; --mbb-steel-hi:#EEF0F2; --mbb-steel-lo:#AEB4BB;
  --mbb-gold-hi:#F1DCA8; --mbb-gold-lo2:#B08843;
  --mbb-shadow:0 1px 2px rgba(33,30,25,.06),0 8px 30px rgba(33,30,25,.10);
  --mbb-radius:14px;
  --mbb-font:"Assistant","Segoe UI","Arial Hebrew",Arial,sans-serif;
  --mbb-mark:Georgia,"Times New Roman",serif;
  --mbb-step:clamp(56px,12vw,72px);

  direction:rtl; color:var(--mbb-ink); font-family:var(--mbb-font);
  background:radial-gradient(120% 80% at 50% -10%, color-mix(in oklab,var(--mbb-gold-soft) 12%,var(--mbb-ground)) 0%, var(--mbb-ground) 55%);
  border:1px solid var(--mbb-line); border-radius:var(--mbb-radius);
  padding:clamp(12px,2.5vw,20px); line-height:1.5; -webkit-font-smoothing:antialiased;
}
@media (prefers-color-scheme:dark){
  .mbb-app{
    --mbb-ground:#14130F; --mbb-surface:#1D1B15; --mbb-surface-2:#252219;
    --mbb-ink:#F1ECE0; --mbb-muted:#A79E8A; --mbb-line:#322D22;
    --mbb-gold:#CBA463; --mbb-gold-soft:#B9954F; --mbb-gold-lo:#CBA463;
    --mbb-enamel:#D2574D; --mbb-steel-hi:#C4C9CF; --mbb-steel-lo:#6C727A;
    --mbb-gold-hi:#E7CC8E; --mbb-gold-lo2:#8C6C34;
    --mbb-shadow:0 1px 2px rgba(0,0,0,.4),0 12px 40px rgba(0,0,0,.5);
  }
}
.mbb-app *{box-sizing:border-box;}

.mbb-top{margin-bottom:12px;}
.mbb-h1{margin:0 0 6px; font-size:clamp(1.5rem,4vw,2.2rem); font-weight:800; letter-spacing:-.02em; line-height:1.1; text-wrap:balance;}
.mbb-sub{margin:0; color:var(--mbb-muted); max-width:52ch;}

/* two-column layout: builder + catalogue on the left, product preview on the right */
.mbb-cols{display:flex; flex-direction:column; gap:22px;}
@media (min-width:900px){
  .mbb-cols{flex-direction:row; align-items:flex-start;}
  /* align-self on the children forces natural height even if the theme sets the
     row to stretch — this keeps the stage compact instead of spread out. */
  .mbb-main{flex:1 1 auto; min-width:0; align-self:flex-start;}
  .mbb-side{flex:0 0 300px; width:300px; position:sticky; top:10px; align-self:flex-start;}
}
.mbb-side{display:flex; flex-direction:column;}

.mbb-preview{
  background:linear-gradient(180deg,var(--mbb-surface),var(--mbb-surface-2));
  border:1px solid var(--mbb-line); border-radius:var(--mbb-radius);
  box-shadow:var(--mbb-shadow); padding:16px; text-align:center; min-height:200px;
  display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center;
}
.mbb-pv-empty{color:var(--mbb-muted); font-size:.9rem; line-height:1.5; padding:24px 8px;}
.mbb-pv-card{display:flex; flex-direction:column; gap:12px; align-items:center; width:100%;}
/* class display rules override the [hidden] attribute, so restore it explicitly */
.mbb-pv-card[hidden]{display:none;}
.mbb-pv-img{width:210px; height:210px; max-width:100%; flex:0 0 auto; border-radius:16px; display:grid; place-items:center; overflow:visible;
  background:linear-gradient(150deg,var(--mbb-steel-hi),var(--mbb-steel-lo)); box-shadow:inset 0 2px 3px rgba(255,255,255,.5),inset 0 -4px 8px rgba(0,0,0,.25);}
.mbb-pv-img.mbb-gold{background:linear-gradient(150deg,var(--mbb-gold-hi),var(--mbb-gold-lo2));}
.mbb-pv-img.mbb-hasimg{background:none; box-shadow:none;}
/* Intrinsic max sizing (never shrinks the box, never clips) — the whole charm
   always fits fully inside the preview. */
.mbb-pv-img img{max-width:100%; max-height:100%; width:auto; height:auto;}
.mbb-pv-name{font-size:1.05rem; font-weight:700; line-height:1.3; text-wrap:balance;}
.mbb-pv-price{font-size:1.35rem; font-weight:800; color:var(--mbb-gold-lo); font-variant-numeric:tabular-nums;}
.mbb-pv-card .mbb-btn{width:100%;}

.mbb-stage{
  position:sticky; top:10px; z-index:5;
  background:linear-gradient(180deg,var(--mbb-surface),var(--mbb-surface-2));
  border:1px solid var(--mbb-line); border-radius:var(--mbb-radius);
  box-shadow:var(--mbb-shadow); padding:clamp(12px,2vw,18px); margin-bottom:14px;
}
.mbb-sizes{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:10px;}
.mbb-size{border:1px solid var(--mbb-line); background:var(--mbb-surface); color:var(--mbb-ink);
  padding:8px 14px; border-radius:12px; cursor:pointer; font:inherit; min-width:84px; line-height:1.25;
  display:flex; flex-direction:column; align-items:center; gap:1px; transition:all .15s ease;}
.mbb-size b{font-weight:800; font-size:.9rem; letter-spacing:.02em;}
.mbb-size small{color:var(--mbb-muted); font-size:.72rem;}
.mbb-size .mbb-size-cm{color:var(--mbb-gold-lo); font-weight:600;}
.mbb-size:hover{border-color:var(--mbb-gold-soft);}
.mbb-size[aria-pressed="true"]{border-color:var(--mbb-gold);
  background:color-mix(in oklab,var(--mbb-gold) 14%,var(--mbb-surface)); box-shadow:inset 0 0 0 1px var(--mbb-gold);}
.mbb-lbl{font-size:.875rem; color:var(--mbb-muted); margin-inline-end:4px;}

.mbb-bench{position:relative; padding:2px 0;}
/* The lane is given real HEIGHT (min-height) rather than bottom padding — a
   horizontal scroll strip doesn't reliably keep bottom padding as clip room, so
   hanging charms need actual vertical space in the content box. Tiles sit at the
   top; charms hang down into the space below. */
.mbb-rail{display:flex; align-items:flex-start; gap:0; overflow-x:auto; overflow-y:visible;
  min-height:calc(var(--mbb-step)*1.5); padding:8px 6px 4px; scrollbar-width:thin;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);}
.mbb-rail::-webkit-scrollbar{height:6px;}
.mbb-rail::-webkit-scrollbar-thumb{background:var(--mbb-line); border-radius:999px;}
.mbb-clasp{flex:0 0 auto; width:16px; height:30px; border-radius:6px;
  background:linear-gradient(180deg,var(--mbb-steel-hi),var(--mbb-steel-lo));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.6),inset 0 -2px 3px rgba(0,0,0,.25);}
/* The bracelet strip itself reads left→right like the physical piece, so the
   fixed Nomination brand link sits on the far left as on the official site. */
.mbb-app .mbb-rail{direction:ltr;}
/* Permanent, non-interactive Nomination logo link (always leftmost). */
.mbb-brandlink{flex:0 0 auto; cursor:default;}
.mbb-brandlink:hover{transform:none;}
/* Same brushed-steel tile as the standard links, so shape/size/perspective match exactly. */
.mbb-link.mbb-brandtile{
  background:linear-gradient(180deg,
    var(--mbb-steel-hi) 0%, var(--mbb-steel-lo) 26%,
    var(--mbb-steel-hi) 50%, var(--mbb-steel-lo) 74%, var(--mbb-steel-hi) 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.85), inset 0 -2px 3px rgba(0,0,0,.20), inset 0 0 0 1px rgba(0,0,0,.10);}
/* Top & bottom metal rails — identical to the empty/standard links. */
.mbb-link.mbb-brandtile::before{
  content:""; position:absolute; left:9%; right:9%; top:15%; bottom:15%;
  border-radius:3px; pointer-events:none;
  border-top:1.5px solid rgba(255,255,255,.55);
  border-bottom:1.5px solid rgba(0,0,0,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(0,0,0,.10);}
/* The real logo emblem sits centred on the tile's face, small enough that the
   top and bottom metal rails stay fully visible. The two-class selector beats
   the generic ".mbb-link img { width/height:100% }" rule. */
.mbb-link.mbb-brandtile img.mbb-brandlogo-img{
  position:absolute; inset:0; margin:auto; width:40%; height:40%; object-fit:contain; pointer-events:none;}
.mbb-logo{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;}
.mbb-logo svg{width:80%; height:80%; filter:drop-shadow(0 1px 1px rgba(255,255,255,.35));}

/* Tiles use the real Composable-link proportion (~1.11:1, slightly wider than tall)
   so the empty steel links and the product links are exactly the same size. */
.mbb-slot{flex:0 0 auto; width:var(--mbb-step); height:calc(var(--mbb-step)*0.9); border:none; padding:0; cursor:pointer;
  border-radius:9px; position:relative; background:transparent; font:inherit;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1);}
.mbb-link{position:absolute; inset:0; border-radius:9px; display:grid; place-items:center; overflow:hidden;
  box-shadow:inset 0 2px 2px rgba(255,255,255,.55),inset 0 -3px 5px rgba(0,0,0,.28),0 2px 4px rgba(0,0,0,.18);}
.mbb-link.mbb-steel{background:linear-gradient(150deg,var(--mbb-steel-hi) 8%,var(--mbb-steel-lo) 92%);}
.mbb-link.mbb-gold{background:linear-gradient(150deg,var(--mbb-gold-hi) 8%,var(--mbb-gold-lo2) 92%);}
/* Empty slot = a realistic stainless-steel Composable base link (brushed metal,
   top/bottom rails, faint "Nomination" wordmark) — like the real bracelet. */
.mbb-link.mbb-empty{
  background:linear-gradient(180deg,
    var(--mbb-steel-hi) 0%, var(--mbb-steel-lo) 26%,
    var(--mbb-steel-hi) 50%, var(--mbb-steel-lo) 74%, var(--mbb-steel-hi) 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.85),
    inset 0 -2px 3px rgba(0,0,0,.20),
    inset 0 0 0 1px rgba(0,0,0,.10);
}
.mbb-link.mbb-empty::before{
  content:""; position:absolute; left:9%; right:9%; top:15%; bottom:15%;
  border-radius:3px; pointer-events:none;
  border-top:1.5px solid rgba(255,255,255,.55);
  border-bottom:1.5px solid rgba(0,0,0,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(0,0,0,.10);
}
.mbb-link.mbb-empty::after{
  content:"Nomination"; position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--mbb-mark); font-style:italic; white-space:nowrap;
  font-size:calc(var(--mbb-step)*0.135); letter-spacing:.01em;
  color:rgba(74,84,94,.42); text-shadow:0 1px 0 rgba(255,255,255,.55); pointer-events:none;
}
@media (prefers-color-scheme:dark){
  .mbb-link.mbb-empty::after{ color:rgba(18,22,26,.55); text-shadow:0 1px 0 rgba(255,255,255,.18); }
}
.mbb-link img{width:100%; height:100%; object-fit:contain;}
/* Pendants (taller than wide — the class is added to .mbb-link by JS): the link
   sits in the band and the charm hangs BELOW; the tile keeps the standard size.
   The charm is capped to a fixed hang length and centred, so ANY tall pendant
   shows in full within the lane (never cut), whatever its source aspect ratio. */
.mbb-rail .mbb-link.mbb-tall{overflow:visible; background:none; box-shadow:none;}
.mbb-rail .mbb-link.mbb-tall img{
  width:auto; height:auto; max-width:100%; max-height:calc(var(--mbb-step)*1.3);
  position:absolute; top:0; left:50%; transform:translateX(-50%);}
/* Double links occupy TWO slots on the bracelet. */
.mbb-slot.mbb-double{width:calc(var(--mbb-step)*2);}
/* In the catalogue/preview, a double link keeps its full 2:1 shape. */
.mbb-chip.mbb-wide img,.mbb-pv-img.mbb-wide img{object-fit:contain;}
.mbb-chip.mbb-wide,.mbb-pv-img.mbb-wide{aspect-ratio:auto;}
/* When the link carries its own product image (with its own metal frame), drop
   the tile's synthetic frame so links sit flush like a real bracelet band. */
.mbb-link.mbb-hasimg{background:none; box-shadow:none;}
.mbb-chip.mbb-hasimg{background:none; box-shadow:none;}
.mbb-slot.mbb-drop{transform:translateY(-4px);}
.mbb-slot.mbb-drop .mbb-link{outline:2px dashed var(--mbb-gold); outline-offset:-2px;}
.mbb-card{cursor:grab;}
.mbb-card:active{cursor:grabbing;}
.mbb-link .mbb-ltr{font-family:var(--mbb-mark); font-weight:700; font-size:calc(var(--mbb-step)*.4); line-height:1; color:#3d434a; text-shadow:0 1px 0 rgba(255,255,255,.55);}
.mbb-link.mbb-gold .mbb-ltr{color:#6d5220;}
.mbb-slot .mbb-idx{position:absolute; inset-block-end:-20px; inset-inline:0; text-align:center; font-size:.75rem; color:var(--mbb-muted); font-variant-numeric:tabular-nums;}
.mbb-slot:hover{transform:translateY(-4px);}
.mbb-slot.mbb-sel{transform:translateY(-4px);}
.mbb-slot.mbb-sel .mbb-link{outline:2px solid var(--mbb-gold); outline-offset:3px;}
.mbb-slot .mbb-rm{position:absolute; inset-block-start:-8px; inset-inline-start:-8px; width:22px; height:22px; border-radius:50%;
  background:var(--mbb-enamel); color:#fff; border:2px solid var(--mbb-surface); display:none; place-items:center; font-size:13px; line-height:1; cursor:pointer;}
.mbb-slot.mbb-filled:hover .mbb-rm,.mbb-slot.mbb-filled.mbb-sel .mbb-rm{display:grid;}
.mbb-slot:focus-visible{outline:2px solid var(--mbb-gold); outline-offset:4px; border-radius:13px;}
@keyframes mbb-pop{0%{transform:scale(.4);opacity:0;}100%{transform:scale(1);opacity:1;}}
.mbb-link.mbb-snap{animation:mbb-pop .28s cubic-bezier(.34,1.56,.64,1);}

.mbb-meta{display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; margin-top:12px; padding-top:12px; border-top:1px solid var(--mbb-line);}
.mbb-count{font-size:.875rem; color:var(--mbb-muted);}
.mbb-count b{color:var(--mbb-ink); font-size:1.15rem; font-variant-numeric:tabular-nums;}
.mbb-total{margin-inline-start:auto; text-align:start;}
.mbb-k{font-size:.75rem; color:var(--mbb-muted); letter-spacing:.04em;}
.mbb-v{font-size:2rem; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.02em;}
.mbb-cur{font-size:.6em; color:var(--mbb-gold-lo); font-weight:700;}
.mbb-actions{display:flex; gap:10px;}
.mbb-btn{font:inherit; font-size:1rem; border-radius:999px; padding:12px 22px; cursor:pointer; border:1px solid transparent; font-weight:700; transition:all .15s ease;}
.mbb-ghost{background:transparent; border-color:var(--mbb-line); color:var(--mbb-muted); font-weight:600;}
.mbb-ghost:hover{color:var(--mbb-ink); border-color:var(--mbb-muted);}
.mbb-cta{background:linear-gradient(180deg,var(--mbb-gold-soft),var(--mbb-gold)); color:#231a08; box-shadow:var(--mbb-shadow);}
.mbb-cta:hover{filter:brightness(1.05); transform:translateY(-1px);}
.mbb-cta[disabled]{opacity:.6; cursor:progress; transform:none;}
.mbb-btn:focus-visible{outline:2px solid var(--mbb-gold); outline-offset:3px;}

.mbb-cat-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:4px 2px 14px;}
.mbb-h2{margin:0; font-size:1.5rem; font-weight:800; letter-spacing:-.01em;}
.mbb-cat-head span{color:var(--mbb-muted); font-size:.875rem;}
.mbb-tabs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px;}
.mbb-tab{border:1px solid var(--mbb-line); background:var(--mbb-surface); color:var(--mbb-muted); padding:8px 15px; border-radius:999px; cursor:pointer; font:inherit; font-size:.875rem; font-weight:600; transition:all .15s ease;}
.mbb-tab:hover{color:var(--mbb-ink);}
.mbb-tab[aria-selected="true"]{background:var(--mbb-ink); color:var(--mbb-ground); border-color:var(--mbb-ink);}

.mbb-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:12px;}
.mbb-card{background:var(--mbb-surface); border:1px solid var(--mbb-line); border-radius:var(--mbb-radius); padding:12px; cursor:pointer; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; transition:all .16s ease; font:inherit;}
.mbb-card:hover{border-color:var(--mbb-gold-soft); transform:translateY(-3px); box-shadow:var(--mbb-shadow);}
.mbb-card:focus-visible{outline:2px solid var(--mbb-gold); outline-offset:2px;}
.mbb-chip{width:60px; height:60px; border-radius:12px; display:grid; place-items:center; overflow:hidden;
  box-shadow:inset 0 2px 2px rgba(255,255,255,.5),inset 0 -3px 5px rgba(0,0,0,.25);}
.mbb-chip.mbb-steel{background:linear-gradient(150deg,var(--mbb-steel-hi),var(--mbb-steel-lo));}
.mbb-chip.mbb-gold{background:linear-gradient(150deg,var(--mbb-gold-hi),var(--mbb-gold-lo2));}
.mbb-chip img{width:82%; height:82%; object-fit:contain;}
.mbb-chip .mbb-ltr{font-family:var(--mbb-mark); font-weight:700; font-size:1.5rem; color:#3d434a;}
.mbb-chip.mbb-gold .mbb-ltr{color:#6d5220;}
.mbb-nm{font-size:.875rem; font-weight:600; line-height:1.25;}
.mbb-pr{font-size:.75rem; color:var(--mbb-gold-lo); font-weight:700; font-variant-numeric:tabular-nums;}
.mbb-empty-msg{grid-column:1/-1; color:var(--mbb-muted); text-align:center; padding:24px;}

.mbb-toast{position:fixed; inset-block-end:24px; inset-inline:0; margin:auto; width:max-content; max-width:90vw;
  background:var(--mbb-ink); color:var(--mbb-ground); padding:12px 22px; border-radius:999px; font-size:.875rem; font-weight:600;
  box-shadow:var(--mbb-shadow); opacity:0; transform:translateY(12px); pointer-events:none; transition:all .25s ease; z-index:9999;}
.mbb-toast.mbb-on{opacity:1; transform:translateY(0);}

/* Floating tile that follows the finger during a touch drag (mobile). Positioned
   in body (outside .mbb-app), so its size is set inline by JS. pointer-events:none
   keeps it from blocking elementFromPoint hit-testing under the finger. */
.mbb-drag-ghost{position:fixed; z-index:99999; pointer-events:none;
  transform:translate(-50%,-135%) scale(1.06); opacity:.94;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.38)); will-change:left,top;}
.mbb-drag-ghost .mbb-link,.mbb-drag-ghost .mbb-chip{position:relative; inset:auto; width:100%; height:100%; border-radius:9px;}
/* Suppress the long-press image callout / selection on draggable pieces so a
   touch-hold starts our drag instead of the OS "open image?" popup. */
.mbb-app .mbb-card,.mbb-app .mbb-slot,.mbb-app .mbb-link,.mbb-app .mbb-chip,
.mbb-app .mbb-card img,.mbb-app .mbb-slot img,.mbb-app .mbb-link img,.mbb-app .mbb-chip img,
.mbb-drag-ghost,.mbb-drag-ghost *{
  -webkit-touch-callout:none; -webkit-user-select:none; -moz-user-select:none; user-select:none;
  -webkit-user-drag:none;}

@media (max-width:560px){.mbb-total{margin-inline-start:0;} .mbb-actions{width:100%;} .mbb-cta{flex:1;}}

/* ── Mobile: keep the builder compact so the catalogue is reachable ── */
@media (max-width:900px){
  /* Sticky bracelet on mobile: the stage (sizes + bracelet + total/add) stays
     pinned to the top of the screen while the customer scrolls the charm
     catalogue below it — so the bracelet is always visible while browsing,
     matching the desktop experience. */
  .mbb-stage{position:sticky; top:0; z-index:20;
    box-shadow:0 8px 20px rgba(33,30,25,.16), 0 1px 2px rgba(33,30,25,.08);}
  .mbb-side{position:static;}
}
@media (max-width:640px){
  .mbb-app{padding:14px 10px;}
  .mbb-top{margin-bottom:12px;}
  .mbb-h1{font-size:1.35rem; margin:0 0 4px;}
  .mbb-sub{font-size:.85rem;}
  .mbb-stage{padding:12px; margin-bottom:14px;}
  /* size chips in one swipeable row instead of two stacked rows */
  .mbb-lbl{display:none;}
  .mbb-sizes{flex-wrap:nowrap; overflow-x:auto; gap:6px; margin-bottom:12px; padding-bottom:2px; scrollbar-width:none;}
  .mbb-sizes::-webkit-scrollbar{display:none;}
  .mbb-size{flex:0 0 auto; min-width:auto; padding:6px 12px;}
  .mbb-size b{font-size:.82rem;} .mbb-size small{font-size:.66rem;}
  /* shorter bracelet lane (less hanging-charm reserve) */
  .mbb-rail{min-height:calc(var(--mbb-step)*1.75); padding:10px 6px 6px;}
  .mbb-rail .mbb-link.mbb-tall img{max-height:calc(var(--mbb-step)*1.4);}
  .mbb-meta{gap:10px 16px; margin-top:14px; padding-top:12px;}
  .mbb-v{font-size:1.7rem;}
  .mbb-count{font-size:.8rem;}
  /* smaller catalogue tiles → more fit per row */
  .mbb-grid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:10px;}
  .mbb-cat-head{margin:2px 2px 10px;} .mbb-h2{font-size:1.25rem;}
}
@media (prefers-reduced-motion:reduce){.mbb-app *{animation:none!important; transition:none!important;}}