/* ============================================================
   هانسی (Hansi) — سیستم طراحی
   الهام‌گرفته از ساختار و استایل rtl-theme.com
   (پیاده‌سازی اصلی؛ بدون کپی از کد/تصاویر مالکیتی سایت مرجع)
   فونت: وزیرمتن (آفلاین) | راست‌چین | Bootstrap 5 RTL
   ============================================================ */

/* ---------- فونت‌های فارسی ---------- */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Vazirmatn.woff2') format('woff2');
}
@font-face {
  font-family: 'IRANSansWeb';
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url('../fonts/IRANSansWeb.woff2') format('woff2');
}

/* ---------- توکن‌های طراحی ---------- */
:root {
  --h-green: #8ed557;
  --h-green-dark: #76bc41;
  --h-green-darker: #63a534;
  --h-green-soft: rgba(142, 213, 87, .15);
  --h-green-tint: #f2faec;

  --h-orange: #ffb726;
  --h-orange-dark: #f0a800;
  --h-orange-soft: rgba(255, 183, 38, .16);

  --h-ink: #3c4354;          /* رنگ اصلی تیترها */
  --h-ink-2: #53565d;        /* رنگ تیتر بخش‌ها */
  --h-text: #212529;
  --muted: #6d6d6d;
  --muted-2: #959595;

  --h-border: #e9e9e9;
  --h-border-2: #f1f1f1;
  --h-bg: #ffffff;
  --h-bg-soft: #f9fafb;
  --h-bg-soft-2: #f5f6f8;
  --h-dark: #1f2430;

  --h-radius: 12px;
  --h-radius-sm: 8px;
  --h-radius-xs: 4px;

  --h-shadow: 0 6px 24px rgba(24, 32, 51, .07);
  --h-shadow-hover: 0 12px 32px rgba(24, 32, 51, .13);
  --h-shadow-sm: 0 2px 10px rgba(24, 32, 51, .06);

  --h-container: 1380px;
}

html { font-size: 15px; scroll-behavior: smooth; }

body {
  font-family: 'Vazirmatn', 'IRANSansWeb', Tahoma, sans-serif;
  color: var(--h-text);
  background-color: var(--h-bg);
  direction: rtl;
  text-align: right;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { color: var(--h-ink); font-weight: 700; }
a { color: inherit; text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--h-green-dark); }
img { max-width: 100%; }

.container { max-width: var(--h-container); }

