/* =====================================================
   design.css — RMDN Homepage & Shared Component Styles
   ===================================================== */

:root {
  --green:#1b3b23; --green-l:#2d5c38; --brown:#6c451c;
  --gold:#d4a017; --gold-l:#f0c040; --cream:#eddcb0;
  --bg-soft:#f8f5ef;
  --sh-sm:0 2px 12px rgba(0,0,0,.08);
  --sh-md:0 6px 30px rgba(0,0,0,.13);
  --rad:14px; --tr:.3s ease;
}

/* --- Hero --- */
.rmdn-hero {
  position:relative; min-height:92vh; display:flex; align-items:center;
  overflow:hidden; padding-top:110px;
  background:linear-gradient(135deg,var(--green) 0%,var(--green-l) 40%,var(--brown) 100%);
}
.rmdn-hero::before {
  content:''; position:absolute; inset:0;
  background:url('/RMDN/assets/img/hero-img-1.png') center/cover no-repeat;
  opacity:.12; z-index:0;
}
.hero-content { position:relative; z-index:2; }
.hero-badge {
  display:inline-block; background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.3); color:var(--cream);
  padding:6px 18px; border-radius:50px; font-size:.77rem;
  letter-spacing:2px; margin-bottom:20px;
}
.hero-title {
  font-size:clamp(2.1rem,5vw,3.7rem); font-weight:800;
  color:#fff; line-height:1.15; margin-bottom:18px;
}
.hero-title span { color:var(--gold-l); }
.hero-sub {
  font-size:1.03rem; color:rgba(255,255,255,.82);
  max-width:510px; line-height:1.7; margin-bottom:34px;
}
.hero-btns { display:flex; flex-wrap:wrap; gap:13px; margin-bottom:44px; }
.btn-hp {
  padding:13px 28px; border-radius:50px; font-weight:700;
  font-size:.93rem; border:none; transition:var(--tr);
  text-decoration:none; display:inline-flex; align-items:center; gap:8px;
}
.btn-hp.gold { background:var(--gold); color:#1a1a1a; box-shadow:0 4px 18px rgba(212,160,23,.4); }
.btn-hp.gold:hover { background:var(--gold-l); transform:translateY(-2px); color:#111; }
.btn-hp.outline { background:transparent; color:#fff; border:2px solid rgba(255,255,255,.45); }
.btn-hp.outline:hover { border-color:var(--gold); color:var(--gold); }
.hero-trust { display:flex; flex-wrap:wrap; gap:22px; }
.hero-trust-item { display:flex; align-items:center; gap:9px; color:rgba(255,255,255,.85); font-size:.87rem; }
.hero-trust-item i { color:var(--gold-l); font-size:1.05rem; }
.hero-trust-item strong { color:#fff; }
.hero-float {
  background:rgba(255,255,255,.12); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.22); border-radius:20px;
  padding:20px 22px; color:#fff; margin-bottom:14px;
  box-shadow:0 8px 32px rgba(0,0,0,.2);
  animation:floatUD 3s ease-in-out infinite;
}
.hero-float:nth-child(2) { animation-delay:1.5s; margin-left:32px; }
.hero-stat { font-size:1.85rem; font-weight:800; color:var(--gold-l); }
@keyframes floatUD { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* --- Section headings --- */
.section-head { text-align:center; margin-bottom:42px; }
.section-label {
  display:inline-block; background:var(--cream); color:var(--brown);
  font-size:.72rem; font-weight:700; letter-spacing:2px;
  padding:4px 16px; border-radius:50px; margin-bottom:11px;
}
.section-head h2 { font-size:clamp(1.5rem,3vw,2.1rem); font-weight:800; color:var(--green); margin:0; }
.section-head p { color:#777; font-size:.92rem; margin-top:8px; }

/* --- Feature cards --- */
.feature-card {
  background:#fff; border-radius:var(--rad); padding:28px 20px;
  text-align:center; box-shadow:var(--sh-sm); transition:var(--tr);
  border:1px solid rgba(0,0,0,.05); height:100%;
}
.feature-card:hover { transform:translateY(-6px); box-shadow:var(--sh-md); }
.feat-icon {
  width:60px; height:60px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 16px; font-size:1.35rem;
}
.feat-icon.g { background:rgba(27,59,35,.1); color:var(--green); }
.feat-icon.b { background:rgba(108,69,28,.1); color:var(--brown); }
.feat-icon.o { background:rgba(212,160,23,.1); color:var(--gold); }
.feat-icon.i { background:rgba(23,90,212,.1);  color:#175ad4; }
.feature-card h5 { font-weight:700; color:var(--green); margin-bottom:7px; font-size:.97rem; }
.feature-card p  { font-size:.85rem; color:#777; margin:0; }

/* --- Product cards --- */
.prod-card {
  background:#fff; border-radius:var(--rad); overflow:hidden;
  box-shadow:var(--sh-sm); transition:var(--tr);
  position:relative; height:100%;
  display:flex; flex-direction:column;
}
.prod-card:hover { transform:translateY(-6px); box-shadow:var(--sh-md); }
.prod-card.premium { border:2px solid var(--gold); box-shadow:0 0 0 3px rgba(212,160,23,.14),var(--sh-md); }
.prod-card.pro     { border:2px solid #4a90d9; }
.prod-img { position:relative; overflow:hidden; height:192px; background:var(--bg-soft); }
.prod-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.prod-card:hover .prod-img img { transform:scale(1.06); }
.prod-img-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#ccc; font-size:2.7rem; }
.badge-premium {
  position:absolute; top:10px; left:10px;
  background:linear-gradient(135deg,var(--gold),#b8860b);
  color:#fff; font-size:.69rem; font-weight:700;
  padding:4px 10px; border-radius:20px;
  box-shadow:0 2px 8px rgba(212,160,23,.45);
  display:inline-flex; align-items:center; gap:4px;
}
.badge-pro {
  position:absolute; top:10px; left:10px;
  background:linear-gradient(135deg,#4a90d9,#1a5fa8);
  color:#fff; font-size:.69rem; font-weight:700;
  padding:4px 10px; border-radius:20px;
  display:inline-flex; align-items:center; gap:4px;
}
.badge-cat {
  position:absolute; top:10px; right:10px;
  background:rgba(27,59,35,.85); color:var(--cream);
  font-size:.67rem; font-weight:600; padding:3px 10px; border-radius:20px;
}
.prod-body { padding:15px; flex:1; display:flex; flex-direction:column; }
.prod-body h6 {
  font-weight:700; color:#1a1a1a; margin-bottom:3px; font-size:.93rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.prod-seller { font-size:.72rem; color:#999; margin-bottom:10px; }
.prod-seller i { color:var(--green); }
.prod-price  { font-size:1.08rem; font-weight:800; color:var(--brown); margin-bottom:12px; }
.prod-footer { margin-top:auto; display:flex; align-items:center; justify-content:space-between; }
.btn-prod {
  background:var(--green); color:var(--cream);
  border:none; border-radius:50px; padding:7px 17px;
  font-size:.79rem; font-weight:600; transition:var(--tr);
  text-decoration:none; display:inline-block;
}
.btn-prod:hover { background:var(--brown); color:var(--cream); }
.prod-views   { font-size:.72rem; color:#bbb; }
.stock-badge  { font-size:.69rem; color:#e74c3c; font-weight:600; }

/* --- Horizontal scroll --- */
.scroll-row {
  display:flex; gap:17px; overflow-x:auto;
  padding-bottom:10px; scroll-snap-type:x mandatory;
}
.scroll-row::-webkit-scrollbar { height:4px; }
.scroll-row::-webkit-scrollbar-thumb { background:var(--cream); border-radius:4px; }
.scroll-card { min-width:225px; scroll-snap-align:start; flex-shrink:0; }

/* --- Category cards --- */
.cat-card {
  border-radius:var(--rad);
  background:linear-gradient(135deg,var(--green),var(--green-l));
  padding:24px 16px; text-align:center; color:#fff;
  transition:var(--tr); box-shadow:var(--sh-sm); height:100%;
}
.cat-card:hover { transform:translateY(-5px); box-shadow:var(--sh-md); background:linear-gradient(135deg,var(--brown),#8b5e2e); }
.cat-icon  { font-size:1.85rem; margin-bottom:10px; color:var(--gold-l); }
.cat-card h6 { font-weight:700; font-size:.9rem; margin-bottom:4px; }
.cat-card small { color:rgba(255,255,255,.67); font-size:.74rem; }

/* --- CTA --- */
.rmdn-cta {
  background:linear-gradient(135deg,var(--green) 0%,var(--green-l) 50%,var(--brown) 100%);
  padding:74px 0; position:relative; overflow:hidden;
}
.rmdn-cta::before {
  content:''; position:absolute; inset:0;
  background:url('/RMDN/assets/img/hero-img-2.jpg') center/cover no-repeat;
  opacity:.06;
}
.rmdn-cta .ct { position:relative; z-index:2; text-align:center; color:#fff; }
.rmdn-cta h2 { font-size:clamp(1.65rem,3.5vw,2.45rem); font-weight:800; margin-bottom:12px; }
.rmdn-cta p  { color:rgba(255,255,255,.8); font-size:.98rem; margin-bottom:28px; }

/* --- Misc / Utilities --- */
.empty-state { text-align:center; padding:48px 20px; color:#bbb; }
.empty-state i { font-size:2.7rem; margin-bottom:11px; display:block; }
.bg-soft   { background:var(--bg-soft); }
.fade-up   { opacity:0; transform:translateY(24px); transition:opacity .6s ease,transform .6s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }
.row-head  {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px; margin-bottom:28px;
}
.row-head-left .sl { display:block; }
.row-head-left h2 { font-size:clamp(1.35rem,2.5vw,1.9rem); font-weight:800; color:var(--green); margin:4px 0 0; }

/* Toast animations */
@keyframes slideIn  { from{transform:translateX(110%);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes slideOut { to{transform:translateX(110%);opacity:0} }