/* ============================================================
   Nutty Roots — Roasted Walnut & Gold Theme
   ============================================================ */

:root{
  --t1: #0B1320;        /* deep cosmic navy */
  --t2: #14273D;        /* satin indigo surface */
  --t3: rgba(255, 255, 255, 0.12); /* soft border / hover overlay */
  --accent: #FF8C6A;    /* coral accent */
  --accent-light: #FFD486;
  --accent-soft: rgba(255, 140, 106, 0.18);
  --accent-rose: #E95D9E;
  --accent-cyan: #5CE1E6;
  --text-light: #F9F8FF;
  --text-muted: #A3AED0;
  --white: #FFFFFF;
  --success: #5CE18A;
  --danger: #FF5D76;
  --radius: 18px;
  --shadow: 0 24px 55px rgba(4, 12, 30, 0.32);
  --shadow-soft: 0 12px 28px rgba(4, 12, 30, 0.18);
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Poppins', Arial, sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior: smooth; }

body{
  font-family: var(--font-body);
  min-height: 100%;
  background: radial-gradient(circle at 20% 10%, rgba(255,140,106,0.14), transparent 20%),
              radial-gradient(circle at 80% 15%, rgba(92,225,230,0.1), transparent 22%),
              linear-gradient(135deg, #0B1320 0%, #121E3E 38%, #131C35 100%);
  color: var(--text-light);
  line-height: 1.75;
}

body::selection{
  background: rgba(255,140,106,0.22);
  color: var(--white);
}

*{
  transition: background .28s ease, color .28s ease, transform .28s ease, box-shadow .28s ease;
}

section,
.hero,
.product-card,
.cat-card,
.form-box,
.cart-summary,
.site-footer,
.site-header{
  opacity: 0;
  transform: translateY(16px);
  animation: fadeInUp 0.72s ease forwards;
}

.hero{ animation-delay: 0.1s; }
.section-title{ animation-delay: 0.16s; }
.cat-card{ animation-delay: 0.22s; }
.product-card{ animation-delay: 0.24s; }
.form-box{ animation-delay: 0.18s; }
.cart-summary{ animation-delay: 0.18s; }
.site-footer{ animation-delay: 0.2s; }
.site-header{ animation-delay: 0.05s; }

@keyframes fadeInUp{
  from{ opacity: 0; transform: translateY(16px); }
  to{ opacity: 1; transform: translateY(0); }
}

@keyframes floatGlow{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}

a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
img{ max-width:100%; display:block; }

.container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

h1,h2,h3,h4{ font-family: var(--font-heading); }

.btn{
  display:inline-block;
  padding: 14px 30px;
  border-radius: 999px;
  font-weight:700;
  cursor:pointer;
  border:none;
  transition: transform .28s ease, box-shadow .28s ease, background .28s ease;
  font-family: var(--font-body);
  font-size: 15px;
  box-shadow: 0 14px 28px rgba(4, 12, 30, 0.14);
}
.btn-primary{
  background: linear-gradient(135deg, #FF8C6A 0%, #FFD486 100%);
  color: #101820;
  letter-spacing: 0.03em;
}
.btn-primary:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 38px rgba(4, 12, 30, 0.22);
  background: linear-gradient(135deg, #FF9F73 0%, #FFE3A5 100%);
}
.btn-outline{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(92,225,230,0.45);
  color: var(--accent-cyan);
}
.btn-outline:hover{
  background: rgba(92,225,230,0.14);
  color: var(--accent-light);
}
.btn-block{ width:100%; text-align:center; }
.btn-danger{
  background: linear-gradient(135deg, #FF5D76 0%, #FF8A9B 100%);
  color:#fff;
}
.btn-sm{ padding: 8px 16px; font-size: 13px; }

/* ---------------- Header ---------------- */
.site-header{
  background: rgba(12, 20, 43, 0.9);
  position: sticky; top:0; z-index: 100;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  box-shadow: 0 24px 60px rgba(4, 12, 30, 0.22);
}
.header-top{
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px 0;
}
.logo{
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight:700;
  color: var(--accent);
  letter-spacing: 0.5px;
}
.logo span{ color: var(--accent-cyan); }
.main-nav ul{ display:flex; align-items:center; gap: 28px; }
.main-nav a{
  font-size: 14px; font-weight:600; color: var(--text-muted);
  transition: color .2s, transform .2s;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.main-nav a:hover, .main-nav a.active{ color: var(--accent-cyan); transform: translateY(-1px); }

.header-actions{ display:flex; align-items:center; gap: 18px; }
.icon-btn{
  position:relative; font-size: 20px; color: var(--text-light);
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background: var(--t2); transition: background .2s;
}
.icon-btn:hover{ background: var(--t3); }
.cart-badge{
  position:absolute; top:-4px; right:-4px;
  background: var(--accent); color: var(--t1);
  font-size: 11px; font-weight:700;
  border-radius:50%; width:18px; height:18px;
  display:flex; align-items:center; justify-content:center;
}
.mobile-toggle{ display:none; font-size:24px; background:none; border:none; color:var(--text-light); cursor:pointer; }

/* ---------------- Hero ---------------- */
.hero{
  background: radial-gradient(circle at top left, rgba(255,140,106,0.15), transparent 26%),
              radial-gradient(circle at bottom right, rgba(92,225,230,0.12), transparent 22%),
              linear-gradient(135deg, #111B34 0%, #15294F 47%, #111A2E 100%);
  padding: 100px 0 90px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(circle at 30% 24%, rgba(255,140,106,0.18), transparent 26%),
              radial-gradient(circle at 78% 58%, rgba(92,225,230,0.14), transparent 20%);
  pointer-events:none;
}
.hero::after{
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 50%, rgba(4,12,30,0.25));
  pointer-events:none;
}
.hero-content{ position:relative; z-index:1; }
.hero h1{
  font-size: clamp(2.8rem, 4.2vw, 5.2rem);
  margin-bottom: 22px;
  color: var(--text-light);
  max-width: 760px;
  margin-left:auto;
  margin-right:auto;
  line-height:1.03;
}
.hero h1 em{ color: var(--accent-cyan); font-style: normal; }
.hero p{
  color: var(--text-muted);
  font-size: 1.05rem;
  max-width: 540px;
  margin: 0 auto 38px;
}
.hero a.btn-primary{ padding: 16px 36px; }

/* ---------------- Category Strip ---------------- */
.category-strip{ padding: 60px 0 20px; }
.section-title{ text-align:center; margin-bottom: 40px; }
.section-title h2{ font-size:32px; color: var(--text-light); }
.section-title p{ color: var(--text-muted); margin-top:8px; }
.cat-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
  gap: 20px;
}
.cat-card{
  background: linear-gradient(180deg, rgba(22, 34, 62, 0.96), rgba(24, 42, 78, 0.92));
  border-radius: var(--radius);
  padding: 26px 18px; text-align:center;
  border: 1px solid rgba(92,225,230,0.16);
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease, background .28s ease;
}
.cat-card:hover{
  transform: translateY(-10px);
  border-color: rgba(92,225,230,0.7);
  box-shadow: 0 22px 44px rgba(4, 12, 30, 0.22);
  background: linear-gradient(180deg, rgba(28, 50, 85, 0.98), rgba(20, 34, 62, 0.96));
}
.cat-card .cat-icon{
  width:78px; height:78px; border-radius:50%; margin: 0 auto 18px;
  background: rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center;
  font-size: 30px; overflow:hidden;
}
.cat-card .cat-icon img{ width:100%; height:100%; object-fit:cover; }
.cat-card h4{ font-size:16px; font-weight:700; color: var(--text-light); margin-top:8px; }

/* ---------------- Product Grid ---------------- */
.product-section{ padding: 64px 0; }
.product-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
  gap: 30px;
}
.product-card{
  background: linear-gradient(180deg, rgba(11, 19, 43, 0.98), rgba(16, 29, 56, 0.94));
  border-radius: calc(var(--radius) + 4px);
  overflow:hidden;
  border:1px solid rgba(92,225,230,0.14);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  position:relative;
}
.product-card:hover{
  transform: translateY(-10px);
  box-shadow: 0 34px 70px rgba(4,12,30,0.28);
  border-color: rgba(92,225,230,0.55);
}
.product-badge{
  position:absolute; top:12px; left:12px;
  background: linear-gradient(135deg, rgba(255,140,106,0.95), rgba(92,225,230,0.9));
  color: #08121F;
  font-size:11px; font-weight:700; padding:6px 14px; border-radius:24px;
  z-index:2; text-transform:uppercase;
}
.product-img{ height: 220px; background: linear-gradient(135deg, rgba(92,225,230,0.16), rgba(255,140,106,0.12)); overflow:hidden; }
.product-img img{ width:100%; height:100%; object-fit:cover; transition: transform .45s ease, filter .45s ease; }
.product-card:hover .product-img img{ transform: scale(1.12); filter: saturate(1.08); }
.product-info{ padding: 20px; }
.product-info h3{ font-size:16px; margin-bottom:8px; color: var(--text-light); font-weight:700; font-family: var(--font-body); }
.product-info .cat-tag{ font-size:12px; color: var(--accent-light); margin-bottom: 10px; display:block; letter-spacing:0.03em; }
.price-row{ display:flex; align-items:center; gap:10px; margin: 12px 0; }
.price-now{ font-size: 18px; font-weight:700; color: var(--accent-cyan); }
.price-old{ font-size: 14px; color: var(--text-muted); text-decoration: line-through; }
.stock-out{ color: var(--danger); font-size:12px; font-weight:600; }

/* ---------------- Footer ---------------- */
.site-footer{ background: linear-gradient(180deg, rgba(8,16,35,0.98), rgba(10,20,43,0.99)); border-top: 1px solid rgba(255,255,255,0.08); padding: 70px 0 0; margin-top: 60px; }
.footer-grid{
  display:grid; grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 40px; padding-bottom: 40px;
}
.footer-grid h4{ color: var(--accent-cyan); font-size:15px; margin-bottom:18px; text-transform:uppercase; letter-spacing:0.5px; }
.footer-grid p, .footer-grid a{ color: var(--text-muted); font-size:14px; display:block; margin-bottom:10px; }
.footer-grid a:hover{ color: var(--accent-light); }
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,0.06); text-align:center; padding: 24px 0;
  color: var(--text-muted); font-size: 13px;
}
.footer-bottom a{ color: var(--accent-cyan); }
.social-icons{ display:flex; gap:12px; margin-top:10px; }
.social-icons a{ width:36px; height:36px; background: rgba(255,255,255,0.06); border-radius:50%; display:flex; align-items:center; justify-content:center; color: var(--text-light); }

/* ---------------- Modal (Policy) ---------------- */
.modal-overlay{
  display:none; position:fixed; inset:0; background: rgba(0,0,0,0.65);
  z-index: 1000; align-items:center; justify-content:center;
}
.modal-overlay.active{ display:flex; }
.modal-box{
  background: var(--t2); border-radius: var(--radius);
  width: 90%; max-width: 700px; max-height: 80vh;
  display:flex; flex-direction:column; border: 1px solid var(--t3);
}
.modal-head{ display:flex; justify-content:space-between; align-items:center; padding:18px 24px; border-bottom:1px solid var(--t3); }
.modal-head h3{ color:var(--accent); font-size:18px; }
.modal-close{ background:none; border:none; color:var(--text-light); font-size:22px; cursor:pointer; }
.modal-body{ padding:0; overflow:hidden; flex:1; }
.modal-body iframe{ width:100%; height:100%; min-height: 400px; border:none; background: var(--t1); }

/* ---------------- Forms ---------------- */
.form-box{
  background: var(--t2); border:1px solid var(--t3); border-radius: var(--radius);
  padding: 36px; max-width: 460px; margin: 60px auto;
}
.form-box h2{ text-align:center; margin-bottom: 26px; color: var(--text-light); }
.form-group{ margin-bottom: 18px; }
.form-group label{ display:block; margin-bottom:6px; font-size:14px; color: var(--text-muted); }
.form-group input, .form-group select, .form-group textarea{
  width:100%; padding: 12px 14px; border-radius: 8px;
  border: 1px solid var(--t3); background: var(--t1); color: var(--text-light);
  font-family: var(--font-body); font-size: 14px;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{ outline:none; border-color: var(--accent); }
.form-note{ text-align:center; font-size:13px; color:var(--text-muted); margin-top:16px; }
.form-note a{ color: var(--accent); font-weight:600; }
.alert{ padding: 12px 16px; border-radius:8px; margin-bottom:18px; font-size:14px; }
.alert-danger{ background: rgba(224,100,90,0.15); color: var(--danger); border:1px solid var(--danger); }
.alert-success{ background: rgba(111,169,106,0.15); color: var(--success); border:1px solid var(--success); }

/* ---------------- Cart / Checkout ---------------- */
.cart-table{ width:100%; border-collapse: collapse; }
.cart-table th{ text-align:left; color: var(--text-muted); font-size:13px; text-transform:uppercase; padding: 12px; border-bottom:1px solid var(--t3); }
.cart-table td{ padding: 16px 12px; border-bottom:1px solid var(--t3); vertical-align:middle; }
.cart-product{ display:flex; align-items:center; gap:14px; }
.cart-product img{ width:64px; height:64px; border-radius:8px; object-fit:cover; }
.qty-box{ display:flex; align-items:center; border:1px solid var(--t3); border-radius:20px; width: fit-content; }
.qty-box button{ background:none; border:none; color: var(--text-light); width:30px; height:30px; cursor:pointer; font-size:16px; }
.qty-box span{ padding: 0 10px; font-weight:600; }
.cart-summary{ background: var(--t2); border:1px solid var(--t3); border-radius: var(--radius); padding: 24px; }
.summary-row{ display:flex; justify-content:space-between; margin-bottom:12px; color: var(--text-muted); font-size:14px; }
.summary-row.total{ color: var(--text-light); font-weight:700; font-size:18px; border-top:1px solid var(--t3); padding-top:14px; margin-top:14px; }

.breadcrumb{ padding: 20px 0; color: var(--text-muted); font-size:13px; }
.breadcrumb a{ color: var(--accent); }

.page-header{ padding: 50px 0 30px; text-align:center; }
.page-header h1{ font-size: 34px; }

.empty-state{ text-align:center; padding: 80px 20px; color: var(--text-muted); }
.empty-state .icon{ font-size:60px; margin-bottom: 20px; }

/* Filters sidebar */
.shop-layout{ display:grid; grid-template-columns: 240px 1fr; gap: 30px; }
.filter-box{ background: var(--t2); border:1px solid var(--t3); border-radius: var(--radius); padding: 20px; height: fit-content; }
.filter-box h4{ color: var(--accent); margin-bottom: 14px; font-size:14px; text-transform:uppercase; }
.filter-box label{ display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:14px; color: var(--text-muted); cursor:pointer; }

@media (max-width: 900px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .shop-layout{ grid-template-columns: 1fr; }
}
@media (max-width: 768px){
  .main-nav{ display:none; position:absolute; top:100%; left:0; right:0; background: var(--t1); border-top:1px solid var(--t3); }
  .main-nav.active{ display:block; }
  .main-nav ul{ flex-direction:column; padding: 20px; gap: 16px; }
  .mobile-toggle{ display:block; }
  .hero h1{ font-size: 30px; }
  .footer-grid{ grid-template-columns: 1fr; }
}