/* ==========================================================================
   PetMania — Design System (Etapa 3: evolução de marca)
   Carrega DEPOIS do CSS do tema e do app.css. Objetivo: consolidar a marca
   PetMania — confiança, clareza, conversão — sem redesenhar do zero nem quebrar
   o layout do tema. Retuna os tokens que o próprio tema já expõe + polimento
   pontual de componentes. Mobile-first.
   ========================================================================== */

/* ---------------------------------------------------------------- TOKENS -- */
:root{
  /* marca */
  --petza-purple:      #4d2981;
  --petza-purple-deep: #3a1e64;
  --petza-purple-700:  #43246f;
  --petza-purple-050:  #f4f1fb;
  --petza-purple-100:  #e9e3f6;
  --petza-orange:      #f5770c;
  --petza-orange-600:  #e06905;
  --petza-orange-050:  #fff2e6;

  /* neutros */
  --ink:        #1f1c26;   /* texto forte  */
  --ink-soft:   #5c5769;   /* texto auxiliar */
  --ink-mute:   #8a8595;   /* legendas, placeholders */
  --line:       #e7e3ef;   /* bordas */
  --line-soft:  #f0edf6;
  --surface:    #ffffff;
  --surface-2:  #f7f5fb;   /* cards/áreas sutis (lavanda) */
  --surface-cream: #faf7f0;

  /* semânticas */
  --ok:    #1c8a4e;
  --ok-bg: #e8f5ec;
  --warn:  #b9750d;
  --warn-bg:#fdf3e2;
  --err:   #cf3b3b;
  --err-bg:#fdecec;

  /* alias p/ compat — usar sempre --err */
  --danger: #cf3b3b;

  /* raio */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* sombra — 1 pequena (cards), 2 overlay (drawer/modal), focus */
  --sh-1: 0 1px 2px rgba(31,28,38,.05), 0 8px 24px -12px rgba(31,28,38,.14);
  --sh-2: 0 12px 40px -12px rgba(31,28,38,.22);
  --sh-focus: 0 0 0 3px rgba(77,41,129,.28);

  /* espaçamento — escala única (usar estes, não valores soltos) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* tipografia — tamanhos de referência */
  --fs-h1: clamp(20px, 2.4vw, 26px);
  --fs-h2: clamp(17px, 2vw, 21px);
  --fs-h3: 15px;
  --fs-body: 14px;
  --fs-small: 12.5px;
  --fs-price: clamp(27px, 3.4vw, 34px);
  --fs-btn: 14px;

  --ease: cubic-bezier(.2,.7,.3,1);

  /* ---- overrides dos tokens do tema (o inline <style> define em :root;
     este arquivo carrega depois e vence) ---- */
  --primary-color:        var(--petza-purple);
  --secondary-color:      var(--petza-orange);
  --font-text-color:      var(--ink);
  --font-title-color:     var(--ink);
  --font-default-weight:  400;
  --font-bold:            600;
  --font-title-weight:    700;
  --font-base:            16px;
  --font-button-uppercase: none;   /* CTAs em Title case: "Comprar", "Finalizar compra" */
  --btn-radius:           10px;
  --input-radius:         10px;
  --cards-radius:         14px;
  --prod-bl-border-radius:14px;
  --prod-bl-txt-color:    var(--ink);
  --prod-bl-price-color:  var(--ink);
  --prod-bl-flag-color:   #1e2733;
  --prod-det-price-color: var(--ink);
  --estoque-bg-color:     var(--surface-2);
  --countdown-bg-color:   var(--surface-2);
}

/* --------------------------------------------------------------- BASE ----- */
body{ color:var(--ink); font-size:16px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
@media (max-width:600px){ body{ font-size:15px; } }

a{ transition:color .15s var(--ease); }
::selection{ background:var(--petza-purple-100); }

img{ max-width:100%; }

/* foco visível e consistente em toda a loja (acessibilidade) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, .btn:focus-visible{
  outline:none; box-shadow:var(--sh-focus); border-radius:var(--r-sm);
}

/* --------------------------------------------------------- TIPOGRAFIA ----- */
h1, .pag-title, .prod-title{
  color:var(--ink); font-weight:700; line-height:1.15; letter-spacing:-.01em;
}
h1, .pag-title{ font-size:clamp(24px, 3.4vw, 34px); text-transform:none; }
.prod-title{ font-size:clamp(21px, 2.6vw, 27px); text-transform:none; }

/* título de seção / vitrine — "kicker" forte, sem gritar */
.catalogo-titulo-content .title,
.home-title, .carousel-sec-top .title{
  font-size:clamp(17px, 2vw, 21px);
  font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink); position:relative; padding-left:14px; margin:0;
}
.catalogo-titulo-content .title::before,
.home-title::before{
  content:""; position:absolute; left:0; top:.12em; bottom:.12em; width:4px;
  border-radius:4px; background:var(--petza-orange);
}
.catalogo-titulo-wrp{ align-items:center; margin-bottom:18px; }
.link.link-arrow{
  font-weight:600; color:var(--petza-purple); letter-spacing:.01em;
  display:inline-flex; align-items:center; gap:6px;
}
.link.link-arrow:hover{ color:var(--petza-orange-600); }
.link.link-arrow svg{ width:1em; height:1em; transition:transform .15s var(--ease); }
.link.link-arrow:hover svg{ transform:translateX(3px); }

/* corpo de texto auxiliar mais legível */
.md-text, .newsletter-txt, .footer-col-content, .prod-av-item-text{ line-height:1.55; }

/* --------------------------------------------------------------- BOTÕES --- */
.btn{
  font-family:var(--font-button-family, inherit);
  font-weight:700; letter-spacing:.01em; text-transform:none;
  border-radius:var(--btn-radius);
  transition:background-color .15s var(--ease), color .15s var(--ease),
             box-shadow .15s var(--ease), transform .06s var(--ease), border-color .15s var(--ease);
}
.btn:active{ transform:translateY(1px); }

/* PRIMARY — ação principal (Comprar, Finalizar, Cadastrar) */
.btn-primary,
.btn-buy,
.btn.cart-btn-cta,
.btn-prod-buy{
  background:var(--petza-purple); border:1px solid var(--petza-purple);
  color:#fff; box-shadow:0 6px 16px -8px rgba(77,41,129,.55);
}
.btn-primary:hover,
.btn-buy:hover,
.btn.cart-btn-cta:hover,
.btn-prod-buy:hover{
  background:var(--petza-purple-deep); border-color:var(--petza-purple-deep); color:#fff;
  box-shadow:0 10px 22px -8px rgba(77,41,129,.6);
}
/* o card / botão comprar vinham "outline" (CTA fraco) — viram sólidos */
.btn-prod-buy.outline, .btn-primary.outline, .btn-buy.outline, #btn-buy.outline,
.btn-buy, #btn-buy{ background:var(--petza-purple)!important; color:#fff!important; border-color:var(--petza-purple)!important; }
.btn-prod-buy.outline:hover, .btn-primary.outline:hover, .btn-buy.outline:hover,
#btn-buy:hover, .btn-buy:hover{ background:var(--petza-purple-deep)!important; border-color:var(--petza-purple-deep)!important; color:#fff!important; }

/* SECONDARY — ação de apoio (Ver mais, Continuar comprando) */
.btn-grey,
.btn-secondary,
.btn.btn-full.btn-grey{
  background:var(--surface); border:1px solid var(--line);
  color:var(--ink); box-shadow:none;
}
.btn-grey:hover,
.btn-secondary:hover{
  background:var(--surface-2); border-color:#d9d3e6; color:var(--ink);
}

/* TEXT — terciária */
.btn-link, .btn.link{ background:none; border:none; color:var(--petza-purple); box-shadow:none; padding-left:0; padding-right:0; }

.btn[disabled], .btn.disabled{ opacity:.5; cursor:not-allowed; box-shadow:none; }

/* --------------------------------------------------------------- INPUTS --- */
.form-input, .form-control, input[type="text"], input[type="email"],
input[type="tel"], input[type="number"], input[type="search"], select, textarea{
  border-radius:var(--input-radius);
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--ink);
  font-size:15px;
  min-height:46px;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.form-input::placeholder, input::placeholder{ color:var(--ink-mute); }
.form-input:focus, input:focus, select:focus, textarea:focus{
  border-color:var(--petza-purple); box-shadow:var(--sh-focus); outline:none;
}
.form-group.is-invalid .form-input, .form-input.is-invalid, .parsley-error{
  border-color:var(--err); box-shadow:0 0 0 3px var(--err-bg);
}
.form-label, .co-label{ font-weight:600; color:var(--ink); font-size:13.5px; }
.parsley-errors-list li, .form-error{ color:var(--err); font-size:12.5px; margin-top:4px; }

/* ------------------------------------------------ floating labels (CSS) --
   O tema fazia isso via script.min.js (removido). Refeito só com CSS +
   um helper mínimo no app.js que marca .has-value nos <select>. */
