/* ════════════════════════════════════════════════════════════
   MULTI-PURPOSE SHOP TEMPLATE  |  Designed by Ammar Shaikh
   ════════════════════════════════════════════════════════════

   ✏️ HOW TO CHANGE COLORS:
      Edit the values inside  :root { }  below.
      --color-primary   = main brand color (buttons, headings, icons)
      --color-secondary = accent color (hover, badges, highlights)
      --color-accent    = third color used for offers, badges
      Change ONLY these three and the whole site updates automatically.

   ✏️ HOW TO CHANGE FONT:
      Replace the Google Fonts link in index.html with any font you like.
      Then change --font-main and --font-heading below.
════════════════════════════════════════════════════════════ */

/* ── CSS Variables (Light Theme) ──────────────────────────── */
:root {
  /* 🎨 PRIMARY COLORS – Change these to rebrand the entire site */
  --color-primary:   #4361ee;   /* Main brand color  ✏️ */
  --color-secondary: #3a0ca3;   /* Darker shade       ✏️ */
  --color-accent:    #f72585;   /* Highlight / badge  ✏️ */

  /* 🎨 BACKGROUND & TEXT */
  --bg-body:         #f8f9ff;
  --bg-section:      #ffffff;
  --bg-section-alt:  #f1f4ff;
  --bg-navbar:       #ffffff;
  --bg-footer:       #f5f6fa;
  --text-main:       #1a1a2e;
  --text-muted:      #6c757d;
  --text-light:      #ffffff;
  --border-color:    #e0e4f0;
  --card-bg:         #ffffff;
  --card-shadow:     rgba(67, 97, 238, 0.10);

  /* 🔤 FONTS – Change font name here ✏️ */
  --font-main:    'Poppins', sans-serif;
  --font-heading: 'Playfair Display', serif;

  /* 📐 SIZES */
  --radius:      14px;
  --radius-sm:   8px;
  --transition:  all 0.3s ease;
  --navbar-h:    68px;

  /* 🌈 FIXED COLORS */
  --whatsapp:    #25d366;
  --call-green:  #2ec4b6;
}

/* ── Dark Theme Variables ─────────────────────────────────── */
[data-theme="dark"] {
  --bg-body:        #0d0f1a;
  --bg-section:     #111326;
  --bg-section-alt: #161829;
  --bg-navbar:      #0d0f1a;
  --bg-footer:      #090b14;
  --text-main:      #e8eaf6;
  --text-muted:     #9da3c4;
  --border-color:   #2a2d4a;
  --card-bg:        #1a1d35;
  --card-shadow:    rgba(0,0,0,0.4);
}

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family:      var(--font-main);
  background-color: var(--bg-body);
  color:            var(--text-main);
  line-height:      1.7;
  transition:       background-color 0.4s, color 0.4s;
  overflow-x:       hidden;
}

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

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar        { width: 7px; }
::-webkit-scrollbar-track  { background: var(--bg-body); }
::-webkit-scrollbar-thumb  { background: var(--color-primary); border-radius: 10px; }

