
:root{
  /* herdado do ficheiro anterior */
  --brand:#3198a7; --brand-600:#3197a7d7; --ink:#111; --muted:#555;
  --line:#ccc; --line-strong:#eee; --bg-chip:#f2f2f2;
  --gap-1:1vh; --gap-1-5:1.5vh; --gap-2:2vh; --gap-2-5:2.5vh; --radius-1:.4vh;
  --fs-xxl:4vh; --fs-xl:3vh; --fs-lg:2.5vh; --fs-md:2.2vh; --fs-sm:2vh; --fs-xs:1.9vh;
  --container-w-desktop:65vw; --table-w-desktop:63vw;
  --container-w-mobile:90vw;  --table-w-mobile:85vw;

  /* Posicionamento */
  --pos-item-max:20vh;          /* largura/altura tipo cartão */
  --pos-row-h:20vh;             /* altura colapsada (1 linha) */
  --pos-speed:1.1s;             /* duração da animação */

  /* Carrossel */
  --carousel-w:30vw; --carousel-btn-w:5vh;

  /* Transições globais */
  --transition-fast:.2s ease;
}

/* Globais */
*{box-sizing:border-box; transition:all var(--transition-fast);}
body{overflow-x:hidden; font-family:'League Spartan',sans-serif;}

/* Estrutura principal */
.product{display:flex;flex-wrap:wrap;max-width:var(--container-w-desktop);margin:auto;background:#fff;}
.product-image{flex:1 1 100%;align-items:center;justify-content:center;}
.productname{display:none;}
.product-details{flex:1 1 100%;padding:var(--gap-2-5) 0;display:flex;flex-direction:column;justify-content:center;text-align:left;}
.product-details h1{font-size:var(--fs-xxl);margin-top:3vh;margin-bottom:0;text-align:center;}
.product-details p.descricao{font-size:var(--fs-md);color:var(--muted);text-align:center;}

/* Tabela */
.table{margin:auto;width:var(--table-w-desktop);display:block;}
.t-r{display:flex;width:100%;border:1px solid var(--brand);border-top:none;border-left:none;border-right:none;}
.t-c{width:20%;padding:var(--gap-1);font-size:var(--fs-xs);}
.t-c:nth-child(even){width:80%;}
.t-c a{color:var(--brand);font-weight:bolder;}
tbody{width:100%;font-size:var(--fs-lg);}
td{background:#999;}
th{width:50%;}

/* Campos */
label, .opt-label{margin:.5vh 0 .2vh 0;font-weight:700;font-size:var(--fs-md);display:block;}
select,button,textarea,p,input[type="text"],input[type="file"],input[type="tel"],input[type="email"],input[type="number"]{
  resize:none;padding:1.5vh;width:100%;border-radius:var(--radius-1);border:.1vh solid var(--line);font-size:var(--fs-sm);margin-top:1vh;
}
button{background:var(--brand);color:#fff;border:none;cursor:pointer;}
button:hover{background:var(--brand-600);}

/* Cores */
.color-options{display:flex;flex-wrap:wrap;gap:var(--gap-1-5);margin:0 15%;justify-content:center;}
.color-options input[type="radio"]{display:none;}
.color-circle{width:4vh;height:4vh;border-radius:50%;display:inline-block;cursor:pointer;border:.2vh solid #999;}
.color-options input[type="radio"]:checked + .color-circle{transform:scale(1.2);border-color:var(--brand);position:relative;}

/* POSICIONAMENTO — 100% CSS */
.posicionamento-wrapper{--pos-row-h:var(--pos-row-h);--pos-speed:var(--pos-speed);}
.posicionamento-options{
  padding: 3px;
  display:flex; flex-wrap:wrap; gap:var(--gap-1-5); justify-content:center; margin:1vh 0;
  overflow:hidden; will-change:max-height; contain:layout paint;
  max-height: var(--pos-item-max);
  transition:max-height var(--pos-speed) cubic-bezier(.25,.8,.25,1);
}
.posicionamento-options input[type="radio"]{display:none;}
.posicionamento-label{cursor:pointer;display:flex;flex-direction:column;align-items:center;width:100%;max-width:var(--pos-item-max);padding:0;margin:0;position:relative;text-align:center;}
.posicionamento-img{width:100%;height:auto;border:2px solid transparent;padding:.5vh;transition:transform var(--transition-fast),border var(--transition-fast);}
.posicionamento-nome{position:absolute;bottom:10%;left:50%;width:100%;transform:translate(-50%,50%);color:var(--ink);font-weight:700;font-size:var(--fs-md);text-align:center;word-break:keep-all;}
.posicionamento-options input[type="radio"]:checked + .posicionamento-label .posicionamento-img{transform: scale(1.05); border:.3vh solid var(--brand);}

/* Toggle via checkbox (sem JS) */
.pos-toggle{display:none;align-items:center;gap:.5rem;cursor:pointer;font-weight:600;user-select:none;margin-top:0 !important;}
.pos-toggle .texto-menos{display:none;}
.pos-toggle .seta{display:inline-block;transition:transform var(--pos-speed) cubic-bezier(.25,.8,.25,1);}

/* Quando o checkbox está checked -> expande */
.pos-toggle-check:checked ~ .posicionamento-options{max-height:5000vh;}
.pos-toggle-check:checked ~ .pos-toggle .texto-mais{display:none;}
.pos-toggle-check:checked ~ .pos-toggle .texto-menos{display:inline;}
.pos-toggle-check:checked ~ .pos-toggle .seta{transform:rotate(180deg);}

/* Layout de opções */
.options-container{display:flex;gap:var(--gap-2);justify-content:space-between;margin-bottom:var(--gap-2);flex-wrap:wrap;}
.options-container>div{flex:1 1 30%;}
.options-row{display:flex;flex-wrap:wrap;}
.options-row>div{flex:1 1 45%;}
.option-group,.form-group{padding:var(--gap-1);}
.option-group div{text-align:center;}

/* Carrossel do produto */
.carrossel-wrapper{display:flex;}
.carrossel-container{position:relative;width:var(--carousel-w);overflow:hidden;margin:auto;}
.carrossel-imagens{display:flex;align-items:center;justify-content:left;transition:transform .3s ease;}
.carrossel-slide{min-width:100%;}
.carrossel-img{object-fit:contain;width:100%;transition:opacity .5s ease-in-out,transform .5s ease;transform-origin:center;}
.carrossel-img:hover{transform:scale(1.1);}
.carrossel-btn{position:absolute;top:50%;transform:translateY(-50%);background:transparent;color:#000;border:none;padding:10px;cursor:pointer;z-index:2;width:var(--carousel-btn-w);}
.carrossel-btn.prev{left:0;} .carrossel-btn.next{right:0;}
.carrossel-btn:hover{background:rgba(0,0,0,.08);}
.indicadores{display:flex;flex-wrap:wrap;justify-content:center;margin-top:10px;gap:8px;}
.indicador{width:12px;height:12px;border-radius:50%;background:#ccc;cursor:pointer;}
.indicador.ativo{background:#333;}

/* Quantidades por tamanho */
.quantidades-tamanhos{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:10px;width:100%;margin-top:10px;}
.tamanho-input{display:flex;flex-direction:column;align-items:center;}
.tamanho-input label{font-size:var(--fs-md);margin-bottom:.2vh;}
.tamanho-input input[type="number"]{width:100%;padding:.5vh;text-align:center;box-sizing:border-box;}

/* Related */
.related{max-width:1200px;}
.related__head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:1rem;}
.related__more{border:1px solid #ddd;border-radius:10px;padding:.55rem .9rem;text-decoration:none;color:#111;}
.related__more:hover{background:#f7f7f7;}
.related__grid{display:grid;gap:1rem;grid-template-columns:repeat(4,minmax(0,1fr));}
.related__card{display:block;border:1px solid var(--line-strong);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .2s ease;}
.related__card:hover{box-shadow:0 8px 30px rgba(0,0,0,.08);}
.related__thumbwrap{aspect-ratio:4/3;background:var(--bg-chip);width:100%;overflow:hidden;object-fit:cover;}
.related__thumb{width:100%;height:100%;object-fit:cover;display:block;}
.related__body{padding:12px;}
.related__title{margin:0 0 .4rem;line-height:1.3;font-weight:600;}
.related__price{margin:0;font-weight:700;}
.related__empty{color:#666;font-size:.95rem;}
.related__empty.error{color:#b00020;}

.variant-links{display:none;}
.posicionamento-options{margin-bottom:0 !important;padding:7px !important;}
.productcontainer{padding:0 18vw;}

/* Breakpoints */
@media (max-width:768px){
  .table{width:var(--table-w-mobile);}
  .t-c{padding:var(--gap-1);font-size:1.7vh;width:35%;}
  .t-c:nth-child(even){width:65%;}
  .product{flex-direction:column;max-width:var(--container-w-mobile);margin-top:0;}
  .product-details h1{font-size:var(--fs-xl);}
  .color-options,.posicionamento-options{width:100%;margin:0;padding:0;}
  .color-circle{width:3.5vh;height:3.5vh;}
  .options-row{flex-direction:column;}
  .options-container{flex-direction:column;}
  .options-container>div{flex:1 1 30%;}
  .posicionamento-options{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap-1-5);justify-items:center;}
  .posicionamento-label{width:100%;}
  .carrossel-container{width:100%;max-width:100%;}
  .productcontainer{padding:0 4vw;}
  .related__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (min-width:769px){
  .posicionamento-wrapper .posicionamento-options{overflow:hidden !important;}
}
/* ===== Posicionamento: permitir que o JS mostre/esconda o botão ===== */
.posicionamento-wrapper{ position:relative; }
.posicionamento-options{ position:relative; }
.posicionamento-label{ position:relative; }
/* NÃO forçar display aqui; o JS define .style.display conforme rows>1 */
.pos-toggle{ width:auto; } /* evita ocupar largura total sem necessidade */


/* === FIX: espaço vertical exagerado no carrossel (override index.css) === */
.product-image,
.carrossel-container,
.carrossel-imagens-wrapper,
.carrossel-imagens {
  height: auto !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Garantir que a wrapper não herda alturas baseadas em vh de outros ficheiros */
.carrossel-imagens-wrapper { max-height: none !important; }

/* As imagens escalam sem forçar a altura do wrapper */
.carrossel-img {
  width: 100%;
  height: auto !important;
  display: block;
  object-fit: contain;
}

/* Evitar letterboxing por alinhamento vertical */
.carrossel-imagens { align-items: stretch !important; }

/* Mobile: não usar vh para o carrossel */
@media (max-width: 640px) {
  .product-image { max-height: none !important; }
  .carrossel-imagens-wrapper { max-height: none !important; }
}
