/* RDC Price Tracking modal (produto) */
#rdc-price-track-modal{ display:none; }
#rdc-price-track-modal.is-open{ display:flex; }

.rdc-price-track-modal{
  position:fixed;
  inset:0;
  z-index:999999;
  align-items:center;
  justify-content:center;
  padding:16px;
}

.rdc-price-track-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.56);
}

.rdc-price-track-modal__panel{
  position:relative;
  width:460px;
  max-width:calc(100vw - 26px);
  background:#fff;
  border-radius:18px;
  border:0;
  box-shadow:0 18px 60px rgba(0,0,0,.25);
  padding:16px 16px 14px;
}

.rdc-price-track-modal__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.rdc-price-track-modal__close{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  color:#111;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .15s ease, box-shadow .15s ease;
}
.rdc-price-track-modal__close:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.12)}

.rdc-price-track-modal__title{
  font-weight:900;
  color:#111;
  margin:0;
  font-size:14px;
  line-height:1.2;
}

.rdc-price-track-modal__text{
  margin:10px 0 12px;
  font-size:12px;
  line-height:1.45;
  color:#444;
}

.rdc-price-track-modal__choices{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:10px 0 14px;
}

.rdc-price-track-modal__radio{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  cursor:pointer;
}

.rdc-price-track-modal__radio input{ margin-top:3px; }

.rdc-price-track-modal__label{
  display:block;
  font-size:13px;
  margin:0 0 6px;
  opacity:.9;
}

.rdc-price-track-modal__dropdown{
  width:100%;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  background:#fff;
}

.rdc-price-track-modal__note{
  display:block;
  margin:0 0 12px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(16,185,129,.10);
  border:1px solid rgba(16,185,129,.22);
  color:rgba(0,0,0,.78);
  font-size:13px;
}

.rdc-price-track-modal__note.is-error{
  background:rgba(239,68,68,.10);
  border-color:rgba(239,68,68,.22);
}

.rdc-price-track-modal__actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:stretch;
}

.rdc-price-track-modal__primary{
  width:100%;
  text-align:center;
  padding:10px 14px;
  border-radius:999px !important;
  font-weight:900 !important;
  background:#111 !important;
  border-color:#111 !important;
  color:#fff !important;
}

.rdc-price-track-modal__link{
  display:inline-block;
  text-align:center;
  text-decoration:none;
  font-size:13px;
  color:rgba(0,0,0,.65);
}

.rdc-price-track-modal__link:hover{ color:rgba(0,0,0,.85); }

.rdc-price-track-modal__footer{
  margin-top:12px;
}

.rdc-price-track-modal__muted{ opacity:.75; }

body.rdc-price-track-modal-open{ overflow:hidden; }

@supports((-webkit-backdrop-filter:blur(3px)) or (backdrop-filter:blur(3px))){
  .rdc-price-track-modal__backdrop{ -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
}

/* Fallback button (quando tema não renderiza wd-pt-btn) */
body.single-product .rc-pt-fallback-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  cursor:pointer;
}

/* === Product CTA HUB (rc-qv-side) === */

/*
  Produtos simples: o CSS do módulo "Lista rápida de variações" só é injetado em produtos variáveis.
  Para manter o mesmo layout/estilo dos CTAs no topo-direito, definimos um subset aqui
  APENAS quando o hub foi criado via JS (classe .rc-cta-hub).
*/
/*
  Produtos simples: o hub é inserido via JS logo após o card de preço (.rc-preco-card)
  para ficar alinhado ao "canto" do botão Comprar (mais harmonioso do que no topo).
*/
body.single-product .rc-qv-side.rc-cta-hub{
  position:static;
  z-index:6;
  width:100%;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  padding:0;
  margin:10px 0 -6px;
}
body.single-product .rc-qv-side.rc-cta-hub .rc-qv-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-end;
}

/* Stack de CTAs também para produtos variáveis (o módulo QV não define .rc-qv-actions) */
body.single-product .rc-qv-side .rc-qv-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-end;
}
@media (max-width:768px){
  body.single-product .rc-qv-side.rc-cta-hub{
    margin:8px 0 6px;
    z-index:5;
  }
}

