/* ==========================================================
   PAPELARIA — DESIGN SYSTEM
   Paleta 60-30-10 definida no briefing:
   60% Branco Gelo (#F3F4F6) · 30% Azul-Marinho (#1E3A8A) · 10% Laranja (#D97706)
   Conceito: cartões de produto e resumo de pedido lembram papel/recibo,
   com textura de "papel pontilhado" (referência ao bloco de notas pontilhado
   vendido na loja) e tipografia mono para preços/recibo (referência a nota fiscal).
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Inter:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* ---- paleta base (tema claro) ---- */
  --bg: #F3F4F6;
  --bg-elevated: #FFFFFF;
  --bg-soft: #E9ECF3;
  --navy: #1E3A8A;
  --navy-700: #16296b;
  --navy-100: #E7ECFA;
  --accent: #D97706;
  --accent-600: #B45F04;
  --accent-100: #FCEBD2;
  --text: #16223F;
  --text-muted: #5A6478;
  --border: #DCE0E8;
  --success: #1E8A5A;
  --danger: #C0392B;

  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'Space Mono', monospace;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 3px rgba(22,34,63,.08);
  --shadow-md: 0 8px 24px rgba(22,34,63,.10);
  --shadow-lg: 0 20px 48px rgba(22,34,63,.16);

  --dot-color: rgba(30,58,138,.07);

  color-scheme: light;
}

[data-theme="dark"]{
  --bg: #10131C;
  --bg-elevated: #1A1F2E;
  --bg-soft: #1F2536;
  --navy: #6C8CE0;
  --navy-700: #8FA8ED;
  --navy-100: #202A46;
  --accent: #F0A63A;
  --accent-600: #F6BB5F;
  --accent-100: #3A2C14;
  --text: #EDEFF5;
  --text-muted: #A2A9BC;
  --border: #2A3145;
  --dot-color: rgba(140,160,230,.08);
  color-scheme: dark;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(var(--dot-color) 1.4px, transparent 1.4px) 0 0/22px 22px,
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height:1.5;
  transition: background-color .25s ease, color .25s ease;
  min-height:100vh;
}
h1,h2,h3,h4{ font-family: var(--font-display); color: var(--text); margin:0 0 .4em; letter-spacing:-.01em;}
a{color:inherit;}
button{font-family:inherit;}
img{max-width:100%; display:block;}
.mono{font-family:var(--font-mono);}
.container{max-width:1180px; margin:0 auto; padding:0 20px;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

/* ---------------- Header ---------------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: var(--navy);
  color:#fff;
  box-shadow: var(--shadow-sm);
}
.header-inner{ display:flex; align-items:center; gap:18px; padding:14px 20px; max-width:1180px; margin:0 auto;}
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:1.25rem; color:#fff; text-decoration:none; }
.brand-mark{
  width:34px; height:34px; border-radius:9px; background: var(--accent);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; color:var(--navy-700);
  flex-shrink:0;
}
.search-bar{ flex:1; max-width:440px; position:relative; }
.search-bar input{
  width:100%; padding:10px 14px 10px 38px; border-radius:999px; border:none;
  background: rgba(255,255,255,.12); color:#fff; font-size:.92rem;
}
.search-bar input::placeholder{color: rgba(255,255,255,.65);}
.search-bar input:focus{ background:#fff; color:var(--text);}
.search-bar svg{position:absolute; left:12px; top:50%; transform:translateY(-50%); opacity:.8;}
.search-bar input:focus + svg{opacity:0;}
.header-actions{display:flex; align-items:center; gap:10px;}
.icon-btn{
  background: rgba(255,255,255,.12); border:none; color:#fff; width:40px; height:40px;
  border-radius:999px; display:flex; align-items:center; justify-content:center; cursor:pointer;
  position:relative; transition: background .15s ease, transform .15s ease;
}
.icon-btn:hover{ background: rgba(255,255,255,.22); transform: translateY(-1px);}
.cart-count{
  position:absolute; top:-4px; right:-4px; background:var(--accent); color:#fff;
  font-size:.68rem; font-weight:700; min-width:18px; height:18px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; padding:0 4px;
}
.category-nav{ background: var(--navy-700); overflow-x:auto; scrollbar-width:none;}
.category-nav::-webkit-scrollbar{display:none;}
.category-nav-inner{ display:flex; gap:6px; padding:8px 20px; max-width:1180px; margin:0 auto; }
.cat-pill{
  white-space:nowrap; padding:7px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.18);
  background:transparent; color: rgba(255,255,255,.85); font-size:.84rem; font-weight:600; cursor:pointer;
  transition: all .15s ease;
}
.cat-pill.active, .cat-pill:hover{ background: var(--accent); border-color:var(--accent); color:#fff;}

/* ---------------- Hero ---------------- */
.hero{ padding: 40px 0 8px; }
.hero-card{
  background: linear-gradient(120deg, var(--navy), var(--navy-700));
  color:#fff; border-radius: var(--radius-lg); padding: 34px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; overflow:hidden; position:relative;
  box-shadow: var(--shadow-md);
}
.hero-card::after{
  content:""; position:absolute; right:-40px; top:-40px; width:220px; height:220px; border-radius:50%;
  background: var(--accent); opacity:.18;
}
.hero-text h1{color:#fff; font-size:1.7rem; max-width:520px;}
.hero-text p{color: rgba(255,255,255,.82); max-width:480px; margin:0;}
.hero-badge{
  display:inline-flex; align-items:center; gap:6px; background: rgba(255,255,255,.14); color:#fff;
  padding:5px 12px; border-radius:999px; font-size:.75rem; font-weight:700; margin-bottom:12px; letter-spacing:.03em;
}

/* ---------------- Section titles ---------------- */
.section-title{ display:flex; align-items:baseline; justify-content:space-between; margin: 34px 0 14px;}
.section-title h2{font-size:1.2rem;}
.section-title .eyebrow{ font-family:var(--font-mono); font-size:.72rem; color: var(--accent-600); text-transform:uppercase; letter-spacing:.08em; display:block; margin-bottom:2px;}

/* ---------------- Product grid ---------------- */
.product-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(210px,1fr)); gap:16px; }
.product-card{
  background: var(--bg-elevated); border:1px solid var(--border); border-radius: var(--radius-md);
  overflow:hidden; display:flex; flex-direction:column; box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.product-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md);}
