/* ==========================================================================
   GiftNetApp Customer Components Master Stylesheet
   Consolidated CSS for customer components
   ========================================================================== */

/* ==========================================================================
   HeaderOne Component Styles
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@700&display=swap');

        /* ── Global header font ── */
        .gh-header * { font-family: 'Inter', sans-serif; box-sizing: border-box; }

        /* ─────────────────────────────────────────────
           TOP BAR  — deep forest green + gold shimmer
        ───────────────────────────────────────────── */
        .gh-top-bar {
          background: linear-gradient(90deg, #0B3D2E 0%, #0F5132 50%, #0B3D2E 100%);
          padding: 8px 0;
          border-bottom: 1px solid rgba(201,168,76,0.25);
          position: relative;
          overflow: hidden;
        }
        .gh-top-bar::before {
          content: '';
          position: absolute;
          top: 0; left: -100%;
          width: 60%; height: 100%;
          background: linear-gradient(90deg, transparent, rgba(201,168,76,0.07), transparent);
          animation: ghShimmer 4s ease-in-out infinite;
        }
        @keyframes ghShimmer { 0%{left:-100%} 100%{left:200%} }

        .gh-top-badge {
          display: inline-flex; align-items: center; gap: 6px;
          background: rgba(201,168,76,0.12);
          border: 1px solid rgba(201,168,76,0.30);
          border-radius: 999px;
          padding: 3px 12px;
          font-size: 12px; font-weight: 500; color: #F0C060;
          transition: background 0.2s;
        }
        .gh-top-badge:hover { background: rgba(201,168,76,0.22); text-decoration: none; }
        .gh-top-link {
          color: rgba(255,255,255,0.82); font-size: 12.5px; font-weight: 500;
          transition: color 0.2s; text-decoration: none; display: flex; align-items: center; gap: 5px;
        }
        .gh-top-link:hover { color: #F0C060; text-decoration: none; }
        .gh-top-divider { width: 1px; height: 14px; background: rgba(255,255,255,0.18); margin: 0 10px; }

        /* user dropdown */
        .gh-user-chip {
          display: flex; align-items: center; gap: 6px; cursor: pointer;
          background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
          border-radius: 999px; padding: 4px 12px 4px 8px;
          font-size: 12.5px; color: #fff; transition: all 0.2s;
        }
        .gh-user-chip:hover { background: rgba(255,255,255,0.14); border-color: rgba(201,168,76,0.4); }

        /* ─────────────────────────────────────────────
        /* ─────────────────────────────────────────────
           LOGO
        ───────────────────────────────────────────── */
        .gh-logo-wrap {
          display: flex; align-items: center; gap: 10px;
          text-decoration: none;
          padding: 7px 16px 7px 10px;
          border-radius: 14px;
          background: linear-gradient(135deg, #0B3D2E 0%, #0F5132 60%, #166534 100%);
          border: 1.5px solid rgba(201,168,76,0.32);
          box-shadow: 0 3px 14px rgba(11,61,46,0.20), inset 0 1px 0 rgba(255,255,255,0.06);
          transition: transform 0.22s ease, box-shadow 0.22s ease;
          position: relative; overflow: hidden;
        }
        .gh-logo-wrap::before {
          content: ''; position: absolute; top: 0; left: -80%;
          width: 60%; height: 100%;
          background: linear-gradient(90deg, transparent, rgba(201,168,76,0.10), transparent);
          transition: left 0.5s ease;
        }
        .gh-logo-wrap:hover { transform: translateY(-2px); box-shadow: 0 7px 24px rgba(11,61,46,0.30); text-decoration: none; }
        .gh-logo-wrap:hover::before { left: 140%; }

        .gh-logo-icon {
          width: 36px; height: 36px;
          background: rgba(201,168,76,0.14); border: 1.5px solid rgba(201,168,76,0.38);
          border-radius: 9px; display: flex; align-items: center; justify-content: center;
          font-size: 19px; color: #F0C060; flex-shrink: 0;
        }
        .gh-logo-text-wrap { display: flex; flex-direction: column; line-height: 1; }
        .gh-logo-name {
          font-family: 'Playfair Display', serif;
          font-size: 20px; font-weight: 700; letter-spacing: 0.2px;
          background: linear-gradient(135deg, #F0C060 0%, #C9A84C 100%);
          -webkit-background-clip: text; -webkit-text-fill-color: transparent;
          background-clip: text;
        }
        .gh-logo-name span {
          font-family: 'Inter', sans-serif; font-weight: 400; font-size: 17px;
          background: linear-gradient(135deg, #F0C060 0%, #C9A84C 100%);
          -webkit-background-clip: text; -webkit-text-fill-color: transparent;
          background-clip: text; opacity: 0.85;
        }
        .gh-logo-tagline {
          font-size: 9px; font-weight: 500; letter-spacing: 1.4px;
          color: rgba(240,192,96,0.60); text-transform: uppercase; margin-top: 3px;
        }

        /* ─────────────────────────────────────────────
           MIDDLE HEADER — white with subtle shadow
        ───────────────────────────────────────────── */
        .gh-mid-header {
          background: #fff;
          padding: 14px 0;
          box-shadow: 0 2px 0 rgba(15,81,50,0.06);
          position: relative;
        }

        /* ── Search bar wrapper ── */
        .gh-search-bar {
          display: flex;
          align-items: center;
          border: 2px solid #E5E7EB;
          border-radius: 999px;
          background: #fff;
          transition: border-color 0.25s, box-shadow 0.25s;
          height: 46px;
          width: 100%;
          max-width: 520px;
        }
        .gh-search-bar:focus-within {
          border-color: #0F5132;
          box-shadow: 0 0 0 4px rgba(15,81,50,0.10);
        }

        /* ── Search input ── */
        .gh-search-input {
          border: none !important; outline: none !important; box-shadow: none !important;
          flex: 1; padding: 0 48px 0 14px; height: 42px;
          font-size: 14px; color: #111827; background: transparent;
          min-width: 0;
        }
        .gh-search-input::placeholder { color: #9CA3AF; font-size: 13.5px; }

        /* ── Search submit button ── */
        .gh-search-btn {
          position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
          width: 34px; height: 34px; border-radius: 50%;
          background: linear-gradient(135deg, #0F5132, #16a34a);
          border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
          color: #fff; font-size: 15px; transition: transform 0.2s, box-shadow 0.2s;
          box-shadow: 0 2px 8px rgba(15,81,50,0.28); flex-shrink: 0;
        }
        .gh-search-btn:hover { transform: translateY(-50%) scale(1.1); box-shadow: 0 4px 14px rgba(15,81,50,0.38); }

        /* location chip */
        .gh-location-chip {
          display: flex; align-items: center; gap: 8px;
          border: 1.5px solid #E5E7EB; border-radius: 999px;
          padding: 6px 14px; cursor: pointer; background: #FAFAFA;
          transition: all 0.2s; white-space: nowrap; margin-left: 10px;
        }
        .gh-location-chip:hover { border-color: #0F5132; background: #F0FDF4; }

        /* icon action buttons */
        .gh-action-btn {
          position: relative; width: 42px; height: 42px; border-radius: 50%;
          display: flex; align-items: center; justify-content: center;
          color: #374151; font-size: 22px; transition: all 0.22s; cursor: pointer;
          border: 1.5px solid transparent; text-decoration: none;
        }
        .gh-action-btn:hover { background: #F0FDF4; border-color: #BBF7D0; color: #0F5132; transform: translateY(-2px); }
        .gh-badge {
          position: absolute; top: -3px; right: -3px;
          min-width: 17px; height: 17px; border-radius: 999px;
          background: linear-gradient(135deg, #C9A84C, #F0C060);
          color: #1a1a1a; font-size: 9.5px; font-weight: 700;
          display: flex; align-items: center; justify-content: center;
          border: 2px solid #fff; padding: 0 3px;
        }

        /* ─────────────────────────────────────────────
           BOTTOM NAV  — clean white with green accents
        ───────────────────────────────────────────── */
        .gh-bottom-nav {
          background: #fff;
          border-top: 1.5px solid #F3F4F6;
          border-bottom: 1.5px solid #F3F4F6;
          position: relative;
        }

        .gh-cat-trigger {
          display: flex; align-items: center; gap: 8px;
          background: linear-gradient(135deg, #0F5132, #166534);
          color: #fff; border: none; cursor: pointer;
          padding: 10px 20px; border-radius: 8px;
          font-size: 13.5px; font-weight: 600;
          transition: all 0.22s; flex-shrink: 0;
          box-shadow: 0 2px 8px rgba(15,81,50,0.20);
        }
        .gh-cat-trigger:hover { background: linear-gradient(135deg, #0B3D2E, #0F5132); box-shadow: 0 4px 14px rgba(15,81,50,0.30); transform: translateY(-1px); }

        /* nav links */
        .gh-nav-link {
          position: relative; display: flex; align-items: center; gap: 5px;
          padding: 14px 13px; font-size: 13.5px; font-weight: 600;
          color: #374151; text-decoration: none; white-space: nowrap;
          transition: color 0.2s;
        }
        .gh-nav-link::after {
          content: ''; position: absolute; bottom: 0; left: 50%; right: 50%;
          height: 2.5px; background: linear-gradient(90deg, #0F5132, #16a34a);
          border-radius: 2px 2px 0 0;
          transition: left 0.22s ease, right 0.22s ease;
        }
        .gh-nav-link:hover { color: #0F5132; text-decoration: none; }
        .gh-nav-link:hover::after { left: 12px; right: 12px; }

        /* phone CTA */
        .gh-phone-cta {
          display: flex; align-items: center; gap: 8px;
          padding: 10px 18px; border-radius: 8px;
          background: #F0FDF4; border: 1.5px solid #BBF7D0;
          color: #0F5132; font-size: 13px; font-weight: 600;
          text-decoration: none; transition: all 0.22s; white-space: nowrap;
        }
        .gh-phone-cta:hover { background: #DCFCE7; border-color: #86EFAC; color: #0B3D2E; transform: translateY(-1px); text-decoration: none; }

        /* profile dropdown */
        .gh-profile-dropdown {
          position: absolute; top: calc(100% + 8px); right: 0;
          background: #fff; border: 1px solid #E5E7EB;
          border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.12);
          min-width: 200px; overflow: hidden; z-index: 9999;
          animation: ghDropIn 0.18s ease;
        }
        @keyframes ghDropIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
        .gh-profile-item {
          display: flex; align-items: center; gap: 10px;
          padding: 11px 16px; font-size: 13.5px; color: #374151;
          text-decoration: none; transition: background 0.15s; cursor: pointer;
          border: none; width: 100%; background: transparent; text-align: left;
        }
        .gh-profile-item:hover { background: #F0FDF4; color: #0F5132; text-decoration: none; }
        .gh-profile-item + .gh-profile-item { border-top: 1px solid #F3F4F6; }

        /* search dropdown redesign */
        .gh-search-dropdown {
          position: absolute; top: 100%; left: 0; right: 0;
          background: #fff; border: 1.5px solid #E5E7EB;
          border-radius: 0 0 16px 16px;
          box-shadow: 0 12px 40px rgba(0,0,0,0.12);
          z-index: 9999; max-height: 420px; overflow-y: auto;
        }
        .gh-search-result {
          display: flex; align-items: center; gap: 12px;
          padding: 10px 16px; cursor: pointer; border-bottom: 1px solid #F9FAFB;
          transition: background 0.15s;
        }
        .gh-search-result:hover { background: #F0FDF4; }
        .gh-search-result-img {
          width: 46px; height: 46px; border-radius: 10px; overflow: hidden;
          background: #F0FDF4; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
          border: 1px solid #E5E7EB;
        }

        /* category submenu */
        .submenus-submenu__list { list-style: none !important; padding: 0 !important; margin: 0 !important; }
        .submenus-submenu__list li { list-style-type: none !important; background: #fff !important; padding: 0 !important; margin: 0 !important; position: static !important; }
        .submenus-submenu__list li::marker, .submenus-submenu__list li::before, .submenus-submenu__list li::after { display: none !important; content: none !important; }
        .submenus-submenu__list a::before, .submenus-submenu__list a::after { display: none !important; content: none !important; }
        .submenus-submenu__list a { color: #374151 !important; display: flex !important; align-items: center; gap: 10px; padding: 11px 16px !important; border-bottom: 1px solid #F3F4F6; transition: all 0.2s; background: #fff !important; font-size: 13.5px; }
        .submenus-submenu__list a:hover { color: #0F5132 !important; background: #F0FDF4 !important; padding-left: 22px !important; }

        /* Fixed header drop shadow */
        .gh-fixed { box-shadow: 0 4px 20px rgba(0,0,0,0.10); }

        /* Scroll-hide on mobile */
        ul::-webkit-scrollbar { display: none; }

ul::-webkit-scrollbar { display: none; }


/* ==========================================================================
   BannerOne Component Styles — Full-Width Luxury Hero Banner
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;1,400&family=Inter:wght@400;500;600;700&display=swap');

.gn-banner-section {
  position: relative;
  width: 100%;
  background: #fdfbf7;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

/* Full-Width Luxury Slider Container */
.gn-banner-slider-container {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* Slick slider structure */
.gn-banner-slider-container .slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  touch-action: pan-y;
  user-select: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

.gn-banner-slider-container .slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 100%;
}

.gn-banner-slide-wrapper {
  outline: none !important;
}

/* Perfectly Proportioned Panoramic Slide */
.gn-banner-slide {
  position: relative;
  width: 100%;
  height: 350px;
  max-height: 350px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #f5efe6;
}

.gn-banner-image-link {
  display: block;
  width: 100%;
  height: 350px;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}

.gn-banner-image {
  width: 100%;
  height: 100%;
  max-height: 350px;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.gn-banner-image-link:hover .gn-banner-image {
  transform: scale(1.008);
}

/* ── Luxury Navigation Arrows ── */
.gn-banner-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  color: #0F3E36;
  font-size: 20px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(15, 62, 54, 0.18);
  cursor: pointer;
  transition: all 0.25s ease;
  outline: none !important;
}

.gn-banner-arrow:hover {
  background: #0F3E36;
  color: #ffffff;
  border-color: #0F3E36;
  box-shadow: 0 6px 20px rgba(15, 62, 54, 0.32);
  transform: translateY(-50%) scale(1.08);
}

.gn-banner-arrow--prev {
  left: 24px;
}

.gn-banner-arrow--next {
  right: 24px;
}

/* ── Floating Dots Indicator ── */
.gn-banner-slider-container .slick-dots {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 8px;
  z-index: 10;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gn-banner-slider-container .slick-dots li {
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
}

.gn-banner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(15, 62, 54, 0.3);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  padding: 0;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none !important;
}

.gn-banner-slider-container .slick-dots li.slick-active .gn-banner-dot {
  width: 26px;
  height: 8px;
  border-radius: 8px;
  background: #0F3E36;
  border-color: #0F3E36;
  box-shadow: 0 2px 8px rgba(15, 62, 54, 0.4);
}

/* ── Dynamic Overlay Typography ── */
.gn-banner-overlay-content {
  position: absolute;
  top: 50%;
  left: 6%;
  transform: translateY(-50%);
  width: min(44%, 520px);
  z-index: 3;
  pointer-events: auto;
}

.gn-banner-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #0F3E36;
  margin-bottom: 8px;
  display: block;
}

.gn-banner-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(20px, 3.2vw, 42px);
  font-weight: 700;
  color: #0F3E36;
  line-height: 1.16;
  margin-bottom: 12px;
}

.gn-banner-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: clamp(12px, 1.1vw, 15px);
  color: #37534c;
  line-height: 1.5;
  margin-bottom: 18px;
}

.gn-banner-cta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.gn-banner-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0F3E36;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 22px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(15, 62, 54, 0.25);
  transition: all 0.2s ease;
}

.gn-banner-btn:hover {
  background: #092823;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(15, 62, 54, 0.35);
}

.gn-banner-heart-divider {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #D49A37;
  font-size: 14px;
}

.gn-heart-line {
  display: inline-block;
  width: 20px;
  height: 1px;
  background: #E2C799;
}

/* ── Responsive Rules ── */
@media (max-width: 992px) {
  .gn-banner-arrow {
    width: 38px;
    height: 38px;
    font-size: 17px;
  }
  .gn-banner-arrow--prev { left: 16px; }
  .gn-banner-arrow--next { right: 16px; }
}

@media (max-width: 768px) {
  .gn-banner-arrow {
    width: 32px;
    height: 32px;
    font-size: 15px;
  }
  .gn-banner-arrow--prev { left: 10px; }
  .gn-banner-arrow--next { right: 10px; }
  .gn-banner-slider-container .slick-dots { bottom: 10px; }
  .gn-banner-slider-container .slick-dots li.slick-active .gn-banner-dot { width: 18px; }
  .gn-banner-slide,
  .gn-banner-image-link { height: 240px; max-height: 240px; }
  .gn-banner-image { max-height: 240px; }
}

@media (max-width: 576px) {
  .gn-banner-arrow {
    display: none !important;
  }
  .gn-banner-slide,
  .gn-banner-image-link { height: 180px; max-height: 180px; }
  .gn-banner-image { max-height: 180px; }
}


/* ==========================================================================
   CancelOrderModal Component Styles
   ========================================================================== */

.gn-cancel-backdrop {
          position: fixed;
          inset: 0;
          background: rgba(17, 24, 22, 0.5);
          backdrop-filter: blur(2px);
          display: flex;
          align-items: flex-end;
          justify-content: center;
          z-index: 1000;
          animation: gn-fade-in 0.15s ease-out;
        }
        @keyframes gn-fade-in { from { opacity: 0; } to { opacity: 1; } }
        @keyframes gn-slide-up { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

        .gn-cancel-sheet {
          width: 100%;
          max-width: 440px;
          background: #fff;
          border-radius: 20px 20px 0 0;
          padding: 24px 22px calc(20px + env(safe-area-inset-bottom, 0px));
          box-shadow: 0 -8px 40px rgba(0,0,0,0.18);
          animation: gn-slide-up 0.2s ease-out;
          max-height: 86vh;
          overflow-y: auto;
        }

        @media (min-width: 640px) {
          .gn-cancel-backdrop { align-items: center; }
          .gn-cancel-sheet { border-radius: 20px; margin: 0 20px; }
        }

        .gn-cancel-head {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: 12px;
          margin-bottom: 4px;
        }
        .gn-cancel-icon {
          width: 38px; height: 38px;
          border-radius: 50%;
          background: #FEF2F2;
          color: #E11D48;
          display: flex; align-items: center; justify-content: center;
          flex-shrink: 0;
        }
        .gn-cancel-title { font-size: 17px; font-weight: 700; color: #14231c; margin: 0 0 2px; }
        .gn-cancel-sub { font-size: 13px; color: #6b7c74; margin: 0; }
        .gn-cancel-close {
          border: none; background: #f2f4f3; color: #55645d;
          width: 30px; height: 30px; border-radius: 50%;
          display: flex; align-items: center; justify-content: center;
          cursor: pointer; flex-shrink: 0;
        }
        .gn-cancel-close:disabled { opacity: 0.5; cursor: not-allowed; }

        .gn-cancel-order-tag {
          font-size: 12px;
          color: #6b7c74;
          background: #F5F7F5;
          border-radius: 8px;
          padding: 6px 10px;
          margin: 14px 0 6px;
          font-weight: 600;
        }

        .gn-cancel-label {
          font-size: 12.5px;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.04em;
          color: #8a988f;
          margin: 14px 0 8px;
        }

        .gn-reason-list { display: flex; flex-direction: column; gap: 8px; }
        .gn-reason-item {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 12px 14px;
          border: 1.5px solid #E7ECE9;
          border-radius: 12px;
          cursor: pointer;
          font-size: 14px;
          color: #26332c;
          transition: border-color 0.12s, background 0.12s;
        }
        .gn-reason-item:hover { border-color: #b9ceC0; }
        .gn-reason-item--active {
          border-color: #0D3D2B;
          background: #F2F8F4;
          font-weight: 600;
        }
        .gn-reason-dot {
          width: 18px; height: 18px;
          border-radius: 50%;
          border: 1.5px solid #C7D3CC;
          flex-shrink: 0;
          display: flex; align-items: center; justify-content: center;
        }
        .gn-reason-item--active .gn-reason-dot {
          border-color: #0D3D2B;
        }
        .gn-reason-dot-fill {
          width: 9px; height: 9px;
          border-radius: 50%;
          background: #0D3D2B;
        }

        .gn-cancel-note {
          margin-top: 10px;
          width: 100%;
          border: 1.5px solid #E7ECE9;
          border-radius: 12px;
          padding: 12px 14px;
          font-size: 13.5px;
          font-family: inherit;
          color: #26332c;
          resize: vertical;
          min-height: 72px;
          outline: none;
          box-sizing: border-box;
        }
        .gn-cancel-note:focus { border-color: #0D3D2B; }

        .gn-cancel-footnote {
          display: flex;
          gap: 8px;
          align-items: flex-start;
          background: #FFFBEB;
          border: 1px solid #FDE68A;
          border-radius: 10px;
          padding: 10px 12px;
          margin-top: 16px;
          font-size: 12.5px;
          color: #92620A;
          line-height: 1.5;
        }

        .gn-cancel-actions {
          display: flex;
          gap: 10px;
          margin-top: 18px;
        }
        .gn-cancel-btn {
          flex: 1;
          padding: 13px;
          border-radius: 12px;
          font-size: 14.5px;
          font-weight: 700;
          cursor: pointer;
          border: none;
          display: flex; align-items: center; justify-content: center; gap: 8px;
        }
        .gn-cancel-btn--keep {
          background: #F2F4F3;
          color: #26332c;
        }
        .gn-cancel-btn--keep:hover:not(:disabled) { background: #E7ECE9; }
        .gn-cancel-btn--confirm {
          background: #E11D48;
          color: #fff;
        }
        .gn-cancel-btn--confirm:hover:not(:disabled) { background: #C11640; }
        .gn-cancel-btn--confirm:disabled {
          background: #F3C6D1;
          cursor: not-allowed;
        }
        .gn-spin { animation: gn-spin-anim 0.8s linear infinite; }
        @keyframes gn-spin-anim { to { transform: rotate(360deg); } }


/* ==========================================================================
   CartSection Component Styles
   ========================================================================== */

.cart-list { display: flex; flex-direction: column; gap: 12px; }

                .cart-row {
                    display: grid;
                    grid-template-columns: 1fr auto auto auto auto;
                    align-items: center;
                    gap: 16px;
                    padding: 16px;
                    border: 1px solid #f0f0f0;
                    border-radius: 12px;
                    background: #fff;
                }

                .cart-row__product { display: flex; align-items: center; gap: 14px; min-width: 0; }
                .cart-row__img {
                    width: 64px; height: 64px; flex-shrink: 0; border-radius: 8px;
                    border: 1px solid #f0f0f0; overflow: hidden;
                    display: flex; align-items: center; justify-content: center; background: #fafafa;
                }
                .cart-row__img img { width: 100%; height: 100%; object-fit: contain; }
                .cart-row__info { min-width: 0; }
                .cart-row__name {
                    font-size: 14px; font-weight: 600; color: #111; margin-bottom: 3px;
                    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
                }
                .cart-row__cat { font-size: 12px; color: #9ca3af; }
                .cart-row__stock-warn { font-size: 11.5px; color: #d97706; margin-top: 3px; }

                .cart-row__price { text-align: right; white-space: nowrap; }
                .cart-row__price-main { font-size: 14px; font-weight: 600; color: #111; }
                .cart-row__price-mrp { font-size: 11.5px; color: #9ca3af; text-decoration: line-through; margin-left: 4px; }

                .cart-row__subtotal { text-align: right; font-size: 14.5px; font-weight: 700; color: #111; white-space: nowrap; }

                .qty-stepper {
                    display: flex; align-items: center; border: 1px solid #e5e7eb;
                    border-radius: 8px; overflow: hidden; flex-shrink: 0;
                }
                .qty-stepper button {
                    width: 30px; height: 30px; border: none; background: #f9fafb;
                    cursor: pointer; font-size: 14px;
                    display: flex; align-items: center; justify-content: center;
                    color: #374151; flex-shrink: 0; transition: background 0.15s;
                }
                .qty-stepper button:disabled { cursor: not-allowed; opacity: 0.4; }
                .qty-stepper button:not(:disabled):hover { background: #f0fdf4; color: #16a34a; }
                .qty-stepper input {
                    width: 34px; height: 30px; border: none;
                    border-left: 1px solid #e5e7eb; border-right: 1px solid #e5e7eb;
                    text-align: center; font-size: 13px; font-weight: 600;
                    background: #fff; color: #111; outline: none;
                }
                .qty-stepper input::-webkit-outer-spin-button,
                .qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
                .qty-stepper input[type=number] { -moz-appearance: textfield; }

                .cart-remove-btn {
                    background: none; border: none; cursor: pointer;
                    color: #9ca3af; font-size: 20px; padding: 4px; line-height: 1;
                    transition: color 0.15s; flex-shrink: 0;
                }
                .cart-remove-btn:hover { color: #ef4444; }

                .cart-free-delivery-note {
                    font-size: 12px; color: #6b7280; margin: -8px 0 20px;
                    background: #fff7ed; border: 1px solid #fed7aa;
                    border-radius: 8px; padding: 8px 12px;
                }

                @media (min-width: 992px) {
                    .cart-sidebar-sticky { position: sticky; top: 100px; }
                }

                /* Stacked layout on narrow screens */
                @media (max-width: 680px) {
                    .cart-row {
                        grid-template-columns: 1fr auto;
                        grid-template-areas:
                            "product product"
                            "qty subtotal";
                        row-gap: 12px;
                    }
                    .cart-row__product { grid-area: product; }
                    .cart-row__price { display: none; }
                    .cart-row .qty-stepper { grid-area: qty; }
                    .cart-row__subtotal { grid-area: subtotal; }
                    .cart-row__remove { position: absolute; top: 12px; right: 12px; }
                    .cart-row { position: relative; }
                }


/* ==========================================================================
   Checkout Component Styles
   ========================================================================== */

.co-card {
          background: #fff; border: 1px solid #e5e7eb;
          border-radius: 14px; padding: 20px 24px; margin-bottom: 20px;
        }
        .co-card-title {
          font-size: 12px; font-weight: 700; color: #6b7280;
          text-transform: uppercase; letter-spacing: 0.6px;
          margin-bottom: 16px; display: flex; align-items: center; gap: 7px;
        }
        .co-radio-option {
          display: flex; align-items: flex-start; gap: 12px;
          padding: 14px 18px; border: 1.5px solid #e5e7eb;
          border-radius: 12px; margin-bottom: 10px;
          cursor: pointer; transition: all 0.15s; background: #fff;
        }
        .co-radio-option.active { border-color: #16a34a; background: #f0fdf4; }
        .co-radio-option input[type=radio] {
          margin-top: 2px; flex-shrink: 0;
          accent-color: #16a34a; width: 16px; height: 16px;
        }
        .co-radio-label { font-size: 13.5px; font-weight: 700; color: #111; }
        .co-radio-sub   { font-size: 12px; color: #9ca3af; margin-top: 3px; }
        .co-address-form {
          background: #fafafa; border: 1.5px solid #e5e7eb;
          border-radius: 12px; padding: 20px; margin-top: 4px;
        }
        .co-field-label {
          font-size: 12.5px; font-weight: 700; color: #374151;
          margin-bottom: 6px; display: block;
        }
        .co-field-label .req { color: #ef4444; margin-left: 2px; }
        .co-field-label .opt { color: #9ca3af; font-weight: 400; font-size: 11.5px; margin-left: 4px; }
        .co-saved-pill {
          display: inline-flex; align-items: center; gap: 5px;
          background: #d1fae5; color: #065f46; border-radius: 20px;
          font-size: 11px; font-weight: 700; padding: 3px 12px; margin-left: 8px;
        }
        .co-free-delivery-note {
          font-size: 12px; color: #6b7280; margin: 0 0 14px;
          background: #fff7ed; border: 1px solid #fed7aa;
          border-radius: 8px; padding: 8px 12px;
        }


/* ==========================================================================
   HotDealsOne Component Styles
   ========================================================================== */

/* Premium MarketPro-inspired Hot Deals & Product Card Styles */
                .product-card {
                    border: 1px solid #f3f4f6 !important;
                    border-radius: 12px !important;
                    transition: all 0.3s ease !important;
                    background: #fff;
                    overflow: hidden;
                    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
                }
                .product-card:hover {
                    box-shadow: 0 12px 30px rgba(0,0,0,0.08) !important;
                    transform: translateY(-4px);
                    border-color: #16a34a !important;
                }
                .product-card__thumb {
                    height: 220px;
                    padding: 20px;
                    background: #f9fafb;
                    position: relative;
                    overflow: hidden;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                .product-card__thumb img {
                    max-height: 100%;
                    max-width: 100%;
                    object-fit: contain;
                    transition: transform 0.5s ease;
                }
                .product-card:hover .product-card__thumb img {
                    transform: scale(1.08);
                }
                .product-card__badge {
                    position: absolute;
                    top: 12px;
                    left: 12px;
                    background: #ef4444;
                    color: white;
                    padding: 4px 10px;
                    border-radius: 6px;
                    font-size: 12px;
                    font-weight: 700;
                    z-index: 10;
                    box-shadow: 0 2px 8px rgba(239,68,68,0.3);
                }
                .product-card__content {
                    padding: 20px !important;
                }
                .product-card__content h6 a {
                    font-size: 15px;
                    font-weight: 600;
                    color: #111827;
                    line-height: 1.4;
                    transition: color 0.3s ease;
                }
                .product-card__content h6 a:hover {
                    color: #16a34a;
                }
                .product-card__price span.text-heading {
                    font-size: 18px !important;
                    font-weight: 700 !important;
                    color: #16a34a !important;
                }
                .product-card__cart {
                    background: #f0fdf4 !important;
                    color: #16a34a !important;
                    border: 1px solid #16a34a !important;
                    font-weight: 600 !important;
                    transition: all 0.3s ease !important;
                    border-radius: 8px !important;
                }
                .product-card__cart:hover {
                    background: #16a34a !important;
                    color: #fff !important;
                    box-shadow: 0 4px 15px rgba(22,163,74,0.3) !important;
                }
                .hot-deals.bg-main-600 {
                    background: linear-gradient(135deg, #0f766e 0%, #16a34a 100%) !important;
                    box-shadow: 0 10px 30px rgba(22,163,74,0.2);
                }
                .countdown-list__item {
                    background: rgba(255,255,255,0.2);
                    padding: 10px;
                    border-radius: 8px;
                    min-width: 65px;
                    text-align: center;
                    backdrop-filter: blur(4px);
                }


/* ==========================================================================
   OrdersTracking Component Styles
   ========================================================================== */

.cust-orders-action-row {
        display: flex;
        gap: 10px;
        margin: 10px 0 4px;
      }
      .cust-orders-action-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        border: 1px solid #ddd;
        background: #fff;
      }
      .cust-orders-action-btn--invoice {
        color: #2563eb;
        border-color: #bfdbfe;
      }
      .cust-orders-action-btn--cancel {
        color: #dc2626;
        border-color: #fecaca;
      }
      .cust-orders-action-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }
      .cust-orders-action-msg {
        font-size: 12.5px;
        margin-bottom: 8px;
      }
      .cust-orders-action-msg--success {
        color: #16a34a;
      }
      .cust-orders-action-msg--error {
        color: #dc2626;
      }
      .cust-orders-spin {
        animation: cust-orders-spin-anim 0.8s linear infinite;
      }
      @keyframes cust-orders-spin-anim {
        to { transform: rotate(360deg); }
      }

      @media (max-width: 480px) {
        .cust-orders-action-row { flex-wrap: wrap; }
        .cust-orders-action-btn { flex: 1 1 140px; justify-content: center; }
      }


/* ==========================================================================
   RateReviewModal Component Styles
   ========================================================================== */

/* ── Shared modal (rate & review) ── */
        .gn-modal-overlay {
        position: fixed; inset: 0;
        background: rgba(20, 35, 28, 0.45);
        display: flex; align-items: center; justify-content: center;
        z-index: 1000;
        padding: 16px;
        }
        .gn-modal {
        background: #fff;
        border-radius: 16px;
        padding: 24px;
        width: 100%;
        max-width: 380px;
        box-sizing: border-box;
        }
        .gn-modal-title { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: #14231C; }
        .gn-modal-subtitle { margin: 0 0 16px; font-size: 12.5px; color: #8A988F; }
        .gn-modal-stars { display: flex; gap: 4px; margin-bottom: 14px; }
        .gn-modal-star-btn { background: none; border: none; padding: 2px; cursor: pointer; }
        .gn-modal-star { color: #D8DFDB; }
        .gn-modal-star--filled { color: #F59E0B; fill: #F59E0B; }
        .gn-modal-textarea {
        width: 100%;
        box-sizing: border-box;
        border: 1.5px solid #E7ECE9;
        border-radius: 10px;
        padding: 10px 12px;
        font-size: 13px;
        font-family: inherit;
        resize: vertical;
        outline: none;
        }
        .gn-modal-textarea:focus { border-color: #0D3D2B; }
        .gn-modal-error { color: #DC2626; font-size: 12px; margin-top: 8px; }
        .gn-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
        .gn-modal-btn {
        padding: 9px 16px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        border: 1px solid transparent;
        }
        .gn-modal-btn--ghost { background: #fff; border-color: #E1E7E3; color: #4A5A50; }
        .gn-modal-btn--primary { background: #0D3D2B; color: #fff; }
        .gn-modal-btn:disabled { opacity: 0.6; cursor: not-allowed; }

        /* Phone responsive tweaks for the modal */
        @media (max-width: 480px) {
        .gn-modal { padding: 18px; border-radius: 14px; }
        .gn-modal-overlay { padding: 12px; }
        }


/* ==========================================================================
   Returnrequestmodal Component Styles
   ========================================================================== */

.rrm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; }
        .rrm-box { background: #fff; border-radius: 16px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; }
        .rrm-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid #f0f0f0; }
        .rrm-title { font-size: 16px; font-weight: 800; color: #111; }
        .rrm-close { background: none; border: none; cursor: pointer; color: #9ca3af; padding: 4px; }
        .rrm-body { padding: 20px 24px; }
        .rrm-notice { background: #fee2e2; border: 1px solid #fca5a5; color: #dc2626; border-radius: 10px; padding: 12px 16px; font-size: 13px; display: flex; gap: 8px; align-items: flex-start; margin-bottom: 16px; }
        .rrm-type-row { display: flex; gap: 10px; margin-bottom: 18px; }
        .rrm-type-btn { flex: 1; padding: 12px; border-radius: 10px; border: 1.5px solid #e5e7eb; background: #fafafa; cursor: pointer; font-size: 13.5px; font-weight: 700; color: #6b7280; display: flex; align-items: center; justify-content: center; gap: 6px; }
        .rrm-type-btn.active { border-color: #16a34a; background: #f0fdf4; color: #15803d; }
        .rrm-field { margin-bottom: 16px; }
        .rrm-field label { display: block; font-size: 12.5px; font-weight: 700; color: #374151; margin-bottom: 6px; }
        .rrm-field select, .rrm-field textarea, .rrm-field input { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1.5px solid #e5e7eb; font-size: 13.5px; box-sizing: border-box; font-family: inherit; }
        .rrm-field textarea { min-height: 70px; resize: vertical; }
        .rrm-refund-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
        .rrm-refund-tab { flex: 1; padding: 8px; border-radius: 8px; border: 1.5px solid #e5e7eb; background: #fff; cursor: pointer; font-size: 12.5px; font-weight: 600; color: #6b7280; }
        .rrm-refund-tab.active { border-color: #16a34a; background: #f0fdf4; color: #15803d; }
        .rrm-err { color: #dc2626; font-size: 12.5px; margin-bottom: 12px; }
        .rrm-footer { padding: 16px 24px 20px; display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid #f0f0f0; }
        .rrm-btn-cancel { padding: 9px 18px; border-radius: 8px; border: 1.5px solid #e5e7eb; background: #fff; font-size: 13px; font-weight: 700; color: #6b7280; cursor: pointer; }
        .rrm-btn-submit { padding: 9px 20px; border-radius: 8px; border: none; background: #16a34a; color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }
        .rrm-btn-submit:disabled { background: #d1d5db; cursor: not-allowed; }

        .rrm-suggest-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 8px; }
        .rrm-suggest-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px; border-radius: 10px; border: 1.5px solid #e5e7eb; background: #fff; cursor: pointer; text-align: left; }
        .rrm-suggest-card:disabled { opacity: 0.5; cursor: not-allowed; }
        .rrm-suggest-card.active { border-color: #16a34a; background: #f0fdf4; }
        .rrm-suggest-img { width: 100%; height: 70px; object-fit: contain; background: #f9fafb; border-radius: 6px; margin-bottom: 4px; }
        .rrm-suggest-name { font-size: 11.5px; font-weight: 700; color: #111; line-height: 1.3; }
        .rrm-suggest-price { font-size: 12px; font-weight: 700; color: #16a34a; }
        .rrm-suggest-seller { font-size: 10.5px; color: #9ca3af; }
        .rrm-suggest-oos { font-size: 10px; color: #dc2626; font-weight: 700; }
        .rrm-suggest-check { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: 50%; background: #16a34a; color: #fff; display: flex; align-items: center; justify-content: center; }