:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;
  --shadow: 0 10px 25px rgba(17,24,39,.06);
  --radius: 18px;
  --radius2: 14px;

  --brand:#111827;
  --brand2:#0f172a;

  --ok:#16a34a;
  --bad:#dc2626;
  --warn:#d97706;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.4;
}

a{color:inherit;text-decoration:none}
a:hover{opacity:.9}

.container{
  width:min(1100px, 92vw);
  margin:0 auto;
  padding:16px 0 28px;
}

/* NAV */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(246,247,251,.85);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  width:min(1100px, 92vw);
  margin:0 auto;
  padding:12px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:900;
  letter-spacing:.2px;
}
.brand-badge{
  width:34px;height:34px;border-radius:12px;
  background:linear-gradient(135deg,#111827,#374151);
  box-shadow:var(--shadow);
}
.nav-links{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:700;
  font-size:14px;
}
.pill .dot{
  width:8px;height:8px;border-radius:999px;background:#111827;
}

/* HERO */
.hero{
  background:linear-gradient(180deg, #ffffff, rgba(255,255,255,.7));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
  display:grid;
  gap:10px;
}
.hero h1{margin:0;font-size:24px}
.hero p{margin:0;color:var(--muted)}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}

/* UI */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.card-body{padding:14px}
.muted{color:var(--muted)}
hr.sep{border:none;border-top:1px solid var(--line); margin:12px 0}

.btn{
  appearance:none;
  border:1px solid transparent;
  border-radius:14px;
  padding:11px 14px;
  font-weight:900;
  cursor:pointer;
  background:var(--brand);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0px)}
.btn.full{width:100%}
.btn.outline{
  background:#fff;
  color:var(--text);
  border:1px solid var(--line);
}
.btn.soft{
  background:rgba(17,24,39,.08);
  color:var(--text);
  border:1px solid rgba(17,24,39,.08);
}

.input, textarea, select{
  width:100%;
  border:1px solid var(--line);
  background:#fff;
  border-radius:14px;
  padding:11px 12px;
  outline:none;
  font-size:15px;
}
.input:focus, textarea:focus, select:focus{
  border-color:rgba(17,24,39,.35);
  box-shadow:0 0 0 4px rgba(17,24,39,.07);
}

.notice{
  border:1px solid var(--line);
  background:#fff;
  border-radius:16px;
  padding:12px 14px;
  box-shadow:var(--shadow);
}
.notice.success{border-color:rgba(22,163,74,.25); background:rgba(22,163,74,.05)}
.notice.error{border-color:rgba(220,38,38,.25); background:rgba(220,38,38,.05)}
.notice.warn{border-color:rgba(217,119,6,.25); background:rgba(217,119,6,.06)}

/* PRODUCTS GRID */
.grid{
  display:grid;
  gap:12px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 860px){
  .grid{ grid-template-columns: repeat(4, 1fr); }
}

.pcard{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  overflow:hidden;
  display:grid;
}
.pimg{
  width:100%;
  height:170px;
  object-fit:cover;
  background:#eee;
}
@media (min-width: 860px){
  .pimg{height:180px}
}
.ptitle{font-weight:900; margin:0; font-size:15px}
.pprice{font-weight:900; font-size:16px}
.pmeta{display:flex;justify-content:space-between;align-items:center;gap:10px}

/* TABLE */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.table th{
  text-align:left;
  font-size:13px;
  color:#475569;
  background:#f8fafc;
  border-bottom:1px solid var(--line);
  padding:10px 12px;
}
.table td{
  border-bottom:1px solid var(--line);
  padding:10px 12px;
  vertical-align:top;
}
.table tr:last-child td{border-bottom:none}

/* FOOTER */
.footer{
  margin-top:24px;
  padding:18px 0 30px;
  color:var(--muted);
  text-align:center;
}
.footer a{color:var(--muted); text-decoration:underline}

/* small helpers */
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.right{margin-left:auto}
/* ---------- Product card hover + image zoom ---------- */
.pcard { transition: transform .18s ease, box-shadow .18s ease; }
.pcard:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(17,24,39,.10); }

.pimg { transition: transform .25s ease; }
.pcard:hover .pimg { transform: scale(1.05); }

/* ---------- Out of stock badge ---------- */
.badge-os{
  padding:6px 10px;border-radius:999px;
  background:#dc2626;color:#fff;
  font-size:12px;font-weight:900;
}

/* ---------- Qty stepper (+/-) ---------- */
.qty-wrap{ display:flex; gap:8px; align-items:center; }
.qty-btn{
  width:38px;height:38px;border-radius:12px;
  border:1px solid #e7e7e7;background:#fff;
  font-weight:900; cursor:pointer;
}
.qty-btn:active{ transform: scale(.98); }
.qty-input{ max-width:84px; text-align:center; }

