/* =======================================================
   BASE / VARIÁVEIS
======================================================= */
*{ font-family:"Bree Serif", serif; font-style:normal; }

:root{
  /* gerais */
  --background-primary:#fff;
  --color-primary:#EF292B;
  --color-primary-hover:#d81b42;

  --text-color-primary:#000;
  --text-color-secondary:#505153;
  --text-color-terciary:#878384;

  --color-err:#cf2f2f;
  --color-warning:#dd8500;
  --color-success:#027d02;

  --light-gray:#F8F8F8;
  --white:#ffffff;

  --bc-bg:#0f0f10;
  --bc-panel:rgba(22,22,24,.75);
  --bc-border:rgba(255,255,255,.06);
  --bc-text:#e9e9ea;
  --bc-muted:#b8b8bc;
  --bc-red:#e11d48;         /* vermelho Boi&Cia */
  --bc-green:#22c55e;

  /* específicas do menu */
  --menu-bg: var(--bc-panel);
  --menu-border: var(--bc-border);
  --menu-ink: var(--bc-text);
  --color-primary-dark: var(--bc-red);
}

/* =======================================================
   DOCUMENTO / RESET / CROMO
======================================================= */
body{
  position:relative;
  --scrollY:0px;
  color:var(--bc-text);
  padding:0; margin:0;
  overflow-x:hidden;
}
a{ text-decoration:none; }
textarea:focus, input:focus, select:focus{ box-shadow:0 0 0 0; border:0 none; outline:0; }
button{ cursor:pointer; }
section{ scroll-margin-top:100px; } /* altura do seu nav */
.container-width{
  display:flex; flex-direction:row; align-items:center; justify-content:space-between;
  width:100%; max-width:1200px;
}
::selection{ color:var(--color-primary); }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background-color:#000; }
::-webkit-scrollbar-thumb{ background-color:var(--color-primary); border-radius:.3rem; }
.textDestaq{ color:var(--color-primary); }

/* =======================================================
   BACKGROUND PARALLAX
======================================================= */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,.98)),
    url(../img/backgroundOurMeat.webp);
  background-repeat:no-repeat, repeat;
  background-position:center top, center calc(var(--scrollY) / -4);
  background-size:100% 100%, 600px auto;
  filter:grayscale(100%);
  will-change:background-position;
}

/* =======================================================
   ANIMAÇÕES / LOADERS
======================================================= */
.loader{
  width:18px; aspect-ratio:1; border-radius:50%;
  border:4px solid #fff;
  animation:l20-1 .8s infinite linear alternate, l20-2 1.6s infinite linear;
}
@keyframes l20-1{
  0%    {clip-path:polygon(50% 50%,0 0,50% 0,50% 0,50% 0,50% 0,50% 0)}
  12.5% {clip-path:polygon(50% 50%,0 0,50% 0,100% 0,100% 0,100% 0,100% 0)}
  25%   {clip-path:polygon(50% 50%,0 0,50% 0,100% 0,100% 100%,100% 100%,100% 100%)}
  50%   {clip-path:polygon(50% 50%,0 0,50% 0,100% 0,100% 100%,50% 100%,0 100%)}
  62.5% {clip-path:polygon(50% 50%,100% 0,100% 0,100% 0,100% 100%,50% 100%,0 100%)}
  75%   {clip-path:polygon(50% 50%,100% 100%,100% 100%,100% 100%,100% 100%,50% 100%,0 100%)}
  100%  {clip-path:polygon(50% 50%,50% 100%,50% 100%,50% 100%,50% 100%,50% 100%,0 100%)}
}
@keyframes l20-2{
  0%{transform:scaleY(1) rotate(0deg)}
  49.99%{transform:scaleY(1) rotate(135deg)}
  50%{transform:scaleY(-1) rotate(0deg)}
  100%{transform:scaleY(-1) rotate(-135deg)}
}
@keyframes wobble{
  0%,100%{ transform:translateY(0) rotate(0); transform-origin:50% 50%; }
  15%{ transform:translateY(-30px) rotate(6deg); }
  30%{ transform:translateY(15px) rotate(-6deg); }
  45%{ transform:translateY(-15px) rotate(3.6deg); }
  60%{ transform:translateY(9px) rotate(-2.4deg); }
  75%{ transform:translateY(-6px) rotate(1.2deg); }
}
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes cat-shimmer{ 100%{ transform:translateX(100%);} }
@keyframes es-pop{ from{ transform:scale(.9); opacity:0 } to{ transform:scale(1); opacity:1 } }

/* =======================================================
   MODAL MENU — VERSÃO ÚNICA (com compat legado)
======================================================= */
html.modal-open, body.modal-open,
html.no-scroll,  body.no-scroll, main.no-scroll{
  overflow: hidden;
  height: 100%;
  overscroll-behavior: contain; /* evita bounce no mobile */
}

/* container do modal */
.modalMenu{
  position: fixed; inset: 0; z-index: 1100;
  display: grid; grid-template-columns: 1fr;
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
}
/* aberto (compat: .is-open e .active do legado) */
.modalMenu.is-open,
.modalMenu.active{ opacity: 1; pointer-events: auto; }

