:root{
  --primary:#2563EB;
  --secondary:#06B6D4;
  --accent:#10B981;
  --bg:#FFFFFF;
  --dark:#111827;
  --gray:#6B7280;
  --border:#E5E7EB;
  --radius:20px;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:var(--dark);background:var(--bg);line-height:1.6;}
.container{max-width:1140px;margin:0 auto;padding:0 20px;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}

/* Header */
.site-header{border-bottom:none;position:sticky;top:0;background:var(--header-bg,#fff);z-index:100;box-shadow:0 1px 8px rgba(0,0,0,.06);}
.main-nav a{opacity:1;display:flex;align-items:center;position:relative;}
.main-nav a:hover{color:var(--menu-hover-computed,var(--primary));}
/* Text color for .main-nav a, .site-title-text, .site-tagline-text, and .logo is intentionally
   NOT set here - it's applied directly via JS in header.php on page load and on every scroll-state
   change. That's deliberate: after repeated reports of header text vanishing on scroll despite
   CSS that looked structurally correct, colors are now set as plain inline styles with nothing
   in any stylesheet using !important to fight them. Do not add color/!important rules for these
   selectors back into this file - it will silently reintroduce the exact bug this replaced. */

.site-header-transparent{position:fixed;top:0;left:0;right:0;background:transparent;border-bottom:1px solid transparent;transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;}
.site-header-transparent.scrolled{background:var(--header-bg,#fff);border-bottom-color:transparent;box-shadow:0 2px 12px rgba(0,0,0,.06);}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:70px;}
.logo{font-weight:800;font-size:1.4rem;color:var(--dark);}
.main-nav{display:flex;align-items:center;gap:22px;font-weight:500;}
.main-nav .cart-badge{position:absolute;top:-8px;right:-10px;background:var(--primary);color:#fff;font-size:.65rem;font-weight:700;border-radius:999px;min-width:16px;height:16px;display:flex;align-items:center;justify-content:center;padding:0 3px;}
/* Desktop: icons alone by default, with a proper floating tooltip label on hover - not just the
   native browser title attribute, which is slow to appear and inconsistent across browsers. */
.main-nav a{position:relative;}
.nav-label{display:none;}
@media(min-width:769px){
  .nav-label{
    display:block;position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(4px);
    background:#111827;color:#fff !important;font-size:.72rem;font-weight:600;
    padding:5px 10px;border-radius:6px;white-space:nowrap;z-index:200;
    opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,transform .15s ease;
  }
  .main-nav a:hover .nav-label{opacity:1;visibility:visible;transform:translateX(-50%) translateY(8px);}
}
@media(max-width:768px){
  .main-nav a{gap:12px;padding:12px 4px;width:100%;}
  .nav-label{display:inline;font-size:.95rem;}
  .site-tagline-text{display:none;} /* keeps the mobile header from feeling crowded - site name alone is enough there */
}
.btn-nav{background:var(--primary);color:#fff !important;padding:8px 18px;border-radius:999px;}
.cart-link{font-weight:600;}
.nav-toggle{display:none;background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--button-bg);}

/* Buttons */
.btn{display:inline-block;padding:12px 28px;border-radius:999px;font-weight:600;border:none;cursor:pointer;text-align:center;}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:#1d4ed8;}
.btn-outline{background:transparent;border:2px solid var(--primary);color:var(--primary);}
.btn-accent{background:var(--accent);color:#fff;}
.btn-danger{background:#DC2626;color:#fff;}
.btn-sm{padding:8px 16px;font-size:.85rem;}

/* Hero */
.hero{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;padding:90px 0;text-align:center;}
.hero h1{font-size:2.6rem;margin-bottom:16px;}
.hero p{font-size:1.2rem;opacity:.95;margin-bottom:32px;}
.hero-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
.hero .btn-outline{border-color:#fff;color:#fff;}

/* Sections */
section{padding:70px 0;}
.section-title{text-align:center;font-size:2rem;margin-bottom:12px;}
.section-sub{text-align:center;color:var(--gray);max-width:600px;margin:0 auto 50px;}

/* Feature grid */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px;}
.card{border:1px solid var(--border);border-radius:var(--radius);padding:28px;background:#fff;}
.card h3{margin-bottom:10px;}
.card p{color:var(--gray);font-size:.95rem;}
.icon-box{width:48px;height:48px;border-radius:12px;background:rgba(37,99,235,.1);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:16px;}

/* Forms */
.form-wrap{max-width:520px;margin:0 auto;}
.form-group{margin-bottom:18px;}
.form-group label{display:block;font-weight:600;margin-bottom:6px;font-size:.9rem;}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:10px;font-size:1rem;font-family:inherit;}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--primary);}
.form-hint{font-size:.8rem;color:var(--gray);margin-top:4px;}
.alert{padding:14px 18px;border-radius:10px;margin-bottom:20px;font-size:.95rem;}
.alert-success{background:#ECFDF5;color:#065F46;border:1px solid #A7F3D0;}
.alert-error{background:#FEF2F2;color:#991B1B;border:1px solid #FECACA;}

/* Products */
.product-card{border:1px solid var(--border);border-radius:0;overflow:hidden;background:#fff;}
.product-card img{aspect-ratio:1/1;object-fit:cover;width:100%;background:#F3F4F6;}
.product-card .p-body{padding:18px;}
.product-card h3{font-size:1.05rem;margin-bottom:6px;}
.price{color:var(--primary);font-weight:700;font-size:1.15rem;}

/* Profile page */
.profile-hero{color:#fff;padding:60px 0 90px;text-align:center;}
.profile-avatar{width:120px;height:120px;border-radius:50%;object-fit:cover;border:4px solid #fff;margin:0 auto 16px;background:#fff;}
.profile-card{max-width:480px;margin:-60px auto 0;background:#fff;border-radius:var(--radius);box-shadow:0 10px 40px rgba(0,0,0,.08);padding:32px;text-align:center;}
.social-row{display:flex;gap:14px;justify-content:center;margin-top:20px;flex-wrap:wrap;}
.social-row a{width:44px;height:44px;border-radius:50%;background:#F3F4F6;display:flex;align-items:center;justify-content:center;font-weight:700;}

/* Table (admin) */
table{width:100%;border-collapse:collapse;}
table th,table td{padding:12px;border-bottom:1px solid var(--border);text-align:left;font-size:.92rem;}
table th{background:#F9FAFB;font-weight:700;}
.badge{padding:3px 10px;border-radius:999px;font-size:.75rem;font-weight:600;}
.badge-green{background:#ECFDF5;color:#065F46;}
.badge-yellow{background:#FFFBEB;color:#92400E;}
.badge-red{background:#FEF2F2;color:#991B1B;}
.badge-gray{background:#F3F4F6;color:#374151;}

/* Footer */
.site-footer{background:var(--dark);color:#D1D5DB;padding:60px 0 20px;margin-top:60px;}
.footer-inner{display:grid;grid-template-columns:2fr repeat(auto-fit, minmax(120px, 1fr));gap:30px;padding-bottom:30px;}
.footer-inner .logo{color:#fff;}
.footer-inner .logo span{color:var(--primary);} /* the "HUB" accent in the footer's plain-text logo only - deliberately scoped here, not global, so it can never collide with the header's title/tagline spans again */
.footer-inner h4{color:#fff;margin-bottom:14px;}
.footer-inner a{display:block;color:#9CA3AF;margin-bottom:8px;}
.copyright{border-top:1px solid #374151;padding-top:20px;text-align:center;font-size:.85rem;color:#9CA3AF;}

/* Admin layout */
.admin-wrap{display:grid;grid-template-columns:220px 1fr;min-height:100vh;}
.admin-sidebar{background:var(--dark);color:#fff;padding:24px 0;}
.admin-sidebar a{display:flex;align-items:center;gap:10px;padding:11px 24px;color:#D1D5DB;font-size:.9rem;}
.admin-sidebar a svg{flex-shrink:0;opacity:.85;}
.admin-sidebar a:hover,.admin-sidebar a.active{background:rgba(255,255,255,.08);color:#fff;}
.admin-nav-group-label{padding:16px 24px 6px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#6B7280;}
.admin-main{padding:32px;background:#F9FAFB;}
.admin-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;}
.admin-menu-toggle{display:none;}
.admin-sidebar-backdrop{display:none;}

@media(max-width:768px){
  .admin-wrap{grid-template-columns:1fr;}
  .admin-menu-toggle{display:flex;align-items:center;gap:10px;background:var(--dark);color:#fff;border:none;padding:14px 20px;width:100%;font-weight:700;font-size:1rem;cursor:pointer;}
  .admin-sidebar{position:fixed;top:0;left:0;bottom:0;width:80%;max-width:280px;z-index:60;transform:translateX(-105%);transition:transform .3s ease;overflow-y:auto;}
  .admin-sidebar.open{transform:translateX(0);}
  .admin-sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:55;}
  .admin-sidebar-backdrop.open{display:block;}
  .admin-main{padding:20px;}
}

@media(max-width:768px){
  .main-nav{position:absolute;top:70px;left:0;right:0;background:var(--header-bg,#fff);flex-direction:column;padding:20px;border-bottom:none;box-shadow:0 4px 12px rgba(0,0,0,.1);display:none;}
  .main-nav.open{display:flex;}
  .nav-toggle{display:block;}
  .footer-inner{grid-template-columns:1fr;}
  table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;}

  /* Mobile dropdown follows the same transparent-then-solid pattern as the desktop header -
     semi-dark translucent backdrop while floating over the hero (so text stays readable
     regardless of what's in the photo behind it), solid header color once scrolled. */
  .site-header-transparent .main-nav{background:rgba(15,17,21,.85);border-bottom-color:transparent;backdrop-filter:blur(6px);}
  .site-header-transparent.scrolled .main-nav{background:var(--header-bg,#fff);border-bottom-color:var(--border);backdrop-filter:none;}
}