:root{
  --bg: #f6f6f6;
  --card: #ffffff;
  --text: #111111;
  --muted: rgba(0,0,0,.66);
  --border: rgba(0,0,0,.12);

  --primary: #111111;
  --ring: rgba(0,0,0,.10);

  --danger: #ff4d4d;
  --focus_ring: rgba(0,0,0,.14);
  --btn_text: #ffffff;

  --radius: 22px;
  --shadow: 0 18px 60px rgba(0,0,0,.10);
  --maxw: 1180px;
  --tap: 48px;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);

  --stackGap: clamp(14px, 3.2vw, 22px);
  --cardPad: clamp(18px, 3.6vw, 26px);
  --cardPadTop: clamp(14px, 3vw, 18px);

  --deskPadTop: clamp(28px, 5vh, 56px);
  --deskPadBot: clamp(22px, 4vh, 40px);

  --mobPadTop: clamp(16px, 4vh, 28px);
  --mobPadBot: clamp(16px, 5vh, 32px);

  --pagePadX: clamp(16px, 4vw, 28px);
}

*{ box-sizing: border-box; }

html{
  min-height: 100%;
  background: var(--bg);
}

body{
  min-height: 100vh;
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  -webkit-tap-highlight-color: transparent;
  background:
    radial-gradient(1100px 620px at 18% 0%, rgba(0,0,0,.03), transparent 62%),
    radial-gradient(1000px 560px at 82% 10%, rgba(0,0,0,.045), transparent 62%),
    var(--bg);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

a{
  color: inherit;
  text-decoration: none;
}

img{
  display: block;
  max-width: 100%;
}

.page{
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--stackGap);
  padding:
    calc(var(--deskPadTop) + var(--safe-t))
    calc(var(--pagePadX) + var(--safe-r))
    calc(var(--deskPadBot) + var(--safe-b))
    calc(var(--pagePadX) + var(--safe-l));
}

.card{
  width: 100%;
  max-width: var(--maxw);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: var(--cardPadTop) var(--cardPad);
  border-bottom: 1px solid var(--border);
}

.langButtons{
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  flex-wrap: nowrap;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}

