.single-service .icon-wrapper img {
  width: 60px !important;
  height: 60px !important;
  object-fit: contain !important;
}
.single-offer-product.verticle .promo-img {
  width: 100%;
  height: 680px !important;
  object-fit: cover !important;
}
.single-offer-product .promo-img {
  width: 100%;
  height: 328px !important;
  object-fit: cover !important;
}

/* ── Footer social icon colours (override legacy black) ── */
.gs-footer-section .footer-row .left-info .social-links a i,
.social-link-item i {
  color: rgba(255, 255, 255, 0.65);
  transition: color 0.25s;
}
.gs-footer-section .footer-row .left-info .social-links a:hover i,
.social-link-item:hover i {
  color: #111111;
}

/* ── Footer feature bar — ensure no legacy padding leaks ── */
.footer-feature-bar .container {
  padding-left: 15px;
  padding-right: 15px;
}

/* ── Footer bottom: prevent Bootstrap row gutters fighting the flex layout ── */
.gs-footer-section .gs-footer-bottom .footer-bottom-inner {
  margin: 0;
}

#cardNumber,
#securityCode,
#expirationDate {
  height: 60px;
  transition: color 0.25s, background-color 0.25s, border-color 0.25s;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  background-color: #fff;
  color: #505050;
  font-size: 14px;
  padding: 0px 18px;
}

#cardNumber,
#securityCode,
#expirationDate {
  margin-bottom: 18px;
}

@media screen and (max-width: 767px) {
  .single-offer-product .promo-img {
    height: 200px !important;
  }
  .single-offer-product.verticle .promo-img {
    height: 400px !important;
  }
}


.sidebar-active-color {
  color: #ff4c3b!important;
}


/* ===== Dark Navbar Redesign ===== */
.header-section {
  box-shadow: none;
}

/* Hide top info bar */
.info-bar {
  display: none !important;
}

/* Dark background for main navbar */
.header-top {
  background-color: #111111 !important;
  padding: 0 !important;
  border-bottom: 2px solid #FFA500;
}

.header-top.sticky {
  background-color: #111111 !important;
  border-bottom: 2px solid #FFA500;
  box-shadow: 0 2px 20px rgba(0,0,0,0.5);
}

/* Navbar inner row height */
.header-top .create-navbar {
  align-items: center;
  min-height: 72px;
  padding: 0 0;
}

/* Nav links — white text on dark bg */
.header-top .nav-menus li a,
.header-top .nav-menus li > a.nav-link {
  color: #ffffff !important;
  font-weight: 500;
  font-size: 15px;
  text-transform: capitalize;
}

/* Active link — gold/amber */
.header-top .nav-menus li.active > a,
.header-top .nav-menus li > a.active,
.header-top .nav-menus li.active > a.nav-link {
  color: #FFA500 !important;
}

/* Active underline in gold */
.header-top .nav-menus li.active > a::after,
.header-top .nav-menus li > a.active::after {
  background-color: #FFA500 !important;
  width: 100% !important;
}

/* Hover — gold */
.header-top .nav-menus li:hover > a,
.header-top .nav-menus li:hover > a.nav-link {
  color: #FFA500 !important;
}

.header-top .nav-menus li:hover > a::after {
  background-color: #FFA500 !important;
}

/* Submenu chevron icon inherits link color */
.header-top .nav-menus li .has-submenu-icon {
  color: #ffffff;
  vertical-align: middle;
  margin-left: 2px;
}

.header-top .nav-menus li:hover .has-submenu-icon,
.header-top .nav-menus li.active .has-submenu-icon {
  color: #FFA500;
}

/* Icon circles on dark nav — no light bg circle */
.header-top .nav-right {
  gap: 8px;
  display: flex;
  align-items: center;
}

.header-top .nav-right .icon-circle {
  background-color: transparent !important;
  border: none;
  width: 36px;
  height: 36px;
}

.header-top .nav-right .icon-circle:hover {
  background-color: rgba(255,165,0,0.15) !important;
}

.header-top .nav-right .icon-circle svg path {
  stroke: #ffffff;
}

.header-top .nav-right .icon-circle:hover svg path {
  stroke: #FFA500;
}

/* Cart count badge */
.header-top .nav-right .cart-count {
  background-color: #FFA500;
  color: #111111;
}

/* Megamenu stays light for readability */
.header-top .megamenu,
.header-top .dropdown-menu {
  background-color: #1a1a1a;
  border: 1px solid #333;
}

.header-top .megamenu h5 a,
.header-top .megamenu ul li a {
  color: #cccccc !important;
}

.header-top .megamenu h5 a:hover,
.header-top .megamenu ul li a:hover {
  color: #FFA500 !important;
}

.header-top .dropdown-item {
  color: #cccccc !important;
  border-bottom-color: #333 !important;
  font-size: 15px;
}

.header-top .dropdown-item:hover {
  background-color: #FFA500 !important;
  color: #111111 !important;
}


/* ===== Attractive Products Megamenu ===== */

/* Override base megamenu for dark theme */
.header-top .megamenu.cat-megamenu {
  background-color: #181818 !important;
  border-top: 3px solid #FFA500;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  padding: 0 !important;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
  display: block !important;
}

/* Top header bar inside megamenu */
.megamenu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 28px;
  background-color: #111111;
  border-bottom: 1px solid #2a2a2a;
}

.megamenu-header-title {
  color: #aaaaaa;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.megamenu-view-all {
  color: #FFA500 !important;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: opacity 0.2s;
}

.megamenu-view-all:hover {
  opacity: 0.8;
}

/* Body grid */
.megamenu-body {
  padding: 20px 16px 24px;
  max-height: 70vh;
  overflow-y: auto;
  /* custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: #FFA500 #1a1a1a;
}

.megamenu-body::-webkit-scrollbar {
  width: 4px;
}

.megamenu-body::-webkit-scrollbar-track {
  background: #1a1a1a;
}

.megamenu-body::-webkit-scrollbar-thumb {
  background: #FFA500;
  border-radius: 4px;
}

/* Category group card */
.mm-category-group {
  padding: 14px 14px 10px;
  margin-bottom: 6px;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.mm-category-group:hover {
  background-color: #222222;
}

/* Category title link */
.mm-category-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid #2d2d2d;
  transition: color 0.2s;
}

.mm-category-title:hover {
  color: #FFA500 !important;
}

.mm-category-title:hover .mm-cat-dot {
  background-color: #FFA500;
  box-shadow: 0 0 6px rgba(255,165,0,0.6);
}

/* Gold dot accent */
.mm-cat-dot {
  width: 7px;
  height: 7px;
  background-color: #FFA500;
  border-radius: 50%;
  flex-shrink: 0;
  transition: box-shadow 0.2s;
}

/* Sub-item list */
.mm-sub-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mm-sub-list li {
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mm-sub-list li::after {
  display: none !important;
}

.mm-sub-list li a {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #999999 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  text-transform: capitalize !important;
  padding: 4px 2px;
  transition: color 0.2s, padding-left 0.2s;
  line-height: 1.5;
}

.mm-sub-list li a svg {
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.2s;
  color: #FFA500;
}

.mm-sub-list li a:hover {
  color: #FFA500 !important;
  padding-left: 4px;
}

.mm-sub-list li a:hover svg {
  opacity: 1;
}

/* ================================================================
   DESKTOP NAVBAR POLISH
   ================================================================ */

/* --- Animated hamburger --- */
.nav-hamburger {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  width: 34px;
  height: 34px;
}

.hamburger-line {
  display: block;
  height: 2px;
  background-color: #ffffff;
  border-radius: 2px;
  transition: all 0.3s ease;
  width: 22px;
}

.hamburger-line--short {
  width: 14px;
}

.nav-hamburger:hover .hamburger-line {
  background-color: #FFA500;
}

.nav-hamburger:hover .hamburger-line--short {
  width: 22px;
}

/* --- Logo area divider --- */
.header-top .nav-left {
  gap: 14px !important;
  align-items: center;
}

.nav-logo-divider {
  width: 1px;
  height: 28px;
  background: rgba(255,165,0,0.3);
  flex-shrink: 0;
  margin-left: 4px;
}

/* --- Nav link spacing & font --- */
.header-top .nav-menus {
  gap: 4px !important;
}

.header-top .nav-menus li > a,
.header-top .nav-menus li > a.nav-link {
  padding: 6px 10px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  font-size: 14px !important;
  transition: color 0.2s, background-color 0.2s !important;
}

.header-top .nav-menus li:hover > a {
  background-color: rgba(255,165,0,0.07);
}

.header-top .nav-menus li.active > a {
  background-color: rgba(255,165,0,0.1);
}

/* Keep existing underline but only below-padding, not inside padding */
.header-top .nav-menus li > a::after {
  bottom: 1px !important;
}

/* --- Refined nav-right buttons --- */
.header-top .nav-right {
  gap: 6px !important;
  align-items: center;
}

/* Search icon button */
.nav-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #cccccc;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 7px 10px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
}

.nav-icon-btn:hover,
.nav-icon-btn:focus {
  color: #FFA500;
  border-color: rgba(255,165,0,0.5);
  background-color: rgba(255,165,0,0.08);
  outline: none;
}

.nav-user-btn a {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #cccccc;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
}

.nav-user-btn:hover a,
.nav-user-btn a:hover {
  color: #FFA500;
}

/* Icon label text */
.nav-icon-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
}

/* Divider between icon groups */
.nav-icon-divider {
  width: 1px;
  height: 22px;
  background: rgba(255,255,255,0.1);
  flex-shrink: 0;
  margin: 0 2px;
}

/* Cart button — gold pill */
.nav-cart-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  background-color: #FFA500;
  color: #111111 !important;
  border: none;
  border-radius: 6px;
  padding: 7px 14px 7px 10px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s, transform 0.15s;
  white-space: nowrap;
}

.nav-cart-btn:hover {
  background-color: #e6940a;
  transform: translateY(-1px);
  color: #111111 !important;
}

.nav-cart-btn svg path {
  stroke: #111111 !important;
}

/* Cart badge — sits over the icon */
.nav-cart-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background-color: #111111;
  color: #FFA500;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #FFA500;
  line-height: 1;
}

/* Services / About dropdown menus — styled dark */
.header-top .has-submenu .dropdown-menu {
  min-width: 200px;
  padding: 6px 0;
  border-radius: 6px;
  overflow: hidden;
}

.header-top .has-submenu .dropdown-item {
  height: auto !important;
  padding: 10px 18px !important;
  font-size: 14px !important;
  font-weight: 400;
  border-bottom: 1px solid #2a2a2a !important;
}

.header-top .has-submenu .dropdown-menu li:last-child .dropdown-item {
  border-bottom: none !important;
}

/* Sticky navbar compact */
.header-top.sticky .create-navbar {
  min-height: 60px !important;
}

/* ================================================================
   MOBILE SIDEBAR
   ================================================================ */

/* --- Panel --- */
.mob-sidebar {
  position: fixed;
  top: 0;
  left: -320px;
  width: 300px;
  max-width: 85vw;
  height: 100vh;
  background-color: #141414;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: left 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 4px 0 30px rgba(0,0,0,0.6);
}

.mob-sidebar--open {
  left: 0;
}

/* --- Backdrop --- */
.mob-sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(2px);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s ease;
}

.mob-sidebar-backdrop--visible {
  opacity: 1;
  pointer-events: auto;
}

/* --- Header --- */
.mob-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  background-color: #0d0d0d;
  border-bottom: 2px solid #FFA500;
  flex-shrink: 0;
}

.mob-sidebar-logo img {
  height: 38px;
  width: auto;
  object-fit: contain;
}

.mob-sidebar-close {
  background: transparent;
  border: 1px solid rgba(255,165,0,0.3);
  border-radius: 6px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
  flex-shrink: 0;
}

.mob-sidebar-close:hover {
  background-color: rgba(255,165,0,0.15);
  border-color: #FFA500;
}

/* --- Inline search --- */
.mob-sidebar-search {
  padding: 14px 16px 10px;
  border-bottom: 1px solid #222;
  flex-shrink: 0;
}

.mob-search-inner {
  display: flex;
  align-items: center;
  background-color: #1e1e1e;
  border: 1px solid #2d2d2d;
  border-radius: 7px;
  padding: 0 10px;
  gap: 8px;
  transition: border-color 0.2s;
}

.mob-search-inner:focus-within {
  border-color: #FFA500;
}

.mob-search-inner svg {
  flex-shrink: 0;
}

.mob-search-inner input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #dddddd;
  font-size: 13px;
  padding: 10px 0;
  min-width: 0;
}

.mob-search-inner input::placeholder {
  color: #555555;
}

.mob-search-btn {
  flex-shrink: 0;
  background-color: #FFA500;
  border: none;
  border-radius: 5px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s;
}

.mob-search-btn:hover {
  background-color: #e6940a;
}

/* --- Navigation --- */
.mob-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0 12px;
  scrollbar-width: thin;
  scrollbar-color: #333 #141414;
}

.mob-sidebar-nav::-webkit-scrollbar { width: 3px; }
.mob-sidebar-nav::-webkit-scrollbar-track { background: #141414; }
.mob-sidebar-nav::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

/* Base nav link */
.mob-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 18px;
  color: #cccccc;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  border-left: 3px solid transparent;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
  line-height: 1;
}

.mob-nav-link svg {
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.mob-nav-link:hover,
.mob-nav-link:focus {
  color: #FFA500;
  background-color: rgba(255,165,0,0.06);
  border-left-color: #FFA500;
  outline: none;
  text-decoration: none;
}

.mob-nav-link:hover svg { opacity: 1; }

.mob-nav-active {
  color: #FFA500 !important;
  border-left-color: #FFA500 !important;
  background-color: rgba(255,165,0,0.08) !important;
}

.mob-nav-active svg { opacity: 1 !important; }

/* Toggle rows (accordion triggers) */
.mob-nav-accordion { border-bottom: 1px solid #1e1e1e; }

.mob-nav-toggle {
  justify-content: space-between;
  border-bottom: none;
}

.mob-nav-link-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Chevron rotation */
.mob-chevron {
  color: #555;
  flex-shrink: 0;
  transition: transform 0.25s ease, color 0.2s;
}

.mob-toggle--open .mob-chevron {
  transform: rotate(180deg);
  color: #FFA500;
}

/* Sub-panel */
.mob-nav-sub {
  background-color: #0f0f0f;
  padding: 4px 0 8px;
}

.mob-sub-view-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px 10px 26px;
  color: #FFA500 !important;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  text-decoration: none;
  border-bottom: 1px solid #1e1e1e;
  margin-bottom: 4px;
}

.mob-sub-view-all:hover { opacity: 0.8; }

/* Category group inside products panel */
.mob-cat-group { padding: 2px 0; }

.mob-cat-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 20px 9px 26px;
  background: transparent;
  border: none;
  color: #aaaaaa;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: color 0.2s;
}

.mob-cat-title:hover { color: #FFA500; }
.mob-cat-title:not(.collapsed) { color: #FFA500; }

.mob-chevron-sm {
  color: #555;
  flex-shrink: 0;
  transition: transform 0.2s, color 0.2s;
}

.mob-cat-title:not(.collapsed) .mob-chevron-sm {
  transform: rotate(180deg);
  color: #FFA500;
}

.mob-cat-subs {
  padding: 2px 0 4px 36px;
  list-style: none;
  margin: 0;
}

.mob-cat-subs li a {
  display: block;
  padding: 7px 16px;
  color: #777777 !important;
  font-size: 13px;
  font-weight: 400;
  text-decoration: none;
  border-radius: 4px;
  transition: color 0.2s, background-color 0.2s;
}

.mob-cat-subs li a:hover {
  color: #FFA500 !important;
  background-color: rgba(255,165,0,0.06);
}

.mob-cat-plain {
  display: block;
  padding: 9px 20px 9px 26px;
  color: #aaaaaa;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: color 0.2s;
}

.mob-cat-plain:hover { color: #FFA500; }

/* Generic sub-link (Services / About) */
.mob-sub-link {
  display: block;
  padding: 9px 20px 9px 26px;
  color: #888888 !important;
  font-size: 13px;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.2s, background-color 0.2s;
  border-left: 3px solid transparent;
}

.mob-sub-link:hover {
  color: #FFA500 !important;
  background-color: rgba(255,165,0,0.05);
  border-left-color: #FFA500;
}

/* --- Divider --- */
.mob-sidebar-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, #333, transparent);
  margin: 0 16px;
  flex-shrink: 0;
}

/* --- Auth buttons --- */
.mob-sidebar-auth {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.mob-auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  transition: all 0.2s;
  cursor: pointer;
}

.mob-auth-primary {
  background-color: #FFA500;
  color: #111111 !important;
  border: none;
}

.mob-auth-primary:hover {
  background-color: #e6940a;
  color: #111111 !important;
  transform: translateY(-1px);
}

.mob-auth-secondary {
  background-color: transparent;
  color: #aaaaaa !important;
  border: 1px solid #333;
}

.mob-auth-secondary:hover {
  border-color: #FFA500;
  color: #FFA500 !important;
}

/* --- Footer strip --- */
.mob-sidebar-footer {
  padding: 10px 16px;
  background-color: #0d0d0d;
  border-top: 1px solid #1e1e1e;
  flex-shrink: 0;
  text-align: center;
}

.mob-sidebar-footer span {
  color: #444;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
}

/* ================================================================
   RESPONSIVE BREAKPOINTS
   ================================================================ */

/* Tablet — compact navbar */
@media (max-width: 1199px) {
  .header-top .create-navbar {
    min-height: 62px !important;
  }
  .header-top .nav-center {
    display: none !important;
  }
  .header-top .nav-left {
    gap: 10px !important;
  }
  /* Move nav-right to right edge */
  .header-top .create-navbar {
    justify-content: space-between !important;
  }
  /* Smaller cart button */
  .nav-cart-btn .nav-icon-label,
  .nav-user-btn .nav-icon-label {
    display: none !important;
  }
  .nav-cart-btn {
    padding: 8px 10px !important;
  }
  .nav-icon-divider {
    display: none !important;
  }
}

/* Mobile — extra compact */
@media (max-width: 575px) {
  .header-top .create-navbar {
    min-height: 56px !important;
  }
  .header-top .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .nav-icon-btn {
    padding: 6px 8px !important;
  }
  .nav-cart-btn {
    padding: 6px 8px !important;
  }
  .header-top .nav-left {
    gap: 8px !important;
  }
  .header-top .nav-right {
    gap: 4px !important;
  }
  .mob-sidebar {
    width: 280px;
  }
}

/* Very small screens */
@media (max-width: 360px) {
  .header-top .nav-right {
    gap: 2px !important;
  }
  .nav-icon-btn {
    padding: 5px 7px !important;
  }
  .nav-cart-btn {
    padding: 5px 7px !important;
  }
}

/* ================================================================
   FIX: Prevent legacy .overlay from lingering after sidebar close
   ================================================================ */

/* The legacy overlay sits below our mob-sidebar-backdrop */
.overlay {
  z-index: 50 !important;
}

/* When our sidebar is NOT open, also ensure legacy overlay is gone
   (belt-and-suspenders — the JS also removes .active on close) */
body:not(.mob-sidebar-body-open) .overlay.active {
  /* keep it as-is for the search bar use-case; only clear via JS */
}

/* ================================================================
   SEARCH BAR — slides down from below navbar (redesigned)
   ================================================================ */

/* Base: fixed, full-width, hidden above viewport */
.search-bar {
  display: block !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 9997 !important;
  background: linear-gradient(135deg, #0d0d0d 0%, #161208 60%, #0d0d0d 100%) !important;
  border-bottom: 2px solid #FFA500 !important;
  padding: 0 !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 2px 0 rgba(255,165,0,0.3) !important;
  /* Hidden state */
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.28s ease !important;
}

/* Visible state — script.js adds .show */
.search-bar.show {
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ── Inner layout wrapper ── */
.search-bar-inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 40px 16px;
  position: relative;
}

.search-bar-wrapper {
  flex: 1;
  min-width: 0;
}

/* ── Hint text ── */
.search-bar-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #888;
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin: 0 0 10px 4px;
}

/* ── Search form ── */
.search-bar .search-form {
  margin: 0 !important;
}

/* ── Input wrap (holds icon + input + clear + submit) ── */
.search-input-wrap {
  display: flex;
  align-items: center;
  background-color: #1c1c1c;
  border: 1.5px solid #2d2d2d;
  border-radius: 50px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.search-input-wrap:focus-within {
  border-color: #FFA500;
  box-shadow: 0 0 0 3px rgba(255,165,0,0.12), 0 4px 20px rgba(255,165,0,0.08);
}

/* Search magnifier icon (left) */
.search-input-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px 0 20px;
  color: #555;
  flex-shrink: 0;
  pointer-events: none;
  transition: color 0.2s;
}

.search-input-wrap:focus-within .search-input-icon {
  color: #FFA500;
}

/* Text input */
.search-input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #e0e0e0 !important;
  font-size: 16px;
  height: 54px;
  padding: 0 8px !important;
  min-width: 0;
}

.search-input::placeholder {
  color: #555 !important;
  font-size: 15px;
}

/* Clear (×) button */
.search-clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #555;
  cursor: pointer;
  padding: 0 10px;
  flex-shrink: 0;
  transition: color 0.2s;
}

.search-clear-btn:hover { color: #FFA500; }

/* Submit button */
.search-submit-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #FFA500 0%, #e6940a 100%);
  border: none;
  color: #000;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.4px;
  padding: 0 24px;
  height: 54px;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 0 50px 50px 0;
  transition: background 0.2s, transform 0.15s;
  white-space: nowrap;
}

.search-submit-btn:hover {
  background: linear-gradient(135deg, #ffb733 0%, #FFA500 100%);
  transform: none;
}

.search-submit-btn:active {
  transform: scale(0.97);
}

/* ── Quick-link chips ── */
.search-quick-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-left: 4px;
}

.search-quick-label {
  font-size: 11px;
  color: #666;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.search-chip {
  display: inline-flex;
  align-items: center;
  background: rgba(255,165,0,0.08);
  border: 1px solid rgba(255,165,0,0.2);
  color: #ccc;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 20px;
  text-decoration: none;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  white-space: nowrap;
}

.search-chip:hover {
  background: rgba(255,165,0,0.18);
  border-color: #FFA500;
  color: #FFA500;
  text-decoration: none;
}

/* ── Close button ── */
.search-bar-close {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: #888;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 7px;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.search-bar-close:hover {
  background: rgba(255,165,0,0.15);
  border-color: #FFA500;
  color: #FFA500;
}

/* ── Responsive: tablet ── */
@media (max-width: 992px) {
  .search-bar-inner {
    padding: 16px 24px 14px;
  }
  .search-submit-btn {
    font-size: 0; /* hide text, show icon only */
    padding: 0 20px;
  }
  .search-submit-btn svg {
    display: block !important;
  }
}

/* ── Responsive: mobile ── */
@media (max-width: 600px) {
  .search-bar-inner {
    padding: 14px 16px 12px;
    gap: 8px;
  }
  .search-bar-hint { display: none; }
  .search-input { height: 48px; font-size: 15px; }
  .search-submit-btn { height: 48px; padding: 0 16px; }
  .search-input-icon { padding: 0 10px 0 14px; }
  .search-chip { font-size: 11px; padding: 3px 10px; }
  .search-bar-close { width: 36px; height: 36px; margin-top: 6px; }
}

@media (max-width: 400px) {
  .search-quick-links { gap: 6px; }
  .search-chip { display: none; }
  .search-chip:nth-child(-n+3) { display: inline-flex; }
}

/* Keep the legacy .overlay below the search bar */
.overlay.active {
  z-index: 9996 !important;
}

/* ================================================================
   TOP BAR
   ================================================================ */

/* Wrapper */
.gs-topbar {
  background-color: #111111;
}

/* ---- Promo strip ---- */
.gs-topbar-promo {
  background: linear-gradient(90deg, #1a1a1a 0%, #1e1a0e 50%, #1a1a1a 100%);
  border-bottom: 1px solid rgba(255,165,0,0.15);
}

.gs-topbar-promo-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 5px 0;
}

.gs-topbar-promo-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: rgba(255,165,0,0.15);
  color: #FFA500;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid rgba(255,165,0,0.3);
  flex-shrink: 0;
}

.gs-topbar-promo-text {
  color: #888888;
  font-size: 12px;
  font-weight: 400;
}

.gs-topbar-promo-text strong {
  color: #FFA500;
  font-weight: 600;
}

/* ---- Main row ---- */
.gs-topbar-main {
  border-bottom: 1px solid #1e1e1e;
}

.gs-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 6px 0;
  gap: 12px;
}

/* ---- Left: phone ---- */
.gs-topbar-left { flex-shrink: 0; }

.gs-topbar-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #aaaaaa;
  font-size: 13px;
  font-weight: 400;
  transition: color 0.2s;
}

.gs-topbar-phone:hover { color: #ffffff; }

.gs-topbar-phone-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background-color: rgba(255,165,0,0.1);
  border: 1px solid rgba(255,165,0,0.25);
  border-radius: 50%;
  flex-shrink: 0;
  transition: background-color 0.2s;
}

.gs-topbar-phone:hover .gs-topbar-phone-icon {
  background-color: rgba(255,165,0,0.2);
}

.gs-topbar-phone-text strong {
  color: #dddddd;
  font-weight: 600;
}

/* ---- Right cluster ---- */
.gs-topbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

/* Login buttons */
.gs-topbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #bbbbbb;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid #333333;
  border-radius: 4px;
  padding: 4px 11px;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
  line-height: 1;
}

.gs-topbar-btn svg { flex-shrink: 0; opacity: 0.7; }

.gs-topbar-btn:hover {
  color: #FFA500;
  border-color: rgba(255,165,0,0.5);
  background-color: rgba(255,165,0,0.06);
}

.gs-topbar-btn:hover svg { opacity: 1; }

/* Gold variant — for logged-in panel links */
.gs-topbar-btn--gold {
  color: #FFA500;
  border-color: rgba(255,165,0,0.4);
  background-color: rgba(255,165,0,0.06);
}

.gs-topbar-btn--gold:hover {
  background-color: rgba(255,165,0,0.14);
  border-color: #FFA500;
  color: #FFA500;
}

/* Vertical separator */
.gs-topbar-sep {
  display: inline-block;
  width: 1px;
  height: 16px;
  background-color: #2d2d2d;
  flex-shrink: 0;
  margin: 0 3px;
}

/* Dropdown group (icon + button) — legacy language selector (keep working) */
.gs-topbar-dropdown {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Toggle button */
.gs-topbar-toggle {
  background: transparent !important;
  border: none !important;
  color: #aaaaaa !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 0 !important;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  transition: color 0.2s;
}

.gs-topbar-toggle:hover { color: #FFA500 !important; }

.gs-topbar-toggle::after {
  border-top: 0.32em solid currentColor !important;
  border-right: 0.32em solid transparent !important;
  border-left: 0.32em solid transparent !important;
  margin-left: 4px !important;
}

/* Dropdown menu (language) */
.gs-topbar-dropdown-menu {
  background-color: #1a1a1a !important;
  border: 1px solid #2d2d2d !important;
  border-radius: 6px !important;
  padding: 4px 0 !important;
  min-width: 130px !important;
  max-width: calc(100vw - 24px) !important;
  margin-top: 8px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
  right: 0 !important;
  left: auto !important;
}

.gs-topbar-dropdown-menu .dropdown-item {
  color: #aaaaaa !important;
  font-size: 13px !important;
  padding: 8px 14px !important;
  height: auto !important;
  border-bottom: 1px solid #222 !important;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.15s, color 0.15s;
}

.gs-topbar-dropdown-menu .dropdown-item:last-child { border-bottom: none !important; }

.gs-topbar-dropdown-menu .dropdown-item:hover,
.gs-topbar-dropdown-menu .dropdown-item.active {
  background-color: #FFA500 !important;
  color: #111111 !important;
}

/* ================================================================
   CURRENCY DROPDOWN — REDESIGNED
   ================================================================ */

/* Pill-shaped trigger wrapper */
.gs-currency-wrap {
  position: relative;
}

.gs-currency-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,165,0,0.10) !important;
  border: 1px solid rgba(255,165,0,0.30) !important;
  border-radius: 20px !important;
  color: #FFA500 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 4px 10px 4px 8px !important;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  line-height: 1;
}

/* Remove the Bootstrap caret — we use our own SVG */
.gs-currency-toggle::after { display: none !important; }

.gs-currency-toggle:hover,
.gs-currency-wrap.show .gs-currency-toggle {
  background: rgba(255,165,0,0.18) !important;
  border-color: #FFA500 !important;
  color: #fff !important;
}

.gs-currency-icon {
  display: flex;
  align-items: center;
  opacity: 0.85;
  flex-shrink: 0;
}

.gs-currency-label {
  letter-spacing: 0.4px;
}

.gs-currency-caret {
  display: flex;
  align-items: center;
  opacity: 0.7;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.gs-currency-wrap.show .gs-currency-caret {
  transform: rotate(180deg);
}

/* Dropdown panel */
.gs-currency-menu {
  background: #151515 !important;
  border: 1px solid rgba(255,165,0,0.20) !important;
  border-radius: 10px !important;
  padding: 6px !important;
  min-width: 150px !important;
  margin-top: 12px !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,165,0,0.06) !important;
  /* Slide-in animation */
  animation: currencyMenuIn 0.18s ease forwards;
  /* Never overflow the viewport */
  max-width: calc(100vw - 24px);
  right: 0 !important;
  left: auto !important;
  /* Scroll when many currencies */
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
}

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

/* Each currency row */
.gs-currency-item {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  gap: 9px !important;
  padding: 9px 10px !important;
  height: auto !important;
  min-height: 0 !important;
  border-radius: 7px !important;
  color: #bbb !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-bottom: none !important;
  border-top: none !important;
  transition: background 0.15s, color 0.15s !important;
  cursor: pointer;
  line-height: 1.3 !important;
}

.gs-currency-item:hover {
  background: rgba(255,165,0,0.10) !important;
  color: #fff !important;
}

.gs-currency-item.active {
  background: rgba(255,165,0,0.12) !important;
  color: #FFA500 !important;
}

/* Colored dot indicator */
.gs-currency-item-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #333;
  border: 1.5px solid #444;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}

.gs-currency-item:hover .gs-currency-item-dot {
  background: rgba(255,165,0,0.5);
  border-color: #FFA500;
}

.gs-currency-item-dot--active {
  background: #FFA500 !important;
  border-color: #FFA500 !important;
  box-shadow: 0 0 0 2px rgba(255,165,0,0.25);
}

.gs-currency-item-name {
  flex: 1;
}

/* Checkmark for active currency */
.gs-currency-item-check {
  display: flex;
  align-items: center;
  color: #FFA500;
  margin-left: auto;
  flex-shrink: 0;
}

/* Kill any border leaking from global .dropdown-item rules */
.gs-currency-menu li:last-child .gs-currency-item,
.gs-currency-menu .gs-currency-item:last-child {
  border-bottom: none !important;
}
.gs-currency-menu li .gs-currency-item {
  border-bottom: none !important;
  border-top: none !important;
}

/* ── Mobile sidebar: Language & Currency pill switchers ── */

.mob-sidebar-locale {
  padding: 14px 16px 6px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mob-locale-group {}

.mob-locale-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #555;
  margin-bottom: 8px;
}

.mob-locale-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.mob-locale-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  border-radius: 20px;
  border: 1px solid #2a2a2a;
  background: #1a1a1a;
  color: #aaa;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  /* Comfortable tap target */
  min-height: 34px;
}

.mob-locale-pill:hover {
  background: rgba(255,165,0,0.10);
  border-color: rgba(255,165,0,0.4);
  color: #FFA500;
  text-decoration: none;
}

.mob-locale-pill--active {
  background: rgba(255,165,0,0.14) !important;
  border-color: #FFA500 !important;
  color: #FFA500 !important;
  font-weight: 600 !important;
}

/* ================================================================
   TOP BAR — RESPONSIVE
   ================================================================ */

/* Tablet: shrink button text */
@media (max-width: 991px) {
  .gs-topbar-btn {
    font-size: 11px;
    padding: 3px 8px;
    gap: 4px;
  }
}

/* Mobile: hide login buttons entirely (they live in the mobile sidebar)
   and collapse to a single tight row with just phone + lang + currency */
@media (max-width: 767px) {
  .gs-topbar-main .gs-topbar-btn {
    display: none !important;
  }

  /* Also hide the separator that sits between the buttons and dropdowns */
  .gs-topbar-right > .gs-topbar-sep:first-of-type {
    display: none !important;
  }

  .gs-topbar-inner {
    justify-content: space-between;
    min-height: 36px;
    padding: 4px 0;
    gap: 6px;
    flex-wrap: nowrap;
  }

  /* Phone: show number on mobile */
  .gs-topbar-phone-text {
    display: inline;
    font-size: 11px;
  }

  .gs-topbar-phone {
    gap: 5px;
  }

  .gs-topbar-phone-icon {
    width: 26px;
    height: 26px;
  }

  .gs-topbar-sep {
    margin: 0 2px;
  }

  .gs-topbar-toggle {
    font-size: 11px !important;
  }

  /* Currency pill — compact for mobile */
  .gs-currency-toggle {
    font-size: 11px !important;
    padding: 3px 9px 3px 7px !important;
    gap: 4px !important;
  }

  /* Shift the dropdown card left so it stays within the viewport */
  .gs-currency-menu {
    right: 0 !important;
    left: auto !important;
    transform: translateX(-30%) translateY(12px) !important;
  }
}

@media (max-width: 480px) {
  .gs-topbar-right { gap: 4px; }
  .gs-topbar-sep { display: none; }
  /* Make the currency pill slightly more compact on very small screens */
  .gs-currency-toggle {
    font-size: 11px !important;
    padding: 3px 8px 3px 6px !important;
    gap: 4px !important;
  }
  .gs-currency-icon { display: none; } /* hide icon, show label only */

  /* Shift the card further left on very narrow screens */
  .gs-currency-menu {
    right: 0 !important;
    left: auto !important;
    transform: translateX(-40%) translateY(12px) !important;
  }
}

/* Restore full layout from md up */
@media (min-width: 768px) {
  .gs-topbar-phone-text { display: inline; }
  .gs-topbar-main .gs-topbar-btn { display: inline-flex !important; }
  .gs-topbar-btn {
    padding: 4px 11px;
    border-radius: 4px;
    width: auto;
    height: auto;
    gap: 5px;
    font-size: 12px;
  }
}

/* ================================================================
   NAVBAR LOGO — MOBILE POLISH
   ================================================================ */

/* Desktop: constrained, vertically centred */
.header-logo-wrapper {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.header-logo-wrapper .logo {
  height: 60px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display: block;
  transition: opacity 0.2s;
}

.header-logo-wrapper:hover .logo {
  opacity: 0.88;
}

/* Tablet (< 1200px) */
@media (max-width: 1199px) {
  .header-logo-wrapper .logo {
    height: 56px;
    max-width: 200px;
  }
}

/* Mobile (< 768px) */
@media (max-width: 767px) {
  .header-logo-wrapper .logo {
    height: 52px;
    max-width: 180px;
  }

  .header-top .nav-left {
    gap: 10px !important;
  }

  .nav-logo-divider {
    display: none !important;
  }
}

/* Very small (< 400px) */
@media (max-width: 399px) {
  .header-logo-wrapper .logo {
    height: 46px;
    max-width: 155px;
  }

  .header-top .nav-left {
    gap: 8px !important;
  }
}


/* ================================================================
   CATEGORY PAGE — Professional Redesign (home1 theme)
   ================================================================ */

/* ── Page wrapper ── */
.cat-page-wrapper {
  background-color: #f7f7f8;
  padding: 48px 0 80px;
}
@media (max-width: 991.97px) {
  .cat-page-wrapper { padding: 0 0 60px; }
}
@media (max-width: 575.97px) {
  .cat-page-wrapper { padding: 0 0 48px; }
}

/* ================================================================
   MOBILE FILTER BAR  (sticky, visible < lg)
   ================================================================ */
.cat-mobile-filter-bar {
  background-color: #ffffff;
  border-bottom: 1px solid #ebebeb;
  position: sticky;
  top: 0;
  z-index: 120;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.cat-mobile-filter-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  gap: 12px;
}

.cat-mobile-count {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #555;
  font-size: 13px;
  font-weight: 400;
}
.cat-mobile-count strong { color: #111; font-weight: 600; }
.cat-mobile-count svg   { color: #FFA500; flex-shrink: 0; }

.cat-mobile-filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Mobile sort select */
.cat-mobile-sort-select {
  height: 36px;
  padding: 0 28px 0 10px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background-color: #fafafa;
  color: #444;
  font-size: 13px;
  font-family: "Poppins", sans-serif;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: border-color 0.2s;
}
.cat-mobile-sort-select:focus { border-color: #FFA500; }

/* Filter toggle button */
.cat-filter-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background-color: #111111;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
  white-space: nowrap;
}
.cat-filter-toggle-btn:hover { background-color: #FFA500; color: #111; }

.cat-filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background-color: #FFA500;
  color: #111;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  margin-left: 2px;
}

/* Backdrop */
.cat-filter-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(2px);
  z-index: 1040;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.cat-filter-backdrop--visible {
  display: block;
  opacity: 1;
}

/* ================================================================
   SIDEBAR  — Redesigned
   ================================================================ */

/* ── Desktop: sticky panel ── */
#catSidebar {
  position: sticky;
  top: 24px;
  align-self: flex-start;
  padding-right: 24px;
}

/* ── Mobile: off-canvas drawer ── */
@media (max-width: 991.97px) {
  #catSidebar {
    position: fixed;
    top: 0;
    left: -340px;
    width: 320px;
    max-width: 88vw;
    height: 100vh;
    z-index: 1050;
    padding-right: 0;
    overflow-y: auto;
    background-color: #f8f8f9;
    box-shadow: 6px 0 40px rgba(0,0,0,0.22);
    transition: left 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    scrollbar-width: thin;
    scrollbar-color: #FFA500 #f0f0f0;
  }
  #catSidebar::-webkit-scrollbar        { width: 4px; }
  #catSidebar::-webkit-scrollbar-track  { background: #f0f0f0; }
  #catSidebar::-webkit-scrollbar-thumb  { background: #FFA500; border-radius: 4px; }
  #catSidebar.cat-sidebar--open         { left: 0; }
}

.cat-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0;
}
@media (max-width: 991.97px) {
  .cat-sidebar { padding-bottom: 40px; }
}

/* ── Mobile drawer header ── */
.cat-sidebar-header {
  align-items: center;
  justify-content: space-between;
  padding: 0;
  flex-shrink: 0;
}

/* Dark gradient banner across the top of mobile drawer */
.cat-sidebar-header {
  background: linear-gradient(135deg, #111111 0%, #1c1c1c 100%);
  border-bottom: 3px solid #FFA500;
  padding: 18px 20px;
}

.cat-sidebar-title {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  font-family: "Saira", sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.cat-sidebar-close {
  background: rgba(255,165,0,0.1);
  border: 1.5px solid rgba(255,165,0,0.4);
  border-radius: 6px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #FFA500;
  transition: background-color 0.2s, border-color 0.2s, transform 0.15s;
}
.cat-sidebar-close:hover {
  background-color: rgba(255,165,0,0.25);
  border-color: #FFA500;
  transform: rotate(90deg);
}

/* ================================================================
   WIDGET CARDS
   ================================================================ */
.cat-widget {
  background-color: #ffffff;
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
  border: 1px solid #eaeaea;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: box-shadow 0.25s ease;
}
.cat-widget:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
@media (max-width: 991.97px) {
  .cat-widget {
    border-radius: 0;
    margin-bottom: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid #eeeeee;
    box-shadow: none;
  }
  .cat-widget:hover { box-shadow: none; }
}

/* ── Widget header — dark band with amber left-border accent ── */
.cat-widget-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px 12px;
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  color: #1a1a1a;
  font-family: "Saira", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: linear-gradient(90deg, #f9f9f9 0%, #ffffff 100%);
  border-bottom: 1px solid #eeeeee;
  border-left: 3px solid #FFA500;
  position: relative;
}

/* Remove the old standalone title-bar span — keep it for markup compat but hide */
.cat-widget-title-bar {
  display: none;
}

/* Decorative amber dot after the text */
.cat-widget-title::after {
  content: '';
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background-color: #FFA500;
  border-radius: 50%;
  opacity: 0.5;
}

.cat-widget-body {
  padding: 18px 18px 16px;
}

/* ================================================================
   CATEGORY TREE
   ================================================================ */
.cat-tree {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cat-tree-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border-radius: 8px;
  padding: 2px 4px 2px 2px;
  transition: background-color 0.18s;
}
.cat-tree-row:hover {
  background-color: #fdf7ee;
}

/* Active row highlight */
.cat-tree-item--open > .cat-tree-row,
.cat-tree-item:has(.cat-tree-link--active) > .cat-tree-row {
  background-color: #fff8ee;
}

.cat-tree-link {
  flex: 1;
  padding: 8px 4px 8px 6px;
  color: #333333;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
  line-height: 1.35;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Bullet dot before each top-level link */
.cat-tree-link::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #dddddd;
  flex-shrink: 0;
  transition: background-color 0.2s, transform 0.2s;
}
.cat-tree-link:hover::before  { background-color: #FFA500; transform: scale(1.4); }
.cat-tree-link--active::before {
  background-color: #FFA500;
  box-shadow: 0 0 0 3px rgba(255,165,0,0.2);
  transform: scale(1.3);
}

.cat-tree-link:hover  { color: #FFA500; }
.cat-tree-link--active {
  color: #FFA500 !important;
  font-weight: 700;
}

/* Expand/collapse chevron button — pill style */
.cat-tree-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid #e8e8e8;
  border-radius: 6px;
  background: #f9f9f9;
  color: #aaaaaa;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.22s;
}
.cat-tree-toggle:hover {
  border-color: #FFA500;
  color: #FFA500;
  background: rgba(255,165,0,0.08);
}
.cat-tree-toggle:not(.collapsed) {
  border-color: #FFA500;
  background: rgba(255,165,0,0.12);
  color: #FFA500;
}
.cat-tree-toggle svg              { transition: transform 0.25s ease; }
.cat-tree-toggle:not(.collapsed) svg { transform: rotate(180deg); }
.cat-tree-toggle--sm              { width: 22px; height: 22px; border-radius: 5px; }

/* Sub-category list — indented with amber left rail */
.cat-sub-tree {
  list-style: none;
  padding: 6px 0 6px 10px;
  margin: 0 0 0 14px;
  border-left: 2px solid rgba(255,165,0,0.25);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cat-sub-item > .cat-tree-row {
  border-radius: 6px;
  padding: 1px 4px 1px 2px;
}

.cat-sub-link {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 4px 7px 8px;
  color: #555555;
  font-size: 13px;
  font-weight: 400;
  text-decoration: none;
  border-radius: 6px;
  flex: 1;
  transition: color 0.2s, background-color 0.18s, padding-left 0.15s;
}

/* Small dash before sub-links */
.cat-sub-link::before {
  content: '–';
  color: #cccccc;
  font-size: 11px;
  flex-shrink: 0;
  transition: color 0.2s;
}
.cat-sub-link:hover::before    { color: #FFA500; }
.cat-sub-link--active::before  { color: #FFA500; }

.cat-sub-link:hover {
  color: #FFA500;
  background-color: #fdf7ee;
  padding-left: 12px;
}
.cat-sub-link--active {
  color: #FFA500 !important;
  font-weight: 600;
  background-color: #fff8ee;
  padding-left: 12px;
}

/* Child-category list */
.cat-child-tree {
  list-style: none;
  padding: 4px 0 4px 10px;
  margin-left: 8px;
  border-left: 1px dashed rgba(255,165,0,0.3);
}

.cat-child-link {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 6px;
  color: #888888;
  font-size: 12.5px;
  font-weight: 400;
  text-decoration: none;
  border-radius: 5px;
  transition: color 0.2s, background-color 0.18s;
}
.cat-child-link svg         { color: #cccccc; transition: color 0.2s; flex-shrink: 0; }
.cat-child-link:hover       { color: #FFA500; background-color: #fdf7ee; }
.cat-child-link:hover svg   { color: #FFA500; }
.cat-child-link--active     { color: #FFA500 !important; font-weight: 600; background-color: #fff8ee; }
.cat-child-link--active svg { color: #FFA500; }

/* ================================================================
   PRICE RANGE WIDGET
   ================================================================ */

/* Override jQuery UI slider to amber theme */
.cat-widget-body .ui-widget.ui-widget-content {
  border: none;
  height: 6px;
  border-radius: 3px;
  background: #eeeeee;
  margin: 0 8px;
}

.cat-widget-body .ui-slider .ui-slider-range {
  background: linear-gradient(90deg, #FFA500, #ffbe45);
  border-radius: 3px;
}

.cat-widget-body .ui-slider-handle {
  width: 18px !important;
  height: 18px !important;
  top: -7px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 2.5px solid #FFA500 !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(255,165,0,0.35) !important;
  transition: transform 0.15s, box-shadow 0.15s !important;
  outline: none !important;
}
.cat-widget-body .ui-slider-handle:hover,
.cat-widget-body .ui-slider-handle.ui-state-active {
  transform: scale(1.2) !important;
  box-shadow: 0 3px 12px rgba(255,165,0,0.5) !important;
}

/* Price output display */
.cat-price-output {
  display: block;
  width: 100%;
  margin-top: 18px;
  border: 1.5px solid #eeeeee;
  border-radius: 8px;
  background: linear-gradient(90deg, #fffbf2, #fffef8);
  color: #333;
  font-size: 13.5px;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
  padding: 9px 14px;
  text-align: center;
  letter-spacing: 0.5px;
  transition: border-color 0.2s;
}

/* Action buttons */
.cat-price-btns {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.cat-apply-btn,
.cat-clear-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.22s;
  line-height: 1;
}

.cat-apply-btn {
  background: linear-gradient(135deg, #FFA500 0%, #ffbe45 100%);
  color: #111111;
  border: none;
  box-shadow: 0 3px 10px rgba(255,165,0,0.3);
}
.cat-apply-btn:hover {
  background: linear-gradient(135deg, #e6940a 0%, #FFA500 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(255,165,0,0.4);
  color: #111111;
}

.cat-clear-btn {
  background-color: #f5f5f5;
  color: #666666;
  border: 1.5px solid #e0e0e0;
}
.cat-clear-btn:hover {
  background-color: #eaeaea;
  border-color: #cccccc;
  color: #333333;
  transform: translateY(-1px);
}

/* ================================================================
   ATTRIBUTE CHECKBOX FILTERS
   ================================================================ */
.cat-check-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cat-check-item {
  border-radius: 8px;
  transition: background-color 0.18s;
}
.cat-check-item:hover {
  background-color: #fdf7ee;
}

.cat-check-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  margin: 0;
  padding: 8px 8px;
  border-radius: 8px;
  user-select: none;
  width: 100%;
}

/* Hide native checkbox */
.cat-check-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Custom checkbox — rounded square with glow on check */
.cat-check-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 2px solid #dddddd;
  border-radius: 5px;
  background-color: #ffffff;
  flex-shrink: 0;
  transition: all 0.2s;
}
.cat-check-box svg { display: none; }

.cat-check-input:checked ~ .cat-check-box {
  background: linear-gradient(135deg, #FFA500, #ffbe45);
  border-color: #FFA500;
  box-shadow: 0 2px 8px rgba(255,165,0,0.4);
}
.cat-check-input:checked ~ .cat-check-box svg { display: block; }

.cat-check-text {
  color: #444444;
  font-size: 13px;
  font-weight: 400;
  flex: 1;
  transition: color 0.18s;
}

.cat-check-label:hover .cat-check-box  { border-color: #FFA500; }
.cat-check-label:hover .cat-check-text { color: #111111; font-weight: 500; }

/* Checked row text */
.cat-check-input:checked ~ .cat-check-text {
  color: #111111;
  font-weight: 600;
}

/* ================================================================
   RECENT PRODUCTS WIDGET
   ================================================================ */
.cat-recent-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cat-recent-item {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  padding: 10px 8px;
  border-radius: 10px;
  border-bottom: 1px solid #f5f5f5;
  transition: background-color 0.2s, border-color 0.2s;
}
.cat-recent-item:last-child { border-bottom: none; }
.cat-recent-item:hover { background-color: #fdf7ee; border-color: transparent; }

/* Image — with amber ring on hover */
.cat-recent-img {
  width: 62px;
  height: 62px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #eeeeee;
  background-color: #fafafa;
  transition: border-color 0.2s;
}
.cat-recent-item:hover .cat-recent-img { border-color: rgba(255,165,0,0.5); }

.cat-recent-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.cat-recent-item:hover .cat-recent-img img { transform: scale(1.1); }

.cat-recent-info { flex: 1; min-width: 0; }

.cat-recent-name {
  color: #222222;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: "Poppins", sans-serif;
  transition: color 0.2s;
}
.cat-recent-item:hover .cat-recent-name { color: #FFA500; }

.cat-recent-prices {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.cat-recent-price {
  color: #111111;
  font-size: 13.5px;
  font-weight: 700;
}
.cat-recent-old {
  color: #bbbbbb;
  font-size: 11px;
  text-decoration: line-through;
}

.cat-recent-rating {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #999999;
  font-size: 11px;
}

/* ================================================================
   PRODUCT AREA
   ================================================================ */
.cat-product-area {
  padding-left: 0;
}
@media (min-width: 992px) {
  .cat-product-area { padding-left: 20px; }
}

/* ── Topbar ── */
.cat-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: linear-gradient(135deg, #ffffff 0%, #fdfbf7 100%);
  border-radius: 12px;
  border: 1px solid #efefef;
  border-left: 3px solid #FFA500;
  padding: 12px 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  position: relative;
  overflow: hidden;
}

/* Subtle gold shimmer strip at top */
.cat-topbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #FFA500, rgba(255,165,0,0.2), transparent);
  border-radius: 12px 12px 0 0;
}

.cat-topbar-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cat-topbar-count {
  color: #666;
  font-size: 13px;
  margin: 0;
  line-height: 1.4;
}
.cat-topbar-count strong { color: #111; font-weight: 700; }

.cat-topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Thin vertical separator between sort and view toggles */
.cat-topbar-right > .cat-topbar-sort + .cat-view-toggles {
  padding-left: 14px;
  border-left: 1px solid #ebebeb;
}

/* Sort */
.cat-topbar-sort {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cat-sort-label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #555;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  white-space: nowrap;
  margin: 0;
}

.cat-sort-label::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 14px;
  background-color: #FFA500;
  border-radius: 2px;
}

/* ── Sort select: native <select> wrapped for custom styling ── */
.cat-sort-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Hide browser default arrow */
.cat-sort-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  display: block;
  height: 40px;
  line-height: 1;
  font-size: 13px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: #222222;
  background-color: #f9f9f9;
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  padding: 0 36px 0 14px;
  min-width: 175px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
  /* Vertically center text */
  vertical-align: middle;
}

.cat-sort-select:hover {
  border-color: #FFA500;
  background-color: #fffbf2;
}

.cat-sort-select:focus {
  border-color: #FFA500;
  background-color: #fffbf2;
  box-shadow: 0 0 0 3px rgba(255,165,0,0.14);
}

/* Custom caret icon */
.cat-sort-caret {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #999999;
  transition: color 0.2s, transform 0.2s;
}

.cat-sort-wrap:hover .cat-sort-caret,
.cat-sort-wrap:focus-within .cat-sort-caret {
  color: #FFA500;
}

/* Rotate caret on focus (open state hint) */
.cat-sort-select:focus ~ .cat-sort-caret {
  transform: translateY(-50%) rotate(180deg);
  color: #FFA500;
}

/* View toggle buttons */
.cat-view-toggles {
  display: flex;
  gap: 4px;
  background: #f5f5f5;
  border: 1px solid #ebebeb;
  border-radius: 8px;
  padding: 3px;
}

.cat-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 6px;
  background-color: transparent;
  color: #aaa;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.cat-view-btn:hover {
  background-color: rgba(255,165,0,0.1);
  color: #FFA500;
}
.cat-view-btn.active {
  background-color: #FFA500;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(255,165,0,0.35);
}

/* ── Pagination wrapper ── */
.cat-pagination-wrapper {
  margin-top: 32px;
  display: flex;
  justify-content: center;
}

/* ── Empty state ── */
.cat-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 72px 24px;
  background-color: #ffffff;
  border-radius: 12px;
  border: 1px solid #efefef;
  text-align: center;
  gap: 12px;
}

.cat-empty-icon {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background-color: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.cat-empty-title {
  color: #222222;
  font-size: 20px;
  font-weight: 700;
  font-family: "Saira", sans-serif;
  margin: 0;
}

.cat-empty-desc {
  color: #888888;
  font-size: 14px;
  margin: 0;
  max-width: 340px;
}

.cat-empty-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 11px 24px;
  background-color: #FFA500;
  color: #111111;
  font-size: 14px;
  font-weight: 700;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.2s, transform 0.15s;
}
.cat-empty-btn:hover {
  background-color: #e6940a;
  transform: translateY(-1px);
  color: #111111;
}

/* ================================================================
   PRODUCT CARDS — grid responsive refinements on category page
   ================================================================ */

/* Image frame stays square — the card shell (border-radius + overflow)
   is what produces the rounded corners at every breakpoint */
.cat-product-area .row .single-product .img-wrapper {
  overflow: hidden;
}

/* Ensure product cards fill their column cleanly */
.cat-product-area .single-product {
  height: 100%;
}

/* ================================================================
   RESPONSIVE — TABLET & MOBILE OVERRIDES
   ================================================================ */

/* Topbar: stack on small tablets */
@media (max-width: 767.97px) {
  .cat-topbar {
    display: none; /* replaced by mobile filter bar */
  }
  .cat-product-area {
    padding-left: 0;
    padding-top: 14px;
  }
}

@media (max-width: 575.97px) {
  /* Tighter widget body on very small screens */
  .cat-widget-body  { padding: 14px 14px; }
  .cat-widget-title { padding: 11px 14px 10px; font-size: 11px; }

  /* Recent product image */
  .cat-recent-img   { width: 50px; height: 50px; }

  /* Mobile filter bar tighter */
  .cat-mobile-filter-inner { padding: 8px 0; }
  .cat-filter-toggle-btn   { padding: 7px 10px; font-size: 12px; }
  .cat-mobile-sort-select  { font-size: 12px; height: 34px; }
}

/* Very narrow phones */
@media (max-width: 360px) {
  .cat-mobile-count { display: none; }
  .cat-mobile-filter-actions { margin-left: auto; }
}


/* ================================================================
   FOOTER — Mobile Polish & Edge Margin Fixes
   ================================================================ */

/* ── Base: ensure the container always has breathing room ── */
@media (max-width: 767.98px) {

  /* Restore side padding stripped by Bootstrap's container + style.css padding:0 override */
  .gs-footer-section .footer-main-body .container,
  .gs-footer-section .gs-footer-bottom .container,
  .gs-footer-section .newslatter .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Re-apply padding to each column cell that style.css zeroed out */
  .gs-footer-section .footer-row > [class*="col-"] {
    padding: 0 0 !important; /* grid gap handles spacing between cells */
  }

  /* Outer grid padding so content never touches the viewport edge */
  .gs-footer-section .footer-row {
    gap: 28px 20px !important;
  }

  /* ── Newsletter: better padding on small screens ── */
  .gs-footer-section .newslatter .newslatter-area {
    margin: 24px 0 !important;
  }

  /* Badge + heading + sub properly centred */
  .gs-footer-section .newslatter .newslatter-content {
    text-align: center;
  }

  .gs-footer-section .newslatter .newslatter-content h2 {
    font-size: 22px !important;
    line-height: 1.25;
  }

  .gs-footer-section .newslatter-sub {
    font-size: 13px !important;
    margin-bottom: 0;
  }

  /* ── Brand column improvements ── */
  .gs-footer-section .footer-row .left-info .logo {
    width: 130px !important;
    margin-bottom: 16px !important;
  }

  .footer-brand-desc {
    font-size: 13px !important;
    line-height: 1.65 !important;
    color: rgba(255,255,255,0.7) !important;
    margin-bottom: 20px !important;
  }

  /* Contact items: ensure icon + text don't overflow narrow column */
  .footer-contact-list {
    gap: 10px !important;
  }

  .footer-contact-item {
    font-size: 12.5px !important;
    gap: 9px !important;
    flex-wrap: nowrap;
    overflow: hidden;
  }

  .footer-contact-item span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .footer-contact-icon {
    width: 30px !important;
    height: 30px !important;
    flex-shrink: 0 !important;
  }

  /* Social icons */
  .social-links {
    margin-top: 20px !important;
    gap: 8px !important;
    flex-wrap: wrap;
  }

  .social-link-item {
    width: 36px !important;
    height: 36px !important;
    font-size: 13px !important;
  }

  /* ── Section headings ── */
  .footer-heading {
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 18px !important;
    padding-bottom: 10px !important;
  }

  /* ── Link lists ── */
  .gs-footer-section .footer-row ul.footer-category-links > li a {
    font-size: 13px !important;
    padding: 6px 0 !important;
    gap: 6px !important;
  }

  .footer-link-arrow {
    flex-shrink: 0;
  }

  /* ── Recent posts compact but readable ── */
  .recent-post {
    gap: 10px !important;
    margin-bottom: 14px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  }

  .recent-post:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .recent-post-img-wrap {
    width: 56px !important;
    height: 52px !important;
    border-radius: 6px !important;
    overflow: hidden;
    flex-shrink: 0 !important;
  }

  .recent-post-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .recent-post-content {
    flex: 1;
    min-width: 0;
  }

  .gs-sm-recent-post-wrapper .recent-post .post-title {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    margin-bottom: 5px !important;
    /* clamp to 2 lines */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
  }

  .gs-sm-recent-post-wrapper .recent-post .post-date {
    font-size: 11px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  /* ── Bottom bar ── */
  .gs-footer-section .gs-footer-bottom .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .gs-footer-section .gs-footer-bottom .row {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    text-align: center;
  }

  .gs-footer-section .gs-footer-bottom .footer-bottom-content {
    text-align: center !important;
  }

  .gs-footer-section .gs-footer-bottom .footer-bottom-content p {
    font-size: 12px !important;
    line-height: 1.6 !important;
  }

  .footer-bottom-links {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 6px 14px !important;
  }

  .footer-bottom-links a {
    font-size: 12px !important;
  }
}

/* ── Very small phones (< 480px): single column with more breathing room ── */
@media (max-width: 479.98px) {

  .gs-footer-section .footer-main-body .container,
  .gs-footer-section .gs-footer-bottom .container,
  .gs-footer-section .newslatter .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .gs-footer-section .footer-row {
    gap: 24px !important;
  }

  /* In single-col mode each section gets a subtle top divider */
  .gs-footer-section .footer-row .col-lg-3:not(.left-info) {
    border-top: 1px solid rgba(255,255,255,0.07);
    padding-top: 4px !important;
  }

  /* 2-col link grid stays but with a bit of padding */
  .gs-footer-section .footer-row ul.footer-category-links {
    gap: 0 16px !important;
  }

  .gs-footer-section .footer-row ul.footer-category-links > li a {
    font-size: 12.5px !important;
    padding: 5px 0 !important;
  }

  /* Footer-main-body padding tighter on tiny screens */
  .footer-main-body {
    padding-top: 36px !important;
    padding-bottom: 28px !important;
  }

  /* Newsletter form: stack input + button */
  .newsletter-input-wrap {
    flex-wrap: wrap !important;
    padding: 10px 12px !important;
    gap: 8px;
    border-radius: 10px !important;
  }

  .newsletter-btn {
    width: 100% !important;
    border-radius: 7px !important;
    margin-top: 4px !important;
    padding: 10px !important;
    font-size: 14px !important;
  }
}

/* ── Tablet range (576 – 767px): 2-col grid, generous gutters ── */
@media (min-width: 576px) and (max-width: 767.98px) {

  .gs-footer-section .footer-main-body .container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .gs-footer-section .footer-row {
    gap: 32px 24px !important;
  }

  /* Recent post image slightly bigger */
  .recent-post-img-wrap {
    width: 64px !important;
    height: 58px !important;
  }
}


/* ================================================================
   NEWSLETTER SECTION — Professional Redesign
   ================================================================ */

/* ── Full wrapper: dark card with amber glow ── */
.gs-footer-section .newslatter {
  background: linear-gradient(135deg, #0e0e0e 0%, #111111 40%, #14100a 100%) !important;
  position: relative;
  overflow: hidden;
  margin: 20px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 165, 0, 0.15);
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255,165,0,0.08);
}

/* Remove old blob decorators from style.css */
.gs-footer-section .newslatter::before,
.gs-footer-section .newslatter::after {
  display: none !important;
}

/* Amber top-edge accent bar */
.gs-footer-section .newslatter::before {
  display: block !important;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #FFA500 30%, #FFA500 70%, transparent 100%);
  opacity: 0.8;
  pointer-events: none;
}

/* Subtle radial glow bottom-right */
.gs-footer-section .newslatter::after {
  display: block !important;
  content: '';
  position: absolute;
  bottom: -80px;
  right: -60px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,165,0,0.06) 0%, transparent 70%);
  pointer-events: none;
}

/* Spacing inside */
.gs-footer-section .newslatter .newslatter-area {
  margin: 44px 0 !important;
}

/* ── Left block: eyebrow ── */
.nl-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.nl-eyebrow__dot {
  display: inline-block;
  width: 20px;
  height: 2px;
  background: #FFA500;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Badge pill */
.gs-footer-section .newslatter-badge {
  display: inline-flex !important;
  align-items: center;
  background: rgba(255, 165, 0, 0.12) !important;
  color: #FFA500 !important;
  border: 1px solid rgba(255, 165, 0, 0.3) !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 3px 12px !important;
  margin-bottom: 0 !important;
}

/* Main heading */
.gs-footer-section .newslatter .newslatter-content h2 {
  color: #ffffff !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.3px;
  margin-bottom: 10px !important;
}

.nl-heading-accent {
  color: #FFA500;
  position: relative;
}

/* Sub description */
.gs-footer-section .newslatter .newslatter-sub {
  color: #888888 !important;
  font-size: 14px !important;
  line-height: 1.6;
  margin-bottom: 20px !important;
  max-width: 440px;
}

/* ── Trust row: checkmarks ── */
.nl-trust-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.nl-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #999999;
  font-size: 12px;
  font-weight: 500;
}

.nl-trust-item svg {
  color: #FFA500;
  flex-shrink: 0;
}

/* ── Right block: form card — stretch to fill column ── */
.gs-footer-section .newslatter .newslatter-form {
  width: 100% !important;
  justify-content: stretch !important;
}

.nl-form-card {
  width: 100% !important;
}

.nl-form-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 28px 24px 22px;
  backdrop-filter: blur(4px);
}

.nl-form-label {
  color: #aaaaaa;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* Input wrapper */
.newsletter-input-wrap {
  position: relative;
  display: flex !important;
  align-items: center;
  background: #1a1a1a !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 10px !important;
  padding: 6px 6px 6px 14px !important;
  gap: 8px;
  max-width: 100% !important;
  transition: border-color 0.2s !important;
}

.newsletter-input-wrap:focus-within {
  border-color: rgba(255, 165, 0, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(255, 165, 0, 0.06) !important;
}

.newsletter-mail-icon {
  color: #555555 !important;
  flex-shrink: 0;
  margin-right: 0 !important;
}

/* Input */
.gs-footer-section .newslatter input.news-latter-input {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #dddddd !important;
  font-size: 14px !important;
  padding: 8px 0 !important;
  min-width: 0;
}

.gs-footer-section .newslatter input.news-latter-input::placeholder { color: #555 !important; font-size: 14px !important; }

/* Subscribe button */
.newsletter-btn {
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #FFA500, #e6940a) !important;
  color: #111111 !important;
  border: none !important;
  border-radius: 7px !important;
  padding: 10px 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s !important;
}

.newsletter-btn:hover {
  background: linear-gradient(135deg, #FFB733, #FFA500) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255,165,0,0.4) !important;
}

.newsletter-btn svg {
  transition: transform 0.2s;
}

.newsletter-btn:hover svg {
  transform: translateX(3px);
}

/* Privacy note below form */
.nl-privacy-note {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #555555;
  font-size: 11px;
  margin-top: 12px;
  margin-bottom: 0;
}

.nl-privacy-note svg {
  flex-shrink: 0;
  color: #555555;
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .gs-footer-section .newslatter {
    margin: 16px 12px;
    border-radius: 16px;
  }
  .gs-footer-section .newslatter .newslatter-area {
    margin: 36px 0 !important;
  }
  .gs-footer-section .newslatter .newslatter-content h2 {
    font-size: 26px !important;
  }
}

@media (max-width: 767px) {
  .gs-footer-section .newslatter {
    margin: 12px 10px;
    border-radius: 14px;
  }
  .gs-footer-section .newslatter .newslatter-area {
    margin: 28px 0 !important;
  }
  .gs-footer-section .newslatter .newslatter-content {
    text-align: center !important;
  }
  .gs-footer-section .newslatter .newslatter-content h2 {
    font-size: 24px !important;
  }
  .gs-footer-section .newslatter .newslatter-sub {
    max-width: 100% !important;
    font-size: 13px !important;
  }
  .nl-eyebrow,
  .nl-trust-row {
    justify-content: center;
  }
  .nl-form-card {
    padding: 22px 18px 18px;
  }
  .gs-footer-section .newslatter .newslatter-form {
    justify-content: center !important;
    padding-bottom: 0 !important;
  }
}

@media (max-width: 575px) {
  /* ── Outer newsletter banner: zero side margin so it bleeds edge-to-edge ── */
  .gs-footer-section .newslatter {
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 36px 0 28px !important;
  }

  /* Restore container horizontal padding so text isn't flush against screen edge */
  .gs-footer-section .newslatter .container {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .gs-footer-section .newslatter .newslatter-area {
    margin: 16px 0 !important;
    padding: 0 !important;
  }

  .gs-footer-section .newslatter .newslatter-content h2 {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }

  .nl-trust-row {
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .nl-trust-item {
    font-size: 11px;
  }

  /* ── Email card: stretch to full container width ── */
  .gs-footer-section .newslatter .newslatter-form {
    width: 100% !important;
    justify-content: stretch !important;
    padding-bottom: 0 !important;
  }

  .nl-form-card {
    width: 100% !important;
    padding: 22px 18px 18px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 165, 0, 0.18) !important;
    background: rgba(255, 255, 255, 0.04) !important;
  }

  .nl-form-label {
    font-size: 11px !important;
    letter-spacing: 0.8px !important;
  }

  /* Stack input + button vertically */
  .newsletter-input-wrap {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 12px !important;
    gap: 10px !important;
    border-radius: 10px !important;
  }

  .newsletter-mail-icon {
    display: none !important;
  }

  .gs-footer-section .newslatter input.news-latter-input {
    width: 100% !important;
    padding: 4px 0 !important;
    font-size: 15px !important;
  }

  .newsletter-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 13px 16px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    letter-spacing: 0.4px !important;
  }

  .nl-privacy-note {
    justify-content: center;
    font-size: 11px;
    margin-top: 14px;
  }
}

/* ================================================================
   CONTACT PAGE — Professional Redesign  (ctp-*)
   ================================================================ */

/* ── Page wrapper ── */
.ctp-wrapper {
  background-color: #f7f7f8;
  padding: 72px 0 96px;
}
@media (max-width: 991.97px) { .ctp-wrapper { padding: 52px 0 72px; } }
@media (max-width: 575.97px) { .ctp-wrapper { padding: 40px 0 56px; } }

/* ── Section header ── */
.ctp-section-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 56px;
}
@media (max-width: 767.97px) { .ctp-section-head { margin-bottom: 40px; } }

.ctp-section-head .offer-label-row { justify-content: center; }

.ctp-heading {
  font-family: "Saira", sans-serif;
  font-size: 40px;
  font-weight: 700;
  color: #111111;
  line-height: 1.15;
  margin: 10px 0 14px;
}
@media (max-width: 767.97px) { .ctp-heading { font-size: 28px; } }
@media (max-width: 479.97px) { .ctp-heading { font-size: 24px; } }

.ctp-heading-accent { color: #FFA500; }

.ctp-subheading {
  color: #666666;
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
}
@media (max-width: 575.97px) { .ctp-subheading { font-size: 13.5px; } }

/* ── Main two-column row ── */
.ctp-main-row {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 48px rgba(0,0,0,0.10);
}

/* ================================================================
   LEFT INFO PANEL
   ================================================================ */
.ctp-info-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #111111;
  position: relative;
  overflow: hidden;
}

/* ── Dark top band ── */
.ctp-info-top {
  position: relative;
  padding: 40px 36px 32px;
  background: linear-gradient(145deg, #1a1a1a 0%, #111111 100%);
  border-bottom: 1px solid rgba(255,165,0,0.15);
  overflow: hidden;
  z-index: 1;
}
@media (max-width: 575.97px) { .ctp-info-top { padding: 32px 24px 26px; } }

.ctp-info-title {
  font-family: "Saira", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 10px;
  position: relative;
  z-index: 2;
}

.ctp-info-desc {
  color: rgba(255,255,255,0.6);
  font-size: 13.5px;
  line-height: 1.65;
  margin: 0;
  position: relative;
  z-index: 2;
  max-width: 280px;
}

/* Decorative background circles */
.ctp-deco-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,165,0,0.08);
  pointer-events: none;
}
.ctp-deco-circle--lg {
  width: 200px;
  height: 200px;
  bottom: -80px;
  right: -60px;
}
.ctp-deco-circle--sm {
  width: 100px;
  height: 100px;
  bottom: -20px;
  right: 80px;
  background: rgba(255,165,0,0.05);
}

/* ── Info cards ── */
.ctp-info-cards {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px 0;
  flex: 1;
}

.ctp-info-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 36px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background-color 0.2s;
}
.ctp-info-card:last-child { border-bottom: none; }
.ctp-info-card:hover { background-color: rgba(255,165,0,0.05); }
@media (max-width: 575.97px) { .ctp-info-card { padding: 16px 24px; gap: 14px; } }

/* Icon badge */
.ctp-info-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.ctp-info-card:hover .ctp-info-card-icon { transform: scale(1.08); }

.ctp-icon--address { background: rgba(255,165,0,0.15); color: #FFA500; }
.ctp-icon--phone   { background: rgba(52,211,153,0.15); color: #34d399; }
.ctp-icon--email   { background: rgba(99,102,241,0.15); color: #818cf8; }
.ctp-icon--fax     { background: rgba(251,113,133,0.15); color: #fb7185; }

.ctp-info-card-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ctp-info-card-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-family: "Saira", sans-serif;
}

.ctp-info-card-value {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  line-height: 1.45;
  word-break: break-word;
  font-family: "Poppins", sans-serif;
}

.ctp-info-card-value--link {
  text-decoration: none;
  transition: color 0.2s;
}
.ctp-info-card-value--link:hover { color: #FFA500; }

/* ── Social row ── */
.ctp-info-socials {
  padding: 22px 36px 28px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
@media (max-width: 575.97px) { .ctp-info-socials { padding: 18px 24px 24px; } }

.ctp-info-socials-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 12px;
  font-family: "Saira", sans-serif;
}

.ctp-social-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ctp-social-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.22s;
}
.ctp-social-btn:hover {
  background: #FFA500;
  border-color: #FFA500;
  color: #111111;
  transform: translateY(-2px);
}

/* ================================================================
   RIGHT FORM PANEL
   ================================================================ */
.ctp-form-panel {
  background-color: #ffffff;
  padding: 48px 52px;
  height: 100%;
}
@media (max-width: 1199.97px) { .ctp-form-panel { padding: 44px 40px; } }
@media (max-width: 767.97px)  { .ctp-form-panel { padding: 36px 28px; } }
@media (max-width: 479.97px)  { .ctp-form-panel { padding: 28px 20px; } }

.ctp-form-header { margin-bottom: 32px; }

.ctp-form-title {
  font-family: "Saira", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #111111;
  margin: 0 0 6px;
}

.ctp-form-subtitle {
  color: #888888;
  font-size: 13px;
  margin: 0;
}

/* ── Individual field ── */
.ctp-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* Label */
.ctp-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #333333;
  font-family: "Poppins", sans-serif;
  margin: 0;
  cursor: pointer;
  user-select: none;
}
.ctp-label svg { color: #FFA500; flex-shrink: 0; }

.ctp-required {
  color: #ef4444;
  font-size: 13px;
  line-height: 1;
}

/* Input / textarea */
.ctp-input {
  width: 100%;
  height: 50px;
  padding: 0 18px;
  border: 1.5px solid #e8e8e8;
  border-radius: 10px;
  background-color: #fafafa;
  color: #222222;
  font-size: 14px;
  font-family: "Poppins", sans-serif;
  outline: none;
  transition: border-color 0.22s, background-color 0.22s, box-shadow 0.22s;
  -webkit-appearance: none;
}
.ctp-input::placeholder { color: #aaaaaa; font-size: 13.5px; }

.ctp-input:hover { border-color: #d0d0d0; background-color: #ffffff; }

.ctp-input:focus {
  border-color: #FFA500;
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(255,165,0,0.12);
}

.ctp-input--error {
  border-color: #ef4444 !important;
  background-color: #fff8f8 !important;
}
.ctp-input--error:focus {
  box-shadow: 0 0 0 3px rgba(239,68,68,0.1) !important;
}

/* Focused field wrapper glow */
.ctp-field--focused .ctp-label { color: #FFA500; }

/* Error message */
.ctp-error-msg {
  display: block;
  color: #ef4444;
  font-size: 12px;
  font-weight: 500;
  margin-top: 2px;
}

/* Textarea */
.ctp-textarea {
  height: 150px !important;
  padding: 14px 18px !important;
  resize: vertical;
  line-height: 1.6;
}

.ctp-textarea-wrap {
  position: relative;
}

.ctp-char-count {
  position: absolute;
  bottom: 10px;
  right: 14px;
  font-size: 11px;
  color: #aaaaaa;
  pointer-events: none;
  font-family: "Poppins", sans-serif;
}

/* ── Subject chips ── */
.ctp-subject-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.ctp-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid #e0e0e0;
  background-color: #f5f5f5;
  color: #666666;
  font-size: 12.5px;
  font-weight: 500;
  font-family: "Poppins", sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1;
  white-space: nowrap;
}
.ctp-chip:hover {
  border-color: #FFA500;
  color: #FFA500;
  background-color: rgba(255,165,0,0.06);
}
.ctp-chip--active {
  background-color: #FFA500;
  border-color: #FFA500;
  color: #111111;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(255,165,0,0.3);
}

/* ── Submit button ── */
.ctp-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 28px;
  background: linear-gradient(135deg, #FFA500 0%, #ffbe45 100%);
  color: #111111;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
  cursor: pointer;
  transition: all 0.25s;
  box-shadow: 0 4px 18px rgba(255,165,0,0.35);
  letter-spacing: 0.3px;
}
.ctp-submit-btn:hover {
  background: linear-gradient(135deg, #e6940a 0%, #FFA500 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(255,165,0,0.45);
  color: #111111;
}
.ctp-submit-btn:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(255,165,0,0.3);
}

.ctp-submit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: rgba(0,0,0,0.1);
  border-radius: 7px;
  flex-shrink: 0;
  transition: background-color 0.2s;
}
.ctp-submit-btn:hover .ctp-submit-icon { background-color: rgba(0,0,0,0.15); }

/* ================================================================
   RESPONSIVE
   ================================================================ */

/* Stack info panel above form on mobile */
@media (max-width: 991.97px) {
  .ctp-main-row { border-radius: 14px; }

  .ctp-info-panel {
    /* On mobile show as a compact horizontal strip */
    flex-direction: column;
  }

  .ctp-info-top { padding: 28px 24px 22px; }

  .ctp-info-top .ctp-info-desc { max-width: 100%; }

  .ctp-info-cards {
    /* Switch to 2-col grid on tablet */
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0;
  }

  .ctp-info-card {
    padding: 18px 20px;
    border-right: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  .ctp-info-card:nth-child(even) { border-right: none; }

  .ctp-info-socials { padding: 16px 20px 20px; }
}

@media (max-width: 575.97px) {
  /* Single column cards on small phones */
  .ctp-info-cards {
    grid-template-columns: 1fr;
  }
  .ctp-info-card { border-right: none !important; }

  /* Chip row scrollable on very narrow */
  .ctp-subject-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .ctp-subject-chips::-webkit-scrollbar { height: 3px; }
  .ctp-subject-chips::-webkit-scrollbar-thumb { background: #FFA500; border-radius: 3px; }
}

@media (max-width: 360px) {
  .ctp-form-panel { padding: 24px 16px; }
  .ctp-heading     { font-size: 22px; }
}


/* ================================================================
   SERVICES PAGE  (.svp-* namespace)
   ================================================================ */

/* ── Intro strip ──────────────────────────────────────────────── */
.svp-intro-strip {
  background: linear-gradient(135deg, #111111 0%, #1a1a1a 60%, #1f1a0e 100%);
  border-top: 3px solid #FFA500;
  border-bottom: 3px solid #FFA500;
  padding: 72px 0;
}
@media (max-width: 991.97px) { .svp-intro-strip { padding: 48px 0; } }

.svp-intro-heading {
  font-family: "Saira", sans-serif;
  font-size: 42px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  margin: 12px 0 16px;
}
@media (max-width: 1199.97px) { .svp-intro-heading { font-size: 32px; } }
@media (max-width: 767.98px)  { .svp-intro-heading { font-size: 26px; } }

.svp-accent { color: #FFA500; }

.svp-intro-desc {
  color: #aaaaaa;
  font-size: 15px;
  line-height: 1.75;
  max-width: 520px;
  margin-bottom: 24px;
}

.svp-intro-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.svp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,165,0,.12);
  color: #FFA500;
  border: 1px solid rgba(255,165,0,.3);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .4px;
}

.svp-intro-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.svp-stat-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,165,0,.2);
  border-radius: 12px;
  padding: 24px 20px;
  text-align: center;
  transition: background .3s, border-color .3s, transform .3s;
}
.svp-stat-card:hover {
  background: rgba(255,165,0,.08);
  border-color: #FFA500;
  transform: translateY(-4px);
}

.svp-stat-num {
  display: block;
  font-family: "Saira", sans-serif;
  font-size: 44px;
  font-weight: 800;
  color: #FFA500;
  line-height: 1;
}
@media (max-width: 1199.97px) { .svp-stat-num { font-size: 34px; } }

.svp-stat-plus { font-size: 26px; font-weight: 700; }

.svp-stat-label {
  display: block;
  margin-top: 6px;
  color: #cccccc;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .6px;
}

/* ── Section wrapper ──────────────────────────────────────────── */
.svp-service-section {
  padding: 90px 0;
  background: #ffffff;
}
@media (max-width: 767.98px) { .svp-service-section { padding: 60px 0; } }

.svp-service-section.svp-section--alt {
  background: #f7f8fa;
}

.svp-section-head {
  max-width: 640px;
  margin-bottom: 48px;
}

.svp-section-title {
  font-family: "Saira", sans-serif;
  font-size: 40px;
  font-weight: 700;
  color: #111111;
  line-height: 1.2;
  margin: 10px 0 14px;
}
@media (max-width: 1199.97px) { .svp-section-title { font-size: 30px; } }
@media (max-width: 767.98px)  { .svp-section-title { font-size: 24px; } }

.svp-section-desc {
  color: #555555;
  font-size: 15px;
  line-height: 1.75;
}

/* ── Service cards (networking) ──────────────────────────────── */
.svp-service-card {
  background: #ffffff;
  border: 1px solid #eeeeee;
  border-radius: 16px;
  padding: 32px 28px 28px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow .3s, transform .3s, border-color .3s;
  position: relative;
  overflow: hidden;
}
.svp-service-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #FFA500, #ff4c3b);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.svp-service-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,.10);
  transform: translateY(-6px);
  border-color: transparent;
}
.svp-service-card:hover::before { transform: scaleX(1); }

.svp-card-icon-wrap {
  width: 68px;
  height: 68px;
  border-radius: 16px;
  background: linear-gradient(135deg, #fff8ec, #fff3d4);
  border: 1px solid rgba(255,165,0,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFA500;
  margin-bottom: 20px;
  flex-shrink: 0;
  transition: background .3s, color .3s;
}
.svp-service-card:hover .svp-card-icon-wrap {
  background: linear-gradient(135deg, #FFA500, #e08e00);
  color: #ffffff;
  border-color: transparent;
}

.svp-icon--amber { background: linear-gradient(135deg, #fff8ec, #fff3d4); border: 1px solid rgba(255,165,0,.25); }

.svp-card-title {
  font-family: "Saira", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #111111;
  margin-bottom: 12px;
}

.svp-card-desc {
  color: #666666;
  font-size: 14px;
  line-height: 1.75;
  flex-grow: 1;
  margin-bottom: 16px;
}

.svp-card-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.svp-card-features li {
  font-size: 13px;
  color: #444444;
  padding-left: 18px;
  position: relative;
}
.svp-card-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FFA500;
}

.svp-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #FFA500;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  text-decoration: none;
  margin-top: auto;
  transition: gap .2s, color .2s;
}
.svp-card-cta:hover { color: #e08e00; gap: 10px; }

/* ── Why strip ────────────────────────────────────────────────── */
.svp-why-strip {
  background: linear-gradient(135deg, #111111 0%, #1c1606 100%);
  border-top: 1px solid rgba(255,165,0,.2);
  border-bottom: 1px solid rgba(255,165,0,.2);
  padding: 48px 0;
}

.svp-why-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.svp-why-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255,165,0,.12);
  border: 1px solid rgba(255,165,0,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFA500;
  transition: background .3s, transform .3s;
}
.svp-why-item:hover .svp-why-icon {
  background: #FFA500;
  color: #111111;
  transform: scale(1.08);
}

.svp-why-label {
  color: #dddddd;
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ── CCTV section layout ─────────────────────────────────────── */
.svp-cctv-row { border-radius: 20px; overflow: hidden; }

.svp-cctv-panel {
  background: linear-gradient(160deg, #111111 0%, #1e1a0a 100%);
  height: 100%;
  padding: 0;
  display: flex;
  align-items: stretch;
}
.svp-cctv-panel-inner {
  padding: 44px 36px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
@media (max-width: 991.97px) { .svp-cctv-panel-inner { padding: 36px 24px; } }

.svp-cctv-badge {
  display: inline-block;
  background: rgba(255,165,0,.15);
  color: #FFA500;
  border: 1px solid rgba(255,165,0,.35);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .5px;
  margin-bottom: 18px;
  width: fit-content;
}

.svp-cctv-panel-title {
  font-family: "Saira", sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
  margin-bottom: 14px;
}
@media (max-width: 1199.97px) { .svp-cctv-panel-title { font-size: 22px; } }

.svp-cctv-panel-desc {
  color: #aaaaaa;
  font-size: 14px;
  line-height: 1.75;
  margin-bottom: 28px;
}

.svp-cctv-specs {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.svp-cctv-spec {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #cccccc;
  font-size: 14px;
}
.svp-cctv-spec svg { color: #FFA500; flex-shrink: 0; }

/* CCTV cards */
.svp-cctv-card {
  background: #ffffff;
  border: 1px solid #eeeeee;
  border-radius: 16px;
  padding: 28px 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow .3s, transform .3s, border-color .3s;
}
.svp-cctv-card:hover {
  box-shadow: 0 10px 36px rgba(0,0,0,.1);
  transform: translateY(-4px);
  border-color: rgba(255,165,0,.3);
}

.svp-cctv-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.svp-cctv-card-title {
  font-family: "Saira", sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #111111;
  margin: 0;
}

.svp-cctv-card-desc {
  color: #666666;
  font-size: 13px;
  line-height: 1.75;
  flex-grow: 1;
  margin-bottom: 14px;
}

/* Process bar */
.svp-process-bar {
  background: linear-gradient(135deg, #111111, #1e1a0a);
  border-radius: 14px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border: 1px solid rgba(255,165,0,.2);
}

.svp-process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.svp-process-num {
  font-family: "Saira", sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #FFA500;
  line-height: 1;
}

.svp-process-text {
  color: #cccccc;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  white-space: nowrap;
}

.svp-process-arrow {
  color: rgba(255,165,0,.5);
  font-size: 18px;
  padding: 0 4px;
}

/* ── Biometrics section ───────────────────────────────────────── */
.svp-bio-feature-card {
  background: linear-gradient(145deg, #111111 0%, #1e1a0a 100%);
  border: 1px solid rgba(255,165,0,.25);
  border-radius: 20px;
  padding: 44px 36px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
@media (max-width: 991.97px) { .svp-bio-feature-card { padding: 32px 24px; } }

.svp-bio-feature-icon {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background: rgba(255,165,0,.12);
  border: 1px solid rgba(255,165,0,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFA500;
  margin-bottom: 24px;
  flex-shrink: 0;
}

.svp-bio-feature-title {
  font-family: "Saira", sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 14px;
}
@media (max-width: 1199.97px) { .svp-bio-feature-title { font-size: 20px; } }

.svp-bio-feature-desc {
  color: #aaaaaa;
  font-size: 14px;
  line-height: 1.75;
  margin-bottom: 0;
}

.svp-bio-mini-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,165,0,.2);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #dddddd;
  font-size: 13px;
  font-weight: 500;
  transition: background .25s, border-color .25s;
}
.svp-bio-mini-card:hover {
  background: rgba(255,165,0,.1);
  border-color: rgba(255,165,0,.5);
}
.svp-bio-mini-card svg { color: #FFA500; flex-shrink: 0; }

.svp-bio-list-card {
  background: #ffffff;
  border: 1px solid #eeeeee;
  border-left: 4px solid #FFA500;
  border-radius: 0 14px 14px 0;
  padding: 24px 24px 24px 28px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex-grow: 1;
  transition: box-shadow .3s, transform .3s;
}
.svp-bio-list-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.09);
  transform: translateX(4px);
}

.svp-bio-list-num {
  font-family: "Saira", sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: rgba(255,165,0,.25);
  line-height: 1;
  flex-shrink: 0;
  min-width: 40px;
  transition: color .3s;
}
.svp-bio-list-card:hover .svp-bio-list-num { color: #FFA500; }

.svp-bio-list-title {
  font-family: "Saira", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #111111;
  margin-bottom: 6px;
}

.svp-bio-list-desc {
  color: #666666;
  font-size: 13px;
  line-height: 1.75;
  margin: 0;
}

/* ── Quote section ───────────────────────────────────────────── */
.svp-quote-section {
  padding: 90px 0;
  background: #f0f2f5;
}
@media (max-width: 767.98px) { .svp-quote-section { padding: 60px 0; } }

.svp-quote-row {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.12);
}

/* Left info panel */
.svp-quote-info {
  background: linear-gradient(160deg, #111111 0%, #1e1a0a 100%);
  height: 100%;
  position: relative;
  overflow: hidden;
}

.svp-quote-info-top {
  padding: 48px 36px 36px;
  position: relative;
  z-index: 2;
}
@media (max-width: 991.97px) { .svp-quote-info-top { padding: 36px 28px 28px; } }

.svp-bar--light { background: #FFA500 !important; }
.svp-label--light { color: #FFA500 !important; }

.svp-quote-info-title {
  font-family: "Saira", sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: #ffffff;
  margin: 10px 0 14px;
}
@media (max-width: 1199.97px) { .svp-quote-info-title { font-size: 24px; } }

.svp-quote-info-desc {
  color: #aaaaaa;
  font-size: 14px;
  line-height: 1.75;
}

/* Decorative circles */
.svp-deco-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,165,0,.08);
  pointer-events: none;
}
.svp-deco-lg { width: 220px; height: 220px; bottom: -60px; right: -60px; }
.svp-deco-sm { width: 110px; height: 110px; bottom: 60px; right: 40px; background: rgba(255,165,0,.05); }

/* Contact list */
.svp-quote-contact-list {
  padding: 0 36px 40px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  z-index: 2;
}
@media (max-width: 991.97px) { .svp-quote-contact-list { padding: 0 28px 32px; } }

.svp-qc-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.svp-qc-item:last-child { border-bottom: none; }

.svp-qc-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255,165,0,.12);
  border: 1px solid rgba(255,165,0,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFA500;
  flex-shrink: 0;
}

.svp-qc-body { display: flex; flex-direction: column; gap: 2px; }
.svp-qc-label { color: #888888; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.svp-qc-value { color: #eeeeee; font-size: 14px; font-weight: 500; text-decoration: none; transition: color .2s; }
a.svp-qc-value:hover { color: #FFA500; }

/* Form panel */
.svp-quote-form-wrap {
  background: #ffffff;
  padding: 48px 44px;
  height: 100%;
}
@media (max-width: 1199.97px) { .svp-quote-form-wrap { padding: 36px 28px; } }
@media (max-width: 767.98px)  { .svp-quote-form-wrap { padding: 28px 20px; } }

.svp-form-title {
  font-family: "Saira", sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #111111;
  margin-bottom: 4px;
}

.svp-form-sub {
  color: #888888;
  font-size: 13px;
  margin-bottom: 24px;
}

.svp-form-group { margin-bottom: 0; }

.svp-form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #333333;
  margin-bottom: 8px;
}

.svp-required { color: #ff4c3b; }

.svp-input {
  width: 100%;
  height: 50px;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  background: #fafafa;
  color: #222222;
  font-size: 14px;
  font-family: "Poppins", sans-serif;
  padding: 0 16px;
  outline: none;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.svp-input:focus {
  border-color: #FFA500;
  box-shadow: 0 0 0 3px rgba(255,165,0,.15);
  background: #ffffff;
}
.svp-input--err { border-color: #ff4c3b !important; }
.svp-textarea { height: auto; padding: 14px 16px; resize: vertical; }
.svp-err-msg { color: #ff4c3b; font-size: 12px; display: block; margin-top: 4px; }

/* Service chips */
.svp-service-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

.svp-chip {
  background: #f4f5f7;
  border: 1.5px solid #e5e7eb;
  border-radius: 20px;
  color: #555555;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 15px;
  cursor: pointer;
  transition: all .2s;
  font-family: "Poppins", sans-serif;
}
.svp-chip:hover { border-color: #FFA500; color: #FFA500; background: #fff8ec; }
.svp-chip--active {
  background: linear-gradient(135deg, #FFA500, #e08e00) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(255,165,0,.35);
}

/* Submit button */
.svp-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #FFA500, #e08e00);
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  padding: 15px 36px;
  cursor: pointer;
  transition: transform .25s, box-shadow .25s, background .25s;
  margin-top: 8px;
  width: 100%;
  justify-content: center;
  letter-spacing: .3px;
}
.svp-submit-btn:hover {
  background: linear-gradient(135deg, #e08e00, #c07a00);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255,165,0,.4);
}

/* Success alert */
.svp-alert-success {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  color: #15803d;
  font-size: 14px;
  padding: 14px 18px;
  margin-bottom: 20px;
}

/* ── Bottom CTA strip ─────────────────────────────────────────── */
.svp-cta-strip {
  background: linear-gradient(135deg, #111111 0%, #1e1a0a 100%);
  border-top: 3px solid #FFA500;
  padding: 60px 0;
}

.svp-cta-title {
  font-family: "Saira", sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
}
@media (max-width: 1199.97px) { .svp-cta-title { font-size: 22px; } }

.svp-cta-sub {
  color: #aaaaaa;
  font-size: 14px;
  line-height: 1.75;
  margin: 0;
}

.svp-cta-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
@media (max-width: 991.97px) { .svp-cta-btns { justify-content: flex-start; } }

.svp-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  padding: 13px 28px;
  text-decoration: none;
  transition: all .25s;
  white-space: nowrap;
}
.svp-cta-btn--primary {
  background: linear-gradient(135deg, #FFA500, #e08e00);
  color: #111111;
  border: 2px solid transparent;
}
.svp-cta-btn--primary:hover {
  background: #ffffff;
  color: #111111;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255,165,0,.4);
}
.svp-cta-btn--outline {
  background: transparent;
  color: #ffffff;
  border: 2px solid rgba(255,255,255,.3);
}
.svp-cta-btn--outline:hover {
  border-color: #FFA500;
  color: #FFA500;
  transform: translateY(-2px);
}

/* ── Active nav state for /services ──────────────────────────── */
.header-top .nav-menus li.svp-nav-active > a,
.header-top .nav-menus li.svp-nav-active > a.nav-link {
  color: #FFA500 !important;
}
.header-top .nav-menus li.svp-nav-active > a::after {
  background-color: #FFA500 !important;
  width: 100% !important;
}


/* ================================================================
   ABOUT PAGE  (.abt-* namespace)
   ================================================================ */

/* ── Shared section scaffolding ──────────────────────────────── */
.abt-accent { color: #FFA500; }

.abt-section-head {
  max-width: 680px;
  margin: 0 auto 52px;
}
.abt-section-head.text-center .offer-label-row { justify-content: center; }

.abt-section-title {
  font-family: "Saira", sans-serif;
  font-size: 40px;
  font-weight: 700;
  color: #111111;
  line-height: 1.2;
  margin: 10px 0 14px;
}
@media (max-width: 1199.97px) { .abt-section-title { font-size: 30px; } }
@media (max-width: 767.98px)  { .abt-section-title { font-size: 24px; } }

.abt-section-desc {
  color: #666666;
  font-size: 15px;
  line-height: 1.8;
}

/* ── Hero section ────────────────────────────────────────────── */
.abt-hero-section {
  padding: 90px 0 80px;
  background: #ffffff;
  overflow: hidden;
}
@media (max-width: 767.98px) { .abt-hero-section { padding: 60px 0; } }

.abt-hero-title {
  font-family: "Saira", sans-serif;
  font-size: 44px;
  font-weight: 800;
  color: #111111;
  line-height: 1.15;
  margin: 12px 0 20px;
}
@media (max-width: 1199.97px) { .abt-hero-title { font-size: 34px; } }
@media (max-width: 767.98px)  { .abt-hero-title { font-size: 28px; } }

.abt-hero-lead {
  font-size: 16px;
  color: #333333;
  line-height: 1.8;
  margin-bottom: 14px;
  font-weight: 500;
}
@media (max-width: 1199.97px) { .abt-hero-lead { font-size: 15px; } }

.abt-hero-body {
  font-size: 14px;
  color: #666666;
  line-height: 1.85;
  margin-bottom: 32px;
}

.abt-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.abt-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  padding: 13px 28px;
  text-decoration: none;
  transition: all .25s;
  white-space: nowrap;
}
.abt-btn--primary {
  background: linear-gradient(135deg, #111111, #2a2a2a);
  color: #FFA500;
  border: 2px solid #111111;
}
.abt-btn--primary:hover {
  background: linear-gradient(135deg, #FFA500, #e08e00);
  color: #111111;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255,165,0,.35);
}
.abt-btn--outline {
  background: transparent;
  color: #111111;
  border: 2px solid #dddddd;
}
.abt-btn--outline:hover {
  border-color: #FFA500;
  color: #FFA500;
  transform: translateY(-2px);
}

/* Hero visual grid */
.abt-hero-visual {
  position: relative;
}

.abt-visual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.abt-vg-card {
  border-radius: 20px;
  padding: 32px 24px;
  text-align: center;
  transition: transform .3s, box-shadow .3s;
}
.abt-vg-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,.12); }

.abt-vg-card--dark {
  background: linear-gradient(145deg, #111111, #1c1c1c);
  border: 1px solid rgba(255,165,0,.2);
}
.abt-vg-card--gold {
  background: linear-gradient(145deg, #FFA500, #e08e00);
}
.abt-vg-card--outline {
  background: #ffffff;
  border: 2px solid #111111;
}

.abt-vg-num {
  display: block;
  font-family: "Saira", sans-serif;
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 8px;
}
.abt-vg-num sup { font-size: 24px; font-weight: 700; }

.abt-vg-card--dark  .abt-vg-num   { color: #FFA500; }
.abt-vg-card--gold  .abt-vg-num   { color: #111111; }
.abt-vg-card--outline .abt-vg-num { color: #111111; }

.abt-vg-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .6px;
}
.abt-vg-card--dark    .abt-vg-label { color: #cccccc; }
.abt-vg-card--gold    .abt-vg-label { color: #111111; }
.abt-vg-card--outline .abt-vg-label { color: #555555; }

/* Floating badge */
.abt-hero-badge {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #FFA500, #e08e00);
  color: #111111;
  border-radius: 30px;
  padding: 10px 22px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(255,165,0,.4);
  z-index: 2;
}
@media (max-width: 767.98px) { .abt-hero-badge { position: static; transform: none; margin-top: 16px; justify-content: center; } }

/* ── Mission / Vision / Values ───────────────────────────────── */
.abt-mvv-section {
  padding: 80px 0;
  background: #f7f8fa;
}
@media (max-width: 767.98px) { .abt-mvv-section { padding: 56px 0; } }

.abt-mvv-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 36px 30px;
  height: 100%;
  border-top: 4px solid transparent;
  box-shadow: 0 4px 20px rgba(0,0,0,.05);
  transition: transform .3s, box-shadow .3s;
}
.abt-mvv-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,.1);
}
.abt-mvv-card--mission { border-top-color: #FFA500; }
.abt-mvv-card--vision  { border-top-color: #111111; }
.abt-mvv-card--values  { border-top-color: #ff4c3b; }

.abt-mvv-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.abt-mvv-card--mission .abt-mvv-icon { background: rgba(255,165,0,.12);  color: #FFA500; }
.abt-mvv-card--vision  .abt-mvv-icon { background: rgba(17,17,17,.07);   color: #111111; }
.abt-mvv-card--values  .abt-mvv-icon { background: rgba(255,76,59,.1);   color: #ff4c3b; }

.abt-mvv-title {
  font-family: "Saira", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #111111;
  margin-bottom: 14px;
}

.abt-mvv-desc {
  color: #666666;
  font-size: 14px;
  line-height: 1.8;
  margin: 0;
}

/* ── Services tiles ──────────────────────────────────────────── */
.abt-services-section {
  padding: 90px 0;
  background: #ffffff;
}
@media (max-width: 767.98px) { .abt-services-section { padding: 60px 0; } }

.abt-svc-row {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,.08);
}

.abt-svc-tile {
  background: #ffffff;
  padding: 44px 36px;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #f0f0f0;
  transition: background .3s;
  position: relative;
}
.abt-svc-tile:last-child { border-right: none; }
.abt-svc-tile:hover { background: #fafafa; }

/* Featured center tile */
.abt-svc-tile--featured {
  background: linear-gradient(160deg, #111111 0%, #1e1a0a 100%) !important;
  border-right: none;
}
.abt-svc-tile--featured:hover { background: linear-gradient(160deg, #1a1a1a 0%, #251f0d 100%) !important; }
.abt-svc-tile--featured .abt-svc-tile-num  { color: rgba(255,165,0,.2); }
.abt-svc-tile--featured .abt-svc-tile-icon { color: #FFA500; background: rgba(255,165,0,.1); border-color: rgba(255,165,0,.25); }
.abt-svc-tile--featured .abt-svc-tile-title { color: #ffffff; }
.abt-svc-tile--featured .abt-svc-tile-desc  { color: #aaaaaa; }
.abt-svc-tile--featured .abt-svc-tile-list li { color: #cccccc; }
.abt-svc-tile--featured .abt-svc-tile-list li::before { background: #FFA500; }
.abt-svc-tile--featured .abt-svc-tile-link { color: #FFA500; }
.abt-svc-tile--featured .abt-svc-tile-link:hover { color: #ffd166; }

/* Tile number watermark */
.abt-svc-tile-num {
  font-family: "Saira", sans-serif;
  font-size: 64px;
  font-weight: 800;
  color: rgba(17,17,17,.05);
  line-height: 1;
  margin-bottom: -14px;
  user-select: none;
}

.abt-svc-tile-icon {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: #fff8ec;
  border: 1px solid rgba(255,165,0,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFA500;
  margin-bottom: 20px;
  transition: background .3s, transform .3s;
}
.abt-svc-tile:hover .abt-svc-tile-icon {
  background: linear-gradient(135deg, #FFA500, #e08e00);
  color: #ffffff;
  border-color: transparent;
  transform: scale(1.06);
}
.abt-svc-tile--featured:hover .abt-svc-tile-icon {
  background: linear-gradient(135deg, #FFA500, #e08e00);
  color: #111111;
}

.abt-svc-tile-title {
  font-family: "Saira", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #111111;
  margin-bottom: 12px;
}

.abt-svc-tile-desc {
  color: #666666;
  font-size: 14px;
  line-height: 1.8;
  flex-grow: 1;
  margin-bottom: 18px;
}

.abt-svc-tile-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.abt-svc-tile-list li {
  font-size: 13px;
  color: #444444;
  padding-left: 18px;
  position: relative;
}
.abt-svc-tile-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FFA500;
}

.abt-svc-tile-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #111111;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  text-decoration: none;
  margin-top: auto;
  transition: gap .2s, color .2s;
}
.abt-svc-tile-link:hover { color: #FFA500; gap: 10px; }

/* ── Product showcase ────────────────────────────────────────── */
.abt-products-section {
  padding: 90px 0;
  background: #f7f8fa;
}
@media (max-width: 767.98px) { .abt-products-section { padding: 60px 0; } }

.abt-view-all-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #FFA500;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: gap .2s;
}
.abt-view-all-link:hover { gap: 10px; color: #e08e00; }

.abt-product-card {
  display: block;
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #eeeeee;
  text-decoration: none;
  transition: box-shadow .3s, transform .3s, border-color .3s;
}
.abt-product-card:hover {
  box-shadow: 0 10px 32px rgba(0,0,0,.1);
  transform: translateY(-5px);
  border-color: rgba(255,165,0,.3);
}

.abt-product-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f5f5f5;
}
.abt-product-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.abt-product-card:hover .abt-product-img-wrap img { transform: scale(1.06); }

.abt-product-body {
  padding: 14px 14px 16px;
}

.abt-product-name {
  font-family: "Saira", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #222222;
  margin-bottom: 8px;
  line-height: 1.4;
}

.abt-product-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.abt-product-price {
  font-family: "Saira", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #FFA500;
}

.abt-product-old {
  font-size: 12px;
  color: #aaaaaa;
  text-decoration: line-through;
}

/* ── Portfolio ────────────────────────────────────────────────── */
.abt-portfolio-section {
  padding: 90px 0;
  background: #ffffff;
}
@media (max-width: 767.98px) { .abt-portfolio-section { padding: 60px 0; } }

/* Filter tabs */
.abt-portfolio-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
  justify-content: center;
}

.abt-ptab {
  background: #f4f5f7;
  border: 1.5px solid #e5e7eb;
  border-radius: 24px;
  color: #555555;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 22px;
  cursor: pointer;
  transition: all .22s;
}
.abt-ptab:hover { border-color: #FFA500; color: #FFA500; background: #fff8ec; }
.abt-ptab--active {
  background: linear-gradient(135deg, #111111, #2a2a2a);
  color: #FFA500;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(17,17,17,.25);
}

/* Portfolio cards */
.abt-portfolio-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #eeeeee;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow .3s, transform .3s, border-color .3s;
}
.abt-portfolio-card:hover {
  box-shadow: 0 12px 36px rgba(0,0,0,.1);
  transform: translateY(-5px);
  border-color: rgba(255,165,0,.3);
}

.abt-portfolio-img {
  position: relative;
  overflow: hidden;
}

/* Gradient placeholder (used in place of photos) */
.abt-portfolio-placeholder {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .4s ease;
}
.abt-portfolio-card:hover .abt-portfolio-placeholder { transform: scale(1.04); }

.abt-ph--net  { background: linear-gradient(135deg, #1a1a1a 0%, #1e1a0a 100%); color: rgba(255,165,0,.4); }
.abt-ph--cctv { background: linear-gradient(135deg, #0a0a1e 0%, #111133 100%); color: rgba(100,120,255,.45); }
.abt-ph--bio  { background: linear-gradient(135deg, #0e1a0a 0%, #1a2e0e 100%); color: rgba(80,200,80,.4); }

.abt-portfolio-overlay {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}

.abt-portfolio-tag {
  background: rgba(255,165,0,.9);
  color: #111111;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  border-radius: 14px;
  padding: 4px 12px;
}

.abt-portfolio-info {
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.abt-portfolio-title {
  font-family: "Saira", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #111111;
  margin-bottom: 10px;
  line-height: 1.4;
}

.abt-portfolio-detail {
  font-size: 13px;
  color: #666666;
  line-height: 1.75;
  flex-grow: 1;
  margin-bottom: 16px;
}

.abt-portfolio-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid #f0f0f0;
}

.abt-portfolio-type {
  font-size: 12px;
  font-weight: 600;
  color: #FFA500;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.abt-portfolio-year {
  font-size: 12px;
  font-weight: 500;
  color: #aaaaaa;
}

/* Portfolio filter animation */
@keyframes abtFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Testimonials ────────────────────────────────────────────── */
.abt-testimonials-section {
  padding: 90px 0;
  background: linear-gradient(160deg, #111111 0%, #1c1606 100%);
}
@media (max-width: 767.98px) { .abt-testimonials-section { padding: 60px 0; } }

.abt-testi-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 32px 28px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: background .3s, border-color .3s, transform .3s;
}
.abt-testi-card:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,165,0,.3);
  transform: translateY(-4px);
}

/* Featured centre card */
.abt-testi-card--featured {
  background: linear-gradient(145deg, #FFA500, #e08e00) !important;
  border-color: transparent !important;
  box-shadow: 0 12px 36px rgba(255,165,0,.3);
}
.abt-testi-card--featured .abt-testi-stars svg { fill: #111111; }
.abt-testi-card--featured .abt-testi-quote  { color: #111111 !important; }
.abt-testi-card--featured .abt-testi-avatar { background: #111111; color: #FFA500; }
.abt-testi-card--featured strong            { color: #111111; }
.abt-testi-card--featured span              { color: rgba(17,17,17,.7); }

.abt-testi-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 18px;
}

.abt-testi-quote {
  font-size: 14px;
  color: #cccccc;
  line-height: 1.85;
  flex-grow: 1;
  margin-bottom: 24px;
  font-style: italic;
}

.abt-testi-author {
  display: flex;
  align-items: center;
  gap: 14px;
}

.abt-testi-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFA500, #e08e00);
  color: #111111;
  font-family: "Saira", sans-serif;
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.abt-testi-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.abt-testi-info strong { color: #ffffff; font-size: 14px; font-weight: 700; }
.abt-testi-info span   { color: #888888; font-size: 12px; }

/* ── Partners strip ──────────────────────────────────────────── */
.abt-partners-strip {
  background: #f7f8fa;
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
  padding: 40px 0;
  overflow: hidden;
}

.abt-partners-label {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: #aaaaaa;
  margin-bottom: 28px;
}

.abt-partners-track-outer {
  overflow: hidden;
  width: 100%;
}

.abt-partners-track {
  display: flex;
  align-items: center;
  gap: 40px;
  animation: abtPartnerMarquee 30s linear infinite;
  width: max-content;
}
.abt-partners-track:hover { animation-play-state: paused; }

@keyframes abtPartnerMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.abt-partner-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .55;
  transition: opacity .3s;
}
.abt-partner-logo:hover { opacity: 1; }
.abt-partner-logo img {
  height: 36px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  transition: filter .3s;
}
.abt-partner-logo:hover img { filter: none; }

/* ── About page product slider tweaks ───────────────────────── */
.abt-products-section .product-cards-slider .single-product {
  margin: 0 8px;   /* consistent gutter inside slider */
}

.abt-slider-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid #e5e7eb;
  background: #ffffff;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background .22s, border-color .22s, color .22s, transform .22s;
}
.abt-slider-arrow:hover {
  background: #FFA500;
  border-color: #FFA500;
  color: #ffffff;
  transform: scale(1.08);
}


/* ================================================================
   BEST SELLING PRODUCTS — Complete Redesign v2
   ================================================================ */

/* ── Section wrapper ── */
.gs-bestseller-section {
  position: relative;
  background: #0e0e0e;
  padding: 96px 0 88px;
  overflow: hidden;
  isolation: isolate;
}

/* Diagonal mesh texture overlay */
.gs-bestseller-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,165,0,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,165,0,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}

/* ── Ambient glow orbs ── */
.bsp-bg-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(110px);
  z-index: 0;
}
.bsp-bg-glow--left {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(255,165,0,0.09) 0%, transparent 65%);
  top: -160px;
  left: -160px;
}
.bsp-bg-glow--right {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255,165,0,0.06) 0%, transparent 65%);
  bottom: -200px;
  right: -160px;
}

/* ── Dot-grid overlay ── */
.bsp-bg-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,165,0,0.055) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
  z-index: 0;
}

/* ── z-index elevation for all content ── */
.bsp-container {
  position: relative;
  z-index: 1;
}

/* ================================================================
   HEADER
   ================================================================ */
.bsp-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 40px;
}

.bsp-header__left { flex: 1; min-width: 0; }

/* Eyebrow label */
.bsp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.bsp-eyebrow__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: rgba(255,165,0,0.14);
  border: 1px solid rgba(255,165,0,0.35);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(255,165,0,0.18);
}
.bsp-eyebrow__text {
  color: #FFA500;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}
.bsp-eyebrow__line {
  display: block;
  width: 44px;
  height: 2px;
  background: linear-gradient(to right, #FFA500, transparent);
  border-radius: 2px;
}

/* Main heading */
.bsp-heading {
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 900;
  color: #ffffff;
  line-height: 1.1;
  margin: 0 0 12px;
  letter-spacing: -0.8px;
}
.bsp-heading__accent {
  color: #FFA500;
  position: relative;
  display: inline-block;
}
.bsp-heading__accent::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(to right, #FFA500, rgba(255,165,0,0.15));
  border-radius: 3px;
}

/* Sub description */
.bsp-desc {
  color: rgba(255,255,255,0.45);
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
  max-width: 440px;
}

/* ── Right block ── */
.bsp-header__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
  flex-shrink: 0;
}

/* Stats pill panel */
.bsp-stats {
  display: flex;
  align-items: stretch;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 14px 24px;
  backdrop-filter: blur(12px);
  gap: 0;
}
.bsp-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 22px;
  gap: 4px;
}
.bsp-stat:first-child { padding-left: 0; }
.bsp-stat:last-child  { padding-right: 0; }

.bsp-stat__num {
  color: #FFA500;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.5px;
}
.bsp-stat__label {
  color: rgba(255,255,255,0.35);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
}
.bsp-stat-sep {
  width: 1px;
  background: rgba(255,255,255,0.07);
  flex-shrink: 0;
  align-self: stretch;
}

/* View All CTA */
.bsp-view-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #FFA500;
  color: #111111 !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 12px 24px;
  border-radius: 9px;
  text-decoration: none;
  transition: background 0.22s, transform 0.22s, box-shadow 0.22s;
  box-shadow: 0 4px 24px rgba(255,165,0,0.32);
  white-space: nowrap;
}
.bsp-view-all-btn:hover {
  background: #e6940a;
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(255,165,0,0.48);
  color: #111111 !important;
  text-decoration: none;
}
.bsp-view-all-btn__icon {
  display: flex;
  align-items: center;
  transition: transform 0.22s;
}
.bsp-view-all-btn:hover .bsp-view-all-btn__icon { transform: translateX(4px); }

/* ================================================================
   SEPARATOR
   ================================================================ */
.bsp-separator {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 30px;
}
.bsp-separator__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,165,0,0.22), transparent);
}
.bsp-separator__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,165,0,0.08);
  border: 1px solid rgba(255,165,0,0.22);
  color: #FFA500;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 99px;
  white-space: nowrap;
}

/* ================================================================
   SLIDER CONTROLS BAR
   ================================================================ */
.bsp-slider-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

/* Filter pills */
.bsp-filter-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bsp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.5);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 7px 16px;
  border-radius: 99px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s;
  line-height: 1;
}
.bsp-pill:hover {
  color: #FFA500;
  border-color: rgba(255,165,0,0.35);
  background: rgba(255,165,0,0.07);
}
.bsp-pill--active {
  background: rgba(255,165,0,0.13);
  border-color: rgba(255,165,0,0.5);
  color: #FFA500;
  box-shadow: 0 0 16px rgba(255,165,0,0.12);
}

/* Navigation arrows */
.bsp-nav-arrows {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.bsp-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 9px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: all 0.22s;
  flex-shrink: 0;
}
.bsp-nav-btn:hover {
  background: #FFA500;
  border-color: #FFA500;
  color: #111111;
  box-shadow: 0 4px 16px rgba(255,165,0,0.35);
  transform: scale(1.06);
}
.bsp-nav-btn:disabled,
.bsp-nav-btn.swiper-button-disabled {
  opacity: 0.25;
  cursor: not-allowed;
  transform: none;
}

/* ================================================================
   SLIDER WRAP & SLIDE ITEMS
   ================================================================ */
.bsp-slider-wrap { position: relative; }

.bsp-slide-item {
  position: relative;
  padding: 0 10px;
}
.bsp-slide-item > [class*="col"],
.bsp-slide-item > div {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding-left: 0;
  padding-right: 0;
}
.bsp-slide-item .single-product {
  width: 100%;
  min-width: 0;
}

/* ================================================================
   PRODUCT CARD — PREMIUM DARK REDESIGN
   ================================================================ */

/* Card shell */
.gs-bestseller-section .single-product {
  background: #141414;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition:
    transform  0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.32s ease,
    border-color 0.32s ease;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 6px 24px rgba(0,0,0,0.4);
}

/* Shimmer top-edge accent line */
.gs-bestseller-section .single-product::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,165,0,0) 20%,
    rgba(255,165,0,0.5) 50%,
    rgba(255,165,0,0) 80%,
    transparent 100%);
  opacity: 0;
  transition: opacity 0.32s ease;
  z-index: 6;
}

/* Glow bloom beneath card on hover */
.gs-bestseller-section .single-product::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%) scaleX(0.6);
  width: 75%;
  height: 28px;
  background: radial-gradient(ellipse, rgba(255,165,0,0.28) 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.36s ease, transform 0.36s ease;
  pointer-events: none;
  z-index: -1;
}

.gs-bestseller-section .single-product:hover {
  transform: translateY(-10px) scale(1.01);
  border-color: rgba(255,165,0,0.3);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 28px 64px rgba(0,0,0,0.6),
    0 0 0 1px rgba(255,165,0,0.15);
}
.gs-bestseller-section .single-product:hover::before { opacity: 1; }
.gs-bestseller-section .single-product:hover::after {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}

/* ── Image area ── */
/* ── Image area ── */
.gs-bestseller-section .img-wrapper {
  background: #141414;
  border-radius: 20px 20px 0 0;
  overflow: visible;          /* let the floated img-link show its rounded corners */
  position: relative;
  flex-shrink: 0;
  padding: 10px 10px 0;
}

/* The white image box — all four corners rounded, floats inside the dark shell */
.gs-bestseller-section .sp-img-link {
  border-radius: 14px !important;
  overflow: hidden;
  background: #ffffff;
  display: block;
  position: relative;
  width: 100% !important;
  margin: 0 !important;
  box-shadow: 0 2px 14px rgba(0,0,0,0.35);
}

/* Radial spotlight that tracks card hover */
.gs-bestseller-section .img-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 40%,
    rgba(255,165,0,0.07) 0%, transparent 75%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
  pointer-events: none;
}
.gs-bestseller-section .single-product:hover .img-wrapper::before { opacity: 1; }

/* Bottom-fade vignette */
.gs-bestseller-section .img-wrapper::after {
  content: '';
  position: absolute;
  bottom: 0; left: 10px; right: 10px;
  height: 40px;
  background: linear-gradient(to bottom, transparent 0%, rgba(20,20,20,0.5) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Product image */
.gs-bestseller-section .img-wrapper .product-img {
  object-fit: contain !important;
  padding: 14px;
  background: #ffffff;
  transition: transform 0.52s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  z-index: 0;
  border-radius: 14px;
}
.gs-bestseller-section .single-product:hover .img-wrapper .product-img {
  transform: scale(1.08);
}
}

/* ── Top ribbon row (badge + wishlist) ── */
.sp-img-toprow {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
  pointer-events: none;
}
.sp-img-toprow > * { pointer-events: auto; }

/* Discount badge */
.gs-bestseller-section .product-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #FFA500 0%, #e6900a 100%);
  color: #111111;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  padding: 4px 10px;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(255,165,0,0.4);
  line-height: 1;
}

/* Wishlist pill */
.sp-wishlist-corner { flex-shrink: 0; }
.sp-wish-pill {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(14,14,14,0.75) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.55) !important;
  backdrop-filter: blur(6px);
  transition: all 0.22s ease !important;
  text-decoration: none;
}
.sp-wish-pill:hover {
  background: rgba(255,165,0,0.15) !important;
  border-color: rgba(255,165,0,0.5) !important;
  color: #FFA500 !important;
  transform: scale(1.1);
}
.sp-wish-pill.active {
  background: rgba(239,68,68,0.18) !important;
  border-color: rgba(239,68,68,0.5) !important;
  color: #ef4444 !important;
}

/* ── Hover overlay — quick-action buttons ── */
.sp-hover-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 56px; /* clear the add-to-cart bar */
  background: rgba(0,0,0,0);
  opacity: 0;
  transition: opacity 0.28s ease, background 0.28s ease;
  z-index: 8;
  pointer-events: none;
}
.gs-bestseller-section .single-product:hover .sp-hover-overlay {
  opacity: 1;
  background: rgba(0,0,0,0.18);
  pointer-events: auto;
}

.sp-overlay-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  transform: translateY(10px);
  transition: transform 0.28s cubic-bezier(0.34,1.4,0.64,1);
}
.gs-bestseller-section .single-product:hover .sp-overlay-actions {
  transform: translateY(0);
}

.sp-overlay-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(20,20,20,0.88);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.8) !important;
  font-size: 11px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 7px;
  text-decoration: none;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
  white-space: nowrap;
}
.sp-overlay-btn:hover {
  background: #FFA500 !important;
  border-color: #FFA500 !important;
  color: #111111 !important;
  transform: translateY(-2px);
}

/* Keep old sp-quick-actions hidden in bestseller (replaced by hover overlay) */
.gs-bestseller-section .sp-quick-actions { display: none !important; }

/* ── Add-to-cart — now in content-wrapper, static ── */
.gs-bestseller-section .add-to-cart {
  background: transparent !important;
  padding: 0 !important;
  position: static !important;
  transform: none !important;
  z-index: auto;
}
.gs-bestseller-section .sp-cart-btn {
  background: linear-gradient(135deg, #FFA500 0%, #cc7700 100%) !important;
  color: #111111 !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: none !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  gap: 8px !important;
  transition: background 0.22s, letter-spacing 0.22s, box-shadow 0.22s !important;
}
.gs-bestseller-section .sp-cart-btn:hover {
  background: linear-gradient(135deg, #ffb733 0%, #e6900a 100%) !important;
  box-shadow: 0 4px 20px rgba(255,165,0,0.35) !important;
  letter-spacing: 0.8px;
}
.gs-bestseller-section .sp-cart-btn--oos {
  background: rgba(255,255,255,0.04) !important;
  color: rgba(255,255,255,0.25) !important;
  cursor: not-allowed !important;
  letter-spacing: 0 !important;
  border-radius: 10px !important;
}

/* ── Content area ── */
.gs-bestseller-section .content-wrapper {
  background: #141414;
  border-top: 1px solid rgba(255,255,255,0.05);
  padding: 14px 16px 14px;
  border-radius: 0;
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Gold hairline reveal on hover */
.gs-bestseller-section .content-wrapper::before {
  content: '';
  position: absolute;
  top: 0; left: 20px; right: 20px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(255,165,0,0.45), transparent);
  opacity: 0;
  transition: opacity 0.32s ease;
}
.gs-bestseller-section .single-product:hover .content-wrapper::before { opacity: 1; }

/* ── Meta row: category chip + stock dot ── */
.sp-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
}
.sp-category-chip {
  display: inline-block;
  background: rgba(255,165,0,0.1);
  border: 1px solid rgba(255,165,0,0.2);
  color: rgba(255,165,0,0.85);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-stock-dot {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
  flex-shrink: 0;
}
.sp-stock-indicator {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sp-stock-dot--in {
  color: rgba(52,211,153,0.8);
}
.sp-stock-dot--in .sp-stock-indicator {
  background: #34d399;
  box-shadow: 0 0 6px rgba(52,211,153,0.6);
  animation: sp-pulse-in 2s infinite;
}
.sp-stock-dot--oos {
  color: rgba(248,113,113,0.7);
}
.sp-stock-dot--oos .sp-stock-indicator {
  background: #f87171;
}
@keyframes sp-pulse-in {
  0%, 100% { box-shadow: 0 0 5px rgba(52,211,153,0.6); }
  50%       { box-shadow: 0 0 10px rgba(52,211,153,0.9); }
}

/* ── Product title ── */
.gs-bestseller-section .sp-title-link { text-decoration: none; }
.gs-bestseller-section .product-title {
  color: rgba(255,255,255,0.88) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  letter-spacing: 0.1px;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.22s ease;
  min-height: 2.9em;
}
.gs-bestseller-section .single-product:hover .product-title {
  color: #FFA500 !important;
}

/* ── Bottom row: price + rating ── */
.sp-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

/* Price */
.gs-bestseller-section .price-wrapper {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
}
.gs-bestseller-section .sp-price-current {
  color: #FFA500 !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  letter-spacing: -0.5px;
  line-height: 1;
}
.gs-bestseller-section .sp-price-old {
  color: rgba(255,255,255,0.22) !important;
  font-size: 11.5px !important;
}

/* Rating (right side of bottom row) */
.gs-bestseller-section .ratings-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.gs-bestseller-section .sp-stars {
  display: flex;
  align-items: center;
  gap: 1px;
}
.gs-bestseller-section .rating-title {
  color: rgba(255,255,255,0.3) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  line-height: 1;
}
.gs-bestseller-section .sp-rating-count {
  color: rgba(255,255,255,0.3) !important;
  font-weight: 400 !important;
}

/* ================================================================
   PAGINATION DOTS
   ================================================================ */
.bsp-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 32px;
}
.bsp-pagination .swiper-pagination-bullet {
  width: 7px;
  height: 7px;
  background: rgba(255,255,255,0.14);
  border-radius: 99px;
  opacity: 1;
  transition: all 0.3s;
  cursor: pointer;
}
.bsp-pagination .swiper-pagination-bullet-active {
  background: #FFA500;
  width: 26px;
  box-shadow: 0 0 8px rgba(255,165,0,0.45);
}

/* ================================================================
   BOTTOM CTA BAR
   ================================================================ */
.bsp-bottom-cta {
  margin-top: 52px;
  padding-top: 36px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.bsp-bottom-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(135deg,
    rgba(255,165,0,0.05) 0%,
    rgba(255,165,0,0.02) 100%);
  border: 1px solid rgba(255,165,0,0.14);
  border-radius: 14px;
  padding: 20px 32px;
}
.bsp-bottom-cta__text {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.45);
  font-size: 14px;
}
.bsp-bottom-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1.5px solid rgba(255,165,0,0.6);
  color: #FFA500 !important;
  font-size: 13px;
  font-weight: 700;
  padding: 11px 24px;
  border-radius: 9px;
  text-decoration: none;
  transition: all 0.22s;
  white-space: nowrap;
  flex-shrink: 0;
}
.bsp-bottom-btn:hover {
  background: #FFA500;
  border-color: #FFA500;
  color: #111111 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255,165,0,0.35);
}
.bsp-bottom-btn svg { transition: transform 0.22s; }
.bsp-bottom-btn:hover svg { transform: translateX(4px); }

/* ================================================================
   RESPONSIVE
   ================================================================ */

/* Large desktop */
@media (max-width: 1399px) {
  .gs-bestseller-section { padding: 80px 0 72px; }
}

/* Tablet */
@media (max-width: 1199px) {
  .gs-bestseller-section { padding: 72px 0 64px; }
  .bsp-stats { padding: 12px 18px; }
  .bsp-stat { padding: 0 16px; }
  .bsp-stat__num { font-size: 20px; }
}

/* Medium tablet */
@media (max-width: 991px) {
  .bsp-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }
  .bsp-header__right {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;
    gap: 14px;
  }
  .bsp-desc { max-width: 100%; }
}

/* Mobile */
@media (max-width: 767px) {
  .gs-bestseller-section { padding: 48px 0 44px; }

  .bsp-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .bsp-stats { display: none; }
  .bsp-header__right {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
  }
  .bsp-view-all-btn {
    width: 100%;
    justify-content: center;
    padding: 12px 18px;
  }
  .bsp-eyebrow__line { display: none; }
  .bsp-heading { font-size: 25px; margin-bottom: 8px; }
  .bsp-desc { font-size: 13px; max-width: 100%; margin-bottom: 4px; }
  .bsp-separator { display: none; }
  .bsp-slider-controls { flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
  .bsp-filter-pills { order: 1; width: 100%; gap: 8px; flex-wrap: wrap; }
  .bsp-pill { flex: 1 1 auto; justify-content: center; padding: 8px 12px; font-size: 12px; }
  .bsp-nav-arrows { order: 2; margin-left: auto; gap: 8px; }
  .bsp-nav-btn { width: 40px; height: 40px; }

  /* 2-up card layout — tighten slide gutter so both fit on screen */
  .bsp-slide-item { padding: 0 5px; }

  /* Card adjustments for 2-up */
  .gs-bestseller-section .single-product { border-radius: 16px; }
  .gs-bestseller-section .img-wrapper { border-radius: 16px 16px 0 0; overflow: visible; padding: 8px 8px 0; }
  .gs-bestseller-section .product-title { font-size: 12px !important; min-height: 2.6em; }
  .gs-bestseller-section .sp-price-current { font-size: 14px !important; }
  .gs-bestseller-section .content-wrapper { padding: 10px 11px 12px; gap: 6px; }
  .sp-category-chip { font-size: 9px; max-width: 75px; padding: 2px 6px; }
  .sp-stock-dot { font-size: 9px; }
  .sp-stock-indicator { width: 5px; height: 5px; }

  /* Hide overlay on touch for bestseller section — too small to be useful at 2-up */
  .gs-bestseller-section .sp-hover-overlay { display: none; }

  /* Cart bar compact */
  .gs-bestseller-section .sp-cart-btn {
    font-size: 10px !important;
    padding: 9px 10px !important;
    letter-spacing: 0.2px;
  }

  /* Overlay always visible on touch — bestseller section only */
  .gs-bestseller-section .sp-hover-overlay {
    opacity: 1;
    background: transparent;
    padding-bottom: 0;
    align-items: flex-start;
    justify-content: flex-end;
    padding-top: 50px;
    padding-right: 10px;
  }
  .gs-bestseller-section .sp-overlay-actions {
    flex-direction: column;
    transform: none;
    gap: 6px;
  }
  .gs-bestseller-section .sp-overlay-btn span { display: none; }
  .gs-bestseller-section .sp-overlay-btn {
    padding: 7px;
    border-radius: 7px;
  }

  .bsp-bottom-cta { margin-top: 32px; padding-top: 24px; }
  .bsp-bottom-cta__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 18px 20px;
    border-radius: 12px;
  }
  .bsp-bottom-cta__text { font-size: 13px; }
  .bsp-bottom-btn {
    align-self: stretch;
    justify-content: center;
    padding: 12px 18px;
  }
}

/* Small phone */
@media (max-width: 575px) {
  .gs-bestseller-section { padding: 40px 0 36px; }
  .bsp-heading { font-size: 23px; }
  .bsp-desc { font-size: 12px; }
  .bsp-nav-btn { width: 36px; height: 36px; }
  .bsp-bottom-cta { margin-top: 28px; padding-top: 18px; }
  .bsp-bottom-cta__inner { padding: 14px 16px; }
  /* Keep slide gutter minimal for 2-up on small phones */
  .bsp-slide-item { padding: 0 4px; }
  .gs-bestseller-section .content-wrapper { padding: 9px 10px 11px; }
  .gs-bestseller-section .sp-price-current { font-size: 13px !important; }
  .gs-bestseller-section .product-title { font-size: 11.5px !important; }
  .sp-bottom-row { gap: 4px; padding-top: 8px; }
  .gs-bestseller-section .sp-stars svg { width: 9px; height: 9px; }
}

/* Very small */
@media (max-width: 399px) {
  .bsp-filter-pills { gap: 6px; }
  .bsp-pill { flex: 1 1 auto; padding: 6px 8px; font-size: 11px; }
  .bsp-heading { font-size: 21px; }
  .gs-bestseller-section .sp-price-current { font-size: 14px !important; }
}


/* ================================================================
   SERVICE SECTION — Full Redesign v2
   ================================================================ */

/* ── Wrapper ── */
.gs-service-section--v2 {
  position: relative;
  background: linear-gradient(135deg, #0d0d0d 0%, #111111 40%, #130e00 100%);
  padding: 0;
  overflow: hidden;
  border-top: 1px solid rgba(255, 165, 0, 0.12);
  border-bottom: 1px solid rgba(255, 165, 0, 0.08);
}

/* Override the legacy before/after from style.css */
.gs-service-section--v2::before {
  background: linear-gradient(90deg, transparent, rgba(255,165,0,0.5) 30%, rgba(255,165,0,0.5) 70%, transparent) !important;
  height: 2px !important;
  opacity: 1 !important;
}
.gs-service-section--v2::after {
  display: none !important;
}

/* ── Ambient orbs ── */
.svc-bg-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(90px);
}
.svc-bg-orb--left {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255,165,0,0.07) 0%, transparent 70%);
  top: -160px;
  left: -100px;
}
.svc-bg-orb--right {
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(255,165,0,0.05) 0%, transparent 70%);
  bottom: -120px;
  right: -80px;
}

/* ── Container ── */
.svc-container {
  position: relative;
  z-index: 1;
}

/* ── Grid row ── */
.svc-row {
  /* sharp border between row and the surrounding sections */
}

/* ── Column slot ── */
.svc-col {
  padding: 0;
}

/* ================================================================
   CARD
   ================================================================ */

.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 42px 28px 38px;
  gap: 0;
  overflow: hidden;
  cursor: default;
  transition: background 0.3s ease;
  height: 100%;
}

/* subtle card hover bg */
.svc-card:hover {
  background: rgba(255,165,0,0.04);
}

/* ── Step number (top-right corner) ── */
.svc-step-num {
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  color: rgba(255,165,0,0.18);
  line-height: 1;
  font-family: "Poppins", sans-serif;
  transition: color 0.3s;
}
.svc-card:hover .svc-step-num {
  color: rgba(255,165,0,0.45);
}

/* ================================================================
   ICON BOX
   ================================================================ */

.svc-icon-box {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  flex-shrink: 0;
}

/* Hexagon-style icon ring */
.svc-icon-ring {
  position: relative;
  z-index: 1;
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: rgba(255,165,0,0.08);
  border: 1.5px solid rgba(255,165,0,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.svc-icon-ring img {
  width: 36px !important;
  height: 36px !important;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 6px rgba(255,165,0,0.2));
  transition: transform 0.3s ease, filter 0.3s ease;
}

.svc-card:hover .svc-icon-ring {
  background: rgba(255,165,0,0.14);
  border-color: rgba(255,165,0,0.55);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(255,165,0,0.18), 0 0 0 6px rgba(255,165,0,0.05);
}

.svc-card:hover .svc-icon-ring img {
  transform: scale(1.08);
  filter: drop-shadow(0 0 10px rgba(255,165,0,0.4));
}

/* Pulse animation ring */
.svc-icon-pulse {
  position: absolute;
  inset: -8px;
  border-radius: 24px;
  border: 1.5px solid rgba(255,165,0,0.12);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  z-index: 0;
}

.svc-card:hover .svc-icon-pulse {
  opacity: 1;
  transform: scale(1);
  animation: svc-pulse 1.8s ease-in-out infinite;
}

@keyframes svc-pulse {
  0%   { opacity: 0.6; transform: scale(1); }
  50%  { opacity: 0.15; transform: scale(1.12); }
  100% { opacity: 0.6; transform: scale(1); }
}

/* ================================================================
   TEXT
   ================================================================ */

.svc-text {
  flex: 1;
}

.svc-title {
  font-size: 15px;
  font-weight: 700;
  color: #f0f0f0;
  margin: 0 0 7px;
  line-height: 1.3;
  letter-spacing: 0.1px;
  transition: color 0.3s;
}

.svc-card:hover .svc-title {
  color: #FFA500;
}

.svc-desc {
  font-size: 12.5px;
  font-weight: 400;
  color: #666666;
  margin: 0;
  line-height: 1.6;
  transition: color 0.3s;
}

.svc-card:hover .svc-desc {
  color: #888888;
}

/* ================================================================
   HOVER ACCENT LINE (slides up from bottom)
   ================================================================ */

.svc-hover-line {
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  background: linear-gradient(to right, transparent, #FFA500, transparent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.svc-card:hover .svc-hover-line {
  transform: scaleX(1);
}

/* ================================================================
   VERTICAL DIVIDER
   ================================================================ */

.svc-divider {
  display: block;
  position: absolute;
  right: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.07) 40%, rgba(255,255,255,0.07) 60%, transparent);
  pointer-events: none;
}

.svc-col:last-child .svc-divider {
  display: none;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */

/* Large tablet: 2×2 grid */
@media (max-width: 991.97px) {
  .gs-service-section--v2 {
    border-top: 1px solid rgba(255,165,0,0.1);
  }

  .svc-card {
    padding: 36px 22px 32px;
  }

  /* On 2-col layout hide right dividers on col 2 & 4 */
  .svc-col:nth-child(2n) .svc-divider {
    display: none;
  }

  /* Add a horizontal separator between the two rows */
  .svc-col:nth-child(n+3) .svc-card {
    border-top: 1px solid rgba(255,255,255,0.05);
  }
}

/* Tablet portrait: 2-col, more compact */
@media (max-width: 767.98px) {
  .svc-card {
    padding: 30px 18px 28px;
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
    gap: 16px;
  }

  .svc-icon-box {
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .svc-icon-ring {
    width: 58px;
    height: 58px;
    border-radius: 14px;
  }

  .svc-icon-ring img {
    width: 28px !important;
    height: 28px !important;
  }

  .svc-step-num {
    top: 10px;
    right: 12px;
    font-size: 10px;
  }

  .svc-hover-line {
    left: 0;
    right: 0;
  }

  /* restore divider as bottom separator on 2-col */
  .svc-col:nth-child(2n) .svc-divider {
    display: block;
  }
  .svc-divider {
    top: unset;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    width: auto;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.07) 40%, rgba(255,255,255,0.07) 60%, transparent);
  }
  .svc-col:last-child .svc-divider,
  .svc-col:nth-last-child(2):nth-child(odd) .svc-divider {
    display: none;
  }
}

/* Mobile: single column */
@media (max-width: 575.98px) {
  .svc-card {
    padding: 24px 16px;
    gap: 14px;
  }

  .svc-col {
    /* each card stacks full width */
  }

  /* show all dividers as horizontal lines except last */
  .svc-col:nth-child(2n) .svc-divider {
    display: block;
  }
  .svc-divider {
    left: 0;
    right: 0;
  }

  .svc-title {
    font-size: 14px;
  }

  .svc-desc {
    font-size: 12px;
  }
}

/* ================================================================
   FEATURED PRODUCTS — DESKTOP/MOBILE VISIBILITY TOGGLES
   ================================================================ */

/* Desktop slider visible, mobile scroll hidden by default */
.gs-featured-product-section .featured-desktop-only { display: block; }
.gs-featured-product-section .featured-mobile-only  { display: none;  }

@media (max-width: 575.97px) {
  /* Flip: hide desktop Slick, show mobile scroll grid */
  .gs-featured-product-section .featured-desktop-only { display: none !important; }
  .gs-featured-product-section .featured-mobile-only  { display: flex !important; }
}

/* ================================================================
   FEATURED PRODUCTS — MOBILE 2-COL HORIZONTAL SCROLL GRID
   Structure: .featured-mobile-scroll > .fms-column > .fms-card-wrap
   Each .fms-column holds 2 stacked cards (a "double slide").
   The track is wider than the viewport so column 3 peeks at ~40%.
   ================================================================ */

@media (max-width: 575.97px) {

  /* ── Scroll track ── */
  .featured-mobile-scroll {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    padding-bottom: 4px !important;
    /* NO negative margin — must stay inside the card's overflow:hidden */
    margin-right: 0 !important;
    padding-right: 0 !important;
    scrollbar-width: none !important;
  }

  .featured-mobile-scroll::-webkit-scrollbar {
    display: none !important;
  }

  /* ── Each column: two equal columns fill the card width fully.
     No 3rd-column peek — keeps everything clipped cleanly.       */
  .featured-mobile-scroll .fms-column {
    flex: 0 0 calc(50% - 4px) !important;
    width: calc(50% - 4px) !important;
    min-width: calc(50% - 4px) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    scroll-snap-align: start !important;
  }

  /* ── Card wrapper fills column width ── */
  .featured-mobile-scroll .fms-card-wrap {
    width: 100% !important;
  }

  /* ── Card resets (remove Bootstrap col padding) ── */
  .featured-mobile-scroll .fms-card-wrap > div {
    width: 100% !important;
    padding: 0 !important;
    max-width: none !important;
    flex: none !important;
  }

  .featured-mobile-scroll .single-product {
    width: 100% !important;
    margin: 0 !important;
  }

  /* Always show Add to Cart on touch */
  .featured-mobile-scroll .add-to-cart {
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Tighter card text on mobile */
  .featured-mobile-scroll .product-title {
    font-size: 12px !important;
    -webkit-line-clamp: 2 !important;
  }
}


/* =========================================================
   Hero section — rounded corners redesign
   ========================================================= */

/* Give the whole slider wrapper a rounded card shape with
   a slim margin so it sits close to the viewport edges     */
.hero-slider-wrapper {
  margin: 20px 6px 0;
  border-radius: 24px;
  overflow: hidden;                      /* clips slides to the rounded frame  */
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.55);
}

/* Each individual slide also needs the radius so the
   background image and ::before overlay are clipped too    */
.gs-hero-section {
  border-radius: 24px;
  overflow: hidden;
}

/* Slick forces overflow:hidden on .slick-list — make sure
   it also inherits the rounded corners                      */
.hero-slider-wrapper .slick-list,
.hero-slider-wrapper .slick-track {
  border-radius: 24px;
}

/* Hide prev/next arrows completely */
.hero-slider-wrapper .slick-prev,
.hero-slider-wrapper .slick-next {
  display: none !important;
}

/* Scale margin down on mobile */
@media (max-width: 767.98px) {
  .hero-slider-wrapper {
    margin: 8px 4px 0;
    border-radius: 16px;
  }
  .gs-hero-section {
    border-radius: 16px;
  }
  .hero-slider-wrapper .slick-list,
  .hero-slider-wrapper .slick-track {
    border-radius: 16px;
  }

  /* On mobile the background photo bleeds behind the text because the
     left-to-right gradient doesn't cover a full-width column.
     Override the overlay so the left 60% is solidly dark — text stays
     readable on its own black panel while the photo shows on the right. */
  .gs-hero-section::before {
    background: linear-gradient(
      90deg,
      rgba(5, 5, 5, 0.98)  0%,
      rgba(5, 5, 5, 0.97) 45%,
      rgba(5, 5, 5, 0.80) 60%,
      rgba(5, 5, 5, 0.20) 80%,
      rgba(5, 5, 5, 0.00) 100%
    );
  }

  /* Align text block to the left so it sits on the dark panel */
  .gs-hero-section .hero-content {
    text-align: left !important;
    padding-left: 4px;
    max-width: 65%;
  }

  /* Keep the CTA button left-aligned (not auto-centered) */
  .gs-hero-section .hero-content .hero-cta-btn {
    margin-left: 0;
    margin-right: auto;
  }

  /* Keep description left-aligned */
  .gs-hero-section .hero-content .hero-desc {
    margin-left: 0;
    margin-right: 0;
  }
}
/* ========================================================= */

/* =========================================================
   Deal of the Day — rounded corners redesign
   ========================================================= */

.gs-deal-of-day {
  margin: 0 16px 0;
  border-radius: 24px;
  overflow: hidden;         /* clips bg image, overlays & accent stripe */
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.55);
}

/* The absolute-positioned bg image sits inside the section,
   so it automatically inherits the clip — nothing extra needed there.
   The overlay divs are also absolute children, so they clip too.     */

@media (max-width: 767.98px) {
  .gs-deal-of-day {
    margin: 0 10px;
    border-radius: 16px;
  }
}
/* ========================================================= */

/* =========================================================
   Best Selling Products — rounded corners redesign
   ========================================================= */

.gs-bestseller-section {
  margin: 0 16px;
  border-radius: 24px;
  overflow: hidden;         /* clips bg glows, grid overlay & all children */
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.55);
}

@media (max-width: 767.98px) {
  .gs-bestseller-section {
    margin: 0 10px;
    border-radius: 16px;
  }
}
/* ========================================================= */

/* =========================================================
   Service Section — rounded corners redesign
   ========================================================= */

.gs-service-section--v2 {
  margin: 20px 16px 0;
  border-radius: 24px;
  overflow: hidden;         /* clips ambient orbs, accent line & all children */
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.55);
}

@media (max-width: 767.98px) {
  .gs-service-section--v2 {
    margin: 12px 10px 0;
    border-radius: 16px;
  }
}
/* ========================================================= */

/* =========================================================
   Our Featured Products — light card redesign
   ========================================================= */

/* 1. Outer section: light card frame */
.gs-featured-product-section,
.gs-featured-product-section.bg-white {
  margin: 0 16px;
  padding: 48px 40px !important;
  background: #f8f9fa !important;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
  position: relative;
}

/* 2. Amber top-edge accent line */
.gs-featured-product-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #f59e0b 30%, #f59e0b 70%, transparent);
  pointer-events: none;
}

/* 3. Remove dark ambient glow */
.gs-featured-product-section::after {
  display: none;
}

/* 4. Content above pseudo-elements */
.gs-featured-product-section .container,
.gs-featured-product-section > .container {
  position: relative;
  z-index: 1;
}

/* 5. Heading — dark text on light background */
.gs-featured-product-section .explore-heading {
  color: #111111 !important;
}

.gs-featured-product-section .explore-heading-highlight {
  color: #f59e0b !important;
}

/* 6. Nav buttons — light card style */
.gs-featured-product-section .featured-nav-btn {
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  color: #374151;
}

.gs-featured-product-section .featured-nav-btn:hover {
  background-color: #f59e0b;
  border-color: #f59e0b;
  color: #ffffff;
}

/* 7. View All button — amber on light */
.gs-featured-product-section .explore-view-all-btn {
  color: #f59e0b !important;
  border-color: #f59e0b !important;
  background: transparent !important;
}

.gs-featured-product-section .explore-view-all-btn:hover {
  background: #f59e0b !important;
  color: #ffffff !important;
}

/* 8. Slick dots — amber active pip */
.gs-featured-product-section .product-cards-slider .slick-dots li button {
  background-color: #d1d5db;
}

.gs-featured-product-section .product-cards-slider .slick-dots li.slick-active button {
  background-color: #f59e0b;
}

/* 9. Mobile responsive */
@media (max-width: 1199.97px) {
  .gs-featured-product-section {
    padding: 40px 28px !important;
  }
}

@media (max-width: 991.97px) {
  .gs-featured-product-section {
    padding: 32px 20px !important;
  }
}

@media (max-width: 767.98px) {
  .gs-featured-product-section,
  .gs-featured-product-section.bg-white {
    margin: 0 10px;
    padding: 20px 12px 28px !important;
    border-radius: 16px;
  }
}

/* Extra-small phones: minimal side padding so cards don't feel cramped */
@media (max-width: 400px) {
  .gs-featured-product-section,
  .gs-featured-product-section.bg-white {
    margin: 0 6px;
    padding: 16px 8px 24px !important;
    border-radius: 14px;
  }

  .featured-mobile-scroll .fms-column {
    flex: 0 0 calc(50% - 3px) !important;
    width: calc(50% - 3px) !important;
    min-width: calc(50% - 3px) !important;
    gap: 6px !important;
  }

  .featured-mobile-scroll {
    gap: 6px !important;
  }
}
/* ========================================================= */

/* ── Mobile sidebar — services & about menu additions ────────── */

/* Section label inside accordion (e.g. "Network Installation") */
.mob-sub-section-label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #FFA500;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  padding: 14px 16px 6px;
  margin-top: 4px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.mob-sub-section-label:first-child { border-top: none; margin-top: 0; }

/* Indented sub-links (one level deeper) */
.mob-sub-link--indent {
  padding-left: 32px !important;
  font-size: 13px !important;
  color: #aaaaaa !important;
}
.mob-sub-link--indent::before {
  content: "–";
  margin-right: 6px;
  color: rgba(255,165,0,.4);
}
.mob-sub-link--indent:hover { color: #FFA500 !important; }

/* Quote CTA button inside sidebar */
.mob-sub-quote-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 12px 4px;
  padding: 11px 18px;
  background: linear-gradient(135deg, #FFA500, #e08e00);
  color: #111111 !important;
  font-size: 13px;
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
  transition: opacity .2s, transform .2s;
}
.mob-sub-quote-btn:hover {
  opacity: .9;
  transform: translateY(-1px);
  color: #111111 !important;
}

/* mob-sub-link icon support (about section links with svg) */
.mob-sub-link svg {
  flex-shrink: 0;
  opacity: .6;
  transition: opacity .2s;
}
.mob-sub-link:hover svg { opacity: 1; }


/* ================================================================
   ABOUT GOTECH STRIP — after hero section
   ================================================================ */

/* ── Section wrapper: clearly separated from hero ── */
.gs-about-strip-section {
  background: linear-gradient(160deg, #f8f8f8 0%, #efefef 100%);
  padding: 72px 0 80px;
  position: relative;
  z-index: 1;
  /* Top shadow bridge that lifts the section away from the hero */
  border-top: 4px solid #FFA500;
  box-shadow: 0 -6px 0 0 #111111; /* hero bg colour bleeds up, gold line cuts it */
}

/* Subtle decorative pattern overlay */
.gs-about-strip-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.04) 1px, transparent 0);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

.gs-about-strip-section > * { position: relative; z-index: 1; }
.gs-about-strip-section .container { position: relative; z-index: 1; }

/* ── Inner flex row ── */
.gs-about-strip-inner {
  display: flex;
  align-items: stretch;
  gap: 32px;
}

/* ── Left text column ── */
.gs-about-strip-text {
  flex: 0 0 auto;
  width: 330px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 32px;
  border-right: 1px solid rgba(0,0,0,0.08);
}

.gs-about-strip-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.gs-about-strip-bar {
  display: inline-block;
  width: 36px;
  height: 3px;
  background-color: #FFA500;
  border-radius: 2px;
  flex-shrink: 0;
}

.gs-about-strip-eyebrow span:last-child {
  color: #FFA500;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.gs-about-strip-heading {
  font-size: 2rem;
  font-weight: 800;
  color: #111111;
  line-height: 1.2;
  margin-bottom: 16px;
}

.gs-about-strip-highlight {
  color: #FFA500;
}

.gs-about-strip-desc {
  color: #777777;
  font-size: 14px;
  line-height: 1.75;
  margin: 0;
}

/* ── Cards row wrapper ── */
.gs-about-strip-cards-row {
  display: flex;
  flex: 1;
  gap: 20px;
}

/* ================================================================
   CARDS — Beautiful rounded design
   ================================================================ */
.gs-about-card {
  flex: 1;
  border-radius: 24px;
  padding: 38px 32px 34px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease;
  /* Soft shadow by default */
  box-shadow: 0 4px 24px rgba(0,0,0,0.1);
}

.gs-about-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 56px rgba(0,0,0,0.2);
}

/* ── Dark card ── */
.gs-about-card--dark {
  background: linear-gradient(145deg, #1e1e1e 0%, #141414 100%);
}

/* Decorative amber glow blob top-right */
.gs-about-card--dark::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(255,165,0,0.18) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* Dot pattern overlay */
.gs-about-card--dark::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.03) 1px, transparent 0);
  background-size: 20px 20px;
  border-radius: 24px;
  pointer-events: none;
}

/* ── Gold card ── */
.gs-about-card--gold {
  background: linear-gradient(145deg, #ffb600 0%, #FFA500 60%, #f59e00 100%);
  box-shadow: 0 4px 24px rgba(255,165,0,0.35);
}

.gs-about-card--gold::before {
  content: '';
  position: absolute;
  bottom: -30px;
  left: -20px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.gs-about-card--gold:hover {
  box-shadow: 0 24px 56px rgba(255,165,0,0.4);
}

/* ── Icon circles ── */
.gs-about-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 20px; /* squircle shape */
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.gs-about-card--dark .gs-about-card-icon {
  background: rgba(255,165,0,0.12);
  border: 1.5px solid rgba(255,165,0,0.25);
  box-shadow: 0 4px 16px rgba(255,165,0,0.15);
}

.gs-about-card--gold .gs-about-card-icon {
  background: rgba(0,0,0,0.14);
  border: 1.5px solid rgba(0,0,0,0.1);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

/* ── Titles ── */
.gs-about-card-title {
  font-size: 1.3rem;
  font-weight: 800;
  margin: 0;
  line-height: 1.2;
  position: relative;
  z-index: 1;
}

.gs-about-card--dark .gs-about-card-title { color: #ffffff; }
.gs-about-card--gold .gs-about-card-title { color: #111111; }

/* ── Descriptions ── */
.gs-about-card-desc {
  font-size: 13.5px;
  line-height: 1.7;
  margin: 0;
  flex: 1;
  position: relative;
  z-index: 1;
}

.gs-about-card--dark .gs-about-card-desc { color: rgba(255,255,255,0.6); }
.gs-about-card--gold .gs-about-card-desc { color: rgba(0,0,0,0.6); }

/* ── Buttons ── */
.gs-about-card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 50px; /* pill shape */
  padding: 12px 26px;
  align-self: flex-start;
  transition: all 0.25s ease;
  white-space: nowrap;
  margin-top: 4px;
  position: relative;
  z-index: 1;
  letter-spacing: 0.3px;
}

.gs-about-card-btn--outline {
  background-color: transparent;
  border: 2px solid rgba(255,165,0,0.6);
  color: #FFA500;
}

.gs-about-card-btn--outline:hover {
  background-color: #FFA500;
  border-color: #FFA500;
  color: #111111;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255,165,0,0.35);
}

.gs-about-card-btn--dark {
  background-color: #111111;
  border: 2px solid #111111;
  color: #FFA500;
}

.gs-about-card-btn--dark:hover {
  background-color: #000000;
  border-color: #000000;
  color: #FFA500;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

/* ================================================================
   ABOUT STRIP — RESPONSIVE
   ================================================================ */

@media (max-width: 1100px) {
  .gs-about-strip-text {
    width: 290px;
    padding-right: 24px;
  }
  .gs-about-strip-heading { font-size: 1.75rem; }
}

/* Tablet: stack text full-width, cards side-by-side below */
@media (max-width: 991px) {
  .gs-about-strip-section { padding: 56px 0 64px; }
  .gs-about-strip-inner   { flex-direction: column; gap: 28px; }
  .gs-about-strip-text {
    width: 100%;
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-bottom: 24px;
    max-width: 600px;
  }
  .gs-about-strip-heading { font-size: 1.85rem; }
  .gs-about-strip-cards-row { gap: 16px; }
  .gs-about-card { border-radius: 20px; padding: 30px 26px; }
}

/* ================================================================
   MOBILE ≤ 575px — Stacked, beautiful, fully separated
   ================================================================ */
@media (max-width: 575px) {

  /* Clear visual break from the hero */
  .gs-about-strip-section {
    padding: 40px 0 48px;
    border-top: 3px solid #FFA500;
    box-shadow: 0 -4px 0 0 #111111;
    background: linear-gradient(160deg, #f9f9f9 0%, #eeeeee 100%);
  }

  .gs-about-strip-inner   { gap: 24px; }

  .gs-about-strip-text {
    width: 100%;
    padding-right: 0;
    border-right: none;
    border-bottom: none;
    padding-bottom: 0;
  }

  .gs-about-strip-heading { font-size: 1.6rem; }
  .gs-about-strip-desc    { font-size: 13.5px; }

  /* Cards: full-width stacked, beautiful rounded corners */
  .gs-about-strip-cards-row {
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }

  .gs-about-card {
    width: 100%;
    border-radius: 20px;
    padding: 28px 24px 26px;
    gap: 14px;
    /* Lift each card off the page background */
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  }

  .gs-about-card--gold {
    box-shadow: 0 8px 32px rgba(255,165,0,0.3);
  }

  /* Icon squircle — slightly smaller */
  .gs-about-card-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
  }

  .gs-about-card-icon svg { width: 32px; height: 32px; }

  .gs-about-card-title { font-size: 1.2rem; }
  .gs-about-card-desc  { font-size: 13px; }

  /* Pill buttons go full-width on mobile */
  .gs-about-card-btn {
    width: 100%;
    padding: 13px 20px;
    font-size: 13px;
    border-radius: 50px;
    margin-top: 4px;
  }

  /* Keep hover lift disabled on touch */
  .gs-about-card:hover {
    transform: none;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  }
  .gs-about-card--gold:hover {
    box-shadow: 0 8px 32px rgba(255,165,0,0.3);
  }
}

/* Very small phones */
@media (max-width: 380px) {
  .gs-about-strip-section { padding: 32px 0 40px; }
  .gs-about-strip-heading { font-size: 1.4rem; }
  .gs-about-card { padding: 24px 20px 22px; border-radius: 18px; }
  .gs-about-card-icon { width: 54px; height: 54px; border-radius: 14px; }
  .gs-about-card-icon svg { width: 28px; height: 28px; }
  .gs-about-card-title { font-size: 1.1rem; }
  .gs-about-card-btn  { padding: 12px 16px; font-size: 12.5px; }
}


/* ================================================================
   PRODUCT CARD — RESPONSIVE IMAGE FIX (UPDATED)
   Uses aspect-ratio so the image area always scales with card
   width — no fixed px heights that break on 2-column mobile grids.
   ================================================================ */

/* --- Image wrapper: column stack (image frame on top, cart bar below) --- */
.single-product .img-wrapper {
  aspect-ratio: auto !important;
  height: auto !important;
  display: flex !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch !important;
  background-color: #f7f8fc !important;
  overflow: hidden !important;
  position: relative !important;
}

/* --- Image frame keeps a 4:3 ratio at every screen width --- */
.single-product .sp-img-link {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  overflow: hidden !important;
}

/* --- Image: always contain, never crop --- */
.single-product .img-wrapper .product-img,
.single-product .sp-img-link .product-img {
  position: absolute !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 16px !important;
  display: block !important;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

@media (max-width: 767.98px) {
  .single-product .img-wrapper .product-img,
  .single-product .sp-img-link .product-img {
    padding: 10px !important;
  }
}

@media (max-width: 479.98px) {
  .single-product .img-wrapper .product-img,
  .single-product .sp-img-link .product-img {
    padding: 8px !important;
  }
}

/* Subtle zoom still works on hover */
.single-product:hover .img-wrapper .product-img,
.single-product:hover .sp-img-link .product-img {
  transform: scale(1.06) !important;
}

/* --- Best-seller section: dark background variant --- */
.gs-bestseller-section .img-wrapper {
  background-color: #141414 !important;
}
/* Ensure the inner image link keeps its rounded corners */
.gs-bestseller-section .sp-img-link {
  border-radius: 14px !important;
  overflow: hidden !important;
}

/* --- Category grid --- */
.cat-product-area .single-product .img-wrapper {
  background-color: #f8f8f8 !important;
}

/* --- Featured section --- */
.gs-featured-product-section .single-product .img-wrapper {
  background-color: #f8f8f8 !important;
}

/* --- Explore section --- */
.gs-explore-section .single-product .img-wrapper {
  background-color: #f8f8f8 !important;
}

/* ================================================================
   GLOBAL — Rounded image boxes & cart buttons on ALL product cards
   ================================================================ */

/* Image wrapper: padding creates the inset gap that makes the
   rounded sp-img-link corners actually visible.
   overflow:hidden MUST stay — it clips any absolute children. */
.single-product .img-wrapper {
  overflow: hidden !important;
  border-radius: 14px 14px 0 0 !important;
  padding: 8px 8px 0 !important;
}

/* Every product image link box: rounded on all four sides. */
.single-product .sp-img-link {
  border-radius: 10px !important;
  overflow: hidden !important;
}

/* Add-to-cart is now in content-wrapper — static, always visible */
.single-product .content-wrapper .add-to-cart {
  position: static !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  padding: 0 !important;
  background: transparent !important;
  border-top: none !important;
  -webkit-transform: none !important;
  -ms-transform: none !important;
  transform: none !important;
  -webkit-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
  margin-top: 2px;
}

/* List-view card image box */
.single-product-list-view .img-wrapper {
  border-radius: 14px !important;
  overflow: hidden !important;
}

/* sp-cart-btn (grid / BSP cards) — always rounded */
.single-product .sp-cart-btn,
.single-product .sp-cart-btn--oos {
  border-radius: 12px !important;
}

/* add-cart (list-view & featured cards) — always rounded */
.single-product-list-view .add-cart,
.single-product .add-cart {
  border-radius: 12px !important;
}

/* Mobile: keep mobile override rounded too */
@media (max-width: 767.98px) {
  .single-product .sp-cart-btn,
  .single-product .sp-cart-btn--oos {
    border-radius: 10px !important;
  }
  .single-product-list-view .add-cart,
  .single-product .add-cart {
    border-radius: 10px !important;
  }
}


/* ================================================================
   PRODUCT DETAIL PAGE — Professional Redesign
   ================================================================ */

/* ── Page wrapper ── */
.single-product-details-content-wrapper {
  padding: 40px 0 56px;
  background: #f8f9fa;
}

/* ── Product breadcrumb ── */
.product-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  font-size: 13px;
}
.product-breadcrumb li a {
  color: #666;
  text-decoration: none;
  transition: color 0.2s;
}
.product-breadcrumb li a:hover { color: #FFA500; }
.product-breadcrumb li + li::before {
  content: '›';
  margin-right: 6px;
  color: #bbb;
}
.product-breadcrumb li:last-child a {
  color: #333;
  font-weight: 500;
  pointer-events: none;
}

/* ── Gallery ── */
.gs-product-details-gallery-wrapper {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #ebebeb;
  padding: 16px;
  position: sticky;
  top: 90px;
  box-shadow: 0 2px 20px rgba(0,0,0,0.06);
}

.product-main-slider img.main-img {
  width: 100%;
  height: 420px;
  object-fit: contain;
  border-radius: 8px;
  background: #f8f9fa;
}

.product-nav-slider {
  margin-top: 12px;
}

.product-nav-slider img.nav-img {
  width: 72px !important;
  height: 72px !important;
  object-fit: contain;
  border-radius: 6px;
  border: 2px solid transparent;
  background: #f0f0f0;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
  padding: 4px;
}

.product-nav-slider img.nav-img:hover,
.product-nav-slider .slick-current img.nav-img {
  border-color: #FFA500;
  transform: scale(1.05);
}

/* ── Right panel card ── */
.product-info-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #ebebeb;
  padding: 28px 28px 24px;
  box-shadow: 0 2px 20px rgba(0,0,0,0.06);
  height: 100%;
}

/* ── Product name ── */
.product-info-wrapper h3 {
  font-size: 22px;
  font-weight: 700;
  color: #111;
  line-height: 1.35;
  margin-bottom: 14px;
  letter-spacing: -0.3px;
}

/* ── Price row ── */
.price-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.price-wrapper h5:first-child {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #111 !important;
  margin: 0 !important;
  line-height: 1;
}

.price-wrapper h5 del {
  font-size: 16px !important;
  color: #aaa !important;
  font-weight: 400 !important;
}

.price-wrapper .product-badge {
  background: linear-gradient(135deg, #ff4c3b, #e63946);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.3px;
}

/* ── Rating row ── */
.rating-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0 14px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 16px;
}

.rating-wrapper svg { flex-shrink: 0; }

.rating-wrapper .rating {
  font-size: 13px;
  color: #555;
  font-weight: 500;
}

/* ── Trust badges strip ── */
.pd-trust-strip {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.pd-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f5f5f5;
  border: 1px solid #e8e8e8;
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  color: #444;
  white-space: nowrap;
  transition: border-color 0.2s, background 0.2s;
}

.pd-trust-badge svg,
.pd-trust-badge i {
  color: #FFA500;
  font-size: 13px;
}

.pd-trust-badge:hover {
  border-color: #FFA500;
  background: #fff8ec;
}

/* ── Stock / meta info ── */
.product-stocks-wraper {
  background: #fafafa;
  border: 1px solid #ebebeb;
  border-radius: 8px;
  padding: 14px 16px;
  margin: 16px 0;
}

.product-stocks-wraper ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}

.product-stocks-wraper ul li {
  font-size: 13px;
  color: #555;
  line-height: 1.5;
}

.product-stocks-wraper ul li b {
  color: #222;
  font-weight: 600;
}

.stock-availability {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
}

.stock-availability:not(.out-stock) {
  background: #eafbee;
  color: #22863a;
  border: 1px solid #b7e4c7;
}

.stock-availability.out-stock {
  background: #fff0f0;
  color: #cb2431;
  border: 1px solid #ffc0c0;
}

/* In-stock dot indicator */
.stock-availability:not(.out-stock)::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22863a;
  display: inline-block;
  animation: pulse-green 1.5s infinite;
}

@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,134,58,0.5); }
  50% { box-shadow: 0 0 0 4px rgba(34,134,58,0); }
}

/* ── Quantity selector ── */
.add-qty-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0 12px;
}

.add-qty-wrapper .varition-title {
  font-size: 13px;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
}

.product-input-wrapper {
  display: flex;
  align-items: center;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  transition: border-color 0.2s;
}

.product-input-wrapper:focus-within {
  border-color: #FFA500;
}

.product-input-wrapper .action-btn {
  width: 38px;
  height: 42px;
  background: #f5f5f5;
  border: none;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  line-height: 1;
}

.product-input-wrapper .action-btn:hover {
  background: #FFA500;
  color: #fff;
}

.product-input-wrapper .qty-input.qttotal {
  width: 52px;
  text-align: center;
  border: none;
  border-left: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  font-size: 15px;
  font-weight: 700;
  color: #111;
  background: #fff;
  height: 42px;
  outline: none;
}

/* ── CTA buttons ── */
.row.row-cols-2 .template-btn {
  height: 50px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 8px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  transition: all 0.25s;
}

.template-btn.dark-btn {
  background: #111 !important;
  border-color: #111 !important;
  color: #fff !important;
}

.template-btn.dark-btn:hover {
  background: #333 !important;
  border-color: #333 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.template-btn:not(.dark-btn):not(.dark-outline) {
  background: #FFA500 !important;
  border-color: #FFA500 !important;
  color: #111 !important;
}

.template-btn:not(.dark-btn):not(.dark-outline):hover {
  background: #e6940a !important;
  border-color: #e6940a !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(255,165,0,0.35);
}

/* ── Wishlist / Compare / Report row ── */
.wish-compare-report-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 14px 0 0;
}

.wish-compare-report-wrapper .link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #555;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.wish-compare-report-wrapper .link:hover { color: #FFA500; }

.wish-compare-report-wrapper .link svg path {
  stroke: currentColor;
}

/* ── Divider ── */
.product-info-card hr,
.product-info-wrapper ~ hr,
form > hr {
  border-color: #f0f0f0;
  margin: 16px 0;
}

/* ── Share row ── */
.share-links h4 {
  font-size: 13px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.share-links-wrapper {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.share-links-wrapper a svg {
  border-radius: 50%;
  transition: transform 0.2s, box-shadow 0.2s;
}

.share-links-wrapper a:hover svg {
  transform: scale(1.12);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* ── Sold-by / store section ── */
.store-seller-wrapper {
  background: linear-gradient(135deg, #fafafa 0%, #fff8ec 100%);
  border: 1px solid #e8e8e8;
  border-left: 4px solid #FFA500;
  border-radius: 10px;
  padding: 18px 20px;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
}

.store-seller-wrapper span {
  font-size: 13px;
  color: #555;
}

.store-seller-wrapper span b {
  color: #111;
  font-weight: 700;
}

.store-seller-wrapper .verify-link {
  color: #22863a;
  font-size: 12px;
  font-weight: 600;
  margin-left: 4px;
  text-decoration: none;
}

.store-seller-wrapper .action-btns-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.store-seller-wrapper .template-btn.dark-outline {
  height: 38px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 7px;
  padding: 0 16px;
  border: 1.5px solid #333 !important;
  color: #333 !important;
  background: transparent !important;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition: all 0.2s;
}

.store-seller-wrapper .template-btn.dark-outline:hover {
  border-color: #FFA500 !important;
  color: #FFA500 !important;
  background: #fff8ec !important;
}

/* ── Tabs section ── */
.tab-product-des-wrapper {
  padding: 40px 0 24px;
  background: #fff;
  border-top: 1px solid #ebebeb;
}

.tab-product-des-wrapper .nav-tabs {
  border-bottom: 2px solid #ebebeb;
  gap: 4px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.tab-product-des-wrapper .nav-tabs::-webkit-scrollbar { display: none; }

.tab-product-des-wrapper .nav-tabs .nav-link {
  font-size: 14px;
  font-weight: 600;
  color: #666;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  padding: 12px 22px;
  background: transparent;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.tab-product-des-wrapper .nav-tabs .nav-link:hover {
  color: #FFA500;
  border-bottom-color: rgba(255,165,0,0.4);
}

.tab-product-des-wrapper .nav-tabs .nav-link.active {
  color: #111;
  border-bottom: 3px solid #FFA500;
  background: transparent;
}

.tab-product-des-wrapper .tab-content {
  padding: 28px 0 12px;
  font-size: 15px;
  color: #444;
  line-height: 1.8;
}

/* Description content polish */
.tab-product-des-wrapper .tab-pane p {
  margin-bottom: 14px;
}

.tab-product-des-wrapper .tab-pane h1,
.tab-product-des-wrapper .tab-pane h2,
.tab-product-des-wrapper .tab-pane h3,
.tab-product-des-wrapper .tab-pane h4 {
  color: #111;
  font-weight: 700;
  margin-top: 24px;
  margin-bottom: 12px;
}

.tab-product-des-wrapper .tab-pane ul li,
.tab-product-des-wrapper .tab-pane ol li {
  margin-bottom: 6px;
}

/* ── Reviews ── */
.review-tab-content-wrapper { margin-top: 4px; }

.all-comments { list-style: none; padding: 0; margin: 0; }

.all-comments li {
  border-bottom: 1px solid #f0f0f0;
  padding: 20px 0;
}

.all-comments li:last-child { border-bottom: none; }

.single-comment {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.single-comment .left-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 72px;
}

.single-comment .left-area img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ebebeb;
}

.single-comment .left-area .name {
  font-size: 12px;
  font-weight: 600;
  color: #333;
  text-align: center;
  margin: 0;
}

.reating-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.reating-area .stars {
  display: flex;
  align-items: center;
  gap: 3px;
  background: #FFA500;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
}

.reating-area .date {
  font-size: 11px;
  color: #999;
  margin: 0;
}

.single-comment .right-area { flex: 1; }

.single-comment .comment-body p {
  font-size: 14px;
  color: #444;
  line-height: 1.7;
  margin: 0;
}

/* Review form */
.review-area { margin: 24px 0 16px; }

.review-area .title {
  font-size: 16px;
  font-weight: 700;
  color: #111;
  margin-bottom: 12px;
}

.star-list {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.star-list li {
  cursor: pointer;
  padding: 8px 14px;
  border: 1.5px solid #e0e0e0;
  border-radius: 6px;
  color: #ccc;
  transition: all 0.2s;
}

.star-list li.active,
.star-list li:hover {
  border-color: #FFA500;
  color: #FFA500;
  background: #fff8ec;
}

.write-comment-area textarea {
  width: 100%;
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 14px;
  color: #333;
  min-height: 110px;
  resize: vertical;
  transition: border-color 0.2s;
  outline: none;
}

.write-comment-area textarea:focus {
  border-color: #FFA500;
}

/* ── Related products section ── */
.gs-product-cards-slider-area {
  padding: 40px 0 48px;
  background: #f8f9fa;
}

.gs-product-cards-slider-area .title {
  font-size: 22px;
  font-weight: 800;
  color: #111;
  margin-bottom: 28px;
  position: relative;
  display: inline-block;
}

.gs-product-cards-slider-area .title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 40px;
  height: 3px;
  background: #FFA500;
  border-radius: 2px;
}

.more-products-by-seller.gs-product-cards-slider-area {
  background: #fff;
  border-top: 1px solid #ebebeb;
}

/* ── Breadcrumb section ── */
.gs-breadcrumb-section {
  padding: 36px 0;
  background-size: cover;
  background-position: center;
  position: relative;
}

.gs-breadcrumb-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.45) 100%);
}

.gs-breadcrumb-section .content-wrapper {
  position: relative;
  z-index: 1;
}

.gs-breadcrumb-section .breadcrumb-title {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
  letter-spacing: -0.3px;
}

.gs-breadcrumb-section .bread-menu {
  list-style: none;
  display: flex;
  gap: 8px;
  padding: 0;
  margin: 0;
}

.gs-breadcrumb-section .bread-menu li a {
  color: rgba(255,255,255,0.75);
  font-size: 13px;
  text-decoration: none;
  transition: color 0.2s;
}

.gs-breadcrumb-section .bread-menu li a:hover { color: #FFA500; }

.gs-breadcrumb-section .bread-menu li + li::before {
  content: '›';
  margin-right: 8px;
  color: rgba(255,255,255,0.4);
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .gs-product-details-gallery-wrapper {
    position: static;
    margin-bottom: 0;
  }
  .product-main-slider img.main-img {
    height: 320px;
  }
  .product-info-card {
    padding: 22px 18px 20px;
  }
}

@media (max-width: 575px) {
  .product-main-slider img.main-img {
    height: 260px;
  }
  .product-info-wrapper h3 {
    font-size: 18px;
  }
  .price-wrapper h5:first-child {
    font-size: 22px !important;
  }
  .add-qty-wrapper {
    flex-wrap: wrap;
    gap: 10px;
  }
  .store-seller-wrapper {
    flex-direction: column;
    align-items: flex-start;
  }
  .store-seller-wrapper .action-btns-wrapper {
    margin-left: 0;
  }
  .pd-trust-strip {
    gap: 4px;
  }
  .pd-trust-badge {
    font-size: 11px;
    padding: 4px 10px;
  }
  .tab-product-des-wrapper .nav-tabs .nav-link {
    padding: 10px 14px;
    font-size: 13px;
  }
}


/* ================================================================
   LOGIN PAGE — Split-panel redesign
   ================================================================ */

/* ── Full-page layout ── */
.gs-login-section {
  min-height: 100vh;
  display: flex;
  align-items: stretch;
}

.gs-login-container {
  display: flex;
  width: 100%;
  min-height: 100vh;
}

/* ================================================================
   LEFT PANEL — dark brand side
   ================================================================ */
.gs-login-left {
  flex: 0 0 45%;
  background: linear-gradient(145deg, #111111 0%, #1a1a1a 50%, #0d0d0d 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 56px;
}

/* Gold top accent bar */
.gs-login-left::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #FFA500, #ffcc44, #FFA500);
}

/* Subtle grid texture */
.gs-login-left::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,165,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,165,0,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.gs-login-left-inner {
  position: relative;
  z-index: 1;
  max-width: 400px;
  width: 100%;
}

/* Logo */
.gs-login-logo {
  display: inline-block;
  margin-bottom: 52px;
}

.gs-login-logo img {
  height: 42px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

/* Hero text */
.gs-login-hero { margin-bottom: 40px; }

.gs-login-hero-title {
  font-size: 38px;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.18;
  letter-spacing: -1px;
  margin-bottom: 16px;
}

.gs-login-hero-title br { display: block; }

/* Gold highlight on first word */
.gs-login-hero-title span { color: #FFA500; }

.gs-login-hero-sub {
  font-size: 15px;
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
  max-width: 340px;
  margin: 0;
}

/* Trust bullets */
.gs-login-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gs-login-bullets li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  font-weight: 500;
}

.gs-login-bullet-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255,165,0,0.12);
  border: 1px solid rgba(255,165,0,0.25);
  border-radius: 8px;
  color: #FFA500;
  flex-shrink: 0;
  transition: background 0.2s;
}

.gs-login-bullets li:hover .gs-login-bullet-icon {
  background: rgba(255,165,0,0.22);
}

/* Decorative blobs */
.gs-login-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.gs-login-blob--1 {
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(255,165,0,0.12) 0%, transparent 70%);
  bottom: -80px;
  right: -80px;
}

.gs-login-blob--2 {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255,165,0,0.08) 0%, transparent 70%);
  top: 60px;
  left: -40px;
}

/* ================================================================
   RIGHT PANEL — form side
   ================================================================ */
.gs-login-right {
  flex: 1;
  background: #f7f8fa;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  overflow-y: auto;
}

.gs-login-form-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e8e8e8;
  box-shadow: 0 4px 32px rgba(0,0,0,0.07);
  padding: 44px 44px 36px;
  width: 100%;
  max-width: 460px;
}

/* Header */
.gs-login-form-header { margin-bottom: 32px; }

.gs-login-form-title {
  font-size: 26px;
  font-weight: 800;
  color: #111;
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

.gs-login-form-sub {
  font-size: 14px;
  color: #777;
  margin: 0;
}

.gs-login-form-sub a {
  color: #FFA500;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}

.gs-login-form-sub a:hover { color: #e6940a; }

/* Form groups */
.gs-form-group { margin-bottom: 20px; }

.gs-form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  margin-bottom: 7px;
  letter-spacing: 0.1px;
}

.gs-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.gs-input-icon {
  position: absolute;
  left: 14px;
  color: #aaa;
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 1;
  transition: color 0.2s;
}

.gs-form-input {
  width: 100%;
  height: 50px;
  padding: 0 44px 0 42px;
  background: #f9f9f9;
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  font-size: 14px;
  color: #222;
  outline: none;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
}

.gs-form-input::placeholder { color: #bbb; }

.gs-form-input:focus {
  border-color: #FFA500;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255,165,0,0.12);
}

.gs-input-wrapper:focus-within .gs-input-icon { color: #FFA500; }

.gs-form-input.is-invalid {
  border-color: #e63946;
  background: #fff9f9;
}

.gs-form-input.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(230,57,70,0.1);
}

.gs-field-error {
  display: block;
  font-size: 12px;
  color: #e63946;
  margin-top: 5px;
  font-weight: 500;
}

/* Password wrapper — keeps eye icon inside the input */
.gs-pass-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.gs-pass-wrapper .gs-form-input {
  padding-right: 44px;
}

.gs-pass-wrapper .eye-off,
.gs-pass-wrapper .eye-on {
  position: absolute;
  right: 14px;
  cursor: pointer;
  color: #aaa;
  transition: color 0.2s;
}

.gs-pass-wrapper .eye-off:hover,
.gs-pass-wrapper .eye-on:hover { color: #FFA500; }

/* Remove the left icon gap since password icon is already applied */
.gs-input-wrapper .gs-pass-wrapper { width: 100%; }

/* Remember + forgot row */
.gs-login-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 8px;
}

.gs-login-meta .gs-checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #555;
  font-weight: 500;
}

.gs-forgot-link {
  font-size: 13px;
  color: #FFA500;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}

.gs-forgot-link:hover { color: #e6940a; }

/* Submit button */
.gs-login-submit-btn {
  width: 100%;
  height: 52px;
  background: linear-gradient(135deg, #FFA500 0%, #ffbf33 100%);
  color: #111;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.25s;
  box-shadow: 0 4px 16px rgba(255,165,0,0.3);
}

.gs-login-submit-btn:hover {
  background: linear-gradient(135deg, #e6940a 0%, #FFA500 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(255,165,0,0.4);
}

.gs-login-submit-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(255,165,0,0.3);
}

/* Divider */
.gs-login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 20px;
  color: #bbb;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.gs-login-divider::before,
.gs-login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e8e8e8;
}

/* Social grid */
.gs-social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
  margin-bottom: 4px;
}

.gs-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  border-radius: 9px;
  border: 1.5px solid #e0e0e0;
  background: #fff;
  color: #333;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
}

.gs-social-btn:hover {
  border-color: #ccc;
  background: #f5f5f5;
  color: #111;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

.gs-social-btn--otp:hover  { border-color: #2196F3; background: #f0f8ff; }
.gs-social-btn--google:hover { border-color: #4285F4; background: #f8f9ff; }
.gs-social-btn--facebook:hover { border-color: #1877F2; background: #f0f5ff; }

/* Terms note */
.gs-login-terms {
  font-size: 12px;
  color: #aaa;
  text-align: center;
  margin: 24px 0 0;
  line-height: 1.6;
}

.gs-login-terms a {
  color: #888;
  text-decoration: underline;
  transition: color 0.2s;
}

.gs-login-terms a:hover { color: #FFA500; }

/* ── Hide breadcrumb on login page ── */
.gs-login-section ~ .gs-breadcrumb-section,
.gs-reg-section { display: none; }

/* ================================================================
   RESPONSIVE
   ================================================================ */

/* Tablet: stack panels */
@media (max-width: 991px) {
  .gs-login-container { flex-direction: column; }

  .gs-login-left {
    flex: none;
    padding: 40px 32px 48px;
    min-height: auto;
  }

  .gs-login-left-inner { max-width: 100%; }

  .gs-login-hero-title { font-size: 28px; }

  .gs-login-logo { margin-bottom: 28px; }

  .gs-login-hero { margin-bottom: 24px; }

  .gs-login-blob--1 { width: 200px; height: 200px; }
  .gs-login-blob--2 { display: none; }

  .gs-login-right {
    padding: 40px 24px;
    background: #f7f8fa;
  }

  .gs-login-form-card {
    padding: 36px 28px 28px;
    max-width: 520px;
  }
}

/* Mobile */
@media (max-width: 575px) {
  .gs-login-left {
    display: none;
  }

  .gs-login-hero-title { font-size: 24px; letter-spacing: -0.5px; }

  .gs-login-bullets { gap: 10px; }
  .gs-login-bullets li { font-size: 13px; }

  .gs-login-right { padding: 28px 16px 40px; }

  .gs-login-form-card {
    padding: 28px 20px 24px;
    border-radius: 12px;
    box-shadow: none;
    border-color: #e8e8e8;
  }

  .gs-login-form-title { font-size: 22px; }

  .gs-login-submit-btn { height: 50px; font-size: 14px; }
}


/* ================================================================
   CART PAGE — Full Redesign
   Brand palette: #111111 (dark) · #FFA500 (gold) · #fff (white)
   ================================================================ */

/* ── Section spacing ── */
.gs-cart-section {
  padding: 60px 0 80px;
  background: #f5f6f8;
  min-height: 60vh;
}

/* ── Breadcrumb enhancements ── */
.gs-cart-breadcrumb {
  position: relative;
  overflow: hidden;
}
.gs-breadcrumb-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(17,17,17,0.78) 0%, rgba(17,17,17,0.55) 100%);
  z-index: 1;
}
.gs-cart-breadcrumb .container {
  position: relative;
  z-index: 2;
}
.gs-breadcrumb-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.gs-breadcrumb-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255,165,0,0.12);
  border: 1.5px solid rgba(255,165,0,0.35);
  margin-bottom: 6px;
}

/* ── Panel card ── */
.gs-cart-panel {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 24px rgba(17,17,17,0.07);
  overflow: hidden;
}
.gs-cart-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px 18px;
  border-bottom: 1px solid #f0f0f0;
}
.gs-cart-panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  color: #111;
  letter-spacing: -0.3px;
}
.gs-cart-panel-title svg {
  color: #FFA500;
}
.gs-cart-panel-count {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: #FFA500;
  padding: 3px 12px;
  border-radius: 20px;
  letter-spacing: 0.2px;
}

/* ── Desktop Table ── */
.gs-cart-table-wrap {
  padding: 0 28px;
}
.gs-cart-table {
  width: 100%;
  border-collapse: collapse;
}
.gs-cart-table thead th {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #888;
  padding: 18px 10px 14px;
  border-bottom: 2px solid #f0f0f0;
  white-space: nowrap;
}
.gs-cart-table thead .th-product { text-align: left; padding-left: 0; }
.gs-cart-table thead .th-price,
.gs-cart-table thead .th-qty,
.gs-cart-table thead .th-subtotal { text-align: center; }
.gs-cart-table thead .th-action { width: 50px; }

.gs-cart-table tbody tr.gs-cart-row-item {
  border-bottom: 1px solid #f5f5f5;
  transition: background 0.15s;
}
.gs-cart-table tbody tr.gs-cart-row-item:last-child {
  border-bottom: none;
}
.gs-cart-table tbody tr.gs-cart-row-item:hover {
  background: #fafafa;
}
.gs-cart-table tbody td {
  padding: 20px 10px;
  vertical-align: middle;
}
.gs-cart-table tbody .td-product { padding-left: 0; }
.gs-cart-table tbody .td-price,
.gs-cart-table tbody .td-qty,
.gs-cart-table tbody .td-subtotal { text-align: center; }
.gs-cart-table tbody .td-action { text-align: center; }

/* ── Product cell ── */
.gs-cart-img-wrap {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #ebebeb;
  background: #f9f9f9;
}
.gs-cart-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}
.gs-cart-row-item:hover .gs-cart-img-wrap img {
  transform: scale(1.05);
}
.gs-cart-product-info {
  text-align: left;
}
.gs-cart-product-name {
  font-size: 14px;
  font-weight: 600;
  color: #111;
  line-height: 1.4;
  text-decoration: none;
  display: block;
  margin-bottom: 6px;
  transition: color 0.2s;
}
.gs-cart-product-name:hover {
  color: #FFA500;
}
.gs-cart-meta {
  font-size: 12px;
  color: #888;
}
.gs-cart-meta-label {
  font-weight: 600;
  color: #555;
}
.gs-cart-color-dot {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.12);
  flex-shrink: 0;
}
.gs-cart-size-badge {
  display: inline-block;
  background: #f0f0f0;
  color: #444;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.4px;
}
.gs-cart-digital-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,165,0,0.1);
  color: #cc8800;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}

/* ── Price cells ── */
.td-price {
  font-size: 14px;
  font-weight: 500;
  color: #555;
  white-space: nowrap;
}
.td-subtotal .gs-subtotal-price {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #111;
  white-space: nowrap;
}
.gs-discount-badge {
  display: inline-block;
  background: rgba(34,197,94,0.12);
  color: #16a34a;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  margin-top: 3px;
  letter-spacing: 0.3px;
}

/* ── Quantity control ── */
.gs-qty-control {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid #e5e5e5;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.gs-qty-control:hover,
.gs-qty-control:focus-within {
  border-color: #FFA500;
  box-shadow: 0 0 0 3px rgba(255,165,0,0.1);
}
.gs-qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: #f5f5f5;
  border: none;
  cursor: pointer;
  color: #333;
  transition: background 0.18s, color 0.18s;
  flex-shrink: 0;
}
.gs-qty-btn:hover {
  background: #FFA500;
  color: #111;
}
.gs-qty-btn svg {
  pointer-events: none;
}
.gs-qty-input {
  width: 40px;
  text-align: center;
  border: none;
  outline: none;
  font-size: 14px;
  font-weight: 700;
  color: #111;
  background: transparent;
  padding: 0 4px;
}
.gs-qty-control--digital {
  background: #f9f9f9;
  border-color: #e5e5e5;
  padding: 0 14px;
  height: 34px;
  cursor: default;
}
.gs-qty-static {
  font-size: 14px;
  font-weight: 700;
  color: #888;
}

/* ── Remove button ── */
.gs-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: #bbb;
  background: transparent;
  border: 1.5px solid #ebebeb;
  transition: color 0.18s, background 0.18s, border-color 0.18s;
  text-decoration: none;
}
.gs-remove-btn:hover {
  color: #ef4444;
  background: rgba(239,68,68,0.08);
  border-color: rgba(239,68,68,0.3);
}

/* ── Continue shopping ── */
.gs-cart-actions {
  padding: 18px 28px 22px;
  border-top: 1px solid #f0f0f0;
}
.gs-continue-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  text-decoration: none;
  transition: color 0.18s, gap 0.18s;
}
.gs-continue-btn:hover {
  color: #FFA500;
  gap: 12px;
}

/* ── Mobile card view ── */
.gs-cart-mobile-list {
  padding: 0 16px;
}
.gs-cart-mobile-item {
  padding: 18px 0;
  border-bottom: 1px solid #f0f0f0;
}
.gs-cart-mobile-item:last-child {
  border-bottom: none;
}
.gs-cart-mobile-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.gs-cart-mobile-info {
  flex: 1;
  min-width: 0;
}
.gs-cart-mobile-price {
  font-size: 14px;
  font-weight: 600;
  color: #111;
}
.gs-cart-mobile-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed #ebebeb;
  gap: 12px;
}
.gs-cart-mobile-subtotal {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.gs-mobile-subtotal-label {
  font-size: 12px;
  color: #888;
  font-weight: 500;
}
.gs-cart-mobile-subtotal .gs-subtotal-price {
  font-size: 15px;
  font-weight: 700;
  color: #111;
}

/* ── Order summary sidebar ── */
.gs-order-summary {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 24px rgba(17,17,17,0.07);
  overflow: hidden;
  position: sticky;
  top: 100px;
}
.gs-order-summary-header {
  background: linear-gradient(135deg, #111 0%, #2a2a2a 100%);
  padding: 22px 24px 18px;
}
.gs-order-summary-title {
  font-size: 17px;
  font-weight: 700;
  color: #fff !important;
  margin: 0;
  letter-spacing: -0.2px;
}
.gs-order-summary-body {
  padding: 22px 24px 24px;
}
.gs-order-row {
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}
.gs-order-row:last-of-type {
  border-bottom: none;
}
.gs-order-label {
  font-size: 14px;
  font-weight: 500;
  color: #555;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
}
.gs-order-item-count {
  display: inline-block;
  font-size: 12px;
  font-weight: 400;
  color: #aaa;
  margin-left: 4px;
}
.gs-order-value {
  font-size: 15px;
  font-weight: 600;
  color: #111;
  white-space: nowrap;
  margin: 0 !important;
}
.gs-order-row--discount .gs-order-label {
  color: #16a34a;
  font-weight: 600;
}
.gs-order-value--discount {
  color: #16a34a !important;
  font-weight: 700 !important;
}
.gs-order-divider {
  height: 1.5px;
  background: linear-gradient(90deg, #f0f0f0, #ebebeb);
  margin: 6px 0;
}
.gs-order-row--total {
  padding-top: 14px;
}
.gs-order-label--total {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #111 !important;
}
.gs-order-value--total {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #FFA500 !important;
}
.gs-order-tax-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #aaa;
  margin: 10px 0 16px;
  line-height: 1.5;
}
.gs-order-tax-note svg {
  flex-shrink: 0;
  color: #bbb;
}

/* ── Checkout button ── */
.gs-checkout-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #FFA500 0%, #e6920a 100%) !important;
  color: #111 !important;
  text-decoration: none;
  transition: box-shadow 0.22s, transform 0.18s !important;
  letter-spacing: 0.3px;
}
.gs-checkout-btn:hover {
  box-shadow: 0 6px 24px rgba(255,165,0,0.4) !important;
  transform: translateY(-2px) !important;
  color: #111 !important;
}
.gs-checkout-btn svg {
  transition: transform 0.2s;
  flex-shrink: 0;
}
.gs-checkout-btn:hover svg {
  transform: translateX(4px);
}

/* ── Secure badges ── */
.gs-secure-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 14px;
}
.gs-secure-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #aaa;
  letter-spacing: 0.2px;
}
.gs-secure-badge svg {
  color: #bbb;
  flex-shrink: 0;
}

/* ── Empty cart ── */
.gs-empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #fff;
  border-radius: 20px;
  padding: 70px 40px;
  box-shadow: 0 2px 24px rgba(17,17,17,0.06);
  max-width: 540px;
  margin: 0 auto;
}
.gs-empty-cart-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgba(255,165,0,0.07);
  border: 2px dashed rgba(255,165,0,0.3);
  margin-bottom: 24px;
  animation: gs-bounce-icon 2.5s ease-in-out infinite;
}
@keyframes gs-bounce-icon {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
.gs-empty-cart-title {
  font-size: 22px;
  font-weight: 700;
  color: #111;
  margin-bottom: 12px;
}
.gs-empty-cart-sub {
  font-size: 14px;
  color: #888;
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 380px;
}
.gs-start-shopping-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  padding: 13px 32px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #FFA500 0%, #e6920a 100%) !important;
  color: #111 !important;
  text-decoration: none;
  transition: box-shadow 0.22s, transform 0.18s !important;
}
.gs-start-shopping-btn:hover {
  box-shadow: 0 6px 22px rgba(255,165,0,0.4) !important;
  transform: translateY(-2px) !important;
  color: #111 !important;
}

/* ── Override legacy style.css cart section spacing & colours ── */
.gs-cart-section .gs-cart-container .gs-cart-row .cart-table .table > :not(caption) > * > * {
  padding: 0 !important;
}
.gs-cart-section .gs-cart-container .gs-cart-row .cart-summary {
  background: transparent !important;
  padding: 0 !important;
}
.gs-cart-section .gs-cart-container .gs-cart-row .cart-summary .cart-summary-title {
  color: #fff !important;
}
.gs-cart-section .gs-cart-container .gs-cart-row .cart-summary .cart-summary-content .cart-summary-subtitle {
  font-size: 14px !important;
  text-transform: none !important;
}
.gs-cart-section .gs-cart-container .gs-cart-row .cart-summary .cart-summary-content .total-cart-price {
  color: #FFA500 !important;
}

/* ================================================================
   RESPONSIVE — tablet & mobile
   ================================================================ */

@media (max-width: 991.97px) {
  .gs-cart-section {
    padding: 40px 0 60px;
  }
  .gs-order-summary {
    position: static;
    margin-top: 24px;
  }
  .gs-cart-panel-header {
    padding: 18px 20px 14px;
  }
  .gs-cart-table-wrap {
    padding: 0 16px;
  }
  .gs-cart-actions {
    padding: 16px 20px 20px;
  }
}

@media (max-width: 767.97px) {
  .gs-cart-section {
    padding: 30px 0 50px;
  }
  .gs-cart-panel-title {
    font-size: 16px;
  }
  .gs-empty-cart {
    padding: 50px 24px;
  }
  .gs-empty-cart-icon {
    width: 88px;
    height: 88px;
  }
  .gs-empty-cart-title {
    font-size: 19px;
  }
  .gs-order-summary-body {
    padding: 18px 18px 20px;
  }
  .gs-order-summary-header {
    padding: 18px 18px 14px;
  }
  .gs-secure-badges {
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 575.97px) {
  .gs-cart-section {
    padding: 20px 0 40px;
    background: #f5f6f8;
  }
  .gs-cart-panel {
    border-radius: 12px;
  }
  .gs-cart-panel-header {
    padding: 14px 14px 12px;
  }
  .gs-cart-mobile-list {
    padding: 0 12px;
  }
  .gs-cart-actions {
    padding: 14px 14px 16px;
  }
  .gs-cart-img-wrap {
    width: 64px;
    height: 64px;
    border-radius: 8px;
  }
  .gs-cart-product-name {
    font-size: 13px;
  }
  .gs-cart-mobile-price {
    font-size: 13px;
  }
  .gs-qty-btn {
    width: 30px;
    height: 30px;
  }
  .gs-qty-input {
    width: 32px;
    font-size: 13px;
  }
  .gs-order-summary {
    border-radius: 12px;
  }
  .gs-order-value--total {
    font-size: 18px !important;
  }
  .gs-checkout-btn {
    padding: 13px 18px !important;
    font-size: 14px !important;
  }
}


/* ================================================================
   CHECKOUT PAGE — Full Redesign (all 3 steps)
   Brand: #111 dark · #FFA500 gold · #f5f6f8 page bg
   ================================================================ */

/* ── Page wrapper spacing ── */
.gs-checkout-wrapper {
  padding: 56px 0 80px !important;
  background: #f5f6f8;
}
.gs-checkout-breadcrumb {
  position: relative;
  overflow: hidden;
}
.gs-checkout-breadcrumb .gs-breadcrumb-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(17,17,17,0.80) 0%, rgba(17,17,17,0.55) 100%);
  z-index: 1;
}
.gs-checkout-breadcrumb .container {
  position: relative;
  z-index: 2;
}
.gs-checkout-breadcrumb .gs-breadcrumb-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

/* ================================================================
   STEP INDICATOR
   ================================================================ */
.ck-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 44px;
}
.ck-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 2;
}
.ck-step__circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  background: #e2e2e2;
  color: #999;
  border: 2px solid #e2e2e2;
  transition: background 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s;
}
.ck-step__label {
  font-size: 13px;
  font-weight: 600;
  color: #aaa;
  letter-spacing: 0.3px;
  white-space: nowrap;
  transition: color 0.25s;
}
/* Active step */
.ck-step--active .ck-step__circle {
  background: linear-gradient(135deg, #FFA500 0%, #e6920a 100%);
  border-color: #FFA500;
  color: #111;
  box-shadow: 0 4px 18px rgba(255,165,0,0.4);
}
.ck-step--active .ck-step__label {
  color: #FFA500;
}
/* Done step */
.ck-step--done .ck-step__circle {
  background: #111;
  border-color: #111;
  color: #fff;
}
.ck-step--done .ck-step__label {
  color: #555;
}
/* Connector line */
.ck-step__connector {
  flex: 1;
  height: 2px;
  background: #e2e2e2;
  margin: 0 6px;
  margin-bottom: 28px;
  min-width: 40px;
  border-radius: 2px;
  transition: background 0.25s;
}
.ck-step__connector--done {
  background: #111;
}

/* ================================================================
   FORM CARDS
   ================================================================ */
.ck-form-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 20px rgba(17,17,17,0.07);
  overflow: visible; /* must NOT be hidden — NiceSelect dropdowns render outside the card bounds */
}
.ck-form-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 24px 16px;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
  border-radius: 16px 16px 0 0;
}
.ck-form-card__body {
  border-radius: 0 0 16px 16px;
}
.ck-form-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255,165,0,0.1);
  color: #FFA500;
  flex-shrink: 0;
}
.ck-form-card__icon--done {
  background: rgba(17,17,17,0.08);
  color: #111;
}
.ck-form-card__icon--alt {
  background: rgba(59,130,246,0.08);
  color: #3b82f6;
}
.ck-form-card__title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #111 !important;
  margin: 0 !important;
  letter-spacing: -0.2px;
}
.ck-form-card__body {
  padding: 22px 24px 24px;
}

/* ── Input overrides for new design ── */
.gs-checkout-wrapper .address-wrapper .input-wrapper {
  gap: 8px !important;
}
.gs-checkout-wrapper .address-wrapper .input-wrapper .label-cls {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #444 !important;
  letter-spacing: 0.2px;
  text-transform: uppercase !important;
}
.gs-checkout-wrapper .address-wrapper .input-wrapper .input-cls {
  padding: 12px 16px !important;
  font-size: 14px !important;
  border-radius: 10px !important;
  border: 1.5px solid #e5e5e5 !important;
  color: #111 !important;
  background: #fafafa !important;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s !important;
}
.gs-checkout-wrapper .address-wrapper .input-wrapper .input-cls:focus {
  border-color: #FFA500 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(255,165,0,0.1) !important;
  outline: none !important;
}
.gs-checkout-wrapper .address-wrapper .input-wrapper .input-cls[readonly] {
  background: #f0f0f0 !important;
  color: #777 !important;
  cursor: default;
}
.gs-checkout-wrapper .address-wrapper .input-wrapper .nice-select {
  padding: 0 !important;
  height: 46px !important;
  border-radius: 10px !important;
  border: 1.5px solid #e5e5e5 !important;
  background: #fafafa !important;
  transition: border-color 0.2s !important;
  position: relative;
  z-index: 10;
}
/* NiceSelect dropdown list must always escape overflow:hidden parents */
.gs-checkout-wrapper .address-wrapper .input-wrapper .nice-select .list {
  z-index: 9999 !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 24px rgba(17,17,17,0.12) !important;
  border: 1.5px solid #e5e5e5 !important;
  top: calc(100% + 4px) !important;
  left: 0 !important;
  width: 100% !important;
  max-height: 200px;
  overflow-y: auto;
}
.gs-checkout-wrapper .address-wrapper .input-wrapper .nice-select.open,
.gs-checkout-wrapper .address-wrapper .input-wrapper .nice-select:focus {
  border-color: #FFA500 !important;
  box-shadow: 0 0 0 3px rgba(255,165,0,0.1) !important;
}
.gs-checkout-wrapper .address-wrapper .input-wrapper .nice-select .current {
  padding: 12px 16px !important;
  font-size: 14px !important;
  color: #111 !important;
}

/* ── Checkbox / Radio wrappers ── */
.gs-checkout-wrapper .gs-checkbox-wrapper {
  padding: 12px 16px;
  border-radius: 10px;
  border: 1.5px solid #e5e5e5;
  background: #fafafa;
  transition: border-color 0.2s, background 0.2s;
  cursor: pointer;
}
.gs-checkout-wrapper .gs-checkbox-wrapper:hover {
  border-color: #FFA500;
  background: rgba(255,165,0,0.03);
}
.gs-checkout-wrapper .gs-checkbox-wrapper label:last-child {
  font-size: 14px;
  color: #444;
  font-weight: 500;
}
.gs-checkout-wrapper .gs-checkbox-wrapper .icon-label {
  width: 18px !important;
  height: 18px !important;
  border-radius: 4px !important;
  border: 1.5px solid #ccc !important;
}

/* ================================================================
   ORDER SUMMARY SIDEBAR
   ================================================================ */
.ck-summary {
  background: #fff !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 20px rgba(17,17,17,0.07) !important;
  padding: 0 !important;
  position: sticky;
  top: 100px;
  overflow: visible; /* keep dropdowns unclipped */
}
.ck-summary__header {
  background: linear-gradient(135deg, #111 0%, #2a2a2a 100%);
  padding: 20px 22px 16px;
  border-radius: 16px 16px 0 0;
}
.ck-summary__title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 0 !important;
}
.ck-summary__body {
  padding: 18px 20px 20px;
}
.ck-summary__section-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: #888 !important;
  margin-bottom: 12px !important;
}
.ck-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid #f5f5f5;
  gap: 8px;
}
.ck-price-row:last-child {
  border-bottom: none;
}
.ck-price-row span:first-child {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #555 !important;
  line-height: 1.4 !important;
}
.ck-price-row .right-side {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #111 !important;
  white-space: nowrap;
}
.ck-price-row--discount span:first-child {
  color: #16a34a !important;
}
.ck-price-row--discount .right-side {
  color: #16a34a !important;
}
.ck-summary__divider {
  height: 1.5px;
  background: linear-gradient(90deg, #f0f0f0, #ebebeb);
  margin: 10px 0 12px;
}
.ck-final-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0 14px;
}
.ck-final-price span:first-child {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #111 !important;
}
.ck-final-price .total-amount {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #FFA500 !important;
  text-align: right !important;
  line-height: 1 !important;
}

/* ── Summary section spacing ── */
.gs-checkout-wrapper .summary-inner-box {
  margin-top: 16px !important;
}
.gs-checkout-wrapper .summary-inner-box:first-child {
  margin-top: 0 !important;
}

/* ── Action buttons ── */
.ck-summary__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px !important;
}
.ck-btn-primary {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 10px;
  background: linear-gradient(135deg, #FFA500 0%, #e6920a 100%);
  color: #111 !important;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: box-shadow 0.22s, transform 0.18s;
  letter-spacing: 0.3px;
  line-height: 1;
}
.ck-btn-primary:hover {
  box-shadow: 0 6px 22px rgba(255,165,0,0.4);
  transform: translateY(-2px);
  color: #111 !important;
}
.ck-btn-primary svg {
  flex-shrink: 0;
  transition: transform 0.2s;
}
.ck-btn-primary:hover svg {
  transform: translateX(4px);
}
.ck-btn-secondary {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  background: transparent;
  color: #555 !important;
  border: 1.5px solid #e0e0e0;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.ck-btn-secondary:hover {
  border-color: #111;
  color: #111 !important;
  background: #f5f5f5;
}
.ck-btn-secondary svg {
  flex-shrink: 0;
}

/* ── Secure badge ── */
.ck-secure-badges {
  display: flex;
  justify-content: center;
  margin-top: 6px;
}
.ck-secure-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #aaa;
}
.ck-secure-badge svg {
  color: #bbb;
}

/* ================================================================
   ADDRESS REVIEW (step 2)
   ================================================================ */
.ck-addr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  background: transparent !important;
  padding: 0 !important;
}
.ck-addr-grid .single-addres {
  background: #fafafa;
  border-radius: 12px;
  padding: 16px 18px;
  border: 1px solid #f0f0f0;
}
.ck-addr-subtitle {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #FFA500;
  margin-bottom: 10px;
}
.ck-addr-grid .single-addres ul {
  gap: 10px !important;
}
.ck-addr-grid .single-addres ul li {
  gap: 10px !important;
  align-items: flex-start;
}
.ck-addr-grid .single-addres ul li svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.ck-addr-grid .single-addres ul li .title {
  font-size: 13px !important;
  color: #333 !important;
  line-height: 1.5;
  word-break: break-word;
}
/* Edit button */
.ck-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #555;
  border: 1.5px solid #e0e0e0;
  border-radius: 7px;
  padding: 5px 12px;
  background: #fff;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.ck-edit-btn:hover {
  border-color: #FFA500;
  color: #FFA500;
  background: rgba(255,165,0,0.05);
}

/* ================================================================
   PRODUCT LIST (step 2)
   ================================================================ */
.ck-product-row {
  display: flex;
  gap: 16px;
  padding: 16px 0 !important;
  border-bottom: 1px solid #f0f0f0 !important;
  align-items: flex-start;
}
.ck-product-row:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
.ck-product-img {
  flex-shrink: 0;
  width: 80px !important;
  height: 80px !important;
  border-radius: 12px !important;
  overflow: hidden;
  border: 1px solid #ebebeb;
  background: #f9f9f9;
}
.ck-product-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.ck-product-details {
  flex: 1;
  min-width: 0;
  gap: 8px !important;
}
.ck-product-details .product-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #111 !important;
  line-height: 1.4;
  display: block;
  margin-bottom: 8px;
}
.ck-product-details .product-title:hover {
  color: #FFA500 !important;
}
.ck-product-details .product-specifications-list {
  gap: 5px !important;
}
.ck-product-details .product-specifications-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.ck-product-details .specification-name {
  font-weight: 600 !important;
  color: #777 !important;
  font-size: 12px !important;
  white-space: nowrap;
}
.ck-product-details .specification {
  color: #333 !important;
  font-size: 12px !important;
}
.ck-color-swatch {
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(0,0,0,0.12) !important;
  flex-shrink: 0;
}
.ck-spec-price {
  font-weight: 700 !important;
  color: #111 !important;
}
.ck-off-badge {
  display: inline-block;
  background: rgba(34,197,94,0.12);
  color: #16a34a;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 20px;
  margin-left: 4px;
}
/* Vendor info */
.ck-vendor-info {
  border-top: 1px dashed #e5e5e5;
  padding-top: 14px !important;
  margin-top: 14px !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.ck-vendor-info ul {
  display: flex;
  flex-direction: column;
  gap: 6px !important;
}
.ck-vendor-info ul li {
  display: flex;
  gap: 8px;
  font-size: 13px;
  color: #555;
}
.ck-vendor-info ul li span:first-child {
  font-size: 12px;
  color: #888;
  min-width: 70px;
}

/* ================================================================
   SHIPPING & PACKAGING OPTIONS (step 2 summary)
   ================================================================ */
.ck-option-list {
  display: flex;
  flex-direction: column;
  gap: 8px !important;
}
.ck-option-item {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid #e5e5e5 !important;
  background: #fafafa;
  transition: border-color 0.2s, background 0.2s;
  align-items: center !important;
  cursor: pointer;
}
.ck-option-item:has(input:checked) {
  border-color: #FFA500 !important;
  background: rgba(255,165,0,0.04) !important;
}
.ck-option-item label:last-child {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #333 !important;
}

/* ================================================================
   PAYMENT METHOD LIST (step 3)
   ================================================================ */
.ck-payment-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.ck-payment-option {
  padding: 14px 18px !important;
  border-radius: 12px !important;
  border: 1.5px solid #e5e5e5 !important;
  background: #fafafa !important;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s !important;
  cursor: pointer;
  align-items: center !important;
}
.ck-payment-option:has(input:checked) {
  border-color: #FFA500 !important;
  background: rgba(255,165,0,0.04) !important;
  box-shadow: 0 2px 12px rgba(255,165,0,0.12) !important;
}
.ck-payment-option .label-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #111 !important;
}
.ck-payment-option .label-subtitle {
  font-size: 12px !important;
  color: #777 !important;
  margin-top: 2px;
}
.ck-payment-option .label-wrapper {
  gap: 4px !important;
  margin-left: 36px !important;
}
.gs-checkout-wrapper .transection-wrapper {
  margin-top: 20px !important;
  border-radius: 12px !important;
  border: 1.5px solid #f0f0f0;
  background: #fafafa !important;
  padding: 20px !important;
}

/* ================================================================
   COUPON INPUT (step 3)
   ================================================================ */
.ck-coupon-wrap {
  background: rgba(255,165,0,0.04);
  border-radius: 12px;
  padding: 14px 16px !important;
  border: 1.5px solid rgba(255,165,0,0.2);
  margin-bottom: 4px;
}
.ck-coupon-input {
  display: flex !important;
  gap: 0;
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ck-coupon-input:focus-within {
  border-color: #FFA500;
  box-shadow: 0 0 0 3px rgba(255,165,0,0.12);
}
.ck-coupon-input input {
  flex: 1;
  border: none !important;
  padding: 11px 14px !important;
  font-size: 13px !important;
  color: #111 !important;
  background: transparent !important;
  outline: none;
  width: auto !important;
}
.ck-coupon-input input::placeholder {
  color: #aaa;
}
.ck-coupon-input button {
  padding: 11px 18px !important;
  background: #111 !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border: none !important;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s !important;
  width: auto !important;
}
.ck-coupon-input button:hover {
  background: #FFA500 !important;
  color: #111 !important;
}

/* ================================================================
   LEGACY OVERRIDES — keep functionality, update look
   ================================================================ */
/* Override old checkout wrapper padding */
.gs-checkout-wrapper .checkout-step-wrapper {
  display: none !important; /* replaced by .ck-steps */
}
/* Form title inside cards */
.gs-checkout-wrapper .address-wrapper .form-title {
  margin-bottom: 0 !important;
}
/* Summary box legacy background */
.gs-checkout-wrapper .summary-box {
  background: transparent !important;
  padding: 0 !important;
  position: static !important;
  top: auto !important;
}
/* Keep old final-price working */
.gs-checkout-wrapper .summary-box .final-price {
  margin-top: 0 !important;
}
.gs-checkout-wrapper .summary-box .final-price span.total-amount {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #FFA500 !important;
}
/* Hide the old hr — replaced by ck-summary__divider */
.gs-checkout-wrapper .summary-box hr {
  display: none !important;
}
/* Old product-infos-wrapper bg */
.gs-checkout-wrapper .product-infos-wrapper {
  background: transparent !important;
  padding: 0 !important;
  margin-top: 0 !important;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 991.97px) {
  .gs-checkout-wrapper {
    padding: 40px 0 60px !important;
  }
  .ck-steps {
    margin-bottom: 32px;
  }
  .ck-summary {
    position: static !important;
    margin-top: 24px;
  }
}

@media (max-width: 767.97px) {
  .gs-checkout-wrapper {
    padding: 28px 0 48px !important;
  }
  .ck-step__circle {
    width: 40px;
    height: 40px;
    font-size: 15px;
  }
  .ck-step__label {
    font-size: 12px;
  }
  .ck-step__connector {
    min-width: 24px;
  }
  .ck-steps {
    margin-bottom: 26px;
  }
  .ck-form-card__body {
    padding: 16px 16px 18px;
  }
  .ck-form-card__header {
    padding: 14px 16px 12px;
  }
  .ck-addr-grid {
    grid-template-columns: 1fr;
  }
  .ck-product-row {
    flex-direction: column;
    gap: 12px;
  }
  .ck-product-img {
    width: 100% !important;
    height: 160px !important;
    border-radius: 10px !important;
  }
}

@media (max-width: 575.97px) {
  .gs-checkout-wrapper {
    padding: 20px 0 40px !important;
  }
  .ck-step__circle {
    width: 34px;
    height: 34px;
    font-size: 13px;
  }
  .ck-step__label {
    font-size: 11px;
  }
  .ck-step__connector {
    min-width: 16px;
  }
  .ck-summary__header {
    padding: 16px 16px 12px;
  }
  .ck-summary__body {
    padding: 14px 14px 16px;
  }
  .ck-final-price .total-amount {
    font-size: 19px !important;
  }
  .ck-btn-primary {
    padding: 13px 16px;
    font-size: 13px;
  }
}


/* ══════════════════════════════════════════════════════════════
   PRIVACY & POLICY PAGE  —  Premium Layout
   ══════════════════════════════════════════════════════════════ */

/* ── Wrapper ── */
.pp-page-wrapper {
  background: #f8f9fc;
  padding-bottom: 80px;
}

/* ── Hero ── */
.pp-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 60%, #0f4c81 100%);
  padding: 72px 0 64px;
  position: relative;
  overflow: hidden;
}
.pp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 50%, rgba(99,179,237,.12) 0%, transparent 55%),
                    radial-gradient(circle at 80% 20%, rgba(139,92,246,.10) 0%, transparent 50%);
}
.pp-hero-icon {
  width: 72px;
  height: 72px;
  background: rgba(255,255,255,.12);
  border: 2px solid rgba(255,255,255,.25);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  backdrop-filter: blur(6px);
}
.pp-hero-icon svg {
  width: 36px;
  height: 36px;
  color: #fff;
}
.pp-hero-title {
  font-size: 38px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
  margin-bottom: 14px;
  line-height: 1.2;
}
.pp-hero-subtitle {
  font-size: 16px;
  color: rgba(255,255,255,.72);
  line-height: 1.75;
  max-width: 560px;
  margin: 0 auto 28px;
}
.pp-hero-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}
.pp-hero-meta span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: rgba(255,255,255,.60);
  font-weight: 500;
}
.pp-hero-meta svg {
  width: 15px;
  height: 15px;
  color: rgba(255,255,255,.45);
}

/* ── Quick-nav pills ── */
.pp-nav-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 40px 0 10px;
}
.pp-pill {
  display: inline-block;
  padding: 7px 18px;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
  transition: background .2s, border-color .2s, color .2s, transform .15s;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.pp-pill:hover {
  background: var(--color-primary, #0f4c81);
  border-color: var(--color-primary, #0f4c81);
  color: #fff;
  transform: translateY(-1px);
  text-decoration: none;
}

/* ── Sections ── */
.pp-section {
  background: #fff;
  border-radius: 16px;
  padding: 44px 48px;
  margin-top: 32px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.04);
  border: 1px solid #edf2f7;
  transition: box-shadow .3s;
}
.pp-section:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.08), 0 8px 32px rgba(0,0,0,.06);
}
.pp-section-header {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 28px;
}
.pp-section-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
}
.pp-section-icon svg {
  width: 22px;
  height: 22px;
  color: #1e3a5f;
}
.pp-section-num {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.pp-section-title {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  line-height: 1.3;
}
.pp-text {
  font-size: 15px;
  color: #4a5568;
  line-height: 1.8;
  margin-bottom: 0;
}
.pp-mt-20 { margin-top: 20px; }

/* ── Info cards grid ── */
.pp-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 24px;
}
.pp-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 22px;
  background: #fafbfc;
  transition: border-color .25s, box-shadow .25s, transform .2s;
}
.pp-card:hover {
  border-color: #bfdbfe;
  box-shadow: 0 4px 16px rgba(30,58,95,.08);
  transform: translateY(-2px);
}
.pp-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.pp-card-icon svg { width: 20px; height: 20px; }
.pp-card-icon--blue   { background: #eff6ff; color: #2563eb; }
.pp-card-icon--purple { background: #f5f3ff; color: #7c3aed; }
.pp-card-icon--green  { background: #f0fdf4; color: #16a34a; }
.pp-card-icon--orange { background: #fff7ed; color: #ea580c; }
.pp-card h4 {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 8px;
}
.pp-card p {
  font-size: 13.5px;
  color: #64748b;
  line-height: 1.7;
  margin: 0;
}

/* ── Checklist ── */
.pp-checklist {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pp-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: #4a5568;
  line-height: 1.7;
}
.pp-checklist li svg {
  width: 18px;
  height: 18px;
  min-width: 18px;
  color: #16a34a;
  margin-top: 3px;
}

/* ── Highlight box (sharing section) ── */
.pp-highlight-box {
  margin-top: 24px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}
.pp-highlight-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 24px;
  transition: background .2s;
}
.pp-highlight-item:not(:last-child) {
  border-bottom: 1px solid #f1f5f9;
}
.pp-highlight-item:hover { background: #f8fafc; }
.pp-highlight-icon {
  font-size: 26px;
  min-width: 40px;
  text-align: center;
  line-height: 1;
  margin-top: 2px;
}
.pp-highlight-item strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 6px;
}
.pp-highlight-item p {
  font-size: 14px;
  color: #64748b;
  line-height: 1.7;
  margin: 0;
}

/* ── Security badges ── */
.pp-security-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
}
.pp-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: #166534;
}
.pp-badge svg {
  width: 18px;
  height: 18px;
  color: #16a34a;
}

/* ── Cookies table ── */
.pp-table-wrap {
  margin-top: 24px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}
.pp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.pp-table thead tr {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
}
.pp-table thead th {
  color: #fff;
  font-weight: 600;
  padding: 14px 20px;
  text-align: left;
  letter-spacing: .3px;
}
.pp-table tbody tr {
  border-bottom: 1px solid #f1f5f9;
  transition: background .15s;
}
.pp-table tbody tr:last-child { border-bottom: none; }
.pp-table tbody tr:hover { background: #f8fafc; }
.pp-table tbody td {
  padding: 14px 20px;
  color: #4a5568;
  vertical-align: middle;
}
.pp-tag {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
}
.pp-tag--green  { background: #dcfce7; color: #166534; }
.pp-tag--blue   { background: #dbeafe; color: #1d4ed8; }
.pp-tag--purple { background: #ede9fe; color: #6d28d9; }
.pp-tag--orange { background: #ffedd5; color: #c2410c; }

/* ── Rights grid ── */
.pp-rights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 24px;
}
.pp-right-item {
  background: #f8f9fc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 22px;
  transition: border-color .25s, box-shadow .25s, transform .2s;
}
.pp-right-item:hover {
  border-color: #bfdbfe;
  box-shadow: 0 4px 16px rgba(30,58,95,.08);
  transform: translateY(-2px);
}
.pp-right-num {
  font-size: 28px;
  font-weight: 800;
  color: #e2e8f0;
  line-height: 1;
  margin-bottom: 10px;
}
.pp-right-item h5 {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 8px;
}
.pp-right-item p {
  font-size: 13px;
  color: #64748b;
  line-height: 1.65;
  margin: 0;
}

/* ── Contact CTA section ── */
.pp-contact-section {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 60%, #0f4c81 100%) !important;
  border: none !important;
  text-align: center;
}
.pp-contact-inner {
  max-width: 520px;
  margin: 0 auto;
}
.pp-contact-icon {
  width: 64px;
  height: 64px;
  background: rgba(255,255,255,.12);
  border: 2px solid rgba(255,255,255,.2);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
}
.pp-contact-icon svg {
  width: 28px;
  height: 28px;
  color: #fff;
}
.pp-contact-title {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 14px;
}
.pp-contact-text {
  font-size: 15px;
  color: rgba(255,255,255,.70);
  line-height: 1.75;
  margin-bottom: 28px;
}
.pp-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: #1e3a5f;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 32px;
  border-radius: 10px;
  text-decoration: none;
  transition: background .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
.pp-contact-btn svg {
  width: 18px;
  height: 18px;
}
.pp-contact-btn:hover {
  background: #f0f9ff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  text-decoration: none;
  color: #1e3a5f;
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .pp-section { padding: 32px 28px; }
  .pp-rights-grid { grid-template-columns: repeat(2, 1fr); }
  .pp-hero-title { font-size: 30px; }
}
@media (max-width: 767px) {
  .pp-hero { padding: 52px 0 44px; }
  .pp-hero-title { font-size: 26px; }
  .pp-hero-subtitle { font-size: 14px; }
  .pp-hero-meta { gap: 16px; }
  .pp-section { padding: 28px 20px; margin-top: 22px; }
  .pp-section-title { font-size: 18px; }
  .pp-cards-grid { grid-template-columns: 1fr; }
  .pp-rights-grid { grid-template-columns: 1fr; }
  .pp-security-badges { gap: 10px; }
  .pp-nav-pills { gap: 8px; }
  .pp-table thead th,
  .pp-table tbody td { padding: 11px 14px; font-size: 13px; }
  .pp-contact-title { font-size: 21px; }
}


/* ══════════════════════════════════════════════════════════════
   TERMS & CONDITIONS PAGE  —  Premium Layout
   ══════════════════════════════════════════════════════════════ */

/* ── Wrapper ── */
.tc-page-wrapper {
  background: #f8f9fc;
  padding-bottom: 80px;
}

/* ── Hero ── */
.tc-hero {
  background: linear-gradient(135deg, #1a0533 0%, #3b1a6e 55%, #5b21b6 100%);
  padding: 72px 0 64px;
  position: relative;
  overflow: hidden;
}
.tc-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 15% 50%, rgba(167,139,250,.14) 0%, transparent 55%),
                    radial-gradient(circle at 85% 20%, rgba(99,179,237,.10) 0%, transparent 50%);
}
.tc-hero-icon {
  width: 72px;
  height: 72px;
  background: rgba(255,255,255,.12);
  border: 2px solid rgba(255,255,255,.25);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  backdrop-filter: blur(6px);
}
.tc-hero-icon svg {
  width: 36px;
  height: 36px;
  color: #fff;
}
.tc-hero-title {
  font-size: 38px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
  margin-bottom: 14px;
  line-height: 1.2;
}
.tc-hero-subtitle {
  font-size: 16px;
  color: rgba(255,255,255,.72);
  line-height: 1.75;
  max-width: 560px;
  margin: 0 auto 28px;
}
.tc-hero-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}
.tc-hero-meta span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: rgba(255,255,255,.60);
  font-weight: 500;
}
.tc-hero-meta svg {
  width: 15px;
  height: 15px;
  color: rgba(255,255,255,.45);
}

/* ── Agreement banner ── */
.tc-agreement-banner {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #fffbeb;
  border: 1.5px solid #fcd34d;
  border-radius: 12px;
  padding: 18px 22px;
  margin-top: 36px;
}
.tc-agreement-icon {
  min-width: 32px;
  height: 32px;
  background: #fef3c7;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tc-agreement-icon svg {
  width: 18px;
  height: 18px;
  color: #d97706;
}
.tc-agreement-banner p {
  font-size: 14px;
  color: #78350f;
  line-height: 1.7;
  margin: 0;
}
.tc-agreement-banner strong { color: #92400e; }

/* ── Quick-nav pills ── */
.tc-nav-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 10px;
}
.tc-pill {
  display: inline-block;
  padding: 7px 18px;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
  transition: background .2s, border-color .2s, color .2s, transform .15s;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.tc-pill:hover {
  background: #5b21b6;
  border-color: #5b21b6;
  color: #fff;
  transform: translateY(-1px);
  text-decoration: none;
}

/* ── Sections ── */
.tc-section {
  background: #fff;
  border-radius: 16px;
  padding: 44px 48px;
  margin-top: 32px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.04);
  border: 1px solid #edf2f7;
  transition: box-shadow .3s;
}
.tc-section:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.08), 0 8px 32px rgba(0,0,0,.06);
}
.tc-section-header {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 28px;
}
.tc-section-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
}
.tc-section-icon svg { width: 22px; height: 22px; }
.tc-icon--indigo { background: #eef2ff; color: #4338ca; }
.tc-icon--blue   { background: #eff6ff; color: #2563eb; }
.tc-icon--green  { background: #f0fdf4; color: #16a34a; }
.tc-icon--purple { background: #f5f3ff; color: #7c3aed; }
.tc-icon--red    { background: #fef2f2; color: #dc2626; }
.tc-icon--amber  { background: #fffbeb; color: #d97706; }
.tc-icon--slate  { background: #f1f5f9; color: #475569; }

.tc-section-num {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.tc-section-title {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  line-height: 1.3;
}
.tc-text {
  font-size: 15px;
  color: #4a5568;
  line-height: 1.8;
  margin-bottom: 0;
}
.tc-mt-16 { margin-top: 16px; }

/* ── Account cards grid ── */
.tc-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 22px;
}
.tc-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 20px;
  background: #fafbfc;
  transition: border-color .25s, box-shadow .25s, transform .2s;
}
.tc-card:hover {
  border-color: #c4b5fd;
  box-shadow: 0 4px 16px rgba(91,33,182,.08);
  transform: translateY(-2px);
}
.tc-card-dot {
  width: 10px;
  height: 10px;
  min-width: 10px;
  border-radius: 50%;
  margin-top: 6px;
}
.tc-dot--blue   { background: #2563eb; }
.tc-dot--purple { background: #7c3aed; }
.tc-dot--green  { background: #16a34a; }
.tc-dot--orange { background: #ea580c; }
.tc-card h5 {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 6px;
}
.tc-card p {
  font-size: 13.5px;
  color: #64748b;
  line-height: 1.65;
  margin: 0;
}

/* ── Numbered steps ── */
.tc-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 22px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}
.tc-step {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 24px;
  border-bottom: 1px solid #f1f5f9;
  transition: background .15s;
}
.tc-step:last-child { border-bottom: none; }
.tc-step:hover { background: #f8f9fc; }
.tc-step-num {
  width: 32px;
  height: 32px;
  min-width: 32px;
  background: linear-gradient(135deg, #5b21b6, #7c3aed);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  margin-top: 2px;
}
.tc-step-body h5 {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 6px;
}
.tc-step-body p {
  font-size: 14px;
  color: #64748b;
  line-height: 1.7;
  margin: 0;
}

/* ── Intellectual property two-col ── */
.tc-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 22px;
}
.tc-allowed-box {
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}
.tc-box-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  font-size: 14px;
}
.tc-box-header svg { width: 16px; height: 16px; }
.tc-box-header--green { background: #dcfce7; color: #166534; }
.tc-box-header--red   { background: #fee2e2; color: #991b1b; }
.tc-allowed-box ul {
  list-style: none;
  padding: 14px 18px 18px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tc-allowed-box ul li {
  font-size: 13.5px;
  color: #4a5568;
  line-height: 1.6;
  padding-left: 12px;
  border-left: 2px solid #e2e8f0;
}

/* ── Prohibited list ── */
.tc-prohibited-list {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tc-prohibited-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: #4a5568;
  line-height: 1.7;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  padding: 12px 16px;
}
.tc-x-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  background: #fee2e2;
  border-radius: 50%;
  margin-top: 1px;
}
.tc-x-icon svg {
  width: 12px;
  height: 12px;
  color: #dc2626;
}

/* ── Liability box ── */
.tc-liability-box {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 24px;
  margin-top: 4px;
}
.tc-liability-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
}
.tc-liability-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fff;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 14px 16px;
}
.tc-liability-item span {
  font-size: 22px;
  line-height: 1;
  margin-top: 2px;
}
.tc-liability-item p {
  font-size: 13.5px;
  color: #78350f;
  line-height: 1.65;
  margin: 0;
}

/* ── Termination checklist (reuses tc-checklist) ── */
.tc-checklist {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tc-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: #4a5568;
  line-height: 1.7;
}
.tc-checklist li svg {
  width: 18px;
  height: 18px;
  min-width: 18px;
  color: #16a34a;
  margin-top: 3px;
}

/* ── Contact CTA ── */
.tc-contact-section {
  background: linear-gradient(135deg, #1a0533 0%, #3b1a6e 55%, #5b21b6 100%) !important;
  border: none !important;
  text-align: center;
}
.tc-contact-inner {
  max-width: 520px;
  margin: 0 auto;
}
.tc-contact-icon {
  width: 64px;
  height: 64px;
  background: rgba(255,255,255,.12);
  border: 2px solid rgba(255,255,255,.2);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
}
.tc-contact-icon svg {
  width: 28px;
  height: 28px;
  color: #fff;
}
.tc-contact-title {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 14px;
}
.tc-contact-text {
  font-size: 15px;
  color: rgba(255,255,255,.70);
  line-height: 1.75;
  margin-bottom: 28px;
}
.tc-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: #3b1a6e;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 32px;
  border-radius: 10px;
  text-decoration: none;
  transition: background .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
.tc-contact-btn svg {
  width: 18px;
  height: 18px;
}
.tc-contact-btn:hover {
  background: #f5f3ff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  text-decoration: none;
  color: #3b1a6e;
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .tc-section { padding: 32px 28px; }
  .tc-two-col { grid-template-columns: 1fr; }
  .tc-liability-grid { grid-template-columns: 1fr; }
  .tc-hero-title { font-size: 30px; }
}
@media (max-width: 767px) {
  .tc-hero { padding: 52px 0 44px; }
  .tc-hero-title { font-size: 26px; }
  .tc-hero-subtitle { font-size: 14px; }
  .tc-hero-meta { gap: 16px; }
  .tc-section { padding: 28px 20px; margin-top: 22px; }
  .tc-section-title { font-size: 18px; }
  .tc-cards-grid { grid-template-columns: 1fr; }
  .tc-nav-pills { gap: 8px; }
  .tc-contact-title { font-size: 21px; }
  .tc-agreement-banner { flex-direction: column; gap: 10px; }
}


/* ══════════════════════════════════════════════════════════════
   FAQ PAGE  —  Premium Layout
   ══════════════════════════════════════════════════════════════ */

/* ── Wrapper ── */
.faq-page-wrapper {
  background: #f8f9fc;
  padding-bottom: 80px;
}

/* ── Hero ── */
.faq-hero {
  background: linear-gradient(135deg, #064e3b 0%, #065f46 55%, #047857 100%);
  padding: 72px 0 64px;
  position: relative;
  overflow: hidden;
}
.faq-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 15% 60%, rgba(110,231,183,.15) 0%, transparent 55%),
                    radial-gradient(circle at 85% 20%, rgba(167,243,208,.10) 0%, transparent 50%);
}
.faq-hero-icon {
  width: 72px;
  height: 72px;
  background: rgba(255,255,255,.12);
  border: 2px solid rgba(255,255,255,.25);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  backdrop-filter: blur(6px);
  position: relative;
}
.faq-hero-icon svg {
  width: 36px;
  height: 36px;
  color: #fff;
}
.faq-hero-title {
  font-size: 38px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
  margin-bottom: 14px;
  line-height: 1.2;
  position: relative;
}
.faq-hero-subtitle {
  font-size: 16px;
  color: rgba(255,255,255,.75);
  line-height: 1.75;
  max-width: 540px;
  margin: 0 auto 36px;
  position: relative;
}
.faq-hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  position: relative;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  padding: 18px 32px;
  display: inline-flex;
  backdrop-filter: blur(6px);
}
.faq-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 28px;
}
.faq-stat strong {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 4px;
}
.faq-stat span {
  font-size: 12px;
  color: rgba(255,255,255,.65);
  font-weight: 500;
  white-space: nowrap;
}
.faq-stat-divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,.25);
}

/* ── Accordion container ── */
.faq-accordion {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Individual FAQ item ── */
.faq-item {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .25s, box-shadow .25s;
}
.faq-item:hover {
  border-color: #a7f3d0;
  box-shadow: 0 4px 20px rgba(4,120,87,.07);
}
.faq-item--open {
  border-color: #34d399;
  box-shadow: 0 4px 24px rgba(4,120,87,.10);
}

/* ── Question button ── */
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background .2s;
}
.faq-item--open .faq-question {
  background: linear-gradient(90deg, #f0fdf4 0%, #fff 100%);
}
.faq-question:focus { outline: none; }

.faq-q-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}
.faq-q-num {
  font-size: 12px;
  font-weight: 800;
  color: #a7f3d0;
  letter-spacing: 1px;
  min-width: 26px;
  line-height: 1;
  transition: color .25s;
}
.faq-item--open .faq-q-num {
  color: #059669;
}
.faq-q-text {
  font-size: 15.5px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.5;
}
.faq-item--open .faq-q-text {
  color: #065f46;
}

/* ── Chevron ── */
.faq-chevron {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  transition: background .25s, transform .3s;
}
.faq-chevron svg {
  width: 16px;
  height: 16px;
  color: #94a3b8;
  transition: color .25s;
}
.faq-item--open .faq-chevron {
  background: #d1fae5;
  transform: rotate(180deg);
}
.faq-item--open .faq-chevron svg {
  color: #059669;
}

/* ── Answer body ── */
.faq-answer {
  padding: 4px 24px 24px 66px;
  font-size: 15px;
  color: #4a5568;
  line-height: 1.8;
  border-top: 1px solid #f0fdf4;
}
.faq-answer p  { margin-bottom: 10px; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer ul, .faq-answer ol {
  padding-left: 20px;
  margin-bottom: 10px;
}
.faq-answer li { margin-bottom: 6px; }
.faq-answer strong { color: #1e293b; }
.faq-answer a { color: #059669; text-decoration: underline; }

/* ── Empty state ── */
.faq-empty {
  text-align: center;
  padding: 80px 20px;
  color: #94a3b8;
}
.faq-empty svg {
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  opacity: .5;
}
.faq-empty p {
  font-size: 16px;
}

/* ── Contact CTA strip ── */
.faq-cta {
  display: flex;
  align-items: center;
  gap: 20px;
  background: linear-gradient(135deg, #064e3b 0%, #065f46 60%, #047857 100%);
  border-radius: 16px;
  padding: 28px 32px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.faq-cta-icon {
  width: 52px;
  height: 52px;
  min-width: 52px;
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.22);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.faq-cta-icon svg {
  width: 24px;
  height: 24px;
  color: #fff;
}
.faq-cta-body {
  flex: 1;
  min-width: 200px;
}
.faq-cta-body h3 {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}
.faq-cta-body p {
  font-size: 14px;
  color: rgba(255,255,255,.70);
  margin: 0;
  line-height: 1.6;
}
.faq-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  color: #065f46;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 10px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
.faq-cta-btn svg {
  width: 16px;
  height: 16px;
}
.faq-cta-btn:hover {
  background: #ecfdf5;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
  text-decoration: none;
  color: #065f46;
}

/* ── Responsive ── */
@media (max-width: 767px) {
  .faq-hero { padding: 52px 0 44px; }
  .faq-hero-title { font-size: 26px; }
  .faq-hero-subtitle { font-size: 14px; }
  .faq-hero-stats { padding: 14px 20px; gap: 0; }
  .faq-stat { padding: 0 16px; }
  .faq-stat strong { font-size: 20px; }
  .faq-question { padding: 16px 18px; }
  .faq-answer { padding: 4px 18px 20px 18px; }
  .faq-q-num { display: none; }
  .faq-cta { flex-direction: column; align-items: flex-start; padding: 22px 22px; }
  .faq-cta-btn { width: 100%; justify-content: center; }
}


/* ================================================================
   PRODUCT CARD — image fills the entire inner card area
   ================================================================ */
.single-product .img-wrapper .product-img,
.single-product .sp-img-link .product-img {
  object-fit: cover !important;
  padding: 0 !important;
}


/* ================================================================
   PRODUCT CARD — Quick View / Compare buttons pinned to
   the BOTTOM of the image frame (desktop + mobile)
   ================================================================ */

/* --- Desktop: pin buttons to bottom edge of the image --- */
.single-product .sp-hover-overlay,
.cat-product-area .single-product .sp-hover-overlay {
  align-items: flex-end !important;
  justify-content: center !important;
  padding-bottom: 12px !important;
  padding-top: 0 !important;
}

.single-product .sp-overlay-actions,
.cat-product-area .single-product .sp-overlay-actions {
  flex-direction: row !important;
  gap: 8px !important;
  transform: translateY(8px);
}

.single-product:hover .sp-overlay-actions,
.cat-product-area .single-product:hover .sp-overlay-actions {
  transform: translateY(0);
}

/* --- Mobile: hide overlay entirely --- */
@media (max-width: 767.98px) {
  .single-product .sp-hover-overlay {
    display: none !important;
  }
}

/* ================================================================
   PRODUCT CARD — entire card is clickable (wrapping anchor)
   ================================================================ */
a.single-product-link {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  z-index: 0;
}

/* Buttons/links inside the card must sit above the card-level anchor */
a.single-product-link .sp-hover-overlay,
a.single-product-link .sp-wishlist-corner,
a.single-product-link .add-to-cart,
a.single-product-link .sp-img-link {
  position: relative;
  z-index: 2;
}

/* Prevent the card anchor from firing when tapping interactive children */
a.single-product-link .sp-wishlist-corner a,
a.single-product-link .sp-overlay-btn,
a.single-product-link .compare_product,
a.single-product-link .sp-cart-btn,
a.single-product-link .add_cart_click,
a.single-product-link .view_cross_product {
  position: relative;
  z-index: 3;
}


/* ================================================================
   PRODUCTS TOOLBAR (category listing page)
   ================================================================ */

.products-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  background: #ffffff;
  border: 1px solid #ebebeb;
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}

/* ---- Left: results label ---- */
.products-toolbar-left { flex-shrink: 0; }

.toolbar-results-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #f5f5f5;
  border: 1px solid #ebebeb;
  border-radius: 6px;
  padding: 6px 12px;
  color: #444444;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.toolbar-results-badge svg {
  color: #FFA500;
  flex-shrink: 0;
}

/* ---- Right cluster ---- */
.products-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ---- Sort form ---- */
.toolbar-sort-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Label + select group */
.toolbar-sort-group {
  display: flex;
  align-items: center;
  gap: 7px;
}

.toolbar-label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #888888;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  margin: 0;
  cursor: default;
}

.toolbar-label svg {
  color: #FFA500;
  flex-shrink: 0;
}

/* Custom select wrapper */
.toolbar-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.toolbar-select {
  appearance: none;
  -webkit-appearance: none;
  background: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 7px;
  color: #333333;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 30px 7px 12px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
  line-height: 1.4;
  min-width: 150px;
}

.toolbar-select:hover {
  border-color: #FFA500;
  background: #fffbf2;
}

.toolbar-select:focus {
  border-color: #FFA500;
  box-shadow: 0 0 0 3px rgba(255,165,0,0.12);
  background: #fffbf2;
}

.toolbar-select-caret {
  position: absolute;
  right: 9px;
  pointer-events: none;
  color: #aaaaaa;
  transition: color 0.2s;
}

.toolbar-select-wrap:hover .toolbar-select-caret,
.toolbar-select-wrap:focus-within .toolbar-select-caret {
  color: #FFA500;
}

/* ---- Vertical divider ---- */
.toolbar-divider {
  width: 1px;
  height: 28px;
  background: #ebebeb;
  flex-shrink: 0;
  margin: 0 2px;
}

/* ---- View toggle buttons ---- */
.toolbar-view-toggle {
  display: flex;
  align-items: center;
  gap: 3px;
  background: #f5f5f5;
  border: 1px solid #ebebeb;
  border-radius: 7px;
  padding: 3px;
}

.toolbar-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 5px;
  color: #aaaaaa;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
  flex-shrink: 0;
}

.toolbar-view-btn:hover {
  background-color: rgba(255,165,0,0.1);
  color: #FFA500;
}

.toolbar-view-btn.active,
.toolbar-view-btn.grid-view.active,
.toolbar-view-btn.list-view.active {
  background-color: #FFA500;
  color: #ffffff !important;
}

/* ---- Responsive ---- */
@media (max-width: 767px) {
  .products-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
  }

  .products-toolbar-right {
    width: 100%;
    justify-content: space-between;
  }

  .toolbar-sort-form {
    flex: 1;
    gap: 8px;
  }

  .toolbar-select {
    min-width: 120px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .toolbar-sort-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .toolbar-sort-form {
    gap: 10px;
  }
}

/* ================================================================
   ORDER SUCCESS PAGE  (os-*)
   ================================================================ */

/* ── Outer wrapper ── */
.os-wrapper {
  background: #f4f6fb;
  padding: 60px 0 80px;
}

/* ── Hero Card ── */
.os-hero-card {
  position: relative;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border-radius: 20px;
  text-align: center;
  padding: 60px 40px 50px;
  margin-bottom: 40px;
  overflow: hidden;
  color: #fff;
}

/* animated confetti dots */
.os-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.os-confetti__piece {
  position: absolute;
  top: -10px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  opacity: 0;
  left: calc(var(--i) * 3.33%);
  background: hsl(calc(var(--i) * 12deg), 80%, 65%);
  animation: os-fall 4s calc(var(--i) * 0.13s) ease-in infinite;
}
@keyframes os-fall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* animated check ring */
.os-check-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgba(39, 190, 105, 0.18);
  border: 3px solid rgba(39, 190, 105, 0.5);
  margin: 0 auto 24px;
  animation: os-pop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
.os-check-ring svg {
  stroke: #27be69;
}
@keyframes os-pop {
  0%   { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.os-hero-title {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px;
}

.os-hero-sub {
  font-size: 1rem;
  color: rgba(255,255,255,0.72);
  margin: 0 0 28px;
}

/* order number pill */
.os-order-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(6px);
  border-radius: 50px;
  padding: 10px 22px;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.9);
  margin-bottom: 32px;
}
.os-order-pill__value {
  font-weight: 700;
  color: #fff;
}
.os-order-pill__sep {
  opacity: 0.4;
}

/* CTA buttons */
.os-hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.os-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.os-btn:hover {
  transform: translateY(-2px);
  text-decoration: none;
}
.os-btn--primary {
  background: #27be69;
  color: #fff;
  box-shadow: 0 4px 18px rgba(39,190,105,0.35);
}
.os-btn--primary:hover {
  background: #22a85d;
  color: #fff;
  box-shadow: 0 6px 22px rgba(39,190,105,0.45);
}
.os-btn--outline {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.4);
}
.os-btn--outline:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.7);
}

/* ── Info Cards Grid ── */
.os-info-grid {
  margin-bottom: 40px;
}

.os-info-card {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  height: 100%;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  border: 1px solid #eef0f5;
  transition: box-shadow 0.2s;
}
.os-info-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.1);
}

.os-info-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f0f2f7;
}
.os-info-card__header h6 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0;
}

.os-info-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
}
.os-info-card__icon--blue   { background: #e8f3ff; color: #2563eb; }
.os-info-card__icon--blue svg   { stroke: #2563eb; }
.os-info-card__icon--purple { background: #f3eeff; color: #7c3aed; }
.os-info-card__icon--purple svg { stroke: #7c3aed; }
.os-info-card__icon--green  { background: #e8fdf3; color: #16a34a; }
.os-info-card__icon--green svg  { stroke: #16a34a; }
.os-info-card__icon--orange { background: #fff3e8; color: #ea580c; }
.os-info-card__icon--orange svg { stroke: #ea580c; }

.os-info-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.os-info-card__list li {
  font-size: 0.87rem;
  color: #374151;
  line-height: 1.4;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.os-info-card__list li span:first-child {
  font-weight: 600;
  color: #6b7280;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 70px;
}
.os-info-card__total {
  border-top: 1px dashed #e5e7eb;
  padding-top: 10px !important;
  margin-top: 4px;
  font-weight: 700 !important;
  color: #1a1a2e !important;
}
.os-info-card__total span:first-child {
  font-weight: 700 !important;
  color: #1a1a2e !important;
}

.os-badge {
  display: inline-block;
  background: #e8fdf3;
  color: #16a34a;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 0.8rem;
  font-weight: 600;
}

.os-txn-id {
  font-family: monospace;
  font-size: 0.8rem;
  background: #f4f6fb;
  border-radius: 4px;
  padding: 2px 6px;
  word-break: break-all;
  color: #374151;
}

.os-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.85rem;
  font-weight: 600;
}
.os-status--blue   { color: #2563eb; }
.os-status--orange { color: #ea580c; }

/* ── Products Section ── */
.os-products-section {
  background: #fff;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  border: 1px solid #eef0f5;
}

.os-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f0f2f7;
}
.os-section-title svg {
  stroke: #7c3aed;
  flex-shrink: 0;
}
.os-item-count {
  margin-left: auto;
  font-size: 0.8rem;
  font-weight: 600;
  background: #f3eeff;
  color: #7c3aed;
  border-radius: 20px;
  padding: 3px 12px;
}

.os-product-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.os-product-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid #f0f2f7;
}
.os-product-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.os-product-row__img {
  flex-shrink: 0;
  width: 90px;
  height: 90px;
  border-radius: 12px;
  overflow: hidden;
  background: #f4f6fb;
  border: 1px solid #eef0f5;
}
.os-product-row__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.os-product-row__info {
  flex: 1;
  min-width: 0;
}
.os-product-row__name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 10px;
}

.os-product-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.os-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f4f6fb;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 0.8rem;
  color: #6b7280;
}
.os-meta-pill strong {
  color: #374151;
}

.os-color-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.12);
  flex-shrink: 0;
}

.os-product-row__price {
  flex-shrink: 0;
  text-align: right;
  min-width: 100px;
}
.os-product-row__unit {
  font-size: 0.82rem;
  color: #9ca3af;
  margin-bottom: 4px;
}
.os-product-row__unit small {
  font-size: 0.75rem;
}
.os-product-row__total {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a2e;
}
.os-discount-badge {
  display: inline-block;
  background: #fef2f2;
  color: #dc2626;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 1px 6px;
  margin-left: 4px;
  vertical-align: middle;
}

/* ── Responsive ── */
@media (max-width: 991.97px) {
  .os-hero-card { padding: 44px 24px 40px; }
  .os-hero-title { font-size: 1.6rem; }
  .os-wrapper { padding: 40px 0 60px; }
}
@media (max-width: 767.98px) {
  .os-hero-title { font-size: 1.35rem; }
  .os-hero-sub   { font-size: 0.9rem; }
  .os-hero-card  { padding: 36px 16px 32px; }
  .os-product-row { flex-wrap: wrap; }
  .os-product-row__price { width: 100%; text-align: left; margin-top: 8px; }
  .os-products-section { padding: 20px 16px; }
}
@media (max-width: 480px) {
  .os-check-ring { width: 70px; height: 70px; }
  .os-hero-title  { font-size: 1.15rem; }
  .os-order-pill  { font-size: 0.8rem; padding: 8px 14px; }
  .os-btn         { padding: 10px 18px; font-size: 0.85rem; }
}


/* ================================================================
   USER DASHBOARD  —  Dark / Gold Gotech Theme
   Matches the homepage navbar palette:
     #111111  dark bg   |  #FFA500  gold accent
     #1a1a1a  card bg   |  #ffffff  white text
================================================================ */

/* ── Colour tokens (local to this section) ──────────────────── */
:root {
  --ud-dark:    #111111;
  --ud-dark-2:  #1a1a1a;
  --ud-dark-3:  #222222;
  --ud-border:  rgba(255,255,255,0.07);
  --ud-gold:    #FFA500;
  --ud-gold-lt: rgba(255,165,0,0.12);
  --ud-gold-md: rgba(255,165,0,0.22);
  --ud-white:   #ffffff;
  --ud-muted:   #888888;
  --ud-text:    #dddddd;
  --ud-radius:  10px;
  --ud-shadow:  0 4px 24px rgba(0,0,0,0.45);
}

/* ── Wrapper / Layout ───────────────────────────────────────── */
.gs-ud-wrapper {
  background-color: #0f0f0f;
  min-height: 100vh;
}

.gs-ud-layout {
  align-items: stretch;
  min-height: calc(100vh - 80px);
}

/* ================================================================
   SIDEBAR
================================================================ */
.gs-ud-sidebar {
  width: 280px;
  min-width: 280px;
  background-color: var(--ud-dark);
  border-right: 1px solid var(--ud-border);
  display: flex;
  flex-direction: column;
  gap: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #333 var(--ud-dark);
  flex-shrink: 0;
}

.gs-ud-sidebar::-webkit-scrollbar { width: 3px; }
.gs-ud-sidebar::-webkit-scrollbar-track { background: var(--ud-dark); }
.gs-ud-sidebar::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

/* Profile mini-card */
.gs-ud-sidebar-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 20px 20px;
  border-bottom: 1px solid var(--ud-border);
  flex-shrink: 0;
}

.gs-ud-sb-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--ud-gold);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--ud-dark-3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gs-ud-sb-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gs-ud-sb-avatar span {
  color: var(--ud-gold);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.gs-ud-sb-profile-text {
  min-width: 0;
}

.gs-ud-sb-profile-text strong {
  display: block;
  color: var(--ud-white);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gs-ud-sb-profile-text span {
  color: var(--ud-muted);
  font-size: 12px;
}

/* Divider */
.gs-ud-sb-divider {
  height: 1px;
  background: var(--ud-border);
  flex-shrink: 0;
}

/* Group labels */
.gs-ud-sb-group-label {
  display: block;
  color: #555;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 18px 20px 6px;
}

/* Nav lists */
.gs-ud-sb-nav ul {
  list-style: none;
  padding: 0;
  margin: 0 0 4px;
}

.gs-ud-sb-nav ul li a,
.gs-ud-sb-logout {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  color: #999;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
  position: relative;
}

.gs-ud-sb-nav ul li a:hover,
.gs-ud-sb-logout:hover {
  color: var(--ud-gold);
  background-color: var(--ud-gold-lt);
  border-left-color: var(--ud-gold);
  text-decoration: none;
}

/* Active state */
.gs-ud-sb-active a,
.gs-ud-sb-nav ul li.gs-ud-sb-active a {
  color: var(--ud-gold) !important;
  background-color: var(--ud-gold-lt) !important;
  border-left-color: var(--ud-gold) !important;
}

/* Icons */
.gs-ud-sb-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: inherit;
}

/* Label text */
.gs-ud-sb-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Vendor chip badge */
.gs-ud-sb-chip {
  display: inline-flex;
  align-items: center;
  background: var(--ud-gold-lt);
  border: 1px solid rgba(255,165,0,0.35);
  color: var(--ud-gold);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 20px;
  flex-shrink: 0;
}

/* Logout button */
.gs-ud-sb-logout {
  margin: 4px 0 20px;
  color: #666;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
}

.gs-ud-sb-logout:hover {
  color: #ff6b6b;
  background-color: rgba(255,107,107,0.06);
  border-left-color: #ff6b6b;
}

/* ================================================================
   MAIN CONTENT AREA
================================================================ */
.gs-ud-main {
  flex: 1;
  min-width: 0;
  padding: 32px 36px 60px;
  background-color: #0f0f0f;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ── Welcome Hero Banner ─────────────────────────────────────── */
.gs-ud-hero {
  position: relative;
  background: linear-gradient(120deg, #111111 0%, #1c1507 55%, #151515 100%);
  border: 1px solid rgba(255,165,0,0.18);
  border-radius: var(--ud-radius);
  padding: 28px 32px;
  display: flex;
  align-items: center;
  gap: 20px;
  overflow: hidden;
}

/* decorative background lines */
.gs-ud-hero-bg-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.gs-ud-hero-bg-lines span {
  display: block;
  position: absolute;
  height: 100%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(255,165,0,0.08), transparent);
}

.gs-ud-hero-bg-lines span:nth-child(1) { left: 25%; }
.gs-ud-hero-bg-lines span:nth-child(2) { left: 55%; }
.gs-ud-hero-bg-lines span:nth-child(3) { left: 80%; }

.gs-ud-hero-content {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}

/* Avatar */
.gs-ud-hero-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--ud-gold);
  box-shadow: 0 0 0 4px rgba(255,165,0,0.15);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--ud-dark-3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gs-ud-hero-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gs-ud-hero-avatar span {
  color: var(--ud-gold);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}

.gs-ud-hero-text { min-width: 0; }

.gs-ud-hero-greeting {
  color: var(--ud-muted);
  font-size: 13px;
  margin: 0 0 2px;
}

.gs-ud-hero-name {
  color: var(--ud-white);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gs-ud-hero-sub {
  color: #666;
  font-size: 12px;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Member badge */
.gs-ud-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ud-gold-lt);
  border: 1px solid rgba(255,165,0,0.35);
  color: var(--ud-gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 20px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* ── Stat Cards ──────────────────────────────────────────────── */
.gs-ud-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.gs-ud-stat-card {
  background: var(--ud-dark-2);
  border: 1px solid var(--ud-border);
  border-radius: var(--ud-radius);
  padding: 20px 20px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: border-color 0.25s, transform 0.2s, box-shadow 0.25s;
  cursor: default;
  position: relative;
  overflow: hidden;
}

.gs-ud-stat-card::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--ud-gold);
  opacity: 0;
  transition: opacity 0.25s;
}

.gs-ud-stat-card:hover {
  border-color: rgba(255,165,0,0.35);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
}

.gs-ud-stat-card:hover::before {
  opacity: 1;
}

/* Icon circle */
.gs-ud-stat-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--ud-gold-lt);
  border: 1px solid rgba(255,165,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.25s;
}

.gs-ud-stat-card:hover .gs-ud-stat-icon {
  background: var(--ud-gold-md);
}

.gs-ud-stat-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gs-ud-stat-value {
  color: var(--ud-white);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gs-ud-stat-label {
  color: var(--ud-muted);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gs-ud-stat-arrow {
  color: #444;
  font-size: 16px;
  flex-shrink: 0;
  transition: color 0.2s, transform 0.2s;
}

.gs-ud-stat-card:hover .gs-ud-stat-arrow {
  color: var(--ud-gold);
  transform: translateX(3px);
}

/* ── Quick Actions ───────────────────────────────────────────── */
.gs-ud-quick-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.gs-ud-qa-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--ud-dark-2);
  border: 1px solid var(--ud-border);
  border-radius: 8px;
  color: #aaa;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 18px;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s, transform 0.15s;
  white-space: nowrap;
}

.gs-ud-qa-btn:hover {
  color: var(--ud-gold);
  border-color: rgba(255,165,0,0.45);
  background-color: var(--ud-gold-lt);
  transform: translateY(-1px);
  text-decoration: none;
}

/* Gold highlight variant */
.gs-ud-qa-btn--gold {
  background: var(--ud-gold);
  color: #111 !important;
  border-color: var(--ud-gold);
  font-weight: 700;
}

.gs-ud-qa-btn--gold:hover {
  background: #e6940a;
  border-color: #e6940a;
  color: #111 !important;
}

/* ── Section wrapper ─────────────────────────────────────────── */
.gs-ud-section {
  background: var(--ud-dark-2);
  border: 1px solid var(--ud-border);
  border-radius: var(--ud-radius);
  overflow: hidden;
}

.gs-ud-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px 16px;
  border-bottom: 1px solid var(--ud-border);
}

.gs-ud-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gs-ud-section-bar {
  display: block;
  width: 4px;
  height: 20px;
  background: var(--ud-gold);
  border-radius: 2px;
  flex-shrink: 0;
}

.gs-ud-section-title h4 {
  color: var(--ud-white);
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  padding: 0;
}

.gs-ud-view-all {
  color: var(--ud-gold);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s;
  white-space: nowrap;
}

.gs-ud-view-all:hover {
  opacity: 0.75;
  text-decoration: none;
  color: var(--ud-gold);
}

/* ── Orders Table ────────────────────────────────────────────── */
.gs-ud-table-wrap {
  padding: 0;
}

.gs-ud-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}

.gs-ud-table thead tr {
  background: #161616;
}

.gs-ud-table thead th {
  color: var(--ud-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 12px 24px;
  border: none;
  white-space: nowrap;
}

.gs-ud-table tbody tr {
  border-bottom: 1px solid var(--ud-border);
  transition: background-color 0.15s;
}

.gs-ud-table tbody tr:last-child {
  border-bottom: none;
}

.gs-ud-table tbody tr:hover {
  background-color: rgba(255,165,0,0.03);
}

.gs-ud-table tbody td {
  padding: 14px 24px;
  vertical-align: middle;
  border: none;
}

.gs-ud-order-id {
  color: var(--ud-gold);
  font-size: 13px;
  font-weight: 600;
  font-family: monospace;
}

.gs-ud-date {
  color: #777;
  font-size: 13px;
}

.gs-ud-amount {
  color: var(--ud-white);
  font-size: 14px;
  font-weight: 600;
}

/* Status badges */
.gs-ud-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: capitalize;
  white-space: nowrap;
}

.gs-ud-badge--yellow {
  background: rgba(255,193,7,0.12);
  color: #ffc107;
  border: 1px solid rgba(255,193,7,0.3);
}

.gs-ud-badge--green {
  background: rgba(39,190,105,0.12);
  color: #27be69;
  border: 1px solid rgba(39,190,105,0.3);
}

.gs-ud-badge--red {
  background: rgba(242,65,90,0.12);
  color: #f2415a;
  border: 1px solid rgba(242,65,90,0.3);
}

.gs-ud-badge--blue {
  background: rgba(20,127,255,0.12);
  color: #147fff;
  border: 1px solid rgba(20,127,255,0.3);
}

.gs-ud-badge--dark {
  background: rgba(255,255,255,0.06);
  color: #aaa;
  border: 1px solid rgba(255,255,255,0.12);
}

/* View button */
.gs-ud-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--ud-dark-3);
  border: 1px solid var(--ud-border);
  border-radius: 6px;
  color: #999;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
  white-space: nowrap;
}

.gs-ud-view-btn:hover {
  color: var(--ud-gold);
  border-color: rgba(255,165,0,0.4);
  background-color: var(--ud-gold-lt);
  text-decoration: none;
}

/* Empty state */
.gs-ud-empty {
  text-align: center;
  padding: 48px 24px !important;
}

.gs-ud-empty svg {
  display: block;
  margin: 0 auto 12px;
}

.gs-ud-empty p {
  color: #555;
  font-size: 14px;
  margin: 0 0 12px;
}

.gs-ud-empty-link {
  color: var(--ud-gold);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.gs-ud-empty-link:hover {
  opacity: 0.8;
  text-decoration: none;
  color: var(--ud-gold);
}

/* ── Account Info Strip ───────────────────────────────────────── */
.gs-ud-account-strip {
  background: var(--ud-dark-2);
  border: 1px solid var(--ud-border);
  border-left: 4px solid var(--ud-gold);
  border-radius: var(--ud-radius);
  padding: 22px 28px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}

.gs-ud-account-strip-icon {
  width: 48px;
  height: 48px;
  background: var(--ud-gold-lt);
  border: 1px solid rgba(255,165,0,0.25);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gs-ud-account-strip-body {
  flex: 1;
  min-width: 0;
}

.gs-ud-account-strip-body h5 {
  color: var(--ud-white);
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 12px;
  padding: 0;
}

.gs-ud-account-strip-body ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
}

.gs-ud-account-strip-body ul li {
  color: #777;
  font-size: 13px;
}

.gs-ud-account-strip-body ul li span {
  color: var(--ud-muted);
  font-weight: 600;
}

.gs-ud-account-strip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid rgba(255,165,0,0.35);
  border-radius: 7px;
  color: var(--ud-gold);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 18px;
  text-decoration: none;
  white-space: nowrap;
  align-self: center;
  transition: background 0.2s, border-color 0.2s;
  flex-shrink: 0;
}

.gs-ud-account-strip-btn:hover {
  background: var(--ud-gold-lt);
  border-color: var(--ud-gold);
  color: var(--ud-gold);
  text-decoration: none;
}

/* ================================================================
   RESPONSIVE — User Dashboard
================================================================ */

@media (max-width: 1400px) {
  .gs-ud-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1199px) {
  /* Sidebar hidden on smaller screens (uses existing xl breakpoint) */
  .gs-ud-main {
    padding: 24px 20px 48px;
  }
}

@media (max-width: 991px) {
  .gs-ud-main {
    padding: 20px 16px 40px;
    gap: 20px;
  }
  .gs-ud-hero {
    padding: 20px;
    flex-wrap: wrap;
    gap: 14px;
  }
  .gs-ud-hero-badge {
    width: 100%;
    justify-content: flex-start;
  }
  .gs-ud-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (max-width: 767px) {
  .gs-ud-hero-name {
    font-size: 18px;
  }
  .gs-ud-stat-card {
    padding: 16px;
  }
  .gs-ud-stat-value {
    font-size: 17px;
  }
  .gs-ud-table thead th,
  .gs-ud-table tbody td {
    padding: 10px 14px;
  }
  .gs-ud-account-strip {
    padding: 16px 18px;
    gap: 14px;
  }
  .gs-ud-section-header {
    padding: 14px 16px 12px;
  }
  .gs-ud-main {
    padding: 16px 12px 36px;
  }
}

@media (max-width: 575px) {
  .gs-ud-stats {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .gs-ud-stat-icon {
    width: 42px;
    height: 42px;
  }
  .gs-ud-stat-value {
    font-size: 15px;
  }
  .gs-ud-quick-actions {
    gap: 8px;
  }
  .gs-ud-qa-btn {
    font-size: 12px;
    padding: 8px 12px;
  }
  .gs-ud-hero-avatar {
    width: 52px;
    height: 52px;
  }
  .gs-ud-hero-name {
    font-size: 16px;
  }
  .gs-ud-account-strip-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── Override any legacy user-panel styles that conflict ──────── */
.gs-ud-wrapper .gs-user-panel-review,
.gs-ud-wrapper .gs-dashboard-user-sidebar-wrapper,
.gs-ud-wrapper .gs-dashboard-user-content-wrapper {
  all: unset;
}


/* ================================================================
   USER ORDERS PAGE  —  Dark / Gold Gotech Theme
================================================================ */

/* ── Page Header ─────────────────────────────────────────────── */
.gs-ud-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.gs-ud-page-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.gs-ud-page-title {
  color: var(--ud-white);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 2px;
  padding: 0;
  line-height: 1.2;
}

.gs-ud-page-sub {
  color: var(--ud-muted);
  font-size: 13px;
  margin: 0;
  padding: 0;
}

/* ── Filter / Status Tabs ─────────────────────────────────────── */
.gs-ud-filter-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  background: var(--ud-dark-2);
  border: 1px solid var(--ud-border);
  border-radius: var(--ud-radius);
  padding: 10px 14px;
}

.gs-ud-filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 6px;
  color: #888;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.gs-ud-filter-tab:hover {
  color: var(--ud-gold);
  background: var(--ud-gold-lt);
  border-color: rgba(255,165,0,0.25);
  text-decoration: none;
}

.gs-ud-filter-tab--active {
  color: var(--ud-gold) !important;
  background: var(--ud-gold-lt) !important;
  border-color: rgba(255,165,0,0.35) !important;
  font-weight: 600;
}

/* Count badge inside tab */
.gs-ud-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(255,255,255,0.07);
  color: #aaa;
  line-height: 1;
}

.gs-ud-filter-count--yellow { background: rgba(255,193,7,0.15); color: #ffc107; }
.gs-ud-filter-count--blue   { background: rgba(20,127,255,0.15); color: #147fff; }
.gs-ud-filter-count--green  { background: rgba(39,190,105,0.15); color: #27be69; }
.gs-ud-filter-count--red    { background: rgba(242,65,90,0.15);  color: #f2415a; }
.gs-ud-filter-count--dark   { background: rgba(255,255,255,0.07); color: #aaa; }

/* ── Orders meta text (e.g. "24 orders") ────────────────────── */
.gs-ud-orders-meta {
  color: var(--ud-muted);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

/* ── Date cell — stacked ─────────────────────────────────────── */
.gs-ud-date-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gs-ud-date {
  color: var(--ud-text);
  font-size: 13px;
  line-height: 1.2;
}

.gs-ud-time {
  color: #555;
  font-size: 11px;
  line-height: 1;
}

/* ── Item count pill ─────────────────────────────────────────── */
.gs-ud-item-count {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--ud-border);
  border-radius: 20px;
  color: #888;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px;
  white-space: nowrap;
}

/* ── Badge dot (pulsing status indicator) ────────────────────── */
.gs-ud-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.gs-ud-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

/* ── Empty state (enhanced for orders page) ──────────────────── */
.gs-ud-empty {
  text-align: center;
  padding: 56px 24px !important;
  border: none !important;
}

.gs-ud-empty-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.gs-ud-empty-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255,165,0,0.06);
  border: 1px solid rgba(255,165,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.gs-ud-empty-title {
  color: var(--ud-white);
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.gs-ud-empty-desc {
  color: #555;
  font-size: 13px;
  margin: 0 0 6px;
  max-width: 300px;
}

/* ── Pagination wrapper ──────────────────────────────────────── */
.gs-ud-pagination-wrap {
  padding: 18px 24px;
  border-top: 1px solid var(--ud-border);
  display: flex;
  justify-content: center;
}

/* Override gs-pagination links inside dashboard */
.gs-ud-pagination-wrap .gs-pagination {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.gs-ud-pagination-wrap .gs-pagination li a,
.gs-ud-pagination-wrap .gs-pagination li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 7px;
  background: var(--ud-dark-3);
  border: 1px solid var(--ud-border);
  color: #888;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}

.gs-ud-pagination-wrap .gs-pagination li a:hover {
  color: var(--ud-gold);
  background: var(--ud-gold-lt);
  border-color: rgba(255,165,0,0.35);
  text-decoration: none;
}

.gs-ud-pagination-wrap .gs-pagination li.active a,
.gs-ud-pagination-wrap .gs-pagination li.active span {
  background: var(--ud-gold) !important;
  color: #111 !important;
  border-color: var(--ud-gold) !important;
  font-weight: 700;
}

.gs-ud-pagination-wrap .gs-pagination li.disabled span,
.gs-ud-pagination-wrap .gs-pagination li.disabled a {
  color: #444 !important;
  cursor: default;
  pointer-events: none;
}

/* ── Responsive orders page ──────────────────────────────────── */
@media (max-width: 991px) {
  .gs-ud-filter-tabs {
    padding: 8px 10px;
    gap: 4px;
  }
  .gs-ud-filter-tab {
    padding: 6px 11px;
    font-size: 12px;
  }
  .gs-ud-page-title {
    font-size: 18px;
  }
}

@media (max-width: 767px) {
  .gs-ud-page-header {
    flex-direction: column;
    align-items: flex-start;
  }
  /* Hide time and item-count on very small screens */
  .gs-ud-time,
  .gs-ud-item-count {
    display: none;
  }
  .gs-ud-filter-count {
    display: none;
  }
}

@media (max-width: 575px) {
  .gs-ud-filter-tabs {
    gap: 3px;
    padding: 6px 8px;
  }
  .gs-ud-filter-tab {
    padding: 5px 9px;
    font-size: 11px;
  }
}


/* ================================================================
   ORDER TRACKING PAGE  —  Dark / Gold Gotech Theme
================================================================ */

/* ── Track Form Card ─────────────────────────────────────────── */
.gs-track-card {
  background: var(--ud-dark-2);
  border: 1px solid var(--ud-border);
  border-radius: var(--ud-radius);
  overflow: hidden;
  max-width: 680px;
}

.gs-track-card-topbar {
  height: 3px;
  background: linear-gradient(90deg, #FFA500 0%, #ffcc66 60%, #FFA500 100%);
}

.gs-track-card-body {
  padding: 36px 40px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Icon circle */
.gs-track-icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--ud-gold-lt);
  border: 1px solid rgba(255,165,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.gs-track-card-title {
  color: var(--ud-white);
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 8px;
}

.gs-track-card-desc {
  color: var(--ud-muted);
  font-size: 14px;
  margin: 0 0 28px;
  max-width: 400px;
}

/* Search form */
.gs-track-form {
  width: 100%;
}

.gs-track-input-wrap {
  display: flex;
  align-items: center;
  background: #161616;
  border: 1.5px solid #2d2d2d;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.gs-track-input-wrap:focus-within {
  border-color: var(--ud-gold);
  box-shadow: 0 0 0 3px rgba(255,165,0,0.1);
}

.gs-track-input-icon {
  padding: 0 14px 0 18px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.gs-track-input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: var(--ud-text) !important;
  font-size: 15px;
  height: 54px;
  padding: 0 8px !important;
  min-width: 0;
  font-family: monospace;
  letter-spacing: 0.5px;
}

.gs-track-input::placeholder {
  color: #444 !important;
  font-family: inherit;
  letter-spacing: 0;
}

.gs-track-input--error {
  border-color: #f2415a !important;
  box-shadow: 0 0 0 3px rgba(242,65,90,0.1) !important;
}

.gs-track-submit-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--ud-gold);
  border: none;
  color: #111;
  font-size: 14px;
  font-weight: 700;
  padding: 0 24px;
  height: 54px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.2s, transform 0.15s;
  white-space: nowrap;
}

.gs-track-submit-btn:hover {
  background: #e6940a;
}

.gs-track-submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Spinner animation */
.gs-track-btn-spinner {
  animation: gs-spin 0.8s linear infinite;
}

@keyframes gs-spin {
  to { transform: rotate(360deg); }
}

/* Hint text */
.gs-track-hint {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  color: #555;
  font-size: 12px;
  margin: 12px 0 0;
  line-height: 1.5;
}

.gs-track-hint svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.gs-track-hint a {
  color: var(--ud-gold);
  text-decoration: none;
}

.gs-track-hint a:hover {
  text-decoration: underline;
}

/* ── Result Panel ────────────────────────────────────────────── */
.gs-track-result {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Loading skeleton */
.gs-track-loading {
  background: var(--ud-dark-2);
  border: 1px solid var(--ud-border);
  border-radius: var(--ud-radius);
  padding: 28px 28px 32px;
}

.gs-track-loading-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gs-track-skeleton {
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(90deg, #1e1e1e 25%, #2a2a2a 50%, #1e1e1e 75%);
  background-size: 200% 100%;
  animation: gs-shimmer 1.4s infinite;
  width: 100%;
}

.gs-track-skeleton--wide { height: 20px; width: 60%; }
.gs-track-skeleton--short { width: 40%; }

@keyframes gs-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Order Summary Strip (inside result) ─────────────────────── */
.gs-track-order-strip {
  background: var(--ud-dark-2);
  border: 1px solid var(--ud-border);
  border-top: 3px solid var(--ud-gold);
  border-radius: var(--ud-radius);
  padding: 20px 24px;
  margin-bottom: 16px;
}

.gs-track-order-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
}

.gs-track-order-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 100px;
}

.gs-track-order-meta-label {
  color: var(--ud-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

.gs-track-order-meta-value {
  color: var(--ud-white);
  font-size: 14px;
  font-weight: 600;
}

/* ── Progress Steps Bar ──────────────────────────────────────── */
.gs-track-progress-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  background: var(--ud-dark-2);
  border: 1px solid var(--ud-border);
  border-radius: var(--ud-radius);
  padding: 28px 32px 24px;
  margin-bottom: 16px;
  overflow-x: auto;
}

.gs-track-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 1;
  min-width: 80px;
}

/* Connector line sits between dot and next dot */
.gs-track-step-line {
  position: absolute;
  top: 17px;
  left: calc(50% + 17px);
  right: calc(-50% + 17px);
  height: 2px;
  background: #2d2d2d;
  transition: background-color 0.4s;
  z-index: 0;
}

.gs-track-step-line--filled {
  background: var(--ud-gold);
}

/* Dot */
.gs-track-step-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  position: relative;
  flex-shrink: 0;
  transition: background 0.3s, border-color 0.3s;
}

.gs-track-step--done .gs-track-step-dot {
  background: var(--ud-gold);
  border: 2px solid var(--ud-gold);
  color: #111;
}

.gs-track-step--active .gs-track-step-dot {
  background: #111;
  border: 2px solid var(--ud-gold);
  box-shadow: 0 0 0 4px rgba(255,165,0,0.2);
}

.gs-track-step--upcoming .gs-track-step-dot {
  background: #1e1e1e;
  border: 2px solid #333;
  color: #444;
}

/* Active pulse */
.gs-track-step-pulse {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ud-gold);
  animation: gs-pulse 1.6s infinite;
}

@keyframes gs-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,165,0,0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(255,165,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,165,0,0); }
}

.gs-track-step-num {
  color: #444;
  font-size: 13px;
  font-weight: 700;
}

/* Label */
.gs-track-step-label {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  transition: color 0.3s;
}

.gs-track-step--done .gs-track-step-label   { color: var(--ud-gold); }
.gs-track-step--active .gs-track-step-label { color: var(--ud-white); }
.gs-track-step--upcoming .gs-track-step-label { color: #444; }

/* Declined notice */
.gs-track-declined-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(242,65,90,0.06);
  border: 1px solid rgba(242,65,90,0.2);
  border-radius: var(--ud-radius);
  color: #f2415a;
  font-size: 14px;
  font-weight: 500;
  padding: 14px 20px;
  margin-bottom: 16px;
}

/* ── Tracking Timeline ───────────────────────────────────────── */
.gs-track-timeline-wrap {
  background: var(--ud-dark-2);
  border: 1px solid var(--ud-border);
  border-radius: var(--ud-radius);
  overflow: hidden;
  margin-bottom: 16px;
}

.gs-track-timeline-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--ud-border);
}

.gs-track-timeline-header h5 {
  color: var(--ud-white);
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}

.gs-track-timeline {
  padding: 24px 28px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.gs-track-event {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  padding-bottom: 24px;
}

.gs-track-event:last-child {
  padding-bottom: 0;
}

/* Vertical connector */
.gs-track-event-line {
  position: absolute;
  left: 7px;
  top: 22px;
  bottom: 0;
  width: 2px;
  background: #2a2a2a;
}

.gs-track-event:last-child .gs-track-event-line {
  display: none;
}

/* Event dot */
.gs-track-event-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #444;
  background: #222;
  flex-shrink: 0;
  margin-top: 3px;
  position: relative;
  z-index: 1;
}

.gs-track-event-dot--gold {
  border-color: var(--ud-gold);
  background: var(--ud-gold);
  box-shadow: 0 0 0 4px rgba(255,165,0,0.15);
}

/* Event body */
.gs-track-event-body {
  flex: 1;
  min-width: 0;
}

.gs-track-event-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.gs-track-event-title {
  color: var(--ud-white);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.gs-track-event--latest .gs-track-event-title {
  color: var(--ud-gold);
}

.gs-track-event-date {
  color: #555;
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

.gs-track-event-text {
  color: #777;
  font-size: 13px;
  margin: 0;
  line-height: 1.5;
}

/* No events yet */
.gs-track-no-events {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 24px;
  text-align: center;
  color: #555;
  font-size: 13px;
}

.gs-track-no-events p { margin: 0; }

/* ── Not found state ─────────────────────────────────────────── */
.gs-track-not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 44px 24px;
  text-align: center;
}

.gs-track-not-found-title {
  color: var(--ud-white);
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.gs-track-not-found-sub {
  color: #555;
  font-size: 13px;
  margin: 0;
  max-width: 340px;
}

/* When inside the ud-section card */
#gs-track-content .gs-track-not-found,
#gs-track-content .gs-track-no-events {
  padding: 40px 24px;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 767px) {
  .gs-track-card-body {
    padding: 24px 20px 28px;
  }
  .gs-track-icon-wrap {
    width: 60px;
    height: 60px;
    margin-bottom: 14px;
  }
  .gs-track-submit-btn {
    padding: 0 16px;
    font-size: 0; /* icon only */
  }
  .gs-track-btn-text { display: none; }
  .gs-track-btn-arrow { display: block !important; font-size: 16px; }
  .gs-track-progress-wrap {
    padding: 20px 16px 18px;
  }
  .gs-track-step-label { font-size: 11px; }
  .gs-track-order-meta { gap: 14px 24px; }
  .gs-track-timeline { padding: 18px 16px 14px; }
  .gs-track-event { gap: 12px; }
  .gs-track-event-line { left: 6px; }
  .gs-track-event-dot { width: 14px; height: 14px; }
}

@media (max-width: 575px) {
  .gs-track-card { max-width: 100%; }
  .gs-track-card-title { font-size: 17px; }
  .gs-track-card-desc { font-size: 13px; }
  .gs-track-input { height: 48px; }
  .gs-track-submit-btn { height: 48px; }
  .gs-track-progress-wrap { padding: 16px 10px 14px; gap: 0; }
  .gs-track-step-dot { width: 30px; height: 30px; }
  .gs-track-step-line { top: 14px; }
  .gs-track-step-label { font-size: 10px; }
  .gs-track-order-strip { padding: 14px 16px; }
  .gs-track-event-header { flex-direction: column; gap: 2px; }
  .gs-track-event-date { font-size: 11px; }
}


/* ================================================================
   DEPOSIT PAGES  —  Dark / Gold Gotech Theme
================================================================ */

/* ── Back button ─────────────────────────────────────────────── */
.gs-dep-back-btn {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--ud-dark-2);
  border: 1px solid var(--ud-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
  flex-shrink: 0;
}

.gs-dep-back-btn:hover {
  color: var(--ud-gold);
  border-color: rgba(255,165,0,0.4);
  background: var(--ud-gold-lt);
  text-decoration: none;
}

/* ── Balance row (index page) ────────────────────────────────── */
.gs-dep-balance-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.gs-dep-balance-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(120deg, #1a1507 0%, #1e1a08 60%, #161616 100%);
  border: 1px solid rgba(255,165,0,0.25);
  border-top: 3px solid var(--ud-gold);
  border-radius: var(--ud-radius);
  padding: 20px 24px;
  flex: 1;
  min-width: 240px;
}

.gs-dep-balance-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--ud-gold-lt);
  border: 1px solid rgba(255,165,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gs-dep-balance-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.gs-dep-balance-label {
  color: var(--ud-muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.gs-dep-balance-value {
  color: var(--ud-white);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gs-dep-balance-cta {
  color: var(--ud-gold);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.2s;
}

.gs-dep-balance-cta:hover {
  opacity: 0.75;
  color: var(--ud-gold);
  text-decoration: none;
}

/* Mini stats strip */
.gs-dep-stat-mini {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--ud-dark-2);
  border: 1px solid var(--ud-border);
  border-radius: var(--ud-radius);
  padding: 0 24px;
  flex: 1;
  min-width: 240px;
  overflow: hidden;
}

.gs-dep-stat-mini-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  padding: 20px 0;
  min-width: 0;
}

.gs-dep-stat-mini-val {
  color: var(--ud-white);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gs-dep-stat-mini-label {
  color: var(--ud-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.gs-dep-stat-mini-divider {
  width: 1px;
  height: 40px;
  background: var(--ud-border);
  flex-shrink: 0;
  margin: 0 24px;
}

/* ── Method cell in table ────────────────────────────────────── */
.gs-dep-method-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gs-dep-method-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--ud-gold-lt);
  border: 1px solid rgba(255,165,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gs-dep-method-name {
  color: var(--ud-text);
  font-size: 13px;
  font-weight: 500;
}

/* ── Balance pill (create page) ──────────────────────────────── */
.gs-dep-balance-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ud-gold-lt);
  border: 1px solid rgba(255,165,0,0.3);
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 13px;
  color: #aaa;
  align-self: flex-start;
}

.gs-dep-balance-pill strong {
  color: var(--ud-gold);
  font-weight: 700;
}

/* ── Deposit Form Card (create page) ─────────────────────────── */
.gs-dep-form-card {
  background: var(--ud-dark-2);
  border: 1px solid var(--ud-border);
  border-radius: var(--ud-radius);
  overflow: hidden;
  max-width: 560px;
}

.gs-dep-form-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--ud-border);
  background: #161616;
}

.gs-dep-form-card-header h4 {
  color: var(--ud-white);
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}

/* Fields */
.gs-dep-form-card form {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.gs-dep-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gs-dep-label {
  color: #aaa;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Amount input */
.gs-dep-input-wrap {
  display: flex;
  align-items: center;
  background: #161616;
  border: 1.5px solid #2d2d2d;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.gs-dep-input-wrap:focus-within {
  border-color: var(--ud-gold);
  box-shadow: 0 0 0 3px rgba(255,165,0,0.1);
}

.gs-dep-input-prefix {
  padding: 0 14px;
  color: var(--ud-gold);
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
  border-right: 1px solid #2d2d2d;
  height: 52px;
  display: flex;
  align-items: center;
  background: rgba(255,165,0,0.05);
}

.gs-dep-input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: var(--ud-white) !important;
  font-size: 20px;
  font-weight: 600;
  height: 52px;
  padding: 0 16px !important;
  min-width: 0;
}

.gs-dep-input::placeholder {
  color: #333 !important;
  font-weight: 400;
  font-size: 18px;
}

/* Quick amount chips */
.gs-dep-quick-amounts {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: -8px;
}

.gs-dep-quick-label {
  color: #555;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.gs-dep-chip {
  display: inline-flex;
  align-items: center;
  background: #1e1e1e;
  border: 1px solid #2d2d2d;
  border-radius: 6px;
  color: #888;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
  white-space: nowrap;
}

.gs-dep-chip:hover {
  color: var(--ud-gold);
  border-color: rgba(255,165,0,0.4);
  background: var(--ud-gold-lt);
}

.gs-dep-chip--active {
  color: #111 !important;
  background: var(--ud-gold) !important;
  border-color: var(--ud-gold) !important;
}

/* Select */
.gs-dep-select-wrap {
  position: relative;
}

.gs-dep-select {
  width: 100%;
  background: #161616 !important;
  border: 1.5px solid #2d2d2d !important;
  border-radius: 8px !important;
  color: var(--ud-text) !important;
  font-size: 14px !important;
  height: 52px !important;
  padding: 0 44px 0 16px !important;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.2s !important;
  outline: none !important;
}

.gs-dep-select:focus {
  border-color: var(--ud-gold) !important;
  box-shadow: 0 0 0 3px rgba(255,165,0,0.1) !important;
}

.gs-dep-select-arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: flex;
  align-items: center;
}

/* Dynamic payment fields */
.gs-dep-payment-fields {
  background: #161616;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 16px;
  animation: gs-fadeIn 0.2s ease;
}

@keyframes gs-fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Divider */
.gs-dep-form-divider {
  height: 1px;
  background: var(--ud-border);
  margin: 0 -24px;
}

/* Footer row */
.gs-dep-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.gs-dep-secure-note {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #555;
  font-size: 12px;
}

/* Submit button */
.gs-dep-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ud-gold);
  border: none;
  border-radius: 8px;
  color: #111;
  font-size: 14px;
  font-weight: 700;
  padding: 13px 28px;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.15s;
  white-space: nowrap;
}

.gs-dep-submit-btn:hover {
  background: #e6940a;
  transform: translateY(-1px);
}

.gs-dep-submit-btn:active {
  transform: scale(0.97);
}

/* ── Info note (create page) ─────────────────────────────────── */
.gs-dep-info-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(255,165,0,0.04);
  border: 1px solid rgba(255,165,0,0.15);
  border-radius: var(--ud-radius);
  padding: 14px 18px;
  max-width: 560px;
}

.gs-dep-info-note svg { flex-shrink: 0; margin-top: 1px; }

.gs-dep-info-note p {
  color: #666;
  font-size: 13px;
  margin: 0;
  line-height: 1.6;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 991px) {
  .gs-dep-balance-row { flex-direction: column; }
  .gs-dep-stat-mini { padding: 0 16px; }
  .gs-dep-stat-mini-divider { margin: 0 16px; }
}

@media (max-width: 767px) {
  .gs-dep-form-card { max-width: 100%; }
  .gs-dep-form-card form { padding: 18px; gap: 16px; }
  .gs-dep-form-card-header { padding: 14px 18px; }
  .gs-dep-form-footer { flex-direction: column; align-items: flex-start; gap: 12px; }
  .gs-dep-submit-btn { width: 100%; justify-content: center; }
  .gs-dep-secure-note { font-size: 11px; }
  .gs-dep-balance-value { font-size: 20px; }
  .gs-dep-stat-mini { padding: 0 14px; }
  .gs-dep-stat-mini-divider { margin: 0 12px; }
  .gs-dep-stat-mini-val { font-size: 15px; }
}

@media (max-width: 575px) {
  .gs-dep-balance-card { padding: 16px; }
  .gs-dep-balance-icon { width: 44px; height: 44px; }
  .gs-dep-input { font-size: 17px; }
  .gs-dep-quick-amounts { gap: 6px; }
  .gs-dep-chip { padding: 4px 10px; font-size: 11px; }
  .gs-dep-stat-mini { flex-direction: column; align-items: flex-start; padding: 16px; gap: 12px; }
  .gs-dep-stat-mini-item { padding: 0; }
  .gs-dep-stat-mini-divider { width: 100%; height: 1px; margin: 0; }
  .gs-dep-info-note { max-width: 100%; }
}


/* ================================================================
   TRANSACTIONS PAGE  —  Dark / Gold Gotech Theme
================================================================ */

/* ── Summary Cards row ───────────────────────────────────────── */
.gs-txn-summary-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.gs-txn-summary-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--ud-dark-2);
  border: 1px solid var(--ud-border);
  border-radius: var(--ud-radius);
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s, transform 0.2s;
}

.gs-txn-summary-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  opacity: 0;
  transition: opacity 0.25s;
}

.gs-txn-summary-card:hover { transform: translateY(-2px); }
.gs-txn-summary-card:hover::after { opacity: 1; }

.gs-txn-summary-card--in::after   { background: #27be69; }
.gs-txn-summary-card--out::after  { background: #f2415a; }
.gs-txn-summary-card--wallet::after { background: var(--ud-gold); }
.gs-txn-summary-card--count::after { background: #147fff; }

/* Icon */
.gs-txn-summary-icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gs-txn-summary-card--in .gs-txn-summary-icon     { background: rgba(39,190,105,.12);  color: #27be69; }
.gs-txn-summary-card--out .gs-txn-summary-icon    { background: rgba(242,65,90,.12);   color: #f2415a; }
.gs-txn-summary-card--wallet .gs-txn-summary-icon { background: var(--ud-gold-lt);     color: var(--ud-gold); }
.gs-txn-summary-card--count .gs-txn-summary-icon  { background: rgba(20,127,255,.12);  color: #147fff; }

/* Info */
.gs-txn-summary-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.gs-txn-summary-label {
  color: var(--ud-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  white-space: nowrap;
}

.gs-txn-summary-value {
  color: var(--ud-white);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gs-txn-summary-value--in   { color: #27be69; }
.gs-txn-summary-value--out  { color: #f2415a; }
.gs-txn-summary-value--gold { color: var(--ud-gold); }

/* ── Table cells ─────────────────────────────────────────────── */
.gs-txn-id {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: #888;
  word-break: break-all;
}

.gs-txn-details {
  color: #777;
  font-size: 13px;
  max-width: 200px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gs-txn-amount {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.gs-txn-amount--in  { color: #27be69; }
.gs-txn-amount--out { color: #f2415a; }

/* ── Transaction Detail Modal ────────────────────────────────── */
.gs-txn-modal-dialog {
  max-width: 460px;
  width: 100%;
}

.gs-txn-modal-content {
  background: var(--ud-dark-2) !important;
  border: 1px solid rgba(255,165,0,0.2) !important;
  border-radius: 12px !important;
  overflow: hidden;
}

/* Modal header */
.gs-txn-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--ud-border);
  background: #161616;
}

.gs-txn-modal-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gs-txn-modal-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--ud-gold-lt);
  border: 1px solid rgba(255,165,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gs-txn-modal-header h5 {
  color: var(--ud-white);
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}

.gs-txn-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--ud-border);
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
  flex-shrink: 0;
}

.gs-txn-modal-close:hover {
  color: #f2415a;
  border-color: rgba(242,65,90,0.4);
  background: rgba(242,65,90,0.06);
}

/* Loading skeleton inside modal body */
.gs-txn-modal-loading {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gs-txn-modal-body { min-height: 100px; }

/* ── Transaction detail content (loaded via AJAX) ────────────── */
.gs-txn-detail {
  display: flex;
  flex-direction: column;
}

/* Amount hero */
.gs-txn-detail-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 28px 24px 24px;
  border-bottom: 1px solid var(--ud-border);
  position: relative;
  overflow: hidden;
}

.gs-txn-detail-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.04;
}

.gs-txn-detail-hero--in::before  { background: #27be69; }
.gs-txn-detail-hero--out::before { background: #f2415a; }

.gs-txn-detail-sign {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.gs-txn-detail-hero--in  .gs-txn-detail-sign { color: #27be69; }
.gs-txn-detail-hero--out .gs-txn-detail-sign { color: #f2415a; }

.gs-txn-detail-amount {
  font-size: 30px;
  font-weight: 800;
  color: var(--ud-white);
  line-height: 1;
  letter-spacing: -0.5px;
}

/* Detail rows */
.gs-txn-detail-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.gs-txn-detail-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 22px;
  border-bottom: 1px solid var(--ud-border);
}

.gs-txn-detail-row:last-child { border-bottom: none; }

.gs-txn-detail-key {
  color: var(--ud-muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  padding-top: 1px;
  min-width: 110px;
}

.gs-txn-detail-val {
  color: var(--ud-text);
  font-size: 13px;
  font-weight: 500;
  text-align: right;
  word-break: break-word;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .gs-txn-summary-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
  .gs-txn-summary-row { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .gs-txn-summary-value { font-size: 15px; }
}

@media (max-width: 767px) {
  .gs-txn-summary-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .gs-txn-summary-card { padding: 14px; gap: 10px; }
  .gs-txn-summary-icon { width: 38px; height: 38px; }
  .gs-txn-details { max-width: 120px; }
  .gs-txn-modal-dialog { max-width: calc(100vw - 32px); }
  .gs-txn-detail-amount { font-size: 24px; }
}

@media (max-width: 575px) {
  .gs-txn-summary-row { grid-template-columns: 1fr 1fr; }
  .gs-txn-summary-label { font-size: 10px; }
  .gs-txn-summary-value { font-size: 13px; }
  .gs-txn-detail-key { min-width: 90px; font-size: 11px; }
}


/* ================================================================
   WITHDRAWAL PAGES  —  Dark / Gold Gotech Theme
================================================================ */

/* ── Balance card accent (gold-tinted top border) ────────────── */
.gs-wdw-balance-card {
  border-top-color: var(--ud-gold) !important;
}

/* Coloured stat values */
.gs-wdw-pending-val { color: #ffc107; }
.gs-wdw-done-val    { color: #27be69; }

/* ── Account cell in table ───────────────────────────────────── */
.gs-wdw-account {
  color: #888;
  font-size: 12px;
  font-family: 'Courier New', monospace;
  max-width: 160px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Fee info banner (create page) ──────────────────────────── */
.gs-wdw-fee-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(255,165,0,0.05);
  border: 1px solid rgba(255,165,0,0.18);
  border-left: 3px solid var(--ud-gold);
  border-radius: var(--ud-radius);
  padding: 13px 18px;
  max-width: 560px;
}

.gs-wdw-fee-banner-icon { flex-shrink: 0; margin-top: 1px; }

.gs-wdw-fee-banner p {
  color: #888;
  font-size: 13px;
  margin: 0;
  line-height: 1.6;
}

.gs-wdw-fee-banner strong {
  color: var(--ud-gold);
  font-weight: 700;
}

/* ── Form card width ─────────────────────────────────────────── */
.gs-wdw-form-card {
  max-width: 560px;
}

/* Required / optional labels */
.gs-wdw-required { color: #f2415a; font-weight: 700; }
.gs-wdw-optional { color: #555; font-weight: 400; text-transform: none; font-size: 11px; }

/* ── Generic text input (withdraw fields) ────────────────────── */
.gs-wdw-input-wrap {
  display: flex;
  align-items: center;
  background: #161616;
  border: 1.5px solid #2d2d2d;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.gs-wdw-input-wrap:focus-within {
  border-color: var(--ud-gold);
  box-shadow: 0 0 0 3px rgba(255,165,0,0.1);
}

.gs-wdw-input-icon {
  padding: 0 12px 0 14px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: #555;
}

.gs-wdw-input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: var(--ud-text) !important;
  font-size: 14px;
  height: 48px;
  padding: 0 14px 0 0 !important;
  min-width: 0;
}

.gs-wdw-input::placeholder { color: #444 !important; }

/* ── Extra fields sections ───────────────────────────────────── */
.gs-wdw-extra-fields {
  animation: gs-fadeIn 0.2s ease;
}

/* Bank fields — 2-col grid on wider screens */
.gs-wdw-bank-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}

.gs-wdw-bank-grid .gs-dep-field {
  /* keeps vertical gap from parent form */
}

/* ── Textarea ────────────────────────────────────────────────── */
.gs-wdw-textarea {
  width: 100%;
  background: #161616 !important;
  border: 1.5px solid #2d2d2d !important;
  border-radius: 8px !important;
  color: var(--ud-text) !important;
  font-size: 14px;
  padding: 12px 14px !important;
  resize: vertical;
  min-height: 96px;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.gs-wdw-textarea:focus {
  border-color: var(--ud-gold) !important;
  box-shadow: 0 0 0 3px rgba(255,165,0,0.1) !important;
}

.gs-wdw-textarea::placeholder { color: #444 !important; }

/* ── Live fee preview ────────────────────────────────────────── */
.gs-wdw-fee-preview {
  background: #161616;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 8px;
  animation: gs-fadeIn 0.2s ease;
}

.gs-wdw-fee-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #666;
}

.gs-wdw-fee-row span:last-child {
  font-weight: 600;
  color: #999;
  font-family: 'Courier New', monospace;
}

.gs-wdw-fee-row--deduct span:last-child { color: #f2415a; }

.gs-wdw-fee-row--total {
  padding-top: 7px;
  border-top: 1px solid #2a2a2a;
  color: var(--ud-text);
}

.gs-wdw-fee-row--total span:first-child { font-weight: 600; color: var(--ud-white); }
.gs-wdw-fee-row--total span:last-child  { color: #27be69; font-size: 15px; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 767px) {
  .gs-wdw-bank-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .gs-wdw-fee-banner  { max-width: 100%; }
  .gs-wdw-form-card   { max-width: 100%; }
}

@media (max-width: 575px) {
  .gs-wdw-fee-banner p { font-size: 12px; }
  .gs-wdw-fee-row { font-size: 12px; }
  .gs-wdw-fee-row--total span:last-child { font-size: 14px; }
}


/* ================================================================
   REWARD POINTS PAGES  —  Dark / Gold Gotech Theme
================================================================ */

/* ── Hero cards row ──────────────────────────────────────────── */
.gs-rwd-hero-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 16px;
}

/* Base hero card */
.gs-rwd-hero-card {
  background: var(--ud-dark-2);
  border: 1px solid var(--ud-border);
  border-radius: var(--ud-radius);
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s, transform 0.2s;
}

.gs-rwd-hero-card:hover {
  border-color: rgba(255,165,0,0.3);
  transform: translateY(-2px);
}

/* Gold glow behind main card */
.gs-rwd-hero-card--main {
  background: linear-gradient(135deg, #1a1507 0%, #1e1a08 60%, #151515 100%);
  border-color: rgba(255,165,0,0.25);
  border-top: 3px solid var(--ud-gold);
}

.gs-rwd-hero-card-glow {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,165,0,0.15) 0%, transparent 70%);
  pointer-events: none;
}

/* Icon */
.gs-rwd-hero-card-icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: var(--ud-gold-lt);
  border: 1px solid rgba(255,165,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 2px;
}

/* Body */
.gs-rwd-hero-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.gs-rwd-hero-card-label {
  color: var(--ud-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.gs-rwd-hero-card-value {
  color: var(--ud-white);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.5px;
}

.gs-rwd-hero-card--main .gs-rwd-hero-card-value {
  font-size: 36px;
  color: var(--ud-gold);
}

.gs-rwd-hero-card-sub {
  color: #555;
  font-size: 12px;
}

/* Rate value */
.gs-rwd-rate-val { font-size: 22px !important; color: var(--ud-gold) !important; }
.gs-rwd-rate-pts { font-size: 14px; font-weight: 400; color: var(--ud-muted); }

/* CTA inside main card */
.gs-rwd-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--ud-gold);
  color: #111;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.2s;
  align-self: flex-start;
  margin-top: 4px;
}

.gs-rwd-hero-cta:hover {
  background: #e6940a;
  color: #111;
  text-decoration: none;
}

/* ── How it works strip ──────────────────────────────────────── */
.gs-rwd-how-strip {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--ud-dark-2);
  border: 1px solid var(--ud-border);
  border-radius: var(--ud-radius);
  padding: 14px 20px;
  flex-wrap: wrap;
}

.gs-rwd-how-label {
  color: var(--ud-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  white-space: nowrap;
  flex-shrink: 0;
}

.gs-rwd-how-steps {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.gs-rwd-how-step {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #888;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.gs-rwd-how-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ud-gold-lt);
  border: 1px solid rgba(255,165,0,0.3);
  color: var(--ud-gold);
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gs-rwd-how-arrow {
  color: #333;
  font-size: 14px;
}

/* ── Points badge in table ───────────────────────────────────── */
.gs-rwd-points-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--ud-gold-lt);
  border: 1px solid rgba(255,165,0,0.25);
  border-radius: 20px;
  color: var(--ud-gold);
  font-size: 13px;
  font-weight: 700;
  padding: 4px 12px;
}

/* ── Convert page layout ─────────────────────────────────────── */
.gs-rwd-convert-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px;
  align-items: start;
}

.gs-rwd-form-card { max-width: 100%; }

/* min pts note */
.gs-rwd-min-note {
  color: #555;
  font-size: 11px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* Points prefix icon */
.gs-rwd-pts-prefix {
  background: rgba(255,165,0,0.06) !important;
}

/* ── Live conversion preview ─────────────────────────────────── */
.gs-rwd-preview {
  background: #161616;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: gs-fadeIn 0.2s ease;
}

.gs-rwd-preview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.gs-rwd-preview-label {
  color: #666;
  font-size: 12px;
}

.gs-rwd-preview-val {
  color: #999;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Courier New', monospace;
}

.gs-rwd-preview-divider {
  height: 1px;
  background: #2a2a2a;
}

.gs-rwd-preview-row--total .gs-rwd-preview-label {
  color: var(--ud-white);
  font-weight: 600;
}

.gs-rwd-preview-credit {
  color: #27be69 !important;
  font-size: 16px !important;
}

/* ── Info column (convert page) ──────────────────────────────── */
.gs-rwd-info-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Rate card */
.gs-rwd-rate-card {
  background: linear-gradient(135deg, #1a1507 0%, #1e1a08 80%, #151515 100%);
  border: 1px solid rgba(255,165,0,0.25);
  border-top: 3px solid var(--ud-gold);
  border-radius: var(--ud-radius);
  padding: 20px;
}

.gs-rwd-rate-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.gs-rwd-rate-card-top h5 {
  color: var(--ud-white);
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.gs-rwd-rate-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(0,0,0,0.3);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 10px;
}

.gs-rwd-rate-pts-big {
  color: var(--ud-gold);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.gs-rwd-rate-eq {
  color: #555;
  font-size: 18px;
  font-weight: 300;
}

.gs-rwd-rate-usd-big {
  color: #27be69;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.gs-rwd-rate-note {
  color: #555;
  font-size: 11px;
  text-align: center;
  margin: 0;
  line-height: 1.4;
}

/* Stats card */
.gs-rwd-stats-card {
  background: var(--ud-dark-2);
  border: 1px solid var(--ud-border);
  border-radius: var(--ud-radius);
  padding: 18px 20px;
}

.gs-rwd-stats-title {
  color: var(--ud-white);
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ud-border);
}

.gs-rwd-stats-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gs-rwd-stats-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.gs-rwd-stats-list li span {
  color: var(--ud-muted);
  font-size: 12px;
}

.gs-rwd-stats-pts { color: var(--ud-gold) !important; font-size: 14px; }
.gs-rwd-stats-usd { color: #27be69 !important; font-size: 14px; }
.gs-rwd-stats-list li strong { font-size: 14px; color: var(--ud-white); }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1400px) {
  .gs-rwd-hero-row { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

@media (max-width: 1199px) {
  .gs-rwd-convert-layout { grid-template-columns: 1fr; }
  .gs-rwd-info-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
}

@media (max-width: 991px) {
  .gs-rwd-hero-row { grid-template-columns: 1fr 1fr; gap: 12px; }
  .gs-rwd-hero-card--main { grid-column: span 2; }
  .gs-rwd-hero-card-value { font-size: 22px; }
  .gs-rwd-hero-card--main .gs-rwd-hero-card-value { font-size: 28px; }
}

@media (max-width: 767px) {
  .gs-rwd-how-strip { gap: 10px; }
  .gs-rwd-how-steps { gap: 6px; }
  .gs-rwd-info-col { grid-template-columns: 1fr; }
  .gs-rwd-rate-display { padding: 10px; }
  .gs-rwd-rate-pts-big,
  .gs-rwd-rate-usd-big { font-size: 18px; }
}

@media (max-width: 575px) {
  .gs-rwd-hero-row { grid-template-columns: 1fr 1fr; }
  .gs-rwd-hero-card { padding: 16px; gap: 6px; }
  .gs-rwd-hero-card--main { grid-column: span 2; }
  .gs-rwd-hero-card-value { font-size: 18px; }
  .gs-rwd-hero-card--main .gs-rwd-hero-card-value { font-size: 24px; }
  .gs-rwd-how-strip { flex-direction: column; align-items: flex-start; gap: 8px; }
  .gs-rwd-how-steps { gap: 5px; }
  .gs-rwd-how-arrow { display: none; }
  .gs-rwd-preview-credit { font-size: 14px !important; }
}


/* ================================================================
   AFFILIATE PROGRAM PAGE  —  Dark / Gold Gotech Theme
================================================================ */

/* ── Stats row ───────────────────────────────────────────────── */
.gs-aff-stats-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 16px;
}

.gs-aff-stat-card {
  background: var(--ud-dark-2);
  border: 1px solid var(--ud-border);
  border-radius: var(--ud-radius);
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s, transform 0.2s;
}

.gs-aff-stat-card:hover {
  border-color: rgba(255,165,0,0.3);
  transform: translateY(-2px);
}

.gs-aff-stat-card--balance {
  background: linear-gradient(120deg, #1a1507 0%, #1e1a08 60%, #151515 100%);
  border-color: rgba(255,165,0,0.25);
  border-top: 3px solid var(--ud-gold);
}

.gs-aff-stat-glow {
  position: absolute;
  top: -30px; right: -30px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,165,0,0.12) 0%, transparent 70%);
  pointer-events: none;
}

.gs-aff-stat-icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: var(--ud-gold-lt);
  border: 1px solid rgba(255,165,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gs-aff-stat-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.gs-aff-stat-label {
  color: var(--ud-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  white-space: nowrap;
}

.gs-aff-stat-value {
  color: var(--ud-white);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gs-aff-stat-card--balance .gs-aff-stat-value {
  color: var(--ud-gold);
  font-size: 22px;
}

/* ── Tools grid (link + banner) ──────────────────────────────── */
.gs-aff-tools-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.gs-aff-tool-card {
  background: var(--ud-dark-2);
  border: 1px solid var(--ud-border);
  border-radius: var(--ud-radius);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Tool card header */
.gs-aff-tool-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.gs-aff-tool-header-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--ud-gold-lt);
  border: 1px solid rgba(255,165,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gs-aff-tool-title {
  color: var(--ud-white);
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px;
}

.gs-aff-tool-desc {
  color: #666;
  font-size: 12px;
  margin: 0;
  line-height: 1.4;
}

/* ── Copy box (link) ─────────────────────────────────────────── */
.gs-aff-copy-box {
  display: flex;
  align-items: center;
  background: #161616;
  border: 1.5px solid #2d2d2d;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.gs-aff-copy-box:hover {
  border-color: rgba(255,165,0,0.35);
}

.gs-aff-copy-text {
  flex: 1;
  color: #888;
  font-size: 12px;
  font-family: 'Courier New', monospace;
  padding: 12px 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  min-width: 0;
  user-select: all;
}

.gs-aff-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ud-gold);
  border: none;
  color: #111;
  font-size: 13px;
  font-weight: 700;
  padding: 12px 16px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.2s;
  white-space: nowrap;
  height: 100%;
}

.gs-aff-copy-btn:hover { background: #e6940a; }

.gs-aff-copy-btn--copied {
  background: #27be69 !important;
  color: #fff !important;
}

/* Small copy btn variant */
.gs-aff-copy-btn--sm {
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 6px;
  height: auto;
}

/* Share buttons row */
.gs-aff-share-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.gs-aff-share-label {
  color: #555;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.gs-aff-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.15s;
}

.gs-aff-share-btn:hover { opacity: 0.85; transform: translateY(-1px); }

.gs-aff-share-btn--fb { background: #1877f2; color: #fff; }
.gs-aff-share-btn--tw { background: #000; color: #fff; }
.gs-aff-share-btn--wa { background: #25d366; color: #fff; }

/* ── Banner preview ──────────────────────────────────────────── */
.gs-aff-banner-preview {
  background: #111;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  overflow: hidden;
  max-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gs-aff-banner-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── HTML code textarea ──────────────────────────────────────── */
.gs-aff-code-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gs-aff-code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.gs-aff-code-label {
  color: #666;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.gs-aff-code-textarea {
  width: 100%;
  background: #111 !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 7px !important;
  color: #666 !important;
  font-size: 11px;
  font-family: 'Courier New', monospace;
  padding: 10px 12px !important;
  resize: none;
  height: 72px;
  outline: none !important;
  line-height: 1.5;
  user-select: all;
  scrollbar-width: thin;
  scrollbar-color: #333 #111;
}

/* ── How it works strip (reuses reward styles) ───────────────── */
.gs-aff-how-strip {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--ud-dark-2);
  border: 1px solid var(--ud-border);
  border-radius: var(--ud-radius);
  padding: 14px 20px;
  flex-wrap: wrap;
}

/* ── Row number in referral table ────────────────────────────── */
.gs-aff-row-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: #1e1e1e;
  border: 1px solid var(--ud-border);
  color: #666;
  font-size: 11px;
  font-weight: 700;
}

/* ── Email cell with avatar initial ──────────────────────────── */
.gs-aff-email-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gs-aff-email-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ud-gold-lt);
  border: 1px solid rgba(255,165,0,0.2);
  color: var(--ud-gold);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .gs-aff-stats-row { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

@media (max-width: 991px) {
  .gs-aff-stats-row { grid-template-columns: 1fr 1fr; gap: 12px; }
  .gs-aff-stat-card--balance { grid-column: span 2; }
  .gs-aff-tools-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .gs-aff-stats-row { grid-template-columns: 1fr 1fr; }
  .gs-aff-stat-card--balance { grid-column: span 2; }
  .gs-aff-stat-value { font-size: 17px; }
  .gs-aff-stat-card--balance .gs-aff-stat-value { font-size: 19px; }
  .gs-aff-tool-card { padding: 16px; }
  .gs-aff-how-strip { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 575px) {
  .gs-aff-stats-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .gs-aff-stat-card { padding: 14px; gap: 10px; }
  .gs-aff-copy-text { font-size: 10px; }
  .gs-aff-copy-btn { padding: 10px 12px; font-size: 12px; }
  .gs-aff-share-btn { width: 28px; height: 28px; }
}


/* ================================================================
   FAVOURITE SELLERS PAGE  —  Dark / Gold Gotech Theme
================================================================ */

/* ── Counter strip ───────────────────────────────────────────── */
.gs-fav-counter-strip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(242,65,90,0.06);
  border: 1px solid rgba(242,65,90,0.18);
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 13px;
  color: #888;
  align-self: flex-start;
}

.gs-fav-counter-strip strong { color: #f2415a; font-weight: 700; }

/* ── Seller cards grid ───────────────────────────────────────── */
.gs-fav-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* ── Individual seller card ──────────────────────────────────── */
.gs-fav-card {
  background: var(--ud-dark-2);
  border: 1px solid var(--ud-border);
  border-radius: var(--ud-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s, transform 0.2s, box-shadow 0.25s;
}

.gs-fav-card:hover {
  border-color: rgba(255,165,0,0.3);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Banner / image area */
.gs-fav-card-banner {
  position: relative;
  height: 120px;
  background: #161616;
  overflow: hidden;
  flex-shrink: 0;
}

.gs-fav-card-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.gs-fav-card:hover .gs-fav-card-banner img {
  transform: scale(1.04);
}

.gs-fav-card-banner-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1a1a 0%, #222 100%);
}

/* Heart badge overlay */
.gs-fav-heart-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(242,65,90,0.4);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Card body */
.gs-fav-card-body {
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.gs-fav-shop-name {
  color: var(--ud-white);
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gs-fav-owner,
.gs-fav-address {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: #666;
  font-size: 12px;
  margin: 0;
  line-height: 1.4;
}

.gs-fav-owner svg,
.gs-fav-address svg { flex-shrink: 0; margin-top: 1px; }

.gs-fav-tagline {
  color: #555;
  font-size: 11px;
  font-style: italic;
  margin: 0;
  line-height: 1.4;
  margin-top: 2px;
}

/* Card footer */
.gs-fav-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--ud-border);
  flex-shrink: 0;
}

/* Visit button */
.gs-fav-visit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ud-gold-lt);
  border: 1px solid rgba(255,165,0,0.3);
  border-radius: 6px;
  color: var(--ud-gold);
  font-size: 12px;
  font-weight: 700;
  padding: 7px 14px;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
  white-space: nowrap;
  flex: 1;
  justify-content: center;
}

.gs-fav-visit-btn:hover {
  background: var(--ud-gold-md);
  border-color: var(--ud-gold);
  color: var(--ud-gold);
  text-decoration: none;
}

/* Remove button */
.gs-fav-remove-btn {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--ud-border);
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

.gs-fav-remove-btn:hover {
  color: #f2415a;
  border-color: rgba(242,65,90,0.4);
  background: rgba(242,65,90,0.06);
}

/* ── Empty state ─────────────────────────────────────────────── */
.gs-fav-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 60px 24px;
  text-align: center;
  background: var(--ud-dark-2);
  border: 1px solid var(--ud-border);
  border-radius: var(--ud-radius);
}

.gs-fav-empty-icon {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(242,65,90,0.06);
  border: 1px solid rgba(242,65,90,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.gs-fav-empty-title {
  color: var(--ud-white);
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

.gs-fav-empty-desc {
  color: #555;
  font-size: 13px;
  margin: 0;
  max-width: 340px;
  line-height: 1.6;
}

/* ── Confirm delete modal ────────────────────────────────────── */
.gs-fav-modal-dialog {
  max-width: 420px;
}

.gs-fav-modal-content {
  background: var(--ud-dark-2) !important;
  border: 1px solid rgba(242,65,90,0.25) !important;
  border-radius: 12px !important;
  overflow: hidden;
}

.gs-fav-modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ud-border);
  background: #161616;
}

.gs-fav-modal-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(242,65,90,0.1);
  border: 1px solid rgba(242,65,90,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gs-fav-modal-header h5 {
  color: var(--ud-white);
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  flex: 1;
}

.gs-fav-modal-body {
  padding: 20px 22px;
  color: #888;
  font-size: 14px;
  line-height: 1.6;
}

.gs-fav-modal-body p { margin: 0 0 6px; }
.gs-fav-modal-body p:last-child { margin-bottom: 0; }

.gs-fav-modal-shopname { color: var(--ud-white); font-weight: 700; }

.gs-fav-modal-note {
  color: #555;
  font-size: 12px;
}

.gs-fav-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--ud-border);
}

.gs-fav-modal-cancel-btn {
  background: transparent;
  border: 1px solid var(--ud-border);
  border-radius: 7px;
  color: #888;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 18px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.gs-fav-modal-cancel-btn:hover {
  color: var(--ud-white);
  border-color: #555;
}

.gs-fav-modal-confirm-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #f2415a;
  border: none;
  border-radius: 7px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 20px;
  text-decoration: none;
  transition: background-color 0.2s, transform 0.15s;
}

.gs-fav-modal-confirm-btn:hover {
  background: #d63350;
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .gs-fav-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 991px) {
  .gs-fav-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

@media (max-width: 767px) {
  .gs-fav-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .gs-fav-card-banner { height: 100px; }
  .gs-fav-card-body { padding: 12px 14px 10px; }
  .gs-fav-shop-name { font-size: 14px; }
  .gs-fav-modal-dialog { max-width: calc(100vw - 32px); }
}

@media (max-width: 575px) {
  .gs-fav-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .gs-fav-card-banner { height: 90px; }
  .gs-fav-card-body { padding: 10px 12px 8px; gap: 4px; }
  .gs-fav-card-footer { padding: 10px 12px; }
  .gs-fav-visit-btn { font-size: 11px; padding: 6px 10px; }
  .gs-fav-remove-btn { width: 30px; height: 30px; }
  .gs-fav-empty { padding: 40px 16px; }
  .gs-fav-empty-icon { width: 72px; height: 72px; }
  .gs-fav-empty-title { font-size: 16px; }
}


/* ================================================================
   MESSAGES PAGES  —  Dark / Gold Gotech Theme
================================================================ */

/* ── Conversation rows (index) ───────────────────────────────── */
.gs-msg-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--ud-border);
  transition: background-color 0.15s;
  cursor: default;
}

.gs-msg-row:last-of-type { border-bottom: none; }
.gs-msg-row:hover { background: rgba(255,165,0,0.025); }

/* Avatar */
.gs-msg-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255,165,0,0.25);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--ud-dark-3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gs-msg-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gs-msg-avatar span {
  color: var(--ud-gold);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

/* Content */
.gs-msg-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.gs-msg-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.gs-msg-name {
  color: var(--ud-white);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gs-msg-time {
  color: #555;
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
}

.gs-msg-subject {
  color: var(--ud-text);
  font-size: 13px;
  font-weight: 500;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gs-msg-preview {
  color: #555;
  font-size: 12px;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Meta column */
.gs-msg-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.gs-msg-count-badge {
  display: inline-flex;
  align-items: center;
  background: var(--ud-gold-lt);
  border: 1px solid rgba(255,165,0,0.25);
  border-radius: 20px;
  color: var(--ud-gold);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  white-space: nowrap;
}

.gs-msg-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.gs-msg-action-btn {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ud-border);
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
  flex-shrink: 0;
}

.gs-msg-action-btn--view {
  color: var(--ud-gold);
  border-color: rgba(255,165,0,0.25);
  background: var(--ud-gold-lt);
}

.gs-msg-action-btn--view:hover {
  background: var(--ud-gold-md);
  border-color: var(--ud-gold);
  color: var(--ud-gold);
  text-decoration: none;
}

.gs-msg-action-btn--delete { color: #555; }

.gs-msg-action-btn--delete:hover {
  color: #f2415a;
  border-color: rgba(242,65,90,0.35);
  background: rgba(242,65,90,0.06);
}

/* ── Compose modal ───────────────────────────────────────────── */
.gs-msg-compose-dialog {
  max-width: 500px;
}

.gs-msg-compose-content {
  background: var(--ud-dark-2) !important;
  border: 1px solid rgba(255,165,0,0.2) !important;
  border-radius: 12px !important;
  overflow: hidden;
}

.gs-msg-compose-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--ud-border);
  background: #161616;
}

.gs-msg-compose-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gs-msg-compose-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--ud-gold-lt);
  border: 1px solid rgba(255,165,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gs-msg-compose-header h5 {
  color: var(--ud-white);
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}

.gs-msg-compose-body {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gs-msg-compose-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gs-msg-compose-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--ud-border);
}

/* ================================================================
   CONVERSATION VIEW (create.blade.php)
================================================================ */

/* Header avatar */
.gs-conv-header-avatar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.gs-conv-header-avatar img,
.gs-conv-header-avatar > span:first-child {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--ud-gold);
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
  background: var(--ud-dark-3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ud-gold);
  font-size: 15px;
  font-weight: 700;
}

.gs-conv-header-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gs-conv-header-info strong {
  color: var(--ud-white);
  font-size: 14px;
  font-weight: 600;
}

.gs-conv-header-info span {
  color: #555;
  font-size: 11px;
}

/* ── Thread container ────────────────────────────────────────── */
.gs-conv-thread {
  background: var(--ud-dark-2);
  border: 1px solid var(--ud-border);
  border-radius: var(--ud-radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 520px;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #333 var(--ud-dark-2);
}

.gs-conv-thread::-webkit-scrollbar { width: 4px; }
.gs-conv-thread::-webkit-scrollbar-track { background: var(--ud-dark-2); }
.gs-conv-thread::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }

/* ── Bubble wrap (row) ───────────────────────────────────────── */
.gs-conv-bubble-wrap {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  max-width: 75%;
}

.gs-conv-bubble-wrap--mine {
  align-self: flex-end;
  flex-direction: row-reverse;
}

/* Avatar inside thread */
.gs-conv-bubble-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(255,165,0,0.2);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--ud-dark-3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gs-conv-bubble-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gs-conv-bubble-avatar span {
  color: var(--ud-gold);
  font-size: 12px;
  font-weight: 700;
}

.gs-conv-bubble-avatar--mine {
  border-color: rgba(255,165,0,0.45);
}

/* ── Bubble ──────────────────────────────────────────────────── */
.gs-conv-bubble {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 11px 14px;
  border-radius: 12px;
  max-width: 100%;
  position: relative;
}

.gs-conv-bubble--theirs {
  background: #1e1e1e;
  border: 1px solid #2a2a2a;
  border-bottom-left-radius: 3px;
}

.gs-conv-bubble--mine {
  background: linear-gradient(135deg, #1e1a08 0%, #1a1507 100%);
  border: 1px solid rgba(255,165,0,0.2);
  border-bottom-right-radius: 3px;
}

.gs-conv-bubble-name {
  color: var(--ud-gold);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.gs-conv-bubble-text {
  color: var(--ud-text);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  word-break: break-word;
  white-space: pre-wrap;
}

.gs-conv-bubble--mine .gs-conv-bubble-text { color: var(--ud-white); }

.gs-conv-bubble-time {
  color: #444;
  font-size: 10px;
  align-self: flex-end;
}

.gs-conv-bubble--mine .gs-conv-bubble-time { color: rgba(255,165,0,0.4); }

/* Empty thread */
.gs-conv-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 40px 0;
  text-align: center;
  color: #555;
  font-size: 13px;
}

.gs-conv-empty p { margin: 0; }

/* ── Reply form ──────────────────────────────────────────────── */
.gs-conv-reply-card {
  background: var(--ud-dark-2);
  border: 1px solid var(--ud-border);
  border-top: 2px solid rgba(255,165,0,0.2);
  border-radius: var(--ud-radius);
  padding: 14px 16px;
}

.gs-conv-reply-form {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

/* Reply avatar */
.gs-conv-reply-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid rgba(255,165,0,0.35);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--ud-dark-3);
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  margin-bottom: 2px;
}

.gs-conv-reply-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gs-conv-reply-avatar span {
  color: var(--ud-gold);
  font-size: 14px;
  font-weight: 700;
}

/* Input wrap */
.gs-conv-reply-input-wrap {
  flex: 1;
  display: flex;
  align-items: flex-end;
  background: #161616;
  border: 1.5px solid #2d2d2d;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
  min-width: 0;
}

.gs-conv-reply-input-wrap:focus-within {
  border-color: var(--ud-gold);
  box-shadow: 0 0 0 3px rgba(255,165,0,0.1);
}

.gs-conv-reply-input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: var(--ud-text) !important;
  font-size: 14px;
  padding: 12px 14px !important;
  resize: none;
  min-height: 46px;
  max-height: 160px;
  line-height: 1.5;
  overflow-y: auto;
}

.gs-conv-reply-input::placeholder { color: #444 !important; }

.gs-conv-reply-send-btn {
  width: 46px;
  min-height: 46px;
  background: var(--ud-gold);
  border: none;
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.2s;
  align-self: stretch;
}

.gs-conv-reply-send-btn:hover { background: #e6940a; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 767px) {
  .gs-msg-row { padding: 12px 16px; gap: 10px; }
  .gs-msg-preview { display: none; }
  .gs-msg-count-badge { display: none; }
  .gs-conv-bubble-wrap { max-width: 88%; }
  .gs-conv-thread { max-height: 380px; padding: 14px; }
  .gs-msg-compose-dialog { max-width: calc(100vw - 32px); }
}

@media (max-width: 575px) {
  .gs-msg-avatar { width: 38px; height: 38px; }
  .gs-msg-name { font-size: 13px; }
  .gs-msg-subject { font-size: 12px; }
  .gs-msg-action-btn { width: 28px; height: 28px; }
  .gs-conv-bubble { padding: 9px 12px; }
  .gs-conv-bubble-text { font-size: 13px; }
  .gs-conv-reply-form { gap: 8px; }
  .gs-conv-header-avatar { display: none; }
}


/* ================================================================
   TICKETS & DISPUTES  —  Dark / Gold Gotech Theme
================================================================ */

/* Ticket icon wrap in conversation row */
.gs-ticket-icon-wrap,
.gs-dispute-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gs-ticket-icon-wrap {
  background: var(--ud-gold-lt);
  border: 1px solid rgba(255,165,0,0.2);
}

.gs-dispute-icon-wrap {
  background: rgba(242,65,90,0.08);
  border: 1px solid rgba(242,65,90,0.2);
}

/* Dispute reply count badge — red tint */
.gs-dispute-badge {
  background: rgba(242,65,90,0.1) !important;
  border-color: rgba(242,65,90,0.25) !important;
  color: #f2415a !important;
}

/* Support badge in ticket thread header */
.gs-ticket-support-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ud-gold-lt);
  border: 1px solid rgba(255,165,0,0.3);
  border-radius: 20px;
  color: var(--ud-gold);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  flex-shrink: 0;
}

/* Support bubble accent */
.gs-conv-bubble--support {
  border-color: rgba(255,165,0,0.15) !important;
}

.gs-conv-bubble-avatar--support {
  border-color: rgba(255,165,0,0.4) !important;
}

.gs-conv-bubble-name--support {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ud-gold) !important;
}

/* ================================================================
   PROFILE EDIT PAGE  —  Dark / Gold Gotech Theme
================================================================ */

/* Two-column layout */
.gs-profile-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  align-items: start;
}

/* ── Photo card (left column) ────────────────────────────────── */
.gs-profile-photo-col { display: flex; flex-direction: column; gap: 0; }

.gs-profile-photo-card {
  background: var(--ud-dark-2);
  border: 1px solid var(--ud-border);
  border-radius: var(--ud-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.gs-profile-photo-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ud-border);
  background: #161616;
  width: 100%;
}

.gs-profile-photo-card-header h5 {
  color: var(--ud-white);
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

/* Photo wrap */
.gs-profile-photo-wrap {
  padding: 24px 24px 16px;
  display: flex;
  justify-content: center;
  width: 100%;
}

.gs-profile-photo-preview {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 3px solid rgba(255,165,0,0.35);
  box-shadow: 0 0 0 4px rgba(255,165,0,0.1);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--ud-dark-3);
  cursor: pointer;
}

.gs-profile-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.25s;
}

.gs-profile-photo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.25s;
  cursor: pointer;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.gs-profile-photo-preview:hover .gs-profile-photo-overlay { opacity: 1; }
.gs-profile-photo-preview:hover img { filter: brightness(0.65); }

/* Name / email under photo */
.gs-profile-photo-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0 16px 16px;
  text-align: center;
}

.gs-profile-photo-info strong {
  color: var(--ud-white);
  font-size: 15px;
  font-weight: 700;
}

.gs-profile-photo-info span {
  color: #666;
  font-size: 12px;
}

.gs-profile-member-since {
  color: #444 !important;
  font-size: 11px !important;
  background: #1a1a1a;
  border-radius: 20px;
  padding: 3px 10px;
  margin-top: 4px;
  border: 1px solid var(--ud-border);
}

/* Upload button */
.gs-profile-upload-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: calc(100% - 32px);
  margin: 0 16px 20px;
  padding: 10px;
  background: var(--ud-gold-lt);
  border: 1px solid rgba(255,165,0,0.3);
  border-radius: 7px;
  color: var(--ud-gold);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  text-align: center;
}

.gs-profile-upload-btn:hover {
  background: var(--ud-gold-md);
  border-color: var(--ud-gold);
  color: var(--ud-gold);
}

/* ── Fields column (right) ───────────────────────────────────── */
.gs-profile-fields-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Section card */
.gs-profile-section-card {
  background: var(--ud-dark-2);
  border: 1px solid var(--ud-border);
  border-radius: var(--ud-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.gs-profile-section-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 15px 22px;
  border-bottom: 1px solid var(--ud-border);
  background: #161616;
}

.gs-profile-section-header h5 {
  color: var(--ud-white);
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

/* 2-column field grid inside a section card */
.gs-profile-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 20px 22px 4px;
}

.gs-profile-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 18px;
  padding-right: 16px;
}

.gs-profile-field:nth-child(even) { padding-right: 0; padding-left: 16px; }

/* Full-width address field lives outside the grid, inside section card padding */
.gs-profile-section-card > .gs-profile-field {
  padding: 0 22px 20px;
}

/* Submit row */
.gs-profile-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--ud-dark-2);
  border: 1px solid var(--ud-border);
  border-radius: var(--ud-radius);
  padding: 18px 22px;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .gs-profile-layout { grid-template-columns: 240px 1fr; }
}

@media (max-width: 991px) {
  .gs-profile-layout { grid-template-columns: 1fr; }
  .gs-profile-photo-card {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .gs-profile-photo-card-header { width: 100%; }
  .gs-profile-photo-wrap { width: auto; padding: 20px 24px 20px; }
  .gs-profile-photo-preview { width: 90px; height: 90px; }
  .gs-profile-photo-info {
    flex: 1;
    align-items: flex-start;
    text-align: left;
    padding: 0 16px 0 0;
  }
  .gs-profile-upload-btn { width: calc(100% - 32px); margin: 0 16px 16px; }
  .gs-ticket-support-badge { display: none; }
}

@media (max-width: 767px) {
  .gs-profile-fields-grid {
    grid-template-columns: 1fr;
    padding: 16px 16px 0;
  }
  .gs-profile-field { padding-right: 0 !important; padding-left: 0 !important; }
  .gs-profile-section-card > .gs-profile-field { padding: 0 16px 16px; }
  .gs-profile-section-header { padding: 13px 16px; }
  .gs-profile-submit-row {
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 16px;
  }
  .gs-profile-submit-row .gs-dep-submit-btn { width: 100%; justify-content: center; }
}

@media (max-width: 575px) {
  .gs-profile-photo-card { flex-direction: column; }
  .gs-profile-photo-wrap { padding: 20px 24px 12px; }
  .gs-profile-photo-preview { width: 100px; height: 100px; }
  .gs-profile-photo-info { align-items: center; text-align: center; padding: 0 16px; }
}


/* ================================================================
   PRICING PLANS & PACKAGE PAGES  —  Dark / Gold Gotech Theme
================================================================ */

/* ── Active plan banner ──────────────────────────────────────── */
.gs-pkg-active-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(39,190,105,0.06);
  border: 1px solid rgba(39,190,105,0.2);
  border-left: 3px solid #27be69;
  border-radius: var(--ud-radius);
  padding: 14px 18px;
  flex-wrap: wrap;
}

.gs-pkg-active-banner--expired {
  background: rgba(242,65,90,0.06);
  border-color: rgba(242,65,90,0.2);
  border-left-color: #f2415a;
}

.gs-pkg-active-banner-icon { flex-shrink: 0; }

.gs-pkg-active-banner-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.gs-pkg-active-banner-text strong {
  color: var(--ud-white);
  font-size: 14px;
  font-weight: 600;
}

.gs-pkg-active-banner-text span {
  color: #666;
  font-size: 12px;
}

.gs-pkg-renew-btn {
  display: inline-flex;
  align-items: center;
  background: var(--ud-gold);
  color: #111;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s;
}

.gs-pkg-renew-btn:hover { background: #e6940a; color: #111; text-decoration: none; }

/* ── Plan cards grid ─────────────────────────────────────────── */
.gs-pkg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* ── Individual plan card ────────────────────────────────────── */
.gs-pkg-card {
  background: var(--ud-dark-2);
  border: 1px solid var(--ud-border);
  border-radius: var(--ud-radius);
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s, transform 0.2s, box-shadow 0.25s;
}

.gs-pkg-card:hover {
  border-color: rgba(255,165,0,0.3);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}

/* Featured / popular card */
.gs-pkg-card--featured {
  border-color: rgba(255,165,0,0.4);
  background: linear-gradient(160deg, #1a1507 0%, #1e1a08 60%, #161616 100%);
  border-top: 3px solid var(--ud-gold);
}

/* Current plan card */
.gs-pkg-card--current {
  border-color: rgba(39,190,105,0.35);
}

/* Popular ribbon */
.gs-pkg-ribbon {
  position: absolute;
  top: 14px;
  right: -28px;
  background: var(--ud-gold);
  color: #111;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 4px 36px;
  transform: rotate(45deg);
  transform-origin: center;
}

/* Current plan badge */
.gs-pkg-current-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(39,190,105,0.1);
  border: 1px solid rgba(39,190,105,0.3);
  border-radius: 20px;
  color: #27be69;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  align-self: flex-start;
}

/* Plan name */
.gs-pkg-card-name {
  color: var(--ud-white);
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  padding: 0;
}

/* Price block */
.gs-pkg-price-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gs-pkg-price-row {
  display: flex;
  align-items: flex-start;
  gap: 2px;
}

.gs-pkg-price-currency {
  color: var(--ud-gold);
  font-size: 18px;
  font-weight: 600;
  margin-top: 6px;
  line-height: 1;
}

.gs-pkg-price-amount {
  color: var(--ud-white);
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
}

.gs-pkg-price-amount--free {
  color: #27be69;
  font-size: 32px;
}

.gs-pkg-price-period {
  color: #555;
  font-size: 13px;
  font-weight: 500;
}

/* Details / description */
.gs-pkg-details {
  color: #777;
  font-size: 13px;
  line-height: 1.7;
  flex: 1;
}

.gs-pkg-details ul,
.gs-pkg-details p { margin: 0 0 6px; padding: 0; }

.gs-pkg-details ul { padding-left: 16px; }
.gs-pkg-details li { margin-bottom: 4px; }

/* Divider */
.gs-pkg-divider {
  height: 1px;
  background: var(--ud-border);
}

/* CTA button */
.gs-pkg-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.gs-pkg-btn--outline {
  background: transparent;
  border: 1.5px solid rgba(255,165,0,0.35);
  color: var(--ud-gold);
}

.gs-pkg-btn--outline:hover {
  background: var(--ud-gold-lt);
  border-color: var(--ud-gold);
  color: var(--ud-gold);
  text-decoration: none;
  transform: translateY(-1px);
}

.gs-pkg-btn--gold {
  background: var(--ud-gold);
  color: #111;
}

.gs-pkg-btn--gold:hover {
  background: #e6940a;
  color: #111;
  text-decoration: none;
  transform: translateY(-1px);
}

/* CTA group (current plan) */
.gs-pkg-cta-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gs-pkg-current-label {
  color: #555;
  font-size: 12px;
  text-align: center;
}

/* ================================================================
   PACKAGE DETAILS PAGE
================================================================ */

/* Price pill in header */
.gs-pkg-detail-price-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ud-gold-lt);
  border: 1px solid rgba(255,165,0,0.3);
  border-radius: 20px;
  color: var(--ud-gold);
  font-size: 15px;
  font-weight: 700;
  padding: 8px 18px;
  flex-shrink: 0;
}

.gs-pkg-detail-price-sep { color: rgba(255,165,0,0.4); font-weight: 300; }

/* Two-column layout */
.gs-pkg-detail-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  align-items: start;
}

/* Summary card */
.gs-pkg-summary-card {
  background: var(--ud-dark-2);
  border: 1px solid var(--ud-border);
  border-top: 3px solid var(--ud-gold);
  border-radius: var(--ud-radius);
  overflow: hidden;
  position: sticky;
  top: 16px;
}

.gs-pkg-summary-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ud-border);
  background: #161616;
}

.gs-pkg-summary-header h5 {
  color: var(--ud-white);
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.gs-pkg-summary-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.gs-pkg-summary-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--ud-border);
}

.gs-pkg-summary-list li:last-child { border-bottom: none; }

.gs-pkg-summary-key {
  color: var(--ud-muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.gs-pkg-summary-val {
  color: var(--ud-white);
  font-size: 13px;
  font-weight: 600;
  text-align: right;
}

.gs-pkg-summary-val--price {
  color: var(--ud-gold);
  font-size: 16px;
  font-weight: 800;
}

/* Warning row */
.gs-pkg-summary-warning {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  background: rgba(255,193,7,0.06);
  color: #ffc107 !important;
  font-size: 12px !important;
  padding: 10px 16px !important;
}

.gs-pkg-summary-warning span { font-size: 12px; line-height: 1.4; }

/* Form card */
.gs-pkg-form-card { max-width: 100%; }

.gs-pkg-form-card form {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .gs-pkg-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
  .gs-pkg-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .gs-pkg-detail-layout { grid-template-columns: 1fr; }
  .gs-pkg-summary-card { position: static; }
}

@media (max-width: 767px) {
  .gs-pkg-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .gs-pkg-card { padding: 20px 18px 18px; gap: 12px; }
  .gs-pkg-price-amount { font-size: 32px; }
  .gs-pkg-active-banner { flex-direction: column; align-items: flex-start; }
  .gs-pkg-form-card form { padding: 16px; gap: 14px; }
}

@media (max-width: 575px) {
  .gs-pkg-grid { grid-template-columns: 1fr; }
  .gs-pkg-card--featured { order: -1; }
  .gs-pkg-detail-price-pill { display: none; }
}


/* ================================================================
   USER DASHBOARD — MOBILE SIDEBAR
   Dark / Gold — #111111 bg · #FFA500 accent · matches homepage nav
================================================================ */

/* ── Slide-in panel ──────────────────────────────────────────── */
.gs-mob-ud-sidebar {
  position: fixed;
  top: 0;
  left: -320px;
  width: 300px;
  max-width: 88vw;
  height: 100dvh;
  height: 100vh; /* fallback */
  background: #111111;
  border-right: 1px solid rgba(255,165,0,0.12);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: left 0.32s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.32s ease;
}

.gs-mob-ud-sidebar.active,
.mobile-menu.active.gs-mob-ud-sidebar {
  left: 0;
  box-shadow: 6px 0 40px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,165,0,0.08);
}

/* ── Backdrop ────────────────────────────────────────────────── */
.gs-mob-ud-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s ease;
}

.gs-mob-ud-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* ── Header bar ──────────────────────────────────────────────── */
.gs-mob-ud-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #0d0d0d;
  border-bottom: 2px solid #FFA500;
  flex-shrink: 0;
}

.gs-mob-ud-header-logo img {
  height: 32px;
  width: auto;
  object-fit: contain;
}

.gs-mob-ud-close {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: transparent;
  border: 1px solid rgba(255,165,0,0.25);
  color: #888;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.gs-mob-ud-close:hover {
  background: rgba(255,165,0,0.12);
  border-color: #FFA500;
  color: #FFA500;
}

/* ── Profile card ────────────────────────────────────────────── */
.gs-mob-ud-profile {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #1a1507 0%, #151515 100%);
  border-bottom: 1px solid rgba(255,165,0,0.1);
  flex-shrink: 0;
}

.gs-mob-ud-profile-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid #FFA500;
  box-shadow: 0 0 0 3px rgba(255,165,0,0.12);
  overflow: hidden;
  flex-shrink: 0;
  background: #222;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gs-mob-ud-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gs-mob-ud-profile-avatar span {
  color: #FFA500;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.gs-mob-ud-profile-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gs-mob-ud-profile-info strong {
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.gs-mob-ud-profile-info span {
  color: #555;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* Dashboard chip */
.gs-mob-ud-dash-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,165,0,0.12);
  border: 1px solid rgba(255,165,0,0.3);
  border-radius: 20px;
  color: #FFA500;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 9px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.3px;
  transition: background 0.2s;
}

.gs-mob-ud-dash-chip:hover {
  background: rgba(255,165,0,0.22);
  color: #FFA500;
  text-decoration: none;
}

/* ── Balance strip ───────────────────────────────────────────── */
.gs-mob-ud-balance-strip {
  display: flex;
  align-items: center;
  background: #0d0d0d;
  border-bottom: 1px solid #1a1a1a;
  flex-shrink: 0;
}

.gs-mob-ud-balance-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 8px;
}

.gs-mob-ud-balance-label {
  color: #444;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.gs-mob-ud-balance-val {
  color: #FFA500;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
  text-align: center;
}

.gs-mob-ud-balance-divider {
  width: 1px;
  height: 28px;
  background: #1e1e1e;
  flex-shrink: 0;
}

/* ── Navigation ──────────────────────────────────────────────── */
.gs-mob-ud-nav {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0 8px;
  scrollbar-width: thin;
  scrollbar-color: #222 #111;
}

.gs-mob-ud-nav::-webkit-scrollbar { width: 3px; }
.gs-mob-ud-nav::-webkit-scrollbar-track { background: #111; }
.gs-mob-ud-nav::-webkit-scrollbar-thumb { background: #222; border-radius: 3px; }

/* Group labels */
.gs-mob-ud-group-label {
  display: block;
  color: #333;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 14px 18px 5px;
}

.gs-mob-ud-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Nav links */
.gs-mob-ud-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 18px;
  color: #888;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: color 0.18s, background 0.18s, border-color 0.18s;
  position: relative;
}

.gs-mob-ud-link:hover {
  color: #FFA500;
  background: rgba(255,165,0,0.05);
  border-left-color: rgba(255,165,0,0.4);
  text-decoration: none;
}

.gs-mob-ud-link--active {
  color: #FFA500 !important;
  background: rgba(255,165,0,0.08) !important;
  border-left-color: #FFA500 !important;
  font-weight: 600;
}

/* Icon */
.gs-mob-ud-link-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: inherit;
  opacity: 0.7;
  transition: opacity 0.18s;
}

.gs-mob-ud-link:hover .gs-mob-ud-link-icon,
.gs-mob-ud-link--active .gs-mob-ud-link-icon {
  opacity: 1;
}

/* Vendor chip badge */
.gs-mob-ud-link-chip {
  display: inline-flex;
  align-items: center;
  background: rgba(255,165,0,0.12);
  border: 1px solid rgba(255,165,0,0.3);
  border-radius: 20px;
  color: #FFA500;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 2px 7px;
  margin-left: auto;
  flex-shrink: 0;
}

/* ── Divider ─────────────────────────────────────────────────── */
.gs-mob-ud-nav-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, #2a2a2a, transparent);
  margin: 0 16px;
  flex-shrink: 0;
}

/* ── Logout ──────────────────────────────────────────────────── */
.gs-mob-ud-logout {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 18px;
  color: #555;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: color 0.18s, background 0.18s, border-color 0.18s;
  flex-shrink: 0;
}

.gs-mob-ud-logout:hover {
  color: #f2415a;
  background: rgba(242,65,90,0.05);
  border-left-color: #f2415a;
  text-decoration: none;
}

/* ── Footer strip ────────────────────────────────────────────── */
.gs-mob-ud-footer {
  padding: 10px 18px;
  background: #0d0d0d;
  border-top: 1px solid #1a1a1a;
  flex-shrink: 0;
  text-align: center;
}

.gs-mob-ud-footer span {
  color: #2a2a2a;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 600;
}

/* ── JS open/close (backup — the existing script uses .active) ─ */
body.gs-mob-ud-open {
  overflow: hidden;
}


/* ================================================================
   USER DASHBOARD MOBILE SIDEBAR — SCROLL FIX
================================================================ */

/* Ensure the sidebar itself never scrolls — only the nav does */
.gs-mob-ud-sidebar {
  overflow: hidden !important;
}

/* Nav must be the ONLY scrolling zone and must fill all remaining space */
.gs-mob-ud-nav {
  flex: 1 1 0 !important;
  min-height: 0 !important;           /* critical: allows flex child to shrink below content size */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;  /* smooth iOS momentum */
}

/* Header, profile, balance, logout, footer — must NOT grow/shrink to steal nav space */
.gs-mob-ud-header,
.gs-mob-ud-profile,
.gs-mob-ud-balance-strip,
.gs-mob-ud-nav-divider,
.gs-mob-ud-logout,
.gs-mob-ud-footer {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}

/* ════════════════════════════════════════════════════
   Footer Map Section
   ════════════════════════════════════════════════════ */
.footer-map-section {
    background: #111111;
    padding: 48px 0 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.footer-map-inner {
    display: flex;
    align-items: flex-start;
    gap: 36px;
}

/* Left header column */
.footer-map-header {
    flex: 0 0 220px;
    min-width: 0;
}

.footer-map-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 20px;
    margin-bottom: 14px;
}

.footer-map-badge svg {
    flex-shrink: 0;
    color: var(--color-theme, #e74c3c);
}

.footer-map-title {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 12px;
    line-height: 1.25;
}

.footer-map-address {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13.5px;
    line-height: 1.5;
    margin: 0;
}

.footer-map-address svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--color-theme, #e74c3c);
}

/* Right map frame column */
.footer-map-frame-wrap {
    flex: 1;
    min-width: 0;
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-map-iframe {
    display: block;
    width: 100%;
    height: 320px;
    border: 0;
    filter: grayscale(20%) contrast(1.05);
    transition: filter 0.3s ease;
}

.footer-map-frame-wrap:hover .footer-map-iframe {
    filter: grayscale(0%) contrast(1);
}

/* "Get Directions" floating button */
.footer-map-directions-btn {
    position: absolute;
    bottom: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #ffffff;
    color: #111111;
    font-size: 12.5px;
    font-weight: 700;
    padding: 9px 16px;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    letter-spacing: 0.01em;
    transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.footer-map-directions-btn:hover {
    background: var(--color-theme, #e74c3c);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    text-decoration: none;
}

.footer-map-directions-btn svg {
    flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .footer-map-inner {
        flex-direction: column;
        gap: 22px;
    }
    .footer-map-header {
        flex: none;
    }
    .footer-map-title {
        font-size: 20px;
    }
}

@media (max-width: 576px) {
    .footer-map-section {
        padding: 36px 0 32px;
    }
    .footer-map-iframe {
        height: 240px;
    }
    .footer-map-title {
        font-size: 18px;
    }
}

/* ════════════════════════════════════════════════════
   Contact page – clickable address card
   ════════════════════════════════════════════════════ */

/* Turn the address card into a proper link element */
a.ctp-info-card--link {
    display: flex;           /* match the non-anchor cards */
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.18s;
}

a.ctp-info-card--link:hover,
a.ctp-info-card--link:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
    transform: translateX(3px);
    text-decoration: none;
}

/* Nudge the icon colour on hover to signal interactivity */
a.ctp-info-card--link:hover .ctp-icon--address,
a.ctp-info-card--link:focus-visible .ctp-icon--address {
    background: var(--color-theme, #e0a800);
}

/* "View on Google Maps" hint text */
.ctp-map-hint {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--color-theme, #e0a800);
    margin-top: 4px;
    font-weight: 500;
    letter-spacing: 0.01em;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity 0.2s, transform 0.2s;
}

a.ctp-info-card--link:hover .ctp-map-hint,
a.ctp-info-card--link:focus-visible .ctp-map-hint {
    opacity: 1;
    transform: translateY(0);
}