/*
 * ===============================================================
 * ESTOQUE_MAX_GLOBAL_DESIGN_SYSTEM_4DB5FB_V2
 * ===============================================================
 */


:root{

  --max:#4db5fb;

  --max-rgb:
    77,181,251;

  --white:#ffffff;

  --black:#000000;

  --text:#111111;

  --muted:
    rgba(0,0,0,.58);

  --muted-soft:
    rgba(0,0,0,.42);

  --border:
    rgba(77,181,251,.27);

  --border-strong:
    rgba(77,181,251,.52);

  --surface:
    #ffffff;

  --surface-soft:
    rgba(77,181,251,.055);

  --success:
    #16a34a;

  --danger:
    #dc2626;


  /*
   * Compatibilidade com variáveis antigas.
   */

  --acc:
    #4db5fb
    !important;

  --accent:
    #4db5fb
    !important;

  --primary:
    #4db5fb
    !important;

  --brand:
    #4db5fb
    !important;

  --theme:
    #4db5fb
    !important;

  --primary-color:
    #4db5fb
    !important;

  --brand-color:
    #4db5fb
    !important;

  --theme-color:
    #4db5fb
    !important;

  --acc-h:
    #4db5fb
    !important;

  --acc-bg:
    rgba(77,181,251,.11)
    !important;

  --acc-t:
    #000
    !important;
}


/* ===============================================================
   GLOBAL
================================================================ */

html{

  width:100%;

  max-width:100%;

  -webkit-text-size-adjust:100%;

  text-size-adjust:100%;

  accent-color:
    #4db5fb;

  overscroll-behavior:
    none;
}


body{

  width:100%;

  max-width:100%;

  min-width:0;

  margin:0;

  overflow-x:hidden;

  color:#111;

  background:#fff;
}


*{

  min-width:0;
}


img,
video,
svg,
canvas{

  max-width:100%;
}


::selection{

  color:#000;

  background:
    rgba(
      77,
      181,
      251,
      .30
    );
}


/* ===============================================================
   TOUCH / NO ZOOM
================================================================ */

html,
body{

  touch-action:
    pan-x pan-y;
}


button,
a,
input,
textarea,
select,
label,
[role="button"],
[tabindex]{

  touch-action:
    manipulation;
}


/* ===============================================================
   FOCUS
================================================================ */

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{

  outline:none !important;

  border-color:
    #4db5fb
    !important;

  box-shadow:
    0 0 0 4px
    rgba(
      77,
      181,
      251,
      .18
    )
    !important;
}


/* ===============================================================
   CARDS
================================================================ */

.card,
.tcard,
.kpi,
.fk-card,
.dk-card,
.pcard,
.mv3-card,
.mbox,
.cfg-card,
.modal-card,
.channel,
.context-card,
.product-summary,
.stepper{

  border-color:
    var(--border)
    !important;

  background:
    #fff
    !important;

  box-shadow:
    0 12px 36px
    rgba(
      0,
      0,
      0,
      .07
    );
}


/* ===============================================================
   BOTÕES
================================================================ */

.btp,
.btn-primary,
.btn.primary,
.st-btn.primary,
.bts.primary,
.bt-primary,
button.primary{

  color:#000 !important;

  border-color:
    #4db5fb
    !important;

  background:
    #4db5fb
    !important;

  box-shadow:
    0 8px 22px
    rgba(
      77,
      181,
      251,
      .26
    )
    !important;
}


.btn,
.bts,
.bt,
.st-btn,
button{

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease,
    background .16s ease;
}


.btn:hover,
.bts:hover,
.bt:hover,
.st-btn:hover{

  transform:
    translateY(-1px);
}


/* ===============================================================
   NAV
================================================================ */

.ni.active,
.ni.on,
.bnav-item.active,
.bnav-item.on,
.tab.active,
.tab.on,
.view-tab.active,
.view-tab.on,
.nav-item.active,
.nav-item.on,
[aria-selected="true"]{

  color:#000 !important;

  border-color:
    #4db5fb
    !important;

  background:
    rgba(
      77,
      181,
      251,
      .14
    )
    !important;
}