.form-group.floating-label{ position:relative; }
.form-group.floating-label > .form-input,
.form-group.floating-label > .form-input-group > .form-input,
.form-group.floating-label select.form-input{
  height:56px; min-height:56px;
  padding:22px 16px 6px !important;      /* espaço p/ o label subir */
}
.form-group.floating-label > .form-label{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  margin:0; padding:0 2px; pointer-events:none;
  font-size:15px; font-weight:400; color:var(--ink-mute);
  background:transparent; transition:.14s var(--ease);
  max-width:calc(100% - 40px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* estado "flutuando": foco, com valor (placeholder some), ou marcado por JS */
.form-group.floating-label:focus-within > .form-label,
.form-group.floating-label > .form-input:not(:placeholder-shown) ~ .form-label,
.form-group.floating-label.has-value > .form-label,
.form-group.floating-label.is-filled > .form-label{
  top:9px; transform:none; font-size:11.5px; font-weight:600; color:var(--petza-purple);
}
.form-group.floating-label:focus-within > .form-input{ box-shadow:none; }
.form-group.floating-label.is-invalid > .form-label{ color:var(--err); }
.form-group.floating-label.is-loading::after{
  content:""; position:absolute; right:14px; top:50%; width:16px; height:16px; margin-top:-8px;
  border:2px solid var(--line); border-top-color:var(--petza-purple); border-radius:50%;
  animation:petza-spin .7s linear infinite;
}
/* select do tema não tem :placeholder-shown -> depende do .has-value do JS */
.form-group.floating-label select.form-input{ appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);
  background-position:calc(100% - 20px) 24px, calc(100% - 15px) 24px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }

/* ============================================================== HEADER === */
#header{ background:#fff; box-shadow:0 1px 0 var(--line); position:relative; z-index:60; }
#header .header-wrapper > .container{ max-width:1240px; }

@media (min-width:961px){
  .header-content{
    display:flex !important; flex-wrap:nowrap !important;
    align-items:center !important; justify-content:flex-start !important;
    gap:24px; min-height:84px; padding-block:10px;
  }
  .header-logo-wrp{ flex:0 0 auto; margin:0 !important; }
  .header-search-wrp{
    flex:1 1 380px !important; order:0 !important;
    max-width:680px !important; min-width:300px !important; width:auto !important;
    margin:0 !important; display:block !important;
  }
  .header-btns{ flex:0 0 auto; margin-left:auto !important; min-width:0; }
  /* ícone de busca "mobile" não aparece no desktop */
  .header-search-btn-mb-wrp, .header-search-btn-mb{ display:none !important; }
  /* spec do header: só LOGO · BUSCA · CONTA · CARRINHO.
     Atendimento e Rastreio ficam no rodapé (e na barra de benefícios). */
  .header-button-wrp-atendimento, .header-rastreio-btn{ display:none !important; }
}
@media (max-width:1060px){ .header-login-btn .header-button-infos{ display:none; } }

/* logo */
.header-logo{ display:block; }
.header-logo img{ display:block; width:var(--logo-size); height:auto; }

.header-search-wrp{ position:relative; }

/* -------- HEADER MOBILE: ☰ logo conta carrinho / linha 2 = busca -------- */
@media (max-width:960px){
  #header .header-wrapper > .container{ padding-inline:14px; }
  .header-content{
    display:grid !important;
    grid-template-columns:1fr auto;
    grid-template-areas:"logo actions" "search search";
    align-items:center; column-gap:10px; row-gap:10px;
    padding-block:10px; min-height:0;
  }
  .header-logo-wrp{
    grid-area:logo; display:flex !important; align-items:center;
    gap:12px; margin:0 !important; min-width:0;
  }
  .menu-mobile-btn{ margin:0 !important; flex:0 0 auto; }
  .header-logo{ margin:0 !important; transform:none !important; flex:0 1 auto; min-width:0; }
  .header-logo.force-center{ margin-left:0 !important; }
  .header-logo img{ width:var(--logo-size-mb); max-width:100%; }
  .header-btns{ grid-area:actions; display:flex; align-items:center; gap:2px; margin:0 !important; }
  .header-search-wrp{ grid-area:search; max-width:none; width:100%; margin:0 !important; }

  /* no mobile a busca fica SEMPRE visível -> sem botão-lupa extra, sem
     Atendimento/Rastreio na barra */
  .header-search-btn-mb-wrp, .header-search-btn-mb,
  .header-button-wrp-atendimento, .header-rastreio-btn{ display:none !important; }

  .header-btns .header-button-wrp, .header-btns > a.header-button{ padding:8px; gap:0; }
  .header-btns .header-button-infos{ display:none; }
  .header-cart-btn-wrp > .header-cart-btn{ padding:9px !important; }
  .header-btns .header-button-icon svg{ width:24px; height:24px; }
}
@media (max-width:380px){
  .header-content{ column-gap:6px; }
  .header-logo img{ width:112px; }
}
.header-search{
  display:flex !important; align-items:stretch;
  height:46px; margin:0;
  background:#fff !important; border:1.5px solid var(--petza-purple-100) !important;
  border-radius:var(--r-pill) !important; overflow:hidden;
  box-shadow:0 1px 2px rgba(31,28,38,.05);
}
.header-search:focus-within{ border-color:var(--petza-purple) !important; box-shadow:var(--sh-focus); }
.header-search .header-search-input,
.header-search > .form-group{
  flex:1 1 auto; min-width:0; min-height:0 !important; margin:0; padding:0;
  display:flex; border:0; background:transparent;
}
.header-search #header-search,
.header-search input[type="search"],
.header-search input{
  flex:1 1 auto; width:100%; min-width:0; min-height:0 !important; height:100%;
  background:#fff !important; color:var(--ink) !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  padding:0 6px 0 20px; font-size:15px; -webkit-appearance:none; appearance:none;
}
.header-search #header-search::placeholder{ color:var(--ink-mute) !important; }
.header-search input[type="search"]::-webkit-search-cancel-button,
.header-search input[type="search"]::-webkit-search-decoration{ display:none; -webkit-appearance:none; }
.header-search .header-search-btn{
  flex:0 0 auto; background:transparent !important; padding:0; margin:0; display:flex; border:0;
}
.header-search .header-search-btn button,
.header-search .header-search-btn .btn{
  height:100%; width:48px; min-height:0 !important; padding:0; margin:0;
  background:var(--petza-orange) !important; color:#fff !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  display:flex; align-items:center; justify-content:center;
}
.header-search .header-search-btn button:hover{ background:var(--petza-orange-600) !important; }
.header-search .header-search-btn svg{ width:20px; height:20px; }

/* ----- ações do header (Atendimento · Rastreio · Conta · Carrinho) ----- */
.header-btns{ flex:0 0 auto; display:flex; align-items:center; gap:6px; margin:0; }
.header-btns .header-button-wrp,
.header-btns > a.header-button{
  display:flex; align-items:center; gap:9px;
  padding:8px 12px; border-radius:var(--r-sm);
  color:var(--ink); text-decoration:none; white-space:nowrap;
  transition:background-color .14s var(--ease), color .14s var(--ease);
}
.header-btns .header-button-wrp:hover,
.header-btns > a.header-button:hover{ background:var(--surface-2); color:var(--petza-purple); }
.header-button-icon{ display:flex; align-items:center; }
.header-button-icon svg{ width:24px; height:24px; }
.header-button-infos{ line-height:1.15; }
.header-button-title{ color:var(--ink-soft); font-weight:500; font-size:11px; }
.header-button-title strong, .header-button-infos strong{ display:block; color:var(--ink); font-weight:700; font-size:13px; }

/* Atendimento e Rastreio = secundários (some no mobile e some cedo p/ não apertar) */
@media (max-width:1180px){ .header-button-wrp-atendimento, .header-rastreio-btn{ display:none !important; } }

/* Carrinho = destaque real */
.header-cart-btn-wrp{ position:relative; }
.header-cart-btn-wrp > .header-cart-btn{
  background:var(--petza-purple) !important; color:#fff !important;
  padding:10px 16px !important; border-radius:var(--r-sm);
}
.header-cart-btn-wrp > .header-cart-btn:hover{ background:var(--petza-purple-deep) !important; }
.header-cart-btn-wrp .header-button-title{ color:rgba(255,255,255,.75); }
.header-cart-btn-wrp .header-button-infos strong{ color:#fff; }
.header-cart-btn-wrp .header-button-icon svg{ color:#fff; }
.v-cart-count, .header-badge{
  position:absolute; top:2px; right:2px;
  min-width:19px; height:19px; padding:0 4px; border-radius:var(--r-pill);
  background:var(--petza-orange); color:#fff; font-weight:800; font-size:11px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 2px var(--petza-purple);
}
.v-cart-count.d-none{ display:none; }

/* dropdown Atendimento */
.header-btns .dropdown-menu{
  border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-2);
  padding:6px; min-width:230px;
}
.header-btns .dropdown-item{
  display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:var(--r-xs);
  color:var(--ink); font-size:13px; text-decoration:none;
}
.header-btns .dropdown-item:hover{ background:var(--surface-2); color:var(--petza-purple); }

/* -------------------------------------------------- autocomplete busca --- */
.petza-ac{
  position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:120;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--sh-2); overflow:hidden; max-height:70vh; overflow-y:auto;
}
.petza-ac-item{
  display:grid; grid-template-columns:52px 1fr auto; gap:12px; align-items:center;
  padding:10px 14px; text-decoration:none; border-bottom:1px solid var(--line-soft);
}
.petza-ac-item:hover, .petza-ac-item.is-active{ background:var(--surface-2); }
.petza-ac-img{ width:52px; height:52px; border-radius:var(--r-sm); background:var(--surface-2); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.petza-ac-img img{ width:100%; height:100%; object-fit:contain; }
.petza-ac-info{ min-width:0; }
.petza-ac-name{ display:block; color:var(--ink); font-size:13.5px; font-weight:600; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.petza-ac-cat{ display:block; color:var(--ink-mute); font-size:11.5px; margin-top:2px; }
.petza-ac-price{ text-align:right; white-space:nowrap; }
.petza-ac-price b{ display:block; color:var(--ink); font-size:14px; font-weight:800; }
.petza-ac-pix{ display:block; color:var(--ok); font-size:11px; font-weight:600; }
.petza-ac-all{
  display:block; text-align:center; padding:12px; font-weight:700; font-size:13px;
  color:var(--petza-purple); text-decoration:none; background:var(--petza-purple-050);
}
.petza-ac-all:hover{ background:var(--petza-purple-100); }
.petza-ac-empty{ padding:18px 14px; text-align:center; color:var(--ink-mute); font-size:13.5px; }

/* ================================================================ NAV === */
#menu.menu-full{ background:var(--petza-purple); position:relative; z-index:55; }
#menu .menu-full-container{ max-width:1240px; }
#menu > .container > ul{ display:flex; align-items:stretch; gap:2px; margin:0; padding:0; list-style:none; }
#menu > .container > ul > li{ position:relative; }            /* submenu ancora no próprio item */
#menu > .container > ul > li > a{
  position:relative; display:flex; align-items:center; gap:6px;
  padding:14px 16px; color:#fff; font-weight:600; font-size:14px; letter-spacing:.01em;
  text-decoration:none; white-space:nowrap;
}
#menu > .container > ul > li > a .arrow{
  width:7px; height:7px; border-right:2px solid rgba(255,255,255,.7);
  border-bottom:2px solid rgba(255,255,255,.7); transform:rotate(45deg) translateY(-2px);
  transition:transform .16s var(--ease);
}
#menu > .container > ul > li > a::after{
  content:""; position:absolute; left:16px; right:16px; bottom:8px; height:2px;
  background:var(--petza-orange); border-radius:2px; transform:scaleX(0); transform-origin:left;
  transition:transform .18s var(--ease);
}
#menu > .container > ul > li:hover > a::after{ transform:scaleX(1); }
#menu > .container > ul > li:hover > a{ background:rgba(0,0,0,.12); }
#menu > .container > ul > li:hover > a .arrow{ transform:rotate(225deg) translateY(2px); }
/* tablet: 8 itens não cabem em 1024 -> aperta padding/tipografia (sem overflow) */
@media (min-width:961px) and (max-width:1180px){
  #menu > .container > ul{ gap:0; }
  #menu > .container > ul > li > a{ padding:13px 7px; font-size:11.5px; letter-spacing:0; gap:4px; }
  #menu > .container > ul > li > a .arrow{ margin-left:1px; }
  #menu > .container > ul > li > a::after{ left:7px; right:7px; }
}

/* ----- submenu / mega-menu (painel branco) ----- */
#menu ul.menu-full-sub{
  position:absolute; left:0; right:auto; top:100%; z-index:70;
  margin:0; padding:16px 20px; list-style:none;
  min-width:460px; max-width:min(620px, calc(100vw - 40px));
  background:#fff; border:1px solid var(--line);
  border-radius:0 0 var(--r-md) var(--r-md); box-shadow:var(--sh-2);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .14s var(--ease), transform .14s var(--ease), visibility .14s;
  columns:2; column-gap:20px;
}
#menu ul.menu-full-sub li a{ white-space:normal; }
/* ponte invisível p/ o mouse não "cair" entre o item e o painel */
#menu > .container > ul > li.has-sub::after{
  content:""; position:absolute; left:0; right:0; top:100%; height:10px;
}
#menu > .container > ul > li.has-sub:hover > ul.menu-full-sub,
#menu > .container > ul > li.has-sub:focus-within > ul.menu-full-sub{
  opacity:1; visibility:visible; transform:translateY(0);
}
#menu ul.menu-full-sub li{ break-inside:avoid; margin:0; }
#menu ul.menu-full-sub li a{
  display:block; padding:9px 10px; border-radius:var(--r-xs);
  color:var(--ink); font-size:13.5px; font-weight:500; text-decoration:none;
  transition:background-color .12s var(--ease), color .12s var(--ease);
}
#menu ul.menu-full-sub li a:hover{ background:var(--surface-2); color:var(--petza-purple); }
/* poucos filhos (ex.: Comedouros) -> 1 coluna estreita */
#menu ul.menu-full-sub:has(li:nth-child(-n+4):last-child){ columns:1; min-width:230px; }
/* itens no fim da barra: abrir o painel pela borda direita p/ não vazar a tela */
#menu > .container > ul > li.has-sub:nth-last-child(-n+2) > ul.menu-full-sub{ left:auto; right:0; }

/* ===================================================== MENU MOBILE ====== */
/* drawer acima do header fixo da página (que tem z-index alto) */
.menu-mobile-wrapper{ z-index:200 !important; }
.menu-mobile-wrapper.active ~ #header,
body.side-open #header{ z-index:1 !important; }
.menu-mobile{ background:var(--petza-purple); z-index:201 !important; }
/* Drawer fechado = zero espaço. O tema deixa .menu-mobile-wrapper como
   position:fixed encolhido no conteúdo (~400px) e os submenus nível-2 em
   translateX(100%) — juntos somavam ~18px de scroll horizontal na página.
   Fechado: colapsa tudo. Aberto (.active): o tema devolve 100%/100%. */
.menu-mobile-wrapper:not(.active){
  width:0 !important; height:0 !important; overflow:hidden !important;
}
/* Fechado: o drawer inteiro sai do render. Os submenus nível-2 (translateX
   100%) deixavam de propagar ~18px de scroll horizontal na página. Ao abrir
   (.active) esta regra para de casar e o tema reassume (visibility+transform). */