/* ════════════════════════════════════════════════════════════
   OFFER BANNER
════════════════════════════════════════════════════════════ */
.offer-banner {
  background:      linear-gradient(90deg, var(--color-secondary), var(--color-accent));
  color:           #fff;
  text-align:      center;
  padding:         10px 50px 10px 16px;
  font-size:       0.88rem;
  font-weight:     500;
  position:        relative;
  letter-spacing:  0.3px;
  z-index:         1100;
}
.close-banner {
  position:   absolute;
  right:      14px;
  top:        50%;
  transform:  translateY(-50%);
  background: rgba(255,255,255,0.25);
  border:     none;
  color:      #fff;
  width:      26px;
  height:     26px;
  border-radius: 50%;
  cursor:     pointer;
  font-size:  0.8rem;
  display:    flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.close-banner:hover { background: rgba(255,255,255,0.5); }

/* ════════════════════════════════════════════════════════════
   NAVBAR
════════════════════════════════════════════════════════════ */
.navbar {
  position:        sticky;
  top:             0;
  z-index:         1000;
  background:      var(--bg-navbar);
  display:         flex;
  align-items:     center;
  gap:             20px;
  padding:         0 24px;
  height:          var(--navbar-h);
  box-shadow:      0 2px 16px rgba(0,0,0,0.07);
  border-bottom:   1px solid var(--border-color);
}
.nav-brand {
  font-size:   1.35rem;
  font-weight: 700;
  color:       var(--color-primary);
  display:     flex;
  align-items: center;
  gap:         8px;
  white-space: nowrap;
  margin-right: auto;
}.nav-links {
  display:flex;
  align-items:center;
  gap:16px;
}
.nav-link {
  padding:       8px 14px;
  border-radius: var(--radius-sm);
  font-size:     0.9rem;
  font-weight:   500;
  color:         var(--text-main);
  transition:    var(--transition);
  white-space:   nowrap;
}
.nav-link:hover,
.nav-link.active {
  background: var(--color-primary);
  color:      #fff;
}
.nav-toggle {
  display:        none;
  flex-direction: column;
  gap:            5px;
  background:     none;
  border:         none;
  cursor:         pointer;
  padding:        6px;
}
.nav-toggle span {
  display:          block;
  width:            24px;
  height:           2px;
  background:       var(--text-main);
  border-radius:    2px;
  transition:       var(--transition);
}
.theme-toggle {
  background:    none;
  border:        2px solid var(--border-color);
  color:         var(--text-main);
  width:         40px;
  height:        40px;
  border-radius: 50%;
  cursor:        pointer;
  font-size:     1rem;
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    var(--transition);
  flex-shrink:   0;
}
.theme-toggle:hover {
  background: var(--color-primary);
  color:      #fff;
  border-color: var(--color-primary);
}

/* ════════════════════════════════════════════════════════════
   BUTTONS
════════════════════════════════════════════════════════════ */
.btn {
  display:        inline-flex;
  align-items:    center;
  gap:            8px;
  padding:        12px 26px;
  border-radius:  50px;
  font-size:      0.95rem;
  font-weight:    600;
  border:         2px solid transparent;
  cursor:         pointer;
  transition:     var(--transition);
  text-align:     center;
  white-space:    nowrap;
}
.btn-primary {
  background: var(--color-primary);
  color:      #fff;
}
.btn-primary:hover {
  background:  var(--color-secondary);
  transform:   translateY(-2px);
  box-shadow:  0 6px 20px rgba(67,97,238,0.4);
}
.btn-call {
  background: var(--call-green);
  color:      #fff;
}
.btn-call:hover {
  background:  #27a99a;
  transform:   translateY(-2px);
  box-shadow:  0 6px 20px rgba(46,196,182,0.4);
}
.btn-whatsapp {
  background: var(--whatsapp);
  color:      #fff;
}
.btn-whatsapp:hover {
  background:  #1aab52;
  transform:   translateY(-2px);
  box-shadow:  0 6px 20px rgba(37,211,102,0.4);
}
.btn-outline {
  border-color: var(--color-primary);
  color:        var(--color-primary);
  background:   transparent;
}
.btn-outline:hover {
  background: var(--color-primary);
  color:      #fff;
  transform:  translateY(-2px);
}
.btn-offer {
  background:    rgba(255,255,255,0.2);
  color:         #fff;
  border-color:  rgba(255,255,255,0.5);
  margin-top:    14px;
  padding:       9px 22px;
  font-size:     0.88rem;
}
.btn-offer:hover {
  background: rgba(255,255,255,0.4);
  transform:  translateY(-2px);
}
.btn-sale-cta {
  background:   #fff;
  color:        var(--color-accent);
  padding:      8px 20px;
  font-size:    0.88rem;
  border-radius: 50px;
  font-weight:  700;
  margin-left:  16px;
  border:       none;
  cursor:       pointer;
  transition:   var(--transition);
}
.btn-sale-cta:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.15); }

/* ════════════════════════════════════════════════════════════
   SECTION BASE STYLES
════════════════════════════════════════════════════════════ */
.section     { padding: 80px 0; background: var(--bg-section); }
.section-alt { background: var(--bg-section-alt); }

