/* ============================================================
   CLIMATIKO - VISUALIZACAO DE PRODUTO
============================================================ */


/* ============================================================
   TRANSICAO
============================================================ */

html.clm-produto-view-preparando
#page-produtos-pro.active{

  visibility:hidden !important;

}


/* ============================================================
   CONTAINER
============================================================ */

.clm-prod-viewer{

  width:100%;

  color:#243447;

  font-size:12px;

  box-sizing:border-box;

}


/* ============================================================
   CABECALHO
============================================================ */

.clm-prod-view-head{

  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:20px;

  margin-bottom:14px;

}


.clm-prod-view-head h1{

  margin:0 0 8px;

  font-size:20px;
  font-weight:600;

  color:#14202b;

}


.clm-prod-view-title-line{

  display:flex;
  align-items:center;

  gap:8px;

}


.clm-prod-view-title-line strong{

  font-size:14px;
  font-weight:500;

  color:#344054;

}


.clm-prod-status{

  display:inline-flex;
  align-items:center;

  min-height:20px;

  padding:0 7px;

  border-radius:4px;

  background:#ecfdf3;

  border:1px solid #a6f4c5;

  color:#027a48;

  font-size:9px;
  font-weight:600;

}


.clm-prod-status.inativo{

  background:#fff1f1;

  border-color:#ffc7c7;

  color:#b42318;

}


.clm-prod-view-actions{

  display:flex;

  gap:8px;

}


.clm-prod-view-actions button,
.clm-prod-edit-bottom{

  min-height:36px;

  padding:0 14px;

  border-radius:5px;

  font-size:11px;

  cursor:pointer;

}


.clm-prod-back{

  border:1px solid #d0d7df;

  background:#fff;

  color:#344054;

}


.clm-prod-edit{

  border:1px solid #155a96;

  background:#155a96;

  color:#fff;

  font-weight:600;

}


/* ============================================================
   LAYOUT
============================================================ */

.clm-prod-view-layout{

  display:grid;

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

  gap:22px;

  align-items:start;

}


/* ============================================================
   FICHA LATERAL
============================================================ */

.clm-prod-summary{

  border:1px solid #d8e0e8;

  border-radius:6px;

  background:#fff;

  padding:14px;

}


.clm-prod-photo{

  width:100%;
  height:150px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin-bottom:14px;

  border:1px solid #e1e7ed;
  border-radius:5px;

  background:#f7f8fa;

  overflow:hidden;

}


.clm-prod-photo img{

  width:100%;
  height:100%;

  display:block;

  object-fit:contain;

}


.clm-prod-no-photo{

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;

  gap:6px;

  color:#98a2b3;

}


.clm-prod-no-photo span{

  font-size:31px;

  opacity:.55;

}


.clm-prod-no-photo small{

  font-size:9px;

}


.clm-prod-summary h2{

  margin:0;

  padding:0 4px 13px;

  border-bottom:1px solid #e5e9ee;

  text-align:center;

  color:#101828;

  font-size:14px;
  font-weight:600;

}


.clm-prod-summary-fields{

  display:grid;

  gap:13px;

  padding:16px 4px;

  border-bottom:1px solid #e5e9ee;

}


.clm-prod-summary-fields div{

  display:grid;

  gap:3px;

}


.clm-prod-summary-fields small{

  color:#667085;

  font-size:9px;

}


.clm-prod-summary-fields strong{

  color:#1d2939;

  font-size:11px;
  font-weight:500;

}


.clm-prod-flags{

  display:flex;
  flex-wrap:wrap;

  gap:5px;

  padding:13px 4px;

  border-bottom:1px solid #e5e9ee;

}


.clm-prod-flags span{

  padding:3px 6px;

  border:1px solid #d9e1e8;
  border-radius:4px;

  background:#f8fafb;

  color:#475467;

  font-size:8px;

}


.clm-prod-updated{

  padding:13px 4px;

  color:#667085;

  font-size:8.5px;

}


.clm-prod-edit-bottom{

  width:100%;

  border:1px solid #155a96;

  background:#155a96;

  color:#fff;

}


/* ============================================================
   PRINCIPAL
============================================================ */

.clm-prod-main{

  min-width:0;

}


/* ============================================================
   ABAS
============================================================ */

.clm-prod-tabs{

  display:flex;
  align-items:center;

  flex-wrap:wrap;

  gap:6px;

  margin-bottom:13px;

  padding:0;

  background:transparent;

}


.clm-prod-tabs button{

  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:6px;

  min-height:36px;

  padding:0 13px;

  border:1px solid transparent;
  border-radius:5px;

  background:transparent;

  color:#344054;

  font-size:10.5px;

  cursor:pointer;

}


