:root {
  --pc-primary: #075985;
  --pc-primary-2: #0ea5e9;
  --pc-primary-3: #38bdf8;
  --pc-accent: #10b981;
  --pc-accent-dark: #047857;
  --pc-ink: #0f172a;
  --pc-muted: #64748b;
  --pc-line: #e2e8f0;
  --pc-bg: #f5f8fc;
  --pc-card: rgba(255,255,255,.98);
  --pc-shadow: 0 18px 55px rgba(15,23,42,.09);
  --pc-shadow-strong: 0 28px 70px rgba(15,23,42,.14);
  --pc-radius: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 0 0, rgba(14,165,233,.09), transparent 30rem),
    radial-gradient(circle at 100% 10%, rgba(16,185,129,.065), transparent 28rem),
    linear-gradient(180deg, #f8fbff 0%, var(--pc-bg) 42%, #f7fafc 100%);
  color: var(--pc-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
button, input, select { font: inherit; }
img { max-width: 100%; }
.public-shell { min-height: 100vh; display: flex; flex-direction: column; }

/* Header */
.public-header {
  position: sticky;
  top: 0;
  z-index: 1040;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(226,232,240,.88);
  box-shadow: 0 8px 30px rgba(15,23,42,.035);
}
.header-inner { min-height: 76px; gap: 12px; }
.brand { min-width: 0; display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.brand-logo {
  width: 48px; height: 48px; border-radius: 16px; object-fit: contain;
  background:#fff; border:1px solid var(--pc-line); padding:4px;
  box-shadow: 0 8px 22px rgba(15,23,42,.08); flex: 0 0 auto;
}
.brand-copy { min-width:0; display:flex; flex-direction:column; justify-content:center; }
.brand-title { font-weight: 900; font-size: 1.05rem; line-height:1.1; white-space:normal; overflow:visible; text-overflow:clip; letter-spacing:-.015em; }
.brand-subtitle { color:var(--pc-muted); font-size:.74rem; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 100%; }
.header-actions { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.round-action {
  width:44px; height:44px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--pc-line); background:#fff; color:var(--pc-ink); text-decoration:none;
  box-shadow:0 8px 24px rgba(15,23,42,.05); transition:transform .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; position:relative;
}
.round-action:hover { transform: translateY(-2px); color:var(--pc-primary); border-color:#bae6fd; box-shadow:0 12px 28px rgba(14,165,233,.12); }
.admin-action { width:auto; padding:0 14px; gap:8px; font-weight:800; }
.language-select {
  border:1px solid var(--pc-line);
  border-radius:14px;
  height:44px;
  min-width:70px;
  width:70px;
  background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:13px 13px;
  padding:0 30px 0 12px;
  font-weight:900;
  font-size:.92rem;
  line-height:1;
  color:var(--pc-ink);
  text-align:left;
  text-align-last:left;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  cursor:pointer;
  outline:none;
  box-shadow:0 8px 24px rgba(15,23,42,.05);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.language-select:hover { border-color:#bae6fd; box-shadow:0 12px 28px rgba(14,165,233,.10); }
.language-select:focus { border-color:#38bdf8; box-shadow:0 0 0 3px rgba(14,165,233,.14), 0 10px 26px rgba(15,23,42,.07); }
.language-select option { color:var(--pc-ink); background:#fff; font-weight:800; }
.cart-badge { position:absolute; top:-6px; right:-6px; min-width:21px; height:21px; border-radius:99px; background:#ef4444; color:#fff; font-size:.7rem; display:grid; place-items:center; padding:0 5px; border:2px solid #fff; }
.cart-badge.is-bouncing { animation: cartBounce .55s ease; }

/* Hero */
.hero { padding: 34px 0 20px; }
.hero-panel {
  background: linear-gradient(135deg, #062c45, #075985 58%, #0ea5e9);
  color:#fff; border-radius:30px; padding: clamp(24px, 5vw, 46px); position:relative; overflow:hidden;
  box-shadow: 0 28px 70px rgba(7,89,133,.20);
}
.hero-panel::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg, transparent 0 35%, rgba(255,255,255,.055) 48%, transparent 62%);
  transform:translateX(-100%); animation:heroShine 7s ease-in-out infinite;
}
.hero-panel::after { content:""; position:absolute; width:240px; height:240px; border-radius:50%; right:-65px; top:-90px; background:rgba(255,255,255,.09); }
.hero-kicker { text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; font-weight:850; opacity:.78; }
.hero-title { font-weight:950; letter-spacing:-.04em; max-width:680px; margin:.45rem 0 .55rem; font-size:clamp(1.7rem,4vw,3rem); }
.hero-text { max-width:600px; color:rgba(255,255,255,.82); margin:0; }
.search-wrap { margin-top:22px; max-width:720px; position:relative; z-index:2; }
.search-wrap i { position:absolute; left:18px; top:50%; transform:translateY(-50%); color:#64748b; }
.catalog-search { height:54px; border:0; border-radius:18px; padding:0 18px 0 48px; box-shadow:0 12px 30px rgba(3,18,28,.18); }
.catalog-search:focus { box-shadow:0 0 0 .24rem rgba(255,255,255,.18), 0 16px 34px rgba(3,18,28,.22); }
.promo-alert { border:0; border-radius:18px; box-shadow:0 14px 36px rgba(15,23,42,.06); }

/* Catálogo */
.category-section { margin: 30px 0 48px; }
.category-heading { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.category-heading h2 { margin:0; font-size:1.1rem; font-weight:950; letter-spacing:-.02em; }
.category-line { flex:1; height:1px; background:linear-gradient(90deg,#7dd3fc,rgba(186,230,253,.5),transparent); }
.products-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
  align-items:stretch;
}

.product-card {
  --mx: 50%;
  --my: 0%;
  position:relative;
  isolation:isolate;
  min-width:0;
  height:100%;
  background:var(--pc-card);
  border:1px solid rgba(203,213,225,.72);
  border-radius:var(--pc-radius);
  overflow:hidden;
  box-shadow:0 12px 34px rgba(15,23,42,.06);
  transition:transform .28s cubic-bezier(.2,.75,.25,1), box-shadow .28s ease, border-color .28s ease;
  display:grid;
  grid-template-rows:220px 1fr;
  transform:translateZ(0);
}
.product-card::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(340px circle at var(--mx) var(--my), rgba(14,165,233,.16), transparent 48%);
  transition:opacity .28s ease;
}
.product-card::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95);
}
.product-card:hover {
  transform:translateY(-7px);
  box-shadow:var(--pc-shadow-strong);
  border-color:rgba(56,189,248,.55);
}
.product-card:hover::before { opacity:1; }
.product-card.is-added { animation:cardSuccess .62s ease; }

/* Área da imagem: sempre do mesmo tamanho, sem recorte */
.product-media {
  position:relative;
  min-width:0;
  min-height:0;
  height:220px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  background:
    radial-gradient(circle at 50% 25%, rgba(14,165,233,.075), transparent 52%),
    linear-gradient(180deg,#fff 0%,#f8fbfd 100%);
  border-bottom:1px solid #edf2f7;
}
.product-media-inner {
  position:relative;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(226,232,240,.72);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
}
.product-media-inner.is-loading::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(100deg, rgba(241,245,249,.48) 20%, rgba(255,255,255,.95) 42%, rgba(241,245,249,.48) 64%);
  background-size:220% 100%;
  animation:imageShimmer 1.35s linear infinite;
}
.product-image {
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  object-fit:contain !important;
  object-position:center center !important;
  padding:4px;
  background:#fff;
  transform:translateZ(0);
  transition:filter .25s ease, transform .25s ease;
}
.product-card:hover .product-image { filter:saturate(1.035) contrast(1.015); transform:translateY(-2px); }
.product-placeholder {
  width:86px; height:86px; border-radius:26px; display:grid; place-items:center;
  background:linear-gradient(145deg,#e0f2fe,#f0f9ff); color:#0284c7; font-size:2rem;
  border:1px solid #bae6fd; box-shadow:0 12px 26px rgba(14,165,233,.10);
}
.featured-badge {
  position:absolute; left:14px; top:14px; z-index:5;
  background:rgba(15,23,42,.94); color:#fff; border-radius:99px; padding:7px 11px;
  font-size:.66rem; font-weight:900; letter-spacing:.05em; text-transform:uppercase;
  box-shadow:0 8px 20px rgba(15,23,42,.16); backdrop-filter:blur(8px);
}

/* Conteúdo do card nunca fica por baixo da imagem nem é cortado */
.product-body {
  position:relative;
  min-width:0;
  min-height:218px;
  padding:17px 17px 16px;
  display:flex;
  flex-direction:column;
  overflow:visible;
  background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.98) 100%);
}
.product-name {
  display:block;
  width:100%;
  color:var(--pc-ink);
  font-weight:900;
  font-size:1.03rem;
  line-height:1.28;
  letter-spacing:-.018em;
  margin:0 0 8px;
  overflow:visible;
  white-space:normal;
  text-overflow:clip;
  word-break:normal;
  overflow-wrap:anywhere;
}
.product-description {
  display:block;
  width:100%;
  color:var(--pc-muted);
  font-size:.84rem;
  line-height:1.48;
  margin:0 0 18px;
  min-height:2.48em;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  overflow-wrap:anywhere;
}
.product-meta {
  margin-top:auto;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  min-width:0;
}
.product-price {
  min-width:0;
  color:var(--pc-accent-dark);
  font-weight:950;
  font-size:1.25rem;
  line-height:1.1;
  letter-spacing:-.025em;
  white-space:nowrap;
}
.unit-badge {
  flex:0 0 auto;
  border:1px solid var(--pc-line);
  color:#64748b;
  background:#f8fafc;
  padding:5px 8px;
  border-radius:10px;
  font-size:.69rem;
  line-height:1;
  font-weight:900;
  text-transform:lowercase;
}
.btn-add {
  position:relative;
  overflow:hidden;
  width:100%;
  margin-top:15px;
  min-height:46px;
  border-radius:14px;
  border-width:1.5px;
  font-weight:900;
  letter-spacing:.01em;
  background:linear-gradient(180deg,#fff,#f8fbff);
  box-shadow:0 6px 18px rgba(37,99,235,.055);
  transition:transform .18s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn-add::after {
  content:""; position:absolute; inset:-40% -20%; pointer-events:none;
  background:linear-gradient(110deg, transparent 36%, rgba(255,255,255,.55) 50%, transparent 64%);
  transform:translateX(-120%); transition:transform .55s ease;
}
.btn-add:hover {
  transform:translateY(-1px);
  background:linear-gradient(135deg,#0d6efd,#0284c7);
  color:#fff;
  box-shadow:0 12px 26px rgba(37,99,235,.18);
}
.btn-add:hover::after { transform:translateX(120%); }
.btn-add:active { transform:translateY(0) scale(.99); }

/* Entrada progressiva: ativada somente quando JS está disponível */
.catalog-motion-ready .product-card.reveal-pending {
  opacity:0;
  transform:translateY(18px) scale(.985);
}
.catalog-motion-ready .product-card.reveal-visible {
  opacity:1;
  transform:translateY(0) scale(1);
  transition:opacity .46s ease, transform .52s cubic-bezier(.2,.75,.25,1), box-shadow .28s ease, border-color .28s ease;
}
.catalog-motion-ready .product-card.reveal-visible:hover { transform:translateY(-7px) scale(1); }

.empty-state { text-align:center; padding:52px 18px; color:var(--pc-muted); background:#fff; border:1px dashed #cbd5e1; border-radius:22px; }
.public-footer { margin-top:auto; background:#fff; border-top:1px solid var(--pc-line); padding:24px 0; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.footer-copy { font-size:.84rem; font-weight:750; color:#475569; }

/* Checkout */
.offcanvas-premium { width:min(520px,100vw)!important; border:0!important; box-shadow:-24px 0 70px rgba(15,23,42,.18); }
.checkout-head { padding:20px 22px; border-bottom:1px solid var(--pc-line); }
.checkout-body { padding:20px 22px; overflow:auto; }
.checkout-footer { padding:18px 22px; border-top:1px solid var(--pc-line); background:#fff; }
.cart-item { border:1px solid var(--pc-line); border-radius:16px; padding:14px; background:#fff; margin-bottom:10px; }
.qty-control { display:flex; border:1px solid var(--pc-line); border-radius:12px; overflow:hidden; }
.qty-control button { width:36px; height:34px; border:0; background:#f8fafc; }
.qty-control span { min-width:36px; display:grid; place-items:center; font-weight:800; font-size:.86rem; }
.form-control, .form-select { border-radius:13px; border-color:#dbe4ef; min-height:48px; }
.form-control:focus, .form-select:focus { border-color:#38bdf8; box-shadow:0 0 0 .22rem rgba(14,165,233,.12); }
.step-title { font-weight:900; margin-bottom:4px; }
.step-subtitle { color:var(--pc-muted); font-size:.84rem; }
.no-results { display:none; }

@keyframes imageShimmer { to { background-position:-220% 0; } }
@keyframes cardSuccess {
  0%,100% { box-shadow:0 12px 34px rgba(15,23,42,.06); }
  42% { box-shadow:0 0 0 5px rgba(16,185,129,.14), 0 22px 55px rgba(16,185,129,.14); }
}
@keyframes cartBounce {
  0%,100% { transform:scale(1); }
  45% { transform:scale(1.24); }
}
@keyframes heroShine {
  0%,72%,100% { transform:translateX(-115%); }
  84% { transform:translateX(115%); }
}

@media (max-width: 1199.98px) {
  .products-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
  .product-card { grid-template-rows:210px 1fr; }
  .product-media { height:210px; }
}

@media (max-width: 767.98px) {
  .header-inner { min-height:68px; gap:10px; }
  .brand { flex:1 1 auto; gap:10px; }
  .brand-logo { width:42px; height:42px; border-radius:13px; }
  .brand-copy { min-width:0; flex:1 1 auto; }
  .brand-title { font-size:.98rem; line-height:1.15; }
  .brand-subtitle { display:block; font-size:.72rem; margin-top:2px; }
  .header-actions { gap:6px; }
  .language-select { min-width:66px; width:66px; padding:0 27px 0 10px; font-size:.9rem; background-position:right 9px center; background-size:12px 12px; }
  .admin-action { width:44px; padding:0; }
  .admin-action span { display:none; }
  .hero { padding-top:18px; }
  .hero-panel { border-radius:24px; }
  .products-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
  .product-card { grid-template-rows:178px 1fr; border-radius:20px; }
  .product-media { height:178px; padding:10px; }
  .product-media-inner { border-radius:15px; }
  .product-body { padding:14px; min-height:210px; }
  .product-name { font-size:.96rem; }
  .product-description { font-size:.8rem; margin-bottom:15px; }
  .product-price { font-size:1.12rem; }
  .btn-add { min-height:44px; font-size:.86rem; }
  .footer-inner { justify-content:center; text-align:center; }
}

@media (max-width: 430px) {
  .container { --bs-gutter-x: 1rem; }
  .header-inner { min-height:64px; gap:8px; }
  .brand { gap:8px; }
  .brand-logo { width:40px; height:40px; border-radius:12px; }
  .brand-copy { min-width:0; }
  .brand-title { font-size:.94rem; line-height:1.08; max-width:none; }
  .brand-subtitle { font-size:.68rem; }
  .round-action, .language-select { height:42px; }
  .round-action { width:42px; }
  .header-actions { gap:4px; }
  .language-select { min-width:64px; width:64px; padding:0 26px 0 9px; font-size:.88rem; background-position:right 8px center; }
  .products-grid { grid-template-columns:1fr; gap:16px; }
  .product-card { grid-template-rows:238px 1fr; }
  .product-media { height:238px; padding:13px; }
  .product-body { padding:17px; min-height:205px; }
  .product-name { font-size:1.03rem; }
  .product-description { font-size:.84rem; }
  .hero-panel { padding:24px 20px; }
  .hero-title { font-size:1.75rem; }
  .offcanvas-premium { width:100vw!important; }
}


@media (max-width: 360px) {
  .container { --bs-gutter-x: .8rem; }
  .header-inner { gap:6px; }
  .brand-title { font-size:.88rem; }
  .brand-subtitle { font-size:.64rem; }
  .header-actions { gap:3px; }
  .language-select { min-width:62px; width:62px; padding:0 25px 0 8px; background-position:right 7px center; font-size:.86rem; }
  .round-action { width:40px; height:40px; border-radius:12px; }
}

@media (hover:none) {
  .product-card:hover { transform:none; box-shadow:0 12px 34px rgba(15,23,42,.06); border-color:rgba(203,213,225,.72); }
  .product-card:hover .product-image { transform:none; filter:none; }
  .catalog-motion-ready .product-card.reveal-visible:hover { transform:none; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
  .catalog-motion-ready .product-card.reveal-pending,
  .catalog-motion-ready .product-card.reveal-visible { opacity:1!important; transform:none!important; }
}