/* regras gerais do conteúdo legado (não atrapalham o novo) */
.modalMenu a{ color:#fff; text-decoration:none; }
.modalMenu > button{
  background:transparent; border:none; width:98%; height:3rem; display:flex; align-items:center;
  text-transform:uppercase; font-size:1.6rem; color:#fff;
}

/* backdrop */
.modalMenu__backdrop{
  background: rgba(2,6,23,.45);
  backdrop-filter: blur(6px);
}

/* painel deslizante */
.modalMenu__panel{
  position: absolute; top: 0; right: 0;
  height: 100%; width: min(340px, 86vw);
  background: var(--menu-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-left: 1px solid var(--menu-border);
  box-shadow: -14px 0 38px rgba(2,6,23,.16);
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
  display: grid; grid-template-rows: auto 1fr auto;
  color: var(--menu-ink);
}
/* aberto */
.modalMenu.is-open .modalMenu__panel,
.modalMenu.active  .modalMenu__panel{ transform: translateX(0); }

/* faixa vermelha decorativa */
.modalMenu__panel::after{
  content:""; position:absolute; top:0; right:0; width:6px; height:42%;
  background: var(--bc-red); border-radius:0 0 0 6px; opacity:.95;
  z-index:0; pointer-events:none;
}

/* header / ações / cta acima da faixa decorativa */
.modalMenu__header, .modalMenu__actions, .modalMenu__cta{
  position:relative; z-index:1;
}

/* header */
.modalMenu__header{
  display: grid;
  grid-template-columns: 1fr auto;       /* título | fechar */
  grid-auto-rows: min-content;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--menu-border);
  font: 700 1rem/1 var(--font-heading, Poppins, system-ui);
  text-transform: uppercase; letter-spacing: .4px;
  color: var(--menu-ink);
}
.modalMenu__close{ justify-self: end; }

/* SEARCH no header (opção A) */
.menuSearchBar{
  grid-column: 1 / -1;
  margin-top: 10px;

  display: grid;
  grid-template-columns: 18px 1fr auto; /* ícone | input | botão */
  align-items: center;
  gap: 8px;

  border: 1px solid var(--menu-border);
  border-radius: 12px;
  padding: 8px 10px;
  background: rgba(255,255,255,.03);
}
.menuSearchBar svg{
  width:18px; height:18px; stroke: var(--bc-muted);
}
.menuSearchBar input{
  width: 100%;
  background: transparent;
  color: var(--menu-ink);
  border: 0; outline: 0;
  font: 600 .95rem/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}
.menuSearchBar input::placeholder{ color: var(--bc-muted); }
.menuSearchBar:focus-within{
  border-color: color-mix(in srgb, var(--bc-red) 55%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bc-red) 25%, transparent);
}
.menuSearchBtn{
  height: 36px; padding: 0 12px;
  border: 0; border-radius: 10px;
  font-weight: 800; color: #fff;
  background: var(--bc-red);
  box-shadow: 0 6px 14px rgba(225,29,72,.25);
}
.menuSearchBtn:hover{ filter: brightness(1.06); transform: translateY(-1px); }

