/* store/assets/store.css — Biricha Digital store. Implements biricha_style.md. */

:root{
  --orange:#FD8E19;
  --teal:#1A86A6;
  --charcoal:#3F3F3F;
  --offwhite:#FAFAFA;
  --card-border:#E0E0E0;
  --blue:#0D66C2;
  --text:#3F3F3F;
  --maxw:1326px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  font-family:Roboto, system-ui, Arial, sans-serif;
  color:var(--text);
  background:#fff;
  font-size:16px;
  line-height:1.6;
}

.container{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
@media (min-width:1100px){ .container{ padding:0 104px; } }

h1,h2,h3,h4{ font-family:Lato, system-ui, Arial, sans-serif; margin:0 0 .5em; line-height:1.2; }
h1{ font-size:52px; font-weight:700; line-height:1.1; }
h2{ font-size:34px; font-weight:700; }
h3{ font-size:30px; font-weight:400; color:var(--teal); }
h4{ font-size:22px; font-weight:700; color:var(--teal); }
p{ margin:0 0 1em; }
a{ color:var(--teal); text-decoration:none; }
a:hover{ text-decoration:underline; }
.muted{ color:#777; }

/* ── Logo bar (white) ── */
.logo-bar{ background:#fff; border-bottom:1px solid #eee; }
.logo-bar .container{ display:flex; align-items:center; min-height:100px; }
.brand img{ display:block; height:64px; width:auto; }

/* ── Nav bar (dark charcoal) ── */
.nav{ background:var(--charcoal); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; min-height:60px; flex-wrap:wrap; }
.nav-links{ display:flex; flex-wrap:wrap; }
.nav a{ color:var(--offwhite); font-weight:500; font-size:16px; padding:18px 0; margin-right:28px; display:inline-block; }
.nav a:hover{ color:#fff; text-decoration:none; }
.nav-account{ display:flex; align-items:center; gap:28px; }
.nav-account a{ margin-right:0; }

/* ── Hero ── */
/* Full-width photo + 40% near-black overlay per biricha_style.md §6. Upload
   the photo as /assets/hero.jpg; the charcoal base shows if it's missing. */
.hero{
  background-color:var(--charcoal);
  background-image:linear-gradient(rgba(17,17,17,.4), rgba(17,17,17,.4)), url('/assets/hero.jpg');
  background-size:cover;
  background-position:center;
  color:#fff; min-height:340px; display:flex; align-items:center;
  text-align:center;
}
.hero h1{ color:#fff; }
.hero .hero-sub{ font-family:Lato; font-size:22px; font-weight:400; color:#fff; margin:0; }

/* ── Page sections ── */
.page{ padding:48px 0; }
.section{ padding:32px 0; }

/* ── Buttons ── */
.btn{
  display:inline-block; background:var(--orange); color:#fff;
  font-family:Roboto; font-weight:500; font-size:15px; text-transform:uppercase;
  padding:10px 18px; border:none; border-radius:5px; cursor:pointer;
}
.btn:hover{ filter:brightness(.95); color:#fff; text-decoration:none; }
.btn-ghost{ background:transparent; color:var(--orange); border:1px solid var(--orange); }
.btn-ghost:hover{ background:var(--orange); color:#fff; }

/* ── Cards / product tiles ── */
.grid{ display:grid; gap:24px; }
.grid-2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.grid-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width:820px){ .grid-2,.grid-3{ grid-template-columns:1fr; } }
.card{
  background:#fff; border:1px solid var(--card-border); border-radius:0;
  padding:24px; box-shadow:rgba(0,0,0,.08) 0 0 20px 0;
  display:flex; flex-direction:column;
}
.card h3{ margin-top:0; }
.card .price{ font-weight:700; font-size:20px; color:var(--charcoal); margin:0 0 12px; }
.card .btn{ margin-top:auto; align-self:flex-start; }

/* ── Sidebar widget ── */
.sidecard{ background:var(--offwhite); border:1px solid var(--card-border); padding:20px; box-shadow:rgba(0,0,0,.15) 0 0 20px 0; }
.sidecard .featured{ border-left:3px solid var(--blue); background:#EBF5FA; padding:10px 12px; }

/* ── Forms ── */
label{ display:block; font-family:Roboto; font-size:16px; color:var(--text); margin:0 0 6px; }
input[type=text], input[type=email], input[type=number], select, textarea{
  width:100%; background:#fff; border:1px solid rgba(17,17,17,.3); border-radius:0;
  padding:9px 11px; font-family:Roboto; font-size:15px; color:#111;
}
input:disabled, select:disabled, textarea:disabled{
  background:#f1f1f1; color:#9aa0a6; cursor:not-allowed;
}
.field{ margin:0 0 16px; }

/* ── Flash ── */
.flash{ padding:12px 14px; border:1px solid var(--card-border); margin:0 0 16px; }
.flash-success{ background:#f0fff4; border-color:#bfe6c8; }
.flash-error{ background:#fff5f5; border-color:#f3c0c0; }

/* Session flashes (flash_output) render inside .flash-stack: a fixed toast
   overlay at the top of the viewport that fades in, holds, and fades out —
   no layout shift. Inline .flash divs printed directly by pages (form
   validation errors) are unaffected. */
.flash-stack{
  position:fixed; top:16px; left:50%; transform:translateX(-50%);
  z-index:1000; width:min(560px, calc(100vw - 32px)); pointer-events:none;
}
.flash-stack .flash{
  box-shadow:rgba(0,0,0,.18) 0 4px 18px 0; border-radius:6px; margin:0 0 8px;
  opacity:0; animation:flash-toast 4.5s ease forwards;
}
.flash-stack .flash-error{ animation-duration:9s; } /* errors linger longer */
@keyframes flash-toast{
  0%   { opacity:0; transform:translateY(-10px); }
  6%   { opacity:1; transform:translateY(0); }
  88%  { opacity:1; }
  100% { opacity:0; visibility:hidden; }
}

/* ── Footer ── */
.footer{ background:var(--charcoal); color:var(--offwhite); margin-top:64px; }
.footer .footer-inner{ display:flex; justify-content:space-between; gap:32px; padding:40px 0; flex-wrap:wrap; }
.footer a{ color:var(--offwhite); }
.footer a:hover{ color:#fff; text-decoration:none; }
.footer .footer-links{ display:flex; flex-direction:column; gap:8px; }