@media (min-width: 1200px) {
  /* Cabeçalho mais largo */
  #header .header-bottom__container,
  #header .header-top .container-md {
    max-width: 1500px;
  }

  /* Linha de cima: logo à esquerda, pesquisa à direita */
  #header .header-bottom__row {
    flex-wrap: wrap !important;
    align-items: center !important;
  }

  /* Logo maior */
  #header .header-bottom__logo img.logo {
    height: 80px !important;
    max-height: 80px !important;
    width: auto !important;
    max-width: none !important;
  }

  /* Pesquisa encostada à direita */
  #header #_desktop_ps_searchbar {
    margin-left: auto !important;
  }
  #header #_desktop_ps_searchbar .ps-searchbar__input {
    width: 320px;
  }

  /* Menu numa linha própria, de um lado ao outro */
  #header .ps-mainmenu--desktop {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    border-top: 1px solid #e5e5e5;
    margin-top: 10px;
  }
  #header #top-menu {
    display: flex !important;
    width: 100%;
    white-space: nowrap;
  }
}

/* Página mais larga */
@media (min-width: 1200px) {
  .container, .container-md, .container-lg, .container-xl, .container-xxl {
    max-width: 94% !important;
  }
}

/* Menu principal: quebra em duas linhas, centrado */
@media (min-width: 1200px) {
  #header #top-menu {
    flex-wrap: wrap !important;
    justify-content: center !important;
    column-gap: 4px;
    row-gap: 0 !important;
  }
  #header #top-menu > li,
  #header #top-menu > li > a {
    font-size: 15px !important;
  }
  #header #top-menu > li > a {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* Submenu por baixo da categoria, com subcategorias à direita */
@media (min-width: 1200px) {
  #header #top-menu > li {
    position: relative !important;
  }
  #header #top-menu .submenu {
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    width: 700px !important;
    min-width: 700px !important;
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
    border-radius: 6px;
  }
  #header #top-menu .submenu .container {
    max-width: none !important;
    width: 100% !important;
    padding: 8px !important;
  }
  #header #top-menu .submenu__row {
    margin: 0 !important;
    display: flex !important;
  }
  #header #top-menu .submenu__left {
    flex: 0 0 40% !important;
    width: 40% !important;
    max-width: 40% !important;
    border: 0 !important;
    padding: 0 !important;
  }
  #header #top-menu .submenu__right {
    display: block !important;
    flex: 1 1 60% !important;
    width: 60% !important;
    max-width: 60% !important;
  }
  #header #top-menu .submenu__left-item,
  #header #top-menu .submenu__left-item * {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  /* As duas últimas categorias abrem para a esquerda, para não sair do ecrã */
  #header #top-menu > li:nth-last-child(-n+2) .submenu {
    left: auto !important;
    right: 0 !important;
  }

  /* Subcategorias: letra 15px, uma por linha */
  #header #top-menu .submenu__right .menu-item__group-main-item,
  #header #top-menu .submenu__right a {
    font-size: 15px !important;
    font-weight: 400 !important;
    display: block !important;
    padding: 6px 0 !important;
  }
  #header #top-menu .submenu__right-items {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    column-count: 1 !important;
    row-gap: 0 !important;
  }
  #header #top-menu .submenu__right-items > ul {
    display: block !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    margin: 0 !important;
  }
}

/* Listagem de produtos: 4 por linha, 5 em ecrãs grandes */
@media (min-width: 1200px) {
  #js-product-list .products {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #js-product-list .products > * {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
@media (min-width: 1600px) {
  #js-product-list .products {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* Coluna lateral mais estreita */
@media (min-width: 1200px) {
  #left-column {
    flex: 0 0 18% !important;
    width: 18% !important;
    max-width: 18% !important;
  }
  #center-column, #content-wrapper {
    flex: 0 0 82% !important;
    width: 82% !important;
    max-width: 82% !important;
  }
}