/* ===============================================================
   INPUTS
================================================================ */

input,
textarea,
select{

  color:#111 !important;

  border-color:
    var(--border)
    !important;

  background:#fff !important;
}


input:focus,
textarea:focus,
select:focus{

  border-color:
    #4db5fb
    !important;

  box-shadow:
    0 0 0 4px
    rgba(
      77,
      181,
      251,
      .13
    )
    !important;
}


/* ===============================================================
   CHIPS / BADGES
================================================================ */

.badge,
.chip,
.tag,
.pill,
.status,
.card-badge,
.stage-badge,
.channel-state{

  color:#000 !important;

  border-color:
    var(--border)
    !important;

  background:
    rgba(
      77,
      181,
      251,
      .10
    )
    !important;
}


/*
 * Antigas cores não semânticas.
 */

.yellow,
.orange,
.purple,
.violet,
.chip.yellow,
.chip.orange,
.chip.purple,
.warning,
.warn,
.status-warning,
.status-pending{

  color:#000 !important;

  border-color:
    var(--border-strong)
    !important;

  background:
    rgba(
      77,
      181,
      251,
      .13
    )
    !important;
}


/*
 * Exceções semânticas.
 */

.success,
.ok,
.s-ok,
.status-success,
.chip.green{

  color:
    var(--success)
    !important;
}


.error,
.err,
.danger,
.status-error,
.status-danger,
.btn-danger,
.chip.red{

  color:
    var(--danger)
    !important;
}


/* ===============================================================
   TABLES
================================================================ */

th{

  color:#000 !important;

  background:
    rgba(
      77,
      181,
      251,
      .08
    )
    !important;
}


td{

  border-color:
    rgba(
      77,
      181,
      251,
      .12
    )
    !important;
}


tbody tr:hover{

  background:
    rgba(
      77,
      181,
      251,
      .055
    )
    !important;
}


/* ===============================================================
   SCROLLBAR
================================================================ */

::-webkit-scrollbar{

  width:10px;

  height:10px;
}


::-webkit-scrollbar-track{

  background:#fff;
}


::-webkit-scrollbar-thumb{

  border:
    2px solid
    #fff;

  border-radius:999px;

  background:
    rgba(
      77,
      181,
      251,
      .68
    );
}


/* ===============================================================
   MOBILE GLOBAL
================================================================ */

@media(max-width:768px){

  html,
  body{

    width:100% !important;

    max-width:100% !important;

    min-width:0 !important;

    overflow-x:hidden !important;

    font-size:15px !important;
  }


  /*
   * iPhone:
   * input menor que 16px = Safari dá zoom.
   */

  input,
  textarea,
  select{

    min-height:
      48px
      !important;

    font-size:
      16px
      !important;

    line-height:
      1.35
      !important;
  }


  button,
  .btn,
  .bt,
  .bts,
  .st-btn{

    min-height:
      44px;

    font-size:
      14px;
  }


  .page,
  .main,
  .content,
  .wrap,
  .shell,
  .container,
  .dashboard-main{

    width:
      100%
      !important;

    max-width:
      100%
      !important;

    margin-left:0 !important;

    margin-right:0 !important;

    padding-left:
      10px
      !important;

    padding-right:
      10px
      !important;
  }


  .card,
  .tcard,
  .kpi,
  .fk-card,
  .dk-card,
  .pcard,
  .mv3-card{

    padding:
      15px
      !important;
  }


  table{

    min-width:
      max-content;
  }


  .table-wrap,
  .table-scroll,
  .table-container{

    width:100%;

    max-width:100%;

    overflow-x:auto;

    -webkit-overflow-scrolling:
      touch;
  }

}


/* ===============================================================
   EDITOR
================================================================ */

body.max-editor-v7{

  position:relative;

  color:#111 !important;

  background:#fff !important;
}