.container {
  max-width: 1200px;
  margin:    0 auto;
  padding:   0 20px;
}
.section-header {
  text-align:    center;
  margin-bottom: 50px;
}
.section-header h2 {
  font-family:    var(--font-heading);
  font-size:      clamp(1.8rem, 4vw, 2.6rem);
  color:          var(--text-main);
  margin-bottom:  10px;
  position:       relative;
  display:        inline-block;
}
.section-header h2::after {
  content:    '';
  display:    block;
  width:      60px;
  height:     4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  border-radius: 2px;
  margin:     10px auto 0;
}
.section-header p  { color: var(--text-muted); font-size: 1.05rem; }
.light-header h2,
.light-header p    { color: #fff; }
.light-header h2::after { background: rgba(255,255,255,0.6); }
.section-cta { text-align: center; margin-top: 40px; }

/* ════════════════════════════════════════════════════════════
   HERO / SLIDER
════════════════════════════════════════════════════════════ */
.hero-section {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--bg-body) 100%);
  padding-bottom: 60px;
}

/* Hero Header */
.hero-header {
  text-align:  center;
  padding:     60px 20px 30px;
  position:    relative;
}
.hero-label {
  font-size:    1rem;
  font-weight:  500;
  color:        rgba(255,255,255,0.75);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.shop-name {
  font-family:    var(--font-heading);
  font-size:      clamp(2.4rem, 7vw, 5rem);
  font-weight:    800;
  color:          #ffffff;
  line-height:    1.15;
  text-shadow:    0 4px 20px rgba(0,0,0,0.3);
  margin-bottom:  14px;
  /* ✏️ To change the shop name color: edit the color value above */
}
.shop-tagline {
  font-size:  1.1rem;
  color:      rgba(255,255,255,0.8);
  font-weight: 400;
}

/* Slider */
.slider-wrapper {
  position:   relative;
  max-width:  1100px;
  margin:     0 auto;
  overflow:   hidden;
  border-radius: var(--radius);
  box-shadow:  0 20px 60px rgba(0,0,0,0.3);
}
.slide video{
  width:100%;
  height:clamp(260px,45vw,520px);
  object-fit:cover;
}
.slider-track { position: relative; width: 100%; }

.slide {
  display:  none;
  position: relative;
  width:    100%;
}
.slide.active { display: block; }

.slide img {
  width:          100%;
  height:         clamp(260px, 45vw, 520px);
  object-fit:     cover;
  object-position: center;
}
.slide-overlay {
  position:   absolute;
  bottom:     0;
  left:       0;
  right:      0;
  padding:    30px 30px 22px;
  background: linear-gradient(transparent, rgba(0,0,0,0.65));
}
.slide-caption {
  color:       #fff;
  font-size:   clamp(1rem, 3vw, 1.6rem);
  font-weight: 600;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* Slider Buttons */
.slider-btn {
  position:      absolute;
  top:           50%;
  transform:     translateY(-50%);
  background:    rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  border:        2px solid rgba(255,255,255,0.35);
  color:         #fff;
  width:         48px;
  height:        48px;
  border-radius: 50%;
  font-size:     1.1rem;
  cursor:        pointer;
  z-index:       10;
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    var(--transition);
}
.slider-btn:hover   { background: var(--color-primary); border-color: var(--color-primary); }
.prev-btn           { left: 14px; }
.next-btn           { right: 14px; }

/* Slider Dots */
.slider-dots {
  position:        absolute;
  bottom:          14px;
  left:            50%;
  transform:       translateX(-50%);
  display:         flex;
  gap:             8px;
  z-index:         10;
}
.dot {
  width:         10px;
  height:        10px;
  border-radius: 50%;
  background:    rgba(255,255,255,0.5);
  cursor:        pointer;
  border:        2px solid rgba(255,255,255,0.7);
  transition:    var(--transition);
}
.dot.active { background: #fff; transform: scale(1.3); }

/* Hero CTA */
.hero-cta {
  display:         flex;
  justify-content: center;
  gap:             14px;
  flex-wrap:       wrap;
  margin-top:      36px;
  padding:         0 20px;
}

/* ════════════════════════════════════════════════════════════
   SHOP DETAILS
════════════════════════════════════════════════════════════ */
.details-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap:                   28px;
}
.detail-card {
  background:    var(--card-bg);
  border-radius: var(--radius);
  padding:       34px 28px;
  box-shadow:    0 4px 24px var(--card-shadow);
  border:        1px solid var(--border-color);
  transition:    var(--transition);
}
.detail-card:hover {
  transform:  translateY(-5px);
  box-shadow: 0 12px 40px var(--card-shadow);
}
.card-top-icon {
  width:           56px;
  height:          56px;
  border-radius:   14px;
  background:      linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.4rem;
  color:           #fff;
  margin-bottom:   18px;
}
.detail-card h3 {
  font-size:     1.3rem;
  font-weight:   700;
  margin-bottom: 18px;
  color:         var(--text-main);
}

/* Owner Row */
.owner-row {
  display:     flex;
  align-items: center;
  gap:         14px;
  margin-bottom: 18px;
  padding:     14px;
  background:  var(--bg-section-alt);
  border-radius: var(--radius-sm);
}
.profile-pic {
  width:         70px;
  height:        70px;
  border-radius: 50%;
  object-fit:    cover;
  border:        3px solid var(--color-primary);
  flex-shrink:   0;
}
.owner-info       { display: flex; flex-direction: column; }
.owner-info strong { font-size: 1.05rem; font-weight: 700; }
.owner-info span   { font-size: 0.85rem; color: var(--text-muted); }

/* Info List */
.info-list       { display: flex; flex-direction: column; gap: 10px; }
.info-list li {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-size:   0.93rem;
}
.info-list li i { color: var(--color-primary); width: 18px; flex-shrink: 0; }

/* About Text */
.about-text { color: var(--text-muted); margin-bottom: 18px; font-size: 0.95rem; line-height: 1.8; }

/* Stats */
.stats-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   16px;
  margin-top:            10px;
}
.stat-box {
  text-align:    center;
  background:    var(--bg-section-alt);
  border-radius: var(--radius-sm);
  padding:       20px 10px;
}
.stat-number {
  font-size:   2rem;
  font-weight: 800;
  color:       var(--color-primary);
  line-height: 1;
}
.stat-box p { font-size: 0.8rem; color: var(--text-muted); margin-top: 6px; font-weight: 500; }

/* ════════════════════════════════════════════════════════════
   PRODUCTS
════════════════════════════════════════════════════════════ */
.products-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:                   24px;
}
.product-card {
  background:    var(--card-bg);
  border:        1px solid var(--border-color);
  border-radius: var(--radius);
  padding:       30px 24px;
  text-align:    center;
  transition:    var(--transition);
  position:      relative;
  overflow:      hidden;
}
.product-card::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       0;
  right:      0;
  height:     4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transform:  scaleX(0);
  transition: var(--transition);
}
.product-card:hover           { transform: translateY(-6px); box-shadow: 0 14px 40px var(--card-shadow); }
.product-card:hover::before   { transform: scaleX(1); }
.product-icon {
  font-size:   2.4rem;
  color:       var(--color-primary);
  margin-bottom: 16px;
}
.product-card h4  { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; }
.product-card p   { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 16px; }
.price-tag {
  display:       inline-block;
  background:    linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color:         #fff;
  padding:       5px 18px;
  border-radius: 50px;
  font-size:     0.85rem;
  font-weight:   600;
}

