/* ===== Collection Public Layout - final width alignment ===== */

#collection{
  width: 100% !important;
  box-sizing: border-box !important;
}

/* CARD EXTERNO: ocupa a largura útil total e fica simétrico */
#collection .collection-host-card{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* conteúdo do card externo com respiro igual dos dois lados */
#collection .collection-host-card .card-content{
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 18px 22px 22px 22px !important;
}

/* GRID INTERNA: ocupa tudo e centraliza de verdade */
#collection #collectionEmbeddedRow{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;

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

  align-items: stretch !important;
  justify-content: stretch !important;
}

/* CARDS INTERNOS: mesmo peso visual */
#collection #collectionEmbeddedRow > .card{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

#collection #collectionEmbeddedRow > .card .card-content{
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

#collection #collectionEmbeddedRow > .card:first-child .card-content{
  justify-content: flex-start !important;
}

#collection #collectionEmbeddedRow > .card:last-child .card-content{
  justify-content: space-between !important;
}

/* tipografia */
#collection #collectionEmbeddedRow .section-title{
  font-size: 24px !important;
  line-height: 1.15 !important;
}

#collection #collectionEmbeddedRow .section-subtitle{
  font-size: 17px !important;
  line-height: 1.45 !important;
}

#collection #collectionEmbeddedRow p,
#collection #collectionEmbeddedRow li,
#collection #collectionEmbeddedRow div,
#collection #collectionEmbeddedRow span,
#collection #collectionEmbeddedRow small{
  font-size: 16px !important;
  line-height: 1.6 !important;
}

/* QR proporcional */
#collection .collection-qr-primary{
  display: block !important;
  width: 100% !important;
  max-width: 320px !important;
  height: auto !important;
  margin: 0 auto !important;
}

#collection .collection-qr-duplicate{
  display: none !important;
}

/* botão */
#collection #collectionEmbeddedRow button,
#collection #collectionEmbeddedRow .btn{
  width: 100% !important;
  min-height: 52px !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}

/* url */
#collection #collectionEmbeddedRow .footer-note,
#collection #collectionEmbeddedRow .public-url,
#collection #collectionEmbeddedRow [class*="url"]{
  font-size: 15px !important;
  line-height: 1.5 !important;
  text-align: center !important;
}

/* mobile */
@media (max-width: 1100px){
  #collection #collectionEmbeddedRow{
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 820px){
  #collection .collection-host-card .card-content{
    padding:16px !important;
  }

  #collection #collectionEmbeddedRow{
    gap:16px !important;
  }

  #collection #collectionEmbeddedRow .section-title{
    font-size:22px !important;
  }

  #collection #collectionEmbeddedRow .section-subtitle{
    font-size:15px !important;
  }

  #collection #collectionEmbeddedRow p,
  #collection #collectionEmbeddedRow li,
  #collection #collectionEmbeddedRow div,
  #collection #collectionEmbeddedRow span,
  #collection #collectionEmbeddedRow small{
    font-size:14px !important;
    line-height:1.65 !important;
  }

  #collection .collection-qr-primary{
    max-width:260px !important;
  }

  #collection #collectionEmbeddedRow button,
  #collection #collectionEmbeddedRow .btn{
    min-height:50px !important;
    font-size:16px !important;
  }
}

@media (max-width: 560px){
  #collection .collection-host-card .card-content{
    padding:14px !important;
  }

  #collection #collectionEmbeddedRow{
    gap:14px !important;
  }

  #collection #collectionEmbeddedRow > .card{
    border-radius:20px !important;
  }

  #collection #collectionEmbeddedRow .section-title{
    font-size:20px !important;
    line-height:1.18 !important;
  }

  #collection #collectionEmbeddedRow .section-subtitle{
    font-size:14px !important;
  }

  #collection .collection-qr-primary{
    max-width:220px !important;
  }

  #collection #collectionEmbeddedRow button,
  #collection #collectionEmbeddedRow .btn{
    width:100% !important;
  }
}