/* ---------- Disabled buttons ---------- */
.btn[disabled], button[disabled]{
  opacity:.55; cursor:not-allowed !important;
  transform:none !important;
}

/* ---------- Button hover ---------- */
.btn{ transition: transform .12s ease, opacity .12s ease; }
.btn:hover{ transform: translateY(-1px); }

/* ---------- Spinner on submit ---------- */
.btn.loading{
  opacity:.75;
  position:relative;
  pointer-events:none;
}
.btn.loading::after{
  content:"";
  width:16px;height:16px;
  border:2px solid rgba(255,255,255,.55);
  border-top-color:#fff;
  border-radius:50%;
  display:inline-block;
  margin-left:10px;
  vertical-align:middle;
  animation: spin .8s linear infinite;
}
.btn.outline.loading::after{
  border-color: rgba(17,24,39,.25);
  border-top-color: rgba(17,24,39,.9);
}
@keyframes spin { to { transform: rotate(360deg);} }

/* ---------- Product page gallery hover zoom ---------- */
.gallery .slide img { transition: transform .25s ease; }
.gallery:hover .slide img { transform: scale(1.05); }
/* ================================
   PRO / DIGITAL LOOK - PATCH
   Paste AFTER existing CSS
   ================================ */

/* Modern font + smoothing */
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}

/* Subtle modern background */
body{
  background:
    radial-gradient(circle at 12% 0%, rgba(59,130,246,.10), transparent 42%),
    radial-gradient(circle at 88% 100%, rgba(17,24,39,.08), transparent 45%),
    linear-gradient(180deg, #f6f7fb, #ffffff);
}

/* Make container spacing feel premium */
.container{ padding: 18px 0 34px; }

/* ---------------- NAV polish ---------------- */
.nav{
  background: rgba(246,247,251,.72);
  border-bottom: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 10px 28px rgba(17,24,39,.06);
}
.brand-badge{
  border-radius: 14px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 14px 30px rgba(37,99,235,.20);
}
.pill{
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.85);
  box-shadow: 0 8px 18px rgba(17,24,39,.05);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.pill:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(17,24,39,.08);
  background: #fff;
}
.pill .dot{
  background: #2563eb;
  box-shadow: 0 0 0 4px rgba(37,99,235,.16);
}

/* ---------------- HERO polish ---------------- */
.hero{
  background:
    radial-gradient(circle at 10% 10%, rgba(37,99,235,.10), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.72));
  border: 1px solid rgba(17,24,39,.10);
}
.hero h1{ font-size: 26px; font-weight: 950; letter-spacing: -0.02em; }
.hero p{ color: #64748b; }

/* ---------------- Cards polish ---------------- */
.card{
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 14px 35px rgba(17,24,39,.06);
}
.card-body{ padding: 16px; }
hr.sep{ border-top: 1px solid rgba(17,24,39,.10); }

/* ---------------- Inputs polish ---------------- */
.input, textarea, select{
  border: 1px solid rgba(17,24,39,.12);
  background: rgba(255,255,255,.92);
  transition: box-shadow .12s ease, border-color .12s ease, transform .12s ease;
}
.input:focus, textarea:focus, select:focus{
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 4px rgba(37,99,235,.16);
}
.input::placeholder{ color: rgba(100,116,139,.9); }

/* ---------------- Buttons: digital gradient ---------------- */
.btn{
  border-radius: 14px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 14px 28px rgba(37,99,235,.22);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 18px 36px rgba(37,99,235,.26);
}
.btn:active{ transform: translateY(0px) scale(.99); }

.btn.outline{
  background: rgba(255,255,255,.90);
  color: var(--text);
  border: 1px solid rgba(17,24,39,.12);
  box-shadow: 0 10px 25px rgba(17,24,39,.06);
}
.btn.outline:hover{
  box-shadow: 0 14px 30px rgba(17,24,39,.08);
}

.btn.soft{
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.16);
}

/* ---------------- Product grid + cards premium ---------------- */
.grid{ gap: 14px; }

.pcard{
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 14px 35px rgba(17,24,39,.06);
  border-radius: 20px;
}
.pimg{
  height: 190px;
}
@media (min-width: 860px){
  .pimg{ height: 205px; }
}
.ptitle{
  font-size: 15px;
  letter-spacing: -0.01em;
}
.pprice{ font-size: 16px; }

/* ---------------- Tables modern ---------------- */
.table{
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 14px 35px rgba(17,24,39,.06);
}
.table th{
  background: rgba(15,23,42,.03);
  border-bottom: 1px solid rgba(17,24,39,.10);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 12px;
}
.table tr:hover td{
  background: rgba(37,99,235,.04);
}

/* ---------------- Footer polish ---------------- */
.footer{
  border-top: 1px solid rgba(17,24,39,.10);
  padding-top: 20px;
}
.footer a{
  color: #475569;
  font-weight: 800;
  text-decoration: none;
}
.footer a:hover{
  text-decoration: underline;
  color: #111827;
}

