/* ============================================================================
   iValeneExpress — PÁGINA DE PRODUTO 2.0
   Layout em duas colunas (galeria + painel de compra), cartões brancos sobre
   fundo claro, chips de destaque, blocos de confiança e abas modernas.
   Usa a paleta da marca (laranja/azul-escuro) — nada de tema importado.
   ========================================================================== */

.pd{
    --pd-ink:#0f172a; --pd-ink-2:#475569; --pd-ink-3:#94a3b8;
    --pd-line:#e6ebf2; --pd-line-2:#d8e0ea;
    --pd-bg:#f4f6fa; --pd-card:#fff;
    --pd-orange:var(--ix-cta,#ea580c); --pd-orange-d:var(--ix-cta-hover,#c2410c); --pd-orange-l:var(--ix-cta-soft,#fff1e8);
    --pd-red:var(--ix-price,#c2410c);
    --pd-navy:#132a4a;
    --pd-ok:#16a34a; --pd-ok-bg:#ecfdf5;
    --pd-warn:#b45309; --pd-warn-bg:#fff8e6;
    --pd-r:14px; --pd-r-lg:18px;
    --pd-sh:0 1px 2px rgba(15,23,42,.04), 0 10px 30px -18px rgba(15,23,42,.25);
    color:var(--pd-ink);
    font-family:'Roboto',system-ui,-apple-system,"Segoe UI",sans-serif;
}
.pd{ max-width:1560px; margin-left:auto; margin-right:auto; }
.pd *{ box-sizing:border-box; }
.pd img{ max-width:100%; }
.pd a{ color:inherit; text-decoration:none; }

/* ---------- Migalhas ---------- */
.pd-bread{
    display:flex; flex-wrap:wrap; align-items:center; gap:6px;
    font-size:14.5px; color:var(--pd-ink-3); padding:15px 0 17px; margin:0;
}
.pd-bread a{ color:var(--pd-ink-2); }
.pd-bread a:hover{ color:var(--pd-orange); }
.pd-bread i.sep{ font-size:10px; opacity:.55; font-style:normal; }
.pd-bread .atual{ color:var(--pd-ink); font-weight:600; }

/* ---------- Grelha principal ---------- */
.pd-top{
    display:grid;
    grid-template-columns:minmax(0, 460px) minmax(0, 1fr);
    gap:24px;
    align-items:stretch;   /* as duas colunas terminam na mesma linha */
}
.pd-top > .pd-card{ height:100%; }
.pd-top > *, .pd-meio > *{ min-width:0; }
@media (max-width:991px){ .pd-top{ grid-template-columns:minmax(0,1fr); } }

.pd-card{
    background:var(--pd-card); border:1px solid var(--pd-line);
    border-radius:var(--pd-r-lg); box-shadow:var(--pd-sh);
}
.pd-pad{ padding:20px; }

/* ---------- Galeria ---------- */
.pd-gal{ padding:16px; display:flex; flex-direction:column; }
.pd-gal__stage{
    position:relative; background:#eef1f6; border-radius:var(--pd-r);
    aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
    overflow:hidden;
}
.pd-gal__stage img{ max-width:100%; max-height:100%; object-fit:contain; display:block; }
.pd-gal__badge{
    position:absolute; top:12px; left:12px; z-index:3;
    background:var(--pd-orange); color:#fff; font-size:12px; font-weight:700;
    padding:6px 12px; border-radius:999px; display:inline-flex; align-items:center; gap:6px;
    box-shadow:0 4px 12px rgba(242,101,34,.35);
}
.pd-gal__fav{
    position:absolute; top:12px; right:12px; z-index:3;
    width:40px; height:40px; border-radius:50%; border:1px solid var(--pd-line);
    background:#fff; color:#ec4899; font-size:16px; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
    box-shadow:0 4px 12px rgba(15,23,42,.12); transition:.15s;
}
.pd-gal__fav:hover{ transform:scale(1.06); }
.pd-gal__nav{
    position:absolute; top:50%; transform:translateY(-50%); z-index:3;
    width:38px; height:38px; border-radius:50%; border:1px solid var(--pd-line);
    background:rgba(255,255,255,.95); color:var(--pd-ink); cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
    box-shadow:0 4px 14px rgba(15,23,42,.14); transition:.15s;
}
.pd-gal__nav:hover{ background:#fff; box-shadow:0 6px 18px rgba(15,23,42,.2); }
.pd-gal__nav--prev{ left:12px; } .pd-gal__nav--next{ right:12px; }
.pd-gal__zoom{
    position:absolute; right:12px; bottom:12px; z-index:3;
    background:rgba(15,23,42,.82); color:#fff; border:0; cursor:pointer;
    font-size:12.5px; font-weight:600; padding:8px 14px; border-radius:999px;
    display:inline-flex; align-items:center; gap:7px;
}
.pd-gal__thumbs{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.pd-gal__thumb{
    width:82px; height:82px; border-radius:12px; border:2px solid var(--pd-line);
    background:#eef1f6; padding:6px; cursor:pointer; overflow:hidden;
    display:flex; align-items:center; justify-content:center; transition:.15s;
}
.pd-gal__thumb img{ max-width:100%; max-height:100%; object-fit:contain; }
.pd-gal__thumb:hover{ border-color:var(--pd-line-2); }
.pd-gal__thumb.is-on{ border-color:var(--pd-orange); }

/* ---------- Selos de confiança ---------- */
.pd-trust{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin-top:auto; padding-top:16px; align-items:stretch; }
.pd-trust__it{
    display:flex; align-items:center; gap:10px;
    border:1px solid var(--pd-line); border-radius:12px; padding:12px 14px;
    background:#fff; min-width:0; min-height:68px;
}
.pd-trust__it i{ font-size:17px; flex:0 0 auto; }
.pd-trust__t{ font-size:13.5px; font-weight:700; line-height:1.25; }
.pd-trust__s{ font-size:12.5px; color:var(--pd-ink-3); line-height:1.25; }
@media (max-width:600px){ .pd-trust{ grid-template-columns:1fr; } }

/* ---------- Painel de compra ---------- */
.pd-buy{ padding:22px; display:flex; flex-direction:column; gap:18px; }
.pd-buy__head{ display:flex; align-items:flex-start; gap:16px; }
.pd-buy h1{
    margin:0; font-size:26px; line-height:1.25; font-weight:800; letter-spacing:-.01em; flex:1 1 auto;
}
.pd-share{
    flex:0 0 auto; border:1px solid var(--pd-line); background:#fff; border-radius:10px;
    padding:9px 14px; font-size:13px; font-weight:600; cursor:pointer; color:var(--pd-ink-2);
    display:inline-flex; align-items:center; gap:8px; transition:.15s;
}
.pd-share:hover{ border-color:var(--pd-line-2); color:var(--pd-ink); }
.pd-rate{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:14.5px; color:var(--pd-ink-2); margin-top:-6px; }
.pd-rate .estrelas{ color:#fbbf24; letter-spacing:1px; }
.pd-rate .estrelas .vazia{ color:var(--pd-line-2); }
.pd-rate a{ color:var(--pd-orange); font-weight:600; }
.pd-preco{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-top:-6px; }
.pd-preco__novo{ font-size:32px; font-weight:800; color:var(--pd-red); letter-spacing:-.02em; }
.pd-preco__velho{ font-size:16px; color:var(--pd-ink-3); text-decoration:line-through; }
.pd-preco__desc{ background:var(--pd-ok-bg); color:var(--pd-ok); font-size:12.5px; font-weight:700; padding:4px 10px; border-radius:999px; }

/* chips de características */
.pd-chips{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:10px; }
.pd-chip{
    display:flex; align-items:center; gap:10px; min-width:0;
    border:1px solid var(--pd-line); border-radius:12px; padding:11px 12px; background:#fff;
}
.pd-chip__ico{
    width:34px; height:34px; border-radius:10px; flex:0 0 auto;
    display:inline-flex; align-items:center; justify-content:center; font-size:15px;
}
.pd-chip__t{ font-size:13.5px; font-weight:700; line-height:1.25; }
.pd-chip__s{ font-size:12.5px; color:var(--pd-ink-3); line-height:1.25; }

/* bloco de agendamento / compra */
.pd-box{ border:1px solid var(--pd-line); border-radius:var(--pd-r); overflow:hidden; }
.pd-box__head{
    background:#f7f9fc; border-bottom:1px solid var(--pd-line);
    padding:14px 18px; display:flex; align-items:center; gap:10px;
    font-size:15px; font-weight:700;
}
.pd-box__head i{ color:var(--pd-orange); }
.pd-box__body{ padding:18px; display:flex; flex-direction:column; gap:16px; }
.pd-campo{ display:flex; flex-direction:column; gap:7px; }
.pd-campo > label{ font-size:14px; font-weight:600; color:var(--pd-ink-2); margin:0; }
.pd-campo input[type=date], .pd input.pd-input{
    width:100%; height:48px; border:1px solid var(--pd-line-2); border-radius:10px;
    padding:0 14px; font-size:15px; color:var(--pd-ink); background:#fff;
}
.pd-campo input[type=date]:focus, .pd input.pd-input:focus{
    outline:none; border-color:var(--pd-orange); box-shadow:0 0 0 3px rgba(242,101,34,.14);
}

/* quantidade */
.pd-qtd{ display:inline-flex; align-items:stretch; border:1px solid var(--pd-line-2); border-radius:10px; overflow:hidden; width:max-content; }
.pd-qtd button{
    width:44px; border:0; background:#f7f9fc; color:var(--pd-ink); font-size:18px; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center; transition:.15s;
}
.pd-qtd button:hover{ background:#eef2f7; }
.pd-qtd input{
    width:62px; border:0; border-left:1px solid var(--pd-line); border-right:1px solid var(--pd-line);
    text-align:center; font-size:16px; font-weight:700; height:46px; color:var(--pd-ink); background:#fff;
}
.pd-qtd input:focus{ outline:none; }

/* acções */
.pd-acoes{ display:flex; gap:12px; flex-wrap:wrap; }
.pd-btn{
    border:0; border-radius:12px; font-size:15px; font-weight:700; cursor:pointer;
    padding:0 24px; height:52px; display:inline-flex; align-items:center; justify-content:center; gap:10px;
    transition:.15s; white-space:nowrap;
}
.pd-btn--principal{ background:var(--pd-orange); color:#fff; flex:1 1 260px; box-shadow:0 8px 20px -10px rgba(242,101,34,.8); }
.pd-btn--principal:hover:not([disabled]){ background:var(--pd-orange-d); }
.pd-btn--principal[disabled]{ opacity:.5; cursor:not-allowed; box-shadow:none; }
.pd-btn--fantasma{ background:#fff; border:1px solid var(--pd-line-2); color:var(--pd-ink); flex:0 1 auto; }
.pd-btn--fantasma:hover{ border-color:#ec4899; color:#ec4899; }
.pd-btn--fantasma i{ color:#ec4899; }

/* garantias */
/* Mesma caixa, mesma altura e mesmo alinhamento dos selos da galeria: os dois
   grupos leem-se como o mesmo componente em vez de dois estilos diferentes. */
.pd-garantias{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin-top:auto; padding-top:4px; align-items:stretch; }
.pd-garantia{
    display:flex; align-items:center; gap:10px; min-width:0; min-height:68px;
    border:1px solid var(--pd-line); border-radius:12px; padding:12px 14px; background:#fff;
}
.pd-garantia i{ font-size:18px; color:var(--pd-navy); flex:0 0 auto; }
.pd-garantia b{ display:block; font-size:13.5px; font-weight:700; line-height:1.25; }
.pd-garantia span{ font-size:12.5px; color:var(--pd-ink-3); line-height:1.25; }
@media (max-width:600px){
    .pd-garantias{ grid-template-columns:1fr; }
}

/* ---------- Abas + ajuda ---------- */
.pd-meio{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:28px; align-items:start; margin-top:28px; }
@media (max-width:991px){ .pd-meio{ grid-template-columns:minmax(0,1fr); } }

.pd-abas{ overflow:hidden; }
.pd-abas__nav{ display:flex; gap:0; border-bottom:1px solid var(--pd-line);
    flex-wrap:wrap; overflow:visible; }
/* `overflow-x:auto` obrigava o overflow vertical a `auto` e o cartao ficava
   com uma barra de deslocamento visivel. Os separadores passam a quebrar
   de linha em vez de deslizar. */
.pd-abas__nav button{
    border:0; background:none; cursor:pointer; padding:18px 22px;
    font-size:14.5px; font-weight:700; color:var(--pd-ink-3); white-space:nowrap;
    display:inline-flex; align-items:center; gap:9px; border-top:3px solid transparent;
    position:relative; transition:.15s;
}
.pd-abas__nav button:hover{ color:var(--pd-ink-2); }
.pd-abas__nav button.is-on{
    color:var(--pd-ink); border-top-color:var(--pd-orange);
    background:#fff; box-shadow:inset 0 -1px 0 #fff;
}
.pd-abas__nav button.is-on::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:#fff; }
.pd-abas__nav button i{ font-size:15px; opacity:.85; }
.pd-abas__pane{ padding:26px; display:none; }
.pd-abas__pane.is-on{ display:block; }
.pd-abas__pane h2{ font-size:19px; font-weight:800; margin:0 0 14px; }
.pd-abas__pane p{ color:var(--pd-ink-2); line-height:1.65; margin:0 0 12px; }
.pd-abas__pane table{ width:100%; border-collapse:collapse; }
.pd-abas__pane td{ padding:12px 14px; border-bottom:1px solid var(--pd-line); font-size:15px; }
.pd-abas__pane td:first-child{ color:var(--pd-ink-3); width:220px; font-weight:600; }

.pd-ajuda{ padding:20px; background:#fffaf0; border-color:#fde8c8; }
.pd-ajuda__ico{
    width:34px; height:34px; border-radius:10px; background:#fef3c7; color:#b45309;
    display:inline-flex; align-items:center; justify-content:center; font-size:16px; margin-bottom:10px;
}
.pd-ajuda h3{ font-size:16px; font-weight:800; margin:0 0 6px; }
.pd-ajuda p{ font-size:14.5px; color:var(--pd-ink-2); line-height:1.55; margin:0 0 14px; }
.pd-ajuda .pd-btn{ width:100%; height:46px; font-size:14px; background:#fff; border:1px solid var(--pd-line-2); color:var(--pd-ink); }
.pd-ajuda .pd-btn:hover{ border-color:var(--pd-orange); color:var(--pd-orange); }

/* ---------- Relacionados ---------- */
.pd-rel{ margin-top:28px; }
.pd-rel__head{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.pd-rel__head h2{ font-size:21px; font-weight:800; margin:0; flex:1 1 auto; }
.pd-rel__ver{ font-size:14.5px; font-weight:600; color:var(--pd-orange); }
.pd-rel__setas{ display:flex; gap:8px; }
.pd-rel__setas button{
    width:34px; height:34px; border-radius:9px; border:1px solid var(--pd-line); background:#fff;
    color:var(--pd-ink-2); cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
}
.pd-rel__setas button:hover{ border-color:var(--pd-line-2); color:var(--pd-ink); }
.pd-rel__setas button[disabled]{ opacity:.4; cursor:default; }
/* Grelha: os cartoes ocupam toda a largura disponivel e quebram para a linha
   seguinte. Sem faixa de scroll horizontal e sem barra de deslocamento. */
.pd-rel__pista{
    display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:18px;
    overflow:visible;
}
@media (max-width:1439px){ .pd-rel__pista{ grid-template-columns:repeat(5, minmax(0,1fr)); } }
@media (max-width:1199px){ .pd-rel__pista{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (max-width:991px){  .pd-rel__pista{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; } }
@media (max-width:767px){  .pd-rel__pista{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:420px){  .pd-rel__pista{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; } }
/* as setas deixam de fazer sentido numa grelha */
.pd-rel__setas{ display:none !important; }
/* Todos os cartoes da linha com a mesma altura e o preco sempre na mesma
   linha de base, mesmo quando o nome ocupa uma ou duas linhas. */
.pd-prod{
    min-width:0; height:100%; background:#fff; border:1px solid var(--pd-line);
    border-radius:var(--pd-r); overflow:hidden; transition:.15s;
    display:flex; flex-direction:column;
}
.pd-prod:hover{ box-shadow:var(--pd-sh); transform:translateY(-2px); }
.pd-prod__img{ position:relative; aspect-ratio:4/3; background:#eef1f6; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.pd-prod__img img{ width:100%; height:100%; object-fit:contain; padding:8px; }
/* `cover` cortava as capas em formato banner (cursos/livros) a meio do título;
   `contain` mostra a imagem inteira, como já acontece na galeria principal. */
.pd-prod__desc{ position:absolute; top:8px; right:8px; background:var(--pd-red); color:#fff; font-size:11.5px; font-weight:700; padding:3px 8px; border-radius:999px; }
.pd-prod__body{ padding:12px 14px 16px; flex:1 1 auto; display:flex; flex-direction:column; }
.pd-prod__estrelas{ color:#fbbf24; font-size:11px; letter-spacing:1px; margin-bottom:5px; }
.pd-prod__estrelas .vazia{ color:var(--pd-line-2); }
.pd-prod__nome{ font-size:14px; font-weight:600; color:var(--pd-ink-2); line-height:1.35; margin-bottom:8px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    min-height:calc(2 * 1.35em); }
.pd-prod__preco{ font-size:17px; font-weight:800; margin-top:auto; }
.pd-prod__preco s{ font-size:12px; font-weight:500; color:var(--pd-ink-3); margin-left:6px; }

/* ---------- Horários (serviço) ---------- */
.pd .slots-titulo{ margin:0 0 10px; font-size:13.5px; font-weight:600; color:var(--pd-ink-2); }
.pd .slots-ajuda{ color:var(--pd-ink-3); font-weight:400; }
.pd .slots-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(104px,1fr)); gap:8px; }
.pd .slots-grid .slot-btn{
    height:44px; border-radius:10px; border:1px solid var(--pd-line-2); background:#fff;
    font-size:14px; font-weight:600; color:var(--pd-ink); cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center; gap:6px; transition:.15s;
}
.pd .slots-grid .slot-btn:hover{ border-color:var(--pd-orange); color:var(--pd-orange); }
.pd .slots-grid .slot-btn.active,
.pd .slots-grid .slot-btn.btn-primary{ background:var(--pd-orange); border-color:var(--pd-orange); color:#fff; }
.pd .slots-vazio, .pd .alert{
    display:flex; align-items:flex-start; gap:10px; margin:0;
    background:var(--pd-warn-bg); border:1px solid #fde8c8; color:var(--pd-warn);
    border-radius:12px; padding:13px 15px; font-size:13.5px;
}
.pd .slots-vazio i, .pd .alert i{ margin-top:2px; }
.pd .pd-resumo{
    background:var(--pd-ok-bg); border:1px solid #bbf7d0; color:#166534;
    border-radius:12px; padding:13px 15px; font-size:13.5px;
}

/* opcionais (grades) herdados */
.pd #product h4{ font-size:15px; font-weight:800; margin:0 0 10px; }
.pd #product .form-group{ margin-bottom:14px; }
.pd #product label{ font-size:13px; font-weight:600; color:var(--pd-ink-2); }
.pd #product .form-control{ height:46px; border-radius:10px; border:1px solid var(--pd-line-2); }

/* ---------- Ajustes de ecrã pequeno ---------- */
.pd-buy h1{ min-width:0; overflow-wrap:anywhere; }
@media (max-width:600px){
    .pd-buy{ padding:18px; }
    .pd-buy__head{ flex-wrap:wrap; gap:10px; }
    .pd-buy h1{ font-size:21px; flex:1 1 100%; }
    .pd-share{ width:100%; justify-content:center; }
    .pd-preco__novo{ font-size:27px; }
    .pd-gal{ padding:12px; }
    .pd-gal__thumb{ width:68px; height:68px; }
    .pd-abas__nav button{ padding:15px 16px; font-size:13.5px; }
    .pd-abas__pane{ padding:18px; }
    .pd-abas__pane td:first-child{ width:auto; }
    .pd-rel__head h2{ font-size:18px; }
}

/* ===========================================================================
   Ecrãs largos — a página passa a ocupar o espaço disponível em vez de ficar
   estreita ao centro. Os controlos mantêm uma largura útil (não se esticam
   até ficarem desproporcionados) e os blocos ganham respiração.
   ========================================================================= */
@media (min-width:1400px){
    .pd-top{ grid-template-columns:minmax(0, 520px) minmax(0, 1fr); gap:32px; }
    .pd-gal{ padding:20px; }
    .pd-buy{ padding:28px; gap:20px; }
    .pd-buy h1{ font-size:29px; }
    .pd-preco__novo{ font-size:35px; }
    .pd-abas__pane{ padding:32px; }
    .pd-rel__head h2{ font-size:23px; }
}
/* O painel de compra fica largo em ecrãs grandes: limitar os controlos evita
   campos e botões esticados de ponta a ponta. */
.pd-campo input[type=date], .pd input.pd-input{ max-width:460px; }
.pd-btn--principal{ max-width:360px; }
.pd-box__body{ max-width:none; }
.pd .slots-grid{ max-width:820px; }

/* Caixa de compra/agendamento em ecrãs largos: os campos deixam de ficar
   empilhados numa coluna estreita com metade da caixa vazia. A data e os
   horários passam a partilhar a mesma linha; o resumo, o frete e as acções
   continuam a ocupar a largura toda. */
@media (min-width:1200px){
    .pd-box__body{ flex-direction:row; flex-wrap:wrap; align-items:flex-start; gap:18px 28px; }
    .pd-box__body > *{ flex:1 1 100%; min-width:0; }
    .pd-box__body > .pd-campo{ flex:0 1 330px; }
    .pd-box__body > #slots_container{ flex:1 1 420px; }
    .pd-box__body > .pd-acoes{ flex:1 1 100%; }
    .pd-campo input[type=date], .pd input.pd-input{ max-width:none; }
    .pd .slots-grid{ max-width:none; }
}
/* contentores de apoio que só ganham conteúdo por JS não devem abrir espaço */
.pd-box__body > div:empty{ display:none; }
.pd-box__body > #product:not(:has(*)){ display:none; }

/* A galeria passou a ser uma coluna flexivel (para os selos irem ao fundo):
   a imagem e as miniaturas mantêm o tamanho próprio, não esticam nem encolhem. */
.pd-gal__stage, .pd-gal__thumbs{ flex:0 0 auto; }

/* Corpo de texto ligeiramente maior para leitura mais confortável. */
.pd-abas__pane p, .pd-abas__pane li{ font-size:15.5px; }
.pd-abas__nav button{ font-size:15px; }
.pd .slots-titulo{ font-size:14.5px; }

/* ====================================================================
   BARRA LATERAL DO PRODUTO (Categorias + Produtos recentes)
   Mesma linguagem visual da secção da página da loja: cartão branco,
   título com filete laranja, linhas com área de toque confortável.
   ==================================================================== */
.ix-pside{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.ix-pside__box{
    background:#fff; border:1px solid #e5e9f0; border-radius:12px;
    padding:16px 14px 10px; min-width:0;
}
.ix-pside__tit{
    margin:0 0 10px !important; padding:0 0 0 10px; border-left:4px solid var(--ix-cta,#ea580c);
    font-size:16px !important; font-weight:700; line-height:1.3; color:#0f2a52;
    text-transform:none !important; letter-spacing:0;
}
.ix-pside__tit::before, .ix-pside__tit::after{ content:none !important; }
.ix-pside ul{ list-style:none; margin:0; padding:0; }

/* Categorias */
.ix-pside__cat + .ix-pside__cat{ border-top:1px solid #eef2f7; }
.ix-pside__row{ display:flex; align-items:center; gap:4px; min-height:42px; }
.ix-pside__link{
    flex:1 1 auto; min-width:0; padding:9px 6px; border-radius:8px;
    font-size:14px; color:#334155; text-decoration:none; text-transform:none;
    overflow-wrap:anywhere; line-height:1.35;
}
.ix-pside__link:hover{ color:var(--ix-cta,#ea580c); background:#fff7f2; }
.ix-pside__cat.is-atual > .ix-pside__row .ix-pside__link{ color:var(--ix-cta,#ea580c); font-weight:600; }
.ix-pside__tog{
    flex:0 0 36px; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
    border:0; border-radius:8px; background:transparent; color:#64748b; cursor:pointer; padding:0;
}
.ix-pside__tog:hover{ background:#f1f5f9; color:#0f2a52; }
.ix-pside__tog i{ font-size:18px; transition:transform .18s ease; }
.ix-pside__tog[aria-expanded="true"] i{ transform:rotate(180deg); }
.ix-pside__subs{ padding:0 0 8px 10px !important; margin-left:6px !important; border-left:2px solid #eef2f7; }
.ix-pside__subs[hidden]{ display:none; }
.ix-pside__subs a{
    display:block; padding:7px 8px; border-radius:8px; font-size:13.5px; color:#475569;
    text-decoration:none; line-height:1.35; overflow-wrap:anywhere;
}
.ix-pside__subs a:hover{ color:var(--ix-cta,#ea580c); background:#fff7f2; }
.ix-pside__subs a.is-atual{ color:var(--ix-cta,#ea580c); font-weight:600; background:#fff1e8; }
.ix-pside a:focus-visible, .ix-pside__tog:focus-visible{ outline:2px solid #2563eb; outline-offset:1px; }

/* Produtos recentes */
.ix-pside__recs li + li{ border-top:1px solid #eef2f7; }
.ix-pside__rec{
    display:flex; gap:12px; align-items:center; padding:10px 4px; border-radius:10px;
    text-decoration:none; color:inherit; min-width:0;
}
.ix-pside__rec:hover{ background:#f8fafc; }
.ix-pside__img{
    position:relative; flex:0 0 64px; width:64px; height:64px; border-radius:10px; overflow:hidden;
    background:#f1f5f9; border:1px solid #e5e9f0; display:flex; align-items:center; justify-content:center; color:#cbd5e1;
}
.ix-pside__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ix-pside__img i{ font-size:20px; }
.ix-pside__info{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1 1 auto; }
.ix-pside__nome{
    font-size:13.5px; font-weight:600; color:#0f172a; line-height:1.35;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere;
}
.ix-pside__rec:hover .ix-pside__nome{ color:var(--ix-cta,#ea580c); }
.ix-pside__nota{ color:#f59e0b; font-size:11px; letter-spacing:1px; }
.ix-pside__preco{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; }
.ix-pside__preco b{ font-size:14px; font-weight:700; color:var(--ix-price,#c2410c); }
.ix-pside__preco b span{ white-space:nowrap; }
.ix-pside__preco s{ font-size:12px; color:#94a3b8; white-space:nowrap; }
/* Em ecrãs estreitos a coluna ficaria por cima do produto: mantém-se o
   comportamento anterior (oculta), as categorias continuam no menu
   "Todas as categorias" do cabeçalho. Abaixo de 768px o Bootstrap empilha. */
@media (max-width:767.98px){ .ix-pside{ display:none; } }

/* Com a barra lateral a coluna do produto fica mais estreita do que o ecrã
   (ex.: 1024px → ~740px) e as regras por largura de ecrã deixavam o painel de
   compra com ~170px, partindo o título a meio das palavras. A decisão passa
   a depender da largura real da coluna (container query). */
#content{ container-type:inline-size; container-name:pdcol; }
@container pdcol (max-width: 819.98px){
    .pd-top{ grid-template-columns:minmax(0,1fr); }
    .pd-meio{ grid-template-columns:minmax(0,1fr); }
}

/* Linha produto + barra lateral: campanhas.css / ivalene-uniforme.css forçam
   #content a width:100% sem float, e o conteúdo contornava a coluna flutuante
   (painel de compra espremido ao lado, depois largura total por baixo).
   Com a barra lateral, a linha passa a grelha de duas colunas. */
@media (min-width:768px){
    .row.ix-pd-row--lateral{
        display:grid; grid-template-columns:clamp(210px, 26%, 260px) minmax(0, 1fr);
        column-gap:24px; align-items:start; margin-left:0; margin-right:0;
    }
    .row.ix-pd-row--lateral::before, .row.ix-pd-row--lateral::after{ content:none; display:none; }
    .row.ix-pd-row--lateral > #column-left,
    .row.ix-pd-row--lateral > #content{ float:none; width:auto; padding-left:0; padding-right:0; min-width:0; }
    .row.ix-pd-row--lateral > script{ display:none; }
}
@media (min-width:1400px){
    .row.ix-pd-row--lateral{ grid-template-columns:280px minmax(0, 1fr); column-gap:28px; }
}

/* Espaço entre o bloco de topo (galeria + compra) e a "Ficha do produto",
   igual ao das restantes secções (.pd-meio / .pd-rel: 28px). */
.pd > .pd-top ~ .pd-card{ margin-top:28px; }

/* Barra lateral com a estrutura em 3 níveis: ramo do produto + "Todas as categorias" */
.ix-pside__ramo{ display:block; padding:8px 6px; border-radius:8px; font-size:14.5px; font-weight:700; color:var(--ix-cta,#ea580c); text-decoration:none; overflow-wrap:anywhere; }
.ix-pside__ramo:hover{ background:#fff7f2; text-decoration:none; }
.ix-pside__subs--ramo{ margin:2px 0 6px 6px !important; }
.ix-pside__tipos{ list-style:none; margin:2px 0 6px 10px !important; padding:0 0 0 8px !important; border-left:2px solid #fde2cf; }
.ix-pside__tipos a{ display:block; padding:5px 8px; border-radius:7px; font-size:13px; color:#64748b; text-decoration:none; line-height:1.35; }
.ix-pside__tipos a:hover{ color:var(--ix-cta,#ea580c); background:#fff7f2; }
.ix-pside__tipos a.is-atual{ color:var(--ix-cta,#ea580c); font-weight:600; background:#fff1e8; }
.ix-pside__todas{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:40px; margin-top:6px; padding:8px 8px;
    border:0; border-top:1px solid #eef2f7; background:none; font-size:13.5px; font-weight:700; color:#0f2a52; cursor:pointer; text-align:left; }
.ix-pside__todas:hover{ color:var(--ix-cta,#ea580c); }
.ix-pside__todas i{ font-size:18px; transition:transform .18s ease; }
.ix-pside__todas[aria-expanded="true"] i{ transform:rotate(180deg); }
.ix-pside__cats--todas[hidden]{ display:none; }
.ix-pside__cats--todas{ max-height:420px; overflow-y:auto; overscroll-behavior:contain; }
.ix-pside__link--dir{ color:var(--ix-cta,#ea580c) !important; font-weight:600; }
.ix-pside__todas:focus-visible{ outline:2px solid #2563eb; outline-offset:1px; }