/* ===== ECH EDITORIAL COLOR REMODEL 2026-07 ROUND 2 ===== */
#collection .collection-host-card,
#collection #collectionEmbeddedRow > .card,
#collection .qr-box,
#collection .qr-wrap{
  background:linear-gradient(180deg, #F6F1E8 0%, #ECE4D8 100%) !important;
  border-color:rgba(163,126,67,.18) !important;
}

#collection #collectionEmbeddedRow .section-title{
  color:#17362C !important;
}

#collection #collectionEmbeddedRow .section-subtitle,
#collection #collectionEmbeddedRow .footer-note,
#collection #collectionEmbeddedRow .public-url,
#collection #collectionEmbeddedRow p,
#collection #collectionEmbeddedRow li,
#collection #collectionEmbeddedRow div,
#collection #collectionEmbeddedRow span,
#collection #collectionEmbeddedRow small{
  color:#5F5A50 !important;
}

#collection .footer-note,
#collection .collection-share-summary,
#collection .collection-share-summary-item{
  background:#F3EEE5 !important;
  border:1px solid rgba(163,126,67,.16) !important;
  box-shadow:none !important;
}

#collection .footer-note strong,
#collection .collection-share-summary-value,
#collection .collection-share-summary-item-value{
  color:#17362C !important;
}

#collection .collection-share-summary-label,
#collection .collection-share-summary-item-label{
  color:#80602F !important;
}

#collection .collection-share-summary-copy{
  color:#5F5A50 !important;
}

#collection .tasting-ratings-summary-pill{
  background:#F3EEE5 !important;
  color:#17362C !important;
  border-color:rgba(163,126,67,.18) !important;
}

/* ===== ECH COLLECTION SHARED ROUND 4 ===== */
#collection .collection-share-summary{
  background:linear-gradient(180deg, #f6f1e8 0%, #ece4d8 100%) !important;
  border:1px solid rgba(163,126,67,.18) !important;
  box-shadow:0 14px 28px rgba(82,60,34,.08) !important;
}

#collection .collection-share-summary-head{
  align-items:center !important;
}

#collection .collection-share-summary-copy{
  color:#4f4a42 !important;
}

#collection .collection-share-summary-copy strong{
  color:#17362c !important;
}

#collection .collection-share-summary-item{
  background:#f3eee5 !important;
  border:1px solid rgba(163,126,67,.16) !important;
}

#collection .collection-share-summary-item-value{
  color:#17362c !important;
}

#collection .collection-public-extra-actions{
  gap:12px !important;
}

#collection .qr-wrap > #copyCollectionLinkBtn,
#collection .collection-public-extra-actions .btn{
  width:100% !important;
  min-height:52px !important;
  border-radius:14px !important;
  background:#17362c !important;
  color:#f6e7bf !important;
  border:1px solid rgba(23,54,44,.92) !important;
  box-shadow:0 12px 24px rgba(23,54,44,.12) !important;
  font-weight:700 !important;
}

#collection .qr-wrap > #copyCollectionLinkBtn:hover,
#collection .collection-public-extra-actions .btn:hover{
  background:#214638 !important;
  color:#f1d99d !important;
  border-color:#214638 !important;
}

#collection .qr-wrap > #copyCollectionLinkBtn:disabled,
#collection .collection-public-extra-actions .btn:disabled{
  opacity:.52 !important;
  background:#9aa498 !important;
  color:#f6f1e8 !important;
  border-color:#9aa498 !important;
  box-shadow:none !important;
}

#collection .qr-wrap{
  background:linear-gradient(180deg, #f6f1e8 0%, #ece4d8 100%) !important;
  border-color:rgba(163,126,67,.18) !important;
}

#collection .qr-box{
  background:#f3eee5 !important;
  border-color:rgba(163,126,67,.16) !important;
}

#collection #collectionEmbeddedRow > .card:first-child .card-content > div:last-child{
  background:#f3eee5 !important;
  border-color:rgba(163,126,67,.16) !important;
}