.langBtn{
  appearance: none;
  border: 0;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  min-width: 58px;
  min-height: var(--tap);
  padding: 0 18px;
  border-radius: 0;
  font-weight: 900;
  letter-spacing: .2px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.langBtn:last-child{
  border-right: 0;
}

.langBtn:hover{
  background: rgba(0,0,0,.04);
}

.langBtn[aria-pressed="true"],
.langBtn.isActive{
  background: #111111;
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(0,0,0,.14);
}

.content{
  padding: clamp(20px, 3.4vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.badge{
  margin: 0;
  align-self: flex-start;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .25px;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(0,0,0,.02);
}

.title{
  margin: 0;
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1.04;
  letter-spacing: .2px;
  text-transform: uppercase;
}

.subtitle{
  margin: 0;
  color: var(--muted);
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.68;
  max-width: 68ch;
}

.box{
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: clamp(14px, 2vw, 18px);
  background: rgba(0,0,0,.015);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.boxTitle{
  margin: 0;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .2px;
  text-transform: uppercase;
}

.fine{
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.footer{
  width: 100%;
  max-width: var(--maxw);
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.footer p{
  margin: 0;
}

.cartPanel{
  position: fixed;
  top: 24px;
  right: 24px;
  width: min(380px, calc(100vw - 24px));
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 60px rgba(0,0,0,.16);
  backdrop-filter: blur(12px);
  z-index: 40;
}

.cartPanelHeader,
.checkoutHeader{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.cartPanelBadge,
.checkoutBadge{
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--muted);
}

.cartPanelTitle,
.checkoutTitle{
  margin: 0;
  font-size: 24px;
  line-height: 1.05;
}

.cartCloseBtn{
  appearance: none;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  width: 42px;
  height: 42px;
  border-radius: 14px;
  font-size: 24px;
  cursor: pointer;
}

button.btnPrimary{
  min-height: var(--tap);
  border-radius: 12px;
  border: 1px solid var(--text);
  padding: 12px 16px;
  font-weight: 900;
  letter-spacing: .2px;
  cursor: pointer;
  color: var(--btn_text);
  box-shadow: 0 10px 26px rgba(0,0,0,.16);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--text);
}

button.btnPrimary:active{
  transform: translateY(1px);
}

button.btnPrimary:disabled{
  opacity: .65;
  cursor: not-allowed;
}

.cartEmpty{
  padding: 10px 0 4px;
}

.cartEmptyTitle,
.cartEmptyText,
.checkoutSectionTitle{
  margin: 0;
}

.cartEmptyTitle{
  font-weight: 800;
  margin-bottom: 4px;
}

.cartEmptyText{
  color: var(--muted);
  line-height: 1.5;
}

.cartItems{
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: auto;
  padding-right: 4px;
}

.cartItem{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(0,0,0,.02);
}

.cartItemTitle{
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 800;
}

.cartItemMeta,
.cartItemLimit{
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.qtyStepper{
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.qtyBtn{
  appearance: none;
  border: 0;
  background: transparent;
  min-width: 42px;
  height: 42px;
  font-size: 20px;
  cursor: pointer;
  color: var(--text);
}

.qtyBtn[disabled]{
  opacity: .45;
  cursor: not-allowed;
}

.qtyValue{
  min-width: 42px;
  text-align: center;
  font-weight: 900;
  font-size: 14px;
  color: #111111 !important;
}

.cartFooter{
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 4px;
}

.cartTotals{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cartTotalsRow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}

.cartTotalsRowTotal{
  font-size: 16px;
  font-weight: 900;
}

.cartCheckoutBtn,
.cartFab{
  appearance: none;
  border: 0;
  border-radius: 16px;
  background: #111111;
  color: #ffffff;
  min-height: 50px;
  padding: 0 18px;
  font-weight: 900;
  cursor: pointer;
}

.cartCheckoutBtn[disabled]{
  opacity: .5;
  cursor: not-allowed;
}

.cartFab{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 39;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
}

.modalOverlay{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,.48);
  z-index: 60;
}

.checkoutModal{
  width: min(920px, 100%);
  max-height: calc(100dvh - 36px);
  overflow: auto;
  border-radius: 24px;
  background: #ffffff;
  color: #111111;
  padding: 22px;
  box-shadow: 0 28px 80px rgba(0,0,0,.28);
}

.checkoutBody{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  margin-top: 18px;
}

.checkoutSummary,
.checkoutForm{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.checkoutSectionTitle{
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .2px;
}

.checkoutSummaryItems{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.checkoutSummaryItem{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
}

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

.field span{
  font-size: 13px;
  font-weight: 700;
}

.field input{
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0 14px;
  font: inherit;
}

.checkoutError{
  margin: 0;
  color: #b00020;
  font-size: 13px;
  line-height: 1.5;
}

.productActions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

@media (max-width: 1080px){
  .checkoutBody{
    grid-template-columns: 1fr;
  }

  .cartPanel{
    top: auto;
    right: 16px;
    left: 16px;
    bottom: 84px;
    width: auto;
    max-height: 62dvh;
  }

  .cartFab{
    right: 16px;
    bottom: 16px;
  }
}

.isHidden, .hidden{
  display: none !important;
}

/* ===== MODAL (erro) ===== */
.modal{
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: var(--padX);
}

.modalBackdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.58);
}

.modalCard{
  position: relative;
  width: min(560px, 100%);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;

  padding: 18px 18px 16px;
}

.modalHeader{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.modalBadge{
  align-self: flex-start;
  margin: 0;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .25px;
  text-transform: uppercase;
  background: rgba(0,0,0,.02);
  color: var(--muted);
}

.modalTitle{
  margin: 0;
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1.1;
}

.modalMsg{
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 14px;
}

.modalActions{
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}

.modal[data-tone="error"] .modalBadge{
  color: var(--danger);
  border-color: rgba(255, 77, 77, .45);
  background: rgba(255, 77, 77, .10);
}

.modalCard :focus{
  outline: none;
}

.modalCard :focus-visible{
  box-shadow: 0 0 0 4px var(--focus_ring);
}

/* LISTA DE CARTÕES */
.cardsGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.productCard{
  --card-accent: #CAA64B;
  --card-bg: #FFFFFF;
  --card-surface: rgba(202, 166, 75, .08);
  --card-text: #111111;
  --card-muted: rgba(0,0,0,.68);
  --card-border: rgba(202, 166, 75, .24);
  --card-button-bg: #111111;
  --card-button-text: #FFFFFF;
  --card-price: #111111;

  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  border: 1px solid var(--card-border);
  border-radius: 18px;
  background: var(--card-bg);
  color: var(--card-text);
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}

.productMedia{
  aspect-ratio: 4 / 3;
  background:
    linear-gradient(180deg, transparent, rgba(0,0,0,.08)),
    var(--card-surface);
  border-bottom: 1px solid var(--card-border);
  overflow: hidden;
}

.productMedia img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.productMediaFallback{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--card-muted);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .2px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(0,0,0,.06)),
    var(--card-surface);
}

.productBody{
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
}

.productTop{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.productName{
  margin: 0;
  font-size: 21px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: .1px;
}

.productDesc{
  margin: 0;
  color: var(--card-muted);
  font-size: 14px;
  line-height: 1.45;
}

.productDesc:empty{
  display: none;
}

.productSummary{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 0;
  color: var(--card-text);
  font-size: 15px;
  line-height: 1.35;
}

.productSummaryQty{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--card-accent);
  color: var(--card-button-text);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .15px;
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
}

.productSummaryProduct{
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -.1px;
  color: var(--card-text);
}

.productValidity{
  margin: 2px 0 0;
  color: var(--card-muted);
  font-size: 12px;
  line-height: 1.45;
}

.priceRow{
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  padding-top: 2px;
  margin-top: auto;
}

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

.priceLabel{
  margin: 0;
  color: var(--card-text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.priceValue{
  margin: 0;
  font-size: 26px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.3px;
  color: var(--card-price);
}

.buyBtn{
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--card-border);
  background: var(--card-button-bg);
  color: var(--card-button-text);
  font-weight: 900;
  letter-spacing: .2px;
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
  transition: transform .12s ease, filter .18s ease, box-shadow .18s ease;
}

.buyBtn:hover{
  filter: brightness(.98);
  box-shadow: 0 12px 26px rgba(0,0,0,.16);
}

.buyBtn:active{
  transform: translateY(1px);
}

/* ESTADO VAZIO */
.emptyState{
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  border: 0;
  background: transparent;
}

.emptyTitle{
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 900;
}

.emptyText{
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
  max-width: 68ch;
}

.actions{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.btn{
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #ffffff;
  color: #111111;
  font-weight: 900;
  letter-spacing: .2px;
  transition: transform .12s ease, background .18s ease, box-shadow .18s ease;
}

.btn:hover{
  background: rgba(0,0,0,.04);
}

.btn:active{
  transform: translateY(1px);
}

@media (max-width: 1080px){
  .cardsGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px){
  .page{
    justify-content: center;
    padding:
      calc(var(--mobPadTop) + var(--safe-t))
      calc(var(--pagePadX) + var(--safe-r))
      calc(var(--mobPadBot) + var(--safe-b))
      calc(var(--pagePadX) + var(--safe-l));
  }

  .content{
    padding: 18px 16px;
    gap: 16px;
  }

  .title{
    font-size: clamp(26px, 8vw, 38px);
  }

  .subtitle{
    font-size: 15px;
    line-height: 1.62;
  }

  .cardsGrid{
    grid-template-columns: 1fr;
  }

  .buyBtn{
    width: 100%;
  }

  .priceRow{
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 520px){
  .top{
    flex-direction: column;
    align-items: stretch;
  }

  .langButtons{
    align-self: flex-end;
  }
}

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

.paymentMethodsSection {
  margin-top: 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 18px;
}

.paymentMethodsTitle {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 800;
  color: #111111;
}

.paypalButtonsContainer{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.paypalButtonSlot{
  width:100%;
  min-height:48px;
  margin:0;
  padding:0;
}

.paypalButtonSlot > *{
  width:100%;
}

.googlePayButtonSlot{
  width:100%;
}

.googlePayButtonSlot > div,
.googlePayButtonSlot button{
  display:block;
  width:100% !important;
  min-width:100% !important;
  margin:0 !important;
}

.applePayButtonSlot{
  width:100%;
  min-height:48px;
}

.applePayButtonSlot .apple-pay-button,
.applePayVisualButton{
  display:block;
  width:100%;
  height:48px;
  margin:0;
  padding:0;
  border:0;
  border-radius:12px;
  cursor:pointer;
  background:transparent;
}

.paymentMethodsGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.paymentMethodCard {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 64px;
  padding: 14px 18px;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #ffffff;
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.paymentMethodCard:not(.disabled):hover {
  transform: translateY(-1px);
  border-color: rgba(0, 0, 0, 0.22);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.paymentMethodCard.disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.paymentMethodLabel {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  color: #111111;
}

.paymentMethodsHint {
  margin: 14px 0 0;
  font-size: 13px;
  color: #666666;
}

.cardFieldsSection {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.02);
}

.checkoutBodySingle {
  display: block;
}

.cardPaymentModal {
  max-width: 640px;
}

.copyCheckoutBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  margin: 0 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #ffffff;
  font-size: 14px;
  font-weight: 700;
  color: #111111;
  cursor: pointer;
}

.copyCheckoutBtn:hover {
  border-color: rgba(0, 0, 0, 0.22);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.cardFieldsTitle {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 800;
  color: #111111;
}

.cardFieldsGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.cardFieldsGrid .field > span {
  display: inline-block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
}

.paypalHostedField {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
}

.paypalHostedField iframe {
  width: 100% !important;
  min-height: 20px !important;
  border: 0 !important;
}

#cardFieldsSubmitBtn {
  margin-top: 10px;
  padding: 12px 18px;
  min-height: auto;
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 640px) {
  .paymentMethodsGrid {
    grid-template-columns: 1fr;
  }
}