.product-thumb{
  aspect-ratio: 4/3; background: var(--bg-soft); display:flex; align-items:center; justify-content:center;
  font-size:2.2rem; position:relative;
}
.badge-featured{
  position:absolute; top:8px; left:8px; background:var(--accent); color:#fff; font-size:.66rem; font-weight:700;
  padding:3px 8px; border-radius:999px; letter-spacing:.03em;
}
.badge-stock-low{
  position:absolute; top:8px; right:8px; background: var(--danger); color:#fff; font-size:.62rem; font-weight:700;
  padding:3px 7px; border-radius:999px;
}
.product-body{ padding:12px 14px 14px; display:flex; flex-direction:column; gap:6px; flex:1;}
.product-cat{ font-family:var(--font-mono); font-size:.68rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em;}
.product-name{ font-family:var(--font-display); font-weight:700; font-size:.98rem; margin:0;}
.product-desc{ font-size:.8rem; color:var(--text-muted); flex:1; margin:0; }
.product-price{ font-family:var(--font-mono); font-weight:700; color:var(--navy); font-size:1.02rem;}
[data-theme="dark"] .product-price{color:var(--navy-700);}
.product-footer{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:4px;}

.qty-stepper{ display:flex; align-items:center; border:1px solid var(--border); border-radius:999px; overflow:hidden;}
.qty-stepper button{
  width:28px; height:28px; border:none; background:var(--bg-soft); color:var(--navy); font-weight:700; cursor:pointer; font-size:1rem;
}
.qty-stepper span{ min-width:24px; text-align:center; font-family:var(--font-mono); font-size:.85rem;}
.btn{
  border:none; border-radius:999px; padding:9px 16px; font-weight:700; font-size:.82rem; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:active{transform: scale(.96);}
.btn-accent{ background: var(--accent); color:#fff; }
.btn-accent:hover{ background: var(--accent-600); }
.btn-navy{ background: var(--navy); color:#fff;}
.btn-navy:hover{ background: var(--navy-700);}
.btn-ghost{ background: transparent; border:1px solid var(--border); color:var(--text);}
.btn-ghost:hover{ background: var(--bg-soft);}
.btn-sm{padding:6px 12px; font-size:.74rem;}
.btn-block{width:100%; justify-content:center;}
.btn[disabled]{opacity:.5; cursor:not-allowed;}

/* ---------------- Cart Drawer (recibo) ---------------- */
.overlay{ position:fixed; inset:0; background: rgba(10,14,24,.45); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:60;}
.overlay.open{opacity:1; pointer-events:auto;}
.drawer{
  position:fixed; top:0; right:0; height:100%; width:min(420px,92vw); background: var(--bg-elevated);
  transform: translateX(100%); transition: transform .25s ease; z-index:70; display:flex; flex-direction:column;
  box-shadow: var(--shadow-lg);
}
.drawer.open{transform:translateX(0);}
.drawer-header{ padding:18px 20px; border-bottom:1px dashed var(--border); display:flex; align-items:center; justify-content:space-between;}
.drawer-header h3{margin:0;}
.drawer-body{ flex:1; overflow-y:auto; padding: 14px 20px; }
.receipt{
  font-family: var(--font-mono); font-size:.82rem; background: repeating-linear-gradient(var(--bg-elevated),var(--bg-elevated));
  position:relative;
}
.receipt-cut{
  height:14px; background:
    radial-gradient(circle at 8px 0, transparent 7px, var(--bg) 7.5px) top left,
    radial-gradient(circle at 8px 0, transparent 7px, var(--bg) 7.5px) top left;
  background-size: 16px 16px; background-repeat: repeat-x;
}
.cart-item{ display:flex; gap:10px; padding:10px 0; border-bottom:1px dashed var(--border);}
.cart-item-thumb{width:44px; height:44px; border-radius:8px; background:var(--bg-soft); display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0;}
.cart-item-info{flex:1; min-width:0;}
.cart-item-name{font-weight:700; font-size:.86rem; font-family:var(--font-body);}
.cart-item-variant{font-size:.74rem; color:var(--text-muted);}
.cart-item-row{display:flex; align-items:center; justify-content:space-between; margin-top:6px;}
.cart-item-remove{background:none; border:none; color:var(--danger); font-size:.72rem; cursor:pointer; text-decoration:underline;}
.cart-subtotal{font-family:var(--font-mono); font-weight:700;}
.drawer-footer{ padding:16px 20px 20px; border-top:1px dashed var(--border);}
.total-row{ display:flex; justify-content:space-between; align-items:center; font-family:var(--font-mono); font-size:1.05rem; font-weight:700; margin-bottom:12px;}
.empty-state{ text-align:center; color:var(--text-muted); padding:40px 10px; font-size:.9rem;}
.empty-state .emoji{font-size:2rem; display:block; margin-bottom:8px;}

/* ---------------- Modal (variação / checkout) ---------------- */
.modal{
  position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.modal.open{opacity:1; pointer-events:auto;}
.modal-card{
  background: var(--bg-elevated); border-radius: var(--radius-lg); width:100%; max-width:460px; max-height:88vh; overflow-y:auto;
  padding: 26px; box-shadow: var(--shadow-lg); transform: translateY(14px); transition: transform .2s ease;
}
.modal.open .modal-card{transform:translateY(0);}
.modal-close{ float:right; background:none; border:none; font-size:1.3rem; cursor:pointer; color: var(--text-muted);}
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:.78rem; font-weight:700; margin-bottom:5px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em;}
.field input, .field select, .field textarea{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background: var(--bg-soft);
  color:var(--text); font-family:inherit; font-size:.9rem;
}
.field textarea{resize:vertical; min-height:70px;}
.variation-options{display:flex; flex-wrap:wrap; gap:8px;}
.variation-chip{
  padding:8px 14px; border-radius:999px; border:1px solid var(--border); cursor:pointer; font-size:.84rem; font-weight:600;
  background: var(--bg-soft);
}
.variation-chip.selected{ background: var(--accent); border-color:var(--accent); color:#fff;}
.payment-option{ border:1px solid var(--border); border-radius: var(--radius-sm); padding:12px 14px; margin-bottom:10px; cursor:pointer;}
.payment-option.selected{ border-color: var(--accent); background: var(--accent-100);}
.payment-option-head{display:flex; align-items:center; justify-content:space-between; font-weight:700; font-size:.88rem;}
.payment-option-details{font-size:.78rem; color:var(--text-muted); margin-top:6px; display:none;}
.payment-option-details.show{display:block;}
.link-btn{background:none; border:none; color:var(--navy); font-weight:700; font-size:.76rem; cursor:pointer; text-decoration:underline; padding:0;}
[data-theme="dark"] .link-btn{color:var(--navy-700);}

/* ---------------- Footer ---------------- */
.site-footer{ margin-top:60px; background: var(--navy); color: rgba(255,255,255,.8); padding: 30px 0; font-size:.85rem;}
.site-footer .container{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}
.site-footer a{color:#fff; text-decoration:none; font-weight:600;}

/* ---------------- Theme switch ---------------- */
.theme-menu{ position:absolute; right:20px; top:60px; background:var(--bg-elevated); border:1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding:6px; display:none; z-index:90; min-width:170px;}
.theme-menu.open{display:block;}
.theme-menu button{
  display:flex; align-items:center; gap:8px; width:100%; background:none; border:none; padding:9px 12px; border-radius:8px;
  font-size:.85rem; cursor:pointer; color:var(--text); text-align:left;
}
.theme-menu button:hover, .theme-menu button.active{ background:var(--bg-soft);}

/* ---------------- Toast ---------------- */
.toast{
  position:fixed; bottom:24px; left:50%; transform: translateX(-50%) translateY(20px); background: var(--navy); color:#fff;
  padding:12px 20px; border-radius:999px; font-size:.85rem; font-weight:600; box-shadow: var(--shadow-md); z-index:100;
  opacity:0; pointer-events:none; transition: all .25s ease; display:flex; align-items:center; gap:8px;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0);}
.toast.success{background: var(--success);}
.toast.error{background: var(--danger);}

/* ---------------- Admin ---------------- */
.admin-shell{display:flex; min-height:100vh;}
.admin-sidebar{
  width:230px; flex-shrink:0; background: var(--navy); color:#fff; padding:20px 14px; position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; gap:4px;
}
.admin-sidebar .brand{margin-bottom:18px;}
.admin-nav-btn{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; background:none; border:none;
  color: rgba(255,255,255,.75); font-weight:600; font-size:.88rem; cursor:pointer; text-align:left;
}
.admin-nav-btn:hover{background: rgba(255,255,255,.08); color:#fff;}
.admin-nav-btn.active{background: var(--accent); color:#fff;}
.admin-main{ flex:1; padding: 28px 34px; min-width:0;}
.admin-topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; flex-wrap:wrap; gap:10px;}
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:28px;}
.stat-card{ background:var(--bg-elevated); border:1px solid var(--border); border-radius: var(--radius-md); padding:16px 18px; box-shadow:var(--shadow-sm);}
.stat-card .label{font-size:.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; font-weight:700;}
.stat-card .value{font-family:var(--font-mono); font-size:1.5rem; font-weight:700; color:var(--navy); margin-top:4px;}
[data-theme="dark"] .stat-card .value{color:var(--navy-700);}
.panel{ background:var(--bg-elevated); border:1px solid var(--border); border-radius: var(--radius-md); padding:20px; margin-bottom:20px; box-shadow:var(--shadow-sm);}
.panel h3{font-size:1rem;}
.data-table{width:100%; border-collapse:collapse; font-size:.85rem;}
.data-table th{ text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); padding:8px 10px; border-bottom:2px solid var(--border);}
.data-table td{padding:9px 10px; border-bottom:1px solid var(--border); vertical-align:middle;}
.data-table tr:hover td{background:var(--bg-soft);}
.pill-status{ padding:3px 10px; border-radius:999px; font-size:.7rem; font-weight:700;}
.pill-status.pendente{background:var(--accent-100); color:var(--accent-600);}
.pill-status.concluido{background:#DCF3E7; color:var(--success);}
.pill-status.cancelado{background:#FBE1DD; color:var(--danger);}
.row-actions{display:flex; gap:6px;}
.row-actions button{background:none; border:none; cursor:pointer; color:var(--navy); font-size:.9rem;}
[data-theme="dark"] .row-actions button{color:var(--navy-700);}
.login-shell{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;}
.login-card{ background:var(--bg-elevated); border-radius:var(--radius-lg); padding:34px; width:100%; max-width:380px; box-shadow:var(--shadow-lg); text-align:center;}
.tag-list{display:flex; flex-wrap:wrap; gap:6px;}
.tag-chip{ background:var(--bg-soft); border:1px solid var(--border); padding:5px 10px; border-radius:999px; font-size:.76rem; display:flex; align-items:center; gap:6px;}
.tag-chip button{background:none;border:none;color:var(--danger);cursor:pointer;font-size:.8rem;}
.drag-handle{cursor:grab; color:var(--text-muted);}
.hidden{display:none !important;}

@media (max-width: 720px){
  .header-inner{flex-wrap:wrap;}
  .search-bar{order:3; max-width:none; width:100%;}
  .admin-shell{flex-direction:column;}
  .admin-sidebar{ width:100%; height:auto; position:relative; flex-direction:row; overflow-x:auto;}
  .admin-main{padding:18px;}
  .hero-card{flex-direction:column; text-align:center;}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important;}
}