/* ════════════════════════════════════════════════════════════
   OFFERS
════════════════════════════════════════════════════════════ */
.offers-section {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
}
.offers-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap:                   24px;
}
.offer-card {
  background: var(--card-bg);            /* Solid background */
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 32px 24px;
  text-align: center;
  color: var(--text-main);               /* Dark text */
  position: relative;
  transition: var(--transition);
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}
.offer-card h4 {
  color: var(--text-main);
}

.offer-card p {
  color: var(--text-muted);
}

.offer-icon {
  color: var(--color-primary);
}
.offer-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 40px rgba(0,0,0,0.12);
}
.offer-card:hover { transform: translateY(-6px); background: rgba(255,255,255,0.2); }
.offer-badge {
  position:      absolute;
  top:           -12px;
  right:         20px;
  background:    var(--color-accent);
  color:         #fff;
  padding:       5px 16px;
  border-radius: 50px;
  font-size:     0.8rem;
  font-weight:   700;
  letter-spacing: 0.5px;
}
.offer-icon { font-size: 2.5rem; margin-bottom: 14px; opacity: 0.9; }
.offer-card h4 { font-size: 1.2rem; font-weight: 700; margin-bottom: 10px; }
.offer-card p  { font-size: 0.9rem; opacity: 0.88; line-height: 1.7; }
.offer-validity {
  margin-top:  12px;
  font-size:   0.8rem;
  opacity:     0.75;
  font-style:  italic;
}

