/** Shopify CDN: Minification failed

Line 1176:0 Unexpected "}"
Line 1239:2 Unexpected "}"
Line 1434:0 Unexpected "}"

**/
.type-banner {
  flex: 1 0 100%;
}

.footer__title {
  font-weight: bold;
  font-size: var(--typeBaseSize);
}
/* ====================== HEADER / SEARCH ======================= */
.header-layout {
  display: flex;
  align-items: center;
  width: 100%;
}
.header-item--logo {
  flex: 0 0 auto;
  margin-right: 10px;
}
.header-item--search {
  flex: 1;
  margin: 0 10px;
}
.header-item--search .predictive-search,
.header-item--search .predictive-search__input-group {
  width: 100%;
  max-width: none;
}
.header-item--search .predictive-search__input {
  width: 100%;
}
.header-item--icons {
  margin-left: auto;
}
/* esconder ícone de conta */
.header-item--icons a[href*="/account"] {
  display: none !important;
}

/* HEADER MOBILE – logo + ícones em cima, search numa linha abaixo */
@media (max-width: 768px) {
  .header-layout {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .header-item--logo {
    order: 1;
  }
  .header-item--icons {
    order: 2;
    margin-left: auto;
  }
  .header-item--search {
    order: 3;
    width: 100%;
    margin: 0;
  }
}

/* ====================== PRODUCT LAYOUT (PAWSNI) ======================= */
.pawsni-product__wrapper {
  display: flex;
  gap: 20px;
}
.pawsni-product__gallery {
  flex: 1;
}
.pawsni-product__image {
  width: 100%;
  border-radius: 10px;
}
.pawsni-product__info {
  flex: 1;
  max-width: 520px;
}
.pawsni-personalization {
  margin: 12px 0;
  padding: 12px;
  border: 1px solid #eee;
  border-radius: 10px;
  background: #fafafa;
}
.pawsni-personalization__fields label {
  display: block;
  margin-bottom: 6px;
}
.pawsni-personalization__fields input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #ddd;
}
.pawsni-product-form__actions .btn {
  width: 100%;
}

/* ====================== CHRISTMAS CUT-OFF CARD ======================= */
.xmas-cutoff {
  background: #fff;
  border: 2px solid #d00;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  margin: 10px 0;
}
.xmas-cutoff__title {
  background: #d00;
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 700;
  margin-bottom: 6px;
  text-transform: uppercase;
  font-size: 11px;
  display: inline-block;
}
.xmas-cutoff p {
  margin: 6px 0 3px; /* dá um respiro entre o título vermelho e o "US Standard" */
}

/* ====================== SHIPPING BOXES (EXPEDITED / STANDARD) ======== */
.ship-boxes {
  display: flex;
  gap: 8px;
  margin: 10px 0;
}
.ship-box {
  background: #e5e5e5;
  padding: 8px 10px;
  font-size: 13px;
  border-radius: 10px;
  cursor: pointer;
}
.ship-box.is-active {
  box-shadow: 0 0 0 2px #ff4a00;
}

/* ====================== SHIPPING TIMELINE ============================ */
.ship-timeline {
  margin: 10px 0 12px;
  font-size: 13px;
}
.ship-timeline__line {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-top: 2px solid #ff4a00;
  padding-top: 10px;
  margin-bottom: 8px;
}
.ship-timeline__step {
  flex: 1;
  text-align: center;
}
.ship-timeline__icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #ff4a00;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 4px;
  font-size: 13px;
}
.ship-timeline__date {
  font-weight: 600;
  margin-bottom: 2px;
}
.ship-timeline__list {
  margin: 0;
  padding-left: 18px;
}