body.max-editor-v7::before{

  position:fixed;

  z-index:-1;

  top:-230px;

  right:-170px;

  width:520px;

  height:520px;

  border-radius:50%;

  content:"";

  pointer-events:none;

  background:
    rgba(
      77,
      181,
      251,
      .16
    );

  filter:
    blur(85px);

  animation:
    maxAmbientGlow
    7s ease-in-out infinite alternate;
}


@keyframes maxAmbientGlow{

  to{

    transform:
      translate(
        -70px,
        100px
      )
      scale(1.13);
  }
}


/* ===============================================================
   LOGO REAL
================================================================ */

.system-logo{

  width:118px;

  min-width:118px;

  height:48px;

  display:flex;

  align-items:center;

  justify-content:flex-start;
}


.system-logo img{

  display:block;

  max-width:100%;

  max-height:44px;

  object-fit:contain;

  object-position:left center;
}


/* ===============================================================
   PROGRESS
================================================================ */

.progress-track{

  height:8px !important;

  overflow:hidden;

  background:
    rgba(
      77,
      181,
      251,
      .12
    )
    !important;
}


.progress-fill{

  position:relative;

  overflow:hidden;

  background:
    #4db5fb
    !important;
}


.progress-fill::after{

  position:absolute;

  inset:0;

  content:"";

  transform:
    translateX(-100%);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.92),
      transparent
    );

  animation:
    maxProgressShine
    2.2s ease-in-out infinite;
}


@keyframes maxProgressShine{

  60%{

    transform:
      translateX(100%);
  }

  100%{

    transform:
      translateX(100%);
  }
}


/* ===============================================================
   STEPPER
================================================================ */

.step{

  cursor:pointer !important;
}


.step.future{

  opacity:.72 !important;
}


.step-dot{

  position:relative;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease
    !important;
}


.step.current
.step-dot{

  color:#000 !important;

  border-color:
    #4db5fb
    !important;

  background:
    #4db5fb
    !important;

  box-shadow:
    0 0 0 7px
    rgba(
      77,
      181,
      251,
      .14
    )
    !important;

  animation:
    maxStepPulse
    1.8s ease-in-out infinite;
}


@keyframes maxStepPulse{

  50%{

    transform:
      scale(1.07);

    box-shadow:
      0 0 0 12px
      rgba(
        77,
        181,
        251,
        .045
      );
  }
}


.step.done
.step-dot{

  color:#fff !important;

  border-color:#000 !important;

  background:#000 !important;
}


.step.has-change
.step-dot::after{

  position:absolute;

  top:-4px;

  right:-4px;

  width:8px;

  height:8px;

  border:
    2px solid
    #fff;

  border-radius:50%;

  content:"";

  background:
    #4db5fb;

  box-shadow:
    0 0 8px
    rgba(
      77,
      181,
      251,
      .6
    );
}


.steps::before{

  background:
    rgba(
      77,
      181,
      251,
      .30
    )
    !important;
}


/* ===============================================================
   STAGE EFFECT
================================================================ */

.stage.on{

  animation:
    maxStageEnter
    .30s cubic-bezier(.2,.85,.2,1)
    !important;
}


.stage.on > .card{

  border-color:
    rgba(
      77,
      181,
      251,
      .36
    )
    !important;

  box-shadow:
    0 18px 55px
    rgba(
      0,
      0,
      0,
      .08
    ),
    0 0 0 1px
    rgba(
      77,
      181,
      251,
      .08
    );
}


@keyframes maxStageEnter{

  from{

    opacity:0;

    transform:
      translateX(22px)
      scale(.992);
  }

  to{

    opacity:1;

    transform:none;
  }
}


/* ===============================================================
   BUTTON EFFECT
================================================================ */

.btn-primary{

  position:relative;

  overflow:hidden;
}


.btn-primary::after{

  position:absolute;

  top:-20%;

  left:-45%;

  width:35%;

  height:140%;

  content:"";

  pointer-events:none;

  transform:
    skewX(-18deg);

  background:
    rgba(
      255,
      255,
      255,
      .58
    );

  transition:
    left .45s ease;
}


