:root {
  --gold-dark: #7c5c12; /* dourado escuro */
  --bg: #dadada;
  --text: #191919;
  --muted: #6b7280;
  --card: #ffffffb3;    /* white/70 */
  --ring: #e5e7eb;      /* neutral-200 */
}

/* Base */
* { box-sizing: border-box; }
html, body {
  background: #dadada !important;
}
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  color: var(--text);
}
.container { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

/* Header (desktop) */
.header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
}
.logo { height: 48px; width: auto; display: block; margin: 0 auto; }
.logo-wrap { justify-self: center; }
.actions { display: contents; }
.actions-left { grid-column: 1; justify-self: start; display: flex; gap: 12px; align-items: center; }
.actions-right{ grid-column: 3; justify-self: end;   display: flex; gap: 12px; align-items: center; }

.link { background: transparent; border: none; cursor: pointer; font-weight: 600; }
.btn { border: none; cursor: pointer; padding: 10px 16px; border-radius: 12px; font-weight: 700; color: #fff; }
.btn-outline {
  background: transparent;
  border: 2px solid var(--gold-dark);
  color: var(--gold-dark);
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.header .btn-outline:hover { background: rgba(124, 92, 18, .08); }
.gold { color: var(--gold-dark); }
.gold-bg { background: var(--gold-dark); }

/* Número do carrinho */
#cartCount {
  font-weight: 800;
  padding-left: 6px;
  background: var(--gold-dark);
  color:#fff;
  border-radius:999px;
  font-size:12px;
  padding: 2px 6px;
}

/* Hero */
.hero { text-align: center; padding: 40px 0; }
.title { font-size: clamp(28px, 4vw, 48px); margin: 0; }
.subtitle { color: var(--muted); margin: 8px 0 16px; }
.art img { height: clamp(64px, 8vw, 96px); opacity: .9; }

/* Cards e tipografia */
.card {
  background: var(--card);
  border: 1px solid var(--ring);
  backdrop-filter: blur(6px);
  padding: 16px;
  border-radius: 16px;
}
.h2 { font-size: 22px; margin: 0 0 6px; }
.h3 { font-size: 20px; margin: 0 0 12px; }
.muted { color: var(--muted); }
.grid { display: grid; gap: 10px; }
.grid input[type="text"], .grid input[type="email"], .grid input[type="password"] {
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--ring); background: #fff; outline: none;
}
.check { text-align: left; font-size: 14px; color: var(--text); }

/* Categorias */
.section { margin: 28px 0; }
.categories {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.category {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px;
  border: 1px solid var(--ring);
  border-radius: 16px;
  background: var(--card);
}
.category h4 { margin: 0; font-size: 16px; color: var(--gold-dark); }
.category p  { margin: 0; font-size: 14px; color: var(--muted); }
.category .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; }

