/* ===== Hero do produto — portado do template Wavy (LP Shark FlexStyle) ===== */
/* ===== Glossy PDP — CLEAN (prefixo dy-) ===== */
:root{
  --dy-ink:#1A1A1A;--dy-soft:#555;--dy-line:#E4E4E4;--dy-grey:#F4F2F1;
  --dy-blue:#1A1A1A;--dy-green:#1A1A1A;--dy-sale:#1A1A1A;--dy-copper:#1A1A1A;--dy-save:#1A1A1A;--dy-red:#C0392B;
}
/* ===== PRODUCT TOP ===== */
.dy-top{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;padding-bottom:12px}
.dy-top>*{min-width:0}
.dy-gal{min-width:0}
.dy-gal-main{background:#fff;border-radius:4px;overflow:hidden;min-width:0;touch-action:pan-y;user-select:none}
.dy-gal-main img,.dy-gal-main video{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
/* Item de video na galeria: mesma caixa e mesma proporcao das fotos (object-fit
   cover), para o slide de video nao mudar a altura do hero. A miniatura leva um
   triangulo de play, senao ela parece uma foto qualquer. */
.dy-thumb-vid{position:relative}
.dy-thumb-vid::after{content:'';position:absolute;left:50%;top:50%;width:0;height:0;transform:translate(-40%,-50%);border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent #fff;filter:drop-shadow(0 0 3px rgba(0,0,0,.55))}
.dy-thumbrow{display:flex;align-items:center;gap:6px;margin-top:14px}
.dy-thumbrow .arw{background:none;border:0;color:#777;font-size:24px;line-height:1;padding:0 2px;flex:0 0 auto}
.dy-thumbs{display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth;flex:1;min-width:0;scrollbar-width:none}
.dy-thumbs::-webkit-scrollbar{display:none}
.dy-thumb{flex:0 0 88px;width:88px;height:88px;border:1px solid var(--dy-line);border-radius:4px;overflow:hidden;background:#fff;padding:0}
.dy-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.dy-thumb[aria-pressed="true"]{border:2px solid var(--dy-ink)}
/* ===== BUY BOX ===== */
.dy-buy{padding-top:6px}
.dy-subhead{font-size:clamp(15px,3.6vw,18px);color:#6f6f6f;font-weight:300;margin-top:4px;line-height:1.35}
.dy-buy h1{font-size:clamp(27px,7vw,34px);font-weight:500;letter-spacing:.005em;line-height:1.15}
.dy-de{font-size:14px;color:var(--dy-red);text-decoration:line-through;margin-top:18px;line-height:1;margin-bottom:0}
.dy-color{margin-top:20px}
.dy-color-lbl{display:block;font-size:14px;color:var(--dy-soft);margin-bottom:10px}
.dy-color-lbl b{color:var(--dy-ink);font-weight:600}
.dy-color-row{display:flex;gap:10px;flex-wrap:wrap}
.dy-cs{width:52px;height:52px;border-radius:11px;padding:0;border:1px solid var(--dy-line);background:#f7f6f4;cursor:pointer;flex:0 0 auto;overflow:hidden}
.dy-cs img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.dy-cs[aria-pressed="true"]{outline:2px solid var(--dy-ink);outline-offset:1px;border-color:var(--dy-ink)}
.dy-priceline{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin-top:4px}
.dy-priceline .por{font-size:34px;font-weight:700;color:var(--dy-ink);letter-spacing:-.01em}
.dy-priceline .off{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--dy-ink);padding:5px 11px;border-radius:40px}
.dy-priceline .save{font-size:13px;font-weight:500;color:var(--dy-soft)}
.dy-priceline .de{font-size:18px;color:var(--dy-red);text-decoration:line-through}
.dy-pay-a{font-size:16px;font-weight:600;margin-top:8px}
.dy-pay{font-size:14px;color:var(--dy-soft);margin-top:5px;line-height:1.7}
.dy-gift{display:flex;align-items:center;gap:11px;margin-top:20px;padding:11px 13px;border:1px solid var(--dy-line);border-radius:9px;background:#fff;cursor:pointer;width:100%;text-align:left}
.dy-gift:active{background:#f3f3f3}
.dy-gift-img{flex:0 0 auto;width:34px;height:46px;object-fit:contain}
.dy-gift-tx{flex:1;min-width:0;font-size:13px;color:var(--dy-soft);line-height:1.35}
.dy-gift-tx b{color:var(--dy-ink);font-weight:700}
.dy-gift-arw{flex:0 0 auto;color:#bbb}
.dy-cta{display:block;width:100%;background:var(--dy-ink);color:#fff;border:0;font-size:16px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:19px;border-radius:9px;margin-top:22px;text-align:center}
.dy-cta:active{opacity:.9}
.dy-cta2{display:block;width:100%;text-align:center;background:#fff;color:var(--dy-ink);border:1px solid var(--dy-ink);font-size:14px;font-weight:600;padding:15px;border-radius:9px;margin-top:11px}
.dy-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:20px}
.dy-trust span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:.5px solid #c9c9c9;border-radius:7px;padding:12px 6px;text-align:center;font-size:11px;letter-spacing:.03em;color:#3a3a3a;font-weight:400;line-height:1.3}
.dy-trust svg{flex:0 0 auto;width:21px;height:21px;stroke:var(--dy-ink)}
.dy-pill{display:flex;align-items:center;gap:7px;width:fit-content;margin:18px auto 0;border:1px solid var(--dy-line);border-radius:999px;padding:7px 14px}
.dy-pill .lg{font-weight:800;font-size:14px;letter-spacing:-.03em}
.dy-pill .x{color:var(--dy-copper)}
.dy-pill img{width:42px;height:19px;object-fit:contain;transform:translateY(2px)}
.dy-pill em{font-style:normal;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--dy-soft)}
/* ===== DESCRIPTION (EN) ===== */
.dy-desc{max-width:520px;margin:0 auto}
.dy-desc-img{display:block;width:100%;height:auto}
.dy-rel-price .off{font-size:13px;color:var(--dy-soft);font-weight:300;margin-left:7px;white-space:nowrap}
.dy-rel-price .off s{color:var(--dy-red)}
.dy-rel-price .off b{font-weight:500;color:var(--dy-ink)}
.dy-gal-main{cursor:zoom-in}
.dy-lb{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.93);display:none;align-items:center;justify-content:center;padding:24px}
.dy-lb.show{display:flex}
.dy-lb img{max-width:100%;max-height:100%;object-fit:contain}
.dy-lb-x{position:absolute;top:16px;right:16px;background:none;border:0;cursor:pointer;padding:4px}
.dy-tps-stars span.off{background:#dcdce6}
.dy-tps-cstars span.off{background:#dcdce6}
/* ===== STICKY (mobile) ===== */
.dy-sticky{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--dy-line);padding:10px 16px;display:flex;align-items:center;gap:12px;z-index:60;transform:translateY(120%);transition:transform .3s;box-shadow:0 -6px 22px rgba(0,0,0,.08)}
.dy-sticky.show{transform:translateY(0)}
.dy-sticky .info{flex:1;min-width:0}
.dy-sticky .nm{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dy-sticky .pr{font-size:14px;font-weight:600;color:var(--dy-ink)}
.dy-sticky .pr s{font-size:11px;color:var(--dy-red);font-weight:300;margin-left:5px}
.dy-sticky a{flex:0 0 auto;background:var(--dy-ink);color:#fff;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:13px 20px;border-radius:9px}
/* ===== reestruturacao Glossy ===== */
.dy-sub{font-size:14.5px;color:var(--dy-soft);margin-top:8px;line-height:1.5}
.dy-sub b{color:var(--dy-ink);font-weight:700}
.dy-pill svg{flex:0 0 auto}
.dy-demo{background:#fff;max-width:520px;margin:0 auto;padding:34px 12px 40px;text-align:center}
.dy-demo h2{font-size:clamp(24px,6.4vw,30px);font-weight:500;letter-spacing:.005em;line-height:1.15;padding:0 6px}
.dy-demo-vid{margin-top:24px;display:flex;justify-content:center}
.dy-demo p{font-size:14px;color:var(--dy-soft);margin-top:20px;line-height:1.6;padding:0 10px;max-width:420px;margin-left:auto;margin-right:auto}
.dy-hdrop{margin-top:22px}
.dy-hdrop details{border-bottom:1px solid var(--dy-line)}
.dy-hdrop details:first-child{border-top:1px solid var(--dy-line)}
.dy-hdrop summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 2px;font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--dy-ink);cursor:pointer}
.dy-hdrop summary::-webkit-details-marker{display:none}
.dy-hdrop summary svg{flex:0 0 auto;transition:transform .25s;stroke:var(--dy-ink)}
.dy-hdrop details[open] summary svg{transform:rotate(180deg)}
.dy-hdrop-p{padding:0 2px 20px}
.dy-hdrop-p p{margin:0;font-size:14px;color:var(--dy-soft);line-height:1.65}
.dy-hdrop-p a{color:var(--dy-ink);font-weight:600}
.dy-hdrop-p ul{margin:0;padding:0;list-style:none}
.dy-hdrop-p li{font-size:14px;color:var(--dy-ink);line-height:1.45;padding:7px 0;border-bottom:1px solid #f0efed;display:flex;gap:9px}
.dy-hdrop-p li:last-child{border-bottom:0}
.dy-hdrop-p li svg{flex:0 0 auto;margin-top:2px;stroke:var(--dy-ink)}
.dy-exp{margin-top:16px}
.dy-exp-lbl{text-align:center;font-size:12px;color:var(--dy-soft);margin:0 0 10px}
.dy-exp-btn{display:flex;align-items:center;justify-content:center;height:48px;border-radius:8px;font-size:16px;text-decoration:none;border:0;cursor:pointer}
.dy-exp-shop{width:100%;background:#5a31f4;color:#fff}
.dy-exp-shop b{font-weight:800;font-size:19px;letter-spacing:.2px}
.dy-exp-row{display:flex;gap:10px;margin-top:10px}
.dy-exp-row .dy-exp-btn{flex:1}
.dy-exp-apple{background:var(--dy-ink);color:#fff;gap:5px;font-weight:600}
.dy-exp-apple svg{flex:0 0 auto}
.dy-exp-apple span{font-size:17px}
.dy-exp-gpay{background:var(--dy-ink);color:#fff;gap:5px;font-weight:600}
.dy-exp-gpay svg{flex:0 0 auto}
.dy-cmp-row.save>span{font-weight:600}
.dy-cmp-row.save>.us{color:var(--dy-ink)}
.dy-gal-main{position:relative}
/* ===== convivencia com o tema da loja ===== */
.dy-top{max-width:none;margin:0;padding:22px 0 12px;font-family:inherit}
.dy-top *,.dy-top *::before,.dy-top *::after{box-sizing:border-box}
.dy-top h1{margin:0}
.dy-top p{margin:0}
.dy-top button{font-family:inherit}
.dy-buy .dy-sub{font-size:14px;color:var(--dy-soft);line-height:1.6;margin-top:12px}
.dy-thumbs{padding:2px}
.dy-cta{cursor:pointer}
.dy-exp{margin-top:14px}
.dy-exp-lbl{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--dy-soft);text-align:center;margin-bottom:9px}
.dy-exp-btn{display:flex;align-items:center;justify-content:center;gap:4px;height:46px;border-radius:9px;font-weight:600;text-decoration:none}
.dy-exp-shop{background:#5A31F4;color:#fff;font-size:19px;letter-spacing:-.02em}
.dy-exp-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:9px}
.dy-exp-apple{background:#000;font-size:15px}
.dy-exp-apple span,.dy-exp-apple b{color:#fff}
.dy-exp-gpay span{color:#3c4043}
.dy-cs{background:#fff}
.dy-exp-gpay{background:#fff;color:#3c4043;border:1px solid #dadce0;font-size:15px}
/* o tema reescreve cor de link e de botao — os do template Wavy tem que resistir */
.dy-sticky a,.dy-cta,.dy-exp-shop{color:#fff!important}
.dy-sticky a,.dy-exp-btn{text-decoration:none!important}
.dy-sticky{z-index:9997}
body.dy-open .dy-sticky{display:none}
.dy-cs img{background:#fff}
/* os blocos originais (Good to Know p/ baixo) seguem com o estilo do tema */
.dy-buy .product-summary__collapsible-row:first-of-type{margin-top:26px}
/* ===== desktop: galeria + compra lado a lado ===== */
@media (min-width:1000px){
  .dy-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);gap:48px;align-items:start;padding:28px 0 16px}
  .dy-gal{position:sticky;top:86px}
  .dy-buy{padding-top:0}
  .dy-buy h1{font-size:34px}
  .dy-thumb{flex:0 0 78px;width:78px;height:78px}
}
@media (min-width:1280px){ .dy-top{gap:60px} }

/* o container do produto era mais estreito (1296px) que as demais secoes da pagina
   (1352px), o que sobrava espaco nas bordas do hero — agora alinham */
.main-product{margin-left:auto!important;margin-right:auto!important;width:100%}
.main-product .main-product-container{max-width:1352px!important;width:100%}

/* menos espaco vazio entre o fim do hero e a barra de secoes (OVERVIEW/TUTORIAL/...) */
.dy-top{padding-bottom:0}
[id$="__jump_bar_pnPkxY"]{padding-top:4px!important;margin-top:0!important}
[id$="__jump_bar_pnPkxY"] .section-container{padding-top:0!important}
/* espaco antes da barra de secoes */

/* o tema deixava 54px de margem sob o bloco do produto — sobrava um vazio antes
   da barra de secoes (margin-bottom do bloco de produto) */
.main-product{margin-bottom:14px!important}
/* o botao "Load More" do widget de reviews nao tem o que carregar offline */
.jdgm-paginate__load-more,.jdgm-paginate{display:none!important}

/* ===== seletor de tamanho (size.js) — visual, nao muda a variante ===== */
.dy-size{margin-top:20px}
.dy-size-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.dy-size-lb{font-size:14px;font-weight:600;color:var(--dy-ink)}
.dy-size-nota{font-size:12.5px;color:#8a8a8a;font-style:italic;margin-top:1px}
.dy-size-op{display:block;width:100%;text-align:left;border:1px solid var(--dy-line);border-radius:10px;
  background:#fff;padding:14px 16px;margin-top:9px;cursor:pointer;font-family:inherit;position:relative;
  transition:border-color .18s,box-shadow .18s}
.dy-size-op[aria-pressed="true"]{border-color:var(--dy-ink);box-shadow:inset 0 0 0 1px var(--dy-ink)}
.dy-size-op h5{font-size:14px;font-weight:500;color:var(--dy-ink)}
.dy-size-op p{font-size:12.5px;color:#8a8a8a;margin-top:3px;line-height:1.35;max-width:88%}
.dy-size-ck{position:absolute;right:14px;top:14px;width:20px;height:20px;border-radius:50%;
  border:1px solid var(--dy-line);display:flex;align-items:center;justify-content:center}
.dy-size-op[aria-pressed="true"] .dy-size-ck{background:var(--dy-ink);border-color:var(--dy-ink)}
.dy-size-op[aria-pressed="true"] .dy-size-ck::after{content:"";width:5px;height:9px;border:solid #fff;
  border-width:0 1.6px 1.6px 0;transform:rotate(45deg) translate(-1px,-1px)}
.dy-size-rod{font-size:12px;color:#8a8a8a;font-style:italic;margin-top:11px;line-height:1.4}

/* ===== popup do brinde, em formato de mini hero =====
   Imagem grande no topo (como o hero do produto), depois tag, titulo e a lista do
   que vem junto. Reaproveita .dy-modal do shell (fundo, caixa, botao de fechar). */
.dy-gpop .box{max-width:420px;width:calc(100% - 32px);padding:0;overflow:hidden;border-radius:16px}
.dy-gpop-hero{background:linear-gradient(180deg,#f4f2f0,#e9e6e3);display:flex;align-items:center;
  justify-content:center;padding:26px 20px 20px}
.dy-gpop-hero img{width:100%;max-width:220px;height:auto;max-height:190px;object-fit:contain;display:block}
.dy-gpop-tx{padding:18px 22px 24px}
.dy-gpop-tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#1a8a3c;background:#eaf7ee;border-radius:99px;padding:5px 11px}
.dy-gpop-tx h3{font-size:20px;font-weight:600;color:var(--dy-ink);margin-top:11px;letter-spacing:-.01em}
.dy-gpop-tx>p{font-size:13.5px;color:var(--dy-soft);margin-top:5px;line-height:1.45}
.dy-gpop-l{list-style:none;margin-top:16px;border-top:1px solid var(--dy-line);padding:0}
.dy-gpop-i{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--dy-line);
  font-size:13.5px;color:var(--dy-ink);line-height:1.35}
.dy-gpop-i img{width:42px;height:42px;object-fit:contain;flex:0 0 auto;background:#f7f6f4;border-radius:8px}
.dy-gpop-dot{width:6px;height:6px;border-radius:50%;background:var(--dy-ink);flex:0 0 auto;margin:0 18px}


/* ===== order bump do hero: segundo anel com desconto =====
   Mesma linguagem visual do badge do brinde (.dy-gift): caixa clara, imagem a
   esquerda, texto no meio. A diferenca e o checkbox e o painel que abre DENTRO da
   propria caixa quando marcado. */
.dy-bump2{margin-top:16px;border:1px solid var(--dy-line);border-radius:11px;background:#fff;overflow:hidden;
  transition:border-color .18s,box-shadow .18s}
.dy-bump2.on{border-color:var(--dy-ink);box-shadow:inset 0 0 0 1px var(--dy-ink)}
.dy-bump2-top{display:flex;align-items:center;gap:11px;padding:12px 13px;cursor:pointer;width:100%;text-align:left}
.dy-bump2-top input[type=checkbox]{appearance:none;-webkit-appearance:none;width:20px;height:20px;flex:0 0 auto;
  border:1.5px solid #c4c4c4;border-radius:5px;cursor:pointer;position:relative;margin:0;background:#fff}
.dy-bump2.on .dy-bump2-top input[type=checkbox]{background:var(--dy-ink);border-color:var(--dy-ink)}
.dy-bump2.on .dy-bump2-top input[type=checkbox]::after{content:"";position:absolute;left:6px;top:2px;
  width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.dy-bump2-img{width:40px;height:40px;flex:0 0 auto;object-fit:contain;background:#f7f6f4;border-radius:7px}
.dy-bump2-tx{flex:1;min-width:0;font-size:13px;color:var(--dy-soft);line-height:1.35}
.dy-bump2-tx b{display:block;color:var(--dy-ink);font-weight:600;font-size:13.5px}
.dy-bump2-right{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.dy-bump2-val{font-size:13.5px;font-weight:700;color:var(--dy-ink);white-space:nowrap}
.dy-bump2-pr{flex:0 0 auto;white-space:nowrap;background:var(--dy-ink);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.05em;padding:6px 10px;border-radius:99px}
.dy-bump2-op{padding:0 13px 14px;border-top:1px solid var(--dy-line);margin-top:2px}
.dy-bump2-lb{display:block;font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--dy-soft);margin:13px 0 8px}
.dy-bump2-cor{display:flex;flex-wrap:wrap;gap:7px}
.dy-bump2-cor .dy-cs{width:42px;height:42px;border-radius:9px}
.dy-bump2-tam{padding:11px 40px 11px 13px;font-size:14px}

/* O card "Select your size" E o proprio dropdown: o <select> fica por cima do card
   inteiro, invisivel, e a seta desenhada substitui o circulo de check. Clicar em
   qualquer ponto do card abre a lista nativa — no celular, o seletor do sistema. */
.dy-size-esc{position:relative}
.dy-size-esc .dy-size-sel{position:absolute;inset:0;width:100%;height:100%;opacity:0;
  appearance:none;-webkit-appearance:none;border:0;background:none;cursor:pointer;font-family:inherit}
.dy-size-esc .dy-size-ck{display:none}
.dy-size-arw{position:absolute;right:16px;top:50%;width:8px;height:8px;border:solid #6f6f6f;
  border-width:0 1.6px 1.6px 0;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.dy-size-esc[aria-pressed="true"] .dy-size-arw{border-color:var(--dy-ink)}
.dy-size-val{font-weight:600;color:var(--dy-ink)}