/* ---------------- Micro interactions ---------------- */
.pcard:hover{ transform: translateY(-3px); }
.pcard:hover .pimg{ transform: scale(1.06); }

/* Better disabled look */
.btn[disabled], button[disabled]{
  opacity: .55;
  filter: grayscale(.1);
}

/* smoother shadows on mobile */
@media (max-width: 520px){
  .pcard:hover{ transform:none; }
  .pcard:hover .pimg{ transform:none; }
}
/* =========================
   ADMIN HEADER – PRO STYLE
   ========================= */

.admin-nav{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(15,23,42,.78);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}

.admin-nav-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.admin-brand{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 950;
  font-size: 18px;
  color: #fff;
  text-decoration: none;
  letter-spacing: -.02em;
}

.admin-menu{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.admin-menu a{
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  color: #fff;
  font-weight: 900;
  font-size: 13px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.12);
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}

.admin-menu a:hover{
  background: rgba(255,255,255,.20);
  transform: translateY(-1px);
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
}

.admin-menu a.active{
  background: #ffffff;
  color: #111827;
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
}

.admin-right{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.admin-user{
  font-weight: 900;
  font-size: 13px;
  color: rgba(255,255,255,.9);
}

.admin-logout{
  padding: 8px 14px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-weight: 950;
  font-size: 13px;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(239,68,68,.35);
}

.admin-logout:hover{
  background: #dc2626;
}

/* Admin content container */
.admin-container{
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 14px;
}
/* ============================================================
   🎀 VALENTINE: SUBTLE HEART HOVER ANIMATION (OPTIONAL)
   SAFE TO REMOVE: Delete this entire block to revert
   ============================================================ */

@keyframes vdayFloat {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  10%  { opacity: .18; }
  60%  { opacity: .10; }
  100% { transform: translateY(-10px) scale(1.06); opacity: 0; }
}

/* Add a lightweight overlay layer for hearts */
.btn, .pcard, .pill { position: relative; overflow: hidden; }

/* Hearts layer (only visible on hover) */
.btn::after, .pcard::after, .pill::after{
  content:"";
  position:absolute;
  inset:-10px;
  pointer-events:none;
  opacity:0;
  background-repeat:no-repeat;
  background-size:16px 16px, 12px 12px, 14px 14px;
  background-position: 18% 80%, 52% 86%, 80% 78%;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M12 21s-8-5.6-8-11A4.5 4.5 0 0 1 8.5 5c1.4 0 2.7.7 3.5 1.8C12.8 5.7 14.1 5 15.5 5A4.5 4.5 0 0 1 20 10c0 5.4-8 11-8 11z' fill='%23be123c' fill-opacity='0.9'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M12 21s-8-5.6-8-11A4.5 4.5 0 0 1 8.5 5c1.4 0 2.7.7 3.5 1.8C12.8 5.7 14.1 5 15.5 5A4.5 4.5 0 0 1 20 10c0 5.4-8 11-8 11z' fill='%23fb7185' fill-opacity='0.85'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M12 21s-8-5.6-8-11A4.5 4.5 0 0 1 8.5 5c1.4 0 2.7.7 3.5 1.8C12.8 5.7 14.1 5 15.5 5A4.5 4.5 0 0 1 20 10c0 5.4-8 11-8 11z' fill='%23be123c' fill-opacity='0.7'/></svg>");
  transform: translateY(0);
}

.btn:hover::after, .pcard:hover::after, .pill:hover::after{
  opacity:1;
  animation: vdayFloat 900ms ease-out 1;
}

/* ============================================================
   END 🎀 HEART HOVER ANIMATION
   ============================================================ */
/* ============================================================
   💝 VALENTINE: CTA BUTTON GLOW (OPTIONAL)
   SAFE TO REMOVE: Delete this entire block to revert
   ============================================================ */

@keyframes vdayGlow {
  0%,100% { box-shadow: 0 16px 34px rgba(190,18,60,.22), 0 0 0 0 rgba(251,113,133,.0); }
  50%     { box-shadow: 0 18px 42px rgba(190,18,60,.28), 0 0 0 6px rgba(251,113,133,.08); }
}

.btn.cta{
  position: relative;
  animation: vdayGlow 2.4s ease-in-out infinite;
}

.btn.cta::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(251,113,133,.55), rgba(190,18,60,.45));
  filter: blur(10px);
  opacity:.55;
  z-index:-1;
}

/* If you don't want to add .cta class everywhere, uncomment this line:
.btn.primary, .btn.pay, .btn.checkout { animation: vdayGlow 2.4s ease-in-out infinite; }
*/

/* ============================================================
   END 💝 CTA BUTTON GLOW
   ============================================================ */