.btn-primary:hover::after{

  left:125%;
}


/* ===============================================================
   HOVER
================================================================ */

.product-summary,
.card,
.context-card,
.channel,
.image-card{

  transition:
    transform .20s ease,
    box-shadow .20s ease,
    border-color .20s ease;
}


.product-summary:hover,
.channel:hover,
.image-card:hover{

  transform:
    translateY(-2px);

  border-color:
    rgba(
      77,
      181,
      251,
      .58
    )
    !important;

  box-shadow:
    0 22px 58px
    rgba(
      0,
      0,
      0,
      .11
    );
}


.channel::before{

  background:
    #4db5fb
    !important;
}


.channel-logo{

  color:#000 !important;

  background:
    #4db5fb
    !important;
}


.stock-panel{

  color:#fff !important;

  border:
    1px solid
    #4db5fb
    !important;

  background:
    #000
    !important;

  box-shadow:
    0 18px 48px
    rgba(
      0,
      0,
      0,
      .16
    )
    !important;
}


.stock-panel small{

  color:
    #4db5fb
    !important;
}


/* ===============================================================
   QUICK JUMP
================================================================ */

.max-quick-jump{

  display:flex;

  align-items:center;

  gap:7px;
}


.max-quick-jump label{

  color:
    rgba(0,0,0,.55);

  font-size:10px;

  font-weight:700;
}


.max-quick-jump select{

  min-height:36px;

  min-width:180px;

  padding:
    0 10px;

  border:
    1px solid
    rgba(77,181,251,.34);

  border-radius:8px;

  font-size:11px;
}


/* ===============================================================
   CHANGE COUNT
================================================================ */

.unsaved.show{

  display:inline-flex !important;

  color:#000 !important;

  border-color:
    rgba(77,181,251,.48)
    !important;

  background:
    rgba(77,181,251,.14)
    !important;

  animation:
    maxUnsaved
    .25s ease;
}


@keyframes maxUnsaved{

  from{
    transform:scale(.93);
    opacity:.3;
  }

  to{
    transform:none;
    opacity:1;
  }
}


/* ===============================================================
   COPY BUTTON
================================================================ */

.max-copy-button{

  min-height:27px;

  padding:
    0 8px;

  border:
    1px solid
    rgba(77,181,251,.32);

  border-radius:999px;

  color:#000;

  background:
    rgba(77,181,251,.09);

  font-size:8px;

  font-weight:800;
}


/* ===============================================================
   MOBILE EDITOR DOCK
================================================================ */

.max-mobile-dock{

  display:none;
}


/* ===============================================================
   DESKTOP REAL
================================================================ */