/* ====================== DELIVER TO (PAÍS) ============================ */
.deliver-wrapper {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  gap: 4px;
  white-space: nowrap;
}
.deliver-icon {
  font-size: 16px;
}
.deliver-select {
  border: 0;
  background: transparent;
  color: #d00;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

/* ====================== MOBILE AJUSTES GERAIS ======================== */
@media (max-width: 768px) {
  .pawsni-product__wrapper {
    flex-direction: column;
  }
  .pawsni-product__info {
    max-width: none;
  }
  .xmas-cutoff,
  .ship-box {
    width: 100%;
  }
  .ship-boxes {
    flex-direction: column;
  }
  .ship-timeline__line {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .ship-timeline__step {
    text-align: left;
  }
  .ship-timeline__icon {
    margin: 0 0 4px;
  }
  .deliver-wrapper {
    font-size: 13px;
  }
}
/* Preço estilo Pawsionate + badge natal */
.pawsni-price-wrap{
  margin:4px 0 12px;
}
.pawsni-price-main{
  display:flex;
  align-items:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.pawsni-price-badge{
  background:linear-gradient(90deg,#d00,#0f7a28);
  color:#fff;
  font-weight:700;
  font-size:11px;
  padding:4px 10px;
  border-radius:999px;
  text-transform:uppercase;
  letter-spacing:.03em;
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.pawsni-price{
  display:flex;
  align-items:flex-end;
  gap:6px;
}
.pawsni-price__current{
  font-size:32px;
  font-weight:800;
  color:#0f7a28;
  line-height:1;
  text-shadow:0 0 6px rgba(15,122,40,.35); /* glow suave */
}
.pawsni-price__compare{
  font-size:14px;
  color:#999;
  text-decoration:line-through;
  line-height:1.2;
  margin-bottom:2px;
}

@media(max-width:768px){
  .pawsni-price__current{
    font-size:28px;
  }
}
/* Esconder label "Price" */
.product__info-container .product__price-label,
.product__info-container .price__label,
.product__price-label{
  display:none!important;
}

/* Layout de preço estilo Pawsionate + badge */
.product__info-container .price{
  display:flex;
  align-items:flex-end;
  gap:8px;
  flex-wrap:wrap;
  margin:4px 0 10px;
  position:relative;
}

/* Badge natal 🔥 Best Seller */
.product__info-container .price::before{
  content:"🔥 Best Seller";
  background:linear-gradient(90deg,#d00,#0f7a28);
  color:#fff;
  font-weight:700;
  font-size:11px;
  padding:4px 10px;
  border-radius:999px;
  text-transform:uppercase;
  letter-spacing:.03em;
  margin-right:6px;
}

/* Preço atual grande, verde com glow suave */
.product__info-container .price-item--regular{
  font-size:32px;
  font-weight:800;
  color:#0f7a28;
  line-height:1;
  text-shadow:0 0 6px rgba(15,122,40,.35);
}

/* Preço antigo riscado (compare_at) */
.product__info-container .price-item--compare{
  font-size:14px;
  color:#999;
  text-decoration:line-through;
  line-height:1.2;
  margin-bottom:2px;
}

/* Mobile: preço um pouco menor */
@media(max-width:768px){
  .product__info-container .price-item--regular{
    font-size:28px;
  }
}
/* HEADER MOBILE – grid limpo: logo / icons / search em baixo */
@media (max-width: 768px){
  .site-header__element--top .page-width{
    padding-inline:10px;
  }

  .header-layout{
    display:grid;
    grid-template-columns:auto 1fr auto;
    grid-template-rows:auto auto;
    grid-template-areas:
      "logo . icons"
      "search search search";
    column-gap:8px;
    row-gap:6px;
    align-items:center;
  }

  .header-item--logo{
    grid-area:logo;
    margin-right:0;
  }

  .header-item--icons{
    grid-area:icons;
    justify-self:end;
    margin-left:0;
  }

  .header-item--search{
    grid-area:search;
    width:100%;
    margin:0;
  }

  .header-item--search .predictive-search,
  .header-item--search .predictive-search__input-group{
    width:100%;
    max-width:none;
  }

  .header-item--search .predictive-search__input{
    width:100%;
    display:block;
  }
}
/* --- Produto: layout mais compacto estilo Pawsionate --- */

/* coluna de info um pouco mais estreita e agrupada */
.product__info-container{
  max-width: 460px;
}

/* preço + badge colados no resto */
.pawsni-price-wrap{
  margin: 0 0 6px;
}

/* Deliver to mais próximo do preço */
.deliver-wrapper{
  margin: 4px 0 6px;
}

/* caixas de shipping mais coladas e estreitas */
.ship-boxes{
  margin: 4px 0 6px;
  max-width: 420px;
}
.ship-box{
  padding: 6px 10px;
  font-size: 12px;
}

/* timeline mais leve e curta */
.ship-timeline{
  margin: 4px 0 8px;
  max-width: 420px;
}
.ship-timeline__line{
  padding-top: 6px;
  margin-bottom: 4px;
}
.ship-timeline__step{
  font-size: 12px;
}
.ship-timeline__label{
  font-size: 12px;
  margin-top: 2px;
}

/* card de cut-off mais próximo e com menos “ar” */
.xmas-cutoff{
  max-width: 420px;
  padding: 8px 10px;
  margin: 6px 0 10px;
}

/* texto geral abaixo (free shipping, accordions) também mais junto */
.pawsni-free-shipping__text{
  margin: 4px 0 6px;
}
.pawsni-accordion{
  margin-top: 6px;
}

/* mobile: tudo continua a 100% mas com pouco espaço */
@media(max-width: 768px){
  .product__info-container{
    max-width: 100%;
  }
  .ship-boxes,
  .ship-timeline,
  .xmas-cutoff{
    max-width: 100%;
  }
}
/* --- MOBILE: Timeline em 3 colunas lado a lado --- */
@media(max-width: 768px){
  .ship-timeline__line{
    flex-direction: row !important;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0 !important;
  }

  .ship-timeline__step{
    flex: 1;
    text-align: center !important;
  }

  .ship-timeline__icon{
    margin: 0 auto 4px !important;
  }
}
/* Aproximar Título, Preço e Localização */
.product__title,
.pawsni-product__title {
  margin-bottom: 6px !important; /* título mais perto do preço */
}

.product__info-container .price,
.pawsni-price-wrap {
  margin: 0 0 6px !important; /* preço mais perto do país */
}

.deliver-wrapper {
  margin-top: 0 !important;
  margin-bottom: 8px !important; /* espaço pequeno antes das shipping boxes */
}

/* Remove espaçamentos EXTRA que alguns temas aplicam */
.product__info-container > * {
  margin-top: 6px !important;
}
/* 🔥 Compactar ao máximo: Título → Preço → Localização */
.product__title,
.pawsni-product__title {
  margin-bottom: 2px !important; /* título quase colado ao preço */
}

.product__info-container .price,
.pawsni-price-wrap {
  margin: 0 0 2px !important; /* preço quase colado ao país */
}

.deliver-wrapper {
  margin-top: 0 !important;
  margin-bottom: 4px !important; /* espaço mínimo antes das shipping boxes */
}

/* Remove qualquer espaço automático que o tema tentar aplicar */
.product__info-container > * {
  margin-top: 4px !important;
}
/* 🔥 Ultra compacto: Título → Preço → Localização */
.product__title,
.pawsni-product__title {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.product__info-container .price,
.pawsni-price-wrap {
  margin: 0 !important;
  padding: 0 !important;
}

.deliver-wrapper {
  margin: 0 !important;
  padding: 0 !important;
}

/* Reduz qualquer margem automática abaixo destes elementos */
.product__info-container > * {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

/* Shipping boxes mais próximas do "Deliver to" */
.ship-boxes {
  margin-top: 4px !important;
}
/* ===== HEADER MOBILE ESTILO PAWSIONATE ===== */
@media (max-width: 768px) {

  /* deixa o topo do header mais compacto */
  .site-header__element--top .page-width {
    padding-inline: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  /* header em linha, com logo ao centro */
  .header-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 8px;
  }

  /* logo centrado */
  .header-item--logo {
    flex: 0 0 auto;
    margin: 0 auto;
    text-align: center;
  }
  .header-item--logo img,
  .header-item--logo svg {
    margin: 0 auto;
    display: block;
  }

  /* bloco dos ícones (carrinho + menu) encostado à direita */
  .header-item--icons {
    flex: 0 0 auto;
    margin-left: 0;
  }
  .header-item--icons .site-nav__icons {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* esconde o ícone de search no topo (vamos usar só a barra grande) */
  .header-item--icons .js-search-header {
    display: none !important;
  }

  /* barra de pesquisa numa linha abaixo, com largura total */
  .header-item--search {
    width: 100%;
    margin: 8px 0 0;
  }
  .header-item--search .predictive-search,
  .header-item--search .predictive-search__input-group {
    width: 100%;
    max-width: none;
  }
  .header-item--search .predictive-search__input {
    width: 100%;
    display: block;
    border-radius: 999px;           /* pill style */
    padding-block: 10px;
  }
}
/* ===== BOTÃO ADD TO CART EM VERMELHO + VERDE ESTILO NATAL ===== */
.product-form__buttons .product-form__submit,
button[type="submit"].product-form__submit,
.product__info-container .product-form__submit {
  background: linear-gradient(90deg, #d40000, #0f7a28);
  color: #fff !important;
  font-weight: 700;
  font-size: 18px;
  padding: 14px 20px;
  border-radius: 10px;
  border: none;
  width: 100%;
  transition: 0.2s ease-in-out;
  text-transform: none;
}

/* Hover com glow */
.product-form__buttons .product-form__submit:hover,
button[type="submit"].product-form__submit:hover,
.product__info-container .product-form__submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(212, 0, 0, 0.4),
              0 4px 12px rgba(15, 122, 40, 0.4);
}

/* Estado de loading do Shopify */
.product-form__submit[aria-busy="true"] {
  opacity: 0.7;
}
/* ===== Botão Add to Cart em vermelho + verde (Natal) – versão garantida ===== */
.product__info-container .btn,
.product__info-container .button,
.product__info-container .product-form__submit,
.product__info-container .product__add-to-cart,
.product__info-container .product-form__cart-submit,
.product__info-container .shopify-payment-button__button--unbranded,
.product__info-container button {
  background: linear-gradient(90deg, #d40000, #0f7a28) !important; /* vermelho -> verde */
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  padding: 14px 20px !important;
  border-radius: 10px !important;
  border: none !important;
  width: 100% !important;
  text-transform: none !important;
  transition: 0.2s ease-in-out !important;
}

/* Hover com glow natal */
.product__info-container .btn:hover,
.product__info-container .button:hover,
.product__info-container .product-form__submit:hover,
.product__info-container .product__add-to-cart:hover,
.product__info-container .product-form__cart-submit:hover,
.product__info-container .shopify-payment-button__button--unbranded:hover,
.product__info-container button:hover {
  transform: translateY(-2px);
  box-shadow:
    0 4px 10px rgba(212, 0, 0, 0.45),
    0 4px 10px rgba(15, 122, 40, 0.35);
}

/* Estado desativado/carregando */
.product__info-container .btn[disabled],
.product__info-container .button[disabled],
.product__info-container .product-form__submit[disabled],
.product__info-container .product__add-to-cart[disabled],
.product__info-container .product-form__cart-submit[disabled],
.product__info-container button[disabled] {
  opacity: 0.7 !important;
  transform: none !important;
  box-shadow: none !important;
}
/* Botão Add to Cart específico: .btn.btn--full.add-to-cart */
.btn.btn--full.add-to-cart {
  background: linear-gradient(90deg, #d40000, #0f7a28) !important; /* vermelho -> verde */
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  padding: 14px 20px !important;
  border-radius: 10px !important;
  border: none !important;
  width: 100% !important;
  text-transform: none !important;
  transition: 0.2s ease-in-out !important;
}

/* Hover com glow natal */
.btn.btn--full.add-to-cart:hover {
  transform: translateY(-2px);
  box-shadow:
    0 4px 10px rgba(212, 0, 0, 0.45),
    0 4px 10px rgba(15, 122, 40, 0.35);
}

/* Estado desativado/carregando */
.btn.btn--full.add-to-cart[disabled],
.btn.btn--full.add-to-cart[aria-busy="true"] {
  opacity: 0.7 !important;
  transform: none !important;
  box-shadow: none !important;
}
.bucks-currency-switcher {
  margin-right: 12px !important;
}
/* --- MOVER O MENU HAMBURGUER PARA A ESQUERDA DA LOGO (MOBILE) --- */
@media (max-width: 768px) {

  /* Torna a linha do header rearranjável */
  .header-layout {
    display: flex !important;
    align-items: center;
  }

  /* Hamburguer primeiro */
  .header__icon--menu {
    order: -1 !important;
    margin-right: 12px !important;
  }

  /* Logo fica em segundo */
  .header__heading {
    order: 0 !important;
  }

  /* Carrinho continua à direita */
  .header__icon--cart {
    order: 1 !important;
    margin-left: auto !important;
  }
}
/* Mover o ícone hamburguer para a esquerda da logo no mobile */
@media (max-width: 768px) {

  /* garantir que os elementos podem ser reordenados */
  .header-layout {
    display: flex !important;
    align-items: center;
  }

  /* botão hamburguer (mobile) — colocamos antes da logo */
  .mobile-nav-trigger {
    order: -1 !important;
    margin-right: 12px !important;
  }

  /* logo */
  .header-item--logo {
    order: 0 !important;
  }

  /* carrinho permanece à direita */
  .header-item--icons {
    order: 1 !important;
    margin-left: auto !important;
  }
}
/* --- MOBILE: colocar o hambúrguer à esquerda da logo --- */
@media (max-width: 768px) {

  /* header vira referência para posicionamento absoluto */
  #SiteHeader {
    position: relative;
    padding-left: 56px; /* espaço para o ícone à esquerda */
  }

  /* botão do menu hambúrguer */
  .mobile-nav-trigger {
    position: absolute;
    left: 16px;              /* distância da borda esquerda */
    top: 50%;
    transform: translateY(-50%);
    margin: 0 !important;    /* remove qualquer margem anterior */
  }

  /* logo centrada visualmente */
  .header-item--logo {
    justify-content: center;
  }

  /* ícones (currency + carrinho) continuam à direita */
  .header-item--icons {
    margin-left: auto;
  }
}
/* MOBILE: hambúrguer à esquerda da logo, sem sobrepor */
@media (max-width: 768px) {

  /* usamos o header como referência para posicionar o menu */
  #SiteHeader {
    position: relative;
  }

  /* botão do menu hambúrguer */
  .mobile-nav-trigger {
    position: absolute;
    left: 16px;                 /* distância da borda esquerda */
    top: 50%;
    transform: translateY(-50%);
    margin: 0 !important;
  }

  /* empurra a logo um bocadinho para a direita
     para abrir espaço para o hambúrguer */
  .header-item--logo {
    margin-left: 65px;          /* ajusta se quiseres mais/menos espaço */
  }

  /* ícones (currency + carrinho) continuam à direita */
  .header-item--icons {
    margin-left: auto;
  }
}
/* Esconder o hambúrguer antigo que fica junto ao carrinho */
.site-nav__icons .mobile-nav-trigger {
  display: none !important;
}

/* Layout mobile: menu à esquerda, logo, moeda + carrinho à direita */
@media (max-width: 768px) {
  .header-layout {
    display: flex;
    align-items: center;
  }

  .header-item--mobile-menu {
    margin-right: 8px;
  }

  .header-item--logo {
    margin-left: 0;
  }

  .header-item--icons {
    margin-left: auto;
  }
}
/* Ajustar espaçamento do header no mobile:
   encostar mais o menu à esquerda */
@media (max-width: 768px) {

  /* reduz o padding lateral padrão do container */
  .site-header__element--top .page-width {
    padding-left: 8px !important;   /* menos espaço à esquerda */
    padding-right: 12px !important; /* mantém um respiro à direita */
  }

  /* aproximar um pouco mais a logo do menu */
  .header-item--mobile-menu {
    margin-right: 40px;              /* estava 8px, agora mais compacto */
  }
}
/* Aumentar distância entre o hambúrguer e a logo no mobile */
@media (max-width: 768px) {

  /* bloco do menu mobile */
  .header-item--mobile-menu {
    margin-right: 40px !important; /* aumenta aqui a distância */
  }

  /* garante que o container não limite o movimento */
  .site-header__element--top .page-width {
    padding-left: 8px !important;
  }
}
/* Esconder o hambúrguer antigo que ficava ao lado do carrinho */
.site-nav__icons .mobile-nav-trigger {
  display: none !important;
}

/* Layout mobile: grupo esquerdo (menu + logo) e ícones à direita */
@media (max-width: 768px) {

  .header-layout {
    display: flex;
    align-items: center;
  }

  /* grupo "menu + logo" */
  .header-mobile-left {
    display: flex;
    align-items: center;
    gap: 200px;          /* distância entre o hambúrguer e a logo */
  }

  /* ícones (moeda + carrinho) à direita */
  .header-item--icons {
    margin-left: auto;
  }
}
/* MOBILE: organizar header em linha e afastar o hambúrguer da logo */
@media (max-width: 768px) {

  /* header em linha, sem quebrar */
  .header-layout {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
  }

  /* logo ocupa só o espaço dela */
  .header-item--logo {
    flex: 0 0 auto;
  }

  /* ícones (moeda + carrinho) vão para a direita */
  .header-item--icons {
    margin-left: auto;
    flex: 0 0 auto;
  }

  /* AQUI controlamos a distância entre menu e logo */
  .site-header__element--top .mobile-nav-trigger {
    margin-right: 40px !important;  /* aumenta/diminui este valor */
  }
}
/* RESET do hambúrguer no mobile (tira qualquer hack antigo) */
@media (max-width: 768px) {
  .mobile-nav-trigger {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
  }

  .header-layout {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
  }

  .header-item--logo {
    flex: 0 0 auto;
  }

  .header-item--icons {
    margin-left: auto;
    flex: 0 0 auto;
  }
}
/* Afastar o hambúrguer da logo no mobile */
@media (max-width: 768px) {
  .site-header__element--top .mobile-nav-trigger {
    margin-right: 28px !important;  /* ajusta este valor à vontade */
  }
}
/* MOBILE – ajustar header para caber tudo na linha */
@media (max-width: 768px) {

  /* header em linha */
  .header-layout {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
  }

  /* distância entre menu e logo (não muito grande para sobrar espaço à direita) */
  .site-header__element--top .mobile-nav-trigger {
    margin-right: 8px !important; /* se ainda couber tudo, depois podes subir para 20–24 */
  }

  /* encolher um pouco a logo no mobile para ganhar espaço */
  .header-item--logo img {
    max-width: 95px !important;  /* ajusta para 110 / 130 se quiseres */
    height: auto;
  }

  /* ícones (currency + carrinho) mais juntos e alinhados à direita */
  .site-nav__icons {
    display: flex;
    align-items: center;
    gap: 8px;           /* espaço entre moeda e carrinho */
  }

  .header-item--icons {
    margin-left: auto;
    flex: 0 0 auto;
  }
}
/* MOBILE — reorganizar ordem do header */
@media (max-width: 768px) {

  .header-layout {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  /* Hambúrguer vem PRIMEIRO (mais à esquerda) */
  .site-header__compress-menu,
  .site-nav__compress-menu,
  .mobile-nav-trigger {
    order: 1 !important;
    margin-right: 80px !important; /* espaço entre hambúrguer e logo */
  }

  /* LOGO vem logo depois do hambúrguer */
  .header-item--logo {
    order: 2 !important;
    margin-right: 0 !important;
  }

  /* Ícones (currency + carrinho) SEMPRE à direita */
  .header-item--icons {
    order: 3 !important;
    margin-left: auto !important;
    display: flex;
    align-items: center;
    gap: 10px; /* espaço entre currency e carrinho */
  }

  /* Garantir que o menu não aparece flutuado */
  .mobile-nav-trigger {
    position: relative !important;
    left: 0 !important;
    transform: none !important;
  }
}
/* MOBILE HEADER FIX — hambúrguer totalmente à esquerda,
   logo centralizada e carrinho/currency à direita */
@media (max-width: 768px) {

  .header-layout {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 10px !important;
  }

  /* HAMBÚRGUER — totalmente à esquerda */
  .site-nav__compress-menu,
  .site-header__compress-menu,
  .mobile-nav-trigger {
    justify-self: start !important;
    margin-left: 0 !important;
    order: unset !important;
  }

  /* LOGO — SEMPRE centralizada */
  .header-item--logo {
    justify-self: center !important;
    order: unset !important;
    margin: 0 auto !important;
    max-width: 140px !important; /* evita empurrar o carrinho para fora */
  }

  .header-item--logo img {
    width: 100% !important;
    height: auto !important;
  }

  /* CURRENCY + CART — totalmente à direita */
  .header-item--icons {
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-right: 0 !important;
  }

  /* Não deixa nada saltar para outra linha */
  .header-item {
    white-space: nowrap !important;
  }
}
/* MOBILE – hambúrguer à esquerda, logo mais ao centro, currency + cart à direita */
@media (max-width: 768px) {

  /* garantir header em linha normal */
  .header-layout {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
  }

  /* o container do topo passa a ser referência para o posicionamento absoluto */
  .site-header__element--top .page-width {
    position: relative !important;
    padding-left: 0px !important;  /* estava 44px → agora mais à esquerda */
    padding-right: 12px !important;
}

  /* HAMBÚRGUER: fixo no canto esquerdo */
  .site-header__element--top .mobile-nav-trigger {
    position: absolute !important;
    left: -50px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
  }

  /* LOGO: um pouco mais para dentro, para ficar “entre” menu e currency */
  .header-item--logo {
    margin-left: -50px !important;  /* o recuo já vem do padding-left do container */
    flex: 0 0 auto;
  }

  /* ÍCONES (currency + carrinho) mantidos à direita, lado a lado */
  .header-item--icons {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;   /* espaço entre moeda e carrinho */
    flex: 0 0 auto;
  }
}
/* Mobile drawer (menu aberto) vindo da ESQUERDA em vez da direita */
@media (max-width: 768px) {
  /* fixa o painel de navegação ao lado esquerdo */
  #MobileNav.site-header__mobile-nav,
  .site-header__mobile-nav {
    right: auto !important;
    left: 0 !important;
  }
}
/* ===========================
   DESKTOP – Search tipo Pawsionate
   =========================== */
@media (min-width: 769px) {

  /* A coluna da pesquisa ocupa todo o espaço possível */
  .header-item.header-item--search {
    flex: 1 1 auto !important;
    margin: 0 16px !important;
  }

  /* Barra de pesquisa em estilo “pílula”, com ícone dentro */
  .header-item--search .pawni-search-form {
    display: flex !important;
    align-items: center !important;
    width: 200% !important;
    max-width: none !important;   /* sem limite de largura */
    margin: 0 !important;         /* encostada ao lado esquerdo */

    background: #fff;
    border-radius: 999px;
    border: 1px solid #eee;
    padding: 0 14px;
    box-sizing: border-box;
}
  }

  /* Input ocupa todo o espaço da barra */
  .header-item--search .pawni-search-input {
    flex: 1 1 auto !important;
    border: none !important;
    background: transparent !important;
    padding: 10px 0 !important;
    font-size: 14px;
    outline: none !important;
  }

  /* Botão da lupa colado à direita, dentro da barra */
  .header-item--search .pawni-search-button {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin-left: 8px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .header-item--search .pawni-search-button .icon {
    width: 18px;
    height: 18px;
  }
}
/* ===== Bloquear scroll horizontal no mobile ===== */
@media (max-width: 768px) {
  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .page-width,
  .page-container,
  .template-index,
  .template-product,
  .shopify-section {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}
/* ===== MENU MOBILE A ECRÃ CHEIO ===== */
@media (max-width: 768px) {

  /* O drawer do mobile nav ocupa todo o ecrã */
  .site-header__mobile-nav {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: #fff !important;
  }

  .site-header__mobile-nav .site-header__drawer-animate {
    width: 100% !important;
    max-width: 100% !important;
    background: #fff !important;
  }

  /* Garantir que o menu fica por cima de tudo */
  .site-header__mobile-nav,
  .site-header__drawer-animate {
    z-index: 9999 !important;
  }
}
/* HEADER SEMPRE POR CIMA DO CONTEÚDO (MOBILE) */
@media (max-width: 768px) {
  #HeaderWrapper,
  .site-header,
  .site-header__element--top {
    position: relative;
    z-index: 50;     /* maior que o resto da página */
    background: #fff;
  }
}
/* DRAWER DO MENU MÓVEL ALINHADO À ESQUERDA E SEM SOBRAR PARA LADO NENHUM */
@media (max-width: 768px) {
 /* Mobile drawer com fundo branco, mantendo o comportamento original do tema */
@media (max-width: 768px) {
  .site-header__mobile-nav,
  .site-header__mobile-nav .site-header__drawer-animate {
    background: #fff;
  }
  }
}

  }
}

  }
}
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
/* Fundo da SECÇÃO FAQ */
.faq, 
.shopify-section[id*="faq"] {
  background: #ffe5e5 !important; /* vermelho neutro e suave */
  border-radius: 20px;
  padding: 40px 20px;
  margin: 20px auto;
}

/* Título das FAQs */
.faq h2, 
.shopify-section[id*="faq"] h2 {
  color: #b00000 !important;
  font-weight: 700 !important;
  text-align: center;
}

/* Cada pergunta (collapsible trigger) */
.collapsible-trigger {
  background: #ffffff !important;
  border-radius: 12px;
  padding: 18px 20px !important;
  margin-bottom: 12px !important;
  border: 1px solid #ffb3b3;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Texto da pergunta */
.collapsible-trigger__text {
  color: #b00000 !important;
  font-size: 18px;
  font-weight: 600;
}

/* Ícone seta */
.collapsible-trigger .icon {
  stroke: #b00000 !important;
  width: 22px;
  height: 22px;
}

/* Efeito hover nas perguntas */
.collapsible-trigger:hover {
  background: #ffecec !important;
  border-color: #ff8080;
}

/* Respostas (conteúdo) */
.collapsible-content__inner {
  background: #fff5f5 !important;
  padding: 15px 20px !important;
  border-radius: 0 0 12px 12px;
  color: #660000 !important;
  font-size: 16px;
  line-height: 1.6;
  border: 1px solid #ffb3b3;
  border-top: none;
  margin-top: -10px;
  margin-bottom: 15px;
}
/* Ajustar container da FAQ */
.faq-section,
.shopify-section-faq,
.section-faq {
  background: #fde7e7 !important; /* fundo vermelho suave */
  padding: 40px 20px !important;
  border-radius: 20px !important;
}

/* Estilo das perguntas */
.accordion,
.accordion__item,
.collapsible-trigger {
  border-radius: 16px !important;
  border: 1.5px solid #f3b6b6 !important;
  padding: 18px 20px !important;
  position: relative;
}

/* Corrigir posição das setas */
.accordion__icon,
.collapsible-trigger__icon {
  position: absolute !important;
  right: 20px !important; /* distância da borda */
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
}

/* Quando está aberto */
.accordion__icon svg,
.collapsible-trigger__icon svg {
  width: 20px !important;
  height: 20px !important;
}
/* Layout */
.benefits-row {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  padding: 20px 0;
}

/* Card Style */
.benefit-card {
  flex: 1;
  background: #ffffff;
  padding: 25px 20px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Emoji */
.benefit-emoji {
  font-size: 50px;
  margin-bottom: 12px;
}

/* Title */
.benefit-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
}

/* Description */
.benefit-text {
  font-size: 15px;
  color: #444;
  line-height: 1.45;
  max-width: 260px;
  margin: 0 auto;
}

/* Hover effect */
.benefit-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

/* Mobile */
@media (max-width: 768px) {
  .benefits-row {
    flex-direction: column;
    gap: 20px;
  }
}

/* ============================================================
   COLEÇÕES DESTACADAS (CATS & DOGS) – ESTILO PAWSIONATE
   ============================================================ */

/* Grelha genérica: 3 círculos por linha em qualquer ecrã */
.pawni-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  justify-items:center;
  margin:30px 0;
}

/* Card básico */
.pawni-col-card{
  text-align:center;
  text-decoration:none;
  color:#111;
}

/* Imagens em “bolacha” sem cortar o texto
   – usamos contain para não cortar “DOG MOM / CAT DAD” */
.pawni-col-card img{
  display:block;
  width:170px;
  height:170px;
  border-radius:50%;
  object-fit:contain;
  object-position:center;
  background:transparent !important;  /* sem fundo branco */
  margin:0 auto 8px;
  box-shadow:0 10px 25px rgba(0,0,0,.16);
}

}

/* Título por baixo */
.pawni-col-card span{
  font-size:15px;
  font-weight:700;
}

/* Cores diferentes por grupo */
/* 🐱 Gatos → glow vermelho */
.pawni-cats img{
  box-shadow:0 10px 25px rgba(255,0,70,.35);
}

/* 🐶 Cães → glow verde */
.pawni-dogs img{
  box-shadow:0 10px 25px rgba(0,150,70,.35);
}

/* MOBILE: mantém 3 por linha, só tudo mais compacto */
@media(max-width:768px){
  .pawni-grid{
    gap:10px;
  }

  .pawni-col-card img{
    width:120px;
    height:120px;
    margin-bottom:4px;
  }

  .pawni-col-card span{
    font-size:11px;
  }
}
/* Forçar as bolachas das coleções a ficarem sem fundo branco */
.pawni-col-card img {
  background-color: transparent !important;
}
/* === QUADRADOS EM VEZ DE CÍRCULOS NAS COLEÇÕES (CAT / DOG) === */
.pawni-col-card img {
  width: 130px !important;
  height: 130px !important;
  object-fit: cover !important;

  /* Deixa de ser círculo e vira quadrado */
  border-radius: 20px !important; /* ajusta para 10 / 20 / 30 conforme quiseres */

  background-color: transparent !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.12) !important;
}

/* Mobile mantém a coerência */
@media(max-width:768px){
  .pawni-col-card img{
    width: 90px !important;
    height: 90px !important;
    border-radius: 16px !important;
  }
}
/* ==== QUADRADOS GRANDES ESTILO PAWSIONATE ==== */
.pawni-col-card {
  width: 360px !important;       /* tamanho do quadrado no desktop */
  height: 360px !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 25px rgba(0,0,0,.10);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 20px !important;
}

/* imagem interna — redonda, grande e sem cortar */
.pawni-col-card img {
  width: 260px !important;
  height: 260px !important;
  border-radius: 50% !important;
  object-fit: contain !important;
  background-color: transparent !important;
  margin-bottom: 10px !important;

  /* glow em volta */
  box-shadow: 0 0 35px rgba(255, 50, 120, 0.30) !important;
}

/* título grande */
.pawni-col-card span {
  font-size: 32px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 6px !important;
}

/* CORES — gatos vermelho, cães verde */
.pawni-cats span {
  color: #ff3366 !important;
}

.pawni-dogs span {
  color: #0fae41 !important;
}

/* ==== MOBILE (3 POR LINHA) ==== */
@media(max-width: 768px){

  .pawni-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }

  .pawni-col-card {
    width: 120px !important;
    height: 140px !important;
    padding: 8px !important;
    border-radius: 14px !important;
  }

  .pawni-col-card img {
    width: 85px !important;
    height: 85px !important;
    border-radius: 50% !important;
  }

  .pawni-col-card span {
    font-size: 11px !important;
    margin-top: 2px !important;
  }
}
/* CARD BASE */
.pawni-col-card {
  position: relative;
  text-align: center;
  display: inline-block;
  text-decoration: none;
  color: inherit;
}

/* IMAGEM — quadrada, sem fundo */
.pawni-col-card img {
  width: 200px;              /* Ajusta o tamanho da imagem */
  height: 200px;
  object-fit: contain;       /* mantém proporção sem cortar */
  display: block;
  margin: 0 auto;

  border-radius: 0 !important; /* remover círculo totalmente */
  background: transparent !important;
  box-shadow: none !important; /* sem sombra */
  transition: 0.25s ease;
}

/* ===== HOVER — APARECE O QUADRADO COM SOMBRA ===== */
.pawni-col-card:hover img {
  background: #ffffff;
  padding: 14px;                     /* cria o “quadrado” ao redor da imagem */
  border-radius: 20px;               /* cantos arredondados estilo Pawsionate */
  box-shadow: 0 12px 28px rgba(0,0,0,0.18); /* sombra bonita */
}

/* TITULO */
.pawni-col-card span {
  margin-top: 6px;
  display: block;
  font-size: 20px;
  font-weight: 700;
}

/* Cores: gatos vermelho / cães verde */
.pawni-cats span {
  color: #ff3366;
}

.pawni-dogs span {
  color: #0fae41;
}

/* ===== MOBILE — mesmo estilo, só reduz o tamanho ===== */
@media(max-width: 768px) {
  .pawni-col-card img {
    width: 120px;
    height: 120px;
  }
  .pawni-col-card:hover img {
    padding: 8px;
    border-radius: 14px;
  }
  .pawni-col-card span {
    font-size: 12px;
  }
}
/* CARD BASE */
.pawni-col-card {
  position: relative;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  color: inherit;
}

/* IMAGEM — normal sem fundo */
.pawni-col-card img {
  width: 220px;           /* aumenta ou reduz conforme quiseres */
  height: 220px;
  object-fit: contain;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;

  transition: 0.25s ease-in-out;
}

/* ===== HOVER: só aqui aparece o quadrado ===== */
.pawni-col-card:hover img {
  background: #ffffff !important;        /* quadrado */
  padding: 18px !important;              /* cria o “quadrado” */
  border-radius: 24px !important;        /* cantos arredondados */
  box-shadow: 0 12px 28px rgba(0,0,0,0.18) !important; /* sombra */
}

/* Título */
.pawni-col-card span {
  display: block;
  margin-top: 10px;
  font-size: 20px;
  font-weight: 700;
}

/* Cores */
.pawni-cats span {
  color: #ff3366;
}

.pawni-dogs span {
  color: #0fae41;
}

/* MOBILE (3 por linha) */
@media(max-width: 768px){
  .pawni-col-card img {
    width: 130px;
    height: 130px;
  }
  .pawni-col-card:hover img {
    padding: 12px !important;
    border-radius: 18px !important;
  }
  .pawni-col-card span {
    font-size: 13px;
  }
}
/* --- CARD BASE --- */
.pawni-col-card {
  position: relative;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  color: inherit;
}

/* --- IMAGEM NORMAL (sem fundo, sem quadrado, sem sombra) --- */
.pawni-col-card img {
  width: 220px;
  height: 220px;
  object-fit: contain;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;

  transition: 0.25s ease-in-out;
}

/* --- HOVER: aparece um quadrado PEQUENO atrás da imagem --- */
.pawni-col-card:hover img {
  background: #ffffff !important;          /* quadrado branco */
  padding: 14px !important;                /* tamanho do quadrado */
  border-radius: 20px !important;          /* cantos arredondados */
  box-shadow: 0 12px 26px rgba(0,0,0,0.18) !important;
}

/* --- TÍTULOS DAS COLEÇÕES --- */
.pawni-col-card span {
  display: block;
  margin-top: 10px;
  font-size: 20px;
  font-weight: 700;
}

/* Cores para gatos e cães */
.pawni-cats span { color: #ff3366; }
.pawni-dogs span { color: #0fae41; }

/* MOBILE: ainda 3 por linha mas com imagens menores */
@media(max-width: 768px){
  .pawni-col-card img {
    width: 130px;
    height: 130px;
  }
  .pawni-col-card:hover img {
    padding: 10px !important;
    border-radius: 16px !important;
  }
  .pawni-col-card span {
    font-size: 13px;
  }
}
/* ===========================
   RESET DAS CARDS DE COLEÇÃO
   (remove o quadrado grande fixo)
   =========================== */

/* tira fundo, padding, sombra e radius do “tile” grande */
.pawni-col-card {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* garante que nenhum wrapper dentro cria o quadrado */
.pawni-col-card > * {
  background: transparent !important;
  box-shadow: none !important;
}

/* imagem normal: só a arte, sem fundo nem sombra */
.pawni-col-card img {
  width: 220px;
  height: 220px;
  object-fit: contain;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  transition: 0.25s ease-in-out;
}

/* HOVER — aparece apenas o quadrado pequeno atrás da imagem */
.pawni-col-card:hover img {
  background: #ffffff !important;
  padding: 14px !important;          /* controla o tamanho do quadrado */
  border-radius: 20px !important;
  box-shadow: 0 12px 26px rgba(0,0,0,0.18) !important;
}

/* título */
.pawni-col-card span {
  display: block;
  margin-top: 10px;
  font-size: 20px;
  font-weight: 700;
}

/* cores dos títulos */
.pawni-cats span { color: #ff3366; }
.pawni-dogs span { color: #0fae41; }

/* MOBILE – mais pequeno mas ainda 3 por linha */
@media (max-width: 768px) {
  .pawni-col-card img {
    width: 130px;
    height: 130px;
  }

  .pawni-col-card:hover img {
    padding: 10px !important;
    border-radius: 16px !important;
  }

  .pawni-col-card span {
    font-size: 13px;
  }
}