/* =========================================================
   PRODUTO.CSS — Safira Presentes
   - Página detalhe do produto (layout flat)
   - Avaliações + Recomendados + Sheet do carrinho
========================================================= */
:root{
  --text:#585858;
  --bgcard:#f2f2f2;
}
/* -------------------------
   Topbar (sticky)
-------------------------- */
.product-topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:-60px;

}

.product-topbar-btn{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
    background:#eee;
}

.product-topbar-btn i{ color: #585858; }

/* -------------------------
   Mídia (imagem principal)
-------------------------- */
.product-media{
  padding: 0 0 8px;
  background: transparent;   
}

.product-media-main{
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  aspect-ratio: 4 / 5;      /* teste 1/1, 4/5, 3/4 */
  border-radius: 0 !important;
}

.product-media-main img{
  width: 100%;
  height: 100%;
  object-fit: cover;         /* ou contain, se preferir */
  display: block;

}

 
.product-media-placeholder{
  height: 320px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--brand);
  font-size: 26px;
}

/* -------------------------
   Miniaturas
-------------------------- */
.product-thumbs{
  display:flex;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 12px 0;
    border-radius: 14px 14px 0 0; 
	margin-top: -30px;
	background:#fff;
}

.product-thumb{
  width: 62px;
  height: 62px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background:#fff;
  overflow:hidden;
  padding:0;
  cursor:pointer;
}

.product-thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.product-thumb.isActive{
  border-color: rgba(117,53,175,.45);
  box-shadow: 0 10px 18px rgba(117,53,175,.12);
}

/* -------------------------
   Conteúdo
-------------------------- */
.product-media{
  padding: 0;
}

.product-info{
  background:#fff;
  border-radius: 24px 24px 0 0;   /* arredonda só em cima */
  margin-top: -16px;             /* ✅ sobe por cima da foto (ajuste fino) */
  padding: 16px 12px 16px;

  position: relative;
  z-index: 5;                    /* ✅ fica acima da imagem */
  
  /* sombinha de sheet */
 
  box-shadow: 0 -4px 4px rgba(0, 0, 0, .2);
}


.product-title-row{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap: 10px;
}

.product-title{
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.0;
  text-align: left; 
  display:flex;              /* ✅ */
  align-items:center;        /* ✅ centraliza vertical */
  min-height: calc(2 * 1.0em);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: calc(2 * 1.0em);
}

.product-actions{
  display:flex;
  gap:5px;
  align-items:center;
  flex: 0 0 auto;
}

.product-action-share{
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  border: none;
  background: transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color: #585858;
}

.product-action-share i{
  font-size: 18px;
  color: #585858;
}

/* Curtir + badge */
.product-action-like{
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: none;
  background: transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color: var(--brand);
}

.product-action-like i{
  font-size: 18px;
  color: var(--brand);
}

.like-badge{
  position:absolute;
  top:-3px;
  right:-3px;
  min-width: 12px;
  height: 12px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 9px;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height: 1;
}

.product-divider{
  height: 1px;
  background: var(--border);
  margin: 12px 0;
}

/* -------------------------
   Preço (flat)
-------------------------- */
.price-flat{}

.price-old{
  margin-top: 8px;
  color: var(--muted);
  text-decoration: line-through;
  font-weight: 700;
  font-size: 12px;
}

