/* ============================================================
   Moldezy — shared styles
   Placeholder brand palette/type — swap the :root tokens below
   once real logo/brand colors are decided (see Decision #3 in
   the website plan). Everything else reads from these tokens.
   ============================================================ */

:root{
  --paper:#F7F2EA;
  --surface:#FFFFFF;
  --surface-2:#F1E9DC;
  --ink:#241E18;
  --ink-soft:#6E6255;
  --ink-faint:#9C9284;
  --accent:#C1622E;
  --accent-deep:#7A3A15;
  --accent-soft:#F1DDC9;
  --line:#E4D9C8;
  --positive:#4C7A5E;
  --positive-soft:#DEEAE1;
  --danger:#AE3B2E;
  --danger-soft:#F3DEDA;
  --shadow: 0 1px 2px rgba(36,30,24,0.05), 0 10px 28px -18px rgba(36,30,24,0.28);
  --radius: 10px;
  --wa-green:#25D366;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#181410;
    --surface:#211B15;
    --surface-2:#271F17;
    --ink:#F0E9DD;
    --ink-soft:#B7AB9A;
    --ink-faint:#7C7264;
    --accent:#E37E45;
    --accent-deep:#FFB98A;
    --accent-soft:#3A2718;
    --line:#382E23;
    --positive:#7FBB9B;
    --positive-soft:#1E2C24;
    --danger:#E17164;
    --danger-soft:#3A211E;
    --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 10px 28px -18px rgba(0,0,0,0.6);
  }
}
:root[data-theme="dark"]{
  --paper:#181410;
  --surface:#211B15;
  --surface-2:#271F17;
  --ink:#F0E9DD;
  --ink-soft:#B7AB9A;
  --ink-faint:#7C7264;
  --accent:#E37E45;
  --accent-deep:#FFB98A;
  --accent-soft:#3A2718;
  --line:#382E23;
  --positive:#7FBB9B;
  --positive-soft:#1E2C24;
  --danger:#E17164;
  --danger-soft:#3A211E;
  --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 10px 28px -18px rgba(0,0,0,0.6);
}

*,*::before,*::after{box-sizing:border-box;}
html{color-scheme:light dark;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Work Sans', ui-sans-serif, system-ui, sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
body > main{flex:1 0 auto;}
img{max-width:100%;display:block;}
a{color:var(--accent-deep);}
.container{max-width:1080px;margin:0 auto;padding-inline:20px;}

h1,h2,h3,h4{
  font-family:'Fraunces', ui-serif, Georgia, serif;
  font-weight:600;
  line-height:1.12;
  text-wrap:balance;
  margin:0 0 12px;
  color:var(--ink);
}
h1{font-size:clamp(2rem,5vw,3rem);}
h2{font-size:clamp(1.5rem,3.4vw,2.1rem);}
h3{font-size:1.3rem;}
p{margin:0 0 14px;}
.lede{font-size:1.05rem;color:var(--ink-soft);max-width:60ch;}
.mono{font-family:'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums;}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header .bar{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:16px;
}
.brand{
  font-family:'Fraunces', serif; font-weight:800; font-size:clamp(1.7rem,3.2vw,2.3rem);
  color:var(--ink); text-decoration:none; letter-spacing:-0.02em;
}
.brand span{color:var(--accent);}
.main-nav{display:flex; gap:22px; align-items:center;}
.main-nav a{
  color:var(--ink-soft); text-decoration:none; font-size:14.5px; font-weight:500;
}
.main-nav a:hover, .main-nav a[aria-current="page"]{color:var(--accent-deep);}
.nav-toggle{display:none; background:none; border:1px solid var(--line); border-radius:8px; padding:8px 10px; color:var(--ink);}
@media (max-width:760px){
  .main-nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--surface); border-bottom:1px solid var(--line);
    flex-direction:column; padding:14px 20px; gap:14px;
  }
  .main-nav.open{display:flex;}
  .nav-toggle{display:inline-block;}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:99px; font-weight:600; font-size:14.5px;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:transform .12s ease;
}
.btn:active{transform:scale(0.98);}
.btn-primary{background:var(--accent); color:#fff;}
.btn-primary:hover{background:var(--accent-deep);}
.btn-outline{background:transparent; border-color:var(--line); color:var(--ink);}
.btn-outline:hover{border-color:var(--accent);}
.btn-whatsapp{background:var(--wa-green); color:#fff;}
.btn-sm{padding:7px 14px; font-size:13px;}
.btn-danger{background:var(--danger); color:#fff;}
.btn[disabled]{opacity:0.5; cursor:not-allowed;}

/* ---------- hero ---------- */
.hero{padding-block:52px 40px;}
.hero-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center;}
@media (max-width:820px){.hero-grid{grid-template-columns:1fr;}}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:20px;}
.hero-art{
  aspect-ratio:4/3; border-radius:16px; background:var(--surface-2);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  color:var(--ink-faint); font-size:13px; text-align:center; padding:20px;
}

/* ---------- sections ---------- */
section{padding-block:44px;}
.section-head{margin-bottom:24px;}
.eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--accent); font-weight:600;
}