.clm-prod-tabs button:hover{

  background:#f4f7fa;

}


.clm-prod-tabs button.active{

  border-color:#155a96;

  background:#155a96;

  color:#fff;

  font-weight:600;

}


/* ============================================================
   CONTEUDO
============================================================ */

.clm-prod-content{

  display:grid;

  gap:13px;

}


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

.clm-prod-card{

  border:1px solid #d8e0e8;

  border-radius:6px;

  background:#fff;

  overflow:hidden;

}


.clm-prod-card-head{

  display:flex;
  align-items:center;
  justify-content:space-between;

  min-height:55px;

  padding:10px 15px;

  border-bottom:1px solid #e4e9ee;

  background:#fafbfc;

}


.clm-prod-card-head h3{

  margin:0 0 3px;

  color:#25364a;

  font-size:15px;
  font-weight:500;

}


.clm-prod-card-head h3 span{

  margin-right:5px;

}


.clm-prod-card-head small{

  display:block;

  color:#7b8794;

  font-size:9px;

}


.clm-prod-card-body{

  padding:16px;

}


/* ============================================================
   GRIDS
============================================================ */

.clm-prod-grid{

  display:grid;

}


.clm-prod-grid-4{

  grid-template-columns:
    repeat(4,minmax(0,1fr));

}


.clm-prod-grid-3{

  grid-template-columns:
    repeat(3,minmax(0,1fr));

}


.clm-prod-data{

  min-height:55px;

  display:flex;
  flex-direction:column;

  justify-content:center;

  gap:5px;

  padding:10px 13px;

  border-right:1px solid #edf0f3;
  border-bottom:1px solid #edf0f3;

  box-sizing:border-box;

}


.clm-prod-data small{

  color:#7b8794;

  font-size:9px;

}


.clm-prod-data strong{

  color:#1d2939;

  font-size:11px;
  font-weight:500;

  line-height:1.35;

}


.clm-prod-data.destaque strong{

  font-size:14px;
  font-weight:600;

}


/* ============================================================
   VALORES DE VENDA
============================================================ */

.clm-prod-price-row{

  display:grid;

  grid-template-columns:
    1.15fr
    repeat(4,minmax(0,1fr));

  border-bottom:1px solid #edf0f3;

}


.clm-prod-price-row:last-child{

  border-bottom:0;

}


.clm-prod-price-name{

  display:flex;
  flex-direction:column;

  justify-content:center;

  gap:4px;

  padding:10px 13px;

}


.clm-prod-price-name strong{

  font-size:11px;

}


.clm-prod-price-name small{

  color:#7b8794;

  font-size:8px;

}


/* ============================================================
   DESCRICAO
============================================================ */

.clm-prod-description{

  color:#344054;

  font-size:11px;
  line-height:1.55;

  white-space:pre-wrap;

}


/* ============================================================
   EMPTY STATE
============================================================ */

.clm-prod-empty{

  min-height:120px;

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;

  gap:6px;

  padding:20px;

  text-align:center;

}


.clm-prod-empty-icon{

  width:48px;
  height:48px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:#f5f7f9;

  color:#667085;

  font-size:21px;

}


.clm-prod-empty strong{

  color:#1d2939;

  font-size:11px;

}


.clm-prod-empty span{

  max-width:470px;

  color:#7b8794;

  font-size:9px;

}


/* ============================================================
   TABELA
============================================================ */

.clm-prod-table-wrap{

  width:100%;

  overflow-x:auto;

}


.clm-prod-table{

  width:100%;

  border-collapse:collapse;

}


.clm-prod-table th,
.clm-prod-table td{

  padding:10px 12px;

  border-bottom:1px solid #e8edf2;

  text-align:left;

}


.clm-prod-table th{

  color:#667085;

  background:#fafbfc;

  font-size:9px;
  font-weight:600;

}


.clm-prod-table td{

  color:#344054;

  font-size:10px;

}


/* ============================================================
   RESPONSIVO
============================================================ */

@media(max-width:1200px){

  .clm-prod-view-layout{

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

  }


  .clm-prod-grid-4{

    grid-template-columns:
      repeat(2,minmax(0,1fr));

  }


  .clm-prod-price-row{

    grid-template-columns:
      repeat(2,minmax(0,1fr));

  }

}


@media(max-width:850px){

  .clm-prod-view-layout{

    display:block;

  }


  .clm-prod-summary{

    margin-bottom:15px;

  }


  .clm-prod-view-head{

    flex-direction:column;

  }


  .clm-prod-grid-4,
  .clm-prod-grid-3{

    grid-template-columns:1fr;

  }


  .clm-prod-price-row{

    grid-template-columns:1fr;

  }

}