@media(min-width:1100px){

  .topbar-inner,
  .completion-inner{

    width:
      min(
        1440px,
        calc(100% - 52px)
      )
      !important;
  }


  .page{

    width:
      min(
        1400px,
        calc(100% - 52px)
      )
      !important;

    margin-top:
      25px
      !important;
  }


  .workspace{

    grid-template-columns:
      minmax(0,1fr)
      330px
      !important;

    gap:
      23px
      !important;
  }


  .workspace.context-off{

    grid-template-columns:
      1fr
      !important;
  }


  .topbar-inner{

    min-height:
      74px
      !important;
  }


  .top-product-name{

    max-width:
      780px
      !important;

    font-size:
      16px
      !important;

    line-height:
      1.3
      !important;
  }


  .top-meta{

    margin-top:
      4px
      !important;

    font-size:
      11px
      !important;
  }


  .completion-title{

    font-size:
      11px
      !important;
  }


  .completion-stats{

    font-size:
      10px
      !important;
  }


  .product-summary{

    grid-template-columns:
      90px
      minmax(0,1fr)
      205px
      !important;

    gap:
      20px
      !important;

    padding:
      20px
      !important;
  }


  .product-photo{

    width:
      90px
      !important;

    height:
      90px
      !important;
  }


  .summary-title{

    font-size:
      21px
      !important;

    line-height:
      1.28
      !important;
  }


  .tag{

    min-height:
      31px
      !important;

    padding:
      0 12px
      !important;

    font-size:
      10px
      !important;
  }


  .summary-score{

    min-width:
      205px
      !important;

    padding:
      14px 16px
      !important;
  }


  .summary-score small{

    font-size:
      9.5px
      !important;
  }


  .summary-score strong{

    margin-top:
      5px
      !important;

    font-size:
      19px
      !important;
  }


  .summary-score div{

    margin-top:
      4px
      !important;

    font-size:
      9.5px
      !important;
  }


  .stepper{

    top:
      110px
      !important;

    padding:
      18px 22px
      16px
      !important;
  }


  .stepper-current{

    font-size:
      14px
      !important;
  }


  .stepper-secondary{

    font-size:
      10.5px
      !important;
  }


  .step-dot{

    width:
      38px
      !important;

    height:
      38px
      !important;

    font-size:
      11.5px
      !important;
  }


  .steps::before{

    top:
      18px
      !important;
  }


  .step-label{

    margin-top:
      8px
      !important;

    font-size:
      10.5px
      !important;
  }


  .card{

    padding:
      30px
      !important;
  }


  .card-title{

    font-size:
      20px
      !important;

    line-height:
      1.25
      !important;
  }


  .card-sub{

    margin-top:
      8px
      !important;

    max-width:
      820px
      !important;

    font-size:
      13px
      !important;

    line-height:
      1.6
      !important;
  }


  .stage-badge{

    min-height:
      33px
      !important;

    padding:
      0 13px
      !important;

    font-size:
      9.5px
      !important;
  }


  .field{

    margin-bottom:
      19px
      !important;
  }


  .field label{

    min-height:
      21px
      !important;

    margin-bottom:
      8px
      !important;

    font-size:
      13px
      !important;
  }


  .field label span{

    font-size:
      10px
      !important;
  }


  .field input,
  .field select{

    min-height:
      52px
      !important;

    padding:
      0 15px
      !important;

    border-radius:
      11px
      !important;

    font-size:
      15px
      !important;
  }


  .field textarea{

    min-height:
      190px
      !important;

    padding:
      15px
      !important;

    font-size:
      14px
      !important;
  }


  .visual-editor{

    min-height:
      255px
      !important;

    padding:
      18px
      !important;

    font-size:
      14.5px
      !important;

    line-height:
      1.75
      !important;
  }


  .context{

    top:
      230px
      !important;
  }


  .context-card{

    padding:
      21px
      !important;
  }


  .context-title{

    font-size:
      13px
      !important;
  }


  .context-body{

    font-size:
      12.5px
      !important;
  }


  .context-row{

    padding:
      11px 0
      !important;

    font-size:
      12px
      !important;
  }


  .context-check{

    gap:
      10px
      !important;

    padding:
      9px 0
      !important;

    font-size:
      12px
      !important;
  }


  .context-check-dot{

    width:
      23px
      !important;

    height:
      23px
      !important;

    font-size:
      9px
      !important;
  }


  .btn{

    min-height:
      45px
      !important;

    padding:
      0 17px
      !important;

    font-size:
      12.5px
      !important;
  }


  .btn-sm{

    min-height:
      35px
      !important;

    padding:
      0 11px
      !important;

    font-size:
      10px
      !important;
  }


  .kpi{

    padding:
      19px
      !important;
  }


  .kpi small{

    font-size:
      10.5px
      !important;
  }


  .kpi strong{

    margin-top:
      8px
      !important;

    font-size:
      25px
      !important;
  }


  .kpi div{

    font-size:
      9.5px
      !important;
  }


  .channel{

    min-height:
      250px
      !important;

    padding:
      21px
      !important;
  }


  .channel-name{

    font-size:
      15px
      !important;
  }


  .channel-desc{

    font-size:
      11px
      !important;
  }


  .listing{

    padding:
      12px
      !important;

    font-size:
      11px
      !important;
  }

}