/*
  Padronização do layout dos botões no produto (HUB)
  - Deve ficar IGUAL ao layout aplicado em produtos variáveis (snippet variations_qv)
  - Aqui aplicamos apenas ao hub criado via JS (.rc-cta-hub)
*/
body.single-product .rc-cta-hub .rc-qv-open,
body.single-product .rc-pt-fallback-btn.rc-qv-open{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:10px;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
  padding:5px 12px;
  background:#fff;
  color:#222;
  border:1px solid #ddd;
  border-radius:50px;
  transition:all .2s ease;
  white-space:nowrap;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  max-width:100%;
  text-transform:none;
  letter-spacing:0;
}
body.single-product .rc-cta-hub .rc-qv-open:before,
body.single-product .rc-pt-fallback-btn.rc-qv-open:before{
  content:"";
  display:inline-block;
  width:11px;
  height:1.5px;
  background:currentColor;
  box-shadow:0 3px 0 0 currentColor,0 -3px 0 0 currentColor;
  border-radius:2px;
  flex:0 0 auto;
  opacity:.95;
}
body.single-product .rc-cta-hub .rc-qv-open:hover,
body.single-product .rc-pt-fallback-btn.rc-qv-open:hover{
  background:#000;
  color:#fff;
  border-color:#000;
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}

/* Ícone do botão "Rastrear preço": tendência de queda (não confundir com "Ver opções").
   Nota: em alguns temas (ex: Woodmart) botões de ações podem zerar ::before em anchors.
   Por isso, usamos seletor mais específico + !important para garantir o ícone em produtos simples e variáveis. */
body.single-product a.rc-qv-open.rc-qv-track::before,
body.single-product .rc-qv-actions a.rc-qv-open.rc-qv-track::before,
body.single-product .rc-cta-hub a.rc-qv-open.rc-qv-track::before{
  content:"";
  display:inline-block !important;
  width:12px;
  height:12px;
  margin-right:6px;
  background:currentColor !important;
  border:0;
  box-shadow:none;
  transform:none;
  border-radius:0;
  flex:0 0 auto;
  opacity:.95;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 18 16 11 12 15 1 4'/%3E%3Cpolyline points='23 18 17 18 17 12'/%3E%3C/svg%3E") !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 18 16 11 12 15 1 4'/%3E%3Cpolyline points='23 18 17 18 17 12'/%3E%3C/svg%3E") !important;
  -webkit-mask-repeat:no-repeat !important;
  mask-repeat:no-repeat !important;
  -webkit-mask-position:center !important;
  mask-position:center !important;
  -webkit-mask-size:contain !important;
  mask-size:contain !important;
}

body.single-product a.rc-qv-open.rc-qv-qa::before,
body.single-product .rc-qv-actions a.rc-qv-open.rc-qv-qa::before,
body.single-product .rc-cta-hub a.rc-qv-open.rc-qv-qa::before{
  content:"";
  display:inline-block !important;
  width:12px;
  height:12px;
  margin-right:6px;
  background:currentColor !important;
  border:0;
  box-shadow:none;
  transform:none;
  border-radius:0;
  flex:0 0 auto;
  opacity:.95;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3Cpath d='M8 9h8'/%3E%3Cpath d='M8 13h5'/%3E%3C/svg%3E") !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3Cpath d='M8 9h8'/%3E%3Cpath d='M8 13h5'/%3E%3C/svg%3E") !important;
  -webkit-mask-repeat:no-repeat !important;
  mask-repeat:no-repeat !important;
  -webkit-mask-position:center !important;
  mask-position:center !important;
  -webkit-mask-size:contain !important;
  mask-size:contain !important;
}

@supports((-webkit-backdrop-filter:blur(3px)) or (backdrop-filter:blur(3px))){
  .rdc-price-track-modal__backdrop{
    -webkit-backdrop-filter:blur(3px);
    backdrop-filter:blur(3px);
  }
}

@media (max-width:640px){
  .rdc-price-track-modal{
    align-items:flex-end;
    padding:10px;
  }
  .rdc-price-track-modal__panel{
    width:calc(100vw - 18px);
    border-radius:20px;
  }
}