.menu-mobile-wrapper:not(.active) .menu-mobile{ display:none !important; }
.menu-mobile-wrapper.active{ overflow:hidden !important; }
.menu-mobile{ overflow-x:hidden; overflow-y:auto; }
.menu-mobile .menu-mobile-header{
  position:absolute; left:0; right:0; top:0; z-index:5;
  display:flex; align-items:center; gap:12px;
  height:60px; padding:0 14px; margin:0;
  background:#fff; border-bottom:1px solid var(--line);
}
.menu-mobile-close{
  flex:0 0 auto; width:40px; height:40px; padding:0; border:0; background:none;
  color:var(--petza-orange); display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.menu-mobile-logo{ display:flex; align-items:center; }
.menu-mobile-logo img{ width:118px; height:auto; }

.menu-mobile ul.menu-full-sub, .menu-mobile ul.menu-mobile-nav{ background:var(--petza-purple); }
.menu-mobile-nav{ padding:6px 0 40px !important; }
.menu-mobile-nav > li > a,
.menu-mobile-nav ul > li > a{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  min-height:52px; padding:0 44px 0 18px !important;
  color:#fff !important; font-size:15px; font-weight:500; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.menu-mobile-nav > li > a:active{ background:rgba(0,0,0,.14); }
.menu-mobile-nav .has-sub > a::after,
.menu-mobile .has-sub > a::after{
  content:"" !important; position:absolute !important;
  right:20px !important; left:auto !important; top:50% !important; bottom:auto !important;
  width:8px !important; height:8px !important; margin:-5px 0 0 0 !important;
  border:0 !important;
  border-right:2px solid rgba(255,255,255,.75) !important;
  border-bottom:2px solid rgba(255,255,255,.75) !important;
  transform:rotate(-45deg) !important;
  display:block !important;
}
.menu-mobile-nav .arrow{ display:none; }        /* usa o ::after acima */
.menu-mobile-eyebrow{
  padding:20px 18px 8px; font-size:11px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(255,255,255,.55); pointer-events:none;
  list-style:none;
}
.menu-mobile-nav .go-back > a{ align-items:center;
  color:var(--petza-orange) !important; font-weight:700; justify-content:flex-start; gap:8px;
}
.menu-mobile-nav .go-back > a::before{
  content:""; width:8px; height:8px;
  border-left:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg);
}
.menu-mobile-nav .see-all > a{ font-weight:700; }
/* rodapé do drawer (Atendimento / Redes) */
.menu-mobile-footer, .menu-mobile-footer-in{ color:rgba(255,255,255,.85); }
.menu-mobile-footer-tit{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.55); margin:20px 18px 8px; }
.menu-mobile-footer-link{ display:flex; align-items:center; gap:10px; padding:10px 18px; color:#fff !important; font-size:14px; text-decoration:none; }
.menu-mobile-footer-link svg{ color:var(--petza-orange); }

/* ======================================================= BARRA BENEFÍCIOS */
/* barra discreta e elegante (o app.js injeta .petza-benefits logo após o header) */
.petza-benefits{
  background:var(--surface-2); border-bottom:1px solid var(--line);
  font-size:13px; color:var(--ink-soft);
}
.petza-benefits-in{
  max-width:1200px; margin:0 auto; padding:10px 16px;
  display:flex; gap:26px; align-items:center; justify-content:center; flex-wrap:wrap;
}
.petza-benefit{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.petza-benefit svg{ width:17px; height:17px; color:var(--petza-purple); flex:0 0 auto; }
.petza-benefit b{ color:var(--ink); font-weight:600; }
@media (max-width:720px){
  .petza-benefits{ font-size:12px; }
  .petza-benefits-in{ gap:8px 18px; padding:9px 14px; }
  .petza-benefit:nth-child(n+4){ display:none; }
}

/* ================================================= CARD DE PRODUTO ====== *
 * Estrutura fixa. Altura igual por fileira = 100% CSS (slick-track flex +
 * card flex-column + preço com margin-top:auto). Nada de height via JS,
 * nada de margin individual.                                              */

/* --- altura uniforme por fileira = flexbox esticando, sem height via JS --- *
 * Grade categoria: .catalogo-lista é .row (flex-wrap). align-items:stretch
 * faz cada .grid-N (que é o próprio .prod-bl-wrp) alcançar a altura do card
 * mais alto da fileira; o card é flex-column e o miolo cresce.
 * Carrossel home: slick-track vira flex; cada slide estica igual.            */
.catalogo-lista.row{ align-items:stretch; }
.catalogo-lista.row > .prod-bl-wrp{ display:flex; flex-direction:column; }

.carousel-prods.slick-initialized .slick-track{ display:flex; align-items:stretch; }
.carousel-prods.slick-initialized .slick-slide{ height:auto; }
.carousel-prods.slick-initialized .slick-slide > div{ display:flex; }
.carousel-prods .carousel-item{ display:flex; flex:1 1 auto; }
.carousel-prods .carousel-item > .prod-bl-wrp{ width:100%; }

/* --- o card --- */
.prod-bl-wrp{
  width:100%;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:0 1px 2px rgba(31,28,38,.04);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.prod-bl-wrp:hover{
  box-shadow:0 14px 30px -14px rgba(31,28,38,.22);
  border-color:var(--petza-purple-100);
  transform:translateY(-2px);
}
.prod-bl{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
/* o tema posiciona .prod-bl-btns absolute:bottom:0 e reserva padding-bottom
   no .prod-bl -> isso fazia o botão cobrir a linha do Pix. Voltamos p/ fluxo. */
.prod-bl-wrp .prod-bl-with-btn .prod-bl,
.prod-bl-with-btn .prod-bl{ padding-bottom:0 !important; }
.prod-bl-btns{ position:static !important; left:auto; right:auto; bottom:auto; }

/* --- área de imagem: proporção fixa, produto centralizado, com respiro --- */
.prod-bl-img{
  position:relative; margin:0; flex:0 0 auto;
  aspect-ratio:1/1; width:100%; overflow:hidden;
  background:var(--surface-2);
  border-bottom:1px solid var(--line-soft);
}
.prod-bl-img img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:center; padding:14px;
  transition:transform .32s var(--ease), opacity .2s var(--ease);
}
.prod-bl-wrp:hover .prod-bl-img img:not(.hover){ transform:scale(1.035); }

/* --- infos: cresce; título reserva 2 linhas; preço ancora embaixo --- */
.prod-bl-infos, .prod-bl-infos.center{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column;
  padding:13px 14px 0; text-align:left;
}
.prod-bl-title{
  color:var(--ink); font-weight:600; font-size:13.5px; line-height:1.32;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  height:calc(1.32em * 2);            /* SEMPRE 2 linhas -> preços alinham */
  margin:0 0 8px;
}
/* bloco de preço: 3 faixas de ALTURA FIXA -> "preço atual" cai sempre no
   mesmo Y em todos os cards, com ou sem desconto, independente do nome. */
.prod-bl-price{
  margin-top:auto;                    /* ancora o bloco na base das infos */
  display:flex; flex-direction:column; align-items:flex-start; gap:0;
}
.prod-bl-price .old{
  order:1; height:16px; line-height:16px;
  font-size:11.5px; color:var(--ink-mute); text-decoration:line-through; font-weight:500;
  white-space:nowrap; overflow:hidden;          /* nunca quebra -> reserva 1 linha */
}
.prod-bl-price .new{
  order:2; height:24px; line-height:24px;
  font-size:19px; font-weight:800; color:var(--ink); letter-spacing:-.01em;
}
.prod-bl-pix{
  order:3; height:18px; margin-top:3px;
  display:flex; align-items:center; gap:5px;
  font-size:11.5px; color:var(--ink-soft); font-weight:500;
  white-space:nowrap; overflow:hidden;
}
.prod-bl-pix b, .prod-bl-pix strong{ color:var(--ok); font-weight:700; }
.prod-bl-pix svg{ width:13px; height:13px; opacity:.9; flex:0 0 auto; }

/* --- CTA único, mesmo tamanho em todos os cards --- */
.prod-bl-btns{ flex:0 0 auto; padding:12px 14px 14px; margin-top:6px; }
.prod-bl-btns .btn, .prod-bl-btns .btn:last-child{
  width:100%; min-height:40px; height:40px; margin:0;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; letter-spacing:.06em;
  border-radius:var(--r-sm); white-space:nowrap;
}
.prod-bl-wrp.out-of-stock{ opacity:.75; }
.prod-bl-wrp.out-of-stock .btn-prod-buy{
  background:var(--ink-mute)!important; border-color:var(--ink-mute)!important;
  pointer-events:none;
}

/* --- badges: hierarquia, menores, sem carnaval (máx. 2) --- */
.prod-bl-flags{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; top:9px; left:9px; }
.prod-bl-flags .prod-bl-flag:nth-child(n+3){ display:none; }
.prod-bl-flag{
  display:inline-block;
  background:var(--bg-color,#1e2733); color:var(--txt-color,#fff);
  font-size:10px; font-weight:800; letter-spacing:.02em; text-transform:uppercase;
  padding:3px 7px; border-radius:5px; line-height:1.15;
  box-shadow:0 1px 3px rgba(0,0,0,.16);
}
/* 1. desconto (X% Off) domina: fundo escuro sólido */
.prod-bl-flag[style*="1e2733"], .prod-bl-flag[style*="1e2a33"]{ background:#1e2733!important; color:#fff!important; }
/* 2. status especial — MAIS VENDIDOS -> laranja da marca */
.prod-bl-flag[style*="4D2981"], .prod-bl-flag[style*="4d2981"]{ background:var(--petza-orange)!important; color:#fff!important; }
/* 2. status especial — NOVIDADE -> pílula clara com contorno */
.prod-bl-flag[style*="E8E8E8"], .prod-bl-flag[style*="e8e8e8"]{
  background:#fff!important; color:var(--petza-purple)!important;
  border:1px solid var(--petza-purple-100); box-shadow:0 1px 3px rgba(0,0,0,.1)!important;
}
/* 3. urgência real — POUCAS UNIDADES -> âmbar sóbrio */
.prod-bl-flag[style*="F8750D"], .prod-bl-flag[style*="f8750d"]{ background:#f2a516!important; color:#3a2900!important; }

@media (max-width:600px){
  .prod-bl-title{ font-size:13px; }
  .prod-bl-price .new{ font-size:17px; }
  .prod-bl-img img{ padding:11px; }
  .prod-bl-btns{ padding:10px 12px 12px; }
  .prod-bl-infos{ padding:11px 12px 0; }
}

/* ===================================================================== *
 *  HOME PREMIUM — container único, ritmo, cabeçalho de seção, categorias *
 * ===================================================================== */
:root{
  --petza-container: 1280px;
  --petza-gutter: clamp(16px, 4vw, 40px);
  --sec-pad: clamp(34px, 4.4vw, 56px);
}

/* 1 · CONTAINER GLOBAL — mesma largura para hero, títulos, vitrines,
      newsletter e rodapé. Alinhamento planejado, não aleatório. */
.petza-container,
.main-home .home-section > .container,
.main-home .home-section .carousel-sec-top > .container,
.main-home .home-section .carousel-sec-content > .container,
.main-home .home-section .carousel-sec-bottom > .container,
#sec-1 .container-full,
.newsletter > .container,
.footer .footer-wrp > .container,
.footer .footer-bar > .container{
  max-width:var(--petza-container) !important;
  margin-inline:auto !important;
  padding-inline:var(--petza-gutter) !important;
  width:100%;
}

/* 2 · ESPAÇAMENTO ENTRE SEÇÕES — escala única */
/* o tema ordena as seções por CSS `order` (flex): a seção injetada
   "Compre por categoria" caía antes do hero. Volta p/ ordem do DOM
   (hero → categoria → vitrines), que já é a ordem correta. */
#sections-home{ display:block; overflow-x:hidden; }
.carousel-prods .slick-list, .carousel-inner .slick-list,
.slide-lista .slick-list{ overflow:hidden !important; }
.home-section{ padding-block:var(--sec-pad); background:var(--surface); }
.home-section > .container,
.home-section .carousel-sec-top,
.home-section .carousel-sec-content,
.home-section .carousel-sec-bottom{ padding-block:0; }
.carousel-sec-bottom{ display:none; }           /* linha vazia do tema */
.home-section .carousel-sec-top + .carousel-sec-content{ margin-top:0; }

/* 3 · CABEÇALHO DE SEÇÃO — componente único [ │ TÍTULO ...  Ver todos → ] */
/* o layout do tema (catalogo) aninha o título em .row/.grid-12 estreito —
   força bloco full-width p/ o "Ver todos" ir mesmo à direita */
.catalogo-titulo-wrp, .catalogo-titulo-content,
.catalogo-titulo-wrp > [class*="grid-"]{
  display:block !important; width:100% !important; max-width:100% !important;
  flex:none !important; margin:0 !important; padding:0 !important;
}
.petza-sec-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px 24px; margin:0 0 22px; width:100%;
}
.petza-sec-head__l{ display:flex; align-items:flex-start; gap:12px; min-width:0; flex:1 1 auto; }
.petza-sec-head__accent{
  flex:0 0 auto; width:4px; align-self:stretch; min-height:22px;
  margin-top:3px; border-radius:2px;
  background:linear-gradient(var(--petza-orange), var(--petza-orange-600, #d9660a));
}
.petza-sec-head__txt{ min-width:0; }
.petza-sec-head__title{
  margin:0; color:var(--ink); font-weight:800;
  font-size:clamp(16px, 1.9vw, 21px); line-height:1.2;
  letter-spacing:.02em; text-transform:uppercase;
}
.petza-sec-head__sub{
  margin:5px 0 0; color:var(--ink-soft); font-size:13px; font-weight:500;
  letter-spacing:0; text-transform:none;
}
.petza-sec-head__all{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:700; color:var(--petza-purple);
  text-decoration:none; white-space:nowrap; padding-top:2px;
}
.petza-sec-head__all svg{ transition:transform .18s var(--ease); }
.petza-sec-head__all:hover{ color:var(--petza-orange); }
.petza-sec-head__all:hover svg{ transform:translateX(3px); }

/* primeira vitrine depois do hero: um pouco mais de peso */
.petza-home-sec[data-petza-i="0"] .petza-sec-head__title{ font-size:clamp(19px, 2.4vw, 25px); }

/* 4 · RITMO — alternância MUITO sutil de fundo (percebida pelo ritmo) */
.petza-home-sec{ background:var(--surface); }
.petza-home-sec.petza-sec--tint{ background:var(--surface-2); }

/* 9 · UMA seção com tratamento editorial (Roupinhas) — quebra a repetição */
.petza-sec--editorial .petza-sec-head{ margin-bottom:26px; }
.petza-sec--editorial .petza-sec-head__l{ flex-direction:column; gap:12px; }
.petza-sec--editorial .petza-sec-head__accent{
  width:38px; height:4px; align-self:auto; min-height:0; margin:0;
}
.petza-sec--editorial .petza-sec-head__title{ font-size:clamp(20px, 2.6vw, 26px); }
.petza-sec--editorial .petza-sec-head__all{ align-self:flex-start; }

/* neutraliza o layout antigo do promo (infos à esquerda / prods à direita) */
section[data-sec-type="catalogo_promo"]{ background:transparent; }
.catalogo-promo-content, .catalogo-promo-content-wrp{ background:transparent!important; }
.catalogo-promo-content > .row,
.catalogo-promo-content .row{ display:block!important; margin:0!important; }
.catalogo-promo-prods, .catalogo-promo-content .grid-9,
.catalogo-promo-content .grid-12{
  max-width:100%!important; flex:0 0 100%!important; width:100%!important; padding:0!important;
}
.catalogo-promo-txt, .catalogo-titulo-content .link-arrow, .catalogo-promo-btn{ display:none!important; }

/* 7 · COMPRE POR CATEGORIA — cards editoriais, sem círculos genéricos */
.petza-cats-sec{ background:var(--surface); }
.petza-cats-grid{
  display:grid; grid-template-columns:repeat(6, 1fr); gap:16px;
}
.petza-cat-card{ display:flex; flex-direction:column; gap:9px; text-decoration:none; }
.petza-cat-card__img{
  display:block; aspect-ratio:1/1; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--surface-2);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.petza-cat-card__img img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .4s var(--ease);
}
.petza-cat-card:hover .petza-cat-card__img{
  border-color:var(--petza-purple-100); box-shadow:0 12px 26px -14px rgba(31,28,38,.22);
}
.petza-cat-card:hover .petza-cat-card__img img{ transform:scale(1.045); }
.petza-cat-card__label{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-weight:700; font-size:13.5px; color:var(--ink);
}
.petza-cat-card__label svg{ color:var(--ink-mute); transition:transform .18s var(--ease), color .18s var(--ease); }
.petza-cat-card:hover .petza-cat-card__label{ color:var(--petza-purple); }
.petza-cat-card:hover .petza-cat-card__label svg{ color:var(--petza-purple); transform:translateX(3px); }

/* 11 · HERO — integrado à interface, não "colado por cima" */
#sec-1.home-section{ padding-top:clamp(14px, 2.6vw, 26px); padding-bottom:0; background:var(--surface); }
.slide-pic{ display:block; width:100%; }
.slide-pic img, .slide-item img{
  display:block; width:100%; height:auto;
  border-radius:16px;
}
.slide-lista .slide-item{ display:block; }
.slide-lista{ margin:0!important; }
.slide-lista .slick-dots{ bottom:14px; }
.slide-lista .slick-dots li button:before{ color:#fff; opacity:.55; font-size:9px; }
.slide-lista .slick-dots li.slick-active button:before{ color:#fff; opacity:1; }
.slide-lista .slick-arrow{
  width:40px; height:40px; z-index:3;
  background:rgba(255,255,255,.92); border-radius:var(--r-pill); box-shadow:var(--sh-1);
}
.slide-lista .slick-prev{ left:16px; } .slide-lista .slick-next{ right:16px; }
.slide-lista .slick-arrow:before{ color:var(--ink); opacity:1; font-size:18px; }
@media (max-width:767px){
  /* proporção natural do banner (3:2) — sem crop, sem distorção;
     o <source> troca por hero-mobile quando o asset existir */
  .slide-pic img, .slide-item img{ border-radius:12px; }
  .slide-lista .slick-arrow{ display:none!important; }
}

/* 15 · CARROSSEL de produtos — setas discretas no desktop, swipe no mobile */
.carousel-prods .slick-arrow{
  width:34px; height:34px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill);
  box-shadow:0 4px 12px -4px rgba(31,28,38,.18); opacity:0; transition:opacity .18s var(--ease);
}
.home-section:hover .carousel-prods .slick-arrow{ opacity:1; }
.carousel-prods .slick-arrow:before{ color:var(--ink-soft); font-size:15px; }
.carousel-prods .slick-prev{ left:-6px; } .carousel-prods .slick-next{ right:-6px; }
.carousel-prods .slick-disabled{ opacity:0!important; pointer-events:none; }
@media (max-width:960px){ .carousel-prods .slick-arrow{ display:none!important; } }

/* 5 · MOBILE — título nunca colide com "Ver todos" */
@media (max-width:640px){
  .petza-sec-head{ align-items:flex-start; gap:10px 14px; margin-bottom:18px; }
  .petza-sec-head__title{ font-size:16px; }
  .petza-home-sec[data-petza-i="0"] .petza-sec-head__title,
  .petza-sec--editorial .petza-sec-head__title{ font-size:17.5px; }
  .petza-sec-head__sub{ font-size:12px; }
  .petza-sec-head__all{ font-size:12px; }
  .petza-cats-grid{ grid-template-columns:repeat(2, 1fr); gap:12px; }
}
@media (min-width:641px) and (max-width:1024px){
  .petza-cats-grid{ grid-template-columns:repeat(3, 1fr); }
}

/* 13 · BARRA DE BENEFÍCIOS — faixa institucional discreta, baixa */
.petza-benefits{
  background:var(--surface); border-bottom:1px solid var(--line);
  font-size:12.5px; color:var(--ink-mute);
}
.petza-benefits-in{
  max-width:var(--petza-container); margin:0 auto; padding:8px var(--petza-gutter);
  display:flex; gap:30px; align-items:center; justify-content:center; flex-wrap:wrap;
}
.petza-benefit svg{ width:15px; height:15px; color:var(--petza-purple); opacity:.9; }
.petza-benefit b{ color:var(--ink-soft); font-weight:600; }
@media (max-width:720px){
  .petza-benefits{ font-size:11.5px; }
  .petza-benefits-in{ gap:6px 16px; padding:7px 14px; }
}

/* 17 · NEWSLETTER — editorial simples: texto à esquerda, form à direita */
.newsletter{
  background:linear-gradient(180deg,var(--petza-purple) 0%, var(--petza-purple-deep) 100%)!important;
}
.newsletter-content{
  padding-block:clamp(30px, 4vw, 46px);
  display:flex; align-items:center; gap:28px 40px; flex-wrap:wrap;
}
.newsletter-infos{ flex:1 1 380px; max-width:520px; }
.newsletter-form{ flex:1 1 340px; display:flex; gap:10px; flex-wrap:wrap; align-items:flex-start; }
.newsletter-form .form-group{ flex:1 1 220px; margin:0; }
.newsletter-tit{ font-size:clamp(21px,2.4vw,27px); font-weight:800; color:#fff; letter-spacing:-.01em; text-transform:none; }
.newsletter-txt{ color:rgba(255,255,255,.82); font-size:14px; margin-top:6px; }
.newsletter-form .form-input{ min-height:50px; border:none; border-radius:var(--r-sm); }
/* honeypots anti-spam do tema (cph1d3 / cpt1m3 / deny-repeat) ficavam
   visíveis e empurravam ~17px de scroll horizontal — escondê-los */
.newsletter-btn input, .newsletter-form input[name="deny-repeat"]{ display:none !important; }
.newsletter-btn{ margin:0; }
.newsletter-btn .btn, .newsletter-form .btn{
  background:var(--petza-orange); border-color:var(--petza-orange); color:#fff;
  min-height:50px; font-weight:800; padding-inline:22px; border-radius:var(--r-sm);
}
.newsletter-btn .btn:hover{ background:var(--petza-orange-600); border-color:var(--petza-orange-600); }
@media (max-width:640px){
  .newsletter-content{ gap:16px; }
  .newsletter-form{ flex-direction:column; }
  .newsletter-form .form-group, .newsletter-btn, .newsletter-btn .btn{ width:100%; }
}

/* 18 · FOOTER — acabamento alinhado à nova Home */
.footer{ background:#20182e!important; color:rgba(255,255,255,.70); }
.footer .footer-tit, .footer .footer-col-tit{
  color:#fff; font-weight:700; font-size:13px; letter-spacing:.06em;
  text-transform:uppercase; margin-bottom:14px;
}
.footer a, .footer .footer-links a{ color:rgba(255,255,255,.70); transition:color .15s var(--ease); }
.footer a:hover{ color:#fff; }
.footer-wrp{ padding-block:clamp(36px, 4vw, 52px) 0; }
.footer-content{ padding-block:0 clamp(30px, 3.5vw, 44px); gap:28px 0; }
.footer-col{ padding-inline:0; }
.footer-links li{ margin-bottom:9px; font-size:13px; }
/* link institucional ainda sem página — discreto, não interativo */
.footer-pending{ color:rgba(255,255,255,.42); cursor:default; }
.footer-bar{ background:#180f24!important; color:rgba(255,255,255,.55); font-size:12px; }
.footer-bar > .container{ padding-block:16px; }
.footer-selos img{ background:#fff; border-radius:8px; padding:6px; }
.footer-redes a{
  width:36px; height:36px; border-radius:var(--r-pill);
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.18); color:#fff;
}
.footer-redes a:hover{ background:var(--petza-orange); border-color:var(--petza-orange); }
.footer-pagamentos-items img, .footer-pagamentos svg{ opacity:.85; }
@media (max-width:768px){
  .footer-col.footer-collapse .footer-tit{
    cursor:pointer; display:flex; justify-content:space-between; align-items:center;
    padding:14px 0; margin:0; border-top:1px solid rgba(255,255,255,.1);
  }
}

/* ======================================================= PÁGINA PRODUTO === *
 *  1ª dobra forte: GALERIA | AVALIAÇÃO · NOME · PREÇO · PIX · [variantes]    *
 *  QUANTIDADE + COMPRAR · CEP · confiança. Fluxo: produto→preço→prova→CTA.   */
.pag-prod-contents{ align-items:flex-start; }
@media (min-width:961px){
  .pag-prod-left{ flex:0 0 55%; max-width:55%; }
  .pag-prod-right{ flex:0 0 43%; max-width:43%; position:sticky; top:16px; align-self:flex-start; }
}
/* caixa de compra = 1 painel premium (não "formulário"): borda leve,
   sombra suave, e as sub-áreas separadas por hairline, não por caixas */
.pag-prod-infos{
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface);
  box-shadow:0 1px 2px rgba(31,28,38,.04); padding:var(--sp-6);
}
/* o tema usa flex + `order` nos filhos de .pag-prod-infos; a caixa "avise-me"
   é injetada e precisa de order explícito p/ cair abaixo do preço (order 2) */
.produto-det-avise{ order:3; }
@media (max-width:960px){
  .pag-prod-infos{ border:none; box-shadow:none; padding:4px 0 0; }
  /* o tema move .pag-prod-infos p/ dentro de .pag-prod-infos-mb no mobile
     (a coluna direita fica vazia) — então a caixa de compra VEM daqui */
  .pag-prod-infos-mb{ display:block; margin-top:18px; }
  .pag-prod-right:empty{ display:none; }
}
.pag-prod-bottom{ margin-top:24px; }
.pag-prod-bottom > *{ margin-bottom:32px; }

/* --- GALERIA --- */
.produto-fotos{ border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:#fff; }
.carrosel-produto-wrapper{ background:#fff; }
.carrosel-produto .carousel-item{ background:#fff; }
.carrosel-produto .carrosel-produto-foto{ display:flex; align-items:center; justify-content:center; aspect-ratio:1/1; }
.carrosel-produto .carrosel-produto-foto img{ width:100%; height:100%; object-fit:contain; padding:18px; }
.carrosel-produto-thumbs .carrosel-produto-thumbs-foto{
  border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; background:#fff;
  aspect-ratio:1/1; transition:border-color .15s var(--ease);
}
.carrosel-produto-thumbs .carrosel-produto-thumbs-foto img{ width:100%; height:100%; object-fit:contain; padding:6px; }
.carrosel-produto-thumbs .carousel-item.is-active .carrosel-produto-thumbs-foto,
.carrosel-produto-thumbs .carousel-item.slick-current .carrosel-produto-thumbs-foto{ border-color:var(--petza-purple); }
.produto-fotos-zoom-alert{ font-size:11.5px; color:var(--ink-mute); }

/* --- ordem: PROVA SOCIAL (rating) -> NOME -> PROMOÇÃO (badges) -> PREÇO --- */
.prod-title-wrp{ display:flex; flex-direction:column; align-items:flex-start; gap:0; }
.prod-rating-inline{ order:0; }
.prod-title.title, h1.prod-title{ order:1; }
.prod-det-flags{ order:2; }
.prod-sku-wrp{ order:3; }
.prod-det-flags{ display:flex; gap:6px; flex-wrap:wrap; margin:10px 0 0; }
.prod-det-flags .prod-bl-flag{ font-size:10px; padding:3px 7px; }
.prod-title.title, h1.prod-title{
  font-size:var(--fs-h1); line-height:1.3; font-weight:800;
  color:var(--ink); margin:0; max-width:34ch;
}
.prod-sku-wrp{ font-size:11.5px; color:var(--ink-mute); margin-top:8px; }
.prod-rating-inline{
  display:inline-flex; align-items:center; gap:7px; margin:0 0 10px;
  text-decoration:none; color:var(--ink-soft); font-size:13px;
}
.prod-rating-inline .pri-stars{ display:inline-flex; gap:1px; }
.prod-rating-inline .i-star{ width:15px; height:15px; fill:#dcd7e6; }
.prod-rating-inline .i-star.on{ fill:#f5a623; }
.prod-rating-inline .pri-avg{ color:var(--ink); font-weight:800; }
.prod-rating-inline .pri-sep{ color:var(--ink-mute); }
.prod-rating-inline .pri-count{ color:var(--ink-soft); text-decoration:underline; text-underline-offset:2px; }
.prod-rating-inline:hover .pri-count{ color:var(--petza-purple); }

/* --- PREÇO (hierarquia extrema) --- */
.prod-precos{ margin-top:14px; }
.prod-preco-old-wrp, .prod-preco-old{ font-size:13.5px; color:var(--ink-mute); text-decoration:line-through; font-weight:500; }
.prod-preco-new-wrp{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-top:2px; }
.prod-preco-new{ font-size:clamp(27px, 3.4vw, 34px); font-weight:800; color:var(--ink); letter-spacing:-.02em; line-height:1.05; }
.prod-preco-discount, .produto-det-desconto{
  background:var(--petza-orange-050); color:#b4520a; border:1px solid #f3c79a;
  font-weight:800; border-radius:var(--r-xs); padding:2px 7px; font-size:12px; letter-spacing:.01em;
}
/* Pix: linha discreta logo abaixo do preço — nunca caixa verde grande */
.prod-pay-desc{
  display:flex; align-items:center; gap:6px; margin-top:7px;
  color:var(--ink-soft); font-size:13px; font-weight:500;
}
.prod-pay-desc svg{ width:15px; height:15px; flex:0 0 auto; opacity:.9; }
.prod-pay-desc b{ color:var(--ok); font-weight:800; font-size:14px; }
.prod-pay-desc .prod-pay-off{ font-style:normal; color:var(--ok); font-weight:700; }
.prod-preco-parc, .pd-disc-pix, .produto-det-link, .prod-preco-economia{ display:none !important; }

/* frete grátis — linha, não caixa */
.produto-det-frete-gratis{
  background:transparent; border:0; padding:0; margin-top:10px;
  font-size:12.5px; color:var(--ink-soft); display:flex; align-items:center; gap:6px;
}
.produto-det-frete-gratis::before{ content:"\2713\00a0"; color:var(--ok); font-weight:800; }
.produto-det-frete-gratis span b, .produto-det-frete-gratis span{ color:var(--ink-soft); }

/* --- VARIANTES (só quando reais) --- */
.produto-det-atributo .form-label{ font-weight:700; font-size:13px; color:var(--ink); margin-bottom:8px; display:block; }
.form-check-img label{ border:2px solid var(--line); border-radius:var(--r-sm); overflow:hidden; min-width:52px; min-height:52px; transition:border-color .15s var(--ease), box-shadow .15s var(--ease); }
.form-check-img input:checked + label{ border-color:var(--petza-purple); box-shadow:var(--sh-focus); }
.form-check-img label:hover{ border-color:var(--petza-purple-100); }
.attr-radio-txt{ display:inline-flex; }
.attr-radio-txt label{
  min-width:46px; min-height:44px; padding:0 14px; border:1.5px solid var(--line); border-radius:var(--r-sm);
  display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:13.5px;
  color:var(--ink); cursor:pointer; transition:.15s var(--ease);
}
.attr-radio-txt input:checked + label{ border-color:var(--petza-purple); background:var(--petza-purple); color:#fff; }
.attr-radio-txt input:disabled + label{ opacity:.4; text-decoration:line-through; cursor:not-allowed; }

/* --- QUANTIDADE + COMPRAR (uma ação visual) --- */
.produto-det-qtde-btn > .row{ align-items:stretch; }
.produto-det-quantidade .number-spinner, .prod-det-qty .number-spinner{
  border:1.5px solid var(--line); border-radius:var(--r-sm); overflow:hidden; height:54px; display:flex;
}
.number-spinner .ns-btn{ min-width:46px; height:100%; border:0; background:var(--surface-2); color:var(--ink); font-size:18px; }
.number-spinner .ns-btn:hover{ background:var(--petza-purple-100); color:var(--petza-purple); }
.number-spinner .ns-input{ width:44px; border:0; text-align:center; font-weight:800; font-size:15px; color:var(--ink); }
#btn-buy, .produto-det-btn .btn-buy{
  width:100%; min-height:54px; font-size:15px; font-weight:800; letter-spacing:.02em;
  border-radius:var(--r-sm); box-shadow:0 6px 16px -8px rgba(77,41,129,.4);
  white-space:nowrap; overflow:hidden;
}
#btn-buy.is-done svg{ vertical-align:-3px; margin-right:6px; }
#btn-buy[disabled], #btn-buy[aria-disabled="true"]{
  background:var(--ink-mute) !important; border-color:var(--ink-mute) !important;
  cursor:not-allowed; box-shadow:none;
}
#btn-buy.is-loading{ color:transparent !important; pointer-events:none; position:relative; }
#btn-buy.is-loading::after{
  content:""; position:absolute; inset:0; margin:auto; width:20px; height:20px;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%;
  animation:petza-spin .7s linear infinite;
}
#btn-buy.is-done{ background:var(--ok) !important; border-color:var(--ok) !important; }
@keyframes petza-spin{ to{ transform:rotate(360deg); } }

/* --- CONFIANÇA perto do CTA (afirmações verdadeiras) --- */
.prod-det-dest-wrp{ border:0 !important; background:transparent !important; box-shadow:none !important; padding:0 !important; }
.prod-det-dest-wrp .pg-card-body{ padding:0 !important; display:flex; flex-wrap:wrap; gap:8px 18px; }
.prod-det-dest-i{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-soft); }
.prod-det-dest-i-img{ width:18px; height:18px; flex:0 0 auto; color:var(--petza-purple); }
.prod-det-dest-i-tit{ font-weight:700; color:var(--ink-soft); }
.prod-det-dest-i-txt{ display:none; }
/* bloco "formas de pagamento" com texto salesy do tema — redundante com o
   checkout; fora da 1ª dobra da PDP */
.prod-det-payment-forms{ display:none !important; }

/* --- PRODUTO INDISPONÍVEL --- */
.prod-preco-new.is-empty,
.pag-prod-infos.is-unavailable .prod-preco-new{ color:var(--ink-mute); font-size:22px; font-weight:800; }
.produto-det-avise{
  margin-top:16px; padding:18px; border:1px solid var(--line);
  border-radius:var(--r-md); background:var(--surface-2);
}
.produto-det-avise-tit{ margin:0; font-size:15px; color:var(--ink); }
.produto-det-avise-sub{ margin:6px 0 12px; font-size:12.5px; color:var(--ink-soft); }
.produto-det-avise-form{ display:flex; gap:8px; flex-wrap:wrap; }
.produto-det-avise-form input{ flex:1 1 180px; min-height:48px; }
.produto-det-avise-form input.is-invalid{ border-color:var(--danger,#cf3b3b); }
.produto-det-avise-form .btn{ flex:0 0 auto; min-height:48px; padding-inline:20px; }
.produto-det-avise-ok{ margin:8px 0 0; color:var(--ok); font-size:13px; font-weight:700; }
.produto-det-avise-ok[hidden]{ display:none !important; }

/* --- DESCONTO PROGRESSIVO (dado real) — seção, não caixa --- */
.produto-det-pgr-disc-wrp{ border:0; border-top:1px solid var(--line); border-radius:0; background:transparent; margin-top:6px; }
.produto-det-pgr-disc-wrp .pg-card-body{ padding:14px 0 0; }
.produto-det-pgr-disc-tit{ font-weight:800; font-size:13px; color:var(--ink); }
.produto-det-pgr-disc-txt{ font-size:12px; color:var(--ink-soft); margin-bottom:6px; }
.produto-det-pgr-list{ list-style:none; margin:0; padding:0; }
.produto-det-pgr-i{ display:flex; align-items:center; gap:12px; padding:8px 0; border-top:1px solid var(--line); font-size:12.5px; }
.produto-det-pgr-i:first-child{ border-top:0; }
.produto-det-pgr-i-percent{ color:var(--petza-orange); font-weight:800; }
.produto-det-pgr-i-btn .btn{ min-height:32px; padding-inline:12px; font-size:11px; }

/* --- CEP / ENTREGA — seção do painel, não caixa dentro da caixa --- */
.cart-ship-wrp, .produto-det-cep{
  border:0; border-top:1px solid var(--line); border-radius:0;
  padding:16px 0 0; background:transparent; margin-top:6px;
}
.cart-ship-wrp .pg-card-body{ padding:0; }
.cart-ship-header{ display:block; }
.cart-ship-title{ font-weight:800; font-size:13.5px; color:var(--ink); margin-bottom:8px; display:block; }
.cart-ship-title a{ display:none; }             /* "Não sei meu CEP" — helper redundante */
.cart-ship-note{ font-size:12px; color:var(--ink-mute); margin-top:6px; }
.cart-ship-opt{ display:flex; justify-content:space-between; align-items:center; font-size:13px; }
.cart-ship-opt b{ color:var(--ok); font-weight:700; }
.cart-ship-input .form-input-group{ display:flex; gap:8px; }
.cart-ship-input .form-input.cep{ min-height:48px; }
#btn-cart-zipcode{ min-height:48px; padding-inline:18px; white-space:nowrap; }
.cart-ship-res{ margin-top:12px; }
.cart-ship-res-tit{ font-size:12.5px; color:var(--ink-soft); margin-bottom:6px; }
.cart-ship-res-list .form-group{ border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 12px; font-size:13px; }

/* tabs (descrição / perguntas / avaliações) */
.tabs-nav{ border-bottom:1px solid var(--line); gap:4px; }
.tabs-nav-item{ font-weight:700; color:var(--ink-soft); padding:12px 4px; border-bottom:2px solid transparent; }
.tabs-nav-item.active{ color:var(--petza-purple); border-bottom-color:var(--petza-purple); }
.text-formatted{ line-height:1.7; color:var(--ink); }
.text-formatted h2, .text-formatted h3, .text-formatted strong:first-child{ color:var(--ink); }

/* ===================================================== AVALIAÇÕES ======== */
#avaliacoes-sec .tabs-content{ padding-top:20px; }
.prod-av-resume{
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface);
  padding:22px; display:flex; gap:28px; align-items:center; flex-wrap:wrap;
}
.prod-av-resume-avg{ text-align:center; flex:0 0 auto; }
.prod-av-resume-avg-n{ font-weight:800; color:var(--ink); font-size:44px; line-height:1; }
.prod-av-resume-avg-desc{ color:var(--ink-soft); font-size:13px; }
.prod-av-resume-list{ flex:1 1 260px; min-width:220px; }
.prod-av-resume-item{ display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ink-soft); margin:3px 0; }
.prod-av-resume-item-bar{ flex:1; height:8px; background:var(--line); border-radius:var(--r-pill); overflow:hidden; }
.prod-av-resume-item-bar > span{ display:block; height:100%; background:var(--petza-orange); }
.star-rating .i-star, .prod-av-item-stars .i-star{ color:#f5a623; }
/* lista de avaliações em 2 colunas no desktop (densidade de e-commerce grande) */
@media (min-width:900px){
  .prod-av-list{ column-count:2; column-gap:36px; }
  .prod-av-item{ break-inside:avoid; }
}
.prod-av-item{ border:1px solid var(--line); border-radius:var(--r-md); padding:16px 18px; margin-bottom:16px; }
.prod-av-item-title{ font-weight:700; color:var(--ink); }
.prod-av-item-date{ color:var(--ink-mute); font-size:12.5px; }
.prod-av-item-text{ color:var(--ink); font-size:14px; }
.btn-reviews-load{ margin-top:10px; min-width:240px; }

/* relacionados */
#relacionados-sec .home-title, #relacionados-sec .title{ }

/* ====================================================== CATEGORIA ======= */
.catalogo-topo-tit h1, .catalogo-topo h1{ text-transform:none; }
.catalogo-topo-desc{ color:var(--ink-soft); font-size:14px; }
.breadcrumb{ font-size:12.5px; color:var(--ink-mute); }
.breadcrumb a{ color:var(--ink-soft); }
.breadcrumb a:hover{ color:var(--petza-purple); }
.catalogo-filtros{ border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); }
.filtro-item-tit, .catalogo-filtros .pg-card-body > .filtro-item-tit{ font-weight:700; font-size:14px; color:var(--ink); }
.filtro-item-link{ color:var(--ink-soft); font-size:13.5px; padding:6px 0; }
.filtro-item-link:hover{ color:var(--petza-purple); }
.irs--round .irs-bar, .irs-bar{ background:var(--petza-purple)!important; }
.irs--round .irs-handle, .irs-handle{ border-color:var(--petza-purple)!important; }
/* rótulos flutuantes do range colidiam com as alças — usa só min/max embaixo */
.irs--round .irs-from, .irs--round .irs-to, .irs--round .irs-single,
.irs-from, .irs-to, .irs-single{ display:none!important; }
.irs--round .irs-min, .irs--round .irs-max, .irs-min, .irs-max{
  visibility:visible!important; opacity:1!important; background:transparent!important;
  color:var(--ink-soft)!important; font-size:12.5px!important; top:26px!important;
}
.catalogo-filtros-price .js-range-values{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink-soft); margin-top:6px; }
#cat-order, .catalogo-order select{ min-height:42px; }
.cat-load-more{ min-width:220px; }

/* ===================================================== CARRINHO LATERAL == */
/* o tema deixa .page-side-wrp com width:100% (inclui a área da barra de
   rolagem clássica) e o drawer em right:0 ficava ~17px atrás da barra,
   cortando X, preços e CTA. left/right:0 dimensiona pela área visível. */
#cart-side.page-side-wrp, .page-side-wrp.right{
  width:auto !important; left:0 !important; right:0 !important;
  z-index:210 !important;                 /* acima de #menu (55) e #header (60) */
}
body.side-open #menu, body.side-open #header{ z-index:1 !important; }
#cart-side .page-side, .page-side-wrp.right .page-side{
  box-shadow:var(--sh-2); width:min(420px, 100%); max-width:100%; right:0;
}
.page-side-header{ border-bottom:1px solid var(--line); padding:16px 20px; }
.page-side-title{ font-weight:800; font-size:17px; color:var(--ink); }
.page-side-close{ color:var(--ink-soft); }
/* área rolável: gutters sensatos + reset da lista */
.cart-side-list-wrp{ padding:16px 20px !important; }
.cart-side-list{ list-style:none !important; margin:0 !important; padding:0 !important; }
.cart-side-i{
  list-style:none; margin:0; padding:16px 0; border-top:1px solid var(--line);
  display:flex; gap:12px; align-items:flex-start;
}
.cart-side-i:first-child{ border-top:none; padding-top:4px; }
.cart-side-i-img{
  flex:0 0 64px; width:64px; height:64px;
  border-radius:var(--r-sm); border:1px solid var(--line); background:#fff; overflow:hidden;
}
.cart-side-i-img img{ width:100%; height:100%; object-fit:contain; }
.cart-side-i-infos{ flex:1 1 auto; min-width:0; }
.cart-side-i-tit{ font-weight:700; color:var(--ink); font-size:13px; line-height:1.35; margin-bottom:4px; }
.cart-side-i-variant{ color:var(--ink-mute); font-size:12px; }
.cart-side-i-price{ font-size:12.5px; margin:4px 0 8px; }
.cart-side-i-price .old-price{ color:var(--ink-mute); text-decoration:line-through; font-size:11.5px; }
.cart-side-i-price .cart-side-i-sale-price{ color:var(--ink); font-weight:800; }
.cart-side-i-price .badge{ background:var(--petza-orange-050); color:#b4520a; font-size:10px; font-weight:800; padding:1px 5px; border-radius:4px; }
.cart-side-i-act{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cart-side-i-total{ color:var(--ink); font-weight:800; font-size:13.5px; margin-left:auto; }
.cart-side-i .btn-rem-cart{
  position:absolute; top:14px; right:0; width:24px; height:24px; min-height:0; padding:0;
  background:transparent; border:0; color:var(--ink-mute);
}
.cart-side-i .btn-rem-cart:hover{ color:var(--danger,#cf3b3b); }
.cart-side-i .btn-rem-cart svg{ width:12px; height:12px; }
.cart-side-i{ position:relative; }
.cart-side-i-infos{ padding-right:26px; }        /* espaço p/ o X de remover */
.number-spinner{ border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; display:inline-flex; }
.cart-side-i .number-spinner{ height:32px; }
.cart-side-i .number-spinner .ns-input{ min-height:0; height:30px; width:34px; text-align:center; border:none; font-size:12.5px; font-weight:800; }
.cart-side-i .number-spinner .ns-btn{
  min-width:30px; min-height:30px; height:30px; border:0; background:var(--surface-2);
  font-size:0; line-height:1; position:relative;
}
.cart-side-i .ns-btn::after{ display:none !important; }
.cart-side-i .ns-btn::before{
  content:""; background:none !important; border:0 !important; width:auto !important; height:auto !important;
  position:static !important; transform:none !important; font-size:15px; font-weight:700; color:var(--ink);
}
.cart-side-i .ns-sub::before{ content:"\2212" !important; }
.cart-side-i .ns-add::before{ content:"+" !important; }
.number-spinner .ns-input{ min-height:38px; width:44px; text-align:center; border:none; }
.number-spinner .ns-btn{ min-width:36px; min-height:38px; }
.page-side-footer{ border-top:1px solid var(--line); padding:16px 20px; }
.cart-resume-values{ font-size:14px; }
.cart-resume-value{ display:flex; justify-content:space-between; padding:4px 0; color:var(--ink-soft); }
.cart-resume-value.dest{ color:var(--ink); font-weight:800; font-size:16px; padding-top:8px; border-top:1px solid var(--line); margin-top:4px; }
.cart-resume-discount-wrp .v-cart-discount{ color:var(--ok); font-weight:700; }
.page-side-btns{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.page-side-btns .cart-btn-cta{ order:1; min-height:52px; font-size:15px; }
.page-side-btns .btn-grey{ order:2; min-height:44px; }
/* barra frete grátis */
.cart-side-freeship{
  border:0; background:var(--surface-2); border-radius:var(--r-sm);
  padding:12px 14px; margin:4px 0 14px; font-size:12.5px; color:var(--ink-soft);
}
.cart-side-freeship.is-full{ background:#eaf6ef; color:var(--ok); }
.cart-side-freeship-msg b{ color:inherit; }
.cart-side-freeship-bar{ height:7px; background:var(--line); border-radius:var(--r-pill); margin-top:8px; overflow:hidden; }
.cart-side-freeship-bar > span{ display:block; height:100%; background:var(--ok); border-radius:var(--r-pill); }
.cart-side-list{ margin-top:2px; }

/* ======================================================== CHECKOUT ====== */
.checkout, .steps-layout{ background:var(--surface-2); }
.checkout .card, .co-infos, .co-address, .co-payment, .co-resume{
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); box-shadow:var(--sh-1);
}
.checkout-steps, .co-steps{ }
.checkout-step, .co-step{ color:var(--ink-mute); font-weight:700; }
.checkout-step.current, .co-step.current{ color:var(--petza-purple); }
.checkout-step.completed, .co-step.completed{ color:var(--ok); }
.co-resume, .checkout-resume{ position:sticky; top:16px; }
.co-r-item{ border-top:1px solid var(--line); padding:12px 0; }
.co-r-item-title{ font-weight:600; font-size:13.5px; color:var(--ink); }
.co-btn-buy .btn, .checkout-finish .btn{ min-height:54px; font-size:15px; font-weight:800; }
.countdown-sec{ background:var(--surface-2); color:var(--ink); border-bottom:1px solid var(--line); font-size:12.5px; }
.countdown-sec .container{ padding-block:8px; }
.countdown-sec strong{ color:var(--petza-purple); font-weight:700; }

/* --- header enxuto do checkout (logo + compra segura), sem menu --- */
.co-header{ background:var(--surface); border-bottom:1px solid var(--line); }
.co-header-in{
  max-width:var(--petza-container); margin:0 auto; padding:14px var(--petza-gutter);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.co-header-logo img{ height:40px; width:auto; display:block; }
.co-header-safe{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:700; color:var(--ink-soft);
}
.co-header-safe svg{ color:var(--ok); }

/* --- área limpa: fundo neutro, container consistente --- */
.checkout-pag, .checkout, .steps-layout{ background:var(--surface-2); }
.co-container, .checkout-pag > .container{
  max-width:var(--petza-container) !important; padding-inline:var(--petza-gutter) !important;
  padding-block:28px 40px;
}

/* --- FORM em coluna única (60%) · RESUMO (40%) --- */
@media (min-width:900px){
  .co-form-inputs{ flex:0 0 60%; max-width:60%; }
  .co-resume-wrapper{ flex:0 0 40%; max-width:40%; }
}
.co-form-inputs > .row{ display:block !important; margin:0 !important; }
.co-form-inputs .co-col-1, .co-form-inputs .co-col-2{
  max-width:100% !important; flex:0 0 100% !important; width:100% !important; padding:0 !important;
}
/* ordem lógica: Informações -> Entrega -> Pagamento */
.co-form-inputs .co-col-1{ display:flex; flex-direction:column; }
.co-infos{ order:1; }
.co-address{ order:2; }
.co-col-2{ order:3; }
.co-form-inputs .card{ margin-bottom:16px; }

.checkout-pag .card, .co-infos, .co-address, .co-payment, .co-resume{
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); box-shadow:var(--sh-1);
}
.checkout-pag .card{ padding:20px; }
.card-title, .co-infos .card-header, .co-payment .card-header{
  font-weight:800; font-size:15px; color:var(--ink);
}
/* card inativo: mais apagado, sem borda forte */
.checkout-pag .card:not(.current):not(.form-show-valid){ opacity:.55; }

/* --- stepper enxuto: bolinha numerada + rótulo, linha fina de ligação --- */
/* o tema esconde .checkout-steps-wrp no desktop — mostramos sempre, discreto */
#checkout-steps, .checkout-steps-wrp{
  display:block !important; flex:0 0 100% !important; width:100% !important; max-width:100% !important;
  margin-bottom:22px;
}
.checkout-steps{
  display:flex; align-items:center; list-style:none; margin:0; padding:0; max-width:420px;
}
.checkout-step{
  flex:1 1 0; display:flex; align-items:center; gap:8px; min-width:0;
  font-size:12px; font-weight:700; color:var(--ink-mute);
  border:0; background:none; padding:0; position:relative;
}
.checkout-step + .checkout-step::before{
  content:""; flex:1 1 auto; height:2px; background:var(--line); margin:0 8px; border-radius:2px;
}
.checkout-step .checkout-step-icon{
  width:24px; height:24px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800;
  background:var(--surface); border:1.5px solid var(--line); color:var(--ink-mute);
}
.checkout-step-txt{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.checkout-step.current{ color:var(--petza-purple); }
.checkout-step.current .checkout-step-icon{ background:var(--petza-purple); border-color:var(--petza-purple); color:#fff; }
.checkout-step.done{ color:var(--ink-soft); }
.checkout-step.done .checkout-step-icon{ background:var(--ok); border-color:var(--ok); color:#fff; font-size:0; }
.checkout-step.done .checkout-step-icon::after{ content:"\2713"; font-size:12px; }
.checkout-step.done + .checkout-step::before,
.checkout-step.current + .checkout-step::before{ background:var(--petza-purple-100); }
@media (max-width:560px){
  .checkout-step{ flex:0 0 auto; }
  .checkout-step:not(.current) .checkout-step-txt{ display:none; }
  .checkout-step + .checkout-step::before{ flex:1 1 auto; min-width:12px; }
  .checkout-step.current{ flex:1 1 auto; }
}

/* --- RESUMO --- */
.co-resume{ position:sticky; top:16px; overflow:hidden; }
.co-resume .card-header{ background:var(--petza-purple); color:#fff; padding:16px 18px; display:flex; align-items:center; gap:10px; }
.co-resume .card-header .card-title{ color:#fff; margin:0; flex:1 1 auto; }
.co-resume-toggle-val{ font-weight:800; font-size:15px; color:#fff; display:none; }
.co-resume-toggle-caret{ color:#fff; transition:transform .2s var(--ease); display:none; }
@media (max-width:899px){
  .co-resume .card-header{ cursor:pointer; }
  .co-resume-toggle-val, .co-resume-toggle-caret{ display:inline-block; }
  .co-resume.is-collapsed .co-resume-items-body,
  .co-resume.is-collapsed .co-resume-coupon,
  .co-resume.is-collapsed .cart-promo-wrp,
  .co-resume.is-collapsed .co-resume-values{ display:none !important; }
  .co-resume.is-collapsed .co-resume-toggle-caret{ transform:rotate(-90deg); }
}
.co-resume .card-body{ padding:16px 18px; }
.co-r-item{ border-top:1px solid var(--line); padding:14px 0; display:flex; gap:12px; align-items:flex-start; }
.co-r-item:first-child{ border-top:0; }
.co-r-item-image img{ width:52px; height:52px; object-fit:contain; border:1px solid var(--line); border-radius:var(--r-sm); background:#fff; }
.co-r-item-actions{ padding-right:2px; }
.co-r-item-wrp{ display:flex; gap:12px; width:100%; }
.co-r-item-infos{ flex:1 1 auto; min-width:0; }
.co-r-item-title{ font-weight:700; font-size:13px; color:var(--ink); margin:0 0 8px; line-height:1.35; }
.co-r-item-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.co-r-item-quantity .number-spinner{ height:34px; }
.co-r-item-quantity .ns-btn{ min-width:32px; height:34px; font-size:0; position:relative; }
.co-r-item-quantity .ns-btn::after{ display:none !important; }
.co-r-item-quantity .ns-btn::before{
  content:""; background:none !important; border:0 !important; width:auto !important; height:auto !important;
  position:static !important; transform:none !important; font-size:15px; font-weight:700; color:var(--ink);
}
.co-r-item-quantity .ns-sub::before{ content:"\2212" !important; }
.co-r-item-quantity .ns-add::before{ content:"+" !important; }
.co-r-item-quantity .ns-input{ width:36px; font-size:13px; }
.co-r-item-price{ font-weight:800; color:var(--ink); font-size:13.5px; margin-left:auto; }
.co-r-item .remove-item{ color:var(--ink-mute); flex:0 0 auto; }
.co-r-item .remove-item:hover{ color:var(--danger,#cf3b3b); }
.co-resume-values ul{ list-style:none; margin:0; padding:0; }
.co-resume-values li{ display:flex; justify-content:space-between; padding:5px 0; font-size:13.5px; color:var(--ink-soft); }
.co-resume-values li.v-cart-discount{ color:var(--ok); font-weight:700; }
.co-resume-values li.dest{
  border-top:1px solid var(--line); margin-top:6px; padding-top:12px;
  color:var(--ink); font-weight:800; font-size:18px;
  flex-wrap:wrap;
}
.v-cart-total.show-parc::after, .v-cart-total::after{ content:none !important; }  /* mata "Em até 1x no cartão" */
.co-total-note{
  flex:1 1 100%; text-align:right; font-size:11.5px !important; font-weight:500 !important;
  color:var(--ink-mute) !important; margin-top:3px; letter-spacing:0;
}
.co-r-item-actions{ padding-right:4px; }
.co-r-item-quantity .number-spinner{ transform:scale(.94); transform-origin:left; }
/* cupom discreto — não compete com o CTA */
.co-resume-coupon{ padding:14px 18px !important; }
.co-resume-coupon .form-input-group{ position:relative; display:flex; align-items:stretch; }
.co-resume-coupon .form-input{ flex:1 1 auto; min-width:0; min-height:44px; padding-right:78px; }
.co-resume-coupon .form-label{ left:14px; right:auto; max-width:calc(100% - 92px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.co-resume-coupon .btn-coupon{
  position:absolute; right:0; top:0; height:100%; padding:0 14px;
  background:transparent; color:var(--petza-purple); font-weight:800; font-size:13px; border:0;
}
.co-resume-coupon .btn-coupon:hover{ color:var(--petza-orange); }

/* barra de frete grátis do resumo — sem ícone/loader estourando */
.cart-promo-wrp{ padding:14px 18px !important; background:var(--surface-2); border-bottom:1px solid var(--line); }
.cart-promo-wrp.is-full{ background:#eaf6ef; }
.cart-promo-wrp .cart-promo-bar-wrp, .destfretegratisuf .cart-promo-bar-wrp{ overflow:hidden; border-radius:var(--r-pill); }
.cart-promo-bar-target, .cart-promo-bar-target-img,
.cart-promo-wrp .shipping-quantity-loader, .co-resume .spinner-wrap{ display:none !important; }
.cart-promo-tit{ font-size:12.5px; color:var(--ink-soft); margin-bottom:8px; text-align:center; }
.cart-promo-wrp.is-full .cart-promo-tit{ margin-bottom:0; color:var(--ok); }
.cart-promo-wrp.is-full .cart-promo-bar-wrp, .cart-promo-wrp.is-full .cart-promo-bar{ display:none; }
.cart-promo-bar{ height:8px; background:var(--line); border-radius:var(--r-pill); }
.cart-promo-bar-progress{ display:block; height:100%; background:var(--ok); border-radius:var(--r-pill); }

/* =================================================== MODAIS / ESTADOS === */
.modal .modal-content, .modal-box{ border-radius:var(--r-lg); box-shadow:var(--sh-2); }
.modal-cart-tit, .modal-title{ font-weight:800; color:var(--ink); }
.cat-empty, .empty-state{ color:var(--ink-mute); font-size:14px; }
.btn.btn-loader, .btn-loader{ position:relative; color:transparent!important; }
.btn.btn-loader::after{
  content:""; position:absolute; width:18px; height:18px; top:50%; left:50%; margin:-9px 0 0 -9px;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%;
  animation:petza-spin .7s linear infinite;
}
@keyframes petza-spin{ to{ transform:rotate(360deg); } }

/* ====================================================== MOBILE refino === */
@media (max-width:600px){
  .prod-bl-title{ font-size:13.5px; min-height:2.6em; }
  .prod-bl-price .new{ font-size:18px; }
  .prod-bl-btns .btn{ min-height:40px; }
  .catalogo-titulo-content .title, .home-title{ font-size:15px; padding-left:11px; }
  .header-search-wrp{ max-width:none; }
  #btn-buy{ min-height:50px; }
  .newsletter-content{ padding-block:30px; }
  .footer-content{ padding-block:30px; }
}

/* alvo de toque mínimo no mobile (acessibilidade / usabilidade) */
@media (pointer:coarse){
  .btn, .header-button, .page-side-close, .ns-btn, .filtro-item-link,
  .tabs-nav-item, .footer a, #menu a{ min-height:40px; }
  .number-spinner .ns-btn{ min-width:44px; min-height:44px; }
}

/* ===================================================== INSTITUCIONAL ===== */
.inst-page{ padding-block:clamp(28px,4vw,56px); background:var(--surface); }
.inst-container{ max-width:760px; margin:0 auto; padding-inline:var(--petza-gutter); }
.inst-breadcrumb{ font-size:12.5px; color:var(--ink-mute); margin-bottom:14px; }
.inst-breadcrumb a{ color:var(--ink-soft); }
.inst-breadcrumb span{ margin:0 4px; }
.inst-title{
  font-size:var(--fs-h1); font-weight:800; color:var(--ink);
  letter-spacing:-.01em; margin:0 0 18px;
}
.inst-body{ font-size:15px; line-height:1.7; color:var(--ink); }
.inst-body .inst-lead{ font-size:16px; color:var(--ink-soft); margin:0 0 20px; }
.inst-body h2{ font-size:var(--fs-h3); font-weight:800; color:var(--ink); margin:26px 0 8px; }
.inst-body p{ margin:0 0 14px; }
.inst-body a{ color:var(--petza-purple); }
.inst-body a:hover{ color:var(--petza-orange); }
.inst-contact{ margin:8px 0 20px; display:grid; grid-template-columns:120px 1fr; gap:6px 16px; }
.inst-contact dt{ font-weight:700; color:var(--ink-soft); font-size:13.5px; }
.inst-contact dd{ margin:0; }
.inst-pend-inline, .contact-pending{ color:var(--ink-mute); font-style:italic; }
.inst-pending{
  margin:22px 0 0; padding:14px 16px; border:1px dashed var(--line);
  border-radius:var(--r-sm); background:var(--surface-2);
  font-size:12.5px; color:var(--ink-soft);
}
.inst-pending b{ color:var(--warn); }
.inst-body .btn{ margin-top:8px; }

/* 404 */
.err404-page{ padding-block:clamp(48px,8vw,96px); }
.err404-code{
  font-size:clamp(64px,12vw,120px); font-weight:900; line-height:1;
  color:var(--petza-purple-100); letter-spacing:-.03em; margin-bottom:8px;
}
.err404-page .btn{ margin:6px 6px 0; }

/* ===================================================== PEDIDO / PAGAMENTO === */
/* header enxuto de etapa transacional — reaproveita .co-header do checkout */
.order-header-right{ display:flex; align-items:center; gap:18px; }
.order-header-help{ font-size:13px; font-weight:600; color:var(--ink-soft); }
.order-header-help:hover{ color:var(--petza-purple); }
@media (max-width:480px){ .order-header-help{ display:none; } }
/* footer não compete com a etapa de pagamento: sem bloco de newsletter aqui,
   e respiro generoso antes do rodapé real */
body.order-page-body #footer .newsletter{ display:none; }
body.order-page-body .order-page{ padding-block:clamp(20px,3vw,32px) var(--sp-12); }

.order-page .inst-container{ max-width:1200px; }
.order-loading{ padding:60px 0; color:var(--ink-mute); text-align:center; display:flex; align-items:center; justify-content:center; gap:8px; }
.order-loading svg{ width:18px; height:18px; }

/* cabeçalho da página: breadcrumb + título fixo + badge de status + nº/data */
.order-head{ margin-bottom:var(--sp-6); }
.order-head-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.order-head-row .inst-title{ margin:0; font-size:clamp(24px,3vw,32px); display:flex; align-items:center; gap:10px; }
.order-head-row .inst-title svg{ width:.8em; height:.8em; color:var(--ok); flex:0 0 auto; }
.order-head .inst-lead{ margin:6px 0 0; font-size:14.5px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.order-id-copy{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border:0; background:none; color:var(--ink-mute); cursor:pointer; border-radius:var(--r-xs); flex:0 0 auto; }
.order-id-copy:hover{ color:var(--petza-purple); background:var(--surface-2); }
.order-id-copy svg{ width:13px; height:13px; }
.order-status-badge{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:800;
  text-transform:uppercase; letter-spacing:.04em; padding:5px 12px; border-radius:var(--r-pill);
  white-space:nowrap; line-height:1.4;
}
.order-status-badge svg{ width:12px; height:12px; }
.order-status-badge.tone-warn{ background:var(--warn-bg); color:var(--warn); }
.order-status-badge.tone-ok{ background:var(--ok-bg); color:var(--ok); }
.order-status-badge.tone-err{ background:var(--err-bg); color:var(--err); }
.order-status-badge.tone-neutral{ background:var(--surface-2); color:var(--ink-mute); }
.order-status-badge.tone-brand{ background:var(--petza-purple-050); color:var(--petza-purple); }

/* layout principal: pagamento (foco, ~65%) | resumo+entrega+acompanhamento (~35%) */
.order-layout{ display:grid; grid-template-columns:1.85fr 1fr; gap:var(--sp-6); align-items:start; }
@media (max-width:900px){ .order-layout{ grid-template-columns:1fr; gap:var(--sp-5, 20px); } }
/* colunas da grade podem encolher: o código Pix (linha longa sem espaço) estourava a tela no celular */
.order-main, .order-side{ min-width:0; }
.order-pix-cp code{ word-break:break-all; overflow-wrap:anywhere; }
.order-pix-next{ text-align:left; width:100%; max-width:420px; margin:14px 0 0; padding:12px 16px; border-radius:12px; background:var(--petza-purple-050, #f4f1fb); font-size:14px; }
.order-pix-next ol{ margin:6px 0 0; padding-left:20px; list-style:decimal; }
.order-pix-next li{ margin:3px 0; color:var(--ink-soft); }
.order-side{ display:flex; flex-direction:column; gap:var(--sp-4); }

/* cartão-base — mesmo radius/borda/sombra/heading do hero, pro conjunto parecer uma única família */
.order-card{ border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; background:var(--surface); box-shadow:var(--sh-1); }
.order-card h2{ font-size:17px; font-weight:700; color:var(--ink); margin:0 0 14px; display:flex; align-items:center; gap:8px; }
.order-card h2 svg{ width:16px; height:16px; color:var(--petza-purple); flex:0 0 auto; }
.order-card-kicker{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-mute); margin:0 0 6px; }

/* -------- resumo do pedido (itens com miniatura + totais) -------- */
.order-summary-list{ list-style:none; margin:0 0 var(--sp-4); padding:0; }
.order-summary-item{ display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--line); }
.order-summary-item:first-child{ border-top:0; padding-top:0; }
.order-summary-thumb{
  width:48px; height:48px; border-radius:var(--r-sm); border:1px solid var(--line);
  background:var(--surface-2); flex:0 0 auto; overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.order-summary-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.order-summary-thumb svg{ width:20px; height:20px; color:var(--ink-mute); }
.order-summary-info{ flex:1 1 auto; min-width:0; }
.order-summary-name{ display:block; font-size:13.5px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.order-summary-meta{ font-size:12px; color:var(--ink-mute); }
.order-summary-price{ font-weight:700; font-size:13.5px; white-space:nowrap; flex:0 0 auto; }
.order-totals{ display:grid; grid-template-columns:1fr auto; gap:4px 12px; font-size:13.5px; margin:0; }
.order-totals dt{ color:var(--ink-soft); } .order-totals dd{ margin:0; text-align:right; }
.order-totals .dest{ font-weight:800; color:var(--ink); font-size:17px; border-top:1px solid var(--line); padding-top:10px; margin-top:6px; }
.order-totals small{ color:var(--ink-mute); font-weight:500; }
.order-totals .pix-save{ color:var(--ok); font-weight:700; font-size:12.5px; }

/* -------- acompanhamento (timeline vertical) -------- */
.order-timeline{ list-style:none; margin:0; padding:0; }
.order-timeline li{ position:relative; padding:0 0 20px 26px; font-size:13.5px; color:var(--ink-mute); font-weight:500; }
.order-timeline li:last-child{ padding-bottom:0; }
.order-timeline .tl-dot{
  position:absolute; left:0; top:1px; width:14px; height:14px; border-radius:50%;
  border:2px solid var(--line); background:var(--surface); display:flex; align-items:center; justify-content:center;
}
.order-timeline .tl-dot svg{ width:8px; height:8px; color:#fff; }
.order-timeline li::before{ content:""; position:absolute; left:6px; top:16px; bottom:0; width:2px; background:var(--line); }
.order-timeline li:last-child::before{ display:none; }
.order-timeline li.done{ color:var(--ink); }
.order-timeline li.done .tl-dot{ border-color:var(--ok); background:var(--ok); }
.order-timeline li.done::before{ background:var(--ok); }
.order-timeline li.current{ color:var(--ink); font-weight:800; }
.order-timeline li.current .tl-dot{
  left:-2px; top:-2px; width:18px; height:18px; border-color:var(--petza-purple); background:var(--petza-purple);
  box-shadow:0 0 0 4px var(--petza-purple-050);
}
.order-timeline li.upcoming{ opacity:.65; }

/* -------- entrega + pagamento -------- */
.order-delivery p{ margin:0 0 14px; font-size:13.5px; color:var(--ink); line-height:1.55; }
.order-delivery p:last-child{ margin-bottom:0; }
.order-delivery .order-card-kicker:not(:first-of-type){ margin-top:2px; }
.order-eta{ font-size:12.5px; color:var(--ink-soft); margin-top:4px !important; }
.order-eta.muted{ color:var(--ink-mute); }

/* -------- hero da coluna principal: cartão do pagamento / status -------- */
.order-hero{ border:1px solid var(--line); background:var(--surface); box-shadow:var(--sh-1); border-radius:var(--r-lg); padding:clamp(24px,4vw,40px); }
.order-hero-icon{ width:64px; height:64px; margin:0 auto var(--sp-4); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.order-hero-icon svg{ width:30px; height:30px; }
.order-hero-icon.tone-ok{ background:var(--ok-bg); color:var(--ok); }
.order-hero-icon.tone-err{ background:var(--err-bg); color:var(--err); }
.order-hero-icon.tone-neutral{ background:var(--surface-2); color:var(--ink-mute); }
.order-hero-icon.tone-brand{ background:var(--petza-purple-050); color:var(--petza-purple); }
.order-hero-icon.tone-warn{ background:var(--warn-bg); color:var(--warn); }
.order-hero-status{ text-align:center; }
.order-hero-status h2{ font-size:var(--fs-h2); font-weight:800; color:var(--ink); margin:0 0 8px; }
.order-hero-status p{ color:var(--ink-soft); margin:0 auto; font-size:14.5px; max-width:38ch; }
.order-hero-status .btn{ margin-top:var(--sp-6); }

/* ===== card do Pix — uma coluna só, igual em qualquer tela ===== */
.order-hero.is-pix{ display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; }

.order-pix-title{ font-size:clamp(22px,4vw,26px); font-weight:800; color:var(--ink); margin:6px 0 0; }
.order-pix-sub{ font-size:14.5px; color:var(--ink-soft); margin:0; max-width:40ch; }

.order-pix-timer{
  display:inline-block; background:var(--surface-2); color:var(--ink);
  font-size:14px; font-weight:600; padding:10px 20px; border-radius:var(--r-pill); margin:2px 0;
}
.order-pix-timer-value{ color:var(--petza-orange-600); font-weight:800; }

.order-pix-instructions{ font-size:14.5px; color:var(--ink); margin:8px 0 0; max-width:36ch; }

.order-pix-qr-wrap{ margin-top:4px; }
.order-pix-qr, .order-pix-qr-empty{ width:min(260px,72vw); height:min(260px,72vw); }
.order-pix-qr{ image-rendering:pixelated; background:#fff; border:1px solid var(--line); border-radius:var(--r-sm); }
.order-pix-qr-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  color:var(--ink-mute); background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:16px;
}
.order-pix-qr-empty svg{ width:32px; height:32px; }
.order-pix-qr-empty span{ font-size:12px; line-height:1.4; }

.order-pix-caption{ font-size:12.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:var(--ink); margin:0; }

.order-pix-value{ font-size:17px; color:var(--ink); margin:4px 0 0; }
.order-pix-value b{ color:var(--petza-purple); font-weight:800; font-size:19px; }

.order-pix-cp-instructions{ font-size:14px; color:var(--ink-soft); margin:8px 0 0; max-width:48ch; }
.order-pix-cp-instructions b{ color:var(--ink); }

.order-pix-cp-wrap{ width:100%; max-width:420px; margin-top:4px; }
.order-pix-cp{
  width:100%; max-height:110px; overflow-y:auto; text-align:left;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:12px 14px; margin-bottom:10px; box-sizing:border-box;
}
.order-pix-cp code{
  display:block; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px; line-height:1.6; color:var(--ink); word-break:break-all; white-space:pre-wrap;
}
.order-pix-copy-btn{
  width:100%; height:48px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; background:var(--petza-purple); color:#fff; border-radius:var(--r-sm); font-weight:700;
  font-size:14.5px; cursor:pointer; transition:background-color .18s var(--ease);
}
.order-pix-copy-btn:hover{ background:var(--petza-purple-deep); }
.order-pix-copy-btn svg{ width:16px; height:16px; }
.order-pix-copy-btn.is-copied{ background:var(--ok); }
.order-pix-copy-btn.is-error{ background:var(--err); }

.order-autoconfirm{
  display:flex; align-items:flex-start; gap:10px; width:100%; max-width:420px; text-align:left;
  padding:14px 16px; background:var(--ok-bg); border-radius:var(--r-sm); margin-top:8px;
}
.order-autoconfirm-dot{
  width:8px; height:8px; margin-top:6px; border-radius:50%; background:var(--ok); flex:0 0 auto;
  animation:orderPixPulse 1.6s ease-in-out infinite;
}
@keyframes orderPixPulse{ 0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(28,138,78,.35); } 50%{ opacity:.85; box-shadow:0 0 0 5px rgba(28,138,78,0); } }
.order-autoconfirm-title{ margin:0; font-size:13px; font-weight:700; color:var(--ink); }
.order-autoconfirm-text{ margin:2px 0 0; font-size:12.5px; color:var(--ink-soft); line-height:1.4; }

/* linha de confiança — só afirmações verdadeiras, sem selo/certificação inventada */
.order-trust{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; margin:4px 0 0; padding:0; width:100%; }
.order-trust li{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-mute); }
.order-trust svg{ width:13px; height:13px; color:var(--ok); flex:0 0 auto; }

.order-support{
  margin-top:var(--sp-6); padding:20px; text-align:center;
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface-2);
}
.order-support p{ margin:0 0 6px; font-size:13.5px; color:var(--ink-soft); }
.order-support a{ font-weight:700; color:var(--petza-purple); font-size:13.5px; }
.order-support a:hover{ color:var(--petza-orange); }

/* estados de erro/consulta reaproveitam o mesmo cartão do hero — nenhuma tela
   de erro deve parecer "quebrada" ou fora do design system da página */
.order-hero-status form.order-lookup{ justify-content:center; margin:var(--sp-6) auto 0; }
/* lookup form (rastrear + /pedido) */
.order-lookup{ display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 0; max-width:520px; }
.order-lookup input{ flex:1 1 180px; min-height:46px; border:1px solid var(--line); border-radius:var(--r-sm); padding:0 14px; font-size:14px; }
.order-lookup input.is-invalid{ border-color:var(--err); }
.order-lookup button{ flex:0 0 auto; min-height:46px; }

/* ============================================== LOADER (checkout -> Pix) ===
   Tela "Por favor, aguarde..." entre o clique em pagar e a página do Pix —
   reaproveita o #loader do tema (spinner .loader já existente), só troca o
   texto e a cor pra combinar com a marca. */
#loader-text b{ display:block; font-size:16px; font-weight:800; color:var(--ink); margin-top:var(--sp-4); }
#loader-text small{ display:block; font-size:13px; font-weight:400; color:var(--ink-mute); line-height:1.5; margin-top:6px; }
#loader .loader{ color:var(--petza-purple); }

/* ===== Página do Pix v2 (out/2026): pagar primeiro, resumo ao lado ===== */
.px{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:24px; align-items:start; margin-top:8px; }
.px-lado{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px; min-width:0; }
.px-lado .order-card{ min-width:0; padding:20px; }
.px-lado .order-summary-name{ overflow-wrap:anywhere; }
.px-principal{ min-width:0; }
@media (max-width:900px){ .px{ grid-template-columns:minmax(0,1fr); gap:16px; } }
.px-pagar,.px-ok,.px-fim{ background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--sh-1); padding:clamp(18px,3.4vw,32px); }
.px-kicker{ display:flex; align-items:center; gap:4px; margin:0 0 4px; font-size:13px; font-weight:700; color:var(--ink-mute); }
.px-tit{ margin:0; font-size:clamp(24px,4.6vw,32px); line-height:1.15; color:var(--ink); font-weight:900; letter-spacing:-.01em; }
.px-sub{ margin:6px 0 0; color:var(--ink-soft); font-size:15px; }
.px-valor{ display:grid; gap:2px; margin:18px 0 0; padding:16px 18px; border-radius:16px; background:var(--petza-purple-050); }
.px-valor span{ font-size:13px; font-weight:700; color:var(--petza-purple); }
.px-valor b{ font-size:clamp(30px,7vw,40px); line-height:1.05; color:var(--petza-purple-deep, #2e1752); font-weight:900; }
.px-valor small{ font-size:14px; font-weight:700; color:var(--ok); }
.px-vence{ display:flex; align-items:center; gap:8px; margin:12px 0 0; font-size:15px; color:var(--ink-soft); }
.px-vence svg{ width:18px; height:18px; color:var(--petza-orange); flex:none; }
.px-vence b{ font-variant-numeric:tabular-nums; color:var(--ink); font-size:17px; }
.px-metodos{ display:grid; gap:14px; margin-top:18px; }
.px-bloco-tit{ margin:0 0 8px; font-weight:800; color:var(--ink); }
.px-codigo{ border:1.5px dashed #cfc6df; border-radius:12px; background:var(--surface-2); padding:10px 12px; max-height:64px; overflow:hidden; }
.px-codigo code{ display:block; font-size:12px; line-height:1.45; color:var(--ink-soft); word-break:break-all; font-family:ui-monospace,Consolas,monospace; user-select:all; }
.px-bt,.px-bt-2{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:54px; padding:0 22px; border-radius:999px; font:inherit; font-weight:800; font-size:16px; cursor:pointer; text-decoration:none !important; text-align:center; }
.px-bt{ width:100%; margin-top:12px; border:0; background:var(--petza-orange); color:#fff !important; }
.px-bt:hover{ background:var(--petza-orange-600); }
.px-bt svg{ width:20px; height:20px; flex:none; }
.px-bt.is-copied{ background:var(--ok); }
.px-bt.is-error{ background:var(--err); }
.px-bt-2{ border:2px solid var(--petza-purple); background:#fff; color:var(--petza-purple) !important; }
.px-bt-2:hover{ background:var(--petza-purple-050); }
.px-bt-2:disabled{ opacity:.6; cursor:progress; }
.px-passos{ margin:14px 0 0; padding:0; list-style:none; counter-reset:px; display:grid; gap:8px; }
.px-passos li{ counter-increment:px; position:relative; padding:2px 0 0 34px; min-height:24px; font-size:14.5px; color:var(--ink-soft); }
.px-passos li::before{ content:counter(px); position:absolute; left:0; top:0; width:24px; height:24px; border-radius:50%; background:var(--petza-purple); color:#fff; font-size:13px; font-weight:800; display:grid; place-items:center; }
.px-qr{ border:1px solid var(--line); border-radius:14px; }
.px-qr summary{ display:flex; align-items:center; gap:10px; padding:14px 16px; font-weight:800; color:var(--petza-purple); cursor:pointer; list-style:none; }
.px-qr summary::-webkit-details-marker{ display:none; }
.px-qr summary svg{ width:20px; height:20px; }
.px-qr summary::after{ content:"+"; margin-left:auto; font-size:20px; }
.px-qr[open] summary::after{ content:"–"; }
.px-qr-corpo{ display:grid; justify-items:center; gap:8px; padding:0 16px 16px; text-align:center; font-size:14px; color:var(--ink-soft); }
.px-qr-corpo p{ margin:0; }
.px-qr-img{ width:min(220px,100%); height:auto; image-rendering:pixelated; border-radius:8px; }
.px-status{ display:flex; align-items:center; gap:12px; margin-top:18px; padding:14px 16px; border-radius:14px; background:var(--warn-bg); }
.px-status b{ display:block; color:var(--ink); }
.px-status small{ display:block; color:var(--ink-soft); font-size:13px; }
.px-status .px-bt-2{ margin-left:auto; min-height:44px; padding:0 18px; font-size:15px; flex:none; }
.px-pulso{ width:12px; height:12px; border-radius:50%; background:var(--petza-orange); flex:none; animation:px-pulso 1.6s ease-out infinite; }
@keyframes px-pulso{ 0%{ box-shadow:0 0 0 0 rgba(245,119,12,.55); } 100%{ box-shadow:0 0 0 12px rgba(245,119,12,0); } }
@media (prefers-reduced-motion:reduce){ .px-pulso{ animation:none; } }
.px-msg{ margin:10px 0 0; min-height:1px; font-size:14px; color:var(--ink-soft); }
.px-msg:empty{ display:none; }
.px-confianca{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px 18px; font-size:13px; color:var(--ink-mute); }
.px-confianca li{ display:flex; align-items:center; gap:6px; }
.px-confianca svg{ width:15px; height:15px; color:var(--ok); }
@media (max-width:480px){ .px-status{ flex-wrap:wrap; } .px-status .px-bt-2{ width:100%; margin-left:0; } }
/* computador: QR em destaque ao lado do copia e cola */
@media (min-width:900px){
  .px-metodos{ grid-template-columns:minmax(0,1fr) 250px; align-items:start; }
  .px-qr{ order:-1; }
  .px-qr summary{ pointer-events:none; }
  .px-qr summary::after{ content:none; }
}
/* aprovado */
.px-ok-ico,.px-fim-ico{ width:64px; height:64px; border-radius:50%; display:grid; place-items:center; margin-bottom:14px; }
.px-ok-ico{ background:var(--ok-bg); color:var(--ok); }
.px-fim-ico{ background:var(--surface-2); color:var(--ink-mute); }
.px-ok-ico svg,.px-fim-ico svg{ width:32px; height:32px; }
.px-proximos{ list-style:none; margin:20px 0 0; padding:0; display:grid; gap:0; }
.px-proximos li{ position:relative; padding:0 0 16px 34px; }
.px-proximos li::before{ content:""; position:absolute; left:0; top:2px; width:18px; height:18px; border-radius:50%; border:2px solid #cfc6df; background:#fff; }
.px-proximos li::after{ content:""; position:absolute; left:10px; top:24px; bottom:2px; width:2px; background:#e7e3ef; }
.px-proximos li:last-child::after{ display:none; }
.px-proximos li.is-feito::before{ background:var(--ok); border-color:var(--ok); }
.px-proximos b{ display:block; color:var(--ink); }
.px-proximos small{ display:block; color:var(--ink-soft); font-size:14px; }
.px-acoes{ display:grid; gap:10px; margin-top:16px; }
.px-acoes .px-bt{ margin-top:0; }
@media (min-width:600px){ .px-acoes{ grid-template-columns:1fr 1fr; } }
.px-fim .px-acoes{ grid-template-columns:1fr; }
.px-nota{ margin:10px 0 0; font-size:13.5px; color:var(--ink-mute); }
.px-encerrado .px-lado .order-delivery{ display:none; }
.px-vence small{ font-size:13px; color:var(--ink-mute); }