/* ===============================================================
   MOBILE EDITOR — NÃO MINIATURIZADO
================================================================ */

@media(max-width:768px){

  body.max-editor-v7{

    padding-bottom:
      82px
      !important;
  }


  .topbar{

    position:sticky !important;

    top:0 !important;
  }


  .topbar-inner{

    width:
      calc(100% - 12px)
      !important;

    min-height:
      64px
      !important;

    gap:
      8px
      !important;
  }


  .system-logo{

    width:
      76px
      !important;

    min-width:
      76px
      !important;

    height:
      40px
      !important;
  }


  .system-logo img{

    max-height:
      38px
      !important;
  }


  .top-product-name{

    max-width:
      48vw
      !important;

    font-size:
      13px
      !important;

    line-height:
      1.25
      !important;
  }


  .top-meta{

    font-size:
      9px
      !important;
  }


  .top-actions{

    gap:
      4px
      !important;
  }


  .top-actions .btn{

    min-height:
      42px
      !important;

    padding:
      0 10px
      !important;

    font-size:
      11px
      !important;
  }


  .completion-inner{

    width:
      calc(100% - 14px)
      !important;

    min-height:
      42px
      !important;
  }


  .completion-title{

    font-size:
      10px
      !important;
  }


  .page{

    width:
      calc(100% - 12px)
      !important;

    max-width:
      calc(100% - 12px)
      !important;

    padding:0 !important;

    margin:
      12px
      auto
      90px
      !important;
  }


  .product-summary{

    grid-template-columns:
      68px
      minmax(0,1fr)
      !important;

    gap:
      11px
      !important;

    padding:
      13px
      !important;
  }


  .product-photo{

    width:
      68px
      !important;

    height:
      68px
      !important;
  }


  .summary-title{

    font-size:
      16px
      !important;

    line-height:
      1.3
      !important;
  }


  .summary-score{

    grid-column:
      1 / -1;

    width:100% !important;

    min-width:0 !important;

    padding:
      11px 13px
      !important;
  }


  .summary-score small{

    font-size:
      9px
      !important;
  }


  .summary-score strong{

    font-size:
      16px
      !important;
  }


  .tag{

    min-height:
      28px
      !important;

    padding:
      0 9px
      !important;

    font-size:
      9px
      !important;
  }


  .stepper{

    position:relative !important;

    top:auto !important;

    margin-top:
      10px
      !important;

    padding:
      13px 10px
      !important;

    overflow:hidden !important;
  }


  /*
   * No celular os 7 círculos não precisam
   * ocupar largura infinita.
   */

  .steps{

    min-width:0 !important;

    grid-template-columns:
      repeat(7,1fr)
      !important;
  }


  .step-dot{

    width:
      31px
      !important;

    height:
      31px
      !important;

    font-size:
      10px
      !important;
  }


  .steps::before{

    top:
      15px
      !important;

    left:
      7%
      !important;

    right:
      7%
      !important;
  }


  .step-label{

    display:none
    !important;
  }


  .stepper-current{

    font-size:
      12px
      !important;
  }


  .stepper-secondary{

    display:none
    !important;
  }


  .max-quick-jump{

    width:100%;

    margin-top:
      10px;
  }


  .max-quick-jump label{

    font-size:
      11px;
  }


  .max-quick-jump select{

    flex:1;

    min-width:0;

    min-height:
      46px;

    font-size:
      16px;
  }


  .workspace{

    display:block
    !important;

    margin-top:
      10px
      !important;
  }


  .card{

    width:100% !important;

    padding:
      17px
      !important;

    border-radius:
      13px
      !important;
  }


  .card-title{

    font-size:
      18px
      !important;
  }


  .card-sub{

    font-size:
      12px
      !important;

    line-height:
      1.55
      !important;
  }


  .field{

    margin-bottom:
      16px
      !important;
  }


  .field label{

    font-size:
      12px
      !important;

    margin-bottom:
      7px
      !important;
  }


  .field label span{

    font-size:
      10px
      !important;
  }


  .field input,
  .field select,
  .field textarea{

    width:100% !important;

    min-height:
      49px
      !important;

    font-size:
      16px
      !important;
  }


  .field textarea{

    min-height:
      180px
      !important;
  }


  .grid2,
  .grid3{

    grid-template-columns:
      1fr
      !important;

    gap:0
    !important;
  }


  .context{

    position:static
    !important;

    margin-top:
      10px
      !important;
  }


  .context-card{

    padding:
      16px
      !important;
  }


  .context-title{

    font-size:
      12px
      !important;
  }


  .context-row,
  .context-check{

    font-size:
      12px
      !important;
  }


  .kpis{

    grid-template-columns:
      1fr
      1fr
      !important;

    gap:
      8px
      !important;
  }


  .kpi{

    padding:
      13px
      !important;
  }


  .kpi small{

    font-size:
      9.5px
      !important;
  }


  .kpi strong{

    font-size:
      20px
      !important;
  }


  .channel-grid{

    grid-template-columns:
      1fr
      !important;
  }


  .channel{

    min-height:0 !important;

    padding:
      16px
      !important;
  }


  .channel-name{

    font-size:
      14px
      !important;
  }


  .channel-desc,
  .listing{

    font-size:
      11px
      !important;
  }


  .image-top{

    grid-template-columns:
      1fr
      !important;
  }


  .dropzone{

    min-height:
      150px
      !important;
  }


  .dropzone strong{

    font-size:
      14px
      !important;
  }


  .dropzone span{

    font-size:
      11px
      !important;
  }


  .gallery{

    grid-template-columns:
      1fr
      1fr
      !important;

    gap:
      8px
      !important;
  }


  .stage-nav{

    display:none
    !important;
  }


  /*
   * Dock móvel permanente.
   */

  .max-mobile-dock{

    position:fixed;

    z-index:1200;

    left:8px;

    right:8px;

    bottom:
      calc(
        8px +
        env(safe-area-inset-bottom)
      );

    min-height:58px;

    display:grid;

    grid-template-columns:
      48px
      minmax(0,1fr)
      48px;

    align-items:center;

    gap:6px;

    padding:
      6px;

    border:
      1px solid
      rgba(77,181,251,.48);

    border-radius:
      14px;

    background:
      rgba(255,255,255,.96);

    backdrop-filter:
      blur(18px);

    box-shadow:
      0 14px 44px
      rgba(0,0,0,.18);
  }


  .max-mobile-dock button{

    width:48px;

    height:46px;

    padding:0;

    border:
      1px solid
      rgba(77,181,251,.32);

    border-radius:10px;

    color:#000;

    background:
      rgba(77,181,251,.10);

    font-size:18px;

    font-weight:900;
  }


  .max-mobile-dock select{

    width:100%;

    height:46px;

    padding:
      0 10px;

    border:
      1px solid
      rgba(77,181,251,.38);

    border-radius:10px;

    color:#000;

    background:#fff;

    font-size:
      16px
      !important;

    font-weight:750;
  }

}


/* ===============================================================
   TELAS PEQUENAS
================================================================ */

@media(max-width:430px){

  .top-product-name{

    max-width:
      40vw
      !important;
  }


  .top-actions
  .review-top{

    display:none
    !important;
  }


  .gallery{

    grid-template-columns:
      1fr
      1fr
      !important;
  }


  .card{

    padding:
      15px
      !important;
  }

}


/* ===============================================================
   REDUCED MOTION
================================================================ */

@media(
  prefers-reduced-motion:
  reduce
){

  *,
  *::before,
  *::after{

    animation-duration:
      .01ms
      !important;

    animation-iteration-count:
      1
      !important;

    transition-duration:
      .01ms
      !important;

    scroll-behavior:
      auto
      !important;
  }

}