/* Breadcrumb */
.breadcrumb { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.breadcrumb .sep { margin: 0 8px; color: #8a7a3c; }

/* Produtos */
.cat-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.item {
  background: #fff;
  border: 1px solid var(--ring);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 🔥 IMAGEM DO PRODUTO — NÃO CORTA MAIS */
.item img {
  width: 100%;
  height: auto;
  object-fit: contain;
  background: #f9f9f9;
  border-radius: 10px;
  border: 1px solid var(--ring);
  padding: 6px;
}

.item h5 { margin: 0; font-size: 15px; color: var(--gold-dark); }
.item p  { margin: 0; font-size: 13px; color: var(--muted); }
.item .row { display: flex; justify-content: space-between; align-items: center; }
.price { font-weight: 700; color: var(--text); }

/* Variações */
.sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.size-pill {
  border: 1px solid var(--ring);
  background: #fff;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
}
.size-pill.active { border-color: var(--gold-dark); color: var(--gold-dark); font-weight: 700; }

.colors { display: flex; gap: 8px; align-items: center; }
.swatch {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--ring);
  cursor: pointer;
}
.swatch.active { box-shadow: 0 0 0 2px var(--gold-dark); }

/* Gaveta do carrinho */
.cart { position: fixed; inset: 0; background: #0006; display: grid; place-items: stretch; z-index: 60; }
.cart.hidden { display: none; }
.cart__panel {
  margin-left: auto; height: 100%; width: min(410px, 100%);
  background: #fff; color: var(--text); display: grid; grid-template-rows: auto 1fr auto;
  box-shadow: -6px 0 24px #0003;
}
.cart__header { display:flex; justify-content: space-between; align-items:center; padding:14px 16px; border-bottom:1px solid var(--ring); }
.cart__close { background: transparent; border: none; font-size: 18px; color: var(--muted); cursor: pointer; }
.cart__items { overflow-y: auto; padding: 10px 12px; display: grid; gap: 10px; }
.cart__item { display:grid; grid-template-columns: 72px 1fr auto; gap: 10px; border:1px solid var(--ring); border-radius:12px; padding: 8px; background:#fff; }
.cart__thumb {
  width:72px; height:72px;
  border-radius:8px;
  object-fit:contain; /* atualizado */
  border:1px solid var(--ring);
  background:#f9f9f9;
}
.cart__meta { display:flex; flex-direction:column; gap:4px; }
.cart__title { font-weight:700; color: var(--gold-dark); font-size: 14px; margin:0; }
.cart__variant { color: var(--muted); font-size:12px; }
.cart__qty { display:flex; align-items:center; gap:6px; }
.qty-btn { width:26px; height:26px; border:1px solid var(--ring); border-radius:8px; background:#fff; cursor:pointer; }
.cart__price { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.cart__remove { background:transparent; border:none; color:#b91c1c; cursor:pointer; font-size:12px; }
.cart__footer { border-top:1px solid var(--ring); padding: 12px 16px; display:grid; gap:10px; }
.cart__row { display:flex; justify-content: space-between; align-items:center; }

/* Footer */
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 24px 0 40px;
  color: var(--muted);
}
.footer a { color: inherit; margin-left: 14px; text-decoration: underline; }

/* Utilidades */
.hidden { display: none !important; }
.header a { pointer-events: auto; }

/* =========================
   RESPONSIVIDADE
========================= */

@media (max-width: 900px) {
  .categories { grid-template-columns: repeat(2,1fr); }
  .cat-items  { grid-template-columns: repeat(2,1fr); }
  .header .btn-outline { padding: 8px 12px; }
  .actions-left, .actions-right { gap: 8px; }
}

/* Mobile compacto: 600px */
@media (max-width: 600px) {
  .header {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 10px;
    padding: 14px 0;
  }

  .actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
  }

  .actions-left, .actions-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .header .btn-outline {
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 10px;
  }

  /* Imagens no mobile — SEM cortar */
  .item img {
    height: auto !important;
    object-fit: contain !important;
  }

  .cat-items { grid-template-columns: 1fr; }
}

/* Mobile pequeno: 520px */
@media (max-width: 520px) {
  .categories { grid-template-columns: 1fr; }
  .cat-items  { grid-template-columns: 1fr; }
}

/* Polish */
:root { --radius-sm: 10px; --radius-md: 12px; }
button:active { transform: scale(.98); }

/* Header menor */
@media (max-width: 720px) {
  .logo { height: 40px; }
}

/* Smartphones estreitos */
@media (max-width: 480px) {
  .item img {
    height: auto !important;
    object-fit: contain !important;
  }
}

/* =========================
   ESTILO COMPLETO: FRETE
========================= */

.shipping-card {
  background: var(--card);
  border: 1px solid var(--ring);
  border-radius: 16px;
  padding: 20px;
  backdrop-filter: blur(4px);
}

.shipping-card h1 {
  margin-top: 0;
  color: var(--gold-dark);
  font-size: 22px;
  text-align: center;
}

.shipping-form {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.field label {
  font-weight: 600;
  color: var(--text);
  font-size: 14px;
}

.field input {
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--ring);
  border-radius: 12px;
  font-size: 14px;
  outline: none;
}

.field input:focus {
  border-color: var(--gold-dark);
}

.shipping-options {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.ship-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--ring);
  cursor: pointer;
  transition: border-color .2s;
}

.ship-option:hover {
  border-color: var(--gold-dark);
}

.ship-option input[type="radio"] {
  transform: scale(1.3);
  accent-color: var(--gold-dark);
}

.ship-option span { font-size: 13px; color: var(--muted); }

#btnConfirmShipping {
  width: 100%;
  margin-top: 18px;
  background: var(--gold-dark);
  color: #fff;
  padding: 12px;
  font-size: 16px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-weight: 700;
}

#shippingResume {
  margin-top: 6px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 600px) {
  .shipping-card { padding: 16px; }
  .ship-option { flex-direction: row; gap: 10px; padding: 12px; }
}

/* =========================
   ANIMAÇÃO: Fade-In Suave
========================= */

.fade-in {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInUp 0.8s ease forwards;
}

.delay-1 { animation-delay: .1s; }
.delay-2 { animation-delay: .2s; }
.delay-3 { animation-delay: .3s; }
.delay-4 { animation-delay: .4s; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================
   EFEITO DOURADO LXN
========================= */

.gold-glow {
  position: relative;
  display: inline-block;
  background: linear-gradient(90deg, #7c5c12, #c89d3c, #7c5c12);
  background-size: 200% auto;
  -webkit-background-clip: text;
  color: transparent;
  animation: goldMove 3s linear infinite;
}

@keyframes goldMove {
  from { background-position: 0% center; }
  to   { background-position: 200% center; }
}

/* ==========================================
   GOLD BAR 3D + TEXT LOOP — LXN PREMIUM
========================================== */

.gold-bar-wrap {
  width: 100%;
  margin: 30px 0 40px;
  display: flex;
  justify-content: center;
}

.gold-bar {
  position: relative;
  width: min(480px, 100%);
  height: 52px;
  border-radius: 999px;
  overflow: hidden;

  background: linear-gradient(
    90deg,
    #6b5110,
    #b48a33,
    #f3dfaa,
    #b48a33,
    #6b5110
  );
  background-size: 200% 100%;
  animation: goldBarFlow 9s linear infinite;

  box-shadow:
    0 10px 18px rgba(0,0,0,0.18),
    0 0 0 1px rgba(255,255,255,0.3) inset,
    0 0 18px rgba(226, 190, 96, 0.8);
}

/* texto deslizando */
.gold-text-loop {
  position: absolute;
  white-space: nowrap;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  font-size: 18px;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 0 8px rgba(0,0,0,0.4);

  animation: goldTextMove 8s linear infinite;
}

/* brilho passando */
.gold-bar::before {
  content: "";
  position: absolute;
  inset: -20%;
  width: 40%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255,255,255,0.95) 40%,
    rgba(255,255,255,0.6) 55%,
    transparent 80%
  );
  transform: translateX(-150%);
  animation: goldBarShine 3.5s linear infinite;
  opacity: 0.85;
  pointer-events: none;
}

/* animações */
@keyframes goldBarFlow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes goldBarShine {
  0%   { transform: translateX(-150%); }
  100% { transform: translateX(150%); }
}

@keyframes goldTextMove {
  0%   { transform: translate(100%, -50%); }
  100% { transform: translate(-100%, -50%); }
}

/* mobile */
@media (max-width: 600px) {
  .gold-bar {
    height: 44px;
  }
  .gold-text-loop {
    font-size: 16px;
  }
}