/* ---------- product grid / cards ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:20px;}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow);
}
.card-media{
  aspect-ratio:1/1; background:var(--surface-2); display:flex; align-items:center; justify-content:center;
  color:var(--ink-faint); font-size:12.5px; text-align:center; padding:12px;
}
.card-media img{width:100%; height:100%; object-fit:cover;}
.card-body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; flex:1;}
.card-body h3{font-size:1.02rem; margin:0;}
.card-price{font-family:'IBM Plex Mono', monospace; font-weight:600; color:var(--accent-deep); font-variant-numeric:tabular-nums;}
.card-actions{margin-top:auto; display:flex; gap:8px; padding-top:10px;}
.badge{
  display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600;
  padding:3px 9px; border-radius:99px; text-transform:uppercase; letter-spacing:0.04em;
  width:fit-content;
}
.badge-in{background:var(--positive-soft); color:var(--positive);}
.badge-out{background:var(--danger-soft); color:var(--danger);}
.badge-custom{background:var(--accent-soft); color:var(--accent-deep);}

/* ---------- category chips ---------- */
.chip-row{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px;}
.chip{
  padding:7px 16px; border-radius:99px; border:1px solid var(--line); background:var(--surface);
  font-size:13.5px; color:var(--ink-soft); text-decoration:none; font-weight:500;
}
.chip.active, .chip:hover{border-color:var(--accent); color:var(--accent-deep);}

/* ---------- forms ---------- */
form.stack{display:flex; flex-direction:column; gap:16px; max-width:560px;}
.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-size:13.5px; font-weight:600; color:var(--ink);}
.field .hint{font-size:12.5px; color:var(--ink-faint); font-weight:400;}
input, textarea, select{
  font:inherit; padding:10px 12px; border-radius:8px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); width:100%;
}
input:focus, textarea:focus, select:focus{outline:2px solid var(--accent); outline-offset:1px;}
textarea{min-height:110px; resize:vertical;}
.checkbox-row{display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--ink-soft);}
.checkbox-row input{width:auto; margin-top:3px;}
.form-msg{padding:12px 14px; border-radius:8px; font-size:14px; display:none;}
.form-msg.show{display:block;}
.form-msg.ok{background:var(--positive-soft); color:var(--positive);}
.form-msg.err{background:var(--danger-soft); color:var(--danger);}

/* ---------- callouts / faq ---------- */
.callout{
  background:var(--surface-2); border-left:3px solid var(--accent); border-radius:6px;
  padding:14px 16px; font-size:14.5px; color:var(--ink-soft);
}
.faq-item{border-bottom:1px solid var(--line); padding-block:14px;}
.faq-item summary{cursor:pointer; font-weight:600; color:var(--ink);}
.faq-item p{margin-top:10px; color:var(--ink-soft);}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line); padding-block:32px; margin-top:40px;}
.footer-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:24px; margin-bottom:20px;}
.footer-grid h4{font-size:12.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-faint); margin-bottom:10px;}
.footer-grid a{display:block; color:var(--ink-soft); text-decoration:none; font-size:14px; margin-bottom:7px;}
.footer-bottom{font-size:12.5px; color:var(--ink-faint); border-top:1px solid var(--line); padding-top:16px;}

/* ---------- floating whatsapp button ---------- */
.wa-float{
  position:fixed; bottom:20px; right:20px; z-index:50;
  width:56px; height:56px; border-radius:50%; background:var(--wa-green); color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px -6px rgba(0,0,0,0.4);
  text-decoration:none;
}
.wa-float svg{width:28px; height:28px;}

/* ---------- admin ---------- */
.admin-shell{display:grid; grid-template-columns:200px 1fr; min-height:100vh;}
.admin-side{background:var(--surface-2); border-right:1px solid var(--line); padding:20px 14px;}
.admin-side a{display:block; padding:9px 12px; border-radius:8px; color:var(--ink-soft); text-decoration:none; font-size:14px; margin-bottom:4px;}
.admin-side a.active, .admin-side a:hover{background:var(--surface); color:var(--ink);}
.admin-main{padding:28px 32px;}
@media (max-width:720px){.admin-shell{grid-template-columns:1fr;} .admin-side{border-right:none; border-bottom:1px solid var(--line); display:flex; overflow-x:auto; gap:4px;}}
.admin-topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; flex-wrap:wrap; gap:12px;}
.tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);}
table{border-collapse:collapse; width:100%; font-size:13.8px; min-width:560px;}
thead th{
  text-align:left; font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--ink-faint); background:var(--surface-2); padding:10px 14px; border-bottom:1px solid var(--line);
}
tbody td{padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
.row-actions{display:flex; gap:6px;}
.modal-backdrop{
  position:fixed; inset:0; background:rgba(20,16,12,0.5); display:none;
  align-items:center; justify-content:center; padding:20px; z-index:60;
}
.modal-backdrop.open{display:flex;}
.modal{background:var(--surface); border-radius:var(--radius); padding:24px; width:100%; max-width:480px; max-height:88vh; overflow:auto; box-shadow:var(--shadow);}
.modal h3{margin-top:0;}
.select-status{padding:5px 8px; border-radius:6px; font-size:12.5px; border:1px solid var(--line); background:var(--surface); color:var(--ink);}

.empty-state{padding:40px 20px; text-align:center; color:var(--ink-faint); font-size:14px;}
.skeleton{background:linear-gradient(90deg, var(--surface-2), var(--line), var(--surface-2)); background-size:200% 100%; animation:shimmer 1.4s infinite;}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

@media (max-width:480px){
  .hero{padding-block:36px 28px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}