.subcategory__list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 12px !important;
}
.subcategory__link {
  display: block !important;
  padding: 14px 16px !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 6px !important;
  text-align: center !important;
}

/* Fotos maiores nos botões das famílias */
.subcategory__link--with-image picture,
.subcategory__link--with-image .subcategory__thumbnail {
  display: block !important;
  width: 100% !important;
}
.subcategory__link--with-image .subcategory__thumbnail {
  height: 180px !important;
  object-fit: contain !important;
  margin: 0 auto 10px !important;
}

/* Não mostrar a imagem nem a descrição da categoria no topo da página */
.category__cover,
.category__description {
  display: none !important;
}

/* ===== CORES APHA CONCEPT (topo, menu, botões, slider, rodapé) ===== */
:root{
  --apha-petroleo:#14313f;
  --apha-cobre:#0d6efd;
  --apha-salva:#6e8d70;
  --apha-salva-claro:#e9efe7;
  --apha-areia:#f4efe8;
}

/* Faixa de topo */
.header-top{background:var(--apha-petroleo) !important;border-bottom:0 !important;}
.header-top .ps-contactinfo a,
.header-top .header-block__action-btn,
.header-top .header-block__title,
.header-top .header-block__icon{color:#fff !important;}
.header-top .header-block__badge{background:var(--apha-cobre) !important;color:#fff !important;}
.header-top .row{position:relative;}
.header-top .row::after{
  content:"Portes grátis para todo o país";
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  color:#fff;font-size:14px;font-weight:500;letter-spacing:.03em;pointer-events:none;white-space:nowrap;
}

/* Menu principal */
.ps-mainmenu__tree-link{color:var(--apha-petroleo) !important;font-weight:500;border-bottom:2px solid transparent;}
.ps-mainmenu__tree-item:hover > .ps-mainmenu__tree-item-wrapper .ps-mainmenu__tree-link,
.ps-mainmenu__tree-item.current .ps-mainmenu__tree-link{color:var(--apha-cobre) !important;border-bottom-color:var(--apha-cobre);}

/* Botões principais (Adicionar ao carrinho, Encomendar, etc.) */
.btn-primary{
  --bs-btn-bg:var(--apha-petroleo);--bs-btn-border-color:var(--apha-petroleo);
  --bs-btn-hover-bg:var(--apha-cobre);--bs-btn-hover-border-color:var(--apha-cobre);
  --bs-btn-active-bg:var(--apha-cobre);--bs-btn-active-border-color:var(--apha-cobre);
  --bs-btn-disabled-bg:var(--apha-petroleo);--bs-btn-disabled-border-color:var(--apha-petroleo);
  border-radius:999px !important;
}

/* Slider: esconder a legenda cinzenta "SAMPLE 1" */
.ps-imageslider__figcaption,
#carousel .caption,
.carousel .carousel-caption{display:none !important;}

/* Rodapé */
.footer__main{background:var(--apha-petroleo) !important;color:#d9e2e6 !important;}
.footer__main a,.footer__main p,.footer__main li,.footer__main span{color:#d9e2e6 !important;}
.footer__main a:hover{color:#fff !important;}
.footer__main h2,.footer__main h3,.footer__main h4,.footer__main .h4,.footer__main .h5{color:#fff !important;}
/* ===== FIM CORES ===== */

/* ===== CORES APHA CONCEPT – PASSO 2 (títulos, cartões de produto, garantias) ===== */

/* Títulos de secção com traço cobre */
.section-title{color:var(--apha-petroleo) !important;}
.section-title::after{content:"";display:block;width:40px;height:2px;background:var(--apha-cobre);margin-top:8px;}

/* Cartões de produto */
.product-miniature__inner{border:1px solid #efeae3;border-radius:8px;padding:10px;height:100%;transition:box-shadow .2s;}
.product-miniature__inner:hover{box-shadow:0 6px 18px rgba(20,49,63,.10);}
.product-miniature__title{color:var(--apha-petroleo) !important;}
.product-miniature__title:hover{color:var(--apha-cobre) !important;}
.product-miniature__price{color:var(--apha-petroleo) !important;font-weight:700 !important;}

/* Faixa de garantias (portes, devoluções, pagamento) */
.blockreassurance{background:var(--apha-salva-claro) !important;color:var(--apha-petroleo) !important;}
.blockreassurance .reassurance__title{color:var(--apha-petroleo) !important;font-weight:600;}
.blockreassurance .reassurance__desc{color:#4a5a60 !important;}
.blockreassurance .reassurance__image svg path,
.blockreassurance .reassurance__image svg circle{fill:var(--apha-salva) !important;}
/* ===== FIM PASSO 2 ===== */

/* ===== PASSO 3: botão da newsletter ===== */
/* Botão Subscrever em azul-petróleo */
.footer__before .btn,
.footer__before button[type="submit"],
.footer__before input[type="submit"]{
  background:var(--apha-petroleo) !important;border-color:var(--apha-petroleo) !important;color:#fff !important;
}
/* ===== FIM PASSO 3 ===== */

/* ===== PASSO 4: páginas sem coluna lateral (ex.: página inicial) a ocupar a largura toda ===== */
@media (min-width:1200px){
  body#index #center-column,
  body#index #content-wrapper,
  body:not(:has(#left-column)) #center-column,
  body:not(:has(#left-column)) #content-wrapper{
    flex:0 0 100% !important;width:100% !important;max-width:100% !important;
  }
}
/* ===== FIM PASSO 4 ===== */

/* ===== PASSO 5: foto do produto inteira, com miniaturas ao alto à esquerda ===== */
@media (min-width:992px){
  /* foto e miniaturas lado a lado: miniaturas à esquerda */
  body#product .product__images{
    display:flex !important;flex-direction:row-reverse !important;
    align-items:flex-start !important;gap:16px !important;
  }
  body#product .product__images > .product__carousel,
  body#product .product__images > .carousel{flex:1 1 auto !important;min-width:0 !important;}

  /* foto principal: caixa de no máximo 600 px de altura, foto inteira e centrada */
  body#product .product__images .carousel-item img,
  body#product .product__carousel img{
    width:100% !important;height:600px !important;max-height:70vh !important;
    object-fit:contain !important;background:#fff !important;border-radius:8px !important;
    display:block !important;
  }

  /* fundo branco também por trás da foto */
  body#product .product__carousel,
  body#product .product__carousel .carousel-inner,
  body#product .product__carousel .carousel-item,
  body#product .product__carousel picture{background:#fff !important;}

  /* coluna de miniaturas */
  body#product .product__thumbnails{
    flex:0 0 120px !important;width:120px !important;max-height:600px !important;
    overflow-y:auto !important;margin:0 !important;
  }
  body#product .product__thumbnails-list{
    display:flex !important;flex-direction:column !important;gap:10px !important;
    margin:0 !important;padding:0 !important;
  }
  body#product .product__thumbnails-item{
    width:110px !important;max-width:110px !important;flex:0 0 auto !important;margin:0 !important;
  }
  body#product .product__thumbnails img{
    width:110px !important;height:110px !important;object-fit:contain !important;
    background:#f7f7f7 !important;border-radius:6px !important;
  }
}
/* ===== FIM PASSO 5 ===== */

/* ===== PASSO 6: produtos relacionados e em destaque mais pequenos (5 por linha, 6 em ecrãs grandes) ===== */
@media (min-width:1200px){
  body#product .products,
  body#index .products{
    display:grid !important;grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:24px 16px !important;margin-left:0 !important;margin-right:0 !important;
  }
  body#product .products > *,
  body#index .products > *{
    width:auto !important;max-width:none !important;flex:none !important;
    padding-left:0 !important;padding-right:0 !important;
  }
}
@media (min-width:1600px){
  body#product .products,
  body#index .products{grid-template-columns:repeat(6,minmax(0,1fr)) !important;}
}
/* ===== FIM PASSO 6 ===== */

/* ===== PASSO 7: telemóvel ===== */
@media (max-width:991px){
  /* Slider: mostrar a imagem inteira, sem cortar o texto */
  .ps-imageslider .carousel-item img,
  .ps-imageslider img{
    width:100% !important;height:auto !important;max-height:none !important;
    object-fit:contain !important;object-position:center !important;
  }
  .ps-imageslider .carousel-item,
  .ps-imageslider .carousel-inner,
  .ps-imageslider__figure{height:auto !important;min-height:0 !important;}
  /* Esconder as setas do slider (no telemóvel passa-se com o dedo) */
  .ps-imageslider .carousel-control-prev,
  .ps-imageslider .carousel-control-next{display:none !important;}
  /* Bolinhas do slider mais perto da imagem */
  .ps-imageslider .carousel-indicators{margin-bottom:4px !important;}
}
/* ===== FIM PASSO 7 ===== */

/* ===== PASSO 8 – Telemóvel: faixa portes grátis, pesquisa larga, slide arredondado ===== */
@media (max-width:767px){
  /* faixa "Portes grátis" por cima do logótipo */
  .header-bottom::before{content:"Portes grátis para todo o país";display:block;background:#14313f;color:#fff;text-align:center;font-size:12px;font-weight:500;padding:5px 8px;}
  /* pesquisa sempre visível, a toda a largura, debaixo do logótipo */
  .ps-searchbar--mobile{order:99 !important;flex:0 0 100% !important;width:100% !important;max-width:100% !important;padding:0 0 10px !important;}
  .ps-searchbar--mobile > .header-block{display:none !important;}
  .ps-searchbar--mobile .ps-searchbar__offcanvas{position:static !important;visibility:visible !important;transform:none !important;height:auto !important;width:100% !important;border:0 !important;box-shadow:none !important;background:transparent !important;z-index:auto !important;}
  .ps-searchbar--mobile .offcanvas-header{padding:0 !important;}
  .ps-searchbar--mobile .offcanvas-header > .btn-link{display:none !important;}
  .ps-searchbar--mobile .ps-searchbar__container, .ps-searchbar--mobile .ps-searchbar{width:100% !important;}
  .ps-searchbar--mobile .ps-searchbar__input{width:100% !important;height:44px !important;border:1px solid #cfd6da !important;border-radius:8px !important;font-size:15px !important;}
  /* slide com margem e cantos redondos */
  .ps-imageslider{padding:4px 12px 0 !important;}
  .ps-imageslider .carousel, .ps-imageslider .carousel-inner{border-radius:12px !important;overflow:hidden !important;}
  /* botão "Ver agora" nos slides que têm ligação */
  .ps-imageslider__link .ps-imageslider__figure{position:relative !important;}
  .ps-imageslider__link .ps-imageslider__figure::after{content:"Ver agora ›";position:absolute;left:12px;bottom:14px;background:#0d6efd;color:#fff;font-size:13px;font-weight:600;padding:6px 14px;border-radius:999px;}
}

/* ===== PASSO 9 – Telemóvel: slide inteiro, sem setas, uma só lupa, sem texto de boas-vindas ===== */
body#index .ps-customtext{display:none !important;}
@media (max-width:767px){
  body .ps-imageslider .carousel-item, body .ps-imageslider .carousel-inner, body .ps-imageslider .ps-imageslider__figure, body .ps-imageslider .ps-imageslider__link{height:auto !important;min-height:0 !important;max-height:none !important;aspect-ratio:auto !important;}
  body .ps-imageslider .ps-imageslider__figure img, body .ps-imageslider .carousel-item img{width:100% !important;height:auto !important;min-height:0 !important;max-height:none !important;aspect-ratio:auto !important;object-fit:contain !important;position:static !important;transform:none !important;}
  body .ps-imageslider .carousel-control-prev, body .ps-imageslider .carousel-control-next{display:none !important;}
  body .ps-searchbar--mobile [data-bs-toggle="offcanvas"], body .ps-searchbar--mobile > .header-block{display:none !important;}
}

/* ===== PASSO 10 – Bloco da página inicial: slides do telemóvel + "Comprar por categoria" ===== */
body#index .ps-customtext:has(.apha-home){display:block !important;}
.apha-home{padding:8px 0 4px;}
/* slides do telemóvel: só aparecem no telemóvel, passam com o dedo */
.apha-mob-slides{display:none;}
@media (max-width:767px){
  body#index:has(.apha-mob-slides) .ps-imageslider{display:none !important;}
  .apha-mob-slides{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -12px;padding:0 12px;}
  .apha-mob-slides::-webkit-scrollbar{display:none;}
  .apha-mob-slides a{flex:0 0 100%;scroll-snap-align:center;}
  .apha-mob-slides img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:12px;}
}
/* categorias em círculos */
.apha-cat-title{font-size:22px;color:#14313f;margin:24px 0 12px;}
.apha-cat-title::after{content:"";display:block;width:40px;height:3px;background:#0d6efd;margin-top:6px;}
.apha-cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 10px;}
@media (min-width:768px){.apha-cats{grid-template-columns:repeat(8,minmax(0,1fr));gap:20px;}}
.apha-cats a{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;color:#14313f;text-decoration:none;font-size:13px;line-height:1.25;}
.apha-cats img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:50%;background:#f1f4f6;padding:10%;}
.apha-cats a:hover img{box-shadow:0 0 0 2px #0d6efd;}

/* ===== PASSO 11 – Categorias da página inicial em quadrados com foto (estilo grelha) ===== */
.apha-cats{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:6px !important;}
@media (min-width:768px){.apha-cats{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:10px !important;}}
@media (max-width:767px){.apha-cats{margin:0 -12px !important;}}
.apha-cats a{position:relative !important;display:block !important;aspect-ratio:1 !important;overflow:hidden !important;background:#5d6f78 !important;}
.apha-cats img{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;object-fit:cover !important;border-radius:0 !important;padding:0 !important;background:transparent !important;transition:transform .4s;}
.apha-cats a::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.45),rgba(0,0,0,0) 55%);}
.apha-cats span{position:absolute !important;left:8px;right:8px;bottom:14px;z-index:1;text-align:center;color:#fff !important;font-size:16px;font-weight:600;text-decoration:underline;text-underline-offset:5px;text-shadow:0 1px 3px rgba(0,0,0,.4);}
.apha-cats a:hover img{transform:scale(1.05);box-shadow:none !important;}

/* ===== PASSO 12 – Fotos das categorias (imagem da categoria) ===== */
.apha-cats a{background-size:cover !important;background-position:center !important;}
.apha-cats a[href*="/187-"]{background-image:url(/img/c/187.jpg);}
.apha-cats a[href*="/185-"]{background-image:url(/img/c/185.jpg);}
.apha-cats a[href*="/186-"]{background-image:url(/img/c/186.jpg);}
.apha-cats a[href*="/189-"]{background-image:url(/img/c/189.jpg);}
.apha-cats a[href*="/188-"]{background-image:url(/img/c/188.jpg);}
.apha-cats a[href*="/119-"]{background-image:url(/img/c/119.jpg);}
.apha-cats a[href*="/98-"]{background-image:url(/img/c/98.jpg);}
.apha-cats a[href*="/100-"]{background-image:url(/img/c/100.jpg);}

/* ===== PASSO 13 – Slides do telemóvel (imagens em /img/cms/) ===== */
.apha-mob-slides a{display:block;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background-size:cover;background-position:center;background-color:#f4efe8;}
.apha-mob-slides a span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
.apha-mob-slides a.apha-s1{background-image:url(/img/cms/slide-telemovel-gatos.jpg);}