/* botão fechar (Lucide) */
.modalMenu__close{
  display:inline-grid; place-items:center;
  width:40px; height:40px; border-radius:10px;
  color: var(--bc-text); background: transparent; border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.modalMenu__close:hover{ background: rgba(255,255,255,.06); border-color: var(--menu-border); transform: translateY(-1px); }
.modalMenu__close:focus-visible{ outline: 2px solid color-mix(in srgb, var(--bc-red) 65%, #fff 35%); outline-offset: 2px; }

/* área de ações */
.modalMenu__actions{
  padding: 14px 16px;
  display: grid; gap: 12px;
  align-content: start;
}
.modalMenu__actions .in-modal{ display:grid; gap:12px; }

/* botões grandes */
.modalMenu__actions > .btnProfile,
.modalMenu__actions > .btnSearch,
.modalMenu__actions .boxCart .btnCart,
.modalMenu__actions .in-modal .btnProfile,
.modalMenu__actions .in-modal .btnSearch,
.modalMenu__actions .in-modal .btnCart{
  display:flex; align-items:center; justify-content:flex-start; gap:12px;
  width:100%; height:56px; padding:0 14px;
  border:1px solid var(--menu-border); border-radius:14px;
  background: rgba(255,255,255,.03); color: var(--menu-ink);
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.modalMenu__actions .btnProfile:hover,
.modalMenu__actions .btnSearch:hover,
.modalMenu__actions .btnCart:hover{
  background: rgba(255,255,255,.06); transform: translateY(-1px);
}

/* ===== RÓTULOS DOS BOTÕES (com fallback sem mexer no HTML) ==== */
.modalMenu__actions .btnProfile[data-label]::after,
.modalMenu__actions .btnSearch[data-label]::after,
.modalMenu__actions .btnCart[data-label]::after{
  content: attr(data-label);
  font-weight: 800; letter-spacing: .2px; margin-left: 2px;
}

/* fallback se não houver data-label no HTML/JS */
.modalMenu__actions .btnProfile:not([data-label])::after{
  content:"Minha conta"; font-weight:800; letter-spacing:.2px; margin-left:2px;
}
.modalMenu__actions .btnCart:not([data-label])::after{
  content:"Carrinho"; font-weight:800; letter-spacing:.2px; margin-left:2px;
}

/* ícones (Lucide) */
.modalMenu__close svg,
.modalMenu__actions .btnProfile svg,
.modalMenu__actions .btnSearch  svg,
.modalMenu__actions .btnCart    svg,
.modalMenu__whats               svg{
  width:22px; height:22px; stroke: currentColor; flex:0 0 auto;
}
.modalMenu__whats svg{ width:18px; height:18px; }

/* badge do carrinho */
.modalMenu__actions .boxCart{ position: relative; }
/* dá espaço pro badge sem sobrepor o texto */
.modalMenu__actions .boxCart .btnCart{ padding-right: 56px; }

.modalMenu__actions .boxCart .nCart{
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  min-width:26px; height:26px; padding:0 8px;
  display:grid; place-items:center;
  border-radius:999px; background: var(--bc-red); color:#fff;
  font: 800 .78rem/1 system-ui;
  box-shadow: 0 4px 10px rgba(225,29,72,.28);
  pointer-events:none; /* não bloqueia clique no botão */
}

/* busca compacta antiga (mantida p/ compat) */
.modalMenu__actions .in-modal .headerSearch{
  width: 100%;
  display: grid; grid-auto-flow: column; align-items: center; gap: 8px;
  border: 1px solid var(--menu-border); border-radius: 12px; padding: 8px;
  background: rgba(255,255,255,.03);
}
.modalMenu__actions .in-modal .headerSearchInput{
  width: 100%; background: transparent; color: var(--menu-ink); border: 0; outline: 0;
}
.modalMenu__actions .in-modal .headerSearchClear{ color: var(--menu-ink); }

/* CTA inferior */
.modalMenu__cta{
  padding: 14px 16px 18px;
  border-top: 1px solid var(--menu-border);
  display: grid; gap: 10px;
}
.modalMenu__whats{
  display:flex; align-items:center; justify-content:center; gap:10px;
  height:48px; border-radius:12px; font-weight:900; letter-spacing:.3px;
  background: var(--bc-red); color:#fff; border:2px solid var(--bc-red);
  box-shadow: 0 10px 18px rgba(225,29,72,.25);
}
.modalMenu__whats:hover{ filter:brightness(1.06); transform:translateY(-1px); }

/* botão do header animado quando aberto (usa SVG) */
.btnMenu[aria-expanded="true"] svg{ transform: rotate(90deg); transition: transform .2s ease; }

/* menu full-screen em telas pequenas */
@media (max-width: 600px){
  .modalMenu__panel{
    position: absolute; inset: 0;
    width: 100vw; height: 100dvh;
    border-radius: 0; border-left: 0; box-shadow: none;
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.2,.8,.2,1);
  }
  .modalMenu.is-open .modalMenu__panel,
  .modalMenu.active  .modalMenu__panel{ transform: translateY(0); }

  .modalMenu__header{ padding: 18px; }
  .modalMenu__actions{ padding: 16px; gap: 12px; }
  .modalMenu__cta{ padding: 16px; }
}

/* =======================================================
   BANNER
======================================================= */
.bannerMain{
  margin:8rem auto 1rem; width:100vw; height:400px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
}
/* evita scroll horizontal */
html, body{ max-width:100%; overflow-x:hidden; }
.bannerMain .slide{
  max-width:1350px; width:100%; height:100%;
  position:relative; display:flex; align-items:center; justify-content:center;
}
.bannerMain .slide-item img{
  max-width:1200px; width:90dvw; height:100%; min-height:initial; max-height:360px;
  object-fit:fill; border-radius:.6rem;
}
@media (max-width: 640px){
  .bannerMain{ width:100dvw; height:auto; }
  .bannerMain .slide{ width:100dvw; }
  .bannerMain .slide-item img{ width:100dvw; height:auto; max-height:none; border-radius:0; object-fit:cover; }
  .bannerMain .slide .slide-prev,
  .bannerMain .slide .slide-next{ display:none !important; }
}
.bannerMain .slide .slide-prev,
.bannerMain .slide .slide-next{
  display:flex; align-items:center; justify-content:center;
  background:var(--white); color:var(--color-primary);
  border-radius:50%; width:2rem; height:2rem;
}
.bannerMain .slide .slide-prev{ left:1.2rem; }
.bannerMain .slide .slide-next{ right:1.2rem; }
.bannerMain .slide .slide-prev svg,
.bannerMain .slide .slide-next svg{ width:32px; }
.bannerMain .slide .slide-dots{ bottom:0rem; transition:all .3s ease-in-out; }
.bannerMain .slide-dots .btn-dots.active{ background:var(--color-primary); }

/* =======================================================
   MAIN / CATEGORIES
======================================================= */
.main{ margin:.3rem auto; width:90vw; display:flex; flex-direction:column; box-sizing:border-box; }
.main .categories{
  background:var(--light-gray);
  display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr));
  gap:16px; max-width:1200px; width:100%;
  border-radius:.6rem; padding:.6rem 0; margin:.6rem auto;
}
/* Mobile: transforma em carrossel horizontal com swipe */
@media (max-width: 640px){
  .main{ width:90vw; }
  .main .categories{
    display:flex; gap:12px; overflow-x:auto; padding:.8rem; scroll-snap-type:x mandatory; width:100%; box-sizing:border-box; margin:.6rem auto;
  }
  /* Mantém largura padrão alinhada à grid (sem ultrapassar) */
  .main .categories .box-category{ flex:0 0 48%; max-width:48%; scroll-snap-align:center; background:#fff; border-radius:12px; padding:10px 6px; }
  @media (max-width:480px){ .main .categories .box-category{ flex-basis:48%; max-width:48%; } }
  /* Esconde trilho da barra de rolagem no mobile */
  .main .categories::-webkit-scrollbar{ height:0; width:0; background:transparent; }
  .main .categories{ scrollbar-width:none; }
}
.main .categories .box-category{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  flex:1; color:#111; transition:all .25s ease; background:transparent; border:none;
}
.box-category .icon-fallback{
  width:64px; height:64px; border-radius:50%;
  display:grid; place-items:center; font-weight:700; font-size:24px;
  background:#1d1e22; color:#fff; border:1px solid var(--bc-border);
}
.main .categories .box-category:hover{ color:#e11d48; transform:scale(1.01); cursor:pointer; }
.main .categories .box-category span{ color:inherit; }
@media (max-width:900px){ .main .categories{ /* handled by flex carousel under 640px */ } }
@media (max-width:600px){ .main .categories{ /* handled by flex carousel */ } }

/* =======================================================
   CATEGORY SKELETON
======================================================= */
.cat-skel{ display:flex; align-items:center; justify-content:space-around; gap:16px; }
.cat-skel-item{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.cat-skel-icon, .cat-skel-label{ position:relative; overflow:hidden; background:#eee; border-radius:12px; }
.cat-skel-icon{ width:88px; height:88px; border-radius:999px; }
.cat-skel-label{ width:70%; height:14px; border-radius:8px; }
.cat-skel-icon::after, .cat-skel-label::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation:cat-shimmer 1.2s infinite;
}

/* =======================================================
   PRODUCTS GRID + LOADING
======================================================= */
.main .products{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:.6rem; max-width:1200px; width:100%; margin:.6rem auto; padding:.6rem 0; border-radius:.6rem;
  align-items:stretch; justify-items:stretch;
}
.cardProduct.is-loading .imgSkeleton{ width:100%; height:160px; background:#eee; border-radius:.5rem; }
.cardProduct.is-loading .sk{ display:inline-block; height:14px; background:#eee; border-radius:6px; }
.cardProduct.is-loading .product-name.sk{ width:60%; height:16px; }
.cardProduct.is-loading .product-weight.sk{ width:40%; margin-top:8px; }
.cardProduct.is-loading .product-price.sk{ width:80px; height:18px; margin-top:10px; }
.cardProduct.is-loading .product-price-promo.sk{ width:70px; height:18px; margin-left:8px; }
.products-empty{ padding:2rem; text-align:center; color:#6b7280; }
@media (max-width:900px){ .main .products{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .main .products{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:300px){ .main .products{ grid-template-columns:1fr;} }

/* =======================================================
   PAGINAÇÃO
======================================================= */
.products-pagination{
  display:flex; align-items:center; justify-content:center; gap:.75rem;
  margin-top:1rem; padding:.5rem .75rem; border-radius:12px;
}
.products-pagination .page-info{ color:var(--bc-text); opacity:.9; font-weight:700; }
.products-pagination .btnPage{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.55rem .8rem; border-radius:10px; border:1px solid var(--bc-border);
  background:#fff; color:#111; font-weight:700; line-height:1;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.products-pagination .btnPage i{ width:18px; height:18px; }
.products-pagination .btnPage:hover:not([disabled]){ transform:translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,.15); background:#f8fafc; }
.products-pagination .btnPage[disabled]{ opacity:.5; cursor:not-allowed; box-shadow:none; }
@media (max-width:560px){
  .products-pagination{ gap:.5rem; }
  .products-pagination .page-info{ font-weight:600; font-size:.95rem; }
  .products-pagination .btnPage span{ font-size:.95rem; }
}

/* =======================================================
   PRODUCT CARD
======================================================= */
.cardProduct{
  background:var(--light-gray);
  display:flex; flex-direction:column; align-items:center; justify-content: space-between;
  border:1px solid #000; border-radius:.6rem; position:relative; overflow:hidden;
}
.cardProduct .cardProduct-header,
.cardProduct .cardProduct-bottom{
  display:flex; flex-direction:row; align-items:center; justify-content:center;
  width:100%; position:relative; overflow:hidden;
  border-radius:.6rem;
}
.cardProduct .cardProduct-header img{
  width:100%; border-radius:.6rem; display:block; transition:transform .3s ease;
}
.cardProduct .shine{
  position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none;
  background: radial-gradient(circle at var(--x,50%) var(--y,50%), rgba(255,255,255,.4), transparent 60%);
  opacity:0; transition:opacity .3s ease; border-radius:.6rem;
}
.cardProduct:hover img{ transform:scale(1.05); }
.cardProduct:hover .shine{ opacity:1; }

.cardProduct .cardProduct-body{
  width:100%; padding:.6rem .6rem .4rem; box-sizing:border-box;
  min-height:auto; max-height:none; gap:.25rem;
  display:flex; flex-direction:column; justify-content:space-between; position: relative; z-index: 1;
}
.cardProduct .cardProduct-body div{ display:flex; flex-direction:column; }
.cardProduct .cardProduct-body span.product-name,
.cardProduct .cardProduct-body .product-name{ font-size:20px; font-weight:300; color:var(--text-color-primary); }
.cardProduct .cardProduct-body span.product-weight{ font-size:16px; font-weight:100; color:var(--text-color-primary); }
.cardProduct .cardProduct-body span.product-price{ font-size:20px; font-weight:100; text-decoration:line-through; color:var(--text-color-primary); }
.cardProduct .cardProduct-body span.product-price-promo{ font-size:24px; font-weight:600; color:var(--color-primary); }

.cardProduct .cardProduct-bottom{ padding:.75rem; box-sizing:border-box; position: relative; z-index:auto; margin-top:.35rem; }
.cardProduct .cardProduct-bottom .btnAddCart{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  width:100%; height:46px; background:var(--color-primary); color:var(--white);
  border-radius:.6rem; border:none; cursor:pointer;
  transition:background .25s ease, transform .15s ease, box-shadow .25s ease;
}
.cardProduct .cardProduct-bottom .btnAddCart:hover{
  background:var(--color-primary-hover); transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.btnAddCart.is-loading{ pointer-events:none; opacity:.8; }
.btnAddCart .loader{
  width:18px; height:18px; border:2px solid currentColor; border-right-color:transparent;
  border-radius:50%; display:inline-block; animation:spin .8s linear infinite;
}

/* Price step + Min info */
.cardProduct .product-price-step{ font-size:12px; line-height:1.2; color:#6b7280; margin-top:2px; }
.cardProduct .product-min{
  display:flex; align-items:center; gap:8px; margin-top:6px;
  font-size:13px; line-height:1.2; color:var(--text-color-primary); opacity:1; flex-wrap:wrap;
}
.cardProduct .product-min .badge-min{
  display:inline-flex; align-items:center; padding:.25rem .5rem; border-radius:999px;
  background:#fee2e2; color:#7f1d1d; border:1px solid #fecaca; font-weight:700; white-space:nowrap; flex:0 0 auto;
}
.cardProduct .product-min .min-from{ font-weight:700; color:var(--color-primary); }
.badge-min{ display:inline-block; padding:.25rem .5rem; border-radius:999px; background:#F1F5F9; color:#0F172A; font-size:.75rem; font-weight:600; }
.pv-min-badge{ margin:6px 0 2px; }

/* Qty Bar */
.qtyBar{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px solid #eee; border-radius:12px; padding:.4rem; width:100%;
}
.cardProduct .qtyBar .qtyNum, .productView .qtyBar .qtyNum{
  min-width:2ch; text-align:center; font-weight:700; color:var(--text-color-primary);
}
.qtyBar button{
  position:relative; width:40px; height:38px; border-radius:10px; border:1px solid #eee; background:#f8f9fa; cursor:pointer;
}
.qtyBar .btnCartInc[disabled]{ opacity:.4; cursor:not-allowed; }
.qtyBar button:hover{ background:#f1f3f5; }
.btnCartRemove{ color:#d32f2f; border-color:#f1c6c6; background:#fff2f2; }
.qtyBar button.is-loading > *:not(.miniLoader){ visibility:hidden !important; }
.qtyBar .miniLoader{
  position:absolute; inset:0; margin:auto; width:16px; height:16px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent; animation:spin .7s linear infinite; pointer-events:none; z-index:1;
}
.qtyBar button.is-loading i,
.qtyBar button.is-loading svg{ visibility:hidden !important; }

/* =======================================================
   PRODUCT DETAIL (PDP)
======================================================= */
.products .empty-state{ grid-column:1 / -1; width:100%; }
.empty-state{
  --es-fg:#eaeef3; --es-text:#d6dbe3; --es-muted:#a7b0bf; --es-bg:rgba(0,0,0,.25); --es-border:rgba(255,255,255,.06);
  display:grid; place-items:center; text-align:center; gap:10px; padding:36px 20px; border-radius:16px;
  background:var(--es-bg); border:1px solid var(--es-border); backdrop-filter:blur(4px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04); min-height:220px; box-sizing: border-box;
}
.empty-state-emoji{ font-size:42px; line-height:1; filter:drop-shadow(0 1px 0 rgba(255,255,255,.15)); transform:translateZ(0); animation:es-pop .35s ease-out; }
.empty-state-title{ font:600 18px/1.3 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:var(--es-fg); margin:0; }
.empty-state-desc{ font-size:14px; line-height:1.5; color:var(--es-muted); margin:0; }
.empty-state-actions{ display:flex; gap:10px; justify-content:center; margin-top:6px; flex-wrap:wrap; }
.empty-state .btnPrimary{
  width:10rem; height:2.5rem; padding:10px 14px; box-sizing:border-box; border-radius:10px; border:0;
  background:#ff2f4b; color:#fff; font-weight:600; cursor:pointer;
}
.empty-state .btnPrimary:hover{ filter:brightness(1.08); }
.empty-state .btnGhost{
  width:10rem; height:2.5rem; padding:10px 14px; border-radius:10px; text-decoration:none; border:1px solid var(--es-border);
  color:var(--es-text); display:flex; align-items:center; justify-content:center; box-sizing:border-box;
}

div#productView{ margin:8rem auto 0; max-width:1200px; width:90dvw; }
.productView{ display:grid; grid-template-columns:1.25fr 1fr; gap:28px; align-items:start; }

/* mídia esquerda */
.pv-left{
  background:var(--bc-panel); border:1px solid var(--bc-border); border-radius:20px; padding:16px; backdrop-filter:blur(6px);
}
.pv-media{
  border-radius:14px; overflow:hidden; background:#121214; aspect-ratio:4/3; display:grid; place-items:center;
}
.pv-cover{ width:100%; height:100%; object-fit:cover; display:block; }
.pv-thumbs{ margin-top:12px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.pv-thumb{
  border:1px solid var(--bc-border); background:#161618; border-radius:12px; padding:6px; cursor:pointer; transition:transform .15s ease;
}
.pv-thumb:hover{ transform:translateY(-2px); }
.pv-thumb img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px; display:block; }

/* painel direito */
.pv-right{
  background:var(--bc-panel); border:1px solid var(--bc-border); border-radius:20px; padding:20px 22px; backdrop-filter:blur(6px);
}
.pv-breadcrumbs{ font-size:.9rem; color:var(--bc-muted); margin-bottom:.5rem; }
.pv-breadcrumbs a{ color:var(--bc-muted); }
.pv-title{ font-family:"Bree Serif",serif; font-size:2.2rem; letter-spacing:.2px; margin:.2rem 0 .8rem; }
.pv-sub{ font-size:.95rem; color:var(--bc-muted); margin-top:-.4rem; margin-bottom:.8rem; }
.pv-price{ display:flex; gap:12px; align-items:baseline; margin:.6rem 0 1.2rem; }
.pv-price .old{ color:var(--bc-muted); text-decoration:line-through; }
.pv-price .now{ font-size:1.8rem; font-weight:800; }
.badge-off{ background:var(--bc-red); color:#fff; font-weight:700; border-radius:999px; padding:.28rem .7rem; font-size:.85rem; }

.pv-actions{ display:flex; gap:10px; align-items:center; margin:10px 0 8px; }
.pv-qty{ display:flex; align-items:center; border:1px solid var(--bc-border); border-radius:12px; overflow:hidden; }
.pv-qty button{ background:#1a1a1c; border:0; width:38px; height:38px; color:#fff; cursor:pointer; }
.pv-qty span{ width:42px; text-align:center; }

.pv-desc{ margin-top:12px; line-height:1.7; color:#e5e5e7; }
.pv-desc h2, .pv-desc h3{ margin:.75rem 0 .5rem; }
.pv-desc ul, .pv-desc ol{ padding-left:1.25rem; }
.pv-desc img{ max-width:100%; height:auto; border-radius:.5rem; }

/* Badges PDP */
.pv-right .pv-badges{
  display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 12px;
}
.pv-right .pv-badges .badge-weight,
.pv-right .pv-badges .badge-tip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px;
  font-size:12px; line-height:1; font-weight:600;
  border:1px solid var(--bc-border, rgba(255,255,255,.12));
  background:color-mix(in srgb, var(--bc-panel, rgba(22,22,24,.75)) 92%, transparent);
  color:var(--bc-text, #e9e9ea); backdrop-filter:blur(6px);
}
.pv-right .pv-badges .badge-weight{
  border-color:color-mix(in srgb, var(--color-primary, #EF292B) 40%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--color-primary, #EF292B) 25%, transparent);
}
.pv-right .pv-badges i{ width:14px; height:14px; }

.pv-actions .btnAddCart{
  display:flex; align-items:center; justify-content:center; gap:.55rem;
  border-radius:12px; padding:.75rem 1.1rem; border:0; background:var(--bc-red); color:#fff; cursor:pointer; font-weight:700;
  box-shadow:0 6px 14px rgba(225,29,72,.25); width:100%;
}
.pv-actions .btnAddCart[disabled]{ background:#555; box-shadow:none; cursor:not-allowed; }
.qtyBar{ display:flex; gap:.5rem; align-items:center; }
.productView .qtyBar button{
  border:0; border-radius:10px; padding:.6rem; background:#222; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
}

/* Metadados */
.pv-meta{ list-style:none; padding:0; margin:14px 0; display:grid; gap:.4rem; font-size:.95rem; }
.pv-meta b{ opacity:.85; margin-right:.25rem; }
.stock.ok{ color:var(--bc-green); font-weight:700; }
.stock.oos{ color:#ef4444; font-weight:700; }

/* Relacionados */
.pv-related{ margin-top:36px; }
.pv-related h2{ font-size:1.4rem; margin:0 0 12px; }
.pv-related .products{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:.6rem; width:100%;
  margin:.6rem 0; padding:.6rem 0; align-items:stretch; justify-items:stretch;
}
@media (max-width:900px){ .pv-related .products{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .pv-related .products{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:300px){ .pv-related .products{ grid-template-columns:1fr;} }

/* PDP Skeleton */
.pv-skel{ display:grid; grid-template-columns:1.25fr 1fr; gap:28px; min-height:640px; }
.skel-card{
  background:var(--bc-panel); border:1px solid var(--bc-border); border-radius:20px; padding:16px; position:relative; overflow:hidden;
}
.skel-box{ height:14px; border-radius:10px; background:#1b1b1e; margin:10px 0; }
.skel-media{ height:0; padding-top:75%; border-radius:14px; background:#121214; }
.skel-line-lg{ height:28px; width:72%; }
.skel-line-md{ height:18px; width:45%; }
.skel-line-sm{ height:14px; width:36%; }
.skel-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(110deg, transparent 0%, rgba(255,255,255,.04) 45%, transparent 60%);
  animation:shimmer 1.25s linear infinite;
}
.pv-loading{ position:absolute; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.28); border-radius:20px; z-index:2; }
.pv-spinner{ width:44px; height:44px; border-radius:50%; border:3px solid rgba(255,255,255,.18); border-top-color:#fff; animation:spin .9s linear infinite; }
@media (max-width:980px){ .productView, .pv-skel{ grid-template-columns:1fr; } }

/* =======================================================
   ÁREAS DE IMAGEM (catálogo + PDP)
======================================================= */
.cardProduct-header, .pv-media{ position:relative; overflow:hidden; background:#f3f4f6; }
.cardProduct-header{ aspect-ratio:1/1; }
.pv-media{ aspect-ratio:4/3; }
.cardProduct-header img, .pv-media img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transition:opacity .25s ease;
}
.imgLoader{
  position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
}
.imgLoader::after{
  content:""; width:28px; height:28px; border:3px solid rgba(0,0,0,.2);
  border-top-color:rgba(0,0,0,.55); border-radius:50%; animation:spin .8s linear infinite;
}
.is-loaded .imgLoader{ opacity:0; transition:opacity .2s; }
.is-loaded img{ opacity:1; }
.is-error .imgLoader::after{
  border:0; width:18px; height:18px; box-shadow:inset 0 0 0 2px rgba(220,38,38,.7);
}

/* =======================================================
   WHATSAPP FLOAT
======================================================= */
.whatsapp-float{
  position:fixed; bottom:30px; right:20px;
  display:flex; flex-direction:row; align-items:center; gap:10px; z-index:9999;
}
@media (max-width: 768px){ .whatsapp-float{ display:none !important; } }
.whatsapp-label{
  background:#075e54; color:#fff; font-size:14px; font-weight:600; padding:5px 12px; border-radius:8px;
  font-family:"Bree Serif", serif; box-shadow:0 2px 6px #0001;
}
.whatsapp-icon{
  background:#075e54; border-radius:16px; padding:12px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px #0000001a; transition:transform .2s ease;
}
.whatsapp-icon:hover{ transform:scale(1.05); }
.whatsapp-icon svg{ width:42px; height:42px; fill:#fff; }
.whatsapp-float.is-hidden{
  opacity: 0; transform: translateY(8px) scale(.98); pointer-events: none;
  transition: opacity .15s ease, transform .2s ease;
}

/* =======================================================
   MODAL DE SELEÇÃO DE CORTE
======================================================= */
.modalCutSelection{
  position: fixed; inset: 0; z-index: 2000;
  display: grid; grid-template-columns: 1fr;
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
  overflow-y: auto;
}
.modalCutSelection.is-open{ opacity: 1; pointer-events: auto; }

.modalCutSelection__backdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(16px);
}

.modalCutSelection__panel{
  position: relative; margin: auto;
  width: min(500px, 92vw); max-height: 90vh;
  background: var(--menu-bg); border: 1px solid var(--menu-border);
  border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.4);
  display: grid; grid-template-rows: auto 1fr auto;
  overflow: hidden;
  transform: scale(.96); transition: transform .2s ease;
}
.modalCutSelection.is-open .modalCutSelection__panel{
  transform: scale(1);
}

.modalCutSelection__header{
  padding: 24px 28px; border-bottom: 1px solid var(--menu-border);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.modalCutSelection__title{
  font-size: 1.4rem; font-weight: 600; color: var(--menu-ink);
}
.modalCutSelection__close{
  width: 36px; height: 36px; border-radius: 50%;
  background: transparent; border: 0; color: var(--menu-ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s ease;
}
.modalCutSelection__close:hover{ background: rgba(255,255,255,.08); }

.modalCutSelection__content{
  padding: 28px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 20px;
}

.modalCutSelection__help{
  font-size: .9rem; color: var(--bc-muted); line-height: 1.5;
}

.modalCutSelection__options{
  display: grid; gap: 12px;
}
.cut-option{
  position: relative; padding: 16px 18px; border-radius: 12px;
  border: 2px solid var(--menu-border); background: transparent;
  cursor: pointer; transition: all .2s ease;
  display: flex; align-items: flex-start; gap: 14px;
}
.cut-option:hover{
  border-color: var(--color-primary); background: rgba(239,41,43,.08);
}
.cut-option.is-selected{
  border-color: var(--color-primary); background: rgba(239,41,43,.12);
}
.cut-option__radio{
  position: absolute; opacity: 0; pointer-events: none;
}
.cut-option__icon{
  width: 24px; height: 24px; flex-shrink: 0; margin-top: 2px;
  border-radius: 50%; background: rgba(239,41,43,.15);
  display: flex; align-items: center; justify-content: center;
  transition: all .2s ease;
}
.cut-option.is-selected .cut-option__icon{
  background: var(--color-primary);
}
.cut-option__icon svg{ width: 14px; height: 14px; }
.cut-option__content{ 
  flex: 1; 
  text-align: left;
}
.cut-option__name{
  font-size: 1.05rem; font-weight: 600; color: var(--menu-ink);
  margin-bottom: 4px;
  text-align: left;
}
.cut-option__description{
  font-size: .85rem; color: var(--bc-muted); line-height: 1.4;
  text-align: left;
}
.cut-option__recommended{
  margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px;
  justify-content: flex-start;
}
.cut-option__recommended span{
  font-size: .75rem; color: var(--bc-green); background: rgba(34,197,94,.15);
  padding: 2px 8px; border-radius: 6px;
}

.modalCutSelection__footer{
  padding: 20px 28px; border-top: 1px solid var(--menu-border);
  display: flex; gap: 12px; justify-content: flex-end;
}
.modalCutSelection__btn-cancel{
  padding: 10px 20px; border-radius: 10px;
  background: transparent; border: 1px solid var(--menu-border);
  color: var(--menu-ink); font-size: .95rem; cursor: pointer;
  transition: all .2s ease;
}
.modalCutSelection__btn-cancel:hover{
  background: rgba(255,255,255,.08); border-color: var(--bc-muted);
}
.modalCutSelection__btn-confirm{
  padding: 10px 28px; border-radius: 10px;
  background: var(--color-primary); border: 0;
  color: #fff; font-size: .95rem; font-weight: 600; cursor: pointer;
  transition: all .2s ease;
}
.modalCutSelection__btn-confirm:hover{
  background: var(--color-primary-hover); transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239,41,43,.3);
}
.modalCutSelection__btn-confirm:disabled{
  opacity: .5; cursor: not-allowed;
  transform: none;
}

@media (max-width: 768px){
  .modalCutSelection__backdrop{
    position: fixed;
  }
  
  .modalCutSelection__panel{
    border-radius: 20px 20px 0 0;
    width: 100%; max-width: 100%;
    margin: auto 0 0 0;
    max-height: calc(100vh - env(safe-area-inset-top));
  }
  
  .cut-option{ padding: 14px 16px; }
}

/* Opções de Corte na Página de Detalhes */
.pv-cut-options{
  margin: 24px 0; padding: 20px; background: rgba(255,255,255,.04);
  border-radius: 12px; border: 1px solid var(--menu-border);
}
.pv-cut-title{
  font-size: 1.2rem; font-weight: 600; color: var(--menu-ink);
  margin-bottom: 8px;
}
.pv-cut-help{
  font-size: .9rem; color: var(--bc-muted); line-height: 1.5;
  margin-bottom: 16px;
}
.pv-cut-grid{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.pv-cut-option{
  position: relative; padding: 14px 16px; border-radius: 10px;
  border: 2px solid var(--menu-border); background: transparent;
  cursor: pointer; transition: all .2s ease;
  display: flex; align-items: flex-start; gap: 12px; text-align: left;
}
.pv-cut-option:hover{
  border-color: var(--color-primary); background: rgba(239,41,43,.08);
}
.pv-cut-option.is-selected{
  border-color: var(--color-primary); background: rgba(239,41,43,.12);
}
.pv-cut-icon{
  width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px;
  border-radius: 50%; background: rgba(239,41,43,.15);
  display: flex; align-items: center; justify-content: center;
  transition: all .2s ease; color: transparent;
}
.pv-cut-option.is-selected .pv-cut-icon{
  background: var(--color-primary); color: #fff;
}
.pv-cut-content{ flex: 1; }
.pv-cut-name{
  font-size: 1rem; font-weight: 600; color: var(--menu-ink);
  margin-bottom: 3px;
}
.pv-cut-desc{
  font-size: .85rem; color: var(--bc-muted); line-height: 1.4;
}
.pv-cut-recommended{
  margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px;
}
.pv-cut-recommended span{
  font-size: .75rem; color: var(--bc-green); background: rgba(34,197,94,.15);
  padding: 2px 8px; border-radius: 6px;
}

/* Badge de corte no carrinho */
.cart-title-wrap{
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.cart-cut-badge{
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .75rem; color: var(--color-primary); 
  background: rgba(239,41,43,.12); border: 1px solid rgba(239,41,43,.3);
  padding: 2px 8px; border-radius: 6px; font-weight: 500;
  margin-top: 4px;
  width: fit-content;
}