::selection { background: var(--h-green); color: #fff; }

/* ---------- دکمه‌ها ---------- */
.btn-h-green,
.btn-h-orange,
.btn-h-outline,
.btn-h-ghost,
.btn-h-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  font-family: inherit;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1;
  border-radius: var(--h-radius-sm);
  padding: .72rem 1.4rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .18s ease;
  white-space: nowrap;
}
.btn-h-green { background: var(--h-green); color: #fff !important; border-color: var(--h-green); }
.btn-h-green:hover { background: var(--h-green-dark); border-color: var(--h-green-dark); color: #fff !important; transform: translateY(-1px); }

.btn-h-orange { background: var(--h-orange); color: #2d2d2d !important; border-color: var(--h-orange); }
.btn-h-orange:hover { background: var(--h-orange-dark); border-color: var(--h-orange-dark); color: #2d2d2d !important; }

.btn-h-dark { background: var(--h-ink); color: #fff !important; border-color: var(--h-ink); }
.btn-h-dark:hover { background: #2b3140; color: #fff !important; }

.btn-h-outline { background: #fff; color: var(--h-ink) !important; border-color: var(--h-border); }
.btn-h-outline:hover { border-color: var(--h-green); color: var(--h-green-dark) !important; }

.btn-h-ghost { background: var(--h-green-soft); color: var(--h-green-darker) !important; border-color: transparent; }
.btn-h-ghost:hover { background: rgba(142, 213, 87, .28); }

.btn-h-sm { padding: .5rem 1rem; font-size: .85rem; border-radius: 6px; }
.btn-h-lg { padding: .95rem 2rem; font-size: 1.05rem; }
.btn-h-block { width: 100%; }

/* ---------- نوار بالا (هدر اصلی) ---------- */
.h-topbar {
  background: #fff;
  border-bottom: 1px solid var(--h-border-2);
  position: relative;
  z-index: 60;
}
.h-topbar .container {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 74px;
  padding-top: .6rem;
  padding-bottom: .6rem;
}

.h-logo {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--h-ink) !important;
  letter-spacing: -.5px;
  flex-shrink: 0;
}
.h-logo .logo-mark {
  width: 42px; height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--h-green), var(--h-green-darker));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.35rem; font-weight: 900;
  box-shadow: 0 4px 12px rgba(142, 213, 87, .4);
}
.h-logo .logo-dot { color: var(--h-green); }
.h-logo small {
  display: block;
  font-size: .6rem;
  font-weight: 600;
  color: var(--muted-2);
  letter-spacing: 2px;
  line-height: 1;
  margin-top: 2px;
}

/* جستجوی سربرگ */
.h-search {
  flex: 1;
  min-width: 0;
  position: relative;
}
.h-search form { display: flex; gap: .5rem; }
.h-search .field {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}
.h-search input {
  width: 100%;
  height: 46px;
  border: 1px solid var(--h-border);
  background: var(--h-bg-soft);
  border-radius: var(--h-radius-sm);
  padding: 0 2.9rem 0 1rem;
  font-family: inherit;
  font-size: .93rem;
  color: var(--h-ink);
  transition: all .18s ease;
}
.h-search input::placeholder { color: var(--muted-2); }
.h-search input:focus {
  outline: none;
  background: #fff;
  border-color: var(--h-green);
  box-shadow: 0 0 0 3px var(--h-green-soft);
}
.h-search .field .ico {
  position: absolute;
  right: .95rem;
  color: var(--muted-2);
  font-size: 1.05rem;
  pointer-events: none;
}
.h-search .btn-h-green { height: 46px; padding: 0 1.6rem; }

/* اکشن‌های سربرگ */
.h-actions { display: flex; align-items: center; gap: .55rem; flex-shrink: 0; }
.h-action {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .6rem .9rem;
  border-radius: var(--h-radius-sm);
  font-size: .88rem;
  font-weight: 600;
  color: var(--muted) !important;
  background: #fff;
  border: 1px solid var(--h-border);
  transition: all .18s ease;
  white-space: nowrap;
}
.h-action:hover { border-color: var(--h-green); color: var(--h-green-dark) !important; background: var(--h-green-tint); }
.h-action .ico { font-size: 1.05rem; color: var(--h-green); }
.h-action-pro {
  background: var(--h-green-soft);
  border-color: transparent;
  color: var(--h-ink) !important;
  font-weight: 700;
}
.h-action-pro:hover { background: rgba(142, 213, 87, .3); color: var(--h-ink) !important; }
.h-action-pro b {
  background: var(--h-green);
  color: #fff;
  border-radius: var(--h-radius-xs);
  padding: .1rem .4rem;
  font-size: .78rem;
  font-weight: 800;
}
.h-action-vendor .ico { color: var(--h-orange); }

/* ---------- نوار منوی اصلی ---------- */
.h-nav {
  background: #fff;
  border-bottom: 1px solid var(--h-border-2);
  position: sticky;
  top: 0;
  z-index: 55;
  box-shadow: 0 2px 12px rgba(24, 32, 51, .05);
}
.h-nav .container { display: flex; align-items: center; gap: .35rem; min-height: 52px; }
.h-nav-toggle {
  display: none;
  background: none; border: 1px solid var(--h-border);
  border-radius: 6px; padding: .4rem .6rem; cursor: pointer;
}
.h-menu { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.h-menu > li { position: relative; }
.h-menu > li > a,
.h-menu > li > button {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .78rem .85rem;
  font-size: .92rem;
  font-weight: 600;
  color: var(--h-ink-2) !important;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  border-radius: 6px;
  transition: all .16s ease;
}
.h-menu > li > a:hover,
.h-menu > li > button:hover,
.h-menu > li.open > button { color: var(--h-green-dark) !important; background: var(--h-green-tint); }
.h-menu .caret { font-size: .7rem; opacity: .6; transition: transform .2s ease; }
.h-menu > li.open .caret { transform: rotate(180deg); }
.h-menu .new-tag {
  background: var(--h-orange);
  color: #4a3200;
  font-size: .65rem;
  font-weight: 800;
  border-radius: var(--h-radius-xs);
  padding: .08rem .35rem;
  margin-right: .3rem;
}
.h-nav-end { margin-inline-start: auto; display: flex; align-items: center; gap: .5rem; }
.h-nav-end a { font-size: .88rem; font-weight: 600; color: var(--muted) !important; padding: .5rem .7rem; }
.h-nav-end a:hover { color: var(--h-green-dark) !important; }

/* مگامنو */
.h-mega {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  background: #fff;
  border-top: 1px solid var(--h-border-2);
  box-shadow: var(--h-shadow-hover);
  padding: 1.8rem 0 2.2rem;
  display: none;
  z-index: 80;
}
.h-mega.open { display: block; animation: fadeUp .18s ease; }
.h-mega-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .4rem 1.5rem;
}
.h-mega-grid a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .62rem .7rem;
  border-radius: var(--h-radius-sm);
  font-size: .92rem;
  font-weight: 500;
  color: var(--h-ink-2) !important;
  transition: all .15s ease;
}
.h-mega-grid a:hover { background: var(--h-green-tint); color: var(--h-green-dark) !important; transform: translateX(-3px); }
.h-mega-grid a .mi {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 8px;
  background: var(--h-bg-soft-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .95rem;
  transition: all .15s ease;
}
.h-mega-grid a:hover .mi { background: var(--h-green); color: #fff !important; }
.h-mega-grid a .new-tag { margin-inline-start: auto; }
.h-mega-title {
  grid-column: 1 / -1;
  font-size: .8rem;
  font-weight: 800;
  color: var(--muted-2);
  letter-spacing: .5px;
  padding-bottom: .4rem;
  border-bottom: 1px dashed var(--h-border);
  margin-bottom: .3rem;
}

@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- نوار جشنواره / شمارش معکوس ---------- */
.h-festival {
  background: linear-gradient(90deg, #23304a 0%, #2f4468 55%, #23304a 100%);
  color: #fff;
  position: relative;
  z-index: 58;
  overflow: hidden;
}
.h-festival::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 85% 50%, rgba(142, 213, 87, .28), transparent 45%);
  pointer-events: none;
}
.h-festival .container {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 62px;
  padding-top: .5rem;
  padding-bottom: .5rem;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}
.h-festival-badge {
  background: var(--h-orange);
  color: #4a3200;
  font-weight: 800;
  font-size: .88rem;
  border-radius: var(--h-radius-sm);
  padding: .42rem .9rem;
  white-space: nowrap;
}
.h-festival-text { font-size: .9rem; font-weight: 600; opacity: .95; }
.h-countdown { display: flex; align-items: center; gap: .4rem; }
.h-countdown .unit {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 6px;
  min-width: 46px;
  padding: .3rem .35rem;
  text-align: center;
  line-height: 1.15;
}
.h-countdown .unit b { display: block; font-size: 1.05rem; font-weight: 800; color: var(--h-orange); }
.h-countdown .unit span { font-size: .62rem; opacity: .8; }
.h-countdown .sep { font-weight: 800; opacity: .5; }
.h-festival .container > .btn-h-orange { margin-inline-start: auto; }

/* ---------- هیرو ---------- */
.h-hero {
  background:
    radial-gradient(1100px 380px at 88% -10%, rgba(142, 213, 87, .22), transparent 60%),
    radial-gradient(900px 340px at 5% 110%, rgba(255, 183, 38, .16), transparent 60%),
    var(--h-bg-soft);
  padding: 3.2rem 0 2.6rem;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--h-border-2);
}
.h-hero h1 {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 900;
  color: var(--h-ink);
  line-height: 1.45;
  margin-bottom: .7rem;
}
.h-hero h1 em { font-style: normal; color: var(--h-green-dark); }
.h-hero .sub {
  color: var(--muted);
  font-size: 1.03rem;
  margin-bottom: 1.7rem;
  font-weight: 500;
}
.h-hero-search {
  background: #fff;
  border: 1px solid var(--h-border);
  border-radius: var(--h-radius);
  box-shadow: var(--h-shadow);
  padding: .55rem;
  display: flex;
  gap: .5rem;
  max-width: 830px;
}
.h-hero-search .field { flex: 1; position: relative; display: flex; align-items: center; }
.h-hero-search input {
  width: 100%; height: 52px;
  border: 0; background: transparent;
  padding: 0 2.7rem 0 1rem;
  font-family: inherit; font-size: 1rem;
  color: var(--h-ink);
}
.h-hero-search input:focus { outline: none; }
.h-hero-search input::placeholder { color: var(--muted-2); }
.h-hero-search .field .ico { position: absolute; right: .95rem; color: var(--h-green); font-size: 1.15rem; }
.h-hero-search .btn-h-green { height: 52px; padding: 0 2.2rem; font-size: 1rem; }

.h-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: 1.2rem; }
.h-tags .lbl { font-size: .87rem; color: var(--muted); font-weight: 600; margin-inline-end: .3rem; }
.h-tags a {
  background: #fff;
  border: 1px solid var(--h-border);
  color: var(--h-ink-2) !important;
  font-size: .84rem;
  font-weight: 600;
  border-radius: 100px;
  padding: .4rem .95rem;
  transition: all .16s ease;
}
.h-tags a:hover { background: var(--h-green); border-color: var(--h-green); color: #fff !important; }

.h-hero-stats {
  display: flex;
  gap: 2.2rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.h-hero-stats div b { display: block; font-size: 1.5rem; font-weight: 900; color: var(--h-ink); line-height: 1.2; }
.h-hero-stats div span { font-size: .83rem; color: var(--muted); }

/* ---------- بنرهای تبلیغاتی ---------- */
.h-banners { padding: 1.6rem 0 .4rem; }
.h-banner-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .9rem;
}
.h-banner {
  position: relative;
  border-radius: var(--h-radius);
  overflow: hidden;
  min-height: 148px;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff !important;
  transition: transform .2s ease, box-shadow .2s ease;
  isolation: isolate;
}
.h-banner:hover { transform: translateY(-4px); box-shadow: var(--h-shadow-hover); color: #fff !important; }
.h-banner::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 120%, rgba(255,255,255,.22), transparent 55%);
  z-index: -1;
}
.h-banner h4 { color: #fff !important; font-size: 1.02rem; font-weight: 800; line-height: 1.5; margin: 0; }
.h-banner p { font-size: .8rem; opacity: .9; margin: .3rem 0 0; }
.h-banner .b-cta {
  align-self: flex-start;
  background: rgba(255, 255, 255, .95);
  color: var(--h-ink) !important;
  font-size: .78rem;
  font-weight: 800;
  border-radius: 6px;
  padding: .35rem .8rem;
}
.h-banner .b-art {
  position: absolute;
  left: -.5rem;
  bottom: -.7rem;
  font-size: 4.4rem;
  opacity: .22;
  transform: rotate(-12deg);
  z-index: -1;
}
.h-banner.b1 { background: linear-gradient(135deg, #1d6b45, #2fa063); }
.h-banner.b2 { background: linear-gradient(135deg, #2b3446, #46536e); }
.h-banner.b3 { background: linear-gradient(135deg, #b8451f, #e8763a); }
.h-banner.b4 { background: linear-gradient(135deg, #1746a2, #3d7ce0); }
.h-banner.b5 { background: linear-gradient(135deg, #5b2fa8, #8b57e0); }

/* ---------- هدر بخش‌ها ---------- */
.h-section { padding: 2.2rem 0; }
.h-section.soft { background: var(--h-bg-soft); border-block: 1px solid var(--h-border-2); }
.h-sec-head {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1.4rem;
}
.h-sec-head .ico {
  width: 38px; height: 38px;
  border-radius: 9px;
  background: var(--h-orange-soft);
  color: var(--h-orange-dark);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}
.h-sec-head h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--h-ink-2);
  margin: 0;
}
.h-sec-head .more {
  margin-inline-start: auto;
  font-size: .87rem;
  font-weight: 700;
  color: var(--h-green-dark) !important;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  white-space: nowrap;
}
.h-sec-head .more:hover { gap: .55rem; }
.h-sec-head .tabs { margin-inline-start: auto; display: flex; gap: .3rem; flex-wrap: wrap; }

.h-tab {
  background: #fff;
  border: 1px solid var(--h-border);
  color: var(--muted) !important;
  font-size: .84rem;
  font-weight: 700;
  border-radius: 100px;
  padding: .45rem 1.05rem;
  cursor: pointer;
  font-family: inherit;
  transition: all .16s ease;
}
.h-tab:hover { border-color: var(--h-green); color: var(--h-green-dark) !important; }
.h-tab.active { background: var(--h-ink); border-color: var(--h-ink); color: #fff !important; }
.h-section.soft .h-tab { background: #fff; }

/* ---------- کارت محصول / گیگ ---------- */
.h-grid { display: grid; gap: 1.1rem; }
.h-grid-4 { grid-template-columns: repeat(4, 1fr); }
.h-grid-5 { grid-template-columns: repeat(5, 1fr); }
.h-grid-3 { grid-template-columns: repeat(3, 1fr); }
.h-grid-2 { grid-template-columns: repeat(2, 1fr); }

.h-card {
  background: #fff;
  border: 1px solid var(--h-border-2);
  border-radius: var(--h-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative;
}
.h-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--h-shadow-hover);
  border-color: rgba(142, 213, 87, .55);
}
.h-card-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.4rem;
  overflow: hidden;
  background: linear-gradient(135deg, #eef1f6, #dfe5ee);
}
.h-card-cover .cat-badge {
  position: absolute;
  top: .6rem; right: .6rem;
  background: rgba(255, 255, 255, .94);
  color: var(--h-ink);
  font-size: .7rem;
  font-weight: 800;
  border-radius: var(--h-radius-xs);
  padding: .22rem .6rem;
  box-shadow: var(--h-shadow-sm);
}
.h-card-cover .off-badge {
  position: absolute;
  top: .6rem; left: .6rem;
  background: var(--h-green);
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
  border-radius: var(--h-radius-xs);
  padding: .24rem .55rem;
}
.h-card-cover .heart {
  position: absolute;
  bottom: .55rem; left: .55rem;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  transition: all .16s ease;
}
.h-card-cover .heart:hover { color: var(--h-orange); transform: scale(1.1); }

.h-card-body { padding: .9rem 1rem .55rem; flex: 1; }
.h-card-title {
  font-size: .97rem;
  font-weight: 600;
  color: var(--h-ink);
  line-height: 1.75;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.4em;
  margin-bottom: .5rem;
}
.h-card:hover .h-card-title { color: var(--h-green-dark); }
.h-card-seller {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .8rem;
  color: var(--muted);
  margin-bottom: .35rem;
}
.h-card-seller .av {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--h-green-soft);
  color: var(--h-green-darker);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .75rem;
  font-weight: 800;
  flex-shrink: 0;
}
.h-card-seller .verified { color: var(--h-green); font-size: .8rem; }
.h-card-use {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  color: var(--muted-2);
}
.h-card-use .ico { color: var(--h-green); }

.h-card-foot {
  border-top: 1px dashed var(--h-border);
  padding: .6rem 1rem .75rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.h-metrics { display: flex; align-items: center; gap: .9rem; }
.h-metric { text-align: center; line-height: 1.2; min-width: 42px; }
.h-metric b { display: block; font-size: .84rem; font-weight: 800; color: var(--h-ink); }
.h-metric span { font-size: .66rem; color: var(--muted-2); }
.h-metric.rate b { color: var(--h-green-darker); }
.h-metric.support b { color: var(--h-orange-dark); }

.h-price-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .5rem;
}
.h-price-old {
  font-size: .82rem;
  color: var(--muted-2);
  text-decoration: line-through;
}
.h-price-off {
  background: var(--h-green);
  color: #fff;
  font-size: .74rem;
  font-weight: 800;
  border-radius: var(--h-radius-xs);
  padding: .1rem .45rem;
  margin-inline-end: .35rem;
}
.h-price {
  font-size: 1.02rem;
  font-weight: 900;
  color: var(--h-ink);
  line-height: 1.3;
}
.h-price small { font-size: .7rem; font-weight: 600; color: var(--muted); }
.h-price.free { color: var(--h-green-dark); }

.h-card-actions { display: flex; gap: .45rem; }
.h-card-actions .btn-h-green,
.h-card-actions .btn-h-outline { flex: 1; padding: .55rem .6rem; font-size: .82rem; border-radius: 6px; }

/* ---------- ردیف افقی اسکریبل ---------- */
.h-rail-wrap { position: relative; }
.h-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(268px, 1fr);
  gap: 1.1rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: .3rem;
  scroll-snap-type: x mandatory;
}
.h-rail::-webkit-scrollbar { display: none; }
.h-rail > * { scroll-snap-align: start; }
.h-rail-nav {
  display: flex;
  gap: .4rem;
}
.h-rail-nav button {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--h-border);
  background: #fff;
  color: var(--h-ink);
  cursor: pointer;
  font-size: .95rem;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .16s ease;
}
.h-rail-nav button:hover { background: var(--h-green); border-color: var(--h-green); color: #fff; }

/* ---------- کارت دمو (بزرگ) ---------- */
.h-demo-card {
  background: #fff;
  border: 1px solid var(--h-border-2);
  border-radius: var(--h-radius);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
  display: flex;
  flex-direction: column;
}
.h-demo-card:hover { transform: translateY(-4px); box-shadow: var(--h-shadow-hover); }
.h-demo-thumb {
  aspect-ratio: 4 / 3;
  background: linear-gradient(140deg, #eef1f6, #dde4ee);
  display: flex; align-items: center; justify-content: center;
  font-size: 3.6rem;
  position: relative;
}
.h-demo-thumb .pro-tag {
  position: absolute; top: .6rem; right: .6rem;
  background: var(--h-ink); color: var(--h-orange);
  font-size: .68rem; font-weight: 900;
  border-radius: var(--h-radius-xs);
  padding: .2rem .55rem;
  letter-spacing: .5px;
}
.h-demo-body { padding: .85rem 1rem 1rem; }
.h-demo-body .cat { font-size: .75rem; color: var(--muted-2); margin-bottom: .25rem; }
.h-demo-body h4 { font-size: .98rem; font-weight: 700; color: var(--h-ink); line-height: 1.7; margin-bottom: .5rem; }
.h-demo-body .meta { display: flex; gap: .8rem; font-size: .78rem; color: var(--muted); }
.h-demo-body .meta b { color: var(--h-green-darker); font-weight: 800; }

/* ---------- باکس دسته‌بندی (آمار) ---------- */
.h-catbox {
  background: #fff;
  border: 1px solid var(--h-border-2);
  border-radius: var(--h-radius);
  padding: 1.3rem 1rem;
  text-align: center;
  display: block;
  transition: all .2s ease;
}
.h-catbox:hover {
  border-color: var(--h-green);
  box-shadow: var(--h-shadow);
  transform: translateY(-3px);
  color: inherit;
}
.h-catbox .ic {
  width: 52px; height: 52px;
  margin: 0 auto .7rem;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  background: var(--h-green-soft);
}
.h-catbox:nth-child(2n) .ic { background: var(--h-orange-soft); }
.h-catbox:nth-child(3n) .ic { background: rgba(61, 124, 224, .14); }
.h-catbox h4 { font-size: .98rem; font-weight: 800; color: var(--h-ink); margin-bottom: .2rem; }
.h-catbox p { font-size: .8rem; color: var(--muted); margin: 0; }
.h-catbox p b { color: var(--h-green-dark); font-weight: 900; font-size: .95rem; }

/* ---------- بنر CTA وسط صفحه ---------- */
.h-cta-band {
  background: linear-gradient(120deg, var(--h-green-dark), var(--h-green) 55%, #a8e07a);
  border-radius: var(--h-radius);
  color: #fff;
  padding: 2.2rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.h-cta-band::after {
  content: '✨';
  position: absolute;
  left: 3rem; top: 50%;
  transform: translateY(-50%);
  font-size: 6rem;
  opacity: .2;
}
.h-cta-band h3 { color: #fff !important; font-size: 1.4rem; font-weight: 900; margin-bottom: .4rem; }
.h-cta-band p { margin: 0; opacity: .95; font-size: .95rem; }
.h-cta-band .acts { margin-inline-start: auto; display: flex; gap: .6rem; z-index: 1; }
.h-cta-band .btn-white { background: #fff; color: var(--h-green-darker) !important; border-color: #fff; }
.h-cta-band .btn-white:hover { background: #f4fff0; }

/* ---------- سه کارت ویژه (وبلاگ / شغلی / فروشنده) ---------- */
.h-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.h-trio-card {
  border-radius: var(--h-radius);
  padding: 1.5rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: transform .2s ease, box-shadow .2s ease;
  border: 1px solid transparent;
}
.h-trio-card:hover { transform: translateY(-4px); box-shadow: var(--h-shadow-hover); color: inherit; }
.h-trio-card .ic {
  width: 54px; height: 54px; flex-shrink: 0;
  border-radius: 14px;
  background: rgba(255,255,255,.9);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
}
.h-trio-card h4 { font-size: 1.03rem; font-weight: 800; margin-bottom: .2rem; }
.h-trio-card p { font-size: .83rem; margin: 0; opacity: .9; }
.h-trio-card.t1 { background: linear-gradient(120deg, #eef8e8, #fdf6e6); }
.h-trio-card.t1 h4 { color: #2f6b3f; }
.h-trio-card.t1 p { color: #5b7a63; }
.h-trio-card.t2 { background: linear-gradient(120deg, #eaf1fd, #f3f0fd); }
.h-trio-card.t2 h4 { color: #2a4f9e; }
.h-trio-card.t2 p { color: #5f6f96; }
.h-trio-card.t3 { background: linear-gradient(120deg, #fdeee6, #fdf3e6); }
.h-trio-card.t3 h4 { color: #a4542a; }
.h-trio-card.t3 p { color: #8d7260; }

/* ---------- طراح/اینفلوئنسر برگزیده هفته ---------- */
.h-week {
  background: #fff;
  border: 1px solid var(--h-border-2);
  border-radius: var(--h-radius);
  padding: 1.5rem;
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 1.5rem;
  align-items: start;
}
.h-week-profile { text-align: center; padding: .5rem 0; }
.h-week-profile .badge-week {
  display: inline-block;
  background: var(--h-orange-soft);
  color: var(--h-orange-dark);
  font-size: .75rem;
  font-weight: 800;
  border-radius: 100px;
  padding: .3rem .85rem;
  margin-bottom: .9rem;
}
.h-avatar-lg {
  width: 96px; height: 96px;
  border-radius: 50%;
  margin: 0 auto .8rem;
  background: linear-gradient(135deg, var(--h-green), var(--h-green-darker));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.3rem;
  font-weight: 900;
  box-shadow: 0 8px 22px rgba(142, 213, 87, .4);
}
.h-week-profile h4 { font-size: 1.1rem; font-weight: 800; margin-bottom: .15rem; }
.h-week-profile .handle { color: var(--muted-2); font-size: .82rem; margin-bottom: .8rem; }
.h-week-stats { display: flex; justify-content: center; gap: 1.4rem; margin-bottom: 1rem; }
.h-week-stats div b { display: block; font-size: 1.12rem; font-weight: 900; color: var(--h-ink); }
.h-week-stats div span { font-size: .73rem; color: var(--muted); }

/* ---------- وبلاگ ---------- */
.h-post {
  background: #fff;
  border: 1px solid var(--h-border-2);
  border-radius: var(--h-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.h-post:hover { transform: translateY(-4px); box-shadow: var(--h-shadow-hover); color: inherit; }
.h-post .thumb {
  aspect-ratio: 16 / 10;
  background: linear-gradient(140deg, #e9eef7, #dce6f3);
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem;
}
.h-post .body { padding: .95rem 1.05rem 1.1rem; flex: 1; display: flex; flex-direction: column; }
.h-post .cat {
  font-size: .74rem;
  font-weight: 800;
  color: var(--h-green-darker);
  background: var(--h-green-tint);
  border-radius: var(--h-radius-xs);
  padding: .2rem .55rem;
  align-self: flex-start;
  margin-bottom: .55rem;
}
.h-post h4 { font-size: .99rem; font-weight: 700; line-height: 1.8; margin-bottom: .45rem; }
.h-post p { font-size: .83rem; color: var(--muted); line-height: 1.85; margin-bottom: .8rem; flex: 1; }
.h-post .foot {
  display: flex; align-items: center; gap: .9rem;
  font-size: .76rem; color: var(--muted-2);
  border-top: 1px dashed var(--h-border);
  padding-top: .6rem;
}

/* ---------- نوار اعتماد ---------- */
.h-trust {
  background: var(--h-bg-soft);
  border-block: 1px solid var(--h-border-2);
  padding: 1.5rem 0;
}
.h-trust-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.h-trust-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  justify-content: center;
}
.h-trust-item .ic {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--h-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.h-trust-item b { display: block; font-size: .85rem; color: var(--h-ink); font-weight: 800; }
.h-trust-item span { font-size: .72rem; color: var(--muted); }

/* ---------- فوتر ---------- */
.h-footer { background: #fff; border-top: 1px solid var(--h-border-2); padding-top: 2.6rem; }
.h-footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 1.35fr;
  gap: 1.6rem;
  padding-bottom: 2rem;
}
.h-footer h5 {
  font-size: .98rem;
  font-weight: 800;
  color: var(--h-ink);
  margin-bottom: 1rem;
  position: relative;
  padding-bottom: .55rem;
}
.h-footer h5::after {
  content: '';
  position: absolute;
  right: 0; bottom: 0;
  width: 34px; height: 3px;
  border-radius: 3px;
  background: var(--h-green);
}
.h-footer ul { list-style: none; margin: 0; padding: 0; }
.h-footer ul li { margin-bottom: .55rem; }
.h-footer ul a { color: var(--muted); font-size: .88rem; }
.h-footer ul a:hover { color: var(--h-green-dark); padding-inline-start: 3px; }
.h-support {
  background: linear-gradient(135deg, #23304a, #33456a);
  border-radius: var(--h-radius);
  color: #fff;
  padding: 1.3rem;
  height: 100%;
}
.h-support h5 { color: #fff !important; }
.h-support h5::after { background: var(--h-orange); }
.h-support p { font-size: .87rem; opacity: .9; margin-bottom: 1rem; }
.h-support .ticket {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--h-green); color: #fff !important;
  border-radius: var(--h-radius-sm);
  padding: .6rem 1.2rem;
  font-weight: 800; font-size: .88rem;
}
.h-support .ticket:hover { background: var(--h-green-dark); color: #fff !important; }

.h-footer-stats {
  background: var(--h-bg-soft);
  border-radius: var(--h-radius);
  padding: 1.1rem 1.4rem;
  display: flex;
  gap: 2.4rem;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
}
.h-footer-stats div b { font-size: 1.18rem; font-weight: 900; color: var(--h-ink); }
.h-footer-stats div span { font-size: .8rem; color: var(--muted); margin-inline-start: .35rem; }

.h-footer-bottom {
  border-top: 1px solid var(--h-border-2);
  padding: 1.3rem 0;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.h-footer-bottom .about { font-size: .83rem; color: var(--muted); line-height: 1.9; flex: 1; min-width: 280px; }
.h-socials { display: flex; gap: .5rem; }
.h-socials a {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: var(--h-bg-soft-2);
  color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .95rem;
  transition: all .16s ease;
}
.h-socials a:hover { background: var(--h-green); color: #fff; transform: translateY(-3px); }
.h-copy {
  background: var(--h-bg-soft);
  border-top: 1px solid var(--h-border-2);
  padding: .95rem 0;
  font-size: .8rem;
  color: var(--muted);
  text-align: center;
}

/* ---------- صفحات داخلی ---------- */
.page-head {
  background: linear-gradient(120deg, var(--h-bg-soft), #fff);
  border-bottom: 1px solid var(--h-border-2);
  padding: 1.8rem 0;
  margin-bottom: 1.8rem;
}
.page-head h2 { font-size: 1.55rem; font-weight: 900; margin-bottom: .35rem; }
.page-head p { color: var(--muted); margin: 0; font-size: .95rem; }
.breadcrumb-h { display: flex; gap: .4rem; font-size: .82rem; color: var(--muted-2); margin-bottom: .6rem; }
.breadcrumb-h a { color: var(--muted); }
.breadcrumb-h a:hover { color: var(--h-green-dark); }

.h-panel {
  background: #fff;
  border: 1px solid var(--h-border-2);
  border-radius: var(--h-radius);
  padding: 1.4rem;
}
.h-panel + .h-panel { margin-top: 1.1rem; }
.h-panel h3, .h-panel h4 { font-size: 1.08rem; font-weight: 800; margin-bottom: 1rem; }

/* ---------- فرم‌ها ---------- */
.form-control, .form-select {
  border-color: var(--h-border);
  border-radius: var(--h-radius-sm);
  font-family: inherit;
  font-size: .93rem;
  padding: .62rem .85rem;
  color: var(--h-ink);
  background-color: #fff;
}
.form-control:focus, .form-select:focus {
  border-color: var(--h-green);
  box-shadow: 0 0 0 .2rem var(--h-green-soft);
}
.form-label { font-size: .87rem; font-weight: 700; color: var(--h-ink); margin-bottom: .35rem; }
.form-text { font-size: .78rem; color: var(--muted); }
.input-group .btn-h-green { border-radius: 0 var(--h-radius-sm) var(--h-radius-sm) 0; }

.auth-card {
  max-width: 520px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--h-border-2);
  border-radius: var(--h-radius);
  overflow: hidden;
  box-shadow: var(--h-shadow);
}
.auth-card .head {
  background: linear-gradient(120deg, var(--h-ink), #33456a);
  color: #fff;
  padding: 1.3rem 1.5rem;
}
.auth-card .head h3 { color: #fff !important; font-size: 1.18rem; font-weight: 800; margin: 0; }
.auth-card .head p { color: rgba(255,255,255,.8); font-size: .85rem; margin: .3rem 0 0; }
.auth-card .body { padding: 1.5rem; }
.auth-card .foot { background: var(--h-bg-soft); padding: .95rem 1.5rem; font-size: .85rem; color: var(--muted); text-align: center; }

/* ---------- جدول‌ها ---------- */
.table { color: var(--h-text); }
.table thead th {
  background: var(--h-bg-soft);
  color: var(--h-ink);
  font-size: .83rem;
  font-weight: 800;
  border-bottom: 2px solid var(--h-border);
  white-space: nowrap;
}
.table tbody td { font-size: .88rem; vertical-align: middle; padding: .7rem .6rem; }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(142, 213, 87, .045); }

/* ---------- بج ---------- */
.h-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .75rem;
  font-weight: 800;
  border-radius: 100px;
  padding: .28rem .75rem;
  background: var(--h-green-soft);
  color: var(--h-green-darker);
}
.h-badge.orange { background: var(--h-orange-soft); color: #9a6b00; }
.h-badge.gray { background: var(--h-bg-soft-2); color: var(--muted); }
.h-badge.dark { background: var(--h-ink); color: #fff; }
.h-badge.red { background: rgba(233, 68, 52, .13); color: #c33528; }
.h-badge.blue { background: rgba(61, 124, 224, .13); color: #2a5fb8; }

/* ---------- هشدارها ---------- */
.alert { border-radius: var(--h-radius-sm); font-size: .9rem; border: 1px solid transparent; }
.alert-success { background: var(--h-green-tint); border-color: rgba(142,213,87,.5); color: #3d7a2a; }
.alert-danger { background: #fdeeee; border-color: #f6c8c3; color: #b23a2c; }
.alert-info { background: #eef4fe; border-color: #cfe0fb; color: #2b5da8; }
.alert-warning { background: #fff8e8; border-color: #f7e2b0; color: #8a6410; }

/* ---------- صفحه‌بندی ---------- */
.pagination .page-link {
  border-color: var(--h-border);
  color: var(--muted);
  font-size: .88rem;
  font-weight: 600;
  border-radius: 8px !important;
  margin-inline-start: .3rem;
  padding: .45rem .85rem;
}
.pagination .page-item.active .page-link { background: var(--h-green); border-color: var(--h-green); color: #fff; }
.pagination .page-link:hover { background: var(--h-green-tint); color: var(--h-green-dark); border-color: var(--h-green); }

/* ---------- پنل کاربری ---------- */
.dash-shell { display: grid; grid-template-columns: 245px 1fr; gap: 1.3rem; align-items: start; }
.dash-side {
  background: #fff;
  border: 1px solid var(--h-border-2);
  border-radius: var(--h-radius);
  overflow: hidden;
  position: sticky;
  top: 84px;
}
.dash-side .who {
  background: linear-gradient(120deg, var(--h-ink), #33456a);
  color: #fff;
  padding: 1.2rem 1.1rem;
  text-align: center;
}
.dash-side .who .av {
  width: 58px; height: 58px;
  border-radius: 50%;
  margin: 0 auto .6rem;
  background: linear-gradient(135deg, var(--h-green), var(--h-green-darker));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; font-weight: 900;
}
.dash-side .who b { display: block; font-size: .97rem; font-weight: 800; }
.dash-side .who span { font-size: .76rem; color: rgba(255,255,255,.75); }
.dash-side nav { padding: .6rem; display: grid; gap: .15rem; }
.dash-side nav a {
  display: flex; align-items: center; gap: .6rem;
  padding: .62rem .8rem;
  border-radius: var(--h-radius-sm);
  font-size: .88rem; font-weight: 600;
  color: var(--muted);
  transition: all .15s ease;
}
.dash-side nav a:hover { background: var(--h-bg-soft); color: var(--h-ink); }
.dash-side nav a.active { background: var(--h-green-soft); color: var(--h-green-darker); font-weight: 800; }
.dash-side nav a .ic { font-size: 1rem; }
.dash-side nav .sep { margin: .5rem .8rem .35rem; font-size: .72rem; color: var(--muted-2); font-weight: 800; }

.dash-stat {
  background: #fff;
  border: 1px solid var(--h-border-2);
  border-radius: var(--h-radius);
  padding: 1.3rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all .2s ease;
}
.dash-stat:hover { box-shadow: var(--h-shadow); transform: translateY(-3px); border-color: var(--h-green); }
.dash-stat .ic {
  width: 52px; height: 52px; flex-shrink: 0;
  border-radius: 14px;
  background: var(--h-green-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
}
.dash-stat:nth-child(2n) .ic { background: var(--h-orange-soft); }
.dash-stat:nth-child(3n) .ic { background: rgba(61, 124, 224, .13); }
.dash-stat b { display: block; font-size: 1.5rem; font-weight: 900; color: var(--h-ink); line-height: 1.25; }
.dash-stat span { font-size: .83rem; color: var(--muted); }

/* ---------- کارت فروشنده ---------- */
.h-seller-card {
  background: #fff;
  border: 1px solid var(--h-border-2);
  border-radius: var(--h-radius);
  padding: 1.5rem 1.2rem;
  text-align: center;
  transition: all .2s ease;
  display: block;
}
.h-seller-card:hover { transform: translateY(-4px); box-shadow: var(--h-shadow-hover); border-color: var(--h-green); color: inherit; }
.h-seller-card .av {
  width: 74px; height: 74px;
  border-radius: 50%;
  margin: 0 auto .8rem;
  background: linear-gradient(135deg, var(--h-green), var(--h-green-darker));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; font-weight: 900;
}
.h-seller-card h4 { font-size: 1.03rem; font-weight: 800; margin-bottom: .2rem; }
.h-seller-card .role { font-size: .78rem; color: var(--muted-2); margin-bottom: .6rem; }
.h-seller-card .bio {
  font-size: .83rem; color: var(--muted);
  line-height: 1.85; margin-bottom: .8rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.h-seller-card .meta { display: flex; justify-content: center; gap: 1rem; font-size: .78rem; color: var(--muted); }
.h-seller-card .meta b { color: var(--h-green-darker); font-weight: 800; }

/* ---------- چیدمان صفحه جزئیات ---------- */
.detail-gallery {
  border-radius: var(--h-radius);
  overflow: hidden;
  background: linear-gradient(140deg, #eef1f6, #dce3ee);
  aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
  font-size: 5rem;
}
.order-box {
  background: #fff;
  border: 1px solid var(--h-border);
  border-radius: var(--h-radius);
  padding: 1.4rem;
  box-shadow: var(--h-shadow);
  position: sticky;
  top: 84px;
}
.order-box .price-lg { font-size: 1.6rem; font-weight: 900; color: var(--h-ink); }
.order-box .pkg { display: flex; justify-content: space-between; font-size: .87rem; padding: .5rem 0; border-bottom: 1px dashed var(--h-border); }
.order-box .pkg span:last-child { font-weight: 800; color: var(--h-ink); }

.review-item {
  border: 1px solid var(--h-border-2);
  border-radius: var(--h-radius-sm);
  padding: .95rem 1.05rem;
  background: var(--h-bg-soft);
}
.review-item + .review-item { margin-top: .7rem; }

/* ---------- ریسپانسیو ---------- */
@media (max-width: 1200px) {
  .h-grid-5 { grid-template-columns: repeat(4, 1fr); }
  .h-banner-row { grid-template-columns: repeat(3, 1fr); }
  .h-footer-cols { grid-template-columns: repeat(3, 1fr); }
  .h-trust-grid { grid-template-columns: repeat(3, 1fr); }
  .h-mega-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 991.98px) {
  .dash-shell { grid-template-columns: 1fr; }
  .dash-side { position: static; }
  .h-grid-5, .h-grid-4 { grid-template-columns: repeat(3, 1fr); }
  .h-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .h-topbar .container { flex-wrap: wrap; }
  .h-search { order: 3; flex-basis: 100%; }
  .h-actions { margin-inline-start: auto; }
  .h-nav-toggle { display: inline-flex; align-items: center; }
  .h-menu { display: none; width: 100%; flex-direction: column; align-items: stretch; padding: .5rem 0; }
  .h-menu.show { display: flex; }
  .h-menu > li > a, .h-menu > li > button { width: 100%; justify-content: space-between; }
  .h-nav .container { flex-wrap: wrap; padding: .45rem 0; }
  .h-nav-end { width: 100%; justify-content: flex-start; padding-bottom: .4rem; }
  .h-mega { position: static; box-shadow: none; border-top: 0; padding: .5rem 0 1rem; }
  .h-mega-grid { grid-template-columns: repeat(2, 1fr); }
  .h-week { grid-template-columns: 1fr; }
  .h-trio { grid-template-columns: 1fr; }
  .h-footer-cols { grid-template-columns: repeat(2, 1fr); }
  .h-cta-band .acts { margin-inline-start: 0; }
}
@media (max-width: 767.98px) {
  .h-grid-5, .h-grid-4, .h-grid-3, .h-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .h-banner-row { grid-template-columns: repeat(2, 1fr); }
  .h-trust-grid { grid-template-columns: repeat(2, 1fr); }
  .h-hero { padding: 2.2rem 0 1.8rem; }
  .h-hero-search { flex-direction: column; }
  .h-hero-search .btn-h-green { width: 100%; }
  .h-festival .container { justify-content: center; text-align: center; }
  .h-festival .container > .btn-h-orange { margin-inline-start: 0; }
  .h-hero-stats { gap: 1.4rem; }
}
@media (max-width: 575.98px) {
  .h-grid-5, .h-grid-4, .h-grid-3, .h-grid-2 { grid-template-columns: 1fr; }
  .h-banner-row { grid-template-columns: 1fr; }
  .h-trust-grid { grid-template-columns: 1fr; }
  .h-footer-cols { grid-template-columns: 1fr; }
  .h-actions .h-action span.lbl { display: none; }
  .h-sec-head { flex-wrap: wrap; }
  .h-sec-head .tabs { margin-inline-start: 0; width: 100%; }
  .h-footer-stats { gap: 1.2rem; }
}