/* =========================================================
   V34 — Mobile UX + icon stability
   - Bottom-sheet configurator for Atelier 3D
   - Stable mobile header/bottom navigation icons
   ========================================================= */

.bo-icon{
  display:block;
  width:22px;
  height:22px;
  min-width:22px;
  min-height:22px;
  max-width:none;
  max-height:none;
  flex:0 0 auto;
  overflow:visible;
  transform:none;
  vector-effect:non-scaling-stroke;
}

.studio-mobile-sheet-toggle,
.studio-mobile-sheet-close{
  display:none;
}

@media (max-width:899px){
  /* ---------- Header icons ---------- */
  .topbar-v7{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    flex-wrap:nowrap!important;
    width:100%;
    height:64px!important;
    min-height:64px;
    padding:7px 9px!important;
    gap:4px!important;
    overflow:hidden;
  }

  .topbar-v7 .menu-toggle{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    flex:0 0 38px!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
  }

  .topbar-v7 .menu-toggle .bo-icon{
    width:23px!important;
    height:23px!important;
    min-width:23px!important;
    min-height:23px!important;
  }

  .brand-v7{
    flex:1 1 auto!important;
    min-width:0!important;
    max-width:none!important;
    justify-content:center!important;
    gap:6px!important;
    overflow:hidden;
  }

  .brand-v7 img{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    flex:0 0 36px!important;
  }

  .brand-v7 span{
    min-width:0;
    overflow:hidden;
  }

  .brand-v7 b,
  .brand-v7 small{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .top-actions{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    flex:0 0 auto!important;
    gap:1px!important;
    min-width:0!important;
  }

  .top-actions .plain-icon{
    width:32px!important;
    height:38px!important;
    min-width:32px!important;
    flex:0 0 32px!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
  }

  .top-actions .plain-icon .bo-icon{
    width:21px!important;
    height:21px!important;
    min-width:21px!important;
    min-height:21px!important;
  }

  .cart-btn-v7 b{
    top:0!important;
    right:-1px!important;
    min-width:16px!important;
    height:16px!important;
    padding:0 3px!important;
    font-size:9px!important;
    line-height:16px!important;
  }

  /* ---------- Bottom nav icons ---------- */
  .bottom-nav-v7{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    align-items:stretch!important;
    justify-items:stretch!important;
    height:76px!important;
    min-height:76px!important;
    padding:5px 4px calc(5px + env(safe-area-inset-bottom))!important;
    overflow:hidden!important;
  }

  .bottom-nav-v7 a{
    min-width:0!important;
    width:auto!important;
    height:100%!important;
    padding:3px 1px!important;
    margin:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    line-height:1!important;
    overflow:hidden!important;
  }

  .bottom-nav-v7 a .bo-icon{
    display:block!important;
    width:23px!important;
    height:23px!important;
    min-width:23px!important;
    min-height:23px!important;
    flex:0 0 23px!important;
    margin:0 auto!important;
    transform:none!important;
  }

  .bottom-nav-v7 small{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0 1px!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
    text-align:center!important;
    font-size:9px!important;
    line-height:1.25!important;
  }

  /* ---------- Atelier 3D mobile layout ---------- */
  body.page-bracelet-studio .studio-hero{
    display:none;
  }

  body.page-bracelet-studio .main-content{
    padding-right:7px;
    padding-left:7px;
    padding-bottom:140px;
  }

  body.page-bracelet-studio .bracelet-studio{
    display:block!important;
    width:100%!important;
    margin:8px auto 125px!important;
    direction:rtl;
  }

  body.page-bracelet-studio .studio-viewer-panel{
    position:relative;
    z-index:2;
    width:100%;
    padding:8px!important;
    border-radius:18px!important;
  }

  body.page-bracelet-studio .bracelet-viewer{
    height:clamp(320px,52dvh,480px)!important;
    min-height:320px;
    border-radius:14px!important;
  }

  body.page-bracelet-studio .viewer-actions{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    padding-top:8px!important;
  }

  body.page-bracelet-studio .viewer-actions button{
    width:100%;
    min-width:0;
    min-height:44px;
    padding:7px 4px!important;
    font-size:11px!important;
    line-height:1.25;
  }

  body.page-bracelet-studio .studio-hint{
    padding:7px 6px 4px!important;
    font-size:10px!important;
    line-height:1.5;
  }

  body.page-bracelet-studio .studio-config-panel{
    position:fixed!important;
    left:max(7px,calc(50% - 253px))!important;
    right:max(7px,calc(50% - 253px))!important;
    bottom:calc(76px + env(safe-area-inset-bottom))!important;
    top:auto!important;
    z-index:89!important;
    width:auto!important;
    max-width:506px!important;
    max-height:min(61dvh,620px)!important;
    margin:0 auto!important;
    padding:0!important;
    border-radius:24px 24px 0 0!important;
    overflow:hidden!important;
    transform:translateY(calc(100% - 66px));
    transition:transform .28s cubic-bezier(.2,.75,.2,1),box-shadow .28s ease;
    box-shadow:0 -18px 55px rgba(0,0,0,.52)!important;
    overscroll-behavior:contain;
    touch-action:pan-y;
  }

  body.page-bracelet-studio .studio-config-panel.is-open{
    transform:translateY(0);
    box-shadow:0 -24px 80px rgba(0,0,0,.72)!important;
  }

  .studio-mobile-sheet-toggle{
    position:relative;
    width:100%;
    height:66px;
    min-height:66px;
    border:0;
    border-bottom:1px solid rgba(215,165,55,.22);
    padding:9px 14px 8px;
    background:linear-gradient(180deg,#17120b,#0a0805);
    color:#f0c76a;
    display:grid;
    grid-template-columns:32px minmax(0,1fr) 28px;
    gap:10px;
    align-items:center;
    text-align:right;
    cursor:pointer;
  }

  .studio-mobile-sheet-toggle::before{
    content:"";
    position:absolute;
    top:6px;
    left:50%;
    width:44px;
    height:4px;
    border-radius:99px;
    background:rgba(240,199,106,.34);
    transform:translateX(-50%);
  }

  .studio-mobile-sheet-toggle .studio-mobile-sheet-number{
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:linear-gradient(135deg,#f0c76a,#b57b18);
    color:#171006;
    font-weight:900;
    font-size:14px;
  }

  .studio-mobile-sheet-copy{
    min-width:0;
    display:grid;
    gap:1px;
  }

  .studio-mobile-sheet-copy strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:14px;
    color:#f0c76a;
  }

  .studio-mobile-sheet-copy small{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:10px;
    color:#a99d88;
  }

  .studio-mobile-sheet-chevron{
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    color:#f0c76a;
    font-size:20px;
    transition:transform .25s ease;
  }

  .studio-config-panel.is-open .studio-mobile-sheet-chevron{
    transform:rotate(180deg);
  }

  .studio-config-scroll{
    max-height:calc(min(61dvh,620px) - 66px);
    padding:12px 12px 24px;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    display:flex;
    flex-direction:column;
    scrollbar-width:thin;
    scrollbar-color:rgba(215,165,55,.55) transparent;
  }

  .studio-config-scroll::-webkit-scrollbar{width:5px}
  .studio-config-scroll::-webkit-scrollbar-thumb{background:rgba(215,165,55,.5);border-radius:99px}

  .studio-config-scroll .studio-components-step{order:1;margin-bottom:9px!important;position:sticky;top:-12px;z-index:4;padding:12px 0 8px;background:linear-gradient(180deg,#100d08 78%,rgba(16,13,8,0));}
  .studio-config-scroll .component-panels{order:2}
  .studio-config-scroll .studio-mode-step{order:3;margin-top:15px}
  .studio-config-scroll .studio-size-step{order:4}
  .studio-config-scroll .studio-patterns{order:5}
  .studio-config-scroll .builder-tools{order:6}
  .studio-config-scroll .studio-summary{order:7}
  .studio-config-scroll .studio-save{order:8}
  .studio-config-scroll .studio-whatsapp{order:9}
  .studio-config-scroll .studio-message{order:10}
  .studio-config-scroll .studio-mobile-sheet-close{order:11}

  body.page-bracelet-studio .studio-step{
    grid-template-columns:30px minmax(0,1fr)!important;
    gap:9px!important;
    margin-bottom:14px!important;
  }

  body.page-bracelet-studio .studio-step>b{
    width:28px!important;
    height:28px!important;
    font-size:12px;
  }

  body.page-bracelet-studio .studio-step h2,
  body.page-bracelet-studio .studio-patterns h2{
    font-size:15px!important;
    margin-bottom:8px!important;
  }

  body.page-bracelet-studio .studio-tabs{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:5px!important;
  }

  body.page-bracelet-studio .studio-tabs button{
    min-width:0;
    padding:8px 3px!important;
    font-size:11px!important;
    white-space:nowrap;
  }

  body.page-bracelet-studio .component-panel,
  body.page-bracelet-studio .component-panel.active{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    max-height:31dvh!important;
    padding:2px!important;
  }

  body.page-bracelet-studio .component-card{
    min-width:0;
    grid-template-columns:30px minmax(0,1fr)!important;
    grid-template-rows:auto auto;
    gap:3px 7px!important;
    padding:8px!important;
    text-align:right!important;
  }

  body.page-bracelet-studio .component-card img,
  body.page-bracelet-studio .component-card i{
    grid-row:1/3;
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
  }

  body.page-bracelet-studio .component-card span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:10px!important;
  }

  body.page-bracelet-studio .component-card small{
    min-width:0;
    font-size:8.5px!important;
    text-align:right;
  }

  body.page-bracelet-studio .builder-modes{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px!important;
  }

  body.page-bracelet-studio .builder-modes button{
    min-width:0;
    padding:8px 3px!important;
    font-size:10px!important;
  }

  body.page-bracelet-studio .studio-patterns{
    margin:14px 0!important;
  }

  body.page-bracelet-studio .studio-patterns>div,
  body.page-bracelet-studio .studio-tools{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
  }

  body.page-bracelet-studio .studio-patterns button,
  body.page-bracelet-studio .studio-tools button{
    width:100%;
    min-width:0;
    min-height:40px;
    padding:7px 4px!important;
    font-size:10px!important;
  }

  body.page-bracelet-studio .studio-summary{
    margin-top:13px!important;
    padding:11px 8px!important;
  }

  body.page-bracelet-studio .studio-save,
  body.page-bracelet-studio .studio-whatsapp{
    min-height:46px!important;
    font-size:12px!important;
  }

  .studio-mobile-sheet-close{
    width:100%;
    min-height:46px;
    margin-top:10px;
    border:1px solid rgba(240,199,106,.36);
    border-radius:12px;
    background:#080706;
    color:#f0c76a;
    font-weight:800;
  }

  body.page-bracelet-studio:not(.studio-mobile-ux-ready) .studio-config-panel{
    position:static!important;
    inset:auto!important;
    width:100%!important;
    max-width:none!important;
    max-height:none!important;
    padding:15px!important;
    transform:none!important;
    overflow:visible!important;
    border-radius:20px!important;
  }

  body.page-bracelet-studio .float-whatsapp{
    display:none!important;
  }

  body.page-bracelet-studio.studio-sheet-open .page-glow{
    opacity:.45;
  }

  body.page-bracelet-studio .studio-viewer-panel.studio-viewer-pulse{
    animation:studioViewerPulse .38s ease;
  }

  @keyframes studioViewerPulse{
    0%,100%{box-shadow:0 25px 80px rgba(0,0,0,.38)}
    50%{box-shadow:0 0 0 2px rgba(240,199,106,.55),0 25px 80px rgba(0,0,0,.5)}
  }
}

@media (max-width:380px){
  .brand-v7 span{display:none!important}
  .brand-v7{justify-content:center!important}
  .top-actions .plain-icon{width:30px!important;min-width:30px!important;flex-basis:30px!important}
  .bottom-nav-v7 small{font-size:8.5px!important}
  body.page-bracelet-studio .bracelet-viewer{height:clamp(300px,48dvh,410px)!important;min-height:300px}
}

/* Light theme compatibility */
html[data-theme="light"] .studio-mobile-sheet-toggle{
  background:linear-gradient(180deg,#fff7e7,#f2dfbd);
  color:#3b2812;
  border-color:rgba(141,91,24,.24);
}
html[data-theme="light"] .studio-mobile-sheet-copy strong,
html[data-theme="light"] .studio-mobile-sheet-chevron{
  color:#6d4616;
}
html[data-theme="light"] .studio-mobile-sheet-copy small{
  color:#7a654b;
}
html[data-theme="light"] .studio-config-scroll .studio-components-step{
  background:linear-gradient(180deg,#fff8ec 78%,rgba(255,248,236,0));
}
html[data-theme="light"] .studio-mobile-sheet-close{
  background:#fffaf2;
  color:#78501d;
  border-color:rgba(141,91,24,.3);
}