/* ============================================================
   ALO YOGA — product.css (PDP: galeria, info, descrição,
   avaliações, sticky bar, guia de medidas)
   Reusa style.css (header/footer/overlays/menu/btn + shimmer)
   ============================================================ */

/* ---------- layout 2-col ---------- */
.pdp-top{
  max-width:var(--container);margin:0 auto;padding:24px var(--pad-lg) 8px;
  display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:48px;align-items:start
}

/* ---------- galeria (placeholder) ---------- */
.pdp-gallery{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pdp-shot{
  width:100%;aspect-ratio:3/4;background:var(--bg-soft);
  background-image:linear-gradient(110deg,#f1efed 30%,#e9e7e4 50%,#f1efed 70%);
  background-size:200% 100%;animation:shimmer 1.4s linear infinite
}
.pdp-shot img{width:100%;height:100%;object-fit:cover;display:block}
.pdp-shot.has-img{animation:none;background:var(--bg-soft)}

/* ---------- info ---------- */
.pdp-info{display:flex;flex-direction:column}
.pdp-rating{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--gray);margin-bottom:14px}
.pdp-rating .stars{display:inline-flex;gap:1px;color:var(--ink)}
.pdp-rating a{text-decoration:underline;text-underline-offset:2px}
.pdp-title{font-size:21px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;line-height:1.25}
.pdp-price{font-size:18px;font-weight:600;color:var(--pink);margin-top:12px}

.pdp-color{margin-top:22px}
.pdp-color-label{font-size:13px;color:var(--ink)}
.pdp-color-label a{color:var(--gray);text-decoration:underline;text-underline-offset:2px;margin-left:4px}
.pdp-swatches{display:flex;flex-direction:column;align-items:flex-start;gap:9px;margin-top:14px}
.pdp-sw{
  width:30px;height:30px;border-radius:50%;border:1px solid var(--border);
  background:var(--c,#ccc);cursor:pointer;transition:box-shadow var(--t)
}
.pdp-sw.is-selected{box-shadow:0 0 0 2px #fff,0 0 0 3px var(--ink)}
.pdp-sw-tag{font-size:12px;color:var(--ink-soft)}

.pdp-sizeguide{display:inline-block;margin-top:22px;font-size:13px;text-decoration:underline;text-underline-offset:3px;width:fit-content}

.pdp-sizes{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.pdp-size{
  min-width:58px;padding:11px 12px;border:1px solid var(--border);background:#fff;
  font-size:13px;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  transition:border-color var(--t)
}
.pdp-size:not(.is-out):hover{border-color:var(--ink)}
.pdp-size.is-selected{border-color:var(--ink);border-width:1.5px}
.pdp-size.is-out{background:var(--bg-soft);color:var(--gray-2);cursor:default}
.pdp-size.is-out .bell{color:var(--gray)}

.pdp-add{width:100%;margin-top:26px}
.pdp-fav{width:100%;margin-top:12px;display:inline-flex;align-items:center;justify-content:center;gap:10px}
.pdp-fav .heart{transition:fill var(--t)}
.pdp-fav.is-fav .heart{fill:var(--ink)}

/* ---------- descrição (accordion mobile / aberto desktop) ---------- */
.pdp-desc{max-width:var(--container);margin:30px auto 0;padding:0 var(--pad-lg)}
.pdp-desc-head{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:20px 0 14px;border-top:1px solid var(--border);
  font-size:15px;font-weight:600;letter-spacing:1px;text-transform:uppercase;pointer-events:none
}
.pdp-desc-head .pm{display:none;font-size:20px;font-weight:300}
.pdp-desc-body{font-size:13px;color:var(--ink-soft);padding-bottom:24px;border-bottom:1px solid var(--border)}

/* ---------- avaliações ---------- */
.pdp-reviews{max-width:var(--container);margin:0 auto;padding:60px var(--pad-lg) 70px;text-align:center}
.pdp-reviews h2{font-size:26px;font-weight:400;letter-spacing:.5px;text-transform:uppercase;margin-bottom:26px;text-align:left}
.pdp-reviews .rv-empty{font-size:12px;color:var(--gray);margin-bottom:22px}

/* ---------- sticky bar (ao rolar) ---------- */
.pdp-sticky{
  position:fixed;top:var(--header-h);left:0;right:0;z-index:95;
  background:#1f1f1f;color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px var(--pad-lg);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--t),transform var(--t),visibility var(--t)
}
.pdp-sticky.is-visible{opacity:1;visibility:visible;transform:none}
.pdp-sticky-info{display:flex;align-items:center;gap:14px;min-width:0}
.pdp-sticky-thumb{
  width:42px;height:52px;flex:0 0 auto;background:#333;
  background-image:linear-gradient(110deg,#333 30%,#444 50%,#333 70%);
  background-size:200% 100%;animation:shimmer 1.4s linear infinite
}
.pdp-sticky-name{font-size:13px;font-weight:600;line-height:1.3}
.pdp-sticky-price{font-size:12px;color:#cfcfcf;margin-top:2px}
.pdp-sticky-actions{display:flex;align-items:center;gap:18px;flex:0 0 auto}
.pdp-sticky-color{display:flex;align-items:center;gap:8px;font-size:12px}
.pdp-sticky-color .sw{width:22px;height:22px;border-radius:50%;background:#141414;border:1px solid #555}
.pdp-sticky .btn{background:#fff;color:var(--ink);border-color:#fff;padding:12px 26px}
.pdp-sticky .btn:hover{background:#e9e9e9;border-color:#e9e9e9}

/* ============================================================
   GUIA DE MEDIDAS (drawer "TABELA DE MEDIDAS")
   ============================================================ */
.sizeguide{
  position:fixed;top:0;right:0;height:100%;width:440px;background:#fff;z-index:var(--z-drawer);
  transform:translateX(100%);transition:transform .3s ease;display:flex;flex-direction:column
}
.sizeguide.is-open{transform:translateX(0)}
.sg-head{display:flex;align-items:flex-start;justify-content:space-between;padding:22px 24px 16px;border-bottom:1px solid var(--border-soft)}
.sg-head h2{font-size:24px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;line-height:1.15}
.sg-body{flex:1;overflow-y:auto;padding:20px 24px 40px}

.sg-tabs{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:22px}
.sg-tab{padding:9px 14px;border:1px solid var(--border);background:#fff;font-size:13px;transition:background var(--t),color var(--t),border-color var(--t)}
.sg-tab.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}

.sg-table-title{font-size:13px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;margin:22px 0 10px}
.sg-table-wrap{overflow-x:auto;scrollbar-width:thin}
.sg-table{border-collapse:collapse;width:100%;font-size:13px}
.sg-table th,.sg-table td{border:1px solid var(--border);padding:9px 14px;text-align:center;white-space:nowrap}
.sg-table th{font-weight:600}
.sg-table td:first-child,.sg-table th:first-child{text-align:left;font-weight:600;position:sticky;left:0;background:#fff}

.sg-len-heights{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0}
.sg-len-h{padding:10px 16px;border:1px solid var(--border);background:#fff;font-size:13px;transition:background var(--t),color var(--t)}
.sg-len-h.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}
.sg-len-note{font-size:13px;color:var(--ink-soft);margin-top:8px}
.sg-len-intro{font-size:13px;color:var(--ink-soft);margin-top:6px}

.sg-howto{margin-top:30px}
.sg-howto h3{font-size:15px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;margin-bottom:14px}
.sg-howto p{font-size:13px;color:var(--ink-soft);margin-bottom:12px;line-height:1.5}
.sg-howto p b{color:var(--ink)}
.sg-doubt{margin-top:24px}
.sg-doubt h3{font-size:15px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;margin-bottom:8px}
.sg-doubt p{font-size:13px;color:var(--ink-soft)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .pdp-top{grid-template-columns:1fr;gap:0;padding:0 0 8px}
  /* galeria vira carrossel horizontal */
  .pdp-gallery{
    display:flex;overflow-x:auto;gap:0;scroll-snap-type:x mandatory;scrollbar-width:none
  }
  .pdp-gallery::-webkit-scrollbar{display:none}
  .pdp-shot{flex:0 0 100%;scroll-snap-align:start}
  .pdp-info{padding:20px var(--pad-lg) 0}
  .pdp-title{text-transform:none;font-size:17px}

  /* descrição vira accordion */
  .pdp-desc-head{pointer-events:auto}
  .pdp-desc-head .pm{display:block}
  .pdp-desc-body{max-height:0;overflow:hidden;padding-bottom:0;border-bottom:none;transition:max-height .3s ease}
  .pdp-desc.is-open .pdp-desc-body{padding-bottom:24px;border-bottom:1px solid var(--border)}

  .pdp-reviews h2{text-align:center;font-size:22px}
  .sizeguide{width:100%;max-width:none}
}

@media (max-width:767px){
  .pdp-sticky-color{display:none}
  .pdp-sticky .btn{padding:11px 18px;font-size:11px}
  .pdp-sticky-name{font-size:12px}
}