/* ════════════════════════════════════════════════════════════
   GALLERY
════════════════════════════════════════════════════════════ */
.gallery-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:                   16px;
}
.gallery-item {
  position:      relative;
  border-radius: var(--radius);
  overflow:      hidden;
  cursor:        pointer;
}
.gallery-item img {
  width:      100%;
  height:     240px;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.product-card{
border-top:4px solid var(--color-primary);
}
.gallery-item:hover img { transform: scale(1.07); }
.gallery-hover {
  position:        absolute;
  inset:           0;
  background:      rgba(67,97,238,0.5);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       2rem;
  color:           #fff;
  opacity:         0;
  transition:      var(--transition);
}
.gallery-item:hover .gallery-hover { opacity: 1; }

/* ════════════════════════════════════════════════════════════
   TESTIMONIALS
════════════════════════════════════════════════════════════ */
.testimonials-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap:                   24px;
}
.review-card {
  background:    var(--card-bg);
  border:        1px solid var(--border-color);
  border-radius: var(--radius);
  padding:       30px 26px;
  transition:    var(--transition);
  position:      relative;
}
.review-card:hover { transform: translateY(-5px); box-shadow: 0 12px 36px var(--card-shadow); }
.review-card::before {
  content:    '"';
  position:   absolute;
  top:        14px;
  right:      22px;
  font-size:  5rem;
  color:      var(--color-primary);
  opacity:    0.12;
  font-family: serif;
  line-height: 1;
}
.review-stars         { color: #fbbf24; font-size: 0.95rem; margin-bottom: 14px; letter-spacing: 2px; }
.review-text          { font-size: 0.93rem; color: var(--text-muted); line-height: 1.8; margin-bottom: 20px; font-style: italic; }
.reviewer             { display: flex; align-items: center; gap: 12px; }
.reviewer img         { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid var(--color-primary); }
.reviewer strong      { display: block; font-weight: 700; font-size: 0.95rem; }
.reviewer span        { font-size: 0.8rem; color: var(--text-muted); }

/* ════════════════════════════════════════════════════════════
   FAQ
════════════════════════════════════════════════════════════ */
.faq-list {
  max-width:      750px;
  margin:         0 auto;
  display:        flex;
  flex-direction: column;
  gap:            12px;
}
.faq-item {
  background:    var(--card-bg);
  border:        1px solid var(--border-color);
  border-radius: var(--radius-sm);
  overflow:      hidden;
  transition:    var(--transition);
}
.faq-item:hover { box-shadow: 0 4px 20px var(--card-shadow); }
.faq-question {
  width:           100%;
  background:      none;
  border:          none;
  padding:         18px 22px;
  text-align:      left;
  font-size:       0.97rem;
  font-weight:     600;
  color:           var(--text-main);
  cursor:          pointer;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             14px;
  font-family:     var(--font-main);
}
.faq-icon { color: var(--color-primary); transition: transform 0.3s; flex-shrink: 0; }
.faq-item.open .faq-icon  { transform: rotate(180deg); }
.faq-item.open .faq-question { color: var(--color-primary); }
.faq-answer {
  max-height: 0;
  overflow:   hidden;
  transition: max-height 0.4s ease, padding 0.3s;
}
.faq-answer p {
  padding:    0 22px 18px;
  color:      var(--text-muted);
  font-size:  0.93rem;
  line-height: 1.8;
}
.faq-item.open .faq-answer { max-height: 300px; }

/* ════════════════════════════════════════════════════════════
   CONTACT
════════════════════════════════════════════════════════════ */
.contact-grid {
  display:               grid;
  grid-template-columns: 1fr 1.4fr;
  gap:                   40px;
  align-items:           start;
}
.contact-info      { display: flex; flex-direction: column; gap: 22px; }
.contact-item {
  display:     flex;
  align-items: flex-start;
  gap:         16px;
}
.contact-icon {
  width:           48px;
  height:          48px;
  border-radius:   12px;
  background:      linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           #fff;
  font-size:       1.1rem;
  flex-shrink:     0;
}
.contact-icon.whatsapp-icon { background: linear-gradient(135deg, #25d366, #128c7e); }
.contact-item h4    { font-size: 0.9rem; font-weight: 700; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); }
.contact-item a     { color: var(--color-primary); font-weight: 600; font-size: 1rem; }
.contact-item a:hover { text-decoration: underline; }
.contact-item p     { font-size: 0.93rem; color: var(--text-main); }
.contact-buttons    { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }

.map-container {
  border-radius: var(--radius);
  overflow:      hidden;
  box-shadow:    0 8px 32px var(--card-shadow);
  border:        1px solid var(--border-color);
}
.map-container iframe { display: block; }

/* ════════════════════════════════════════════════════════════
   SOCIAL + SALE STRIP
════════════════════════════════════════════════════════════ */
.social-sale-section {
  background: var(--bg-section);
  padding:    50px 0;
  border-top: 1px solid var(--border-color);
}
.sale-strip {
  background:    linear-gradient(90deg, var(--color-accent), var(--color-secondary));
  color:         #fff;
  border-radius: var(--radius);
  padding:       18px 30px;
  text-align:    center;
  font-size:     1rem;
  margin-bottom: 36px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  flex-wrap:     wrap;
  gap:           10px;
}
.social-links       { text-align: center; }
.social-links p     { font-weight: 600; font-size: 1rem; margin-bottom: 18px; color: var(--text-muted); }
.social-icons       { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.social-icon {
  width:         50px;
  height:        50px;
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     1.1rem;
  color:         #fff;
  transition:    var(--transition);
}
.social-icon:hover       { transform: translateY(-4px) scale(1.1); }
.facebook                { background: #1877f2; }
.instagram               { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.youtube                 { background: #ff0000; }
.twitter                 { background: #000; }
.whatsapp-s              { background: #25d366; }

/* ════════════════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════════════════ */
.footer {
  background: var(--bg-footer);
  border-top: 1px solid var(--border-color);
  padding:    60px 0 0;
}
.footer-grid {
  display:               grid;
  grid-template-columns: 2fr 1fr 1.5fr;
  gap:                   40px;
  margin-bottom:         40px;
}
.footer-col h4 {
  font-size:     1rem;
  font-weight:   700;
  margin-bottom: 16px;
  color:         var(--text-main);
  display:       flex;
  align-items:   center;
  gap:           8px;
}
.footer-col h4 i { color: var(--color-primary); }
.footer-col p,
.footer-col li   { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 8px; }
.footer-col li a { color: var(--text-muted); transition: var(--transition); }
.footer-col li a:hover { color: var(--color-primary); padding-left: 4px; }
.footer-col p i  { color: var(--color-primary); margin-right: 6px; }

.footer-bottom {
  border-top:      1px solid var(--border-color);
  padding:         20px 0;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  flex-wrap:       wrap;
  gap:             10px;
}
.footer-bottom p  { font-size: 0.87rem; color: var(--text-muted); }
.designed-by      { font-size: 0.87rem !important; }
.designed-by strong { color: var(--color-primary); }

/* ════════════════════════════════════════════════════════════
   BACK TO TOP
════════════════════════════════════════════════════════════ */
.back-to-top {
  position:        fixed;
  bottom:          28px;
  right:           28px;
  width:           48px;
  height:          48px;
  border-radius:   50%;
  background:      var(--color-primary);
  color:           #fff;
  border:          none;
  font-size:       1.1rem;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  box-shadow:      0 6px 20px rgba(67,97,238,0.4);
  opacity:         0;
  transform:       translateY(20px);
  transition:      var(--transition);
  z-index:         999;
}
.back-to-top.visible { opacity: 1; transform: translateY(0); }
.back-to-top:hover   { background: var(--color-secondary); transform: translateY(-3px); }

/* ════════════════════════════════════════════════════════════
   ANIMATIONS
════════════════════════════════════════════════════════════ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-header,
.hero-cta      { animation: fadeInUp 0.8s ease both; }
.hero-cta      { animation-delay: 0.2s; }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE – TABLET  (max 900px)
════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .contact-grid       { grid-template-columns: 1fr; }
  .footer-grid        { grid-template-columns: 1fr 1fr; }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE – MOBILE  (max 768px)
════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Navbar */
  .nav-toggle { display: flex; }
  .nav-links {
    position:      absolute;
    top:           var(--navbar-h);
    left:          0;
    right:         0;
    background:    var(--bg-navbar);
    flex-direction: column;
    padding:       16px;
    gap:           4px;
    border-bottom: 1px solid var(--border-color);
    box-shadow:    0 8px 20px rgba(0,0,0,0.1);
    transform:     translateY(-10px);
    opacity:       0;
    pointer-events: none;
    transition:    var(--transition);
    z-index:       999;
  }
  .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: all; }
  .nav-link       { padding: 12px 16px; border-radius: var(--radius-sm); width: 100%; }

  /* Hero */
  .hero-header { padding: 40px 16px 20px; }
  .hero-cta    { flex-direction: column; align-items: center; gap: 12px; }
  .hero-cta .btn { width: 90%; max-width: 320px; justify-content: center; }

  /* Slider Buttons */
  .slider-btn { width: 38px; height: 38px; font-size: 0.9rem; }

  /* Sections */
  .section             { padding: 60px 0; }
  .details-grid,
  .products-grid,
  .offers-grid,
  .gallery-grid,
  .testimonials-grid   { grid-template-columns: 1fr; }

  /* Contact */
  .contact-buttons { flex-direction: column; }
  .contact-buttons .btn { justify-content: center; }

  /* Footer */
  .footer-grid   { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; text-align: center; }

  /* Stats */
  .stats-grid { grid-template-columns: 1fr 1fr; }

  /* Sale Strip */
  .sale-strip { flex-direction: column; text-align: center; }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE – SMALL MOBILE  (max 480px)
════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .shop-name      { font-size: 2.2rem; }
  .slider-btn     { display: none; }
  .offer-banner   { font-size: 0.8rem; padding: 10px 44px 10px 12px; }
  .back-to-top    { bottom: 18px; right: 18px; width: 42px; height: 42px; }
}
/* ===== Contact Form Styling ===== */

.contact-form {
  background: var(--card-bg);
  padding: 30px;
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
  border: 1px solid var(--border-color);
}

.contact-form h3 {
  margin-bottom: 20px;
  font-size: 1.4rem;
  color: var(--text-main);
}

.contact-form form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Full width message box */
.contact-form textarea {
  grid-column: span 2;
}

/* Full width button */
.contact-form button {
  grid-column: span 2;
  justify-self: start;
}

/* Input fields */
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  font-size: 0.95rem;
  font-family: var(--font-main);
  background: var(--bg-section);
  color: var(--text-main);
  transition: var(--transition);
}

/* Focus effect */
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(67,97,238,0.15);
}

/* Button improvement */
.contact-form .btn {
  padding: 12px 28px;
  font-size: 1rem;
}

/* Mobile responsive */
@media (max-width: 600px) {
  .contact-form form {
    grid-template-columns: 1fr;
  }

  .contact-form textarea,
  .contact-form button {
    grid-column: span 1;
  }
}
/* Thank You Popup */
.thank-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.thank-box {
  background: #fff;
  padding: 30px 40px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
  max-width: 320px;
}

.thank-box i {
  font-size: 50px;
  color: #25d366;
  margin-bottom: 10px;
}

.thank-box h3 {
  margin-bottom: 8px;
}

.thank-box button {
  margin-top: 15px;
  padding: 8px 20px;
  border: none;
  background: var(--color-primary);
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
}