.price-now-row{
  margin-top: 6px;
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

.price-now{
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.5px;
 }

.price-now span{
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  margin-left: 6px;
}

.price-badge{
  background: var(--brand);
  color:#fff;
  font-size: 11px;
  padding: 3px 4px;
  border-radius: 12px;
}

.price-installments{
  margin-top: 8px;
  font-size: 13px;
  color: var(--text);
}

.price-installments small{
  font-size: 10px;
}


/* -------------------------
   Botões (flat)
   (copiado do app.css, só renomeado)
-------------------------- */

 

.btn-flat{
  margin-top: 12px;
  width: 100%;
  height: 52px;
  border-radius: 12px;
  border: 1px solid var(--border);   
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2px;
  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
  user-select:none;

  text-decoration:none;
  -webkit-appearance:none;
  appearance:none;

  background: transparent;
  color: #fff;

  transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
}

.btn-flat-brand{ background: var(--brand); }
.btn-flat-wa{ background: var(--wa); border-color: transparent; }

.btn-flat-brand:hover{ background: var(--brandHover); }
.btn-flat-wa:hover{ background: var(--waHover); }

.btn-flat:active{ transform: translateY(1px); }
.btn-flat:focus-visible{ outline: 2px solid rgba(0,0,0,.25); outline-offset: 2px; }

/* -------------------------
   Painéis flat
-------------------------- */
.panel-flat{
  margin-top: 12px;
  background: var(--bgcard);
  border-radius: 12px;
  padding: 14px;
}



.panel-title{
  font-weight: 900;
  font-size: 12.5px;
  letter-spacing: .8px;
  margin-bottom: 10px;
  color: var(--text);
  text-align: center;
}

.panel-text{
  color: #374151;
  font-size: 13.5px;
  line-height: 1.5;
}

.panel-list{
  margin: 0;
  padding-left: 18px;
}

.panel-list li{ margin: 6px 0; }
.panel-list strong{ color: var(--text); }

/* =========================================================
   AVALIAÇÕES
========================================================= */
.review-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.review-title-avg{
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .8px;
  margin-bottom: 10px;
  color: var(--text);
  display:flex;
  align-items:center;
  gap:6px;
}

.review-title-avg i{ color:#f5b301; }

/* Flash */
.review-flash{
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(117,53,175,.10);
  border: 1px solid rgba(117,53,175,.22);
  color: var(--text);
  font-weight: 800;
  font-size: 12.5px;
}

/* Resumo */
.review-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.review-stars{
  color:#f5b301;
  font-size: 14px;
}

.review-meta{
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.review-btn{
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  font-weight: 600;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  color: var(--text);
  font-size:12px;
}

.review-btn i{ font-size:18px; }
.review-btn-ghost{ background: transparent; }

/* Barras */
.review-bars{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.review-bar-row{ display:flex; align-items:center; gap: 10px; }

.review-bar-stars{
  color:#f5b301;
  font-size: 12px;
  width: 92px;
  display:flex;
  gap:2px;
}

.review-bar-stars i.fa-regular{ opacity: .45; }

.review-bar-track{
  flex: 1 1 auto;
  height: 10px;
  border-radius: 99px;
  background: #e5e7eb;
  overflow:hidden;
}

.review-bar-fill{
  height:100%;
  background: #f5b301;
  border-radius: 99px;
}

.review-bar-pct{
  width: 78px;
  text-align:right;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

/* Form */
.review-form{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.review-form-row{ display:flex; flex-direction:column; gap: 6px; }

.review-label{
  font-size: 12px;
  font-weight: 900;
  color: var(--text);
}

.review-input,
.review-textarea{
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  font-family: inherit;
  outline:none;
}

.review-textarea{ resize: vertical; }

.review-pick{ display:flex; align-items:center; gap: 6px; }

.review-star{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

.review-star i{ color:#f5b301; font-size: 14px; }

.review-form-actions{ display:flex; gap: 10px; flex-wrap: wrap; }

/* Lista */
.review-list{
  margin-top: 22px;
  display:flex;
  flex-direction:column;
  gap: 12px;
  border-top: 1px solid var(--border);
  padding-top:20px;
}

.review-empty{ color: var(--muted); font-weight: 800; font-size: 12.5px; }

.review-item{ display:flex; gap: 10px; }
.review-avatar-wrap{ width:38px; height:38px; flex:0 0 auto; }

.review-avatar{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #e5e7eb;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  color: #111827;
}

.review-body{ flex: 1 1 auto; }

.review-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.review-name{ font-weight: 900; font-size: 13px; }

.review-date{
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.review-stars-row{
  margin-top: 4px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.review-stars-small{ color:#f5b301; font-size: 12px; display:flex; gap:2px; }
.review-stars-small i.fa-regular{ opacity: .45; }

.review-verified{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:10px;
  font-weight:700;
  color:#111827;
  background:#f3f4f6;
  border:1px solid #f3f4f6;
  padding:2px 6px;
  border-radius:999px;
  white-space:nowrap;
}

.review-verified i{ color:#2563eb; }

.review-text{ margin-top: 6px; color: #374151; font-size: 13px; line-height: 1.45; }

.review-file-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--border);
  background:#fff;
  border-radius:12px;
  padding:10px 12px;
  font-size:13px;
  cursor:pointer;
  font-weight:900;
  width:fit-content;
}

.review-file-input{ display:none; }
.review-file-hint{ font-size:12px; color:var(--muted); font-weight:800; }

.review-item-photo{
  margin-top:10px;
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  overflow:hidden;
  padding:0;
  cursor:pointer;
}

.review-item-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Fotos */
.review-photos{ margin-top:20px; border-top: 1px solid var(--border); }
.review-photos-track{ display:flex; gap:10px; overflow:auto; padding-bottom:6px; margin-top:10px; }

.review-photo{
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  overflow:hidden;
  padding:0;
  flex:0 0 auto;
  cursor:pointer;
}

.review-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Pager */
.review-pager{
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.review-page-btn{
  width:30px;
  height:30px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.review-page-btn.isDisabled{ opacity:.45; pointer-events:none; }

.review-page-info{
  font-size:12px;
  font-weight:900;
  color:var(--muted);
}

/* Modal */
.review-modal{
  position:fixed;
  inset:0;
  z-index:999;
  display:flex;
  align-items:center;
  justify-content:center;
}

.review-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
}

.review-modal-content{
  position:relative;
  width:min(520px, 92vw);
  height:min(520px, 72vh);
  background:#111827;
  border-radius:18px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 25px 60px rgba(0,0,0,.35);
}

.review-modal-img{ width:100%; height:100%; object-fit:contain; display:block; }

.review-modal-close{
  position:absolute;
  top:10px;
  right:10px;
  width:38px;
  height:38px;
  border-radius:12px;
  border:none;
  background:rgba(255,255,255,.12);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.review-modal-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:999px;
  border:none;
  background:rgba(255,255,255,.14);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.review-modal-nav-prev{ left:10px; }
.review-modal-nav-next{ right:10px; }

/* =========================================================
   RECOMENDADOS
========================================================= */
.rec-wrap{ position: relative; }

 

.rec-card{
  scroll-snap-align:start;
  min-width: 100%;
  background:var(--branco);
  border:1px solid var(--border);
  border-radius: 16px;
  overflow:hidden;
  box-shadow: var(--shadow);
  display:block;
}

.rec-card-img{ height: 140px; background:var(--bg); }
.rec-card-img img{ width:100%; height:100%; object-fit:cover; display:block; }

.rec-card-ph{
  height:140px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 28px;
  color: var(--brand);
}

.rec-card-info{ padding: 10px; }

.rec-card-title{
  font-family: "Roboto Condensed", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
  text-align: center;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow:hidden;
  text-overflow: ellipsis;
  min-height: calc(2 * 1.25em);
}

.rec-card-rating{
  margin-top: 6px;
  display:flex;
  justify-content:center;
  gap:3px;
  color:#f5b301;
  font-size: 12.5px;
}

.rec-card-rating i.fa-regular{ opacity: .45; }

.rec-card-prices{
  margin-top: 8px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.rec-card-row{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:10px;
}

.rec-card-old{
  font-size: 13px;
  color: var(--muted);
  text-decoration: line-through;
}

.rec-card-now{
  font-size: 14px;
  font-weight: 900;
  color:#000;
}

.rec-card-inst{
  font-size: 11.5px;
  color: var(--text);
  font-family: "Montserrat", sans-serif;
}

.rec-card-inst strong{ font-weight: 800; }

.rec-add-btn{
  position:absolute;
  right: 5px;
  bottom: 5px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--brand);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
  transition: background-color .15s ease, transform .05s ease;
}

.rec-add-btn:hover{ background: var(--brandHover); }
.rec-add-btn:active{ transform: translateY(1px); }

.rec-nav{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.95);
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index: 3;
}

.rec-nav-left{ left: 3px; }
.rec-nav-right{ right: 3px; }

.rec-nav.isDisabled{ opacity:.45; pointer-events:none; }

.rec-hint{
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

/* =========================================================
   SHEET: Adicionado à Sacola
========================================================= */
.cart-sheet{
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.cart-sheet-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
}

.cart-sheet-panel{
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(520px, 100%);
  background: #fff;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -20px 60px rgba(0,0,0,.25);
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}

.cart-sheet-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--border);
}

.cart-sheet-status{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}

.cart-sheet-thumb-wrap{
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
}

.cart-sheet-thumb{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  overflow: hidden;
  background: #f3f4f6;
  border: 1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
}

.cart-sheet-thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.cart-sheet-ok{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #22c55e;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 12px;
  flex: 0 0 auto;
}

.cart-sheet-ok-over{
  position: absolute;
  right: -6px;
  top: -6px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #22c55e;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 11px;
  border: 2px solid #fff;
  box-shadow: 0 8px 16px rgba(0,0,0,.12);
}

.cart-sheet-titles{ min-width:0; }

.cart-sheet-title{
  font-weight: 600;
  font-size: 16px;
  line-height: 1.1;
  color:#414141;
  text-transform:uppercase;
}

.cart-sheet-sub{
  margin-top: 5px;
  font-size: 14px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}

.cart-sheet-price{
  margin-top: 5px;
  font-weight: 600;
  font-size: 14px;
}

.cart-sheet-close{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.cart-sheet-body{ padding: 12px 14px 14px; }

.cart-sheet-hint{
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 10px;
  text-align:left;
  padding-left:36px;
}

/* Recs no sheet */
.cart-sheet-rec{
  position: relative;
  padding: 0 34px;
}

.cart-sheet-rec-track{
  display:flex;
  gap: 12px;
  overflow: hidden;
}

.cart-sheet-rec-item{
  flex: 0 0 calc((100% - 12px) / 2);
  min-width: calc((100% - 12px) / 2);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow:hidden;
  background:#fff;
}

.cart-sheet-rec-img{
  height: 120px;
  background:#f3f4f6;
}

.cart-sheet-rec-img img{ width:100%; height:100%; object-fit:cover; display:block; }

.cart-sheet-rec-info{ padding: 10px; }

.cart-sheet-rec-name{
  font-family: "Roboto Condensed", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
  text-align: left;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;

  min-height: calc(2 * 1.25em);
}

.cart-sheet-rec-rating{
  margin-top: 6px;
  display:flex;
  justify-content:flex-start;
  gap:3px;
  color:#f5b301;
  font-size: 12.5px;
}

.cart-sheet-rec-prices{
  margin-top: 8px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.cart-sheet-rec-price{
  font-size: 14px;
  font-weight: 900;
  color:#000;
}

.cart-sheet-rec-inst{
  font-size: 11.5px;
  color: var(--text);
  font-family: "Montserrat", sans-serif;
}

.cart-sheet-rec-inst strong{ font-weight: 800; }

.cart-sheet-rec-plus{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--brand);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  margin-top: 10px;
}

.cart-sheet-rec-badge{
  position:absolute;
  top: 8px;
  left: 8px;
  background: #fde68a;
  color:#111827;
  font-weight: 900;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  z-index: 2;
}

.cart-sheet-rec-nav{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.95);
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index: 3;
}

.cart-sheet-rec-nav-left{ left: 6px; }
.cart-sheet-rec-nav-right{ right: 6px; }
.cart-sheet-rec-nav.isDisabled{ opacity:.45; pointer-events:none; }

/* Botões do sheet */
.cart-sheet-actions{
  margin-top: 14px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.cart-sheet-btn{
  height: 52px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: .2px;
  cursor:pointer;
  border: 1px solid var(--border);
  background:#fff;
  color: var(--text);
  text-decoration:none;
}

.cart-sheet-btn-primary{
  background: var(--brand);
  border-color: var(--brand);
  color:#fff;
}

.cart-sheet-btn-ghost{
  background:#eee;
}

/* Responsivo */
@media (max-width: 420px){
  .product-media-main img{ height: 280px; }
}



/* ✅ GARANTIA: carrossel dos recomendados funciona mesmo sem app.css */

/* trilho */
.rec-carousel{
  --pad: 34px;   /* espaço para setas */
  --gap: 12px;   /* espaço entre cards */

  display: flex;
  --gap: 6px;   /* antes 12px */
  gap: var(--gap);

  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

  scroll-snap-type: x mandatory;
  padding: 4px var(--pad) 6px;

  scrollbar-width: none;
}
.rec-carousel::-webkit-scrollbar{ display:none; }

/* cada card = metade da área ÚTIL do trilho (padding já é descontado automaticamente) */
.rec-card-wrap{
  position: relative; /* importante pro botão + ficar no card */
  flex: 0 0 calc((100% - var(--gap)) / 2);
  min-width: calc((100% - var(--gap)) / 2);

  scroll-snap-align: start;
}

/* evita “min-width:100%” forçando coisas estranhas */
.rec-card{
  min-width: 0;
}



/* ===== Variações (ajustes solicitados) ===== */
.product-variations{ margin-top:18px; }
.product-variations-title{
  font-weight:900;
  letter-spacing:.02em;
  font-size:12px;
  color:#111827;
  margin:8px 0 10px;
  text-transform:uppercase;
  
}
.product-variation-group{ margin:10px 0; }
.product-variation-group.isError .product-variation-options{
  outline: 2px solid rgba(239,68,68,.40);
  outline-offset: 6px;
  border-radius: 14px;
}
.product-variation-label{
  font-weight:800;
  font-size:12px;
  color:#111827;
  margin-bottom:8px;
}
.product-variation-options{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.product-variation-radio{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid rgba(17,24,39,.12);
  border-radius:10px;
  background:#eee;
  cursor:pointer;
  user-select:none;
  font-size:13px;
  color:#111827;
}
.product-variation-radio input{ accent-color:#111827; }
.product-variation-radio.isActive{
  border-color: rgba(117,53,175,.45);
  box-shadow: 0 10px 18px rgba(117,53,175,.12);
}

/* ✅ erro: dotted vermelho SOMENTE no radio */
.product-variation-group.isError .product-variation-radio{
  border: 1px dotted #ef4444;
}

/* ✅ erro: não usar outline no container */
.product-variation-group.isError .product-variation-options{
  outline: none !important;
}
.var-error{
  margin-top:10px;
  color:#b91c1c;
  font-size:12px;

  background: rgba(239,68,68,.12);
  border: 1px dotted rgba(239,68,68,.55);
  border-radius:10px;
  padding:10px 12px;
}


.product-media-main{ position:relative; }

.media-counter{
  position:absolute;
  bottom:30px;
  left:50%;
  transform: translateX(-50%);
  z-index:3;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(0,0,0,.25);
  color:#fff;
  font-size:12px;
  backdrop-filter: blur(6px);
}