/* ───────────────────────────────────────────────────────────────────────
   Clube da Figurinha — design tokens + utilitários + responsivo
   ─────────────────────────────────────────────────────────────────────── */
@import url('../../css2');

:root{
  --paper:        #F5F1E8;
  --paper-2:      #ECE6D6;
  --ink:          #0F1614;
  --ink-2:        #1B2521;
  --line:         #0F161422;
  --line-strong:  #0F161455;

  --pitch:        #0E5A38;
  --pitch-deep:   #093821;
  --gold:         #F2C200;
  --gold-deep:    #C49A00;
  --sale:         #E64545;
  --pix:          #32BCAD;

  --f-display: 'Anton', 'Archivo Black', sans-serif;
  --f-body:    'Plus Jakarta Sans', sans-serif;
  --f-mono:    'JetBrains Mono', monospace;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px #0f161410, 0 2px 8px #0f161408;
  --shadow-md: 0 4px 12px #0f161418, 0 12px 32px #0f161410;
  --shadow-lg: 0 12px 32px #0f161422, 0 32px 80px #0f161418;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: var(--f-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }

/* ── Tipos / helpers ─────────────────────────────────────────── */
.cf-display{ font-family: var(--f-display); font-weight: 400; letter-spacing:.01em; line-height:.92; text-transform: uppercase; }
.cf-mono{ font-family: var(--f-mono); }
.cf-eyebrow{ font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); opacity:.7; }

.cf-link { cursor:pointer; transition:opacity .15s; text-decoration:none; color:inherit; }
.cf-link:hover { opacity:.65; }

