:root{
  --gold-50:#f9f1cf;
  --gold-400:#e3c24d;
  --gold-500:#d4af37;
  --gold-600:#b9911b;
  --slate-900:#0f172a;
  --cartbar-h: 82px; 
  --dark-rgb: 0,0,0;
}

body.has-cart main{padding-bottom: calc(var(--cartbar-h) + env(safe-area-inset-bottom, 0px) + 12px);}
.cart-bar{ padding-bottom: calc(env(safe-area-inset-bottom,0) + 8px); }

/* Fundo */
body{
  background: url('/app/img/bg-tunnel.jpg') center/cover fixed no-repeat;
  position: relative;
  color: #e5e7eb;
}
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index: -1;
  background: radial-gradient(70% 50% at 50% 10%, rgba(0,0,0,.12), rgba(0,0,0,.55));
}

/* barra translúcida escura */
.bg-blur { backdrop-filter: blur(10px); background: rgba(var(--dark-rgb), .65); }

/* ====== Cards ====== */
.card{
  background:#fff;                 /* card sempre branco */
  transition: transform .18s, box-shadow .18s, filter .18s;
  border-radius:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  overflow:hidden;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.22);
}

/* topo da imagem também branco */
.card-img{ background:#fff; overflow:hidden; aspect-ratio: 4 / 3; display:flex; align-items:center; justify-content:center;}
.card-img.portrait{ aspect-ratio: 3 / 4; }   /* fotos mais altas */
.card-img.landscape{ aspect-ratio: 16 / 10; }
.card-img.square{ aspect-ratio: 5 / 4; }
.card-img img{ width:100%; height:100%; object-fit:contain; object-position: center center; display:block; }

/* corpo sempre branco; hover só dá 1% de brilho */
.card-body{
  background:#fff; color:#0f172a;
  display:flex; flex-direction:column; gap:.25rem;
  padding:12px 12px 16px;
}
.card:hover .card-body{ filter:brightness(1.01); }  /* sutil */

.card-brand{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:#0f172a; opacity:.9; }
.card-id{ font-size:12px; color:#334155; margin-top:.125rem; }
.card-title{
  font-weight:700; color:#0b1220; line-height:1.2;
  display:-webkit-box;
  overflow:hidden;
  text-overflow:ellipsis;
  -webkit-box-orient: vertical;
  line-clamp: 2;              /* padrão */
  -webkit-line-clamp: 2;      /* webkit */
}
.card-title:hover{ cursor:help; }
.price{font-weight:800;color:#0b1220}
.price::after{content:'';display:block;height:2px;width:48px;margin-top:2px;background:linear-gradient(90deg,var(--gold-400),transparent)}

/* Botão dourado */
.btn-gold{
  position: relative;
  background: linear-gradient(180deg, #fde68a 0%, #f1c232 35%, var(--gold-500) 100%);
  border: 1px solid rgba(185,145,27,.55);
  color:#0f172a; font-weight:700; border-radius:.75rem;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(0,0,0,.06),
    0 4px 10px rgba(212,175,55,.22),
    0 1px 2px rgba(0,0,0,.18);
  transition: filter .15s ease, transform .12s ease, box-shadow .15s ease;
}
.btn-gold::after{
  content:''; position:absolute; left:2px; right:2px; top:2px; height:38%; border-radius:inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)); pointer-events:none;
}
.btn-gold:hover{ filter: brightness(1.04); background: linear-gradient(180deg, var(--gold-500), var(--gold-600)); }
.btn-gold:active{ transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(0,0,0,.10), 0 4px 12px rgba(212,175,55,.24), 0 1px 2px rgba(0,0,0,.25); }

/* ====== Modal ====== */
.modal-backdrop{touch-action: none;background:rgba(0,0,0,.55);backdrop-filter:blur(2px)}
.modal-panel{width:min(980px,94vw);max-height:min(88vh,980px);background:rgba(255,255,255,.98);border-radius:18px;box-shadow:0 18px 44px rgba(0,0,0,.35);overflow:auto;position:relative;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.modal-grid{display:grid;grid-template-columns:1.1fr 1.2fr;gap:18px;padding:18px}
.modal-media{background:#f1f5f9;border-radius:14px;overflow:hidden}
.modal-media img{width:100%;height:100%;object-fit:contain;display:block;aspect-ratio:4/3}
.modal-body{display:flex;flex-direction:column;gap:10px}
.modal-body h2{font-size:1.1rem;font-weight:800;color:#0b1220; padding-right:56px;}
.modal-rows{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.modal-rows .row{display:flex;justify-content:space-between;gap:8px;font-size:.95rem;color:#0f172a;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:8px 10px}
.modal-rows .row span{color:#475569}
.modal-section h3{font-size:.85rem;color:#334155;font-weight:700;margin-bottom:4px}
.modal-section p{font-size:.95rem;color:#0f172a;max-height:140px;overflow:auto}
.modal-close{
  position:absolute; right:12px; top:12px; width:36px; height:36px;
  border-radius:9999px; background:rgba(255,255,255,.92); color:#0f172a;
  border:1px solid rgba(15,23,42,.18); box-shadow:0 4px 10px rgba(0,0,0,.12);
}
.modal-close:hover{ filter:brightness(1.03); }
@media (max-width: 860px){
  .modal-grid{grid-template-columns:1fr}
  .modal-rows{grid-template-columns:1fr}
}

/* Garante que todos os cards ocupem a mesma altura na grade */
#grid > .card{ height:100%; }

/* ====== Inputs ====== */
.input{ background: rgba(255,255,255,.95); color:#0f172a; }
.select{ background: rgba(255,255,255,.95); color:#0f172a; border:1px solid rgba(15,23,42,.20); }
.select option{ color:#0f172a; background:#ffffff; }
.input::placeholder{ color:#64748b; opacity:.8; }

/* ====== Brand ====== */
.brand-title{font-weight:800;font-size:1.5rem;line-height:1;letter-spacing:.2px;color:#f8fafc}
.brand:hover .brand-title{color:var(--gold-50)}
.brand-logo{filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}

/* ====== Barra do carrinho ====== */
.cart-bar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:grid;place-items:center;padding:10px}
.cart-bar-inner{width:min(980px,96vw);display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(var(--dark-rgb), .72);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:10px 12px;color:#e5e7eb;box-shadow:0 8px 30px rgba(0,0,0,.35)}
.btn-dark{background:#1f2937;color:#f8fafc;border:1px solid rgba(255,255,255,.1);border-radius:.65rem;padding:.5rem .9rem}
.btn-dark:hover{filter:brightness(1.05)}
.btn-light{background:#e5e7eb;color:#0f172a;border:1px solid rgba(0,0,0,.08);border-radius:.65rem;padding:.5rem .9rem}
.btn-light:hover{filter:brightness(1.02)}
.btn-whats{background:#25D366;color:#062a10;font-weight:700;border-radius:.7rem;padding:.55rem 1rem;box-shadow:0 8px 18px rgba(37,211,102,.25)}
.btn-whats:hover{filter:brightness(1.05)}

/* ====== Modal do carrinho ====== */
.cart-modal-ctr{display:grid;place-items:center}
.cart-modal-panel{width:min(820px,94vw);max-height:min(88vh,980px);background:#fff;border-radius:18px;box-shadow:0 18px 44px rgba(0,0,0,.35);overflow:auto;position:relative;padding:18px; overscroll-behavior:contain;}
.cart-title{font-weight:800;color:#0b1220;font-size:1.25rem;margin:6px 0 12px 0;padding-right:56px}
.cart-list{display:flex;flex-direction:column;gap:10px;max-height:52vh;overflow:auto}
.cart-item{ display:grid; grid-template-columns:84px 1fr auto auto; gap:12px; align-items:center; border:1px solid #e5e7eb; border-radius:12px; padding:10px; }
.cart-item .remove{
  width:32px; height:32px; border-radius:8px;
  border:1px solid #e2e8f0; background:#fff; color:#991b1b;
  display:flex; align-items:center; justify-content:center;
}
.cart-item .remove:hover{ filter:brightness(1.05); }
.cart-item .remove svg{ width:18px; height:18px; }
.cart-item img{width:84px;height:63px;object-fit:cover;border-radius:8px;background:#f1f5f9}
.cart-item .meta .name{font-weight:700;color:#0b1220}
.cart-item .meta .brand{color:#1f2937;font-size:.9rem}
.cart-item .meta .price{color:#0b1220;font-weight:700;margin-top:4px}
.cart-item .qty{display:flex;align-items:center;gap:8px}
.cart-item .qty button{width:32px;height:32px;border-radius:8px;border:1px solid #cbd5e1;background:#f8fafc}
.cart-item .qty button:hover{filter:brightness(1.03)}
.cart-item .qty span{ color:#0b1220; font-weight:700; }
.cart-item .qty button{ color:#0b1220; line-height:1; } 
.cart-total{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding:10px;border-top:1px solid #0b1220}
.cart-total .left, .cart-total .right { color: #0b1220; }
.cart-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:10px}
.cart-item .meta .price .unit{
  font-weight:600; color:#475569; margin-left:6px;
}

/* estado desabilitado para ações do carrinho */
.btn-disabled{
  opacity:.55;
  pointer-events:none;
  cursor:not-allowed;
  filter:saturate(.6) brightness(.95);
}

/* Mobile: iOS/Android */
@media (max-width: 640px){
  /* modal em tela cheia, coluna */
  .modal-panel{ width:100vw; max-height:100vh; border-radius:0 }
  .modal-grid{ grid-template-columns:1fr; gap:12px; padding:12px }
  .modal-media{ border-radius:10px }
  .modal-body h2{ font-size:1.05rem; padding-right:44px }
  .modal-close{ right:8px; top:8px }

  /* alvos de toque maiores */
  .btn-gold{ padding:12px 16px; font-size:16px }
  .cart-item .qty button{ width:40px; height:40px; font-size:18px }
  #pager button{ min-width:40px; min-height:40px }
}

.ad-wrap { margin: 12px 0; }
@media (min-width: 640px){ .ad-wrap { margin: 16px 0; } }

/* ==== Footer ==== */
.site-footer { background: rgba(var(--dark-rgb), .80); border-top: 1px solid rgba(255,255,255,.08); }
.ft-title { color:#f8fafc; font-weight:800; margin-bottom:.5rem; }
.ft-list li a { color:#e5e7eb; }
.ft-list li a:hover { color: var(--gold-50); }
.ft-bottom { border-top:1px solid rgba(255,255,255,.08); background: rgba(var(--dark-rgb), .55); }
.ft-bottom-inner{ width:100%; margin:0 auto; padding-top:8px; padding-bottom:8px; }

/* ==== Cards horizontais no mobile ==== */
@media (max-width: 640px){
  .card{ display:grid; grid-template-columns:96px 1fr; align-items:stretch; } /* <= era 120px */
  .card-img{ height:96px; aspect-ratio:auto; }  /* caixa menor e fixa */
  .card-img img{ width:100%; height:100%; object-fit:contain; object-position:center center; display:block; } /* garante sem corte */
  .card-body{ padding:10px; }

  /* Título: 3 linhas no mobile */
  .card-title{ line-clamp:3; -webkit-line-clamp:3; }
}

/* Links com ícone semitransparente à esquerda */
.ft-list a.ico{ position:relative; padding-left:30px; display:inline-block; }
.ft-list a.ico::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:20px; height:20px; opacity:.65; background-size:contain; background-repeat:no-repeat;
}

/* WhatsApp / E-mail / Facebook / Instagram */
.ft-list a.ico-whats::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e5e7eb'><path d='M12 2a10 10 0 0 0-8.94 14.59L2 22l5.55-1.46A10 10 0 1 0 12 2zm0 2a8 8 0 0 1 6.86 12.21l-.31.49-.5.31A8 8 0 0 1 7 6.41 8 8 0 0 1 12 4zm4.44 9.38c-.24-.12-1.43-.7-1.65-.78-.22-.08-.38-.12-.55.12-.16.24-.64.78-.78.94-.14.16-.29.18-.53.06-.24-.12-1.01-.37-1.93-1.18-.71-.63-1.19-1.41-1.33-1.65-.14-.24-.02-.37.1-.5.1-.1.24-.26.37-.39.12-.14.16-.24.24-.4.08-.16.04-.3-.02-.42-.06-.12-.55-1.33-.75-1.82-.2-.48-.4-.42-.55-.43h-.47c-.16 0-.42.06-.64.3-.22.24-.84.82-.84 2s.86 2.32.98 2.48c.12.16 1.7 2.6 4.12 3.64.58.25 1.04.4 1.39.51.58.18 1.1.15 1.51.09.46-.07 1.43-.58 1.63-1.15.2-.57.2-1.05.14-1.15-.06-.1-.22-.16-.46-.28z'/></svg>");
}
.ft-list a.ico-mail::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e5e7eb'><path d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5L4 8V6l8 5 8-5v2z'/></svg>");
}
.ft-list a.ico-fb::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e5e7eb'><path d='M22 12a10 10 0 1 0-11.6 9.87v-6.98H7.9V12h2.5V9.8c0-2.46 1.47-3.82 3.72-3.82 1.08 0 2.22.19 2.22.19v2.44h-1.25c-1.23 0-1.61.76-1.61 1.54V12h2.74l-.44 2.89h-2.3v6.98A10 10 0 0 0 22 12z'/></svg>");
}
.ft-list a.ico-ig::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e5e7eb' stroke-width='2'><rect x='3' y='3' width='18' height='18' rx='4' ry='4'/><path d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/><line x1='17.5' y1='6.5' x2='17.5' y2='6.5'/></svg>");
}

/* Ícones quadradinhos (linha de redes) 
.social-icons{ display:flex; gap:8px; }
.social-icons a{
  width:36px; height:36px; border-radius:8px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
}
.social-icons a:hover{ background:rgba(255,255,255,.15); }
.social-icons svg{ width:18px; height:18px; fill:#e5e7eb; opacity:.9 }
*/

/* FAB WhatsApp */
.fab-whats{
  position:fixed; right:18px; bottom:20px; z-index:65;
  width:56px; height:56px; border-radius:9999px;
  background:#25D366; display:grid; place-items:center;
  box-shadow:0 10px 24px rgba(37,211,102,.35), 0 2px 8px rgba(0,0,0,.2);
  transition: transform .12s ease, filter .15s ease;
}
.fab-whats:hover{ filter:brightness(1.05); transform:translateY(-1px); }

/* Mini mapa no rodapé */
.mini-map{
  position:relative;
  width:100%;
  max-width:360px;    /* menor */
  height:140px;       /* mais fino */
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 4px 18px rgba(0,0,0,.15) inset, 0 1px 0 rgba(255,255,255,.03);
}
.mini-map iframe{
  width:100%; height:100%; border:0;
}
/* celulares médios */
@media (max-width: 640px){
  .mini-map{ height:120px; max-width:320px; }
}
/* MUITO pequenos (ex.: 320px) — some o mapa */
@media (max-width: 360px){
  .mini-map{ display:none; }
}

/* Telas muito pequenas: caixa de imagem e tipografia menores */
@media (max-width: 360px){
  .card{ grid-template-columns:72px 1fr; }
  .card-img{ height:72px; }
  .card-body{ padding:8px; }
  .card-title{ font-size:13px; line-height:1.25; line-clamp:2; -webkit-line-clamp:2; }
  .price{ font-size:13px; }
  .card-id, .card-brand{ font-size:10px; }
}

/* Layout para páginas estáticas (sobre/privacidade/termos) */
.doc{
  min-height: calc(100vh - 240px); /* ajusta considerando header+footer */
  display: flex; align-items: center; justify-content: center;
  padding: 40px 16px;
}
.doc-card{
  width: 100%; max-width: 880px;
  background: rgba(var(--dark-rgb), .60);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.doc h1{ font-size: 28px; font-weight:800; color:#f8fafc; margin-bottom: 8px; }
.doc p, .doc li{ color:#e5e7eb; line-height: 1.75; }
.doc h2{ font-size: 18px; margin-top: 18px; color:#f1f5f9; }
.doc ul{ list-style: disc; padding-left: 1.2rem; }
@media (max-width: 640px){
  .doc{ padding: 24px 12px; }
  .doc-card{ padding: 20px; }
  .doc h1{ font-size: 22px; }
}

/* no celular, manter só “Ver carrinho” para não quebrar layout */
@media (max-width: 480px){
  #cartBar .btn-whats{ display:none; }
}

/* Em telas bem pequenas, mostrar só "Ver carrinho" */
@media (max-width: 420px){
  #cartBar .btn-whats{ display:none !important; }
  .cart-actions .btn-whats{ display:none !important; } /* dentro do modal do carrinho */
}

/* Alinhar conteúdo interno do card no DESKTOP */
@media (min-width: 641px){
  .card{ display:flex; flex-direction:column; height:100%; }
  .card-img{ flex:0 0 auto; }
  .card-body{ display:flex; flex-direction:column; flex:1 1 auto; }
  .card-actions{ margin-top:auto; }  /* empurra o botão para o rodapé do card */
}