.cf-img{
  background-color: var(--paper-2);
  background-image: repeating-linear-gradient(135deg,
    transparent 0 14px, #0f161410 14px 15px);
  position: relative;
  overflow: hidden;
}
.cf-img .cf-img-label{
  position: absolute; left: 12px; bottom: 10px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing:.14em;
  text-transform: uppercase; color: var(--ink); opacity:.7;
}

/* ── Botões ──────────────────────────────────────────────────── */
.cf-btn{
  display: inline-flex; align-items:center; justify-content:center; gap:8px;
  height: 48px; padding: 0 22px;
  border-radius: var(--r-pill);
  background: var(--ink); color: var(--paper);
  font-family: var(--f-body); font-weight: 600; font-size: 14px;
  letter-spacing: .02em; border: none; cursor: pointer;
  transition: transform .15s ease;
  text-decoration: none;
}
.cf-btn:hover{ transform: translateY(-1px); }
.cf-btn--gold{ background: var(--gold); color: var(--ink); }
.cf-btn--pitch{ background: var(--pitch); color: var(--paper); }
.cf-btn--ghost{ background: transparent; color: var(--ink); border: 1px solid var(--line-strong); }

.cf-tag{
  display:inline-flex; align-items:center; gap:6px;
  height: 24px; padding: 0 10px; border-radius: var(--r-pill);
  font-family: var(--f-mono); font-size: 10px; letter-spacing:.16em;
  text-transform: uppercase;
}
.cf-tag--sale{ background: var(--sale); color: #fff; }
.cf-tag--pitch{ background: var(--pitch); color: var(--paper); }
.cf-tag--gold{ background: var(--gold); color: var(--ink); }
.cf-tag--ghost{ background: transparent; color: var(--ink); border: 1px solid var(--line-strong); }

/* ── Inputs ──────────────────────────────────────────────────── */
.cf-input {
  height:48px; padding:0 14px; border:1px solid var(--line-strong);
  border-radius:var(--r-sm); font-family:var(--f-body);
  font-size:14px; background:var(--paper); color:var(--ink); width:100%;
}
.cf-input:focus { outline:2px solid var(--ink); outline-offset:-2px; }
.cf-input--mono { font-family:var(--f-mono); font-weight:500; }
.cf-input--locked { background:var(--paper-2); color:#0F161499; border-color:var(--line); }

.cf-label { display:flex; flex-direction:column; gap:6px; }
.cf-label-text {
  font-family:var(--f-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; opacity:.7;
}

.cf-msg {
  padding:14px 22px; border-radius:var(--r-md); margin-bottom:14px;
  font-size:14px; line-height:1.5;
}
.cf-msg--error { background:#FCE6E6; border:1px solid var(--sale); color:var(--sale); }
.cf-msg--success { background:#DFF5E5; border:1px solid var(--pitch); color:var(--pitch-deep); }
.cf-msg--info { background:var(--paper-2); border:1px solid var(--line); }

/* ── Page wrapper ────────────────────────────────────────────── */
.cf-page {
  width:100%; max-width:1440px; margin:0 auto; background:var(--paper);
  overflow-x: hidden;
}

/* ── Topbar ──────────────────────────────────────────────────── */
.cf-announce {
  background:var(--gold); color:var(--ink); font-family:var(--f-mono);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  padding:8px 24px; display:flex; justify-content:space-between;
  align-items:center; flex-wrap:wrap; gap:8px;
}
.cf-topbar {
  background:var(--paper); color:var(--ink); padding:18px 32px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--line); gap:18px; position:relative; z-index:20;
}
.cf-topbar-logo { display:inline-flex; align-items:center; gap:10px; color:inherit; text-decoration:none; flex-shrink:0; }
.cf-shield {
  width:32px; height:32px; background:var(--ink); color:var(--paper);
  clip-path:polygon(50% 0,100% 14%,100% 70%,50% 100%,0 70%,0 14%);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.cf-shield--invert { background:var(--paper); }
.cf-shield-mono { font-size:19px; color:var(--gold); }
.cf-topbar-name { display:flex; flex-direction:column; line-height:1; font-size:17px; }
.cf-topbar-name span:nth-child(2) { margin-top:2px; }
.cf-topbar-nav { display:flex; gap:32px; font-size:14px; font-weight:500; }
.cf-topbar-actions { display:flex; align-items:center; gap:14px; }
body.cf-nav-open {
  position:fixed; left:0; right:0; width:100%; overflow:hidden; touch-action:none;
}
.cf-cart-btn {
  min-height:42px; display:inline-flex; align-items:center; gap:9px;
  border:1px solid var(--line-strong); border-radius:var(--r-pill);
  background:var(--paper); color:var(--ink); padding:0 13px 0 11px;
  font-size:13px; font-weight:700; opacity:1;
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.cf-cart-btn:hover,
.cf-cart-btn:focus {
  background:var(--ink); border-color:var(--ink); color:var(--paper); opacity:1; outline:none;
}
.cf-cart-icon {
  width:22px; height:22px; display:grid; place-items:center; flex:0 0 auto;
}
.cf-cart-icon svg { width:19px; height:19px; display:block; }
.cf-cart-label { line-height:1; }
.cf-cart-badge {
  min-width:24px; height:24px; padding:0 7px; border-radius:var(--r-pill);
  background:var(--gold); color:var(--ink); display:inline-flex; align-items:center;
  justify-content:center; font-family:var(--f-mono); font-size:11px; letter-spacing:.08em;
  font-weight:800; line-height:1;
}
.cf-mobile-nav { display:none; position:relative; }
.cf-mobile-nav summary { list-style:none; }
.cf-mobile-nav summary::-webkit-details-marker { display:none; }
.cf-mobile-nav-trigger {
  width:42px; height:42px; border:1px solid var(--line-strong);
  border-radius:var(--r-pill); background:var(--paper); color:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; cursor:pointer; position:relative; z-index:46;
  transition:background .15s, border-color .15s, color .15s;
}
.cf-mobile-nav-trigger span {
  width:18px; height:2px; border-radius:99px; background:currentColor;
  transition:transform .2s ease, opacity .2s ease;
}
.cf-mobile-nav-trigger:hover,
.cf-mobile-nav-trigger:focus {
  border-color:var(--ink); outline:none;
}
.cf-mobile-nav[open] .cf-mobile-nav-trigger {
  background:var(--ink); color:var(--paper); border-color:var(--ink);
}
.cf-mobile-nav[open] .cf-mobile-nav-trigger span:nth-child(1) {
  transform:translateY(7px) rotate(45deg);
}
.cf-mobile-nav[open] .cf-mobile-nav-trigger span:nth-child(2) {
  opacity:0;
}
.cf-mobile-nav[open] .cf-mobile-nav-trigger span:nth-child(3) {
  transform:translateY(-7px) rotate(-45deg);
}
.cf-mobile-nav-scrim { display:none; }
.cf-mobile-nav[open] .cf-mobile-nav-scrim {
  display:block; position:fixed; inset:0; z-index:38;
  background:rgba(15, 22, 20, .58); backdrop-filter:blur(2px);
}
.cf-mobile-nav-panel {
  position:fixed; right:18px; top:92px; z-index:45;
  width:min(360px, calc(100vw - 28px)); max-height:calc(100vh - 108px);
  max-height:calc(100dvh - 108px);
  overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  background:var(--ink);
  color:var(--paper); border:1px solid #ffffff18; border-radius:var(--r-md);
  box-shadow:var(--shadow-lg); padding:10px; display:grid; gap:4px;
}
.cf-mobile-nav-panel::before {
  content:''; position:absolute; top:-7px; right:16px; width:14px; height:14px;
  background:var(--ink); border-left:1px solid #ffffff18;
  border-top:1px solid #ffffff18; transform:rotate(45deg);
}
.cf-mobile-nav-head {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:8px 10px 12px; margin-bottom:4px; border-bottom:1px solid #ffffff18;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:#ffffffa8;
}
.cf-mobile-nav-panel a {
  min-height:50px; padding:0 14px; border-radius:8px; color:inherit;
  text-decoration:none; display:flex; align-items:center; justify-content:space-between;
  gap:18px; border:1px solid transparent; font-size:14px; font-weight:700;
}
.cf-mobile-nav-panel a:hover,
.cf-mobile-nav-panel a:focus {
  background:#ffffff10; border-color:#ffffff18; outline:none;
}
.cf-mobile-nav-index {
  font-family:var(--f-mono); font-size:10px; letter-spacing:.14em;
  opacity:.48; font-weight:700;
}
.cf-mobile-nav-panel .cf-mobile-nav-cart {
  min-height:58px; background:var(--gold); color:var(--ink); margin-top:6px;
  border-color:#00000014;
}
.cf-mobile-nav-cart-badge {
  display:inline-flex; align-items:center; gap:8px;
}
.cf-mobile-nav-cart-badge svg {
  width:18px; height:18px; display:block;
}
.cf-mobile-nav-cart-badge strong {
  min-width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-pill); background:var(--ink); color:var(--paper);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; line-height:1; font-weight:800;
}

/* ── Footer ──────────────────────────────────────────────────── */
.cf-footer { background:var(--ink); color:var(--paper); padding:56px 32px 24px; }
.cf-footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px; }
.cf-footer-link { display:block; font-size:13px; margin-bottom:8px; opacity:.85; text-decoration:none; color:inherit; }
.cf-footer-bottom {
  margin-top:48px; padding-top:24px; border-top:1px solid #ffffff18;
  display:flex; justify-content:space-between; gap:18px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; opacity:.55; flex-wrap:wrap;
}

.cf-whatsapp-btn {
  display: none !important;
  position:fixed; right:22px; bottom:22px; z-index:60;
  min-height:52px; padding:0 18px 0 15px; border-radius:var(--r-pill);
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:#25D366; color:#0B2415; text-decoration:none; font-weight:800;
  font-size:14px; box-shadow:0 10px 26px #0f16142b;
  border:1px solid #0b24151f;
  transition:transform .15s ease, box-shadow .15s ease;
}
.cf-whatsapp-btn:hover,
.cf-whatsapp-btn:focus {
  transform:translateY(-2px);
  box-shadow:0 14px 34px #0f161438;
  outline:none;
}
.cf-whatsapp-btn svg {
  width:24px; height:24px; display:block; flex:0 0 auto;
}

/* ── Cards ───────────────────────────────────────────────────── */
.cf-product-card { transition: transform .15s; }
.cf-product-card:hover { transform: translateY(-2px); }
.cf-product-img { box-shadow: var(--shadow-sm); }

/* ── Combo builder ───────────────────────────────────────────── */
.cf-combo-cover {
  cursor:pointer; padding:8px; border-radius:var(--r-md);
  border:1px solid var(--line); display:block;
  transition: border-color .15s, background .15s;
}
.cf-combo-cover.is-active {
  border:2px solid var(--ink);
  background:var(--paper-2);
  padding:7px;
}
.cf-pay-opt {
  cursor:pointer; padding:14px 16px; border-radius:var(--r-md);
  border:1px solid var(--line); font-weight:600; font-size:13px;
  text-align:center; display:block; transition: border-color .15s, background .15s;
}
.cf-pay-opt.is-active {
  border:2px solid var(--ink);
  background:var(--paper-2);
  padding:13px 15px;
}

/* ── Stepper (checkout) ──────────────────────────────────────── */
.cf-stepper { display:grid; grid-template-columns:1fr 1fr 1fr; border-bottom:1px solid var(--line); }
.cf-stepper-cell {
  padding:22px 32px; display:flex; align-items:center; gap:16px;
  border-right:1px solid var(--line); text-decoration:none; color:inherit;
}
.cf-stepper-cell:last-child { border-right:none; }
.cf-stepper-cell.is-active { background:var(--ink); color:var(--paper); }

/* ── Responsive ──────────────────────────────────────────────── */
.cf-hide-md, .cf-hide-sm { display:inline; }

@media (max-width: 980px) {
  .cf-hide-md { display:none !important; }

  .cf-topbar { padding:14px 18px; gap:12px; flex-wrap:nowrap; }
  .cf-topbar-nav { display:none; }
  .cf-topbar-name { display:none; }
  .cf-mobile-nav { display:block; }

  .cf-footer { padding:40px 22px 18px; }
  .cf-footer-grid { grid-template-columns: 1fr 1fr; gap:32px; }

  /* Recolhe TODA grid inline para 1 coluna em telas medianas. */
  .cf-page div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* Protege o grid de álbuns do combo builder */
  .cf-page .cb-albums {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .cf-page .cf-keep-cols-2[style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
  }

  .cf-display[style*="font-size:148px"],
  .cf-display[style*="font-size:140px"] { font-size: clamp(48px, 12vw, 88px) !important; }
  .cf-display[style*="font-size:88px"]  { font-size: clamp(40px, 10vw, 64px) !important; }
  .cf-display[style*="font-size:80px"]  { font-size: clamp(36px, 9vw, 56px) !important; }
  .cf-display[style*="font-size:72px"]  { font-size: clamp(36px, 8vw, 56px) !important; }
  .cf-display[style*="font-size:64px"]  { font-size: clamp(32px, 7vw, 48px) !important; }
  .cf-display[style*="font-size:56px"]  { font-size: clamp(28px, 6vw, 44px) !important; }
  .cf-display[style*="font-size:48px"]  { font-size: clamp(28px, 5.5vw, 40px) !important; }

  .cf-page > div[style*="padding:80px 56px"],
  .cf-page > div[style*="padding:72px 56px"],
  .cf-page > div[style*="padding:56px 56px"],
  .cf-page > div[style*="padding:48px 56px"] { padding: 32px 18px !important; }
  .cf-page > div[style*="padding:40px 56px"] { padding: 24px 18px !important; }
  .cf-page > div[style*="56px 80px"] { padding: 32px 18px !important; }
  .cf-page div[style*="padding:56px"],
  .cf-page div[style*="padding:48px"] { padding: 24px 18px !important; }
}

@media (max-width: 600px) {
  .cf-hide-sm { display:none !important; }
  .cf-announce { font-size:9px; padding:6px 14px; gap:4px; }
  .cf-announce span:not(:first-child) { display:none; }
  .cf-topbar { padding:12px 14px; flex-wrap:nowrap; }
  .cf-topbar-nav { display:none; }
  .cf-topbar-actions { margin-left:auto; gap:8px; }
  .cf-cart-btn { min-width:62px; height:42px; justify-content:center; padding:0 9px; gap:6px; }
  .cf-cart-label { display:none; }
  .cf-cart-icon { width:19px; height:19px; }
  .cf-cart-icon svg { width:18px; height:18px; }
  .cf-cart-badge { min-width:22px; height:22px; padding:0 6px; font-size:10px; }
  .cf-mobile-nav-panel {
    left:12px; right:12px; top:88px; width:auto; max-height:calc(100vh - 104px);
    max-height:calc(100dvh - 104px);
    border-radius:var(--r-md); padding:10px;
  }
  .cf-mobile-nav-panel::before { display:none; }
  .cf-mobile-nav-panel a { min-height:52px; font-size:15px; }
  .cf-footer-grid { grid-template-columns: 1fr; gap:24px; }
  .cf-footer-bottom { flex-direction: column; }
  .cf-whatsapp-btn { right:14px; bottom:14px; min-height:48px; padding:0 14px; }
  .cf-whatsapp-btn span { display:none; }
  .cf-whatsapp-btn svg { width:25px; height:25px; }

  .cf-page div[style*="grid-template-columns:repeat(4"] { grid-template-columns: 1fr 1fr !important; }
  .cf-page div[style*="grid-template-columns:repeat(3"] { grid-template-columns: 1fr 1fr !important; }

  .cf-stepper { grid-template-columns: 1fr !important; }
  .cf-stepper-cell { border-right:none; border-bottom:1px solid var(--line); padding:14px 18px; }
  .cf-stepper-cell:last-child { border-bottom:none; }
}

@media (max-width: 420px) {
  .cf-page div[style*="grid-template-columns:repeat(4"] { grid-template-columns: 1fr !important; }
  .cf-page div[style*="grid-template-columns:repeat(3"] { grid-template-columns: 1fr !important; }
}