@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif;
  background: #fff;
  color: #111;
}
.sticky-top {
  position: sticky;
  top: 0;
  z-index: 1000;
}
.sticky-mid{
  position: sticky;
  top: var(--topbar-h, 48px); /* fallback 48px */
  z-index: 999;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ================= CONTAINER ================= */
.container {
  max-width: 1700px;
  margin: auto;
  padding: 0 16px;
}

/* ================= TOP HEADER ================= */
.header-top {
  background: #c31f26;
  color: #fff;
  font-size: 14px;
}

.top-row {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 8px 0;
}

.top-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.top-label {
  font-weight: 600;
  white-space: nowrap;
}

.countdown {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.time {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: #fff;
}

.time strong {
  font-weight: 700;
}

.time span {
  font-size: 11px;
  opacity: 0.9;
}

.top-mid,
.top-right {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.top-mid .sep {
  padding-right: 12px;
  margin-right: 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.25);
}

.muted {
  opacity: 0.85;
}

.top-link {
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.top-link img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.top-link:hover {
  text-decoration: underline;
}

/* ================= SMALL DROPDOWNS (LANG/CURRENCY) ================= */
.dd {
  position: relative;
}

.dd-btn {
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  padding: 6px 0;
}

.dd-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 200px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
  padding: 8px 0;
  display: none;
  z-index: 999;
}

.dd-menu li a {
  color: #111827;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 13px;
}

.dd-menu li a:hover {
  background: #f3f4f6;
}

.dd-menu img {
  width: 18px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid #e5e7eb;
}

/* open dropdown */
.dd:hover .dd-menu,
.dd:focus-within .dd-menu {
  display: block;
}

/* ================= MIDDLE HEADER ================= */
.header-middle {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  flex-wrap: wrap;
}

.logo img {
  height: 34px;
  width: auto;
  display: block;
}

/* ================= SEARCH ================= */
.search-wrap {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex: 1;
  min-width: 280px;
  max-width: 840px;
}

/* CATEGORY DROPDOWN */
.search-category {
  position: relative;
  border-right: none;
  margin-left: 5px;
  z-index: 50;
}

.category-btn {
  height: 44px;
  padding: 0 14px;
  border: none;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 14px;
  white-space: nowrap;
}

/* dropdown panel */
.category-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 240px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
  display: none;
  z-index: 999;
}

/* OPEN on hover or focus */
.search-category:hover .category-panel,
.search-category:focus-within .category-panel {
  display: block;
}

.category-search {
  padding: 10px;
  border-bottom: 1px solid #e5e7eb;
}

.category-search input {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  font-size: 13px;
}

.category-menu {
  list-style: none;
  max-height: 260px;
  overflow-y: auto;
}

.category-menu li {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 14px;
}

.category-menu li:hover {
  background: #f3f4f6;
}

.category-menu li.active {
  background: #fdcf00;
  color: #fff;
}

/* search input + button wrapper */
.search-field {
  position: relative;
  flex: 1;
}

.common-input {
  width: 100%;
  height: 44px;
  padding: 0 52px 0 16px;
  border: 1px solid #e5e7eb;
  border-left: none;
  outline: none;
  font-size: 14px;
}

.search-btn {
  width: 44px;
  height: 44px;
  border: none;
  background: #c31f26;
  color: #fff;
  border-radius: 10px;
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-btn:hover {
  background: #fdcf00;
}

.search-btn i {
  font-size: 20px;
}

/* ================= RIGHT ICONS ================= */
.header-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

.icon-link {
  text-decoration: none;
  color: #c31f26;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
}

.icon-link i {
  font-size: 22px;
}

.icon-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.badge {
  position: absolute;
  top: -7px;
  right: -10px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #c31f26;
  color: #fff;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ================= RESPONSIVE HELPERS ================= */
.d-none {
  display: none !important;
}
.d-flex {
  display: flex !important;
}

/* ================= HERO (Advert) ================= */
.hero-area {
  padding: 18px 0 8px;
}

.hero-card {
  height: min(560px, 56vh);
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  padding: 34px 34px 22px 100px;
  background:
  radial-gradient(
    900px 450px at 30% 40%,
    rgba(195, 31, 38, 0.22),
    transparent 60%
  ),
  radial-gradient(
    700px 360px at 85% 30%,
    rgba(253, 207, 0, 0.18),
    transparent 55%
  ),
  repeating-linear-gradient(
    145deg,
    rgba(195, 31, 38, 0.05) 0 2px,
    transparent 2px 18px
  ),
  #fff8e1;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.2fr;
  gap: 26px;
  align-items: center;
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 12px;
  line-height: 1.5rem;

  opacity: 1;
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}

.hero-kicker__text {
  color: #3a74b8;

  opacity: 1;
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}

.hero-kicker__price {
  color: #ef4444;

  opacity: 1;
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}

.hero-title {
  font-size: 3.375rem;
  line-height: 4.1875rem;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: #111827;
  margin-bottom: 18px;

  opacity: 1;
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  background: #c31f26;
  color: #fff;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 10px 24px rgba(27, 122, 143, 0.22);

  opacity: 1;
  transition: opacity 0.7s ease, transform 0.7s ease, filter 0.25s ease;
  will-change: opacity, transform;
}

.hero-btn:hover {
  filter: brightness(0.95);
}

/* ✅ image wrapper */
.hero-media {
  height: 360px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* ✅ image size same always + smooth fade + smooth scale */
.hero-media img {
  width: min(560px, 100%);
  height: 100%;
  object-fit: contain;
  display: block;

  opacity: 1;
  transform: scale(1);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}

/* ================== DOTS ================== */
.hero-dots {
  margin-top: 55px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(49, 50, 68, 0.18);
}

.dot.active {
  background: #3a74b8;
  width: 28px;
}

/* =========================================================
   ✅ HERO SLIDER ANIMATION CLASSES (ONLY HERO)
========================================================= */

/* Low opacity state (when changing) */
.hero-media img.is-fading,
.hero-kicker.is-fading,
.hero-kicker__text.is-fading,
.hero-kicker__price.is-fading,
.hero-title.is-fading,
.hero-btn.is-fading {
  opacity: 0.15;
}

/* ✅ also make image slightly zoom out while fading */
.hero-media img.is-fading {
  transform: scale(0.98);
}

/* ✅ optional: animate whole kicker row */
.hero-kicker.animate-in {
  animation: heroKickerRow 0.55s ease both;
}
@keyframes heroKickerRow {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 1) Title: slide up + fade */
.hero-title.animate-in {
  animation: heroTitleIn 0.65s ease both;
}
@keyframes heroTitleIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2) Kicker text: slide from left + fade */
.hero-kicker__text.animate-in {
  animation: heroKickerIn 0.55s ease both;
}
@keyframes heroKickerIn {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 3) Price: pop/bounce */
.hero-kicker__price.animate-in {
  animation: heroPricePop 0.55s cubic-bezier(0.2, 0.9, 0.2, 1.2) both;
}
@keyframes heroPricePop {
  0% {
    opacity: 0;
    transform: scale(0.82);
  }
  60% {
    opacity: 1;
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 4) Button: slide up + fade */
.hero-btn.animate-in {
  animation: heroBtnIn 0.6s ease both;
}
@keyframes heroBtnIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ================= LATEST DEAL STRIP ================= */
.deal-strip {
  margin-top: 16px;
  padding: 10px 0 28px;
}

.deal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.deal-card {
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  min-height: 120px;
  padding: 22px 22px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
}

.deal-card::after {
  content: "";
  position: absolute;
  right: -28px;
  top: 50%;
  transform: translateY(-50%);
  width: 180px;
  height: 180px;
  border-radius: 50%;
  opacity: 0.55;
  background: rgba(255, 255, 255, 0.45);
}

.deal-card--gray {
  background: #f3f9f3;
}
.deal-card--blue {
  background: #c5cdd9;
}
.deal-card--purple {
  background: #e3e2eb;
}

.deal-info {
  position: relative;
  z-index: 2;
}

.deal-tag {
  font-size: 0.875rem;
  font-weight: 600;
  color: #3a74b8;
  margin-bottom: 8px;
  line-height: 1.3125rem;
}

.deal-strong {
  color: #1b7a8f;
}
.deal-price {
  color: #2563eb;
}

.deal-title {
  font-size: 1.5rem;
  line-height: 1.8125rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 10px;
}

.deal-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #111827;
  font-weight: 800;
  text-decoration: none;
  border-bottom: 2px solid rgba(17, 24, 39, 0.35);
  padding-bottom: 2px;
}

.deal-link:hover {
  border-bottom-color: rgba(17, 24, 39, 0.85);
}

.plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
}

.deal-media {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
}

.deal-media img {
  width: 120px;
  max-width: 100%;
  height: auto;
  display: block;
}

/* ================= DEAL OF THE WEEK ================= */
.dotw-section {
  padding: 18px 0 10px;
}

.dotw-wrap {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
  padding: 18px;
}

/* title row INSIDE border */
.dotw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.dotw-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #111827;
}

.dotw-all {
  font-size: 14px;
  font-weight: 600;
  color: #1d4ed8;
  text-decoration: none;
}
.dotw-all:hover {
  text-decoration: underline;
}

/* ===== banner ===== */
.dotw-banner {
  border-radius: 16px;
  background-color: #c31f26;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  background-repeat: no-repeat;

  min-height: 160px;
  padding: 18px 18px;
  display: grid;
  grid-template-columns: 240px 1fr 320px;
  align-items: center;
  gap: 10px;
}

.dotw-banner-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.dotw-left-img {
  width: 200px;
  max-width: 100%;
  height: auto;
  display: block;
}

.dotw-banner-center {
  text-align: center;
  color: #fff;
}

.dotw-banner-title {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
}

.dotw-center {
  text-align: center;
  color: #fff;
}

.dotw-timer {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.dotw-pill {
  width: 60px;
  height: 60px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.dotw-pill strong {
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

.dotw-pill span {
  font-size: 11px;
  opacity: 0.95;
  line-height: 1;
}

.dotw-banner-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.dotw-right-img {
  width: 290px;
  max-width: 100%;
  height: auto;
  display: block;
  transform: translateY(6px);
}

.dotw-left img,
.dotw-right img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* ===== grid cards ===== */
.dotw-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

.dotw-card {
  position: relative;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 16px;
  background: #fff;
  overflow: hidden;
}
.dotw-card:hover {
  border: 1px solid #fdcf00;
}

.dotw-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 0.875rem;
  font-weight: 400;
  padding: 6px 10px;
  border-radius: 15px 0 15px 0;
  color: #fff;
}
.dotw-badge--orange {
  background: #f59e0b;
}
.dotw-badge--green {
  background: #22c55e;
}
.dotw-badge--red {
  background: #ef4444;
}
.dotw-badge--new {
  background: #f59e0b;
}
.dotw-badge--best {
  background: #10b981;
}
.dotw-badge--sale {
  background: #ef4444;
}


/* Product image box spacing like screenshot */
.dotw-img,
.ilist-img {
  width: 100%;
  height: 200px;
  display: block;
  padding: 0;
  margin: 0 0 16px;
  overflow: hidden;
  border-radius: 12px;
  background: #f3f4f6;
}

/* Image fills gray area */
.dotw-img img,
.ilist-img img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  display: block;
  padding: 0;
  transform: none;
  transition: transform 0.22s ease;
}

.dotw-card:hover .dotw-img img,
.ilist-card:hover .ilist-img img {
  transform: scale(1.04);
}

/* Card spacing */
.dotw-card,
.ilist-card {
  padding: 16px;
  border-radius: 14px;
}

/* Product name spacing */
.dotw-name,
.ilist-name {
  margin: 0 0 26px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  min-height: auto;
}

/* Rating spacing */
.dotw-meta,
.ilist-meta {
  margin-bottom: 10px;
}

/* Progress spacing */
.dotw-progress,
.ilist-progress {
  margin: 0 0 10px;
}

/* Sold spacing */
.dotw-sold,
.ilist-sold {
  margin-bottom: 12px;
}

/* Price spacing */
.dotw-price,
.ilist-price {
  margin: 0 0 16px;
}

/* Button spacing */
.dotw-btn,
.ilist-btn {
  height: 44px;
  border-radius: 999px;
}


.dotw-card-title {
  margin: 12px 0 10px;
  font-size: 15px;
  font-weight: 800;
  color: #111827;
  line-height: 1.25;
}

.dotw-name {
  margin: 50px 0 10px;
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  line-height: 1.25;
  min-height: 38px;
}

.dotw-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 10px;
}

.dotw-meta i {
  color: #f59e0b;
  font-size: 14px;
}

.dotw-rate {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: #374151;
}
.star {
  color: #f59e0b;
}

.dotw-bar {
  height: 4px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}
.dotw-bar span {
  display: block;
  height: 100%;
  background: #0ea5a4;
  border-radius: 999px;
}

.dotw-progress {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
  margin-top: 10px;
  margin-bottom: 10px;
}
.dotw-progress-bar {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #fdcf00;
}

.dotw-sold {
  font-size: 1rem;
  color: #374151;
  margin-bottom: 12px;
}

.dotw-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.dotw-price del {
  color: #9ca3af;
  font-weight: 400;
}
.dotw-price strong {
  font-size: 16px;
  color: #111827;
  font-weight: 400;
}
.dotw-price span {
  color: #6b7280;
  font-size: 1rem;
  font-weight: 600;
}

.dotw-price .old {
  color: #9ca3af;
  text-decoration: line-through;
  font-weight: 600;
}
.dotw-price .now {
  color: #111827;
  font-weight: 600;
}
.dotw-price .qty {
  color: #6b7280;
  font-size: 1rem;
  font-weight: 600;
}

.dotw-btn {
  width: 100%;
  height: 44px;
  border: none;
  border-radius: 999px;
  background: #f3f4f6;
  color: #111827;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.dotw-btn:hover {
  background: #e5e7eb;
}

/* ================= TOP SELLING SECTION ================= */
.topsell {
  padding: 26px 0;
}

.topsell-box {
  border: 1px solid #e6e8ee;
  border-radius: 16px;
  background: #fff;
  padding: 18px;
}

.topsell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 6px 14px;
}

.topsell-title {
  font-size: 1.375rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

.topsell-view {
  font-size: 14px;
  font-weight: 600;
  color: #1b4fd8;
  text-decoration: none;
}
.topsell-view:hover {
  text-decoration: underline;
}

/* grid: big promo + 4 cards */
.topsell-grid {
  display: grid;
  grid-template-columns: 2.1fr repeat(5, 1fr);
  gap: 18px;
  align-items: stretch;
}

/* promo card */
.topsell-promo {
  border-radius: 14px;
  background: #cfefff;
  padding: 26px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 460px;
}

.promo-content {
  justify-content: center;
  text-align: center;
}

.promo-title {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 500;
  color: #111827;
  margin-bottom: 16px;
}

.promo-sub {
  margin-top: 10px;
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f3b55;
}
.promo-off {
  color: #1b7a8f;
}

.promo-btn {
  margin: 18px auto 0;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, 0.08);
  color: #111827;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06);
}
.promo-btn i {
  font-size: 18px;
}
.promo-btn:hover {
  background-color: #c31f26;
  color: white;
}

.promo-media {
  margin-top: 18px;
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 150px;
}
.promo-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.promo-media--right {
  justify-content: flex-end;
}

/* product cards */
.p-card {
  border: 1px solid #e6e8ee;
  border-radius: 14px;
  background: #fff;
  padding: 14px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.p-card:hover {
  border: 1px solid #fdcf00;
}

.p-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 10px;
  border-radius: 10px 0 10px 0;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}
.p-badge--red {
  background: #ef4444;
}

.p-meta {
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.p-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #111827;
  font-size: 12px;
}
.p-rating i {
  color: #f59e0b;
  font-size: 14px;
}
.p-rev {
  color: #6b7280;
}

.p-name {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.25;
}

.p-vendor {
  font-size: 12px;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 8px;
}
.p-shopdot {
  width: 14px;
  height: 10px;
  border-radius: 3px;
  background: #4f46e5;
  display: inline-block;
}

.p-bar {
  height: 4px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}
.p-barfill {
  display: block;
  height: 100%;
  background: #4f46e5;
  border-radius: 999px;
}

.p-sold {
  font-size: 1rem;
  color: #111827;
}
.p-sold strong {
  font-weight: 600;
}

.p-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
}
.p-old {
  color: #9ca3af;
  text-decoration: line-through;
  font-weight: 600;
}
.p-new {
  color: #0f172a;
  font-weight: 600;
  font-size: 1rem;
}
.p-unit {
  color: #6b7280;
  font-weight: 600;
}

.p-btn {
  margin-top: auto;
  width: 100%;
  background: #f3f4f6;
  border: 1px solid #eef0f4;
  border-radius: 999px;
  padding: 12px 14px;
  text-decoration: none;
  color: #0f172a;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.p-btn i {
  font-size: 1.125em;
}

.d-md-flex {
  display: flex !important;
}

.d-lg-flex {
  display: flex !important;
}

.d-xl-flex {
  display: flex !important;
}

/* ================= TRENDING PRODUCTS ================= */
.trending {
  padding: 22px 0 10px;
}

.trending-card {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 18px 18px 20px;
  background: #fff;
}

/* top row */
.trending-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.trending-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
}

/* pills */
.trending-tabs {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tab-pill {
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #111827;
  font-size: 14px;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 500;
}

.tab-pill.active {
  background: #2a5be6;
  border-color: #2a5be6;
  color: #fff;
}

/* banner */
.trending-banner {
  border-radius: 18px;
  overflow: hidden;
  min-height: 150px;
  background: radial-gradient(
      circle at 15% 30%,
      rgba(255, 120, 80, 0.4),
      transparent 40%
    ),
    radial-gradient(
      circle at 75% 40%,
      rgba(60, 160, 255, 0.45),
      transparent 45%
    ),
    linear-gradient(90deg, #3f57ff, #111827);
  display: grid;
  grid-template-columns: 240px 1fr 240px;
  align-items: center;
  padding: 16px 18px;
  margin-bottom: 16px;
}

.banner-left,
.banner-right {
  width: 100%;
  height: 130px;
  object-fit: contain;
  display: block;
}

.banner-text {
  text-align: center;
  font-size: 33px;
  line-height: 1.15;
  color: #fff;
  font-weight: 600;
  line-height: 40px;
}



/* grid cards */
.trending-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.tp-card {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 14px;
  background: #fff;
  position: relative;
}
.tp-card:hover {
  border: 1px solid #fdcf00;
}

.tp-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 6px;
  border-radius: 9px 0 9px 0;
  margin: 1px 0 10px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
}

.tp-tag-new {
  background: #f59e0b;
}
.tp-tag-sold {
  background: #10b981;
}

.tp-media {
  background: #f3f4f6;
  border-radius: 10px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1px 0 10px;
  overflow: hidden;
}

.tp-media img {
  max-width: 180px;
  max-height: 180px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transform: scale(0.9);
  transition: transform 0.22s ease;
  padding: 1rem;
}

.tp-media:hover img {
  transform: scale(1.06);
}

.tp-off {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #16a34a;
  background: #eafaf0;
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 24px;
}

.tp-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  line-height: 1.25;
  margin-bottom: 10px;
  min-height: 40px;
}

.tp-rate {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 12px;
}

.tp-rate .stars {
  color: #f59e0b;
  letter-spacing: 1px;
}

.tp-rate .rate {
  color: #111827;
  font-weight: 500;
}

.tp-rate .count {
  color: #6b7280;
  font-weight: 500;
}

.tp-ship {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #2563eb;
  background: #eef2ff;
  padding: 6px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
  font-weight: 400;
}

.tp-ship span {
  font-weight: 500;
}

.tp-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 50px;
}

.tp-price .old {
  color: #9ca3af;
  text-decoration: line-through;
  font-weight: 600;
}

.tp-price .now {
  color: #111827;
  font-weight: 600;
  font-size: 16px;
}

.tp-price .qty {
  color: #6b7280;
  font-weight: 600;
}

.tp-delivery {
  font-size: 12px;
  color: #111827;
  font-weight: 500;
}

.tp-delivery span {
  color: #2563eb;
  font-weight: 500;
}

/* ✅ Trending cards reveal animation */
.tp-card.js-reveal {
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition: opacity 650ms ease, transform 650ms ease;
  will-change: opacity, transform;
}

.tp-card.js-reveal.is-inview {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* optional: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tp-card.js-reveal {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


/* ===== PROMO TWO CARDS ===== */
.promo-two {
  padding: 18px 0 6px;
}

.promo-two-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 18px;
}

.promo-card {
  border-radius: 18px;
  overflow: hidden;
  min-height: 140px;
  padding: 22px 22px;
  display: grid;
  grid-template-columns: 1fr 250px;
  align-items: center;
  gap: 18px;
  position: relative;
}

/* left light card */
.promo-card--light {
  background: #f3f6fb;
}

.promo-card--light::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -40px;
  width: 240px;
  height: 240px;
  background: rgba(37, 99, 235, 0.08);
  border-radius: 999px;
}

/* right blue card */
.promo-card--blue {
  background: #c31f26;
}

.promo-card--blue::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -70px;
  width: 260px;
  height: 260px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}

.promo-info {
  position: relative;
  z-index: 2;
}

.promo-tag {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #2a5be6;
  margin-bottom: 10px;
}

.promo-tag--yellow {
  color: #ffcc00;
}

.promo-title--white {
  color: #ffffff;
}

.promo-btn--white {
  background: #ffffff;
  color: #111827;
  border: none;
}
/* ================================
   PROMO TWO – REVEAL ANIMATION
   - Left card: comes from left + scale
   - Right card: comes from right + scale
==================================*/
.promo-card.js-reveal {
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  transition: opacity 650ms ease, transform 650ms ease;
  will-change: opacity, transform;
}

.promo-card.js-reveal.from-left {
  transform: translateX(-26px) translateY(10px) scale(0.96);
}

.promo-card.js-reveal.from-right {
  transform: translateX(26px) translateY(10px) scale(0.96);
}

.promo-card.js-reveal.is-inview {
  opacity: 1;
  transform: translateX(0) translateY(0) scale(1);
}

/* optional: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .promo-card.js-reveal {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


/* ===== FEATURED PRODUCTS ===== */
.featured {
  padding: 22px 0;
}

.featured-wrap {
  display: grid;
  grid-template-columns: 1.6fr 0.8fr;
  gap: 22px;
}

/* left big box */
.featured-left {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
  padding: 22px;
}

.featured-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.featured-title {
  font-size: 24px;
  font-weight: 700;
  color: #111827;
}

.featured-view {
  color: #111827;
  text-decoration: none;
  font-weight: 400;
  font-size: 1rem;
  opacity: 0.85;
}

.featured-view:hover {
  text-decoration: underline;
}

.featured-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.fcard {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  padding: 16px;
  position: relative;
}
.fcard:hover {
  border: 1px solid #fdcf00;
}

.frow {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 14px;
  align-items: center;
}

.fimg {
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fimg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transform: scale(0.9);
  transition: transform 0.22s ease;
}
.fimg:hover img {
  transform: scale(1.06);
}

.fname {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  line-height: 1.25;
  margin-bottom: 8px;
}

.frate {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 8px;
}

.fstar {
  color: #f59e0b;
  font-size: 13px;
}

.fby {
  font-size: 12px;
  color: #6b7280;
  margin: 24px 0 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fstore {
  color: #2563eb;
  font-size: 10px;
}

.fprice {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 12px 0 18px 0;
}

.fold {
  color: #9ca3af;
  text-decoration: line-through;
  font-weight: 600;
}

.fnew {
  color: #111827;
  font-weight: 600;
  font-size: 16px;
}

.fqty {
  color: #6b7280;
  font-weight: 500;
  font-size: 1rem;
}

.fbtn {
  height: 40px;
  border-radius: 10px;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 600;
  color: #111827;
  text-decoration: none;
  font-size: 1rem;
}

.fbtn:hover {
  background: #c31f26;
  color: white;
}

.ficon {
  font-size: 14px;
}

/* badges */
.f-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 10px;
  border-radius: 9px 0 9px 0;
  font-size: 14px;
  font-weight: 400;
  color: #fff;
}

.f-badge--red {
  background: #ef4444;
}
.f-badge--purple {
  background: #4f46e5;
}

/* right promo */
.featured-right {
  display: flex;
}

.fpromo {
  width: 99.99%;
  border-radius: 16px;
  padding: 28px 28px 18px;
  color: #fff;
  overflow: hidden;
  position: relative;
  background: #c31f26;
}

.fpromo-title {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 14px;
}

.fpromo-price {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}

.fpromo-from {
  font-size: 1rem;
  opacity: 0.9;
  letter-spacing: 0.06em;
}

.fpromo-big {
  font-size: 37px;
  font-weight: 600;
}

.fpromo-off {
  background: #22c55e;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 500;
}

.fpromo-btn {
  margin: 0 auto 16px;
  width: 150px;
  height: 46px;
  border-radius: 999px;
  background: #fff;
  color: #111827;
  text-decoration: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.fpromo-btn:hover {
  transform: translateY(-1px);
}

.fpromo-arrow {
  font-size: 18px;
}

.fpromo-img {
  margin-top: 50px;
  height: 360px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  
}

.fpromo-img img {
  width: 80%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ===== DISCOUNT STRIP ===== */
.discount-strip {
  padding: 18px 0;
}

.discount-bar {
  border: 1px dashed #010d1b;
  background: #eaf6ff;
  border-radius: 10px;
  padding: 16px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.discount-left {
  font-size: 1rem;
  font-weight: 400;
  color: #c31f26;
}

.discount-underline {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.discount-code {
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  background: #c31f26;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.discount-icon {
  font-size: 16px;
  opacity: 0.95;
}

.discount-right {
  font-size: 14px;
  color: #c31f26;
  font-weight: 500;
  white-space: nowrap;
}

/* ===== RECOMMENDED FOR YOU ===== */
.reco-section {
  padding: 22px 0;
}

.reco-wrap {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
  padding: 18px;
  display: grid;
  grid-template-columns: 520px 1fr;
  gap: 18px;
}

/* LEFT PROMO */
.reco-promo {
  border-radius: 16px;
  background: url(assets/images/bg/recommended-bg.png) center/cover no-repeat;
  color: #fff;
  padding: 26px 26px 0;
  overflow: hidden;
  position: relative;
  min-height: 520px;
  
}

.reco-promo__title {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  max-width: 420px;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

.reco-promo__price {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 10px;
}

.reco-promo__price .from {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.9;
  letter-spacing: 0.06em;
}

.reco-promo__price .amount {
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
}

.reco-promo__price .off {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.reco-promo__img img {
  width: 90%;
  height: 100%;
  object-fit: contain;
  transform: translateY(10px);
}

/* RIGHT BOX */
.reco-box {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 16px;
  background: #fff;
}


.reco-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.reco-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #111827;
}

.reco-view {
  color: #111827;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  opacity: 0.85;
}

.reco-view:hover {
  text-decoration: underline;
}

/* PRODUCT GRID */
.reco-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

/* PRODUCT CARD */
.reco-card {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  padding: 14px;
}
.reco-card:hover {
  border: 1px solid #fdcf00;
}
.reco-img {
  height: 190px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 36px 0 10px;
}

.reco-img img {
  width: 180px;
  height: 180px;
  object-fit: contain;
  transform: scale(0.9);
  transition: transform 0.22s ease;
}
.reco-img:hover img {
  transform: scale(1.06);
}

.reco-badges {
  margin-top: 10px;
}

.reco-badge {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 6px;
  background: #e9f2ff;
  color: #2563eb;
  font-size: 12px;
  font-weight: 600;
}

.reco-name {
  margin: 12px 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  line-height: 1.25;
}

.reco-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: #6b7280;
  font-size: 12px;
}

.reco-rating .stars {
  color: #f59e0b;
  letter-spacing: 1px;
  font-size: 12px;
}

.reco-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eef2ff;
  color: #2563eb;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 12px;
}

.reco-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 14px;
}

.reco-price .old {
  color: #9ca3af;
  text-decoration: line-through;
  font-weight: 700;
}

.reco-price .new {
  color: #111827;
  font-weight: 600;
  font-size: 16px;
}

.reco-price .qty {
  color: #6b7280;
  font-weight: 600;
}

.reco-delivery {
  font-size: 12px;
  color: #111827;
  font-weight: 700;
}

.reco-delivery a {
  color: #2563eb;
  text-decoration: none;
  font-weight: 600;
}

.reco-delivery a:hover {
  text-decoration: underline;
}

/* ===== CYBER MONDAY BANNER ===== */
.cyber-banner {
  padding: 18px 0;
}

.cyber-card {
  border-radius: 18px;
  overflow: hidden;
  min-height: 210px;
  padding: 28px 34px;
  display: grid;
  grid-template-columns: 260px 1fr 300px;
  align-items: center;
  gap: 18px;

  /* background like screenshot */
  background: radial-gradient(
      520px 220px at 25% 65%,
      rgba(255, 255, 255, 0.65) 0%,
      rgba(255, 255, 255, 0) 60%
    ),
    radial-gradient(
      420px 260px at 72% 45%,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0) 62%
    ),
    linear-gradient(90deg, #c31f26 0%, #fdcf00 45%, #c31f26 100%);
}

.cyber-left,
.cyber-right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cyber-left img {
  width: 240px;
  height: 170px;
  object-fit: contain;
}

.cyber-right {
  position: relative;
  justify-content: flex-end;
}

.cyber-right::before {
  content: "";
  position: absolute;
  left: 55%;
  bottom: 18px;
  width: 86px;
  height: 86px;
  border-radius: 999px;
  background: #fdcf00;
  filter: blur(0.2px);
}

.cyber-right img {
  width: 260px;
  height: 170px;
  object-fit: contain;
  position: relative;
  z-index: 2;
}

.cyber-center {
  text-align: center;
  color: #111827;
}

.cyber-center h2 {
  margin: 0 0 10px;
  font-size: 37px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.cyber-off {
  margin: 0 0 6px;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
}

.cyber-sub {
  margin: 0 0 16px;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(17, 24, 39, 0.9);
  text-transform: uppercase;
}

.cyber-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  background: #0c7289;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.cyber-plus {
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}

/* ===== TOP BRANDS ===== */
.top-brands {
  padding: 18px 0;
}

.top-brands-box {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 18px 18px 22px;
}

.top-brands-title {
  margin: 0 0 14px;
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
}

.brands-row {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 22px;
  align-items: center;
}

.brand-item {
  height: 64px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #eef2f7;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.brand-item img {
  max-width: 95px;
  max-height: 26px;
  object-fit: contain;
  opacity: 0.9;
}

.brand-item:hover {
  border-color: #dbe3ee;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.08);
}

.brand-item:hover img {
  opacity: 1;
}

/* ===== CATEGORY GRID (Hover stroke + image zoom) ===== */
.cat-grid {
  padding: 22px 0;
}

.cat-grid-wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

/* card */
.cat-card {
  display: flex;
  gap: 18px;
  padding: 18px 18px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
  color: #111827;
  transition: border-color 0.18s ease, box-shadow 0.18s ease,
    transform 0.18s ease;
}

/* hover stroke */
.cat-card:hover {
  border-color: #c31f26;
  box-shadow: 0 10px 26px rgba(17, 24, 39, 0.06);
}

/* thumb */
.cat-thumb {
  width: 108px;
  height: 130px;
  border-radius: 10px;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 108px;
}

/* image zoom */
.cat-thumb img {
  width: 78px;
  height: 78px;
  object-fit: contain;
  transform: scale(1);
  transition: transform 0.18s ease;
}

.cat-card:hover .cat-thumb img {
  transform: scale(1.08);
}

/* right content */
.cat-info h4 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 2px 0 10px;
}

.cat-info ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.cat-info ul li {
  font-size: 13px;
  color: #4b5563;
}

.cat-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 1rem;
  font-weight: 400;
  color: #2b5be7;
}

.cat-link i {
  font-size: 1rem;
}

/* ================= FOOTER ================= */
.site-footer {
  width: 100%;
}

/* Top dark area */
.footer-cta {
  background: #c31f26;
  padding: 34px 0 26px;
  color: #fff;
}

.footer-cta__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.footer-cta__title {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}

.footer-cta__title span {
  color: #fdcf00;
}

.footer-cta__form {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.footer-cta__form input {
  width: 520px;
  max-width: 100%;
  height: 54px;
  border-radius: 10px;
  border: 1px solid rgba(14, 165, 183, 0.45);
  outline: none;
  background: #fdcf00;
  color: #fff;
  padding: 0 16px;
}

.footer-cta__form input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.footer-cta__form input:focus {
  border-color: #fdcf00;
  box-shadow: 0 0 0 4px rgba(14, 165, 183, 0.18);
}

.footer-cta__form button {
  height: 54px;
  min-width: 190px;
  border-radius: 8px;
  border: none;
  background: #fdcf00;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  padding: 0 18px;
}

.footer-cta__form button:hover {
  background: #fdcf00;
}

/* Feature boxes row */
.footer-features {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 16px;
}

.footer-feature {
  border: 1px dashed rgba(255, 255, 255, 0.25);
  border-radius: 14px;
  padding: 18px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.03);
  transition: 0.25s ease;
}

.footer-feature:hover {
  background: #fdcf00; /* teal hover like your image */
  border-color: #fdcf00;
}

.ff-icon {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #fdcf00;
  display: grid;
  place-items: center;
  flex: 0 0 44px;
}

.ff-icon i {
  font-size: 22px;
  color: #fff;
}

.ff-text h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
}

.ff-text p {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.75);
}

/* White footer */
.footer-main {
  background: #fff;
  padding: 80px 0 30px;
  border-top: 1px solid #e5e7eb;
}

.footer-grid {
  display: grid;
  grid-template-columns: 320px repeat(4, minmax(160px, 1fr)) 320px;
  gap: 22px;
  align-items: start;
}

.footer-logo img {
  height: 34px;
  width: auto;
  display: block;
}

.footer-desc {
  margin: 12px 0 16px;
  color: #475569;
  font-size: 14px;
  line-height: 1.6;
  max-width: 280px;
}

.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
  color: #0f172a;
  font-size: 13px;
}

.footer-contact a {
  color: #0f172a;
  text-decoration: none;
}
.footer-contact a:hover {
  color: #fdcf00;
}

.footer-title {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.footer-links a {
  color: #475569;
  text-decoration: none;
  font-size: 13.5px;
}
.footer-links a:hover {
  color: #1d4ed8;
}

.footer-muted {
  margin: 0 0 14px;
  color: #6b7280;
  font-size: 13px;
}

.footer-approw {
  display: flex;
  gap: 14px;
  align-items: center;
}

.footer-qr {
  width: 92px;
  height: 92px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff;
}

.footer-qr img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer-stores {
  display: grid;
  gap: 10px;
}

.store-btn {
  height: 42px;
  padding: 0 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #0f172a;
  font-weight: 700;
  font-size: 13px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.store-btn i {
  font-size: 18px;
}

.store-btn:hover {
  border-color: #cbd5e1;
  transform: translateY(-1px);
}

.footer-pay {
  margin-top: 18px;
  width: 100%;
  max-width: 330px;
  min-height: 58px;
  padding: 10px 14px;
  border: 1px solid #eef1f5;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.footer-pay img {
  width: 100%;
  max-width: 285px;
  height: auto !important;
  max-height: 38px;
  object-fit: contain;
  object-position: center;
  display: block;
  opacity: 1;
}

.footer-app {
  min-width: 0;
}

.footer-app .footer-approw {
  align-items: center;
}

@media (max-width: 991px) {
  .footer-pay {
    max-width: 310px;
    min-height: 56px;
  }

  .footer-pay img {
    max-width: 270px;
    max-height: 36px;
    height: auto !important;
    object-fit: contain;
  }
}

/* Bottom line + social */
.footer-bottom {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.footer-copy {
  color: #0f172a;
  font-size: 13.5px;
}
.footer-copy span {
  color: #fdcf00;
  font-weight: 800;
}

.footer-social {
  display: flex;
  gap: 12px;
  align-items: center;
}

.soc {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  display: grid;
  place-items: center;
  text-decoration: none;
  color: #0f172a;
  background: #fff;
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.06);
  transition: 0.2s ease;
}

.soc:hover {
  background: #fdcf00;
  border-color: #fdcf00;
  color: #fff;
  transform: translateY(-2px);
}

/* ===== CATEGORY ICONS ROW ===== */
.cat-icons {
  margin-top: 10px;
  padding: 10px 0 14px;
  background: #ffffff;
}

.cat-icons .container {
  padding-left: 16px;
  padding-right: 16px;
}

.cat-icons-row {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  align-items: start;
  justify-items: center;
  gap: 18px;
}

.cat-icon {
  width: 100%;
  max-width: 190px;
  text-decoration: none;
  color: #c31f26;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.cat-icon:hover {
  color: #c31f26;
}

.cat-icon__circle {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block;
  overflow: hidden;
}

.cat-icon__circle img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  display: block;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 50%;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

.cat-icon__label {
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.1px;
  text-align: center;
  word-break: break-word;
}

/* ============================
   ITEM LISTING GRID
============================ */
.ilist{
  padding: 22px 0 10px;
}
.similar-products {
  padding: 1rem 0;
}
.similar-products h2{
  font-size: 1.25;
  font-weight: 600;
}
/* grid */
.ilist-grid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

/* card */
.ilist-card{
  position: relative;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 16px;
  background: #fff;
  overflow: hidden;
  min-width: 0;
}
.ilist-card:hover{
  border-color: #fdcf00;
}

/* badge */
.ilist-badge{
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 14px 0 14px 0;
  color: #fff;
}
.ilist-badge--new{ background:#f59e0b; }
.ilist-badge--best{ background:#10b981; }
.ilist-badge--sale{ background:#ef4444; }

/* image */
/* image - fit full gray box */
.ilist-img{
  width: 100%;
  height: 200px;
  display: block;
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #f3f4f6;
}

.ilist-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: none;
  transition: transform 0.22s ease;
}

.ilist-img:hover img{
  transform: scale(1.04);
}

/* name */
.ilist-name{
  margin: 10px 0 10px;
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  line-height: 1.25;
  min-height: 40px;
}

/* meta row */
.ilist-meta{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 10px;
}
.ilist-rate{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: #374151;
}
.ilist-star{ color:#f59e0b; }

/* progress */
.ilist-progress{
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
  margin: 10px 0;
}
.ilist-progress-bar{
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #fdcf00;
}

/* sold */
.ilist-sold{
  font-size: 13px;
  color: #374151;
  margin-bottom: 12px;
}

/* price */
.ilist-price{
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 14px;
  flex-wrap: wrap;
}
.ilist-old{
  color: #9ca3af;
  text-decoration: line-through;
  font-weight: 600;
}
.ilist-now{
  color: #111827;
  font-weight: 700;
  font-size: 16px;
}
.ilist-qty{
  color: #6b7280;
  font-size: 13px;
  font-weight: 600;
}

/* button */
.ilist-btn{
  width: 100%;
  height: 44px;
  border: none;
  border-radius: 999px;
  background: #f3f4f6;
  color: #111827;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.ilist-btn:hover{
  background: #c31f26;
  color: white;
}


/* ===================== WISHLIST (UI like screenshot) ===================== */
.wishlist-section{ padding: 26px 0; }

.wishlist-box{
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

/* 5 columns like the image */
.wl-row{
  display: grid;
  grid-template-columns: 170px 1fr 160px 190px 340px;
  gap: 0;
}

.wl-head{
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}

.wl-col{
  padding: 18px 22px;
  border-right: 1px solid #e5e7eb;
  min-width: 0;
}
.wl-row .wl-col:last-child{ border-right: 0; }

.wl-th{
  font-weight: 800;
  color: #0f172a;
  text-align: center;
  padding: 26px 22px;
}

.wl-center{ display:flex; align-items:center; justify-content:center; text-align:center; }

/* item rows */
.wl-item{ border-bottom: 1px solid #e5e7eb; }
.wl-item:last-child{ border-bottom: 0; }

/* remove */
.wl-remove-btn{
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  color: #111827;
}

.wl-x{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  display: grid;
  place-items: center;
  color: black;
  background: #fff;
}
.wl-remove-btn:hover .wl-x{
  background: #f3f4f6;
}

/* product cell */
.wl-product{
  display: flex;
  align-items: center;
  gap: 22px;
}

.wl-thumb{
  width: 140px;
  height: 120px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.wl-thumb img{
  width: 86px;
  height: 86px;
  object-fit: contain;
}

.wl-info{ min-width: 0; }
.wl-name{
  display: inline-block;
  color: #0f172a;
  text-decoration: none;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 10px;
}
.wl-name:hover{ text-decoration: underline; }

.wl-meta{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 12px;
}
.wl-star{ color: #f59e0b; font-size: 14px; }
.wl-rate{ color: #111827; font-weight: 800; }
.wl-dot{ opacity: .8; }

.wl-mini-cart{
  height: 30px;
  padding: 0 12px;
  border-radius: 7px;
  border: 1px solid #e5e7eb;
  background: #f3f4f6;
  color: #111827;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.wl-mini-cart i{ font-size: 12px; opacity: .9; }
.wl-mini-cart:hover{ background:#e5e7eb; }

/* price + stock */
.wl-price{ font-weight: 800; color:#0f172a; font-size: 16px; }
.wl-instock{ font-weight: 800; color:#0f172a; }

/* right button */
.wl-cart-btn{
  width: 240px;
  max-width: 100%;
  height: 46px;
  border-radius: 10px;
  border: 0;
  background: #c31f26;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.wl-cart-btn:hover{ filter: brightness(.95); }
/* ===== START Terms UNIQUE STYLES ===== */
/* =========================
   Same simple legal design
   All classes unique: mw-
========================= */

.mw-legal { background: #fff; }

.mw-legal__container{
  max-width: 1180px;
  margin: 0 auto;
  padding: 54px 26px;
}

/* Titles */
.mw-legal__h1{
  margin: 0 0 14px;
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #111;
}

.mw-legal__h2{
  margin: 42px 0 12px;
  font-size: 30px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #111;
}

/* Paragraph */
.mw-legal__p{
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.9;
  color: #6b7280;
  max-width: 1050px;
}

/* Lists */
.mw-legal__list{
  margin: 10px 0 0;
  padding-left: 22px;
  color: #6b7280;
  max-width: 1050px;
}

.mw-legal__li{
  margin: 12px 0;
  font-size: 15px;
  line-height: 1.9;
}

/* Links if you add */
.mw-legal a{
  color: #111;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Responsive */
@media (max-width: 992px){
  .mw-legal__container{ padding: 46px 20px; }
  .mw-legal__h1{ font-size: 34px; }
  .mw-legal__h2{ font-size: 26px; margin-top: 34px; }
}

@media (max-width: 600px){
  .mw-legal__container{ padding: 32px 14px; }
  .mw-legal__h1{ font-size: 28px; }
  .mw-legal__h2{ font-size: 22px; margin-top: 28px; }
  .mw-legal__p, .mw-legal__li{ font-size: 14px; }
}

/* ===== END Terms UNIQUE STYLES ===== */


/* ===== START Invoice  UNIQUE STYLES ===== */
:root{
  /* ✅ YOUR BRAND COLORS */
  --lxiv-primary:#c31f26; 
  --lxiv-secondary:#c31f26; 
}

*{ box-sizing:border-box; }



.lxiv-page{ padding: 26px 0 50px; }
.lxiv-wrap{
  width: min(70%, calc(100% - 32px));
  margin: 0 auto;
}
.lxiv-page strong {
  font-weight: 400;
}

.lxiv-sheet{
  position: relative;
  border: 1px solid rgba(49,50,68,.1);
  border-radius: calc(var(--lxiv-radius) + 1px);
  overflow: hidden;
}

/* Watermark */
.lxiv-watermark{
  position:absolute;
  inset: 0;
  pointer-events:none;
  display:grid;
  place-items:center;
  opacity: .05;
  transform: rotate(-12deg);
  color: var(--lxiv-primary);
}
.lxiv-watermark span{
  font-size: clamp(68px, 9vw, 120px);
  font-weight: 600;
  letter-spacing: .22em;
}

/* Header */
.lxiv-head{
  position: relative;
  padding: 18px 18px 16px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 14px;
  border-bottom: 1px solid rgba(49,50,68,.12);
}
.lxiv-head:before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width: 10px;

}

/* Brand */
.lxiv-brand{
  display:flex;
  align-items:center;
  gap: 12px;
}
.lxiv-logo{
  /* width: 46px;
  height: 46px; */
  border-radius: 14px;
  display:grid;
  place-items:center;
  /* background: #c31f26; */
  color: #fff;
  font-weight: 600;
}
.lxiv-brand__name{
  font-weight: 600;
  letter-spacing: -.3px;
  color: var(--lxiv-primary);
}
.lxiv-brand__tag{
  margin-top: 2px;
  font-size: 1rem;
  font-weight: 600;
  color: #c31f26;
}

/* Company */
.lxiv-company{ margin-top: 12px; display:grid; gap: 6px; }
.lxiv-company__row{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  font-size: 12px;
  font-weight: 600;
}
.lxiv-ic{ width: 18px; text-align:center; }

.lxiv-ic i,
.lxiv-ic2 i,
.lxiv-payHint__ic i,
.lxiv-btn i{
  font-size: 18px;
  line-height: 1;
  display: inline-block;
  color: #c31f26;
}


/* Right header */
.lxiv-head__right{
  display:flex;
  flex-direction: column;
  gap: 10px;
  align-items:flex-end;
}
.lxiv-titleRow{
  width:100%;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
.lxiv-title{
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--lxiv-primary);
}

.lxiv-meta{
  width:100%;
}
.lxiv-meta__row{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--lxiv-secondary);
  font-weight: 600;
  padding: 5px 0;
  border-bottom: 1px dashed rgba(49,50,68,.14);
}
.lxiv-meta__row:last-child{ border-bottom:0; }
.lxiv-meta__row strong{ color: var(--lxiv-primary); font-weight: 600; }

/* Chip */
.lxiv-chipRow{ width:100%; display:flex; justify-content:flex-end; }
.lxiv-chip{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(49,50,68,.18);
  background: rgba(49,50,68,.07);
  font-size: 1rem;
  font-weight: 600;
  color: var(--lxiv-primary);
}
.lxiv-chip__dot{
  width: 9px; height: 9px;
  border-radius: 99px;
  background: var(--lxiv-primary);
  box-shadow: 0 0 0 6px rgba(49,50,68,.12);
}

/* Status */
.lxiv-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(49,50,68,.14);
  color: var(--lxiv-primary);
  background: #c31f2612;
}
.lxiv-status--paid{
  background: #c31f26;
  color: white;
}

/* Cards */
.lxiv-cards3{
  padding: 16px 16px 0;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.lxiv-card{
  padding: 14px;
}
.lxiv-card__head{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 10px;
  margin-bottom: 10px;
}
.lxiv-h3{
  margin:0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.2px;
  color: var(--lxiv-primary);
}
.lxiv-h3--big{ font-size: 16px; }

.lxiv-badge{
  font-size: 12px;
  font-weight: 600;
  color: var(--lxiv-primary);
  background: #fdcf00;
  padding: 10px 10px;
  border-radius: 999px;
  color: white;
}
.lxiv-badge--ship,
.lxiv-badge--pay{
  color: #fff;
  background: linear-gradient(180deg, var(--lxiv-secondary), var(--lxiv-primary));
  border-color: rgba(49,50,68,.18);
}

.lxiv-info__name{
  font-weight: 600;
  letter-spacing: -.2px;
}
.lxiv-info__line{
  margin-top: 6px;
  color: var(--lxiv-secondary);
  font-size: 12px;
  font-weight: 600;
}

/* Payment box */
.lxiv-pay{ display:grid; gap: 8px; }
.lxiv-pay__row{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--lxiv-secondary);
  font-weight: 600;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(49,50,68,.14);
}
.lxiv-pay__row:last-child{ border-bottom:0; padding-bottom:0; }
.lxiv-pay__row strong{ color: var(--lxiv-primary); font-weight: 600; }

.lxiv-miniNote{
  margin-top: 12px;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(49,50,68,.12);
  background: #fbfcff;
  color: var(--lxiv-secondary);
  font-size: 1rem;
  font-weight: 600;
}
.lxiv-miniNote__ic{ width: 18px; text-align:center; }

/* Table card */
.lxiv-tableCard{
  margin: 12px 16px 0;
  overflow:hidden;
}
.lxiv-tableTop{
  display:flex;
  justify-content: space-between;
  align-items:flex-start;
  gap: 12px;
  padding: 14px;
  background: linear-gradient(180deg, #ffffff, #fbfcff);
  border-bottom: 1px solid rgba(49,50,68,.12);
}
.lxiv-muted{
  margin: 6px 0 0;
  color: var(--lxiv-secondary);
  font-size: 12px;
  font-weight: 600;
}
.lxiv-sumMini{ display:grid; gap: 6px; }
.lxiv-sumMini__row{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--lxiv-secondary);
  font-weight: 600;
}
.lxiv-sumMini__row strong{ color: var(--lxiv-primary); font-weight: 600; }

.lxiv-tableWrap{ overflow:auto; }
.lxiv-table{
  width:100%;
  border-collapse: collapse;
  min-width: 860px;
}
.lxiv-table thead th{
  text-align:left;
  font-size: 1.125rem;
  color: var(--lxiv-secondary);
  font-weight: 700;
  padding: 12px 14px;
  background: #ffffff;
  border-bottom: 1px solid rgba(49,50,68,.12);
}
.lxiv-table tbody td{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(49,50,68,.08);
  font-size: 14px;
  vertical-align: top;
  font-weight: 400;
}
.lxiv-table tbody tr:hover{ background: #fbfcff; }

.lxiv-item{ display:flex; align-items:center; gap: 10px; }
.lxiv-thumb{
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(49,50,68,.14);
}

.lxiv-thumb img {
  width: 100%;
  height: 100%;
  padding: 5px;

}

.lxiv-item__name{ font-weight: 400;}
.lxiv-item__desc{
  margin-top: 2px;
  font-size: 12px;
  color: var(--lxiv-secondary);
  font-weight: 400;
}
.lxiv-mono{
  font-size: 12px;
  color: var(--lxiv-primary);
}

/* Bottom */
.lxiv-bottom{
  padding: 12px 16px 16px;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 12px;
  align-items:start;
}

.lxiv-noteBox{ margin-top: 12px; display:grid; gap: 10px; }
.lxiv-noteBox__row{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 12px;
}
.lxiv-ic2{
  width: 36px; height: 36px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: rgba(49,50,68,.08);
  border: 1px solid rgba(49,50,68,.14);
  color: var(--lxiv-primary);
}
.lxiv-noteBox__t{ font-weight: 600; font-size: 13px; color: var(--lxiv-primary); }
.lxiv-noteBox__d{ margin-top: 2px; color: var(--lxiv-secondary); font-size: 12px; font-weight: 600; }
.lxiv-smallText{ margin-top: 10px; color: var(--lxiv-secondary); font-size: 12px; font-weight: 600; }

/* Total card */
.lxiv-totalCard{

  padding: 14px;
}
.lxiv-totalTop{ display:flex; justify-content: space-between; align-items:center; gap: 10px; }
.lxiv-trows{ margin-top: 12px; display:grid; gap: 10px; }
.lxiv-trow{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--lxiv-secondary);
  font-weight: 600;
}
.lxiv-trow strong{ color: var(--lxiv-primary); font-weight: 600; }
.lxiv-sep{ height:1px; background: rgba(49,50,68,.14); margin: 12px 0; }
.lxiv-grand{ display:flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.lxiv-grand span{ font-size: 13px; font-weight: 600; color: var(--lxiv-primary); }
.lxiv-grand strong{ font-size: 22px; font-weight: 600; letter-spacing: -0.4px; color: var(--lxiv-primary); }

.lxiv-payHint{
  margin-top: 12px;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(49,50,68,.22);
  background: rgba(49,50,68,.08);
  color: var(--lxiv-primary);
  font-size: 12px;
  font-weight: 600;
}
.lxiv-actions{ margin-top: 12px; display:flex; gap: 10px; }
.lxiv-btn{
  flex:1;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 12px;
  text-decoration:none;
  font-weight: 600;
  font-size: 13px;
  border: 1px solid rgba(49,50,68,.14);
}
.lxiv-btn--print{
  background: linear-gradient(180deg, var(--lxiv-secondary), var(--lxiv-primary));
  color:#fff;
  border-color: rgba(49,50,68,.18);
  box-shadow: 0 12px 20px rgba(49,50,68,.18);
}
.lxiv-btn--ghost{ background:#fff; color: var(--lxiv-primary); }

/* Footer */
.lxiv-foot{
  padding: 14px 16px 16px;
  display:flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgba(49,50,68,.12);
  background: #ffffff;
}
.lxiv-foot__brand{ font-weight: 600; color: var(--lxiv-primary); }
.lxiv-foot__muted{
  margin-top: 4px;
  color: var(--lxiv-secondary);
  font-size: 12px;
  font-weight: 600;
}
.lxiv-foot__links{
  margin-top: 6px;
  display:grid;
  gap: 4px;
  color: var(--lxiv-secondary);
  font-size: 12px;
  font-weight: 600;
  text-align:right;
}

/* Responsive */
@media (max-width: 980px){
  .lxiv-head{ grid-template-columns: 1fr; }
  .lxiv-head__right{ align-items:flex-start; }
  .lxiv-cards3{ grid-template-columns: 1fr; }
  .lxiv-bottom{ grid-template-columns: 1fr; }
  .lxiv-foot{ flex-direction: column; }
  .lxiv-foot__links{ text-align:left; }
}

/* Mobile: table -> cards */
@media (max-width: 720px){
  .lxiv-table{ min-width: 0; }
  .lxiv-table thead{ display:none; }
  .lxiv-table, .lxiv-table tbody, .lxiv-table tr, .lxiv-table td{
    display:block; width:100%;
  }
  .lxiv-table tbody tr{
    border-bottom: 1px solid rgba(49,50,68,.14);
    padding: 10px 12px;
  }
  .lxiv-table tbody td{
    border-bottom: 0;
    padding: 6px 0;
    font-size: 13px;
  }
  .lxiv-table tbody td:nth-child(1)::before{ content:"# "; color: var(--lxiv-secondary); font-weight: 600; }
  .lxiv-table tbody td:nth-child(3)::before{ content:"SKU: "; color: var(--lxiv-secondary); font-weight: 600; }
  .lxiv-table tbody td:nth-child(4)::before{ content:"Size: "; color: var(--lxiv-secondary); font-weight: 600; }
  .lxiv-table tbody td:nth-child(5)::before{ content:"Color: "; color: var(--lxiv-secondary); font-weight: 600; }
  .lxiv-table tbody td:nth-child(6)::before{ content:"Qty: "; color: var(--lxiv-secondary); font-weight: 600; }
  .lxiv-table tbody td:nth-child(7)::before{ content:"Unit: "; color: var(--lxiv-secondary); font-weight: 600; }
  .lxiv-table tbody td:nth-child(8)::before{ content:"Total: "; color: var(--lxiv-secondary); font-weight: 600; }
}

/* Print */
@media print{
  body{ background:#fff !important; }
  .lxiv-page{ padding: 0; }
  .lxiv-wrap{ width: 100%; margin:0; }
  .lxiv-sheet{ box-shadow:none; border: 0; border-radius:0; }
  .lxiv-watermark{ opacity:.04; }
  .lxiv-actions{ display:none; }
}

/* ===== END Invoice  UNIQUE STYLES ===== */


/* ===== START Shipping  UNIQUE STYLES ===== */
/* =========================
   ULTRA CHECKOUT (UPDATED)
   Prefix: lxcx-
   Changes:
   1) Hero background white + text black
   2) Right side (payment) fixed/sticky not hidden
   3) Reduced shadow + reduced radius
========================= */

:root{
  --lxcx-text: #0b1220;
  --lxcx-muted: #607089;
  --lxcx-line: rgba(2,6,23,.10);

  --lxcx-gold: #c31f26;
  --lxcx-gold2:#c31f26;

  /* ✅ Reduced corners */
  --lxcx-radius: 14px;
  --lxcx-radius-sm: 12px;

  /* ✅ Reduced shadows */
  --lxcx-shadow: 0 10px 22px rgba(2, 6, 23, 0.10);
  --lxcx-shadow-soft: 0 8px 18px rgba(2, 6, 23, 0.08);
}






.lxcx-page{ padding: 22px 0 40px; }
.lxcx-shell{
  width: min(80%, calc(100% - 32px));
  margin: 0 auto;
}

/* ================= HERO (WHITE) ================= */
.lxcx-hero{ margin-bottom: 16px; }

.lxcx-hero__glass{
  padding: 16px;
  border-radius: var(--lxcx-radius);
  border: 0.1px solid var(--lxcx-line);
  display:flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-end;
}

.lxcx-brand{
  display:flex;
  align-items:center;
  gap: 12px;
}
.lxcx-brand__mark{
    /* width: 46px;
  height: 46px; */
  border-radius: 14px;
  display:grid;
  place-items:center;
  /* background: #c31f26; */
  color: #fff;
  font-weight: 600;
}
.lxcx-brand__name{
  color: #c31f26;
  font-weight: 600;
  letter-spacing: -0.2px;
}
.lxcx-brand__tag{
  margin-top: 2px;
  color: #c31f26;
  font-size: 14px;
  font-weight: 600;
}

.lxcx-h1{
  margin: 10px 0 0;
  font-size: 16px;
  letter-spacing: -0.6px;
  color: #c31f26;
  font-weight: 600;
}
.lxcx-sub{
  margin: 8px 0 0;
  color: #c31f26;
  font-size: 14px;
  font-weight: 400;
  max-width: 560px;
}

/* Steps */
.lxcx-steps{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-top: 14px;
}
.lxcx-step{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--lxcx-line);
  background: #ffffff;
}
.lxcx-step__num{
  width: 24px; height: 24px;
  border-radius: 999px;
  display:grid; place-items:center;
  font-weight: 400;
  color: var(--lxcx-text);
  border: 1px solid var(--lxcx-line);
}
.lxcx-step__txt{
  color: var(--lxcx-muted);
  font-size: 12px;
  font-weight: 850;
}
.lxcx-step--active{
  border-color: rgba(#94a3b8,.35);
  background: rgba(#94a3b8,.08);
}
.lxcx-step--active .lxcx-step__num{
  color:#0b1220;
  background: linear-gradient(180deg, var(--lxcx-gold2), var(--lxcx-gold));
  border: 0;
}
.lxcx-stepLine{
  width: 36px;
  height: 2px;
  background: rgba(2,6,23,.12);
  border-radius: 99px;
}

/* Right hero mini cards */
.lxcx-secure,
.lxcx-miniCard{
  border-radius: var(--lxcx-radius);
  border: 1px solid var(--lxcx-line);
  background: #ffffff;
  box-shadow: var(--lxcx-shadow-soft);
}

.lxcx-secure{
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 12px 14px;
}
.lxcx-secure__ic{ font-size: 18px; }
.lxcx-secure__top{
  color: var(--lxcx-text);
  font-weight: 600;
  font-size: 13px;
}
.lxcx-secure__sub{
  color: var(--lxcx-muted);
  font-size: 12px;
  font-weight: 700;
  margin-top: 2px;
}

.lxcx-miniCard{
  margin-top: 12px;
  padding: 12px 14px;
}
.lxcx-miniCard__title{
  color: var(--lxcx-muted);
  font-size: 12px;
  font-weight: 800;
}
.lxcx-miniCard__value{
  margin-top: 4px;
  color: var(--lxcx-text);
  font-weight: 1100;
  letter-spacing: -0.2px;
}
.lxcx-miniCard__hint{
  margin-top: 4px;
  color: var(--lxcx-muted);
  font-size: 12px;
  font-weight: 700;
}

/* ================= GRID ================= */
.lxcx-grid{
  display:grid;
  grid-template-columns: 1.55fr 0.85fr;
  gap: 18px;
  align-items:start;
}

/* ✅ Payment Method fixed/sticky (right side stays visible) */
.lxcx-side{
  display:grid;
  gap: 16px;

  position: sticky;
  top: 16px;
  align-self: start;

  max-height: auto;
  overflow: auto;
  padding-right: 6px; /* small space for scrollbar */
}

/* Cards */
.lxcx-card{
  border-radius: var(--lxcx-radius);
  background: #ffffff;
  border: 1px solid var(--lxcx-line);
  overflow:hidden;
}
.lxcx-card--side{ box-shadow: var(--lxcx-shadow-soft); }

.lxcx-cardHead{
  padding: 14px 14px;
  border-bottom: 1px solid var(--lxcx-line);
  background: linear-gradient(180deg, #fbfcfe, #ffffff);
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
}
.lxcx-cardHead--side{ padding: 12px 12px; }

.lxcx-h2{
  margin:0;
  font-size: 16px;
  letter-spacing: -0.3px;
  color: #c31f26;
  font-weight: 600;
}
.lxcx-mini{
  margin: 6px 0 0;
  color: #c31f26;
  font-size: 14px;
  font-weight: 400;
}

/* Pill / chips */
.lxcx-pill{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 8px 10px;
  font-size: 16px;
  font-weight: 600;
  color:#c31f26;
  white-space: nowrap;
}
.lxcx-pill strong {
  font-weight: 600;
  color: #c31f26;
  font-size: 1rem;
}
.lxcx-pill__dot{
  width: 9px; height: 9px;
  border-radius: 99px;
  background: #fdcf00;
}
.lxcx-chip{
  padding: 7px 10px;
  border-radius: 999px;
  background: #c31f26;
  font-size: 12px;
  font-weight: 400;
  color: #fff;
  white-space: nowrap;
}
.lxcx-chip--gold{
  border-color: rgba(#94a3b8,.25);
  background: rgba(#94a3b8,.08);
  color: #94a3b8;
}

/* Form */
.lxcx-form{ padding: 14px; }
.lxcx-fields{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 14px;
}
.lxcx-field{ min-width:0; }
.lxcx-field--full{ grid-column: 1 / -1; }

.lxcx-label{
  display:block;
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--lxcx-text);
}
.lxcx-req{ color:#ef4444; }

/* Inputs */
.lxcx-inputWrap{
  display:flex;
  align-items:center;
  gap: 10px;
  border: 1px solid rgba(2,6,23,.12);
  background: #fff;
  border-radius: var(--lxcx-radius);
  padding: 10px 12px;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.lxcx-inputWrap--area{ align-items:flex-start; padding-top: 12px; }

.lxcx-ic{
  width: 28px;
  height: 28px;
  border-radius: var(--lxcx-radius-sm);
  display:grid;
  place-items:center;
  background: #fff;
  border: 1px solid #94a3b8;
  font-size: 14px;
  flex: 0 0 auto;
}

.lxcx-input{
  width:100%;
  border: 0;
  outline: none;
  font-size: 14px;
  color: #c31f26;
  background: transparent;
}
.lxcx-input::placeholder{ color:rgba(126, 149, 176,0.6); }

.lxcx-inputWrap:focus-within{
  border-color: #94a3b8;
  box-shadow: 0 0 0 5px rgba(#94a3b8,.33);
}

.lxcx-select{
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, #94a3b8 50%),
    linear-gradient(135deg, #94a3b8 50%, transparent 50%);
  background-position: calc(100% - 10px) 55%, calc(100% - 4px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 22px;
}

.lxcx-textarea{ min-height: 98px; resize: vertical; }

/* Actions */
.lxcx-actions{
  grid-column: 1 / -1;
  display:flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 6px;
}
.lxcx-btn{
  border: 0;
  border-radius: var(--lxcx-radius);
  padding: 12px 14px;
  font-weight: 1100;
  font-size: 13px;
  cursor: pointer;
}
.lxcx-btn--ghost{
  background: rgba(2,6,23,.04);
  border: 1px solid rgba(2,6,23,.10);
  color: var(--lxcx-text);
}
.lxcx-btn--primary{
  background: linear-gradient(180deg, var(--lxcx-gold2), var(--lxcx-gold));
  box-shadow: 0 12px 20px rgba(#94a3b8,.18);
  color:white;
}

/* Groups */
.lxcx-group{
  margin: 12px 12px 0;
  border: 1px solid rgba(2,6,23,.10);
  border-radius: var(--lxcx-radius);
  overflow:hidden;
  background:#fff;
}
.lxcx-group__top{
  padding: 10px 12px;
  display:flex;
  align-items:center;
  gap: 10px;
  background: #f8fafc;
  border-bottom: 1px solid rgba(2,6,23,.08);
}
.lxcx-group__name{
  font-size: 16px;
  font-weight: 600;
  color: var(--lxcx-text);
}
.lxcx-items{
  padding: 12px;
  display:grid;
  gap: 10px;
}
.lxcx-item{ display:flex; gap: 10px; align-items:center; }
.lxcx-thumb{
  width: 46px; height: 46px;
  border-radius: var(--lxcx-radius);
  border: 1px solid rgba(2,6,23,.10);
  background: white;
  flex: 0 0 auto;
}
.lxcx-thumb img {
  width: 100%;
  height: 100%;
  padding: 5px;
}

.lxcx-item__name{
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.lxcx-item__meta{ margin-top: 2px; font-size: 13px; font-weight: 400; }
.lxcx-item__sub{ margin-top: 2px; font-size: 13px; color: #c31f26; font-weight: 400; }

.lxcx-sep{
  height: 1px;
  background: rgba(2,6,23,.10);
  margin: 14px 12px;
}
.lxcx-totals{ padding: 0 12px; display:grid; gap: 8px; }
.lxcx-row{
  display:flex;
  justify-content: space-between;
  align-items:center;
  font-size: 14px;
  color: #c31f26;
  font-weight: 600;
}
.lxcx-row strong{ color: #c31f26; font-weight: 600; }

/* Shipping */
.lxcx-ship{ padding: 0 12px 12px; }
.lxcx-ship__title{ font-size: 13px; font-weight: 1100; margin: 0 0 8px; }
.lxcx-radio{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 0;
  font-size: 13px;
  font-weight: 600;
}
.lxcx-radio input{ width: 15px; height: 15px; accent-color: var(--lxcx-gold); }
.lxcx-radio__price{ margin-left:auto; color: var(--lxcx-muted); font-weight: 1100; }

.lxcx-grand{
  padding: 0 12px 12px;
  display:flex;
  justify-content: space-between;
  align-items:center;
}
.lxcx-grand strong{ font-size: 18px; font-weight: 600; }

/* Payment */
.lxcx-payList{ padding: 12px 12px 6px; }
.lxcx-radio--stack{ padding: 7px 0; }

.lxcx-cardPay{ padding: 10px 12px 0; }
.lxcx-cardPay__title{ font-size: 13px; font-weight: 1100; margin-bottom: 10px; }

.lxcx-logos{ display:flex; flex-wrap: wrap; gap: 10px; }
.lxcx-logo{
  padding: 10px 12px;
  border-radius: var(--lxcx-radius);
  border: 1px solid rgba(2,6,23,.10);
  background:#fff;
  font-size: 12px;
  font-weight: 1100;
}
.lxcx-logo--on{
  border-color: rgba(#94a3b8,.50);
  box-shadow: 0 0 0 5px rgba(#94a3b8,.10);
}

.lxcx-check{
  display:flex;
  gap: 10px;
  padding: 14px 12px 8px;
  color: #c31f26;
  font-size: 14px;
  font-weight: 600;
}
.lxcx-check input{
  width: 15px;
  height: 15px;
  margin-top: 2px;
  accent-color: var(--lxcx-gold);
}

.lxcx-payBtn{
  width: calc(100% - 24px);
  margin: 8px 12px 10px;
  border: 0;
  border-radius: var(--lxcx-radius);
  padding: 14px 14px;
  cursor:pointer;
  background: linear-gradient(180deg, var(--lxcx-gold2), var(--lxcx-gold));
  color: white;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .2px;
  box-shadow: 0 14px 22px rgba(#94a3b8,.18);
}
.lxcx-payBtn__ic{ margin-left: 8px; }

.lxcx-tip{
  margin: 0 12px 12px;
  padding: 12px 12px;
  border-radius: var(--lxcx-radius);
  border: 1px dashed rgba(2,6,23,.16);
  background: rgba(#94a3b8,.08);
  display:flex;
  gap: 10px;
  align-items:flex-start;
}
.lxcx-tip__t{ font-weight: 600; font-size: 1rem; color: #c31f26; }
.lxcx-tip__d{ margin-top: 2px; font-size: 14px; font-weight: 600; color: #c31f26; }

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1024px){
  .lxcx-grid{ grid-template-columns: 1.25fr .95fr; }
}

@media (max-width: 860px){
  .lxcx-hero__glass{
    flex-direction: column;
    align-items:flex-start;
  }
  .lxcx-grid{ grid-template-columns: 1fr; }

  /* disable sticky on mobile/tablet */
  .lxcx-side{
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}

@media (max-width: 600px){
  .lxcx-page{ padding: 16px 0 28px; }
  .lxcx-shell{ width: min(1200px, calc(100% - 20px)); }
  .lxcx-h1{ font-size: 16px; }

  .lxcx-form{ padding: 14px; }
  .lxcx-cardHead{ padding: 14px; }

  .lxcx-fields{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .lxcx-actions{
    flex-direction: column;
    align-items: stretch;
  }
  .lxcx-btn{ width: 100%; }
}


/* ===== END Shipping UNIQUE STYLES ===== */




/* ===== START product comparison UNIQUE STYLES ===== */

/* compare-v3.css (MAX RESPONSIVE)
   Unique classes: lxcmp3-...
*/
:root{
  --lx3-border:#e5e7eb;
  --lx3-text:#0f172a;
  --lx3-muted:#64748b;
  --lx3-bg:#ffffff;
  --lx3-soft:#f8fafc;

  --lx3-orange:#c31f26;
  --lx3-red:#e74c3c;
  --lx3-blue:#2563eb;
  --lx3-green:#10b981;

  --lx3-radius: 18px;
  --lx3-shadow: 0 12px 34px rgba(2, 6, 23, .08);

  /* fluid sizing */
  --lx3-pad: clamp(12px, 2vw, 18px);
  --lx3-title: clamp(20px, 2.2vw, 30px);
}

*{ box-sizing:border-box; }

/* Container */
.lxcmp3{ padding: clamp(16px, 2.4vw, 34px) 12px; }
.lxcmp3__container{ max-width: 1400px; margin: 0 auto; }

/* Header */
.lxcmp3__head{ margin-bottom: 12px; }
.lxcmp3__title{
  margin:0;
  font-size: var(--lx3-title);
  letter-spacing:-.02em;
  font-weight: 600;
}
.lxcmp3__sub{
  margin: 8px 0 0;
  color: var(--lx3-muted);
  font-size: clamp(12.5px, 1.2vw, 14px);
}

/* ==========================
   TABLE CARD (desktop/tablet)
========================== */
.lxcmp3__tableCard{
  border: 1px solid var(--lx3-border);
  background: var(--lx3-bg);
  border-radius: var(--lx3-radius);
  box-shadow: var(--lx3-shadow);
  overflow: hidden;
}
.lxcmp3__tableScroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* Table */
.lxcmp3__table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  /* desktop fits better */
  min-width: 1100px;
}
.lxcmp3__table th,
.lxcmp3__table td{
  padding: calc(var(--lx3-pad) + 4px) var(--lx3-pad);
  border-right: 1px solid var(--lx3-border);
  border-bottom: 1px solid var(--lx3-border);
  text-align: center;
  vertical-align: middle;
  background: #fff;
}
.lxcmp3__table thead th{
  background: linear-gradient(180deg,#fff 0%, #fbfdff 100%);
}

.lxcmp3__table th:last-child,
.lxcmp3__table td:last-child{ border-right: 0; }
.lxcmp3__table tr:last-child th,
.lxcmp3__table tr:last-child td{ border-bottom: 0; }

/* Sticky labels column */
.lxcmp3__stub{
  width: 165px;
  font-weight: 700;
  position: sticky;
  left: 0;
  z-index: 3;
  background: linear-gradient(180deg,#fff 0%, #fbfdff 100%);
}
.lxcmp3__stub--head{ z-index: 4; }

/* Product header content */
.lxcmp3p{ display:grid; gap: 12px; justify-items:center; }
.lxcmp3p__media{
  width: clamp(130px, 10vw, 160px);
  height: clamp(120px, 10vw, 145px);
  border-radius: 16px;
  border: 1px solid var(--lx3-border);
  background:
    radial-gradient(circle at 30% 25%, rgba(37,99,235,.10), transparent 44%),
    radial-gradient(circle at 70% 75%, rgba(245,158,11,.12), transparent 44%),
    #fff;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
}
.lxcmp3p__img{
  width: clamp(100px, 8vw, 125px);
  height: clamp(95px, 8vw, 115px);
  object-fit: contain;
  display:block;
}
.lxcmp3p__name{
  font-weight: 600;
  font-size: clamp(13px, 1.15vw, 15px);
  line-height: 1.25;
  letter-spacing: -.01em;
}
.lxcmp3p__badge{
  position:absolute;
  top: 10px; left: 10px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  display: flex;
  align-items: center;  
  justify-content: center;
}
.lxcmp3p__badge--new{ background: rgba(37,99,235,.12); border-color: rgba(37,99,235,.20); color:#1e40af; }
.lxcmp3p__badge--sale{ background: rgba(245,158,11,.16); border-color: rgba(245,158,11,.25); color:#92400e; }
.lxcmp3p__badge--top{ background: rgba(16,185,129,.14); border-color: rgba(16,185,129,.25); color:#065f46; }

/* Text */
.lxcmp3__text{
  margin:0;
  color: var(--lx3-muted);
  font-size: clamp(12.5px, 1.05vw, 13.5px);
  line-height: 1.55;
}

/* Price */
.lxcmp3__price{ display:inline-flex; gap:10px; flex-wrap:wrap; justify-content:center; align-items:baseline; }
.lxcmp3__now{ font-weight: 600; color:#0f172a; }
.lxcmp3__old{ color:#94a3b8; text-decoration:line-through; }

/* Pills */
.lxcmp3__pill{
  display:inline-flex;
  align-items:center;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--lx3-border);
  background: var(--lx3-soft);
  font-weight: 500;
  font-size: 13px;
}

/* Rating */
.lxcmp3__rating{ display:inline-flex; gap: 3px; font-size: 18px; }
.lxcmp3__star{ color:#cbd5e1; }
.lxcmp3__star.on{ color: var(--lx3-orange); }

/* Actions */
.lxcmp3__actions{ display:inline-flex; gap: 10px; align-items:center; justify-content:center; }
.lxcmp3__btn{
  height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  background: #c31f26;
  color:#fff;
  text-decoration:none;
  font-weight: 600;
  font-size: 13.5px;
  white-space: nowrap;
  align-items: center;
  display:flex;
  justify-content: center;
}
.lxcmp3__trash{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(231,76,60,.25);
  background: #c31f26;
  color: white;
  cursor:pointer;
}
.lxcmp3__hint{
  padding: 10px 14px 14px;
  border-top: 1px solid var(--lx3-border);
  color: var(--lx3-muted);
  font-size: 12.5px;
  text-align:right;
  background: linear-gradient(180deg,#fff 0%, #fbfdff 100%);
}

/* ==========================
   MOBILE CARDS (best UX)
========================== */
.lxcmp3m{
  display:none; /* enabled on small screens */
  margin-top: 14px;
  gap: 12px;
}
.lxcmp3m__card{
  border: 1px solid var(--lx3-border);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(2,6,23,.06);
  overflow:hidden;
  padding: 14px;
}
.lxcmp3m__top{
  position:relative;
  border-radius: 14px;
  border: 1px solid var(--lx3-border);
  background:
    radial-gradient(circle at 30% 25%, rgba(37,99,235,.10), transparent 44%),
    radial-gradient(circle at 70% 75%, rgba(245,158,11,.12), transparent 44%),
    #fff;
  height: 140px;
  display:grid;
  place-items:center;
}
.lxcmp3m__img{
  width: 130px;
  height: 120px;
  object-fit: contain;
}
.lxcmp3m__badge{
  position:absolute;
  top: 10px;
  left: 10px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lxcmp3m__badge--new{ background: rgba(37,99,235,.12); border-color: rgba(37,99,235,.20); color:#1e40af; }
.lxcmp3m__badge--sale{ background: rgba(245,158,11,.16); border-color: rgba(245,158,11,.25); color:#92400e; }
.lxcmp3m__badge--top{ background: rgba(16,185,129,.14); border-color: rgba(16,185,129,.25); color:#065f46; }

.lxcmp3m__name{
  margin: 12px 0 10px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.lxcmp3m__rows{ display:grid; gap: 8px; }
.lxcmp3m__row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 12px;
  background: var(--lx3-soft);
  border: 1px solid rgba(226,232,240,.8);
}
.lxcmp3m__row--desc{
  flex-direction:column;
  align-items:flex-start;
}
.lxcmp3m__k{ font-size: 12.5px; color: var(--lx3-muted); font-weight: 600; }
.lxcmp3m__v s{ color:#94a3b8; font-weight:600; margin-left:6px; }

.lxcmp3m__actions{
  display:flex;
  gap: 10px;
  margin-top: 12px;
}
.lxcmp3m__btn{
  flex:1;
  height: 44px;
  border-radius: 12px;
  background: #c31f26;
  color:#fff;
  text-decoration:none;
  font-weight: 600;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(245,158,11,.35);
}
.lxcmp3m__trash{
  width: 110px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(231,76,60,.25);
  background: rgba(231,76,60,.10);
  font-weight: 600;
  color: #b91c1c;
  cursor:pointer;
}

/* ==========================
   BREAKPOINTS (THE IMPORTANT PART)
========================== */

/* Huge screens: table fits without scroll */
@media (min-width: 1400px){
  .lxcmp3__table{ min-width: 0; } /* no forced width */
}

/* Laptops/Tablets: allow scroll if needed */
@media (max-width: 1100px){
  .lxcmp3__table{ min-width: 1050px; }
  .lxcmp3__stub{ width: 150px; }
}

/* Tablets: a little tighter */
@media (max-width: 900px){
  .lxcmp3__table{ min-width: 980px; }
  .lxcmp3__stub{ width: 145px; }
}

/* ✅ Phones: switch to cards (best responsive) */
@media (max-width: 768px){
  .lxcmp3__tableCard{ display:none; }
  .lxcmp3m{ display:grid; }
}

/* Small phones */
@media (max-width: 420px){
  .lxcmp3m__top{ height: 130px; }
  .lxcmp3m__img{ width: 120px; height: 110px; }
  .lxcmp3m__trash{ width: 100px; }
}


/* ===== END product comparison UNIQUE STYLES ===== */

/* ===== START ABOUT US UNIQUE STYLES ===== */
/* ===== Alalaas UNIQUE STYLES ===== */
:root{
  --Alalaas-text:#121212;
  --Alalaas-muted:#6b7280;
  --Alalaas-border:#ececec;
  --Alalaas-soft:#f6f6f6;
  --Alalaas-white:#ffffff;

  --Alalaas-accent:#f5a200;  /* orange */
  --Alalaas-accent2:#fdcf00;

  --Alalaas-radius:18px;
  --Alalaas-shadow:0 10px 30px rgba(0,0,0,.08);
}

.Alalaas-container{
  width:min(77%, calc(100% - 48px));
  margin-inline:auto;
  color:var(--Alalaas-text);
}

@media (max-width: 520px){
  .Alalaas-container{ width:calc(100% - 28px); }
}

/* common */
.Alalaas-title{
  font-size:clamp(24px, 2.7vw, 38px);
  line-height:1.2;
  margin:8px 0 10px;
  letter-spacing:-.3px;
}
.Alalaas-muted{ color:var(--Alalaas-muted); line-height:1.7; }
.Alalaas-eyebrow{
  color:var(--Alalaas-accent);
  font-weight:700;
  font-size:13px;
  letter-spacing:.2px;
}
/* ===== ABOUT ===== */
.Alalaas-about{ padding:48px 0 34px; background:#fff; }

.Alalaas-about__grid{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap:40px;
  align-items:center;
}

.Alalaas-about__media{ position:relative; }

.Alalaas-about__imgwrap{
  border-radius:32px;
  padding:10px;
  background:#fff;
  box-shadow:var(--Alalaas-shadow);
  overflow:hidden;
}
.Alalaas-about__img{
  width:100%;
  height:min(520px, 60vh);
  object-fit:cover;
  border-radius:26px;
  display:block;
}

/* badge */
.Alalaas-about__badge{
  position:absolute;
  right:-28px;
  top:50%;
  transform:translateY(-40%);
  width:120px;
  aspect-ratio:1/1;
  border-radius:999px;
  background:var(--Alalaas-accent);
  color:#fff;
  display: grid;
  place-items:center;
  text-align:center;
  box-shadow:0 12px 28px rgba(245,162,0,.35);
  border:6px solid #fff;
  padding: 20px;
}
.Alalaas-about__badgeNum{ font-size:34px; font-weight:800; line-height:1; }
.Alalaas-about__badgeText{ font-size:12px; letter-spacing:.2px; margin-top:4px; }

/* quote */
.Alalaas-about__quote{
  position:absolute;
  right:12%;
  bottom:34px;
  max-width: 360px;
  background:#2d2d2d;
  color:#fff;
  padding:20px 22px;
  border-radius:16px;
  box-shadow:var(--Alalaas-shadow);
}
.Alalaas-about__quote p{ margin:0 0 12px; color:#eee; font-size:13px; line-height:1.55; }
.Alalaas-about__quoteBy{ display:flex; align-items:center; gap:10px; }
.Alalaas-about__quoteLine{ width:28px; height:2px; background:var(--Alalaas-accent); display:inline-block; }
.Alalaas-about__quoteBy strong{ color:var(--Alalaas-accent); font-size:12px; letter-spacing:.3px; }

.Alalaas-about__list{ margin-top:18px; display:grid; gap:18px; }
.Alalaas-about__item{
  display:grid;
  grid-template-columns: 54px 1fr;
  gap:14px;
  align-items:flex-start;
}
.Alalaas-about__icon{
  width:44px; height:44px; border-radius:999px;
  background:rgba(245,162,0,.12);
  color:var(--Alalaas-accent);
  display:grid; place-items:center;
}
.Alalaas-about__icon svg{ width:22px; height:22px; }
.Alalaas-about__text h4{ margin:0 0 6px; font-size:16px; }
.Alalaas-about__text p{ margin:0; color:var(--Alalaas-muted); line-height:1.65; font-size:13px; }

@media (max-width: 980px){
  .Alalaas-about__grid{ grid-template-columns:1fr; }
  .Alalaas-about__badge{display: none;}
  .Alalaas-about__quote{ position:relative; right:auto; bottom:auto; margin-top:14px; max-width:100%; }
  .Alalaas-about__img{ height:420px; }
}
@media (max-width: 520px){
  .Alalaas-about__img{ height:320px; }
  .Alalaas-about__badge{display: none;}
  .Alalaas-about__badgeNum{ font-size:28px; }
}

/* ===== PILLS ===== */
.Alalaas-pills{ padding:10px 0 34px; background:#fff; }
.Alalaas-pills__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:18px;
  align-items:stretch;
}
.Alalaas-pill{
  border-radius:16px;
  padding:18px 18px;
  display:flex;
  gap:14px;
  align-items:center;
  background:#f8f8f8;
}
.Alalaas-pill__ico{
  width:56px; height:56px; border-radius:14px;
  display:grid; place-items:center;
  color:#fff;
  flex:0 0 auto;
}
.Alalaas-pill__ico svg{ width:26px; height:26px; }
.Alalaas-pill__txt h4{ margin:0; font-size:16px; }
.Alalaas-pill__txt p{ margin:3px 0 0; color:rgba(0,0,0,.55); font-size:13px; }

.Alalaas-pill--orange{ background:#fff3df; }
.Alalaas-pill--orange .Alalaas-pill__ico{ background:#f5a200; }

.Alalaas-pill--cyan{ background:#dff6ff; }
.Alalaas-pill--cyan .Alalaas-pill__ico{ background:#18a7d9; }

.Alalaas-pill--green{ background:#e9f8e8; }
.Alalaas-pill--green .Alalaas-pill__ico{ background:#5ec44e; }

.Alalaas-pill--teal{ background:#dff7f4; }
.Alalaas-pill--teal .Alalaas-pill__ico{ background:#00b2a2; }

@media (max-width: 1024px){
  .Alalaas-pills__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .Alalaas-pills__grid{ grid-template-columns: 1fr; }
}

/* ===============================
   Alalaas - OUR VALUE SECTION
================================ */
.Alalaas-values{
  position: relative;
  padding: clamp(44px, 5vw, 86px) 0;
  overflow: hidden;
  background: #ffffff;
}

/* soft pink glow like screenshot */
.Alalaas-values::before{
  content:"";
  position:absolute;
  left:50%;
  top: 38%;
  transform: translate(-50%, -50%);
  width: min(920px, 92vw);
  height: min(520px, 60vw);
  background:
  radial-gradient(circle at 50% 50%,
    rgba(126, 149, 176, .28) 0%,
    rgba(126, 149, 176, .14) 35%,
    rgba(126, 149, 176, 0) 72%);
filter: blur(2px);

filter: blur(2px);

  filter: blur(2px);
  pointer-events:none;
color: #fdcf00;
}

.Alalaas-values__head{
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 780px;
  margin: 0 auto 26px;
}

.Alalaas-values__eyebrow{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fdcf00; /* your secondary */
  font-weight: 700;
  margin-bottom: 10px;
}

.Alalaas-values__title{
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.15;
  color: #c31f26; /* your primary */
  font-weight: 800;
}

.Alalaas-values__grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 24px);
  margin-top: 28px;
}

.Alalaas-valueCard{
  background: #fff;
  border-radius: 18px;
  padding: clamp(22px, 2.4vw, 34px);
  border: 1px solid rgba(49, 50, 68, 0.08);
  box-shadow:
    0 18px 55px rgba(17, 24, 39, 0.08);
  text-align: center;
  position: relative;
}

/* thin inner frame like screenshot */
.Alalaas-valueCard::before{
  content:"";
  position:absolute;
  inset: 12px;
  border-radius: 14px;
  border: 1px solid rgba(49, 50, 68, 0.08);
  pointer-events:none;
}

.Alalaas-valueCard__icon{
  width: 52px;
  height: 82px;
  margin: 2px auto 16px;
  display: grid;
  place-items: center;
  color: #c31f26;
}

.Alalaas-valueCard__icon svg{
  width: 36px;
  height: 36px;
}

.Alalaas-valueCard__title{
  font-size: 22px;
  font-weight: 800;
  color: #c31f26;
  margin: 0 0 10px;
}

.Alalaas-valueCard__text{
  font-size: 15px;
  line-height: 1.7;
  color: rgba(49, 50, 68, 0.78);
  max-width: 340px;
  margin: 0 auto;
}

/* responsive */
@media (max-width: 992px){
  .Alalaas-values__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px){
  .Alalaas-values__grid{ grid-template-columns: 1fr; }
  .Alalaas-valueCard::before{ inset: 10px; }
}

/* ===============================
   Alalaas - CORE VALUE SECTION
================================ */
.Alalaas-core{
  position: relative;
  padding: clamp(44px, 5vw, 86px) 0;
  background: #fff;
  overflow: hidden;
}

/* soft pink glow background like screenshot */
.Alalaas-core::before{
  content:"";
  position:absolute;
  left: 50%;
  top: 36%;
  transform: translate(-50%, -50%);
  width: min(980px, 92vw);
  height: min(560px, 62vw);
    background:
  radial-gradient(circle at 50% 50%,
    rgba(126, 149, 176, .0.2) 0%,
    rgba(126, 149, 176, .0.2) 35%,
    rgba(126, 149, 176, 0) 72%);
filter: blur(2px);

  pointer-events:none;
}

.Alalaas-core__grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(18px, 3vw, 54px);
  align-items: center;
}

/* LEFT collage */
.Alalaas-core__media{
  position: relative;
  min-height: clamp(320px, 36vw, 520px);
}

.Alalaas-core__big{
  width: min(420px, 100%);
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 22px 70px rgba(17,24,39,0.10);
  background: #f6f7fb;
}

.Alalaas-core__big img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.Alalaas-core__small{
  position: absolute;
  left: -8%;
  bottom: -4%;
  width: min(260px, 72%);
  border-radius: 14px;
  overflow: hidden;
  background: #f6f7fb;
  border: 1px solid rgba(49, 50, 68, 0.10);
  box-shadow: 0 18px 55px rgba(17,24,39,0.10);
}

.Alalaas-core__small img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* RIGHT content */
.Alalaas-core__eyebrow{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fdcf00; /* your secondary */
  font-weight: 800;
  margin-bottom: 12px;
}

.Alalaas-core__title{
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1.12;
  color: #c31f26; /* your primary */
  font-weight: 900;
  margin: 0 0 16px;
  max-width: 560px;
}

.Alalaas-core__desc{
  margin: 0 0 22px;
  max-width: 560px;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(49, 50, 68, 0.78);
}

/* list */
.Alalaas-core__list{
  display: grid;
  gap: 14px;
  margin-top: 8px;
}

.Alalaas-core__item{
  display: flex;
  align-items: center;
  gap: 12px;
}

.Alalaas-core__ic{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #ff4d73; /* accent pink */
  border: 1px solid rgba(255, 77, 115, 0.28);
  background: rgba(255, 77, 115, 0.06);
}

.Alalaas-core__ic svg{
  width: 20px;
  height: 20px;
}

.Alalaas-core__txt{
  font-weight: 700;
  color: #c31f26;
  font-size: 15px;
}

/* responsive */
@media (max-width: 992px){
  .Alalaas-core__grid{
    grid-template-columns: 1fr;
  }
  .Alalaas-core__media{
    min-height: 360px;
    display: grid;
    place-items: start;
  }
  .Alalaas-core__small{
    left: 0;
    bottom: -10px;
  }
}

@media (max-width: 576px){
  .Alalaas-core__small{
    width: min(340px, 88%);
  }
}


/* ===== WHY ===== */
.Alalaas-why{
  background: #f4f4f4;
  padding:56px 0;
}
.Alalaas-why__grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:36px;
  align-items:center;
}
.Alalaas-why__title{
  margin:0 0 18px;
  font-size:clamp(26px, 2.6vw, 40px);
  letter-spacing:-.3px;
}

.Alalaas-why__cards{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:18px;
}
.Alalaas-whycard{
  background:#fff;
  border-radius:14px;
  padding:16px 16px;
  display:grid;
  grid-template-columns: 56px 1fr;
  gap:12px;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
}
.Alalaas-whycard__ico{
  width:46px; height:46px; border-radius:999px;
  background:var(--Alalaas-accent);
  color:#fff;
  display:grid; place-items:center;
  position:relative;
}
.Alalaas-whycard__ico::before{
  content:"";
  position:absolute;
  left:-10px;
  top:50%;
  transform:translateY(-50%);
  width:10px;
  height:72px;
  border-left:3px solid var(--Alalaas-accent);
  border-top-left-radius:99px;
  border-bottom-left-radius:99px;
}
.Alalaas-whycard__ico svg{ width:22px; height:22px; }
.Alalaas-whycard__txt h4{ margin:0 0 5px; font-size:16px; }
.Alalaas-whycard__txt p{ margin:0; color:var(--Alalaas-muted); font-size:13px; line-height:1.6; }

/* collage */
.Alalaas-collage{
  background:#fff;
  border-radius:18px;
  padding:10px;
  box-shadow:var(--Alalaas-shadow);
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:10px;
}
.Alalaas-collage img{
  width:100%;
  height:110px;
  object-fit:cover;
  border-radius:14px;
  display:block;
}

@media (max-width: 980px){
  .Alalaas-why__grid{ grid-template-columns:1fr; }
  .Alalaas-collage img{ height:140px; }
}
@media (max-width: 520px){
  .Alalaas-why__cards{ grid-template-columns:1fr; }
  .Alalaas-collage img{ height:120px; }
}

/* ===== HEAD ROW (Brands/News) ===== */
.Alalaas-headrow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin:0 0 18px;
}
.Alalaas-headrow__title{
  margin:0;
  font-size:clamp(24px, 2.2vw, 34px);
  letter-spacing:-.2px;
}
.Alalaas-headrow__link{
  color:#1f2937;
  text-decoration:none;
  font-size:14px;
  border-bottom:1px solid #cfcfcf;
  padding-bottom:2px;
}
.Alalaas-headrow__link:hover{ color:var(--Alalaas-accent); border-color:var(--Alalaas-accent); }

/* ===== BRANDS ===== */
.Alalaas-brands{ padding:54px 0; background:#fff; }

.Alalaas-brands__grid{
  display:grid;
  grid-template-columns: repeat(8, 1fr);
  gap:14px;
}
.Alalaas-brand{
  background:#f7f7f7;
  border-radius:10px;
  padding:14px 10px;
  display:grid;
  place-items:center;
  border:1px solid #f0f0f0;
}
.Alalaas-brand img{
  max-width:90%;
  max-height:38px;
  object-fit:contain;
  display:block;
}

@media (max-width: 1100px){
  .Alalaas-brands__grid{ grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 520px){
  .Alalaas-brands__grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ===== VIDEO + STATS ===== */
.Alalaas-videoStats{ padding:44px 0 58px; background:#fff; }

.Alalaas-videoCard{
  height: 420px;
  border-radius:18px;
  overflow:hidden;
  position:relative;
  box-shadow:var(--Alalaas-shadow);
  /* Replace this image */
  background:
    linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)),
    url("assets/images/thumbs/all-in-one-shop-sports.png") center/contain no-repeat;
}

.Alalaas-playBtn{
  position:absolute;
  inset:0;
  margin:auto;
  width:92px;
  height:92px;
  border-radius:999px;
  border:0;
  background:rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
  display:grid;
  place-items:center;
  cursor:pointer;
}
.Alalaas-playBtn svg{ width:30px; height:30px; color:#fff; transform: translateX(2px); }
.Alalaas-playBtn__dot{
  position:absolute;
  inset:0;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.35);
}
.Alalaas-playBtn:hover{ background:rgba(255,255,255,.28); }

.Alalaas-stats{
  margin-top:18px;
  background:#f4f4f4;
  border-radius:16px;
  padding:18px 14px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:0;
  box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.Alalaas-stat{
  text-align:center;
  padding:10px 10px;
  position:relative;
}
.Alalaas-stat:not(:last-child)::after{
  content:"";
  position:absolute;
  right:0;
  top:18px;
  bottom:18px;
  width:1px;
  background:#dedede;
}
.Alalaas-stat__ico{
  width:48px; height:48px; border-radius:999px;
  display:grid; place-items:center;
  margin:0 auto 10px;
  color:#fff;
}
.Alalaas-stat__ico svg{ width:24px; height:24px; }

.Alalaas-stat__ico--blue{ background:#1f78ff; }
.Alalaas-stat__ico--green{ background:#2f8f2f; }
.Alalaas-stat__ico--pink{ background:#ff4f87; }
.Alalaas-stat__ico--yellow{ background:#f6b100; }

.Alalaas-stat__num{ font-size:26px; font-weight:800; margin-bottom:4px; }
.Alalaas-stat__lbl{ font-size:12px; color:#6b7280; }

@media (max-width: 900px){
  .Alalaas-stats{ grid-template-columns: repeat(2, 1fr); gap:10px; }
  .Alalaas-stat::after{ display:none !important; }
  .Alalaas-videoCard{ height:320px; }
}
@media (max-width: 520px){
  .Alalaas-stats{ grid-template-columns: 1fr; }
  .Alalaas-videoCard{ height: 320px; }
}

/* ===== NEWS ===== */
.Alalaas-news{ padding:54px 0 64px; background:#fff; }
.Alalaas-news__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:18px;
}
.Alalaas-post{
  border:1px solid var(--Alalaas-border);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 8px 18px rgba(0,0,0,.04);
}
.Alalaas-post__media{
  padding:16px;
}
.Alalaas-post__media img{
  width:100%;
  height:300px;
  object-fit:contain;
  background:#f3f0ec;
  border-radius:10px;
  display:block;
}
.Alalaas-post__meta{
  display:flex;
  gap:14px;
  padding:0 16px 8px;
  color:#8b8b8b;
  font-size:12px;
}
.Alalaas-post__title{
  margin:0;
  padding:0 16px 12px;
  font-size:16px;
  line-height:1.35;
}
.Alalaas-post__foot{
  padding:10px 16px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  border-top:1px solid #f0f0f0;
}
.Alalaas-post__more{
  color:#111;
  text-decoration:none;
  font-size:13px;
}
.Alalaas-post__more:hover{ color:var(--Alalaas-accent); }
.Alalaas-post__cmts{ color:#8b8b8b; font-size:12px; }

@media (max-width: 1100px){
  .Alalaas-news__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .Alalaas-news__grid{ grid-template-columns: 1fr; }
  .Alalaas-post__media img{ height:190px; }
}


/*start contact us css*/

/* contact.css (FULL) — UNIQUE PREFIX: ctc- */
:root{
  --ctc-orange:#c31f26;
  --ctc-light:#F3F3F3;
  --ctc-text:#111827;
  --ctc-muted:#6B7280;

  --ctc-shadow: 0 14px 30px rgba(0,0,0,.08);
  --ctc-radius: 10px;
  --ctc-radius-big: 12px;

  --ctc-max: 77%;
}

/* scoped box-sizing to avoid conflicts */
.ctc-page,
.ctc-page *{ box-sizing:border-box; }

.ctc-page{
  background:#fff;
  color:var(--ctc-text);
  padding: 28px 0 34px;
}

.ctc-page img{ display:block; max-width:100%; }

/* wrapper */
.ctc-wrap{
  width: min(var(--ctc-max), calc(100% - 60px));
  margin: 0 auto;
}

/* ================= TOP CARDS ================= */
.ctc-top-cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-bottom: 60px;
}

.ctc-top-card{
  position:relative;
  background: var(--ctc-light);
  border-radius: 6px;
  padding: 22px 22px 22px 80px;
  min-height: 92px;
}

.ctc-top-icon{
  position:absolute;
  left:-26px;
  top:50%;
  transform:translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 6px;
  background: var(--ctc-orange);
  display:grid;
  place-items:center;
  color:#fff;
}

.ctc-top-icon svg{ width:26px; height:26px; }

.ctc-top-content h3{
  margin:0 0 10px;
  font-size:18px;
  font-weight:800;
}

.ctc-top-content p{
  margin:0;
  font-size:13px;
  line-height:1.7;
  color:#111;
}

/* ================= MAIN GRID ================= */
.ctc-main-grid{
  display:grid;
  grid-template-columns: 420px 1fr;
  gap: 40px;
  align-items: stretch;
}

/* LEFT IMAGE */
.ctc-photo-card{
  position:relative;
  border-radius: var(--ctc-radius-big);
  overflow:hidden;
  box-shadow: var(--ctc-shadow);
  background:#000;
  min-height: 360px;
}

.ctc-photo-card img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Hotline badge */
.ctc-hotline-badge{
  position:absolute;
  left: 16px;
  bottom: 16px;
  background: #fdcf00;
  color:#fff;
  border-radius: 10px;
  padding: 14px 16px;
  width: 220px;
}

.ctc-hotline-title{
  font-size:18px;
  font-weight:800;
  margin-bottom: 6px;
}

.ctc-hotline-number{
  display:inline-block;
  color:#fff;
  font-size:12.5px;
  font-weight:600;
  opacity:.95;
  text-decoration:none;
}

/* bell */
.ctc-hotline-bell{
  position:absolute;
  right: -16px;
  top: 16px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border:0;
  background: var(--ctc-orange);
  color:#fff;
  display:grid;
  place-items:center;
  box-shadow: 0 14px 22px rgba(245,161,0,.25);
  cursor:pointer;
}
.ctc-hotline-bell svg{ width:22px; height:22px; }

/* RIGHT FORM CARD */
.ctc-form-card{
  background:#fff;
  border-radius: var(--ctc-radius-big);
  box-shadow: var(--ctc-shadow);
  padding: 34px 38px;
  min-height: 360px;
}

.ctc-form-title{
  margin:0 0 18px;
  font-size: 34px;
  font-weight: 600;
  letter-spacing:-0.03em;
}

.ctc-form-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 22px;
}

.ctc-field label{
  display:block;
  font-size:12px;
  font-weight:600;
  color:#111;
  margin-bottom: 8px;
}

.ctc-field input,
.ctc-field textarea{
  width:100%;
  border: 1px solid rgba(17,24,39,.12);
  border-radius: 4px;
  padding: 12px 14px;
  font-size: 13px;
  outline:none;
}

.ctc-field textarea{
  height: 140px;
  resize:none;
}

.ctc-field--full{
  grid-column: 1 / -1;
}

.ctc-send-btn{
  margin-top: 18px;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  border:0;
  background: var(--ctc-orange);
  color:#fff;
  font-weight:800;
  padding: 11px 18px;
  border-radius: 6px;
  cursor:pointer;
}

.ctc-arrow{ font-weight:900; }

/* ================= MAP (FULL SCREEN WIDTH) ================= */
.ctc-map-full{
  width: 100%;
  margin-top: 28px;
}

.ctc-map-iframe{
  width: 100%;
  height: 520px;
  border: 0;
  display: block;
}


/* ================= CART ================= */
.cart-section {
  padding: 20px 0;
}

.cart-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 30px;
}

/* TABLE */
.cart-table {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
}

.cart-head {
  display: grid;
  grid-template-columns: 120px 1fr 120px 140px 120px;
  font-weight: 600;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;
}

.cart-row {
  display: grid;
  grid-template-columns: 120px 1fr 120px 140px 120px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid #eee;
  gap: 10px;
}

.cart-remove button {
  background: none;
  border: none;
  color: #111;
  font-weight: 600;
  cursor: pointer;
}

.cart-product {
  display: flex;
  gap: 14px;
}

.cart-thumb {
  width: 90px;
  height: 90px;
  border-radius: 10px;
  border: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-thumb img {
  width: 70%;
}

.cart-product h4 {
  font-size: 16px;
  margin-bottom: 6px;
}

.cart-meta {
  font-size: 14px;
  color: #666;
}

.cart-tags span {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  background: #f3f4f6;
  font-size: 12px;
  margin-right: 6px;
}

.cart-price,
.cart-subtotal {
  font-weight: 600;
}

.cart-qty {
  display: flex;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
}

.cart-qty button {
  width: 55px;
  border: none;
  background: #f9fafb;
  cursor: pointer;
}

.cart-qty span {
  width: 36px;
  text-align: center;
  line-height: 34px;
}

/* ACTIONS */
.cart-actions {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
}

.coupon {
  display: flex;
  gap: 10px;
}

.coupon input {
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid #ddd;
}

.coupon button,
.update-cart {
  padding: 10px 18px;
  border-radius: 6px;
  border: none;
  background: #c31f26;
  color: #fff;
  cursor: pointer;
}

/* SUMMARY */
.cart-summary {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  height: fit-content;
}

.cart-summary h3 {
  margin-bottom: 18px;
}

.summary-box {
  background: #f6f6f6;
  border-radius: 10px;
  padding: 16px;
}

.summary-box div {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
}

.summary-total {
  display: flex;
  justify-content: space-between;
  padding: 16px;
  margin-top: 16px;
  background: #f6f6f6;
  border-radius: 10px;
  font-size: 1.25rem;
}

.checkout-btn {
  width: 100%;
  margin-top: 18px;
  padding: 14px;
  border-radius: 8px;
  background: #c31f26;
  color: #fff;
  border: none;
  font-size: 16px;
  cursor: pointer;
}

/* ================= CART DETAIL (PRODUCT DETAILS) ================= */
.cdp{ padding: 56px 0; }
.cdp-grid{
  display:grid;
  grid-template-columns: 1.05fr 1.35fr 0.9fr;
  gap: 26px;
  align-items: start;
}

/* left gallery */
/* .cdp-gallery{} */
.cdp-main{
  background:#fff;
  border:1px solid #eef2f7;
  border-radius:14px;
  padding: 28px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 520px;
}
.cdp-main img{ max-width: 100%; height:auto; display:block; }

.cdp-thumbs{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}
.cdp-thumb{
  background:#fff;
  border:1px solid #eef2f7;
  border-radius:12px;
  padding: 10px;
  cursor:pointer;
}
.cdp-thumb img{ width:100%; height:72px; object-fit:contain; display:block; }
.cdp-thumb.is-active{ outline: 2px solid #dbeafe; }

/* middle details */
.cdp-info{
  background:#fff;
  border:1px solid #eef2f7;
  border-radius:14px;
  padding: 22px;
}
.cdp-title{ font-size: 34px; line-height: 1.15; margin: 2px 0 10px; }
.cdp-rating{
  display:flex; flex-wrap:wrap; gap:10px;
  align-items:center;
  color:#64748b;
  font-size: 14px;
  margin-bottom: 14px;
}
.cdp-stars{ color:#f59e0b; letter-spacing:2px; }
.cdp-dot{ opacity:.6; }

.cdp-desc{ color:#64748b; line-height:1.7; margin: 10px 0 18px; }

.cdp-priceRow{
  display:flex; flex-wrap:wrap;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0 18px;
  border-top:1px solid #eef2f7;
  border-bottom:1px solid #eef2f7;
}
.cdp-price strong{ font-size: 34px; margin-right: 10px; }
.cdp-price del{ color:#94a3b8; font-size: 14px; }

.cdp-whatsapp{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background:#c31f26;
  color:#fff;
  text-decoration:none;
  font-weight: 600;
  white-space: nowrap;
}

/* offer row */
.cdp-offer{
  margin-top: 16px;
  background:#f0f7f1;
  border:1px solid #dff2e3;
  border-radius: 12px;
  padding: 14px 14px;
}
.cdp-offerRow{
  display:flex; flex-wrap:wrap;
  align-items:center;
  gap: 12px;
}
.cdp-offerLabel{ color:#0f6b87; font-weight:700; }
.cdp-offerTimer{ display:flex; align-items:center; gap: 8px; }
.cdp-pill{
  min-width: 36px;
  height: 28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #cbd5e1;
  border-radius: 6px;
  background:#fff;
  font-weight: 700;
  font-size: 13px;
}
.cdp-colon{ color:#64748b; font-weight:700; }
.cdp-offerNote{ color:#334155; font-size: 13px; }

/* sold bar */
.cdp-sold{ padding: 16px 0 10px; }
.cdp-soldTitle{ font-weight:700; color:#0f172a; }
.cdp-bar{
  margin: 10px 0 8px;
  width:100%;
  height: 8px;
  background:#e5e7eb;
  border-radius: 999px;
  overflow:hidden;
}
.cdp-barFill{
  display:block;
  height:100%;
  background:#fdcf00;
  border-radius: 999px;
}
.cdp-available{ color:#64748b; font-size: 13px; }

/* buy row */
.cdp-buy{
  display:flex; flex-wrap:wrap;
  align-items:center;
  gap: 14px;
  padding-top: 10px;
}
.cdp-qtyWrap{ display:flex; align-items:center; gap: 10px; }
.cdp-qtyLabel{ color:#334155; font-weight:600; }

.cdp-qty{
  display:flex;
  border:1px solid #e2e8f0;
  border-radius: 999px;
  overflow:hidden;
  background:#fff;
}
.cdp-qty button{
  width: 44px; height: 40px;
  border:0; background:#f8fafc;
  cursor:pointer;
}
.cdp-qty span{
  width: 44px; height: 40px;
  display:flex; align-items:center; justify-content:center;
  font-weight:700;
}

.cdp-add{
  flex: 1 1 220px;
  height: 44px;
  border:0;
  border-radius: 999px;
  background:#c31f26;
  color:#fff;
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
}

.cdp-actions{ display:flex; gap: 10px; }
.cdp-ic{
  width: 44px; height: 44px;
  border-radius: 999px;
  border:1px solid #e2e8f0;
  background:#f8fafc;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* coupon */
.cdp-couponBox{
  margin-top: 18px;
  border:1px dashed #fdcf00;
  background:#f8fbff;
  border-radius: 12px;
  padding: 14px;
}
.cdp-couponTop{
  display:flex; align-items:center; justify-content:space-between;
  gap: 14px;
  font-size: 14px;
}
.cdp-couponTop i{ margin-right: 6px; }
.cdp-couponLink{ color:#c31f26; text-decoration:none; font-weight:700; }
.cdp-couponList{ margin: 12px 0 0 18px; color:#0f172a; }
.cdp-couponList li{ margin: 8px 0; }

/* right side */
.cdp-side{ display:flex; flex-direction:column; gap: 14px; }
.cdp-store{
  background:#fff;
  border:1px solid #eef2f7;
  border-radius:14px;
  padding: 14px;
}
.cdp-storeRow{
  display:flex; align-items:center; gap: 12px;
}
.cdp-storeBadge{
  width: 46px; height: 46px;
  border-radius: 999px;
  border: 2px solid #0f6b87;
  display:flex; align-items:center; justify-content:center;
  color:#0f6b87;
}
.cdp-storeBy{ font-weight:700; color:#0f172a; }
.cdp-storeBtn{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border:2px solid #0f6b87;
  color:#0f6b87;
  text-decoration:none;
  font-weight:800;
  white-space:nowrap;
}

.cdp-features{
  background:#F8FBFF;
  border:1px solid #dff2e3;
  border-radius:14px;
  overflow:hidden;
}
.cdp-feat{
  display:flex;
  gap: 12px;
  padding: 16px;
  border-top:1px solid #dff2e3;
}
.cdp-feat:first-child{ border-top:0; }
.cdp-featIc{
  width: 42px; height: 42px;
  border-radius: 999px;
  background:#fff;
  border:1px solid #e2e8f0;
  display:flex; align-items:center; justify-content:center;
  flex: 0 0 auto;
  color:#0f6b87;
}
.cdp-feat h4{ margin: 2px 0 6px; font-size: 14px; }
.cdp-feat p{ margin: 0; color:#64748b; font-size: 13px; line-height:1.5; }

/* Small desktop / Large tablet landscape */
@media (max-width: 1400px) {
  html, body { overflow-x: hidden; }
  img, video { max-width: 100%; height: auto; }

  .container { padding: 0 14px; }

  .header-inner { gap: 14px; }
  .search-wrap { max-width: 720px; }

  .hero-card { padding: 30px 26px 20px 44px; }
  .hero-title { font-size: 44px; line-height: 1.15; }
  .hero-media { height: 320px; }
  .hero-media img { width: min(520px, 100%); }

  .deal-grid { grid-template-columns: repeat(2, 1fr); }

  .dotw-banner { grid-template-columns: 200px 1fr 260px; }
  .dotw-left-img { width: 180px; }
  .dotw-right-img { width: 240px; }

  .dotw-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  .topsell-grid { grid-template-columns: 1.6fr repeat(3, 1fr); }
  .topsell-promo { min-height: 420px; }

  .trending-banner { grid-template-columns: 200px 1fr 200px; }
  .trending-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  .promo-two-grid { grid-template-columns: 1fr 1fr; }
  .promo-card { grid-template-columns: 1fr 220px; }

  .featured-wrap { grid-template-columns: 1.3fr 0.9fr; }
  .reco-wrap { grid-template-columns: 420px 1fr; }
  .reco-grid { grid-template-columns: repeat(3, 1fr); }

  .brands-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cat-grid-wrap { grid-template-columns: repeat(3, 1fr); }
  .cat-icons-row { grid-template-columns: repeat(4, 1fr); }

  .footer-features { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .ilist-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .wl-row{ grid-template-columns: 160px 1fr 140px 170px 280px; }
  .wl-cart-btn{ width: 220px; }
  .wl-thumb{ width: 128px; }

  .ctc-main-grid{ grid-template-columns: 1fr; }
  .ctc-photo-card{ min-height: 360px; }
  .ctc-wrap{ width: min(var(--ctc-max), calc(100% - 28px)); }
}

/* Tablet / iPad (portrait) + small tablets */
@media (max-width: 1000px) {
  /* header stack */
  .header-inner { flex-wrap: wrap; }
  .search-wrap {
    order: 3;
    flex: 1 1 100%;
    min-width: 100%;
    max-width: 100%;
  }

  /* hero -> 1 column */
  .hero-card { height: auto; padding: 24px 18px 18px; }
  .hero-grid { grid-template-columns: 1fr; gap: 16px; }
  .hero-title { font-size: 36px; line-height: 1.18; }
  .hero-media { height: 280px; }
  .hero-dots { margin-top: 18px; }

  .deal-grid { grid-template-columns: 1fr; }

  .dotw-banner { grid-template-columns: 1fr; text-align: center; gap: 12px; }
  .dotw-banner-left,
  .dotw-banner-right { justify-content: center; }
  .dotw-right-img { transform: none; width: 240px; }

  .dotw-grid { grid-template-columns: repeat(3, 1fr); }

  /* topsell: promo full width + products 2 cols */
  .topsell-grid { grid-template-columns: repeat(2, 1fr); }
  .topsell-promo { grid-column: 1 / -1; min-height: 380px; }

  .trending-banner { grid-template-columns: 1fr; text-align: center; gap: 12px; }
  .trending-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .promo-two-grid { grid-template-columns: 1fr; }
  .promo-card { grid-template-columns: 1fr 200px; }

  .featured-wrap { grid-template-columns: 1fr; }
  .featured-grid { grid-template-columns: 1fr 1fr; }

  .discount-bar { flex-wrap: wrap; justify-content: center; text-align: center; }

  .reco-wrap { grid-template-columns: 1fr; }
  .reco-grid { grid-template-columns: repeat(2, 1fr); }

  .brands-row { grid-template-columns: repeat(4, 1fr); }
  .cat-grid-wrap { grid-template-columns: repeat(2, 1fr); }
  .cat-icons-row { grid-template-columns: repeat(3, 1fr); }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .ilist-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wl-head{ display:none; }

  .wl-row{
    grid-template-columns: 1fr;
  }

  .wl-col{
    border-right: 0;
    padding: 14px 16px;
  }

  .wl-item{
    padding: 10px 10px;
  }

  /* each “column” becomes a labeled row */
  .wl-item .wl-col{
    border-top: 1px solid #eef2f7;
  }
  .wl-item .wl-col:first-child{ border-top: 0; }

  .wl-remove,
  .wl-price,
  .wl-stock,
  .wl-action{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .wl-remove::before,
  .wl-price::before,
  .wl-stock::before,
  .wl-action::before{
    content: attr(data-label);
    font-weight: 800;
    color: #0f172a;
  }

  /* product row keeps normal layout */
  .wl-product-col{ display:block; }
  .wl-product-col::before{
    content: attr(data-label);
    display: block;
    font-weight: 800;
    color: #0f172a;
    margin: 6px 0 12px;
  }

  .wl-center{ justify-content: space-between; }
  .wl-cart-btn{ width: 100%; }

  .ctc-map-iframe{ height: 420px; }

    .ctc-top-cards{
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-bottom: 36px;
  }
  .ctc-form-card{ padding: 26px 22px; }
  .ctc-form-title{ font-size: 30px; }

    .cart-grid {
    grid-template-columns: 1fr;
  }

  .cdp-grid{ grid-template-columns: 1fr; }
  .cdp-main{ min-height: 420px; }
}

/* Phones + small tablets */
@media (max-width: 768px) {

  /* ✅ stop horizontal scroll */
  html, body { overflow-x: hidden; }
  img, video { max-width: 100%; height: auto; }

  .container { padding: 0 12px; }

  /* ✅ DOTW grid + cards: prevent any child from forcing extra width */
  .dotw-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .dotw-card { min-width: 0 !important; }
  .dotw-card * { min-width: 0 !important; }

  .dotw-img {
    padding: 8px !important;
  }

  .dotw-img img {
    max-width: 100% !important;
    /* width: 100% !important; */
    height: auto !important;
    padding: 0 !important;          /* ✅ removes the 1rem padding that causes overflow */
    box-sizing: border-box !important;
  }

  /* ✅ bars/progress never exceed container */
  .dotw-progress,
  .dotw-progress-bar,
  .dotw-bar,
  .dotw-bar span {
    max-width: 100% !important;
  }

  /* ✅ price row can wrap on tight space */
  .dotw-price { flex-wrap: wrap !important; }

  /* ✅ CYBER banner stack earlier (prevents right image overflow) */
  .cyber-card {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    padding: 22px 16px !important;
  }
  .cyber-left,
  .cyber-right {
    justify-content: center !important;
  }
  .cyber-left img,
  .cyber-right img {
    width: min(240px, 100%) !important;
    height: auto !important;
    max-width: 100% !important;
  }
  .cyber-right::before { display: none !important; }

  /* ✅ promo reveal translateX can create overflow on small screens */
  .promo-card.js-reveal.from-left,
  .promo-card.js-reveal.from-right {
    transform: none !important;
  }
    .footer-cta__form { width: 100%; }
  .footer-cta__form input,
  .footer-cta__form button {
    width: 100% !important;
    max-width: 100% !important;
  }
  .trending-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
    .featured-grid { grid-template-columns: 1fr !important; }

    .ilist-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .wl-product{ gap: 14px; }
  .wl-thumb{ width: 110px; height: 100px; }
  .wl-thumb img{ width: 70px; height: 70px; }
  .wl-name{ font-size: 16px; }
  .wl-mini-cart{ width: 100%; justify-content: center; }

  .ctc-top-cards{ grid-template-columns: 1fr; }
  .ctc-top-card{ padding-left: 74px; }
  .ctc-top-icon{ left:-20px; width:52px; height:52px; }

  .ctc-main-grid{ gap: 18px; }
  .ctc-form-grid{ grid-template-columns: 1fr; }
  .ctc-field--full{ grid-column:auto; }
  .ctc-form-title{ font-size: 26px; }
  .ctc-photo-card{ min-height: 300px; }

  .ctc-map-iframe{ height: 320px; }


    .cart-head {
    display: none;
  }

  .cart-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .cart-price,
  .cart-subtotal,
  .cart-qty,
  .cart-remove {
    display: flex;
    justify-content: space-between;
  }
  .cart-actions{ gap:10px; }

  .cdp-title{ font-size: 26px; }
  .cdp-main{ padding: 18px; min-height: 360px; }
  .cdp-thumbs{ grid-template-columns: repeat(4, minmax(0,1fr)); }
  .cdp-thumb img{ height: 60px; }

  .cdp-priceRow{ justify-content: flex-start; }
  .cdp-whatsapp{ width: 100%; }

  .cdp-buy{ gap: 10px; }
  .cdp-add{ width: 100%; flex: 1 1 100%; }
  .cdp-actions{ width: 100%; justify-content: center; }
}

/* Small phones */
@media (max-width: 480px) {
  /* ✅ stop horizontal scroll */
  html, body { overflow-x: hidden; }
  img, video { max-width: 100%; height: auto; }

  .container { padding: 0 12px; }

  .hero-title { font-size: 24px; }
  .hero-media { height: 210px; }
  .hero-media img { width: min(360px, 100%); }

  .deal-card { grid-template-columns: 1fr 120px; padding: 16px; }
  .deal-media img { width: 95px; }

  /* ✅ make ALL grids 1 column */
  .dotw-grid,
  .trending-grid,
  .reco-grid,
  .cat-grid-wrap,
  .footer-features,
  .footer-grid{
    grid-template-columns: repeat(1, 1fr) !important;
  }
  .cat-icons-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .featured-grid { grid-template-columns: 1fr !important; }
  .brands-row { grid-template-columns: repeat(2, 1fr); }


  /* ✅ TOP SELLING (THIS is where overflow is happening) */
  .topsell-grid { grid-template-columns: 1fr !important; }
  .topsell-promo { min-height: auto !important; width: 100% !important; }
  .promo-content { width: 100% !important; }

  .promo-media {
    width: 100% !important;
    max-width: 100% !important;
    height: 160px !important;
    overflow: hidden !important;
    justify-content: center !important;
  }
  .promo-media img {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* ✅ if you use carousel track, force it to behave on phone */
  .topsell-track {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .topsell-track > .p-card,
  .p-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* ✅ promo-two cards stack */
  .promo-two-grid { grid-template-columns: 1fr !important; }
  .promo-card { grid-template-columns: 1fr !important; }
  .promo-card.js-reveal { transform: none !important; } /* prevents translateX overflow */

  /* ✅ cyber banner stack */
  .cyber-card { grid-template-columns: 1fr !important; }

  /* ✅ featured promo safe */
  .fpromo {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* ✅ footer form full width */
  .footer-cta__form { width: 100%; }
  .footer-cta__form input,
  .footer-cta__form button {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ✅ fix big category icon circles on tiny screens */
  .cat-icon__circle {
    width: 140px !important;
    height: 140px !important;
  }
  .cat-icon__label { font-size: 16px !important; }

  /* ✅ dotw carousel off on phones (if active) */
  .dotw-grid.dotw-carousel {
    display: grid !important;
    grid-template-columns: 1fr !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .dotw-grid.dotw-carousel > .dotw-card {
    flex: unset !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .footer-pay {
    max-width: 100%;
    min-height: 56px;
    padding: 10px 12px;
  }

  .footer-pay img {
    max-width: 280px;
    max-height: 36px;
    height: auto !important;
    object-fit: contain;
  }
.footer-bottom {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;          
    flex-wrap: wrap;  
    margin: 0 auto;
}
.topsell-grid {
  grid-template-columns: 1fr;
}

.ilist-grid{ grid-template-columns: 1fr; }

 .wl-product{ gap: 14px; }
  .wl-thumb{ width: 110px; height: 100px; }
  .wl-thumb img{ width: 70px; height: 70px; }
  .wl-name{ font-size: 16px; }
  .wl-mini-cart{ width: 100%; justify-content: center; }

  .ctc-wrap{ width: calc(100% - 18px); }
  .ctc-hotline-badge{ width: 190px; padding: 12px 12px; }
  .ctc-hotline-title{ font-size: 16px; }
  .ctc-hotline-bell{ width: 42px; height: 42px; }

  .ctc-map-iframe{ height: 280px; }



  .cart-actions{ gap:10px; }


}







/* ============ SEARCH MODE: show ONLY grids ============ */
body.js-search-mode .hero-area,
body.js-search-mode .deal-strip,
body.js-search-mode .cat-icons,
body.js-search-mode .promo-two,
body.js-search-mode .cyber-banner,
body.js-search-mode .top-brands,
body.js-search-mode .discount-strip,
body.js-search-mode .site-footer{
  display:none !important;
}

/* inside sections: hide headers/banners/promos, keep ONLY grids */
body.js-search-mode .dotw-section .dotw-head,
body.js-search-mode .dotw-section .dotw-banner{
  display:none !important;
}

body.js-search-mode .topsell .topsell-head,
body.js-search-mode .topsell .topsell-promo{
  display:none !important;
}

body.js-search-mode .trending .trending-head,
body.js-search-mode .trending .trending-banner{
  display:none !important;
}

body.js-search-mode .featured .featured-head,
body.js-search-mode .featured .featured-right{
  display:none !important;
}

/* if you enable reco later */
body.js-search-mode .reco-section .reco-promo{
  display:none !important;
}

/* =========================================================
   FINAL CATEGORY IMAGE FIX - KEEP THIS AT VERY BOTTOM
   Removes gray circle and makes uploaded category image fill
========================================================= */
.cat-icons {
  margin-top: 10px !important;
  padding: 10px 0 14px !important;
  background: #ffffff !important;
}

.cat-icons-row {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(8, 1fr) !important;
  align-items: start !important;
  justify-items: center !important;
  gap: 18px !important;
}

.cat-icon {
  width: 100% !important;
  max-width: 190px !important;
  text-decoration: none !important;
  color: #c31f26 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
}

.cat-icon__circle {
  width: 180px !important;
  height: 180px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  overflow: hidden !important;
}

.cat-icon__circle img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 50% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

.cat-icon__label {
  width: 100% !important;
  color: #000 !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
  word-break: break-word !important;
}

@media (max-width: 1399px) {
  .cat-icons-row {
    grid-template-columns: repeat(8, 1fr) !important;
    gap: 16px !important;
  }

  .cat-icon {
    max-width: 160px !important;
  }

  .cat-icon__circle {
    width: 150px !important;
    height: 150px !important;
  }

  .cat-icon__label {
    font-size: 18px !important;
  }
}

@media (max-width: 1199px) {
  .cat-icons-row {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 18px !important;
  }

  .cat-icon {
    max-width: 150px !important;
  }

  .cat-icon__circle {
    width: 140px !important;
    height: 140px !important;
  }

  .cat-icon__label {
    font-size: 17px !important;
  }
}

@media (max-width: 767px) {
  .cat-icons {
    padding: 8px 0 12px !important;
  }

  .cat-icons-row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
  }

  .cat-icon {
    max-width: 120px !important;
    gap: 6px !important;
  }

  .cat-icon__circle {
    width: 110px !important;
    height: 110px !important;
  }

  .cat-icon__label {
    font-size: 14px !important;
  }
}

@media (max-width: 480px) {
  .cat-icons-row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }

  .cat-icon {
    max-width: 105px !important;
  }

  .cat-icon__circle {
    width: 96px !important;
    height: 96px !important;
  }

  .cat-icon__label {
    font-size: 13px !important;
  }
}

@media (max-width: 360px) {
  .cat-icons-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .cat-icon__circle {
    width: 110px !important;
    height: 110px !important;
  }
}

/* =========================================================
   PRODUCT DETAILS - FIT IMAGE + LENS ZOOM PREVIEW
   Added at bottom. Old styles and logic are unchanged.
========================================================= */
.cdp-gallery {
  width: 100% !important;
}

.cdp-main {
  width: 100% !important;
  height: 520px !important;
  min-height: 520px !important;
  padding: 28px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  cursor: zoom-in !important;
}

.cdp-main img,
#mainProductImage {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  border-radius: 0 !important;
  transform: none !important;
}

.cdp-zoom-lens {
  position: absolute !important;
  width: 190px !important;
  height: 190px !important;
  border: 1px solid rgba(0, 0, 0, 0.35) !important;
  background: rgba(255, 255, 255, 0.35) !important;
  box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.12) !important;
  pointer-events: none !important;
  display: none;
  z-index: 5 !important;
}

.cdp-zoom-result {
  position: fixed !important;
  width: 680px !important;
  height: 560px !important;
  border: 1px solid #d1d5db !important;
  background-color: #ffffff !important;
  background-repeat: no-repeat !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18) !important;
  display: none;
  z-index: 99999 !important;
  pointer-events: none !important;
}

.cdp-thumbs {
  margin-top: 16px !important;
  display: flex !important;
  gap: 12px !important;
  overflow-x: auto !important;
  padding-bottom: 4px !important;
}

.cdp-thumb {
  width: 112px !important;
  height: 112px !important;
  min-width: 112px !important;
  padding: 0 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  background: #fff !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

.cdp-thumb img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  transition: transform 0.25s ease !important;
}

.cdp-thumb:hover img {
  transform: scale(1.08) !important;
}

.cdp-thumb.is-active {
  border-color: #c31f26 !important;
  box-shadow: 0 0 0 3px rgba(195, 31, 38, 0.12) !important;
}

@media (max-width: 991px) {
  .cdp-main {
    height: 460px !important;
    min-height: 460px !important;
    padding: 20px !important;
  }

  .cdp-zoom-lens,
  .cdp-zoom-result {
    display: none !important;
  }
}

@media (max-width: 575px) {
  .cdp-main {
    height: 360px !important;
    min-height: 360px !important;
    padding: 14px !important;
  }

  .cdp-thumb {
    width: 86px !important;
    height: 86px !important;
    min-width: 86px !important;
  }
}


/* =========================================================
   FINAL GLOBAL PRODUCT CARD SPACING FIX
   Added at bottom. Old HTML and JS logic are unchanged.
   This fixes space between image, name, rating, price and button
   for Similar Products and all other product card sections.
========================================================= */

/* ---------- Deal of Week + Similar Products + Item List ---------- */
.dotw-card,
.ilist-card {
  padding: 12px !important;
}

.dotw-img,
.ilist-img {
  height: 180px !important;
  margin: 0 0 8px !important;
  border-radius: 12px !important;
  background: #f3f4f6 !important;
  overflow: hidden !important;
}

.dotw-img img,
.ilist-img img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  padding: 0 !important;
  display: block !important;
}

.dotw-name,
.ilist-name {
  margin: 0 0 6px !important;
  padding: 0 !important;
  min-height: 0 !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}

.dotw-meta,
.ilist-meta {
  margin: 0 0 6px !important;
  padding: 0 !important;
  min-height: 0 !important;
}

.dotw-progress,
.ilist-progress {
  margin: 0 0 6px !important;
}

.dotw-sold,
.ilist-sold {
  margin: 0 0 8px !important;
}

.dotw-price,
.ilist-price {
  margin: 0 0 10px !important;
  padding: 0 !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
}

.dotw-price .old,
.dotw-price .now,
.dotw-price .qty,
.ilist-price .old,
.ilist-price .now,
.ilist-price .qty {
  margin: 0 !important;
  line-height: 1.2 !important;
}

.dotw-btn,
.ilist-btn {
  height: 40px !important;
  min-height: 40px !important;
  margin-top: 0 !important;
  border-radius: 999px !important;
}

/* ---------- Product details related products ---------- */
.cdp-related .dotw-head {
  margin-top: 28px !important;
  margin-bottom: 14px !important;
}

.cdp-related .dotw-grid {
  gap: 14px !important;
}

.cdp-related .dotw-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: auto !important;
}

.cdp-related .dotw-img {
  height: 180px !important;
  margin-bottom: 8px !important;
}

.cdp-related .dotw-name {
  margin-bottom: 6px !important;
}

.cdp-related .dotw-meta {
  margin-bottom: 6px !important;
}

.cdp-related .dotw-price {
  margin-bottom: 10px !important;
}

/* ---------- Top Selling Product Cards ---------- */
.p-card {
  padding: 12px !important;
}

.p-meta {
  gap: 6px !important;
  padding-top: 6px !important;
}

.p-name {
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
}

.p-rating,
.p-vendor,
.p-sold,
.p-price {
  margin: 0 !important;
}

.p-btn {
  margin-top: 8px !important;
  padding: 10px 14px !important;
  min-height: 40px !important;
}

/* ---------- Trending Products ---------- */
.tp-card {
  padding: 12px !important;
}

.tp-media {
  height: 180px !important;
  margin: 0 0 8px !important;
}

.tp-media img {
  max-width: 100% !important;
  max-height: 100% !important;
  padding: 0 !important;
}

.tp-off {
  margin-bottom: 8px !important;
}

.tp-name {
  margin: 0 0 6px !important;
  min-height: 0 !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
}

.tp-rate {
  margin: 0 0 6px !important;
}

.tp-ship {
  margin-bottom: 8px !important;
}

.tp-price {
  margin: 0 0 10px !important;
}

.tp-delivery {
  margin: 0 !important;
}

/* ---------- Featured Products ---------- */
.fcard {
  padding: 12px !important;
}

.frow {
  gap: 10px !important;
}

.fimg {
  height: 110px !important;
}

.fname {
  margin: 0 0 6px !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
}

.frate {
  margin: 0 0 6px !important;
}

.fby {
  margin: 6px 0 8px !important;
}

.fprice {
  margin: 0 0 10px !important;
}

.fbtn {
  height: 38px !important;
}

/* ---------- Recommended Products / Common Cards ---------- */
.reco-card {
  padding: 12px !important;
}

.reco-card .reco-img,
.reco-card .reco-media,
.reco-img,
.reco-media {
  margin-bottom: 8px !important;
}

.reco-card .reco-name,
.reco-name {
  margin: 0 0 6px !important;
  min-height: 0 !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
}

.reco-card .reco-rate,
.reco-rate {
  margin: 0 0 6px !important;
}

.reco-card .reco-price,
.reco-price {
  margin: 0 0 10px !important;
}

.reco-card .reco-btn,
.reco-btn {
  height: 40px !important;
  margin-top: 0 !important;
}

/* ---------- Mobile product card spacing ---------- */
@media (max-width: 768px) {
  .dotw-img,
  .ilist-img,
  .tp-media {
    height: 160px !important;
  }

  .dotw-card,
  .ilist-card,
  .tp-card,
  .p-card,
  .fcard,
  .reco-card {
    padding: 10px !important;
  }

  .dotw-name,
  .ilist-name,
  .tp-name,
  .p-name,
  .fname,
  .reco-name {
    font-size: 15px !important;
  }
}

/* =========================================================
   FINAL BALANCED PRODUCT CARD SPACING FIX
   This override adds comfortable spacing to all product cards.
   Keep this block at the VERY BOTTOM of the CSS file.
========================================================= */

/* ---------- Deal of Week + Similar Products + Item List ---------- */
.dotw-card,
.ilist-card {
  padding: 14px !important;
}

.dotw-img,
.ilist-img {
  height: 190px !important;
  margin: 0 0 14px !important;
}

.dotw-name,
.ilist-name {
  margin: 0 0 10px !important;
  min-height: 0 !important;
  font-size: 17px !important;
  line-height: 1.28 !important;
}

.dotw-meta,
.ilist-meta {
  margin: 0 0 12px !important;
}

.dotw-progress,
.ilist-progress {
  margin: 0 0 10px !important;
}

.dotw-sold,
.ilist-sold {
  margin: 0 0 12px !important;
}

.dotw-price,
.ilist-price {
  margin: 0 0 16px !important;
}

.dotw-btn,
.ilist-btn {
  height: 42px !important;
  margin-top: 0 !important;
}

/* Product details related/similar cards */
.cdp-related .dotw-card {
  padding: 14px !important;
}

.cdp-related .dotw-img {
  height: 190px !important;
  margin-bottom: 14px !important;
}

.cdp-related .dotw-name {
  margin: 0 0 10px !important;
  min-height: 0 !important;
}

.cdp-related .dotw-meta {
  margin-bottom: 12px !important;
}

.cdp-related .dotw-price {
  margin: 0 0 16px !important;
}

.cdp-related .dotw-btn {
  height: 42px !important;
}

/* ---------- Top Selling Product Cards ---------- */
.p-card {
  padding: 14px !important;
}

.p-meta {
  gap: 10px !important;
  padding-top: 10px !important;
}

.p-name {
  margin: 0 0 2px !important;
  font-size: 17px !important;
  line-height: 1.28 !important;
}

.p-rating,
.p-vendor,
.p-sold,
.p-price {
  margin: 0 !important;
}

.p-btn {
  margin-top: 12px !important;
  padding: 11px 14px !important;
  min-height: 42px !important;
}

/* ---------- Trending Products ---------- */
.tp-card {
  padding: 14px !important;
}

.tp-media {
  height: 190px !important;
  margin: 0 0 14px !important;
}

.tp-media img {
  max-width: 100% !important;
  max-height: 100% !important;
  padding: 0 !important;
}

.tp-off {
  margin-bottom: 12px !important;
}

.tp-name {
  margin: 0 0 10px !important;
  min-height: 0 !important;
  font-size: 17px !important;
  line-height: 1.28 !important;
}

.tp-rate {
  margin: 0 0 10px !important;
}

.tp-ship {
  margin-bottom: 12px !important;
}

.tp-price {
  margin: 0 0 16px !important;
}

.tp-delivery {
  margin: 0 !important;
}

/* ---------- Featured Products ---------- */
.fcard {
  padding: 14px !important;
}

.frow {
  gap: 12px !important;
}

.fimg {
  height: 120px !important;
}

.fname {
  margin: 0 0 10px !important;
  font-size: 17px !important;
  line-height: 1.28 !important;
}

.frate {
  margin: 0 0 10px !important;
}

.fby {
  margin: 10px 0 12px !important;
}

.fprice {
  margin: 0 0 14px !important;
}

.fbtn {
  height: 40px !important;
}

/* ---------- Recommended Products / Common Cards ---------- */
.reco-card {
  padding: 14px !important;
}

.reco-card .reco-img,
.reco-card .reco-media,
.reco-img,
.reco-media {
  margin-bottom: 14px !important;
}

.reco-card .reco-name,
.reco-name {
  margin: 0 0 10px !important;
  min-height: 0 !important;
  font-size: 17px !important;
  line-height: 1.28 !important;
}

.reco-card .reco-rate,
.reco-rate {
  margin: 0 0 10px !important;
}

.reco-card .reco-price,
.reco-price {
  margin: 0 0 16px !important;
}

.reco-card .reco-btn,
.reco-btn {
  height: 42px !important;
  margin-top: 0 !important;
}

/* ---------- Mobile balanced spacing ---------- */
@media (max-width: 768px) {
  .dotw-img,
  .ilist-img,
  .tp-media {
    height: 170px !important;
    margin-bottom: 12px !important;
  }

  .dotw-card,
  .ilist-card,
  .tp-card,
  .p-card,
  .fcard,
  .reco-card {
    padding: 12px !important;
  }

  .dotw-name,
  .ilist-name,
  .tp-name,
  .p-name,
  .fname,
  .reco-name {
    font-size: 16px !important;
    margin-bottom: 8px !important;
  }

  .dotw-price,
  .ilist-price,
  .tp-price,
  .reco-price,
  .fprice {
    margin-bottom: 12px !important;
  }
}

/* =========================================================
   FINAL UPDATE - INCREASE PRODUCT IMAGE SPACE
   Applied to all product card image areas only.
   Old HTML/JS logic is unchanged.
========================================================= */

/* Deal of Week + Similar Products + Item List */
.dotw-img,
.ilist-img {
  height: 220px !important;
  margin: 0 0 16px !important;
}

.dotw-img img,
.ilist-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Product details related/similar products */
.cdp-related .dotw-img {
  height: 220px !important;
  margin-bottom: 16px !important;
}

/* Trending Products */
.tp-media {
  height: 220px !important;
  margin: 0 0 16px !important;
}

.tp-media img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  padding: 0 !important;
}

/* Featured Products */
.fimg {
  height: 145px !important;
  margin-bottom: 12px !important;
}

.fimg img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Recommended Products / Common Cards */
.reco-card .reco-img,
.reco-card .reco-media,
.reco-img,
.reco-media {
  min-height: 220px !important;
  height: 220px !important;
  margin-bottom: 16px !important;
}

.reco-card .reco-img img,
.reco-card .reco-media img,
.reco-img img,
.reco-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Top Selling image boxes - support common class names used in cards */
.p-card .p-img,
.p-card .p-media,
.p-img,
.p-media {
  min-height: 220px !important;
  height: 220px !important;
  margin-bottom: 16px !important;
  overflow: hidden !important;
}

.p-card .p-img img,
.p-card .p-media img,
.p-img img,
.p-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Mobile image space */
@media (max-width: 768px) {
  .dotw-img,
  .ilist-img,
  .tp-media,
  .reco-img,
  .reco-media,
  .p-img,
  .p-media {
    height: 190px !important;
    min-height: 190px !important;
    margin-bottom: 14px !important;
  }

  .cdp-related .dotw-img {
    height: 190px !important;
  }

  .fimg {
    height: 130px !important;
  }
}


/* =========================================================
   FORMAL HOME PRODUCT SECTION DESIGNS
   Deal of The Week, Top Selling, Trending, Featured
   Backend variables and .js-add-cart logic are unchanged
========================================================= */
:root {
  --brand-red: #c31f26;
  --brand-red-dark: #8f151a;
  --brand-ink: #111827;
  --brand-muted: #6b7280;
  --brand-line: #e5e7eb;
  --brand-soft: #f8fafc;
  --brand-card: #ffffff;
  --brand-gold: #f59e0b;
  --formal-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
  --formal-shadow-soft: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.home-sec {
  padding: 34px 0;
}

.home-section-head,
.trending-new-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(229, 231, 235, 0.9);
}

.home-section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  color: var(--brand-red);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}

.home-section-kicker::before {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 999px;
  background: var(--brand-red);
}

.home-section-title {
  margin: 0;
  color: var(--brand-ink);
  font-size: 28px;
  line-height: 1.15;
  font-weight: 850;
  letter-spacing: -0.02em;
}

.home-section-view {
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(195, 31, 38, 0.2);
  border-radius: 999px;
  color: var(--brand-red);
  background: #fff;
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: 0.22s ease;
  white-space: nowrap;
}

.home-section-view:hover {
  background: var(--brand-red);
  color: #fff;
  border-color: var(--brand-red);
  text-decoration: none;
}

.home-price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
  margin: 14px 0 18px;
}

.home-price-row.compact {
  margin: 10px 0 0;
}

.home-price-row .old {
  color: #9ca3af;
  text-decoration: line-through;
  font-weight: 650;
  font-size: 14px;
}

.home-price-row .now {
  color: var(--brand-ink);
  font-size: 18px;
  font-weight: 850;
}

.home-price-row .qty {
  color: var(--brand-muted);
  font-size: 13px;
  font-weight: 650;
}

.home-price-row.light .old,
.home-price-row.light .now,
.home-price-row.light .qty {
  color: #fff;
}

.home-price-row.light .old {
  opacity: 0.72;
}

.home-cart-btn {
  width: 100%;
  min-height: 44px;
  border: 1px solid #edf0f5;
  border-radius: 12px;
  background: #f8fafc;
  color: var(--brand-ink);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: 0.22s ease;
}

.home-cart-btn:hover {
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: #fff;
  transform: translateY(-1px);
}

.home-cart-btn.white {
  background: #fff;
  border-color: rgba(255,255,255,0.7);
  color: var(--brand-red);
}

.home-cart-btn.white:hover {
  background: var(--brand-ink);
  border-color: var(--brand-ink);
  color: #fff;
}

/* ================= FORMAL DESIGN 1: DEAL OF THE WEEK ================= */
.deal-week-wrap {
  border: 1px solid rgba(229, 231, 235, 0.95);
  border-radius: 24px;
  background: #fff;
  padding: 24px;
  box-shadow: var(--formal-shadow-soft);
}

.deal-week-hero {
  min-height: 210px;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.92), rgba(128, 20, 25, 0.95)),
    #111827;
  display: grid;
  grid-template-columns: 230px 1fr 250px;
  align-items: center;
  gap: 22px;
  padding: 24px;
  overflow: hidden;
  position: relative;
}

.deal-week-hero::before,
.deal-week-hero::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  pointer-events: none;
}

.deal-week-hero::before {
  width: 280px;
  height: 280px;
  left: -120px;
  top: -100px;
}

.deal-week-hero::after {
  width: 220px;
  height: 220px;
  right: -90px;
  bottom: -110px;
}

.deal-week-hero-img {
  position: relative;
  z-index: 2;
  height: 170px;
  border-radius: 18px;
  background: rgba(255,255,255,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}

.deal-week-hero-img img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.28s ease;
}

.deal-week-hero:hover .deal-week-hero-img img {
  transform: scale(1.04);
}

.deal-week-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
}

.deal-week-label {
  display: inline-flex;
  margin-bottom: 12px;
  padding: 8px 15px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.17);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.deal-week-hero-content h3 {
  margin: 0 0 18px;
  font-size: 30px;
  line-height: 1.18;
  font-weight: 850;
  letter-spacing: -0.02em;
}

.deal-week-hero-content h3 span {
  color: #ffd7d9;
}

.deal-week-timer {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.deal-week-timer div {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.deal-week-timer strong {
  color: #fff;
  font-size: 18px;
  line-height: 1;
  font-weight: 850;
}

.deal-week-timer span {
  color: rgba(255,255,255,0.82);
  font-size: 11px;
  margin-top: 4px;
}

.deal-week-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

.deal-week-card {
  position: relative;
  border: 1px solid #e9edf3;
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
  padding: 14px;
  transition: 0.22s ease;
}

.deal-week-card:hover {
  border-color: rgba(195, 31, 38, 0.34);
  box-shadow: var(--formal-shadow);
  transform: translateY(-3px);
}

.deal-week-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  background: var(--brand-red);
  color: #fff;
  padding: 7px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 850;
  box-shadow: 0 8px 20px rgba(195,31,38,0.25);
}

.deal-week-img {
  height: 220px;
  border-radius: 16px;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid #eef2f7;
}

.deal-week-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.28s ease;
}

.deal-week-card:hover .deal-week-img img {
  transform: scale(1.045);
}

.deal-week-info {
  padding: 16px 2px 2px;
}

.deal-week-info h4 {
  margin: 0 0 12px;
  font-size: 17px;
  line-height: 1.32;
  font-weight: 850;
  min-height: 45px;
}

.deal-week-info h4 a {
  color: var(--brand-ink);
  text-decoration: none;
}

.deal-week-rate,
.top-selling-meta,
.trending-new-rating,
.featured-new-rate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 10px;
}

.deal-week-rate span,
.top-selling-meta span,
.featured-new-rate span {
  color: var(--brand-gold);
  font-weight: 850;
}

.deal-week-rate small,
.top-selling-meta small,
.trending-new-rating small,
.featured-new-rate small {
  color: var(--brand-muted);
}

.deal-week-progress {
  height: 7px;
  border-radius: 999px;
  background: #eef2f7;
  overflow: hidden;
}

.deal-week-progress span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-red), var(--brand-red-dark));
}

.deal-week-sold {
  margin: 10px 0 0;
  color: #4b5563;
  font-size: 13px;
}

/* ================= FORMAL DESIGN 2: TOP SELLING ================= */
.top-selling-wrap {
  border-radius: 24px;
  background: #fff;
  padding: 24px;
  border: 1px solid rgba(229,231,235,0.95);
  box-shadow: var(--formal-shadow-soft);
}

.top-selling-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 20px;
}

.top-selling-main {
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(17,24,39,0.94), rgba(195,31,38,0.92)),
    #111827;
  padding: 26px;
  color: #fff;
  display: flex;
  flex-direction: column;
  min-height: 526px;
  position: relative;
  overflow: hidden;
}

.top-selling-main::after {
  content: "";
  position: absolute;
  width: 270px;
  height: 270px;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  right: -120px;
  top: -90px;
}

.top-selling-rank {
  position: relative;
  z-index: 2;
  width: fit-content;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.15);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.top-selling-main-img {
  position: relative;
  z-index: 2;
  height: 280px;
  margin: 18px 0;
  border-radius: 20px;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}

.top-selling-main-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.top-selling-main h3 {
  position: relative;
  z-index: 2;
  margin: auto 0 8px;
  font-size: 25px;
  line-height: 1.24;
  font-weight: 850;
}

.top-selling-main h3 a {
  color: #fff;
  text-decoration: none;
}

.top-selling-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.top-selling-item {
  position: relative;
  border: 1px solid #e8edf4;
  border-radius: 20px;
  background: #fff;
  padding: 14px;
  display: grid;
  grid-template-columns: 38px 122px 1fr 44px;
  gap: 13px;
  align-items: center;
  transition: 0.22s ease;
}

.top-selling-item:hover {
  border-color: rgba(195,31,38,0.34);
  box-shadow: var(--formal-shadow-soft);
  transform: translateY(-2px);
}

.top-selling-number {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: #fff1f2;
  color: var(--brand-red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 850;
  font-size: 13px;
}

.top-selling-img {
  height: 124px;
  border-radius: 16px;
  background: #f8fafc;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #eef2f7;
}

.top-selling-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.25s ease;
}

.top-selling-item:hover .top-selling-img img {
  transform: scale(1.05);
}

.top-selling-mini {
  color: #0f766e;
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.top-selling-content h4 {
  margin: 7px 0 9px;
  font-size: 16px;
  line-height: 1.32;
  font-weight: 850;
}

.top-selling-content h4 a {
  color: var(--brand-ink);
  text-decoration: none;
}

.top-selling-cart {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 14px;
  background: var(--brand-red);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.22s ease;
}

.top-selling-cart:hover {
  background: var(--brand-ink);
  transform: translateY(-1px);
}

/* ================= FORMAL DESIGN 3: TRENDING ================= */
.trending-new-wrap {
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(229,231,235,0.95);
  padding: 24px;
  box-shadow: var(--formal-shadow-soft);
}

.trending-new-head {
  padding: 20px;
  border-radius: 20px;
  background: linear-gradient(135deg, #fff7f7, #ffffff 66%);
  border: 1px solid #f3e1e2;
  align-items: center;
}

.trending-new-grid {
  display: grid;
  grid-template-columns: 1.2fr repeat(3, 1fr);
  gap: 18px;
}

.trending-new-card {
  position: relative;
  min-height: 404px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid #e8edf4;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: 0.22s ease;
}

.trending-new-card:hover {
  transform: translateY(-3px);
  border-color: rgba(195,31,38,0.34);
  box-shadow: var(--formal-shadow);
}

.trending-new-card-wide {
  background: #111827;
  border-color: #111827;
}

.trending-new-card-wide h4 a,
.trending-new-card-wide .home-price-row .now {
  color: #fff;
}

.trending-new-card-wide .home-price-row .qty {
  color: rgba(255,255,255,0.74);
}

.trending-new-tag {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 2;
  padding: 7px 12px;
  border-radius: 10px;
  background: var(--brand-gold);
  color: #fff;
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.trending-new-img {
  height: 236px;
  margin: 14px 14px 0;
  border-radius: 18px;
  background: #f8fafc;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #eef2f7;
}

.trending-new-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.25s ease;
}

.trending-new-card:hover .trending-new-img img {
  transform: scale(1.055);
}

.trending-new-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.trending-new-body h4 {
  margin: 0 0 11px;
  font-size: 17px;
  line-height: 1.32;
  font-weight: 850;
  min-height: 45px;
}

.trending-new-body h4 a {
  color: var(--brand-ink);
  text-decoration: none;
}

.trending-new-rating span {
  color: var(--brand-gold);
  letter-spacing: 1px;
  font-size: 12px;
}

/* ================= FORMAL DESIGN 4: FEATURED ================= */
.featured-new-wrap {
  border-radius: 24px;
  padding: 24px;
  border: 1px solid rgba(229,231,235,0.95);
  background: #fff;
  box-shadow: var(--formal-shadow-soft);
}

.featured-new-layout {
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}

.featured-new-big {
  min-height: 540px;
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(195,31,38,0.95), rgba(17,24,39,0.94)),
    #c31f26;
  padding: 28px;
  color: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 400px;
}

.featured-new-big::before {
  content: "";
  position: absolute;
  width: 310px;
  height: 310px;
  right: -140px;
  bottom: -135px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
}

.featured-new-label {
  position: relative;
  z-index: 2;
  display: inline-flex;
  width: fit-content;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.13);
  border: 1px solid rgba(255,255,255,0.17);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.featured-new-big h3 {
  position: relative;
  z-index: 2;
  margin: 18px 0 10px;
  font-size: 31px;
  line-height: 1.18;
  font-weight: 850;
  letter-spacing: -0.02em;
}

.featured-new-big h3 a {
  color: #fff;
  text-decoration: none;
}

.featured-new-big-img {
  position: relative;
  z-index: 2;
  margin-top: auto;
  height: 310px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.featured-new-big-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.featured-new-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.featured-new-card {
  border: 1px solid #e8edf4;
  border-radius: 20px;
  background: #fff;
  padding: 14px;
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 15px;
  align-items: center;
  transition: 0.22s ease;
}

.featured-new-card:hover {
  border-color: rgba(195,31,38,0.34);
  box-shadow: var(--formal-shadow-soft);
  transform: translateY(-2px);
}

.featured-new-img {
  height: 150px;
  border-radius: 16px;
  background: #f8fafc;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #eef2f7;
}

.featured-new-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.25s ease;
}

.featured-new-card:hover .featured-new-img img {
  transform: scale(1.055);
}

.featured-new-mini {
  color: var(--brand-red);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.featured-new-info h4 {
  margin: 8px 0 9px;
  font-size: 16px;
  line-height: 1.32;
  font-weight: 850;
}

.featured-new-info h4 a {
  color: var(--brand-ink);
  text-decoration: none;
}

.featured-new-btn {
  width: 100%;
  height: 40px;
  border: 1px solid #edf0f5;
  border-radius: 12px;
  background: #f8fafc;
  color: var(--brand-ink);
  font-weight: 800;
  cursor: pointer;
  transition: 0.22s ease;
}

.featured-new-btn:hover {
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: #fff;
}

/* Hide old same-section classes safely if any duplicate old grid exists in cache */
.dotw-section .home-sec {
  display: block;
}

/* ================= RESPONSIVE FORMAL SECTIONS ================= */
@media (max-width: 1399px) {
  .deal-week-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .trending-new-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .top-selling-layout,
  .featured-new-layout {
    grid-template-columns: 1fr;
  }

  .top-selling-main {
    min-height: auto;
  }

  .featured-new-big {
    min-height: auto;
  }
}

@media (max-width: 991px) {
  .deal-week-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .deal-week-hero-img-right {
    display: none;
  }

  .deal-week-grid,
  .trending-new-grid,
  .top-selling-list,
  .featured-new-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .top-selling-item {
    grid-template-columns: 38px 112px 1fr;
  }

  .top-selling-cart {
    grid-column: 1 / -1;
    width: 100%;
    border-radius: 12px;
  }

  .featured-new-card {
    grid-template-columns: 1fr;
  }

  .featured-new-img {
    height: 220px;
  }
}

@media (max-width: 767px) {
  .home-sec {
    padding: 22px 0;
  }

  .home-section-head,
  .trending-new-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .home-section-title {
    font-size: 23px;
  }

  .deal-week-wrap,
  .top-selling-wrap,
  .trending-new-wrap,
  .featured-new-wrap {
    padding: 15px;
    border-radius: 20px;
  }

  .deal-week-grid,
  .trending-new-grid,
  .top-selling-list,
  .featured-new-grid {
    grid-template-columns: 1fr;
  }

  .top-selling-main-img,
  .featured-new-big-img {
    height: 240px;
  }

  .top-selling-item {
    grid-template-columns: 38px 100px 1fr;
    gap: 10px;
  }

  .deal-week-img,
  .trending-new-img,
  .featured-new-img {
    height: 210px;
  }
}

@media (max-width: 480px) {
  .deal-week-hero-content h3,
  .featured-new-big h3,
  .top-selling-main h3 {
    font-size: 22px;
  }

  .deal-week-timer div {
    width: 54px;
    height: 54px;
  }

  .top-selling-item {
    grid-template-columns: 1fr;
  }

  .top-selling-number {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
  }

  .top-selling-img {
    height: 210px;
  }
}


/* =========================================================
   IMAGE FIT + FEATURED BUTTON POSITION FIX
   Requested: product images fit inside rectangle, and featured
   main Add To Cart button stays below the image.
========================================================= */

/* Top Selling main card: keep the image inside a clean rectangle */
.top-selling-main-img {
  height: 280px;
  border-radius: 20px;
  background: rgba(255,255,255,0.12);
  padding: 0;
  overflow: hidden;
  align-items: stretch;
}

.top-selling-main-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Top Selling small cards: rectangle image fill */
.top-selling-img {
  height: 124px;
  border-radius: 16px;
  overflow: hidden;
  align-items: stretch;
}

.top-selling-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Featured main card: formal layout = text, image, button */
.featured-new-big {
  min-height: 540px;
  display: flex;
  flex-direction: column;
}

.featured-new-big-content {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}

.featured-new-big-img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 310px;
  margin: 18px 0 18px;
  border-radius: 20px;
  background: rgba(255,255,255,0.12);
  overflow: hidden;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.featured-new-big-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.featured-main-cart {
  position: relative;
  z-index: 2;
  margin-top: auto;
  min-height: 46px;
}

/* Featured small cards: keep images in rectangle too */
.featured-new-img {
  height: 150px;
  border-radius: 16px;
  overflow: hidden;
  align-items: stretch;
}

.featured-new-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 767px) {
  .top-selling-main-img,
  .featured-new-big-img {
    height: 240px;
  }
}

@media (max-width: 480px) {
  .top-selling-main-img,
  .featured-new-big-img,
  .top-selling-img,
  .featured-new-img {
    height: 220px;
  }
}


/* =========================================================
   TRENDING PRODUCTS - ONE ROW AUTO SCROLL WITH ARROWS
   This overrides only the trending section layout.
========================================================= */
.trending-new-wrap {
  overflow: hidden;
}

.trending-new-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.trending-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.trending-arrow {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid #f1b8bc;
  background: #fff;
  color: #c31f26;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  transition: 0.25s ease;
}

.trending-arrow:hover {
  background: #c31f26;
  border-color: #c31f26;
  color: #fff;
}

.trending-scroll-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.trending-new-grid.trending-scroll-row {
  display: flex !important;
  grid-template-columns: none !important;
  grid-auto-flow: unset !important;
  gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 2px 2px 10px;
  -webkit-overflow-scrolling: touch;
}

.trending-new-grid.trending-scroll-row::-webkit-scrollbar {
  height: 0;
}

.trending-new-grid.trending-scroll-row {
  scrollbar-width: none;
}

.trending-scroll-row .trending-new-card,
.trending-scroll-row .trending-new-card-wide {
  flex: 0 0 calc((100% - 54px) / 5);
  width: calc((100% - 54px) / 5);
  min-width: 290px;
  max-width: 430px;
  scroll-snap-align: start;
  background: #fff;
  color: #111827;
}

.trending-scroll-row .trending-new-card-wide {
  background: #111827;
  color: #fff;
}

.trending-scroll-row .trending-new-card-wide .trending-new-body h4 a,
.trending-scroll-row .trending-new-card-wide .home-price-row .now {
  color: #fff;
}

.trending-scroll-row .trending-new-card-wide .home-price-row .old,
.trending-scroll-row .trending-new-card-wide .home-price-row .qty,
.trending-scroll-row .trending-new-card-wide .trending-new-rating small {
  color: rgba(255,255,255,0.72);
}

.trending-scroll-row .trending-new-img {
  width: auto;
  height: 235px;
  margin: 14px 14px 0;
  border-radius: 18px;
}

.trending-scroll-row .trending-new-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.trending-scroll-row .trending-new-body {
  min-height: 205px;
}

.trending-scroll-row .home-cart-btn {
  margin-top: auto;
}

@media (max-width: 1199px) {
  .trending-scroll-row .trending-new-card,
  .trending-scroll-row .trending-new-card-wide {
    flex-basis: calc((100% - 36px) / 3);
    width: calc((100% - 36px) / 3);
  }
}

@media (max-width: 991px) {
  .trending-scroll-row .trending-new-card,
  .trending-scroll-row .trending-new-card-wide {
    flex-basis: calc((100% - 18px) / 2);
    width: calc((100% - 18px) / 2);
  }
}

@media (max-width: 767px) {
  .trending-new-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .trending-actions {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }

  .trending-scroll-row .trending-new-card,
  .trending-scroll-row .trending-new-card-wide {
    flex-basis: 82%;
    width: 82%;
    min-width: 260px;
  }

  .trending-scroll-row .trending-new-img {
    height: 210px;
  }
}

@media (max-width: 480px) {
  .trending-actions {
    flex-wrap: wrap;
  }

  .trending-scroll-row .trending-new-card,
  .trending-scroll-row .trending-new-card-wide {
    flex-basis: 88%;
    width: 88%;
    min-width: 245px;
  }
}

/* =========================================================
   TRENDING PRODUCTS - BIGGER IMAGE UPDATE
   Keeps one-row auto scroll and arrows. Only increases the
   product image area and balances the card height.
========================================================= */
.trending-scroll-row .trending-new-card,
.trending-scroll-row .trending-new-card-wide {
  min-height: 500px;
}

.trending-scroll-row .trending-new-img {
  height: 315px;
  margin: 14px 14px 0;
  border-radius: 18px;
  background: #f8fafc;
}

.trending-scroll-row .trending-new-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.trending-scroll-row .trending-new-body {
  min-height: 170px;
  padding: 16px;
}

.trending-scroll-row .trending-new-body h4 {
  min-height: 42px;
  margin-bottom: 10px;
}

.trending-scroll-row .home-price-row {
  margin: 12px 0 14px;
}

@media (max-width: 1199px) {
  .trending-scroll-row .trending-new-img {
    height: 290px;
  }

  .trending-scroll-row .trending-new-card,
  .trending-scroll-row .trending-new-card-wide {
    min-height: 475px;
  }
}

@media (max-width: 991px) {
  .trending-scroll-row .trending-new-img {
    height: 275px;
  }

  .trending-scroll-row .trending-new-card,
  .trending-scroll-row .trending-new-card-wide {
    min-height: 460px;
  }
}

@media (max-width: 767px) {
  .trending-scroll-row .trending-new-img {
    height: 255px;
  }

  .trending-scroll-row .trending-new-card,
  .trending-scroll-row .trending-new-card-wide {
    min-height: 440px;
  }
}

@media (max-width: 480px) {
  .trending-scroll-row .trending-new-img {
    height: 235px;
  }

  .trending-scroll-row .trending-new-card,
  .trending-scroll-row .trending-new-card-wide {
    min-height: 420px;
  }
}


/* =========================================================
   DEAL OF THE WEEK - ONE ROW AUTO SCROLL WITH BIG IMAGES
   Keeps old dealOfWeek variables and js-add-cart logic.
========================================================= */
.deal-week-wrap {
  overflow: hidden;
}

.deal-week-wrap .home-section-head {
  align-items: center;
}

.deal-week-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.deal-week-arrow {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid #f1b8bc;
  background: #fff;
  color: #c31f26;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  transition: 0.25s ease;
}

.deal-week-arrow:hover {
  background: #c31f26;
  border-color: #c31f26;
  color: #fff;
}

.deal-week-scroll-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-top: 20px;
}

.deal-week-grid.deal-week-scroll-row {
  margin-top: 0;
  display: flex !important;
  grid-template-columns: none !important;
  gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 2px 2px 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.deal-week-grid.deal-week-scroll-row::-webkit-scrollbar {
  height: 0;
}

.deal-week-scroll-row .deal-week-card {
  flex: 0 0 calc((100% - 54px) / 5);
  width: calc((100% - 54px) / 5);
  min-width: 320px;
  max-width: 460px;
  min-height: 555px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}

.deal-week-scroll-row .deal-week-img {
  height: 340px;
  margin: 0;
  border-radius: 18px;
  background: #f8fafc;
}

.deal-week-scroll-row .deal-week-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.deal-week-scroll-row .deal-week-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 2px 2px;
}

.deal-week-scroll-row .deal-week-info h4 {
  min-height: 46px;
  margin-bottom: 12px;
}

.deal-week-scroll-row .home-price-row {
  margin: 14px 0 16px;
}

.deal-week-scroll-row .home-cart-btn {
  margin-top: auto;
}

@media (max-width: 1199px) {
  .deal-week-scroll-row .deal-week-card {
    flex-basis: calc((100% - 36px) / 3);
    width: calc((100% - 36px) / 3);
    min-height: 530px;
  }

  .deal-week-scroll-row .deal-week-img {
    height: 315px;
  }
}

@media (max-width: 991px) {
  .deal-week-scroll-row .deal-week-card {
    flex-basis: calc((100% - 18px) / 2);
    width: calc((100% - 18px) / 2);
    min-height: 510px;
  }

  .deal-week-scroll-row .deal-week-img {
    height: 295px;
  }
}

@media (max-width: 767px) {
  .deal-week-wrap .home-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .deal-week-actions {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }

  .deal-week-scroll-row .deal-week-card {
    flex-basis: 82%;
    width: 82%;
    min-width: 270px;
    min-height: 485px;
  }

  .deal-week-scroll-row .deal-week-img {
    height: 270px;
  }
}

@media (max-width: 480px) {
  .deal-week-actions {
    flex-wrap: wrap;
  }

  .deal-week-scroll-row .deal-week-card {
    flex-basis: 88%;
    width: 88%;
    min-width: 250px;
    min-height: 460px;
  }

  .deal-week-scroll-row .deal-week-img {
    height: 245px;
  }
}

/* =========================================================
   UPDATED LATEST DEAL ROW - ATTRACTIVE RECTANGLE IMAGE DESIGN
   Added at end to override old deal-strip styles only
========================================================= */
.deal-strip {
  margin-top: 18px;
  padding: 16px 0 34px;
}

.deal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.deal-card {
  position: relative;
  min-height: 178px;
  padding: 24px;
  border-radius: 22px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 178px;
  gap: 20px;
  align-items: center;
  border: 1px solid rgba(195, 31, 38, 0.08);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.deal-card:hover {
  transform: translateY(-4px);
  border-color: rgba(195, 31, 38, 0.20);
  box-shadow: 0 22px 46px rgba(15, 23, 42, 0.10);
}

.deal-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.9;
  pointer-events: none;
}

.deal-card::after {
  content: "";
  position: absolute;
  right: -58px;
  top: -62px;
  width: 230px;
  height: 230px;
  border-radius: 999px;
  transform: none;
  opacity: 0.55;
  background: rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

.deal-card--gray {
  background: linear-gradient(135deg, #f7fbf7 0%, #eef8ef 100%);
}

.deal-card--blue {
  background: linear-gradient(135deg, #eef4fb 0%, #dbe5f1 100%);
}

.deal-card--purple {
  background: linear-gradient(135deg, #f5f2fb 0%, #e7e4ef 100%);
}

.deal-info {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.deal-tag {
  width: fit-content;
  margin-bottom: 12px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(195, 31, 38, 0.08);
  color: #c31f26;
  font-size: 13px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.deal-strong,
.deal-price {
  color: #c31f26;
}

.deal-title {
  max-width: 330px;
  margin: 0 0 16px;
  color: #111827;
  font-size: 24px;
  line-height: 1.18;
  font-weight: 850;
  letter-spacing: -0.02em;
}

.deal-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding-bottom: 3px;
  color: #111827;
  font-size: 16px;
  font-weight: 850;
  text-decoration: none;
  border-bottom: 2px solid rgba(17, 24, 39, 0.35);
  transition: color 0.22s ease, border-color 0.22s ease;
}

.deal-link:hover {
  color: #c31f26;
  border-bottom-color: #c31f26;
}

.deal-link .plus,
.plus {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(195, 31, 38, 0.10);
  color: #c31f26;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}

.deal-media {
  position: relative;
  z-index: 2;
  width: 178px;
  height: 132px;
  padding: 8px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 14px 28px rgba(15, 23, 42, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.deal-media img {
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 12px;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.32s ease;
}

.deal-card:hover .deal-media img {
  transform: scale(1.07);
}

@media (max-width: 1199px) {
  .deal-grid {
    grid-template-columns: 1fr;
  }

  .deal-card {
    grid-template-columns: minmax(0, 1fr) 220px;
  }

  .deal-media {
    width: 220px;
    height: 145px;
  }
}

@media (max-width: 767px) {
  .deal-grid {
    gap: 14px;
  }

  .deal-card {
    grid-template-columns: 1fr;
    padding: 18px;
    min-height: auto;
  }

  .deal-title {
    max-width: none;
    font-size: 21px;
  }

  .deal-media {
    width: 100%;
    height: 220px;
    order: -1;
  }
}

@media (max-width: 480px) {
  .deal-card {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .deal-media {
    width: 100%;
    height: 190px;
  }

  .deal-media img {
    width: 100%;
    height: 100%;
  }
}

/* =========================================================
   LESS BORDER / SHADOW / CORNERS UPDATE
   Applies to: Deal of The Week, Top Selling Products,
   Trending Products, Featured Products
   Old HTML logic and .js-add-cart logic unchanged
========================================================= */

/* Section outer boxes: cleaner and flatter */
.deal-week-wrap,
.top-selling-wrap,
.trending-new-wrap,
.featured-new-wrap {
  border-radius: 10px !important;
  border: 1px solid #edf0f3 !important;
  box-shadow: none !important;
  background: #ffffff !important;
}

/* Section headers */
.section-head,
.trending-new-head {
  border-radius: 8px !important;
  box-shadow: none !important;
}

.trending-new-head {
  background: #ffffff !important;
  border: 1px solid #f1f2f4 !important;
}

.section-view {
  border-radius: 8px !important;
  box-shadow: none !important;
}

/* Deal of the week banner */
.deal-week-hero {
  border-radius: 10px !important;
  box-shadow: none !important;
}

.deal-week-hero-img,
.deal-week-hero-img-right {
  border-radius: 8px !important;
  box-shadow: none !important;
}

.deal-week-hero-img img,
.deal-week-hero-img-right img {
  border-radius: 0 !important;
}

.deal-week-label,
.deal-week-timer div {
  border-radius: 8px !important;
  box-shadow: none !important;
}

/* Deal product cards */
.deal-week-card,
.deal-card,
.dotw-card {
  border-radius: 10px !important;
  box-shadow: none !important;
}

.deal-week-card:hover,
.deal-card:hover,
.dotw-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06) !important;
}

.deal-week-img,
.deal-media,
.dotw-img {
  border-radius: 8px !important;
  box-shadow: none !important;
}

.deal-week-badge,
.dotw-badge {
  border-radius: 6px !important;
  box-shadow: none !important;
}

.deal-week-progress,
.deal-week-progress span,
.dotw-progress,
.dotw-progress-bar {
  border-radius: 4px !important;
}

/* Top selling section */
.top-selling-main,
.top-selling-item {
  border-radius: 10px !important;
  box-shadow: none !important;
}

.top-selling-item:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06) !important;
}

.top-selling-rank,
.top-selling-number,
.top-selling-cart {
  border-radius: 8px !important;
  box-shadow: none !important;
}

.top-selling-main-img,
.top-selling-img {
  border-radius: 8px !important;
  box-shadow: none !important;
}

.top-selling-main-img img,
.top-selling-img img {
  border-radius: 0 !important;
}

/* Trending one-row scroller */
.trending-scroll-shell,
.trending-new-card,
.trending-new-card-wide {
  border-radius: 10px !important;
  box-shadow: none !important;
}

.trending-new-card:hover,
.trending-new-card-wide:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06) !important;
}

.trending-new-img {
  border-radius: 8px !important;
  box-shadow: none !important;
}

.trending-new-img img {
  border-radius: 0 !important;
}

.trending-new-tag {
  border-radius: 6px !important;
  box-shadow: none !important;
}

.trending-scroll-arrow,
.deal-scroll-arrow {
  border-radius: 8px !important;
  box-shadow: none !important;
}

/* Featured section */
.featured-new-big,
.featured-new-card {
  border-radius: 10px !important;
  box-shadow: none !important;
}

.featured-new-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06) !important;
}

.featured-new-label,
.featured-new-mini {
  border-radius: 6px !important;
  box-shadow: none !important;
}

.featured-new-big-img,
.featured-new-img {
  border-radius: 8px !important;
  box-shadow: none !important;
}

.featured-new-big-img img,
.featured-new-img img {
  border-radius: 0 !important;
}

.featured-new-btn,
.product-cart-btn,
.fbtn,
.p-btn {
  border-radius: 8px !important;
  box-shadow: none !important;
}

/* General product image boxes inside these sections */
.deal-week-sec img,
.top-selling-sec img,
.trending-new-sec img,
.featured-new-sec img {
  box-shadow: none !important;
}

/* Reduce very round mobile corners too */
@media (max-width: 767px) {
  .deal-week-wrap,
  .top-selling-wrap,
  .trending-new-wrap,
  .featured-new-wrap,
  .deal-week-hero,
  .top-selling-main,
  .trending-new-card,
  .featured-new-big,
  .featured-new-card {
    border-radius: 8px !important;
  }
}


/* =========================================================
   FORMAL TYPOGRAPHY REFINEMENT
   - Cleaner font family
   - More professional weights
   - Better line-height and spacing
   - Less heavy headings/buttons
   - Keeps all old logic/classes unchanged
========================================================= */
:root {
  --formal-font: "Manrope", "Inter", Arial, sans-serif;
  --formal-heading: #0f172a;
  --formal-text: #1f2937;
  --formal-muted: #64748b;
  --formal-brand: #c31f26;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--formal-font) !important;
  font-size: 15px;
  line-height: 1.55;
  color: var(--formal-text);
  letter-spacing: -0.01em;
}

button,
input,
select,
textarea,
a {
  font-family: var(--formal-font) !important;
}

a {
  text-underline-offset: 3px;
}

/* Main section headings */
.section-title,
.dotw-title,
.topsell-title,
.trending-title,
.featured-title,
.reco-title,
.trending-new-head .section-title,
.deal-week-wrap .section-title,
.top-selling-wrap .section-title,
.featured-new-wrap .section-title {
  color: var(--formal-heading) !important;
  font-size: clamp(22px, 1.7vw, 30px) !important;
  font-weight: 700 !important;
  line-height: 1.22 !important;
  letter-spacing: -0.035em !important;
}

.section-kicker,
.deal-week-label,
.top-selling-rank,
.featured-new-label,
.top-selling-mini,
.featured-new-mini,
.trending-new-tag,
.deal-week-badge,
.dotw-badge,
.p-badge,
.tp-tag,
.f-badge {
  font-family: var(--formal-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.055em !important;
  text-transform: uppercase !important;
}

.section-view,
.dotw-all,
.topsell-view,
.featured-view,
.reco-view {
  color: var(--formal-brand) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* Product names */
.deal-title,
.deal-week-info h4,
.top-selling-main h3,
.top-selling-content h4,
.trending-new-body h4,
.featured-new-big h3,
.featured-new-info h4,
.dotw-name,
.p-name,
.tp-name,
.fname,
.reco-name,
.ilist-name {
  font-family: var(--formal-font) !important;
  color: var(--formal-heading) !important;
  font-weight: 650 !important;
  line-height: 1.32 !important;
  letter-spacing: -0.025em !important;
}

.top-selling-main h3 a,
.featured-new-big h3 a,
.trending-new-card-wide h4 a {
  color: #ffffff !important;
}

.deal-week-info h4,
.top-selling-content h4,
.trending-new-body h4,
.featured-new-info h4 {
  font-size: 16px !important;
}

.deal-title {
  font-size: 21px !important;
}

.top-selling-main h3,
.featured-new-big h3 {
  font-size: clamp(24px, 2vw, 32px) !important;
  font-weight: 700 !important;
}

/* Banner typography */
.deal-week-hero-content h3,
.dotw-banner-title,
.banner-text,
.promo-title,
.fpromo-title,
.reco-promo__title {
  font-family: var(--formal-font) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.035em !important;
  text-shadow: none !important;
}

.deal-week-hero-content h3,
.dotw-banner-title {
  font-size: clamp(24px, 2vw, 34px) !important;
}

/* Meta, rating, sold, vendor */
.deal-week-rate,
.deal-week-sold,
.top-selling-meta,
.trending-new-rating,
.featured-new-rate,
.dotw-meta,
.dotw-sold,
.p-rating,
.p-vendor,
.p-sold,
.tp-rate,
.tp-ship,
.tp-delivery,
.frate,
.fby {
  font-family: var(--formal-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--formal-muted) !important;
  letter-spacing: -0.005em !important;
}

/* Prices */
.product-price-row,
.dotw-price,
.p-price,
.tp-price,
.fprice,
.reco-price,
.ilist-price {
  font-family: var(--formal-font) !important;
  letter-spacing: -0.02em !important;
}

.product-price-row .old,
.dotw-price .old,
.p-old,
.tp-price .old,
.fold,
.reco-old,
.ilist-price .old {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
}

.product-price-row .now,
.dotw-price .now,
.p-new,
.tp-price .now,
.fnew,
.reco-new,
.ilist-price .now {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--formal-heading) !important;
}

.product-price-row .qty,
.dotw-price .qty,
.p-unit,
.tp-price .qty,
.fqty,
.reco-unit,
.ilist-price .qty {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--formal-muted) !important;
}

.product-price-row.light .old,
.product-price-row.light .now,
.product-price-row.light .qty,
.top-selling-main .product-price-row .old,
.top-selling-main .product-price-row .now,
.top-selling-main .product-price-row .qty,
.featured-new-big .product-price-row .old,
.featured-new-big .product-price-row .now,
.featured-new-big .product-price-row .qty {
  color: #ffffff !important;
}

/* Buttons */
.product-cart-btn,
.featured-new-btn,
.top-selling-cart,
.dotw-btn,
.p-btn,
.fbtn,
.reco-btn,
.ilist-btn,
.deal-link,
.promo-btn,
.fpromo-btn,
.discount-code {
  font-family: var(--formal-font) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  letter-spacing: -0.01em !important;
  text-shadow: none !important;
}

/* Header and search area */
.header-top,
.header-middle,
.search-wrap,
.category-btn,
.common-input,
.icon-link,
.dd-btn,
.top-link {
  font-family: var(--formal-font) !important;
}

.top-label,
.icon-link,
.category-btn {
  font-weight: 600 !important;
}

/* Softer formal card text */
.deal-week-card,
.top-selling-item,
.trending-new-card,
.featured-new-card,
.dotw-card,
.p-card,
.tp-card,
.fcard,
.reco-card,
.ilist-card {
  color: var(--formal-text);
}

/* Make product images and cards feel clean without heavy style */
.deal-week-card:hover,
.top-selling-item:hover,
.trending-new-card:hover,
.featured-new-card:hover,
.dotw-card:hover,
.p-card:hover,
.tp-card:hover,
.fcard:hover,
.reco-card:hover,
.ilist-card:hover {
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06) !important;
}

/* Mobile typography */
@media (max-width: 767px) {
  body {
    font-size: 14px;
  }

  .section-title,
  .dotw-title,
  .topsell-title,
  .trending-title,
  .featured-title {
    font-size: 22px !important;
  }

  .deal-week-hero-content h3,
  .dotw-banner-title,
  .featured-new-big h3,
  .top-selling-main h3 {
    font-size: 22px !important;
  }
}

/* =========================================================
   SMALLER / CLEANER RECTANGLES FOR LATEST DEAL STRIP
   - reduced rectangle border radius
   - reduced thick borders/shadows
   - cleaner image rectangle
========================================================= */
.deal-strip {
  padding: 12px 0 28px !important;
}

.deal-grid {
  gap: 14px !important;
}

.deal-card {
  min-height: 150px !important;
  padding: 18px 20px !important;
  border-radius: 8px !important;
  grid-template-columns: minmax(0, 1fr) 150px !important;
  gap: 18px !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: none !important;
}

.deal-card:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(195, 31, 38, 0.22) !important;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.045) !important;
}

.deal-card::after {
  right: -78px !important;
  top: -84px !important;
  width: 190px !important;
  height: 190px !important;
  opacity: 0.38 !important;
}

.deal-tag {
  margin-bottom: 10px !important;
  padding: 6px 11px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.deal-title {
  margin-bottom: 14px !important;
  font-size: 20px !important;
  line-height: 1.22 !important;
  font-weight: 750 !important;
  letter-spacing: -0.01em !important;
}

.deal-link {
  min-height: 30px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-bottom-width: 1px !important;
}

.deal-link .plus,
.plus {
  width: 19px !important;
  height: 19px !important;
  border-radius: 5px !important;
  font-size: 13px !important;
}

.deal-media {
  width: 150px !important;
  height: 112px !important;
  padding: 0 !important;
  border-radius: 7px !important;
  background: #fff !important;
  border: 1px solid #eef2f7 !important;
  box-shadow: none !important;
}

.deal-media img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 6px !important;
  object-fit: cover !important;
  object-position: center !important;
}

@media (max-width: 1199px) {
  .deal-card {
    grid-template-columns: minmax(0, 1fr) 160px !important;
  }

  .deal-media {
    width: 160px !important;
    height: 118px !important;
  }
}

@media (max-width: 767px) {
  .deal-card {
    grid-template-columns: 1fr !important;
    padding: 16px !important;
  }

  .deal-media {
    width: 100% !important;
    height: 180px !important;
  }
}


/* ===== FEATURED BUTTON / PRICE SPACING FIX ===== */
.featured-new-info .home-price-row,
.featured-new-info .product-price-row,
.featured-new-info .product-price-row.compact,
.featured-new-info .home-price-row.compact {
  margin-bottom: 16px !important;
}

.featured-new-btn {
  margin-top: 8px;
}

.featured-main-cart {
  margin-top: 14px;
}


/* =========================================================
   DYNAMIC DEAL COUNTDOWN + BANNER IMAGE FIT
========================================================= */

.deal-week-hero {
  border-radius: 12px !important;
}

.deal-week-hero-img,
.deal-week-hero-img-right {
  border-radius: 8px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.12);
  padding: 0 !important;
}

.deal-week-hero-img img,
.deal-week-hero-img-right img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
  padding: 0 !important;
  display: block !important;
  transition: transform 0.25s ease;
}

.deal-week-hero:hover .deal-week-hero-img img,
.deal-week-hero:hover .deal-week-hero-img-right img {
  transform: scale(1.035);
}

.deal-week-timer {
  margin-top: 14px;
}

.deal-week-timebox,
.deal-week-timer > div {
  border-radius: 8px !important;
}

.deal-expire-text {
  margin-top: 12px;
  color: rgba(255,255,255,0.82);
  font-size: 13px;
  font-weight: 500;
}

.deal-expire-text span {
  color: #fff;
  font-weight: 700;
}

.js-deal-countdown.is-expired .deal-week-timebox,
.js-deal-countdown.is-expired > div {
  opacity: 0.75;
}




/* =========================================================
   FLOATING WHATSAPP CONTACT BUTTON - CENTERED ICON FIX
========================================================= */
.floating-whatsapp {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #16b816;
  color: #ffffff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px rgba(22, 184, 22, 0.24);
  border: 5px solid #ffffff;
  transition: width 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  overflow: visible;
}

.floating-whatsapp::before {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  background: rgba(22, 184, 22, 0.14);
  z-index: -1;
  animation: whatsappPulse 1.9s ease-in-out infinite;
}

.floating-whatsapp-icon {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  position: relative;
  z-index: 2;
}

.floating-whatsapp-icon svg {
  width: 34px;
  height: 34px;
  display: block;
  fill: #ffffff;
}

.floating-whatsapp-text {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  margin-left: 0;
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
  transition: max-width 0.25s ease, opacity 0.25s ease, margin-left 0.25s ease;
}

.floating-whatsapp:hover {
  width: 168px;
  border-radius: 999px;
  background: #129c12;
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(22, 184, 22, 0.32);
}

.floating-whatsapp:hover .floating-whatsapp-text {
  max-width: 92px;
  opacity: 1;
  margin-left: 9px;
}

@keyframes whatsappPulse {
  0% {
    transform: scale(0.92);
    opacity: 0.72;
  }
  70% {
    transform: scale(1.22);
    opacity: 0;
  }
  100% {
    transform: scale(1.22);
    opacity: 0;
  }
}

@media (max-width: 767px) {
  .floating-whatsapp {
    right: 16px;
    bottom: 18px;
    width: 58px;
    height: 58px;
    border-width: 4px;
  }

  .floating-whatsapp-icon,
  .floating-whatsapp-icon svg {
    width: 31px;
    height: 31px;
    min-width: 31px;
    min-height: 31px;
  }

  .floating-whatsapp:hover {
    width: 58px;
    border-radius: 50%;
  }

  .floating-whatsapp:hover .floating-whatsapp-text {
    max-width: 0;
    opacity: 0;
    margin-left: 0;
  }
}


/* =========================================================
   PRODUCT COLLECTION PAGE - LEFT SIDEBAR FILTER
   Put this at the bottom of your main CSS file.
========================================================= */
.product-ad-area {
  padding: 16px 0 8px;
}

.product-ad-slider {
  position: relative;
  height: 520px;
  border-radius: 22px;
  overflow: hidden;
  background: #fff7e8;
  border: 1px solid #f1f1f1;
}

.product-ad-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.02);
  transition: opacity .65s ease, visibility .65s ease, transform 1.1s ease;
}

.product-ad-slide.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  z-index: 2;
}

.product-ad-link {
  display: block;
  width: 100%;
  height: 100%;
}

.product-ad-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.product-ad-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: #111827;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(15,23,42,.16);
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-ad-arrow i {
  font-size: 22px;
}

.product-ad-prev {
  left: 18px;
}

.product-ad-next {
  right: 18px;
}

.product-ad-dots {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.product-ad-dot {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.8);
  cursor: pointer;
  transition: .25s ease;
}

.product-ad-dot.active {
  width: 28px;
  background: #c31f26;
}

.plist {
  padding: 28px 0 18px;
}

.plist-layout {
  display: grid;
  grid-template-columns: 275px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.plist-sidebar-filter {
  position: sticky;
  top: calc(var(--topbar-h, 48px) + 24px);
  align-self: start;
  z-index: 20;
}

.plist-sidebar-card {
  border: 1px solid #e8ebf0;
  border-radius: 18px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.plist-sidebar-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid #eef0f4;
}

.plist-sidebar-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(195, 31, 38, 0.1);
  color: #c31f26;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.plist-sidebar-icon i {
  font-size: 21px;
}

.plist-sidebar-title {
  margin: 0;
  color: #111827;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 800;
}

.plist-main-content {
  min-width: 0;
}

.plist-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.plist-kicker {
  display: inline-block;
  color: #c31f26;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.plist-title {
  margin: 0;
  color: #111827;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: -0.02em;
}

.plist-count {
  min-width: 140px;
  min-height: 58px;
  border: 1px solid #eceff3;
  border-radius: 16px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.plist-count strong {
  color: #c31f26;
  font-size: 22px;
  line-height: 1;
}

.plist-count span {
  color: #6b7280;
  font-size: 13px;
  margin-top: 4px;
}

.plist-filter {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
}

.plist-filter-sidebar .plist-filter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 13px;
  align-items: stretch;
}

.plist-price-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.plist-field label {
  display: block;
  color: #374151;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 7px;
}

.plist-field input,
.plist-field select {
  width: 100%;
  height: 44px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  outline: none;
  padding: 0 13px;
  color: #111827;
  background: #fff;
  font-size: 14px;
}

.plist-field input:focus,
.plist-field select:focus {
  border-color: #c31f26;
  box-shadow: 0 0 0 3px rgba(195,31,38,.08);
}

.plist-filter-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 4px;
}

.plist-filter-btn,
.plist-reset-btn {
  min-height: 44px;
  border-radius: 12px;
  padding: 0 16px;
  border: 0;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

.plist-filter-btn {
  background: #c31f26;
  color: #fff;
  cursor: pointer;
}

.plist-filter-btn:hover {
  background: #a9151c;
}

.plist-reset-btn {
  background: #f3f4f6;
  color: #111827;
  border: 1px solid #e5e7eb;
}

.plist-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.plist-card {
  position: relative;
  border: 1px solid #e8ebf0;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  transition: .25s ease;
}

.plist-card:hover {
  border-color: #fdcf00;
  box-shadow: 0 14px 34px rgba(15,23,42,.08);
  transform: translateY(-2px);
}

.plist-badge {
  position: absolute;
  z-index: 3;
  top: 12px;
  left: 12px;
  padding: 7px 11px;
  color: #fff;
  border-radius: 12px 0 12px 0;
  font-size: 12px;
  font-weight: 800;
}

.plist-badge-sale,
.plist-badge-featured {
  background: #ef4444;
}

.plist-badge-trending {
  background: #10b981;
}

.plist-badge-new {
  background: #f59e0b;
}

.plist-img {
  width: 100%;
  height: 210px;
  display: block;
  overflow: hidden;
  background: #f3f4f6;
}

.plist-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .25s ease;
}

.plist-card:hover .plist-img img {
  transform: scale(1.05);
}

.plist-body {
  padding: 16px;
}

.plist-name {
  margin: 0 0 24px;
  min-height: 42px;
  color: #111827;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 750;
}

.plist-name a {
  color: inherit;
  text-decoration: none;
}

.plist-name a:hover {
  color: #c31f26;
}

.plist-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  color: #6b7280;
  font-size: 12px;
}

.plist-meta span {
  color: #111827;
  font-weight: 750;
}

.plist-meta b {
  color: #f59e0b;
}

.plist-progress {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
  margin-bottom: 10px;
}

.plist-progress span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #fdcf00;
}

.plist-sold {
  color: #374151;
  font-size: 14px;
  margin-bottom: 14px;
}

.plist-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 18px;
}

.plist-price .old {
  color: #9ca3af;
  text-decoration: line-through;
  font-weight: 700;
}

.plist-price .now {
  color: #111827;
  font-size: 20px;
  font-weight: 850;
}

.plist-price .qty {
  color: #6b7280;
  font-size: 14px;
  font-weight: 700;
}

.plist-cart-btn {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: #f3f4f6;
  color: #111827;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: .22s ease;
}

.plist-cart-btn:hover {
  background: #c31f26;
  color: #fff;
}

.plist-empty {
  grid-column: 1 / -1;
  min-height: 260px;
  border: 1px dashed #d1d5db;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  color: #6b7280;
  background: #fff;
}

.plist-empty i {
  color: #c31f26;
  font-size: 42px;
  margin-bottom: 10px;
}

.plist-empty h3 {
  color: #111827;
  margin: 0 0 6px;
}

/* Make the reused home sections align nicely under the product list */
.deal-week-sec,
.top-selling-sec,
.trending-new-sec,
.featured-new-sec {
  padding-top: 22px;
}

@media (max-width: 1399px) {
  .plist-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1199px) {
  .plist-layout {
    grid-template-columns: 1fr;
  }

  .plist-sidebar-filter {
    position: static;
  }

  .plist-filter-sidebar .plist-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
  }

  .plist-price-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plist-filter-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-self: end;
  }
}

@media (max-width: 991px) {
  .product-ad-slider {
    height: 330px;
    border-radius: 18px;
  }

  .plist-filter-sidebar .plist-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plist-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  .product-ad-slider {
    height: 220px;
  }

  .plist-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .plist-count {
    width: 100%;
  }

  .plist-filter-sidebar .plist-filter-grid,
  .plist-price-fields,
  .plist-filter-actions,
  .plist-grid {
    grid-template-columns: 1fr;
  }

  .plist-img {
    height: 230px;
  }
}

/* =========================================================
   ITEM LIST PAGE - FORMAL LEFT FILTER + SEARCHABLE DROPDOWNS
   Added for Product Collection page. Keeps existing logic/classes.
========================================================= */
.plist-page-with-sidebar {
  padding: 24px 0 34px;
  background:
    radial-gradient(900px 420px at 4% 8%, rgba(195, 31, 38, 0.045), transparent 58%),
    linear-gradient(180deg, #ffffff 0%, #fbfbfc 100%);
}

.plist-layout {
  grid-template-columns: 286px minmax(0, 1fr);
  gap: 26px;
}

.plist-sidebar-filter {
  top: calc(var(--topbar-h, 48px) + 18px);
}

.plist-sidebar-card {
  position: relative;
  overflow: visible;
  border: 1px solid #e8ebf0;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 72%, #fffafa 100%);
  padding: 16px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.07);
}

.plist-sidebar-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, #c31f26, #fdcf00);
}

.plist-sidebar-title-row {
  padding: 7px 0 16px;
  margin-bottom: 15px;
  border-bottom: 1px solid #edf0f4;
}

.plist-sidebar-icon {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(195, 31, 38, 0.12), rgba(195, 31, 38, 0.06));
  box-shadow: inset 0 0 0 1px rgba(195, 31, 38, 0.08);
}

.plist-sidebar-title {
  font-size: 18px;
  letter-spacing: -0.015em;
}

.plist-filter-sidebar .plist-filter-grid {
  gap: 15px;
}

.plist-field label {
  color: #344054;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.plist-field input,
.plist-field select,
.plist-search-select-btn {
  height: 46px;
  border: 1px solid #dfe4ea;
  border-radius: 13px;
  background: #fff;
  color: #111827;
  font-size: 14px;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}

.plist-field input:hover,
.plist-field select:hover,
.plist-search-select-btn:hover {
  border-color: #cbd5e1;
}

.plist-field input:focus,
.plist-field select:focus,
.plist-search-select.is-open .plist-search-select-btn {
  border-color: #c31f26;
  box-shadow: 0 0 0 4px rgba(195, 31, 38, 0.08);
}

.plist-price-fields {
  gap: 11px;
}

.plist-filter-btn,
.plist-reset-btn {
  min-height: 46px;
  border-radius: 13px;
  font-weight: 850;
}

.plist-filter-btn {
  background: linear-gradient(135deg, #c31f26 0%, #ad171d 100%);
  box-shadow: 0 10px 22px rgba(195, 31, 38, 0.2);
}

.plist-filter-btn:hover {
  background: linear-gradient(135deg, #ad171d 0%, #921015 100%);
  transform: translateY(-1px);
}

.plist-reset-btn {
  background: #f7f8fa;
  color: #111827;
}

.plist-reset-btn:hover {
  background: #eef1f5;
}

/* Searchable dropdown */
.plist-search-select {
  position: relative;
  width: 100%;
  z-index: 30;
}

.plist-search-select.is-open {
  z-index: 80;
}

.plist-search-select-btn {
  width: 100%;
  padding: 0 13px 0 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  outline: none;
}

.plist-search-select-btn span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plist-search-select-btn i {
  color: #667085;
  font-size: 16px;
  transition: transform 0.22s ease;
  flex: 0 0 auto;
}

.plist-search-select.is-open .plist-search-select-btn i {
  transform: rotate(180deg);
  color: #c31f26;
}

.plist-search-select-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  display: none;
  border: 1px solid #e3e7ee;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
  padding: 10px;
  z-index: 90;
}

.plist-search-select.is-open .plist-search-select-menu {
  display: block;
  animation: plistDropdownIn 0.16s ease both;
}

@keyframes plistDropdownIn {
  from {
    opacity: 0;
    transform: translateY(-5px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.plist-search-select-search {
  position: relative;
  margin-bottom: 8px;
}

.plist-search-select-search i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #98a2b3;
  font-size: 16px;
  pointer-events: none;
}

.plist-search-select-search input {
  width: 100%;
  height: 40px;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  outline: none;
  padding: 0 12px 0 36px;
  color: #111827;
  font-size: 13px;
  background: #f9fafb;
}

.plist-search-select-search input:focus {
  background: #fff;
  border-color: #c31f26;
  box-shadow: 0 0 0 3px rgba(195, 31, 38, 0.08);
}

.plist-search-select-options {
  max-height: 218px;
  overflow-y: auto;
  padding-right: 2px;
}

.plist-search-select-options::-webkit-scrollbar {
  width: 6px;
}

.plist-search-select-options::-webkit-scrollbar-thumb {
  background: #d0d5dd;
  border-radius: 999px;
}

.plist-search-select-option {
  width: 100%;
  min-height: 39px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #344054;
  cursor: pointer;
  padding: 9px 11px;
  font-size: 14px;
  font-weight: 650;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.plist-search-select-option:hover {
  background: #fff3f4;
  color: #c31f26;
}

.plist-search-select-option.active {
  background: #c31f26;
  color: #fff;
}

.plist-search-select-option.active::after {
  content: "✓";
  font-size: 13px;
  font-weight: 900;
}

.plist-search-select-option[hidden] {
  display: none !important;
}

/* Product collection header and cards polish */
.plist-head {
  margin-bottom: 22px;
}

.plist-title {
  font-size: 31px;
  letter-spacing: -0.03em;
}

.plist-count {
  min-width: 142px;
  min-height: 58px;
  border-radius: 17px;
  background: linear-gradient(180deg, #fff 0%, #fffafa 100%);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.plist-grid {
  gap: 18px;
}

.plist-card {
  border-color: #e3e8ef;
  border-radius: 16px;
  box-shadow: 0 7px 20px rgba(15, 23, 42, 0.035);
}

.plist-card:hover {
  border-color: #c31f26;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.1);
}

.plist-img {
  height: 212px;
  background: #f5f6f8;
}

.plist-body {
  padding: 17px 16px 16px;
}

.plist-name {
  font-size: 18px;
  margin-bottom: 26px;
}

.plist-price .now {
  color: #0b1220;
}

.plist-cart-btn {
  background: #f2f4f7;
}

/* Home section polish while reusing the shared home section classes */
.deal-week-wrap,
.top-selling-wrap,
.trending-new-wrap,
.featured-new-wrap {
  border-color: #e4e7ec;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.045);
}

.deal-week-sec,
.top-selling-sec,
.trending-new-sec,
.featured-new-sec {
  padding-top: 24px;
}

.home-section-title {
  letter-spacing: -0.025em;
}

.home-section-kicker {
  color: #c31f26;
}

.home-section-view {
  background: #fff4f5;
  color: #c31f26;
  padding: 11px 16px;
  border-radius: 999px;
  text-decoration: none;
}

.home-section-view:hover {
  background: #c31f26;
  color: #fff;
  text-decoration: none;
}

@media (max-width: 1199px) {
  .plist-layout {
    grid-template-columns: 1fr;
  }

  .plist-sidebar-card {
    position: relative;
  }

  .plist-filter-sidebar .plist-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
  }

  .plist-search-select-menu {
    z-index: 100;
  }
}

@media (max-width: 991px) {
  .plist-filter-sidebar .plist-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  .plist-page-with-sidebar {
    padding-top: 16px;
  }

  .plist-sidebar-card {
    padding: 14px;
    border-radius: 16px;
  }

  .plist-filter-sidebar .plist-filter-grid,
  .plist-price-fields,
  .plist-filter-actions {
    grid-template-columns: 1fr;
  }

  .plist-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .plist-count {
    width: 100%;
  }

  .plist-search-select-menu {
    position: fixed;
    left: 16px;
    right: 16px;
    top: auto;
    max-width: none;
  }
}

/* =========================================================
   FINAL PRODUCT CARD SPACING FIX
   Keeps old HTML/JS logic unchanged. Only improves spacing.
========================================================= */
.plist-grid {
  align-items: stretch;
}

.plist-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.plist-img {
  height: 205px;
  margin: 0;
  border-radius: 0;
  background: #f4f5f7;
}

.plist-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.plist-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 16px 15px;
}

.plist-name {
  margin: 0 0 14px !important;
  min-height: 46px;
  font-size: 18px;
  line-height: 1.22;
  font-weight: 800;
  color: #071122;
}

.plist-meta {
  margin: 0 0 9px;
  min-height: 18px;
}

.plist-progress {
  height: 4px;
  margin: 0 0 11px;
}

.plist-sold {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.25;
}

.plist-price {
  margin: 0 0 17px;
  min-height: 26px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 8px;
  row-gap: 4px;
}

.plist-price .old {
  font-size: 17px;
  line-height: 1;
}

.plist-price .now {
  font-size: 22px;
  line-height: 1;
  font-weight: 850;
}

.plist-price .qty {
  font-size: 14px;
  line-height: 1;
}

.plist-cart-btn {
  margin-top: auto;
  min-height: 45px;
  height: 45px;
}

/* Keep all home product cards balanced too */
.deal-week-card,
.trending-new-card,
.featured-new-card,
.top-selling-item,
.plist-mini-card {
  height: 100%;
}

.deal-week-info,
.trending-new-body,
.featured-new-info,
.plist-mini-body {
  display: flex;
  flex-direction: column;
}

.deal-week-info h4,
.trending-new-body h4,
.featured-new-info h4,
.plist-mini-body h4,
.top-selling-content h4 {
  margin-top: 0;
  margin-bottom: 12px;
  line-height: 1.24;
}

.deal-week-rate,
.trending-new-rating,
.featured-new-rate,
.top-selling-meta,
.plist-mini-card .plist-meta {
  margin-bottom: 9px;
}

.deal-week-sold {
  margin: 0 0 13px;
}

.home-price-row,
.plist-mini-card .plist-price {
  margin-top: 0;
  margin-bottom: 15px;
  align-items: baseline;
}

.deal-week-info .home-cart-btn,
.trending-new-body .home-cart-btn,
.featured-new-info .featured-new-btn,
.plist-mini-body .plist-cart-btn {
  margin-top: auto;
}

/* Responsive spacing */
@media (max-width: 1199px) {
  .plist-img {
    height: 195px;
  }

  .plist-name {
    min-height: 44px;
  }
}

@media (max-width: 767px) {
  .plist-body {
    padding: 14px;
  }

  .plist-img {
    height: 190px;
  }

  .plist-name {
    margin-bottom: 12px !important;
    min-height: auto;
    font-size: 17px;
  }

  .plist-price .now {
    font-size: 20px;
  }
}

/* =========================================================
   FINAL DEAL + TRENDING CARD SPACING FIX
   Applies to BOTH:
   1) Product list page formal sections
   2) Home page original sections
   CSS only. No HTML/JS/business logic changed.
========================================================= */

/* ---------- PRODUCT LIST PAGE: Deal of The Week cards ---------- */
.deal-week-grid,
.deal-week-scroll-row {
  align-items: stretch !important;
}

.deal-week-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 14px !important;
}

.deal-week-img {
  flex: 0 0 auto !important;
  height: 218px !important;
  margin: 0 !important;
  background: #f5f6f8 !important;
}

.deal-week-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.deal-week-info {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 15px 2px 2px !important;
}

.deal-week-info h4 {
  margin: 0 0 12px !important;
  min-height: 44px !important;
  font-size: 17px !important;
  line-height: 1.28 !important;
  font-weight: 800 !important;
}

.deal-week-rate {
  margin: 0 0 9px !important;
  min-height: 18px !important;
}

.deal-week-progress {
  height: 5px !important;
  margin: 0 0 11px !important;
}

.deal-week-sold {
  margin: 0 0 13px !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
}

.deal-week-info .home-price-row {
  margin: 0 0 16px !important;
  min-height: 26px !important;
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  column-gap: 8px !important;
  row-gap: 4px !important;
}

.deal-week-info .home-cart-btn {
  margin-top: auto !important;
  min-height: 44px !important;
}

/* ---------- PRODUCT LIST PAGE: Trending cards ---------- */
.trending-new-grid,
.trending-scroll-row {
  align-items: stretch !important;
}

.trending-new-card,
.trending-scroll-row .trending-new-card,
.trending-scroll-row .trending-new-card-wide {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
}

.trending-new-img {
  flex: 0 0 auto !important;
  height: 220px !important;
  margin: 14px 14px 0 !important;
  background: #f5f6f8 !important;
}

.trending-new-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.trending-new-body {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 15px 16px 16px !important;
}

.trending-new-body h4 {
  margin: 0 0 12px !important;
  min-height: 44px !important;
  font-size: 17px !important;
  line-height: 1.28 !important;
  font-weight: 800 !important;
}

.trending-new-rating {
  margin: 0 0 12px !important;
  min-height: 18px !important;
}

.trending-new-body .home-price-row {
  margin: 0 0 16px !important;
  min-height: 26px !important;
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  column-gap: 8px !important;
  row-gap: 4px !important;
}

.trending-new-body .home-cart-btn {
  margin-top: auto !important;
  min-height: 44px !important;
}

/* ---------- HOME PAGE: Original Deal of The Week cards ---------- */
.dotw-grid {
  align-items: stretch !important;
}

.dotw-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 14px !important;
}

.dotw-img {
  flex: 0 0 auto !important;
  width: 100% !important;
  height: 205px !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  background: #f5f6f8 !important;
  overflow: hidden !important;
}

.dotw-img img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  padding: 0 !important;
  transform: none !important;
}

.dotw-card:hover .dotw-img img {
  transform: scale(1.04) !important;
}

.dotw-name,
.dotw-card-title {
  margin: 0 0 12px !important;
  min-height: 44px !important;
  font-size: 17px !important;
  line-height: 1.28 !important;
  font-weight: 750 !important;
  color: #111827 !important;
}

.dotw-meta {
  margin: 0 0 9px !important;
  min-height: 18px !important;
}

.dotw-progress,
.dotw-bar {
  height: 5px !important;
  margin: 0 0 11px !important;
}

.dotw-sold {
  margin: 0 0 13px !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
}

.dotw-price {
  margin: 0 0 16px !important;
  min-height: 26px !important;
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  column-gap: 8px !important;
  row-gap: 4px !important;
}

.dotw-price .old,
.dotw-price del {
  font-size: 16px !important;
  line-height: 1 !important;
}

.dotw-price .now,
.dotw-price strong {
  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

.dotw-price .qty,
.dotw-price span {
  line-height: 1 !important;
}

.dotw-btn {
  margin-top: auto !important;
  min-height: 44px !important;
}

/* ---------- HOME PAGE: Original Trending Products cards ---------- */
.trending-grid {
  align-items: stretch !important;
}

.tp-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 14px !important;
}

.tp-media {
  flex: 0 0 auto !important;
  width: 100% !important;
  height: 205px !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  background: #f5f6f8 !important;
  overflow: hidden !important;
}

.tp-media img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  padding: 0 !important;
  transform: none !important;
}

.tp-media:hover img,
.tp-card:hover .tp-media img {
  transform: scale(1.04) !important;
}

.tp-off {
  margin: 0 0 12px !important;
  min-height: 31px !important;
}

.tp-name {
  margin: 0 0 12px !important;
  min-height: 44px !important;
  font-size: 17px !important;
  line-height: 1.28 !important;
  font-weight: 750 !important;
}

.tp-rate {
  margin: 0 0 9px !important;
  min-height: 18px !important;
}

.tp-ship {
  margin: 0 0 12px !important;
}

.tp-price {
  margin: 0 0 16px !important;
  min-height: 26px !important;
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  column-gap: 8px !important;
  row-gap: 4px !important;
}

.tp-price .old,
.p-old,
.fold {
  font-size: 16px !important;
  line-height: 1 !important;
}

.tp-price .now,
.p-new,
.fnew {
  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

.tp-price .qty,
.p-unit,
.fqty {
  line-height: 1 !important;
}

.tp-delivery {
  margin-top: auto !important;
  padding-top: 6px !important;
  line-height: 1.35 !important;
}

/* ---------- Shared home buttons/cards: keep button aligned at bottom ---------- */
.p-card,
.fcard,
.plist-mini-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.p-meta,
.plist-mini-body {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}

.p-btn,
.fbtn,
.plist-mini-body .plist-cart-btn {
  margin-top: auto !important;
}

/* ---------- Responsive consistency for Deal + Trending cards ---------- */
@media (max-width: 1399px) {
  .deal-week-img,
  .trending-new-img {
    height: 205px !important;
  }

  .dotw-img,
  .tp-media {
    height: 195px !important;
  }
}

@media (max-width: 991px) {
  .deal-week-img,
  .trending-new-img,
  .dotw-img,
  .tp-media {
    height: 190px !important;
  }

  .deal-week-info h4,
  .trending-new-body h4,
  .dotw-name,
  .dotw-card-title,
  .tp-name {
    min-height: auto !important;
  }
}

@media (max-width: 575px) {
  .deal-week-card,
  .trending-new-card,
  .dotw-card,
  .tp-card {
    padding: 12px !important;
  }

  .deal-week-img,
  .trending-new-img,
  .dotw-img,
  .tp-media {
    height: 180px !important;
  }

  .deal-week-info,
  .trending-new-body {
    padding: 13px 2px 2px !important;
  }

  .trending-new-body {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .dotw-price .now,
  .dotw-price strong,
  .tp-price .now,
  .p-new,
  .fnew {
    font-size: 19px !important;
  }
}

/* =========================================================
   PRODUCT DETAILS - SIMILAR PRODUCTS ONE ROW
   Keep old product logic. Only changes Similar Products layout.
========================================================= */
.cdp-similar-section {
  margin-top: 42px;
  border: 1px solid #e6e8ee;
  border-radius: 18px;
  background: #ffffff;
  padding: 18px;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.04);
}

.cdp-similar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 2px 16px;
  border-bottom: 1px solid #f0f2f5;
  margin-bottom: 18px;
}

.cdp-similar-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #c31f26;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.cdp-similar-title {
  margin: 0;
  color: #0f172a;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 800;
}

.cdp-similar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

.cdp-similar-arrow {
  width: 38px;
  height: 38px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #ffffff;
  color: #0f172a;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.22s ease;
}

.cdp-similar-arrow i {
  font-size: 18px;
  line-height: 1;
}

.cdp-similar-arrow:hover {
  background: #c31f26;
  border-color: #c31f26;
  color: #ffffff;
  transform: translateY(-1px);
}

.cdp-similar-view {
  min-height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  background: rgba(195, 31, 38, 0.08);
  color: #c31f26;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.22s ease, color 0.22s ease;
}

.cdp-similar-view:hover {
  background: #c31f26;
  color: #ffffff;
}

.cdp-similar-row-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.cdp-similar-row {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 2px 2px 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cdp-similar-row::-webkit-scrollbar {
  display: none;
}

.cdp-similar-card {
  flex: 0 0 260px;
  scroll-snap-align: start;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid #e6e8ee;
  background: #ffffff;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.cdp-similar-card:hover {
  border-color: #fdcf00;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}

.cdp-similar-img {
  width: 100%;
  height: 200px;
  margin: 0 0 14px;
  padding: 0;
  border-radius: 13px;
  background: #f3f4f6;
  overflow: hidden;
  display: block;
}

.cdp-similar-img img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  display: block;
  object-fit: cover;
  object-position: center;
  padding: 0;
  transform: scale(1);
  transition: transform 0.24s ease;
}

.cdp-similar-card:hover .cdp-similar-img img {
  transform: scale(1.04);
}

.cdp-similar-name {
  margin: 0 0 14px;
  min-height: 46px;
  color: #0f172a;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 800;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cdp-similar-link {
  color: inherit;
  text-decoration: none;
}

.cdp-similar-link:hover {
  color: #c31f26;
}

.cdp-similar-meta {
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 4px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #64748b;
  font-size: 12px;
}

.cdp-similar-meta .dotw-rate {
  color: #0f172a;
  font-weight: 800;
}

.cdp-similar-meta .star {
  color: #f59e0b;
}

.cdp-similar-price {
  margin: auto 0 18px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.cdp-similar-price .old {
  color: #9ca3af;
  text-decoration: line-through;
  font-weight: 700;
}

.cdp-similar-price .now {
  color: #0f172a;
  font-size: 20px;
  font-weight: 900;
}

.cdp-similar-price .qty {
  color: #64748b;
  font-size: 14px;
  font-weight: 800;
}

.cdp-similar-btn {
  width: 100%;
  height: 46px;
  margin-top: 0;
  border: 0;
  border-radius: 999px;
  background: #f3f4f6;
  color: #0f172a;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background 0.22s ease, color 0.22s ease;
}

.cdp-similar-btn:hover {
  background: #c31f26;
  color: #ffffff;
}

@media (max-width: 1199px) {
  .cdp-similar-card {
    flex-basis: 240px;
  }
}

@media (max-width: 767px) {
  .cdp-similar-section {
    padding: 14px;
    border-radius: 16px;
  }

  .cdp-similar-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .cdp-similar-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .cdp-similar-card {
    flex-basis: 230px;
    min-height: 435px;
  }

  .cdp-similar-img {
    height: 178px;
  }

  .cdp-similar-title {
    font-size: 22px;
  }
}

/* =========================================================
   FORMAL TYPOGRAPHY FINAL OVERRIDE
   Added only at the end to keep old CSS logic unchanged.
   This reduces overly bold fonts and makes text more formal.
========================================================= */

:root {
  --site-font: "Manrope", "Inter", Arial, sans-serif;
  --site-heading-color: #0f172a;
  --site-body-color: #1f2937;
  --site-muted-color: #64748b;
  --site-brand-color: #c31f26;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--site-font) !important;
  font-weight: 400 !important;
  color: var(--site-body-color) !important;
  line-height: 1.55 !important;
  letter-spacing: -0.01em;
}

body,
button,
input,
select,
textarea,
a,
span,
p,
li,
label,
small,
strong {
  font-family: var(--site-font) !important;
}

/* Normal readable text */
p,
li,
span,
label,
small,
.footer-desc,
.footer-muted,
.footer-links a,
.footer-contact,
.p-vendor,
.p-rev,
.tp-delivery,
.reco-delivery,
.cat-info ul li,
.dotw-sold,
.ilist-sold,
.product-desc,
.cdp-similar-delivery {
  font-weight: 400 !important;
}

/* Main section headings - formal, clean, not extra bold */
.section-title,
.dotw-title,
.topsell-title,
.trending-title,
.featured-title,
.reco-title,
.top-brands-title,
.footer-title,
.cat-info h4,
.cdp-similar-title,
.deal-week-wrap .section-title,
.top-selling-wrap .section-title,
.trending-new-head .section-title,
.featured-new-wrap .section-title {
  font-family: var(--site-font) !important;
  color: var(--site-heading-color) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
}

/* Hero and large banners */
.hero-title,
.cyber-center h2,
.footer-cta__title,
.banner-text,
.dotw-banner-title,
.fpromo-title,
.reco-promo__title,
.promo-title,
.promo-sub {
  font-family: var(--site-font) !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.2 !important;
}

/* Product/card names - softer and professional */
.dotw-name,
.ilist-name,
.p-name,
.tp-name,
.fname,
.reco-name,
.deal-title,
.deal-week-info h4,
.top-selling-main h3,
.top-selling-content h4,
.trending-new-body h4,
.featured-new-big h3,
.featured-new-info h4,
.product-title,
.cdp-similar-name {
  font-family: var(--site-font) !important;
  color: var(--site-heading-color) !important;
  font-weight: 500 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.35 !important;
}

/* Links and view buttons */
.section-view,
.dotw-all,
.topsell-view,
.featured-view,
.reco-view,
.cat-link,
.top-link,
.deal-link {
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
}

/* Buttons - medium weight instead of heavy bold */
button,
.hero-btn,
.dotw-btn,
.ilist-btn,
.p-btn,
.promo-btn,
.fbtn,
.fpromo-btn,
.discount-code,
.cyber-btn,
.footer-cta__form button,
.store-btn,
.tab-pill,
.icon-link,
.product-cart-btn,
.featured-new-btn,
.top-selling-cart,
.cdp-similar-btn,
.search-btn {
  font-family: var(--site-font) !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  text-shadow: none !important;
}

/* Header/search text */
.header-top,
.header-middle,
.search-wrap,
.category-btn,
.common-input,
.dd-btn,
.top-label,
.category-menu li,
.category-search input {
  font-family: var(--site-font) !important;
  font-weight: 400 !important;
  letter-spacing: -0.005em !important;
}

.top-label,
.category-btn,
.icon-link {
  font-weight: 500 !important;
}

/* Badges and small labels - readable but not too bold */
.dotw-badge,
.p-badge,
.tp-tag,
.f-badge,
.reco-badge,
.tp-off,
.tp-ship,
.fpromo-off,
.section-kicker,
.deal-tag,
.promo-tag,
.featured-new-label,
.featured-new-mini,
.top-selling-mini,
.top-selling-rank,
.deal-week-label,
.deal-week-badge,
.trending-new-tag {
  font-family: var(--site-font) !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  text-shadow: none !important;
}

/* Ratings and small metadata */
.dotw-meta,
.ilist-meta,
.p-rating,
.tp-rate,
.frate,
.reco-rating,
.cdp-similar-rating {
  font-weight: 400 !important;
  color: var(--site-muted-color) !important;
}

.dotw-rate,
.tp-rate .rate,
.tp-rate .count,
.p-sold strong,
.time strong,
.dotw-pill strong {
  font-weight: 500 !important;
}

/* Prices - visible, but not overly bold */
.dotw-price strong,
.dotw-price .now,
.ilist-price .now,
.p-new,
.tp-price .now,
.fnew,
.reco-price .new,
.reco-new,
.product-price-row .now,
.cdp-similar-price .now {
  font-family: var(--site-font) !important;
  font-weight: 600 !important;
  color: var(--site-heading-color) !important;
  letter-spacing: -0.01em !important;
}

.dotw-price del,
.dotw-price .old,
.ilist-price .old,
.p-old,
.tp-price .old,
.fold,
.reco-price .old,
.reco-old,
.product-price-row .old,
.cdp-similar-price .old {
  font-weight: 400 !important;
  color: #94a3b8 !important;
}

.dotw-price .qty,
.ilist-price .qty,
.p-unit,
.tp-price .qty,
.fqty,
.reco-price .qty,
.reco-unit,
.product-price-row .qty,
.cdp-similar-price .qty {
  font-weight: 400 !important;
  color: var(--site-muted-color) !important;
}

/* Footer typography */
.footer-title,
.ff-text h4 {
  font-weight: 600 !important;
}

.footer-copy,
.footer-copy span,
.footer-links a,
.footer-contact a {
  font-weight: 400 !important;
}

/* Inputs and dropdowns */
input,
select,
textarea {
  font-weight: 400 !important;
}

input::placeholder,
textarea::placeholder {
  font-weight: 400 !important;
  color: #9ca3af !important;
}

/* Keep white text on colored cards */
.top-selling-main h3,
.top-selling-main h3 a,
.featured-new-big h3,
.featured-new-big h3 a,
.trending-new-card-wide h4,
.trending-new-card-wide h4 a,
.product-price-row.light .old,
.product-price-row.light .now,
.product-price-row.light .qty,
.top-selling-main .product-price-row .old,
.top-selling-main .product-price-row .now,
.top-selling-main .product-price-row .qty,
.featured-new-big .product-price-row .old,
.featured-new-big .product-price-row .now,
.featured-new-big .product-price-row .qty {
  color: #ffffff !important;
}

/* Mobile typography */
@media (max-width: 767px) {
  body {
    font-size: 14px !important;
  }

  .section-title,
  .dotw-title,
  .topsell-title,
  .trending-title,
  .featured-title,
  .reco-title,
  .top-brands-title,
  .cdp-similar-title {
    font-weight: 600 !important;
    letter-spacing: -0.015em !important;
  }

  .dotw-name,
  .ilist-name,
  .p-name,
  .tp-name,
  .fname,
  .reco-name,
  .cdp-similar-name {
    font-weight: 500 !important;
  }
}


/* =========================================================
   PRODUCT COLLECTION / ALL PRODUCTS - FORMAL TYPOGRAPHY FIX
   Added only to typography. No layout, logic, route, or JS behavior changed.
========================================================= */
.plist,
.plist * {
  font-family: var(--site-font, "Inter", "Manrope", Arial, sans-serif) !important;
  text-shadow: none !important;
}

/* Page heading: Product Collection */
.plist-title,
.plist-title strong,
.plist-page-title,
.product-collection-title,
.collection-title {
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  color: var(--site-heading-color, #111827) !important;
}

/* Kicker / small heading above Product Collection */
.plist-kicker,
.product-collection-kicker,
.collection-kicker {
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  color: #c31f26 !important;
}

/* All Products count box */
.plist-count,
.plist-count span,
.plist-count strong,
.all-products,
.all-products-title,
.all-products-count {
  font-family: var(--site-font, "Inter", "Manrope", Arial, sans-serif) !important;
  letter-spacing: -0.01em !important;
}

.plist-count strong,
.all-products strong,
.all-products-count strong {
  font-weight: 600 !important;
  color: var(--site-heading-color, #111827) !important;
}

.plist-count span,
.all-products span,
.all-products-title {
  font-weight: 400 !important;
  color: var(--site-muted-color, #64748b) !important;
}

/* Product Collection filter typography */
.plist-sidebar-title,
.plist-filter-title,
.plist-field label,
.plist-search-select-btn,
.plist-search-select-btn span,
.plist-search-select-option,
.plist-filter-btn,
.plist-reset-btn {
  font-family: var(--site-font, "Inter", "Manrope", Arial, sans-serif) !important;
  text-shadow: none !important;
}

.plist-sidebar-title,
.plist-filter-title {
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
}

.plist-field label {
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
}

.plist-field input,
.plist-field select,
.plist-search-select-btn,
.plist-search-select-search input {
  font-weight: 400 !important;
  letter-spacing: -0.005em !important;
}

.plist-search-select-option {
  font-weight: 400 !important;
  letter-spacing: -0.005em !important;
}

.plist-search-select-option.active {
  font-weight: 500 !important;
}

.plist-filter-btn,
.plist-reset-btn {
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
}

/* Product Collection cards */
.plist-name,
.plist-name a {
  font-weight: 500 !important;
  letter-spacing: -0.012em !important;
  line-height: 1.35 !important;
  color: var(--site-heading-color, #111827) !important;
}

.plist-meta,
.plist-meta span,
.plist-sold {
  font-weight: 400 !important;
  color: var(--site-muted-color, #64748b) !important;
}

.plist-meta b {
  font-weight: 500 !important;
  color: #374151 !important;
}

.plist-price .now {
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--site-heading-color, #111827) !important;
}

.plist-price .old,
.plist-price .qty {
  font-weight: 400 !important;
}

.plist-badge,
.plist-badge-sale,
.plist-badge-featured,
.plist-badge-trending,
.plist-badge-new {
  font-weight: 500 !important;
  letter-spacing: 0.005em !important;
}

.plist-cart-btn {
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
}

/* Empty state on All Products */
.plist-empty h3 {
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
}

.plist-empty p,
.plist-empty span {
  font-weight: 400 !important;
  color: var(--site-muted-color, #64748b) !important;
}

@media (max-width: 767px) {
  .plist-title,
  .plist-page-title,
  .product-collection-title,
  .collection-title {
    font-weight: 600 !important;
    letter-spacing: -0.018em !important;
  }

  .plist-name,
  .plist-name a {
    font-weight: 500 !important;
  }
}

/* =========================================================
   GLOBAL PRICE FONT UPDATE
   Old logic unchanged: typography only
========================================================= */

/* All old price values */
.dotw-price del,
.dotw-price .old,
.ilist-price .old,
.ilist-old,
.p-old,
.tp-price .old,
.fold,
.reco-price .old,
.plist-price .old,
.home-price-row .old,
.lxcmp3__old,
.cdp-price del,
.cart-price del,
.wl-price del,
.product-old-price,
.old-price,
.price-old,
del.old,
.old {
  font-size: 14px !important;
  font-weight: 650 !important;
  line-height: 1.25 !important;
}

/* All new/current price values */
.dotw-price strong,
.dotw-price .now,
.ilist-price .now,
.ilist-price strong,
.ilist-new,
.p-new,
.tp-price .now,
.fnew,
.reco-price .new,
.plist-price .now,
.home-price-row .now,
.lxcmp3__price .now,
.cdp-price strong,
.cart-price strong,
.wl-price strong,
.product-new-price,
.new-price,
.price-new,
.now,
.new {
  font-size: 18px !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
}

/* =========================================================
   PRICE TYPOGRAPHY UPDATE - OLD 14/500, NEW 18/700
   Applied globally without changing old logic/layout
========================================================= */

/* Old price / before price */
.dotw-price del,
.dotw-price .old,
.p-old,
.tp-price .old,
.fold,
.reco-price .old,
.ilist-price del,
.ilist-price .old,
.product-price del,
.product-price .old,
.price-old,
.old-price,
.was-price,
.compare-price,
.compare-at-price,
.pc-old-price,
.collection-old-price,
.all-products-old-price,
.card-old-price,
.item-old-price,
.products-old-price,
.product-card .old,
.product-card del,
.product-card .old-price,
.product-card .price-old,
.ilist-card .old,
.ilist-card del,
.dotw-card .old,
.dotw-card del,
.tp-card .old,
.tp-card del,
.p-card .old,
.p-card del,
.fcard .old,
.fcard del,
.reco-card .old,
.reco-card del {
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* New price / current price */
.dotw-price strong,
.dotw-price .now,
.p-new,
.tp-price .now,
.fnew,
.reco-price .new,
.ilist-price strong,
.ilist-price .now,
.product-price strong,
.product-price .now,
.price-new,
.new-price,
.current-price,
.sale-price,
.pc-new-price,
.collection-new-price,
.all-products-new-price,
.card-new-price,
.item-new-price,
.products-new-price,
.product-card .now,
.product-card strong,
.product-card .new-price,
.product-card .price-new,
.ilist-card .now,
.ilist-card strong,
.dotw-card .now,
.dotw-card strong,
.tp-card .now,
.tp-card strong,
.p-card .now,
.p-card strong,
.fcard .now,
.fcard strong,
.reco-card .new,
.reco-card strong {
  font-size: 18px !important;
  font-weight: 700 !important;
}

/* =========================================================
   FINAL GLOBAL PRICE FONT FIX
   Old logic unchanged. This only overrides typography.
   Applies to Product Collection, All Products, Home cards,
   Deal of The Week, Top Selling, Trending, Featured,
   Recommended, Wishlist, Cart, and Product Details prices.
========================================================= */

/* OLD / crossed price everywhere */
.dotw-price del,
.dotw-price .old,
.ilist-price del,
.ilist-price .old,
.p-price del,
.p-price .old,
.p-old,
.tp-price del,
.tp-price .old,
.fprice del,
.fprice .old,
.fold,
.reco-price del,
.reco-price .old,
.reco-old,
.home-price-row del,
.home-price-row .old,
.product-price-row del,
.product-price-row .old,
.plist-price del,
.plist-price .old,
.product-price del,
.product-price .old,
.cdp-price del,
.cdp-priceRow del,
.cart-price del,
.wl-price del,
.lxcmp3__old,
.price-old,
.old-price,
.was-price,
.compare-price,
.compare-at-price,
.pc-old-price,
.collection-old-price,
.all-products-old-price,
.card-old-price,
.item-old-price,
.products-old-price,
.product-card del,
.product-card .old,
.product-card .old-price,
.product-card .price-old,
.ilist-card del,
.ilist-card .old,
.dotw-card del,
.dotw-card .old,
.tp-card del,
.tp-card .old,
.p-card del,
.p-card .old,
.fcard del,
.fcard .old,
.reco-card del,
.reco-card .old,
[class*="price"] del,
[class*="price"] .old {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
}

/* NEW / current price everywhere */
.dotw-price strong,
.dotw-price .now,
.dotw-price .new,
.ilist-price strong,
.ilist-price .now,
.ilist-price .new,
.p-price strong,
.p-price .now,
.p-price .new,
.p-new,
.tp-price strong,
.tp-price .now,
.tp-price .new,
.fprice strong,
.fprice .now,
.fprice .new,
.fnew,
.reco-price strong,
.reco-price .now,
.reco-price .new,
.reco-new,
.home-price-row strong,
.home-price-row .now,
.home-price-row .new,
.product-price-row strong,
.product-price-row .now,
.product-price-row .new,
.plist-price strong,
.plist-price .now,
.plist-price .new,
.product-price strong,
.product-price .now,
.product-price .new,
.cdp-price strong,
.cdp-priceRow strong,
.cart-price,
.wl-price,
.price-new,
.new-price,
.current-price,
.sale-price,
.pc-new-price,
.collection-new-price,
.all-products-new-price,
.card-new-price,
.item-new-price,
.products-new-price,
.product-card strong,
.product-card .now,
.product-card .new,
.product-card .new-price,
.product-card .price-new,
.ilist-card strong,
.ilist-card .now,
.ilist-card .new,
.dotw-card strong,
.dotw-card .now,
.dotw-card .new,
.tp-card strong,
.tp-card .now,
.tp-card .new,
.p-card strong,
.p-card .now,
.p-card .new,
.fcard strong,
.fcard .now,
.fcard .new,
.reco-card strong,
.reco-card .now,
.reco-card .new,
[class*="price"] strong,
[class*="price"] .now,
[class*="price"] .new {
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

/* Quantity/unit text stays smaller and readable */
.dotw-price .qty,
.ilist-price .qty,
.p-price .qty,
.p-unit,
.tp-price .qty,
.fprice .qty,
.fqty,
.reco-price .qty,
.home-price-row .qty,
.product-price-row .qty,
.plist-price .qty,
.product-price .qty,
[class*="price"] .qty,
[class*="price"] .unit {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
}

/* =========================================================
   PRODUCT DETAILS PRICE FIX
   Old logic unchanged: only restore CDP price typography
   Requested: do not apply global old/new price sizes to .cdp-price
========================================================= */

.cdp-price strong {
  font-size: 34px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  margin-right: 10px !important;
}

.cdp-price del {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: #94a3b8 !important;
}


/* Product details old price size fix */
.cdp-price del {
  font-size: 20px !important;
  font-weight: 600 !important;
}

/* =========================================================
   FINAL FOOTER PAYMENT ICONS - BETTER DISPLAY
   Only changes payment icon visual size/box. No HTML/JS logic changed.
========================================================= */
.footer-app .footer-pay {
  margin-top: 16px !important;
  width: 100% !important;
  max-width: 260px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 5px 12px !important;
  border: 1px solid #edf0f4 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.footer-app .footer-pay img {
  width: 100% !important;
  max-width: 220px !important;
  height: auto !important;
  max-height: 28px !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  opacity: 1 !important;
  transform: scale(1.48) !important;
  transform-origin: center center !important;
}

@media (max-width: 575px) {
  .footer-app .footer-pay {
    max-width: 255px !important;
    height: 42px !important;
    min-height: 42px !important;
  }

  .footer-app .footer-pay img {
    max-width: 215px !important;
    max-height: 28px !important;
    transform: scale(1.45) !important;
  }
}


/* =========================================================
   ALALAAS GIFT - FORMAL EXECUTIVE FOOTER DESIGN
   Paste this block at the END of your CSS file.
   Old JavaScript logic is unchanged. Dynamic category id remains footerCategoryLinks.
========================================================= */
.alalaas-executive-footer,
.alalaas-executive-footer * {
  box-sizing: border-box;
}

.alalaas-executive-footer {
  width: 100%;
  background: #fff;
  color: #111827;
  font-family: "Inter", "Manrope", sans-serif;
}

.alalaas-executive-footer .footer-main {
  background: #fff !important;
  border-top: 1px solid #eceff3;
  padding: 34px 0 28px !important;
}

.alalaas-executive-footer .footer-service-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.alalaas-executive-footer .footer-service-item {
  min-height: 106px;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 18px 16px;
  border: 1px solid #edf0f4;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.045);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.alalaas-executive-footer .footer-service-item:hover {
  transform: translateY(-3px);
  border-color: rgba(195, 31, 38, 0.22);
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.075);
}

.alalaas-executive-footer .footer-service-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #c31f26;
  background: linear-gradient(180deg, #fff7f7, #ffffff);
  border: 1px solid rgba(195, 31, 38, 0.12);
}

.alalaas-executive-footer .footer-service-icon i {
  font-size: 22px;
}

.alalaas-executive-footer .footer-service-item strong {
  display: block;
  margin: 0 0 5px;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 800;
  color: #111827;
}

.alalaas-executive-footer .footer-service-item p {
  margin: 0;
  font-size: 12.8px;
  line-height: 1.55;
  color: #667085;
}

.alalaas-executive-footer .footer-content-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid #eceff3;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.055);
}

.alalaas-executive-footer .footer-content-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, #c31f26 0%, #fdcf00 45%, #c31f26 100%);
}

.alalaas-executive-footer .footer-grid {
  display: grid !important;
  grid-template-columns: minmax(280px, 0.86fr) minmax(480px, 1.55fr) minmax(260px, 0.72fr) !important;
  gap: 22px !important;
  align-items: stretch !important;
  padding: 30px 30px 24px;
}

.alalaas-executive-footer .footer-brand-card,
.alalaas-executive-footer .footer-app-card,
.alalaas-executive-footer .footer-link-box {
  min-width: 0;
}

.alalaas-executive-footer .footer-brand-card {
  padding: 0 22px 0 0;
  border-right: 1px solid #eef1f5;
}

.alalaas-executive-footer .footer-logo {
  display: inline-flex;
  align-items: center;
  margin-bottom: 16px;
  text-decoration: none;
}

.alalaas-executive-footer .footer-logo img {
  height: 42px !important;
  width: auto;
  object-fit: contain;
}

.alalaas-executive-footer .footer-desc {
  max-width: 100% !important;
  margin: 0 0 18px !important;
  color: #4b5563 !important;
  font-size: 14px !important;
  line-height: 1.85 !important;
  font-weight: 400;
}

.alalaas-executive-footer .footer-contact-card {
  display: grid;
  gap: 10px;
  padding-top: 4px;
}

.alalaas-executive-footer .footer-contact-line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: #fafafa;
  border: 1px solid #f0f2f5;
  text-decoration: none;
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}

.alalaas-executive-footer .footer-contact-line:hover {
  background: #fffafa;
  border-color: rgba(195, 31, 38, 0.16);
  transform: translateX(2px);
}

.alalaas-executive-footer .footer-contact-line span {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #c31f26;
}

.alalaas-executive-footer .footer-contact-line i {
  font-size: 19px;
}

.alalaas-executive-footer .footer-contact-line strong {
  display: block;
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 800;
  color: #111827;
}

.alalaas-executive-footer .footer-contact-line small {
  display: block;
  font-size: 12.4px;
  line-height: 1.35;
  color: #667085;
}

.alalaas-executive-footer .footer-link-area {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  padding: 0 4px;
}

.alalaas-executive-footer .footer-link-box {
  padding: 4px 0;
}

.alalaas-executive-footer .footer-title {
  position: relative;
  margin: 0 0 16px !important;
  padding-bottom: 12px;
  color: #111827 !important;
  font-size: 15px !important;
  line-height: 1.2;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
}

.alalaas-executive-footer .footer-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 3px;
  border-radius: 999px;
  background: #c31f26;
}

.alalaas-executive-footer .footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid !important;
  gap: 9px !important;
}

.alalaas-executive-footer .footer-links li {
  margin: 0;
  padding: 0;
}

.alalaas-executive-footer .footer-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  color: #555f6d !important;
  font-size: 13.3px !important;
  line-height: 1.45;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.alalaas-executive-footer .footer-links a::before {
  content: "";
  width: 0;
  height: 2px;
  border-radius: 999px;
  margin-right: 0;
  background: #fdcf00;
  transition: width 0.2s ease, margin-right 0.2s ease;
}

.alalaas-executive-footer .footer-links a:hover {
  color: #c31f26 !important;
  transform: translateX(2px);
}

.alalaas-executive-footer .footer-links a:hover::before {
  width: 12px;
  margin-right: 7px;
}

.alalaas-executive-footer .footer-app-card {
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff, #fffaf0);
  border: 1px solid #eef1f5;
}

.alalaas-executive-footer .footer-app-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.alalaas-executive-footer .footer-app-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #c31f26;
  background: #fff;
  border: 1px solid rgba(195, 31, 38, 0.15);
  box-shadow: 0 8px 18px rgba(195, 31, 38, 0.08);
}

.alalaas-executive-footer .footer-app-icon i {
  font-size: 21px;
}

.alalaas-executive-footer .footer-app-card .footer-title {
  margin-bottom: 8px !important;
  padding-bottom: 0;
}

.alalaas-executive-footer .footer-app-card .footer-title::after {
  display: none;
}

.alalaas-executive-footer .footer-muted {
  margin: 0 !important;
  color: #667085 !important;
  font-size: 12.8px !important;
  line-height: 1.55;
}

.alalaas-executive-footer .footer-approw {
  display: grid !important;
  grid-template-columns: 98px 1fr;
  gap: 12px !important;
  align-items: stretch !important;
}

.alalaas-executive-footer .footer-qr {
  width: 98px !important;
  height: 98px !important;
  border-radius: 16px !important;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid #e8ebf0 !important;
  padding: 7px;
}

.alalaas-executive-footer .footer-qr img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.alalaas-executive-footer .footer-stores {
  display: grid !important;
  gap: 10px !important;
}

.alalaas-executive-footer .store-btn {
  min-height: 44px !important;
  height: auto !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 12px !important;
  border-radius: 14px !important;
  border: 1px solid #e8ebf0 !important;
  background: #fff !important;
  color: #111827 !important;
  text-decoration: none;
  font-size: 13px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.alalaas-executive-footer .store-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(195, 31, 38, 0.24) !important;
  background: #fff8f8 !important;
}

.alalaas-executive-footer .store-btn i {
  font-size: 18px;
  color: #c31f26;
}

.alalaas-executive-footer .footer-pay {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 58px !important;
  margin-top: 14px !important;
  padding: 10px 12px !important;
  border-radius: 16px !important;
  border: 1px solid #e8ebf0 !important;
  background: #fff !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.alalaas-executive-footer .footer-pay img {
  width: 100%;
  max-width: 270px;
  max-height: 36px;
  height: auto !important;
  object-fit: contain;
}

.alalaas-executive-footer .footer-bottom {
  margin: 0 !important;
  padding: 18px 30px !important;
  border-top: 1px solid #eef1f5 !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: #fbfcfd;
}

.alalaas-executive-footer .footer-copy {
  color: #555f6d !important;
  font-size: 13px !important;
  font-weight: 500;
}

.alalaas-executive-footer .footer-copy span {
  color: #c31f26 !important;
  font-weight: 900 !important;
}

.alalaas-executive-footer .footer-social {
  display: flex !important;
  gap: 10px !important;
  align-items: center;
}

.alalaas-executive-footer .soc {
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  border: 1px solid #e8ebf0 !important;
  display: grid !important;
  place-items: center;
  background: #fff !important;
  color: #c31f26 !important;
  text-decoration: none;
  box-shadow: none !important;
  transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}

.alalaas-executive-footer .soc:hover {
  transform: translateY(-2px);
  background: #c31f26 !important;
  border-color: #c31f26 !important;
  color: #fff !important;
}

.alalaas-executive-footer .soc i {
  font-size: 18px;
}

@media (max-width: 1320px) {
  .alalaas-executive-footer .footer-grid {
    grid-template-columns: 1fr !important;
  }

  .alalaas-executive-footer .footer-brand-card {
    border-right: 0;
    padding-right: 0;
  }

  .alalaas-executive-footer .footer-link-area {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 4px 0;
  }
}

@media (max-width: 991px) {
  .alalaas-executive-footer .footer-service-strip,
  .alalaas-executive-footer .footer-link-area {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .alalaas-executive-footer .footer-grid {
    padding: 24px 20px 20px;
  }

  .alalaas-executive-footer .footer-bottom {
    padding: 16px 20px !important;
  }
}

@media (max-width: 640px) {
  .alalaas-executive-footer .footer-main {
    padding: 24px 0 20px !important;
  }

  .alalaas-executive-footer .footer-service-strip,
  .alalaas-executive-footer .footer-link-area {
    grid-template-columns: 1fr;
  }

  .alalaas-executive-footer .footer-content-panel {
    border-radius: 18px;
  }

  .alalaas-executive-footer .footer-grid {
    padding: 22px 16px 18px;
    gap: 20px !important;
  }

  .alalaas-executive-footer .footer-approw {
    grid-template-columns: 1fr;
  }

  .alalaas-executive-footer .footer-qr {
    width: 112px !important;
    height: 112px !important;
  }

  .alalaas-executive-footer .footer-bottom {
    justify-content: center !important;
    text-align: center;
    padding: 16px !important;
  }
}

/* =========================================================
   ALALAAS GIFT FOOTER - EDGE TO EDGE PREMIUM FINAL FIX
   Added at the very end only. No JavaScript, route, id, or API logic changed.
   Fixes: no left/right/start/end/bottom space + more attractive service/contact cards.
========================================================= */
html,
body {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}

body > .site-footer.alalaas-executive-footer,
.alalaas-executive-footer {
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 48px 0 0 0 !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 0 !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

.alalaas-executive-footer .footer-main {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-top: 0 !important;
  background:
    radial-gradient(circle at 8% 15%, rgba(195, 31, 38, 0.07), transparent 26%),
    radial-gradient(circle at 92% 12%, rgba(253, 207, 0, 0.12), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #fffdf8 100%) !important;
}

.alalaas-executive-footer .container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Top promise strip - full width, no side gaps */
.alalaas-executive-footer .footer-service-strip {
  width: 100% !important;
  margin: 0 !important;
  padding: 18px clamp(16px, 5vw, 72px) !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  background:
    linear-gradient(90deg, rgba(195, 31, 38, 0.045), rgba(255,255,255,0.88), rgba(253, 207, 0, 0.07)) !important;
  border-top: 1px solid #f0f2f5 !important;
  border-bottom: 1px solid #eef1f5 !important;
}

.alalaas-executive-footer .footer-service-item {
  position: relative !important;
  isolation: isolate;
  min-height: 118px !important;
  padding: 22px 22px 20px !important;
  align-items: flex-start !important;
  gap: 16px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(195, 31, 38, 0.10) !important;
  background:
    linear-gradient(135deg, #ffffff 0%, #fffafa 48%, #fff8e8 100%) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07) !important;
  overflow: hidden !important;
}

.alalaas-executive-footer .footer-service-item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #c31f26, #fdcf00);
  z-index: -1;
}

.alalaas-executive-footer .footer-service-item::after {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 124px;
  height: 124px;
  border-radius: 999px;
  background: rgba(195, 31, 38, 0.055);
  z-index: -1;
}

.alalaas-executive-footer .footer-service-item:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(195, 31, 38, 0.26) !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.11) !important;
}

.alalaas-executive-footer .footer-service-icon {
  width: 48px !important;
  height: 48px !important;
  flex: 0 0 48px !important;
  border-radius: 16px !important;
  color: #c31f26 !important;
  background: #ffffff !important;
  border: 1px solid rgba(195, 31, 38, 0.18) !important;
  box-shadow: 0 12px 24px rgba(195, 31, 38, 0.10) !important;
}

.alalaas-executive-footer .footer-service-icon i {
  font-size: 23px !important;
}

.alalaas-executive-footer .footer-service-item strong {
  display: block !important;
  margin-bottom: 7px !important;
  color: #0f172a !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

.alalaas-executive-footer .footer-service-item p {
  margin: 0 !important;
  color: #667085 !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
}

/* Main footer panel - full width, no rounded outside empty space */
.alalaas-executive-footer .footer-content-panel {
  width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.alalaas-executive-footer .footer-grid {
  margin: 0 !important;
  padding: 34px clamp(16px, 5vw, 72px) 24px !important;
  grid-template-columns: minmax(340px, 1.06fr) minmax(560px, 1.95fr) minmax(310px, 0.95fr) !important;
  gap: clamp(24px, 3vw, 44px) !important;
  align-items: stretch !important;
}

.alalaas-executive-footer .footer-brand-card {
  position: relative !important;
  padding: 0 26px 0 0 !important;
  border-right: 1px solid #eef1f5 !important;
}

.alalaas-executive-footer .footer-logo img {
  height: 42px !important;
  width: auto !important;
  object-fit: contain !important;
}

.alalaas-executive-footer .footer-desc {
  max-width: 450px !important;
  margin: 18px 0 22px !important;
  color: #5b6472 !important;
  font-size: 14px !important;
  line-height: 1.85 !important;
  font-weight: 400 !important;
}

/* Last shared contact cards - premium look */
.alalaas-executive-footer .footer-contact-card {
  display: grid !important;
  gap: 12px !important;
  margin: 0 !important;
}

.alalaas-executive-footer .footer-contact-line {
  position: relative !important;
  min-height: 72px !important;
  padding: 14px 16px 14px 72px !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  border-radius: 18px !important;
  border: 1px solid #edf0f4 !important;
  background:
    linear-gradient(135deg, #ffffff 0%, #fbfcff 52%, #fff8f8 100%) !important;
  color: #111827 !important;
  text-decoration: none !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.045) !important;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease !important;
  overflow: hidden !important;
}

.alalaas-executive-footer .footer-contact-line::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, #c31f26, #fdcf00);
  opacity: 0;
  transition: opacity .22s ease;
}

.alalaas-executive-footer .footer-contact-line:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(195, 31, 38, 0.20) !important;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.085) !important;
  background: #fff !important;
}

.alalaas-executive-footer .footer-contact-line:hover::before {
  opacity: 1;
}

.alalaas-executive-footer .footer-contact-line > span {
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 15px !important;
  display: grid !important;
  place-items: center !important;
  background: #c31f26 !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(195, 31, 38, 0.18) !important;
}

.alalaas-executive-footer .footer-contact-line > span i {
  font-size: 21px !important;
}

.alalaas-executive-footer .footer-contact-line strong {
  display: block !important;
  margin: 0 0 3px !important;
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
}

.alalaas-executive-footer .footer-contact-line small {
  display: block !important;
  color: #667085 !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
}

/* Links area refinement */
.alalaas-executive-footer .footer-link-area {
  padding: 4px 0 !important;
  gap: clamp(18px, 2.3vw, 36px) !important;
}

.alalaas-executive-footer .footer-link-box {
  min-width: 0 !important;
}

.alalaas-executive-footer .footer-title {
  color: #111827 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

.alalaas-executive-footer .footer-title::after {
  background: linear-gradient(90deg, #c31f26 0%, #fdcf00 100%) !important;
  height: 2px !important;
  width: 34px !important;
}

.alalaas-executive-footer .footer-links a {
  color: #667085 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.alalaas-executive-footer .footer-links a:hover {
  color: #c31f26 !important;
}

/* App card */
.alalaas-executive-footer .footer-app-card {
  position: relative !important;
  padding: 22px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(195, 31, 38, 0.12) !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(253, 207, 0, 0.20), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #fff8f1 100%) !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.065) !important;
}

.alalaas-executive-footer .footer-app-head {
  margin-bottom: 18px !important;
}

.alalaas-executive-footer .footer-app-icon {
  background: #c31f26 !important;
  color: #fff !important;
  border-color: #c31f26 !important;
}

.alalaas-executive-footer .footer-qr,
.alalaas-executive-footer .store-btn,
.alalaas-executive-footer .footer-pay {
  border-color: #edf0f4 !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.04) !important;
}

.alalaas-executive-footer .store-btn:hover {
  background: #c31f26 !important;
  color: #fff !important;
  border-color: #c31f26 !important;
}

.alalaas-executive-footer .store-btn:hover i {
  color: #fff !important;
}

/* Bottom - no bottom gap */
.alalaas-executive-footer .footer-bottom {
  width: 100% !important;
  margin: 0 !important;
  padding: 18px clamp(16px, 5vw, 72px) !important;
  border-top: 1px solid #eef1f5 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(90deg, #fbfcfd 0%, #ffffff 55%, #fff8ee 100%) !important;
}

.alalaas-executive-footer .footer-copy {
  color: #667085 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

.alalaas-executive-footer .footer-copy span {
  color: #c31f26 !important;
  font-weight: 800 !important;
}

.alalaas-executive-footer .soc {
  width: 40px !important;
  height: 40px !important;
  border-radius: 14px !important;
  border-color: #edf0f4 !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045) !important;
}

.alalaas-executive-footer + *,
body > .alalaas-executive-footer:last-child {
  margin-bottom: 0 !important;
}

@media (max-width: 1320px) {
  .alalaas-executive-footer .footer-service-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .alalaas-executive-footer .footer-grid {
    grid-template-columns: 1fr !important;
  }

  .alalaas-executive-footer .footer-brand-card {
    border-right: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 991px) {
  .alalaas-executive-footer .footer-link-area {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .alalaas-executive-footer .footer-service-strip {
    grid-template-columns: 1fr !important;
    padding: 14px !important;
  }

  .alalaas-executive-footer .footer-grid {
    padding: 26px 14px 20px !important;
  }

  .alalaas-executive-footer .footer-link-area {
    grid-template-columns: 1fr !important;
  }

  .alalaas-executive-footer .footer-bottom {
    padding: 18px 14px !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* =========================================================
   FINAL FIX - APP DOWNLOAD CARD NO BACKGROUND COLOR
   Old HTML/JS logic unchanged. Only improves footer app card UI.
========================================================= */
.alalaas-executive-footer .footer-app-card {
  position: relative !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.alalaas-executive-footer .footer-app-card::before,
.alalaas-executive-footer .footer-app-card::after {
  display: none !important;
  content: none !important;
}

.alalaas-executive-footer .footer-app-head {
  margin-bottom: 18px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
}

.alalaas-executive-footer .footer-app-icon {
  width: 46px !important;
  height: 46px !important;
  flex: 0 0 46px !important;
  border-radius: 16px !important;
  background: #c31f26 !important;
  color: #fff !important;
  border: 1px solid #c31f26 !important;
  box-shadow: 0 14px 30px rgba(195, 31, 38, 0.18) !important;
}

.alalaas-executive-footer .footer-app-icon i {
  font-size: 22px !important;
}

.alalaas-executive-footer .footer-app-card .footer-title {
  margin: 0 0 7px !important;
  padding: 0 !important;
  color: #0f172a !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}

.alalaas-executive-footer .footer-app-card .footer-title::after {
  display: none !important;
}

.alalaas-executive-footer .footer-app-card .footer-muted {
  max-width: 330px !important;
  margin: 0 !important;
  color: #5f6b7a !important;
  font-size: 13.5px !important;
  line-height: 1.75 !important;
  font-weight: 400 !important;
}

.alalaas-executive-footer .footer-approw {
  display: grid !important;
  grid-template-columns: 108px 1fr !important;
  gap: 14px !important;
  align-items: stretch !important;
  margin: 0 !important;
}

.alalaas-executive-footer .footer-qr {
  width: 108px !important;
  height: 108px !important;
  border-radius: 18px !important;
  padding: 8px !important;
  background: #ffffff !important;
  border: 1px solid #e8edf3 !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.075) !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease !important;
}

.alalaas-executive-footer .footer-qr:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(195, 31, 38, 0.24) !important;
  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.12) !important;
}

.alalaas-executive-footer .footer-qr img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

.alalaas-executive-footer .footer-stores {
  display: grid !important;
  gap: 12px !important;
  min-width: 0 !important;
}

.alalaas-executive-footer .store-btn {
  position: relative !important;
  min-height: 48px !important;
  height: 48px !important;
  width: 100% !important;
  padding: 0 18px !important;
  border-radius: 16px !important;
  border: 1px solid #e8edf3 !important;
  background: #ffffff !important;
  color: #111827 !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.055) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  overflow: hidden !important;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, color 0.22s ease !important;
}

.alalaas-executive-footer .store-btn::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, #c31f26 0%, #9f151b 100%) !important;
  opacity: 0 !important;
  transition: opacity 0.22s ease !important;
  z-index: 0 !important;
}

.alalaas-executive-footer .store-btn i,
.alalaas-executive-footer .store-btn span {
  position: relative !important;
  z-index: 1 !important;
}

.alalaas-executive-footer .store-btn i {
  color: #c31f26 !important;
  font-size: 19px !important;
  transition: color 0.22s ease !important;
}

.alalaas-executive-footer .store-btn:hover {
  transform: translateY(-3px) !important;
  border-color: #c31f26 !important;
  color: #ffffff !important;
  box-shadow: 0 18px 44px rgba(195, 31, 38, 0.18) !important;
}

.alalaas-executive-footer .store-btn:hover::before {
  opacity: 1 !important;
}

.alalaas-executive-footer .store-btn:hover i {
  color: #ffffff !important;
}

.alalaas-executive-footer .footer-pay {
  width: 100% !important;
  max-width: 100% !important;
  height: 58px !important;
  min-height: 58px !important;
  margin-top: 16px !important;
  padding: 8px 16px !important;
  border-radius: 18px !important;
  border: 1px solid #e8edf3 !important;
  background: #ffffff !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.alalaas-executive-footer .footer-pay img {
  width: 100% !important;
  max-width: 300px !important;
  height: auto !important;
  max-height: 34px !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  transform: scale(1.22) !important;
  transform-origin: center center !important;
}

@media (max-width: 640px) {
  .alalaas-executive-footer .footer-approw {
    grid-template-columns: 1fr !important;
  }

  .alalaas-executive-footer .footer-qr {
    width: 118px !important;
    height: 118px !important;
  }

  .alalaas-executive-footer .store-btn {
    max-width: 100% !important;
  }
}

/* =========================================================
   NEW FOOTER DESIGN LIKE SHARED REFERENCE IMAGE
   Color updated to #ad060e. Added at bottom so old page logic stays same.
========================================================= */

/* =========================================================
   ALALAAS GIFT FOOTER - DARK REFERENCE DESIGN
   Design inspired by the shared footer screenshot only.
   Data, links, ids, API calls, and JavaScript logic are preserved.
========================================================= */

:root {
  --alalaas-footer-bg: #020202;
  --alalaas-footer-panel: #080808;
  --alalaas-footer-line: rgba(255, 255, 255, 0.13);
  --alalaas-footer-line-soft: rgba(255, 255, 255, 0.08);
  --alalaas-footer-text: rgba(255, 255, 255, 0.82);
  --alalaas-footer-muted: rgba(255, 255, 255, 0.56);
  --alalaas-footer-dim: rgba(255, 255, 255, 0.38);
  --alalaas-footer-white: #ffffff;
  --alalaas-footer-brand: #ad060e;
  --alalaas-footer-gold: #fdcf00;
}

html,
body {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}

.site-footer.alalaas-reference-footer,
.alalaas-reference-footer {
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 48px 0 0 0 !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 0 !important;
  background: var(--alalaas-footer-bg) !important;
  color: var(--alalaas-footer-text) !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  font-family: Inter, Manrope, Arial, sans-serif !important;
}

.alalaas-reference-footer * {
  box-sizing: border-box;
}

.alalaas-reference-footer a {
  color: inherit;
  text-decoration: none;
}

.alalaas-reference-footer .footer-main {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(173, 6, 14, 0.14), transparent 26%),
    radial-gradient(circle at 92% 14%, rgba(253, 207, 0, 0.08), transparent 24%),
    linear-gradient(180deg, #000 0%, #030303 58%, #000 100%) !important;
}

.alalaas-reference-footer .container {
  width: min(100%, 1280px) !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 clamp(18px, 4.2vw, 48px) !important;
}

/* Top grid: same structure style as reference screenshot */
.alalaas-reference-footer .footer-top-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.58fr) minmax(220px, 0.85fr) minmax(290px, 0.72fr) !important;
  gap: clamp(34px, 5.5vw, 88px) !important;
  padding: 70px 0 34px !important;
  border-bottom: 1px solid var(--alalaas-footer-line) !important;
}

.alalaas-reference-footer .footer-section-title {
  position: relative !important;
  margin: 0 0 24px !important;
  color: var(--alalaas-footer-white) !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.alalaas-reference-footer .footer-section-title::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: -13px !important;
  width: 48px !important;
  height: 1px !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.02)) !important;
}

.alalaas-reference-footer .footer-link-matrix {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 30px 64px !important;
}

.alalaas-reference-footer .footer-link-box {
  min-width: 0 !important;
}

.alalaas-reference-footer .footer-title {
  margin: 0 0 13px !important;
  color: var(--alalaas-footer-white) !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

.alalaas-reference-footer .footer-links {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  gap: 9px !important;
}

.alalaas-reference-footer .footer-links a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--alalaas-footer-muted) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 650 !important;
  transition: color 0.22s ease, transform 0.22s ease !important;
}

.alalaas-reference-footer .footer-links a:hover {
  color: var(--alalaas-footer-white) !important;
  transform: translateX(4px) !important;
}

.alalaas-reference-footer .footer-links a::before {
  content: "" !important;
  width: 0 !important;
  height: 1px !important;
  background: var(--alalaas-footer-brand) !important;
  transition: width 0.22s ease !important;
}

.alalaas-reference-footer .footer-links a:hover::before {
  width: 12px !important;
}

.alalaas-reference-footer .best-grid {
  display: grid !important;
  gap: 12px !important;
}

.alalaas-reference-footer .best-grid a {
  color: var(--alalaas-footer-muted) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  transition: color 0.22s ease, transform 0.22s ease !important;
}

.alalaas-reference-footer .best-grid a:hover {
  color: var(--alalaas-footer-white) !important;
  transform: translateX(4px) !important;
}

.alalaas-reference-footer .footer-side-card {
  min-width: 0 !important;
}

.alalaas-reference-footer .footer-store-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-bottom: 28px !important;
}

.alalaas-reference-footer .store-btn {
  min-width: 88px !important;
  height: 28px !important;
  padding: 0 10px !important;
  border-radius: 3px !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  background: #050505 !important;
  color: var(--alalaas-footer-white) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  transition: border-color .22s ease, transform .22s ease, background .22s ease !important;
}

.alalaas-reference-footer .store-btn i {
  font-size: 15px !important;
  line-height: 1 !important;
}

.alalaas-reference-footer .store-btn:hover {
  background: #111 !important;
  border-color: var(--alalaas-footer-brand) !important;
  transform: translateY(-2px) !important;
}

.alalaas-reference-footer .footer-contact-list {
  display: grid !important;
  gap: 16px !important;
}

.alalaas-reference-footer .footer-contact-line {
  display: grid !important;
  grid-template-columns: 44px 1fr !important;
  align-items: center !important;
  gap: 14px !important;
  color: var(--alalaas-footer-white) !important;
}

.alalaas-reference-footer .footer-contact-line > span {
  width: 38px !important;
  height: 38px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 2px !important;
  display: grid !important;
  place-items: center !important;
  color: var(--alalaas-footer-white) !important;
  background: rgba(255, 255, 255, 0.02) !important;
  transition: background .22s ease, border-color .22s ease, transform .22s ease !important;
}

.alalaas-reference-footer .footer-contact-line:hover > span {
  border-color: rgba(173, 6, 14, 0.85) !important;
  background: rgba(173, 6, 14, 0.18) !important;
  transform: translateY(-2px) !important;
}

.alalaas-reference-footer .footer-contact-line i {
  font-size: 17px !important;
}

.alalaas-reference-footer .footer-contact-line strong {
  display: block !important;
  margin: 0 0 4px !important;
  color: var(--alalaas-footer-white) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.alalaas-reference-footer .footer-contact-line small {
  display: block !important;
  color: var(--alalaas-footer-muted) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
}

/* Free tools row */
.alalaas-reference-footer .footer-tools-row {
  padding: 24px 0 30px !important;
  border-bottom: 1px solid var(--alalaas-footer-line) !important;
}

.alalaas-reference-footer .footer-tools-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 13px 34px !important;
  margin-top: 23px !important;
}

.alalaas-reference-footer .footer-tools-grid a {
  color: var(--alalaas-footer-muted) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 750 !important;
  transition: color .22s ease, transform .22s ease !important;
}

.alalaas-reference-footer .footer-tools-grid a:hover {
  color: var(--alalaas-footer-white) !important;
  transform: translateX(4px) !important;
}

/* Edition and social row */
.alalaas-reference-footer .footer-edition-social {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 21px 0 !important;
  border-bottom: 1px solid var(--alalaas-footer-line) !important;
}

.alalaas-reference-footer .edition-wrap,
.alalaas-reference-footer .social-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}

.alalaas-reference-footer .footer-mini-label {
  color: var(--alalaas-footer-white) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
}

.alalaas-reference-footer .edition-pill {
  min-width: 152px !important;
  height: 38px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 999px !important;
  background: #1e1e24 !important;
  color: rgba(255, 255, 255, 0.72) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.alalaas-reference-footer .edition-pill .edition-left {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.alalaas-reference-footer .edition-pill i {
  font-size: 15px !important;
}


.alalaas-reference-footer .edition-dropdown {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  z-index: 40 !important;
}

.alalaas-reference-footer button.edition-pill {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  cursor: pointer !important;
  font-family: inherit !important;
  text-align: left !important;
}

.alalaas-reference-footer button.edition-pill:hover,
.alalaas-reference-footer button.edition-pill:focus {
  border-color: rgba(255, 255, 255, 0.22) !important;
  background: #24242b !important;
  color: #ffffff !important;
  outline: none !important;
}

.alalaas-reference-footer .edition-caret {
  transition: transform .22s ease !important;
}

.alalaas-reference-footer .edition-dropdown.is-open .edition-caret {
  transform: rotate(180deg) !important;
}

.alalaas-reference-footer .edition-menu {
  position: absolute !important;
  left: 0 !important;
  bottom: calc(100% + 10px) !important;
  width: 100% !important;
  min-width: 180px !important;
  padding: 7px !important;
  margin: 0 !important;
  list-style: none !important;
  border-radius: 16px !important;
  background: #19191f !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.36) !important;
  display: none !important;
  z-index: 9999 !important;
}

.alalaas-reference-footer .edition-dropdown.is-open .edition-menu {
  display: block !important;
}

.alalaas-reference-footer .edition-option {
  width: 100% !important;
  min-height: 38px !important;
  padding: 9px 11px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.78) !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  cursor: pointer !important;
  font-family: inherit !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 750 !important;
  text-align: left !important;
}

.alalaas-reference-footer .edition-option i {
  font-size: 15px !important;
  color: rgba(255, 255, 255, 0.62) !important;
}

.alalaas-reference-footer .edition-option:hover,
.alalaas-reference-footer .edition-option.active {
  background: rgba(195, 31, 38, 0.92) !important;
  color: #ffffff !important;
}

.alalaas-reference-footer .edition-option:hover i,
.alalaas-reference-footer .edition-option.active i {
  color: #ffffff !important;
}

.alalaas-reference-footer .footer-social {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.alalaas-reference-footer .soc {
  width: 26px !important;
  height: 26px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  background: transparent !important;
  color: var(--alalaas-footer-white) !important;
  display: inline-grid !important;
  place-items: center !important;
  transition: background .22s ease, border-color .22s ease, transform .22s ease !important;
}

.alalaas-reference-footer .soc:hover {
  background: var(--alalaas-footer-brand) !important;
  border-color: var(--alalaas-footer-brand) !important;
  transform: translateY(-2px) !important;
}

.alalaas-reference-footer .soc i {
  font-size: 15px !important;
}

/* Other apps row */
.alalaas-reference-footer .footer-apps-strip {
  padding: 27px 0 30px !important;
}

.alalaas-reference-footer .footer-center-title {
  text-align: center !important;
  color: var(--alalaas-footer-muted) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  margin: 0 0 23px !important;
}

.alalaas-reference-footer .footer-apps-list {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 20px !important;
}

.alalaas-reference-footer .footer-app-mini {
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  color: var(--alalaas-footer-white) !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}

.alalaas-reference-footer .footer-app-mini i {
  color: var(--alalaas-footer-brand) !important;
  font-size: 29px !important;
}

.alalaas-reference-footer .footer-app-mini small {
  display: block !important;
  color: var(--alalaas-footer-muted) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  margin-bottom: 1px !important;
}

/* Legal bottom */
.alalaas-reference-footer .footer-bottom {
  padding: 25px 0 22px !important;
  background: transparent !important;
}

.alalaas-reference-footer .footer-legal {
  list-style: none !important;
  margin: 0 0 22px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
}

.alalaas-reference-footer .footer-legal li {
  display: inline-flex !important;
  align-items: center !important;
}

.alalaas-reference-footer .footer-legal li:not(:last-child)::after {
  content: "" !important;
  width: 1px !important;
  height: 12px !important;
  background: rgba(255, 255, 255, 0.17) !important;
  margin: 0 12px !important;
}

.alalaas-reference-footer .footer-legal a {
  color: var(--alalaas-footer-muted) !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 650 !important;
  transition: color .22s ease !important;
}

.alalaas-reference-footer .footer-legal a:hover {
  color: var(--alalaas-footer-white) !important;
}

.alalaas-reference-footer .footer-copy {
  margin: 0 !important;
  text-align: center !important;
  color: var(--alalaas-footer-muted) !important;
  font-size: 11px !important;
  line-height: 1.55 !important;
  font-weight: 650 !important;
}

.alalaas-reference-footer .footer-copy span {
  color: var(--alalaas-footer-white) !important;
  font-weight: 800 !important;
}

.alalaas-reference-footer + *,
body > .alalaas-reference-footer:last-child {
  margin-bottom: 0 !important;
}

@media (max-width: 1180px) {
  .alalaas-reference-footer .footer-top-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .alalaas-reference-footer .footer-side-card {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 26px !important;
  }

  .alalaas-reference-footer .footer-apps-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 820px) {
  .alalaas-reference-footer .footer-top-grid,
  .alalaas-reference-footer .footer-side-card,
  .alalaas-reference-footer .footer-edition-social {
    grid-template-columns: 1fr !important;
  }

  .alalaas-reference-footer .footer-link-matrix,
  .alalaas-reference-footer .footer-tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .alalaas-reference-footer .social-wrap {
    justify-content: flex-start !important;
  }
}

@media (max-width: 560px) {
  .alalaas-reference-footer .container {
    padding: 0 16px !important;
  }

  .alalaas-reference-footer .footer-top-grid {
    padding-top: 32px !important;
  }

  .alalaas-reference-footer .footer-link-matrix,
  .alalaas-reference-footer .footer-tools-grid,
  .alalaas-reference-footer .footer-apps-list {
    grid-template-columns: 1fr !important;
  }

  .alalaas-reference-footer .footer-store-row {
    align-items: stretch !important;
  }

  .alalaas-reference-footer .store-btn {
    flex: 1 1 130px !important;
  }

  .alalaas-reference-footer .footer-legal {
    justify-content: flex-start !important;
  }

  .alalaas-reference-footer .footer-copy {
    text-align: left !important;
  }
}

/* =========================================================
   ALALAAS FOOTER FINAL UPDATE
   Requested update: more top spacing, larger formal font sizing,
   old site font style, and main brand color #ad060e.
   Only CSS design overrides are added. No JavaScript, IDs, routes,
   API calls, or footer logic changed.
========================================================= */
.alalaas-reference-footer {
  --alalaas-footer-brand: #ad060e !important;
  font-family: "Inter", sans-serif !important;
}

.alalaas-reference-footer .footer-main {
  background:
    radial-gradient(circle at 10% 0%, rgba(173, 6, 14, 0.18), transparent 28%),
    radial-gradient(circle at 92% 14%, rgba(253, 207, 0, 0.075), transparent 25%),
    linear-gradient(180deg, #000000 0%, #030303 58%, #000000 100%) !important;
}

.alalaas-reference-footer .container {
  width: min(100%, 1320px) !important;
  max-width: 1320px !important;
}

/* More breathing room from top */
.alalaas-reference-footer .footer-top-grid {
  padding: 74px 0 46px !important;
  gap: clamp(42px, 5.8vw, 94px) !important;
}

/* Bigger, cleaner heading style */
.alalaas-reference-footer .footer-section-title {
  margin-bottom: 30px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: 0.115em !important;
}

.alalaas-reference-footer .footer-section-title::after {
  bottom: -14px !important;
  width: 54px !important;
  background: linear-gradient(90deg, rgba(255,255,255,0.58), rgba(173,6,14,0.35), rgba(255,255,255,0.02)) !important;
}

.alalaas-reference-footer .footer-title {
  margin-bottom: 16px !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
}

.alalaas-reference-footer .footer-link-matrix {
  gap: 34px 72px !important;
}

.alalaas-reference-footer .footer-links {
  gap: 12px !important;
}

.alalaas-reference-footer .footer-links a,
.alalaas-reference-footer .best-grid a,
.alalaas-reference-footer .footer-tools-grid a {
  font-size: 14px !important;
  line-height: 1.55 !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

.alalaas-reference-footer .best-grid {
  gap: 13px !important;
}

.alalaas-reference-footer .footer-store-row {
  gap: 13px !important;
  margin-bottom: 34px !important;
}

.alalaas-reference-footer .store-btn {
  min-width: 104px !important;
  height: 34px !important;
  padding: 0 13px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.alalaas-reference-footer .store-btn i {
  font-size: 17px !important;
}

.alalaas-reference-footer .footer-contact-list {
  gap: 19px !important;
}

.alalaas-reference-footer .footer-contact-line {
  grid-template-columns: 48px 1fr !important;
  gap: 16px !important;
}

.alalaas-reference-footer .footer-contact-line > span {
  width: 42px !important;
  height: 42px !important;
}

.alalaas-reference-footer .footer-contact-line i {
  font-size: 19px !important;
}

.alalaas-reference-footer .footer-contact-line strong {
  margin-bottom: 5px !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 750 !important;
}

.alalaas-reference-footer .footer-contact-line small {
  font-size: 13px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
}

.alalaas-reference-footer .footer-tools-row {
  padding: 30px 0 36px !important;
}

.alalaas-reference-footer .footer-tools-grid {
  gap: 15px 40px !important;
  margin-top: 27px !important;
}

.alalaas-reference-footer .footer-edition-social {
  padding: 25px 0 !important;
}

.alalaas-reference-footer .footer-mini-label {
  font-size: 12px !important;
  font-weight: 800 !important;
}

.alalaas-reference-footer .edition-pill {
  height: 42px !important;
  min-width: 172px !important;
  font-size: 13px !important;
}

.alalaas-reference-footer .soc {
  width: 30px !important;
  height: 30px !important;
}

.alalaas-reference-footer .soc i {
  font-size: 17px !important;
}

.alalaas-reference-footer .footer-apps-strip {
  padding: 32px 0 36px !important;
}

.alalaas-reference-footer .footer-center-title {
  font-size: 12px !important;
  margin-bottom: 28px !important;
}

.alalaas-reference-footer .footer-app-mini {
  font-size: 15px !important;
  min-height: 44px !important;
}

.alalaas-reference-footer .footer-app-mini i {
  font-size: 33px !important;
}

.alalaas-reference-footer .footer-app-mini small {
  font-size: 11px !important;
}

.alalaas-reference-footer .footer-bottom {
  padding: 30px 0 26px !important;
}

.alalaas-reference-footer .footer-legal {
  margin-bottom: 24px !important;
}

.alalaas-reference-footer .footer-legal a,
.alalaas-reference-footer .footer-copy {
  font-size: 12px !important;
  line-height: 1.6 !important;
  font-weight: 600 !important;
}

@media (max-width: 560px) {
  .alalaas-reference-footer .footer-top-grid {
    padding-top: 48px !important;
  }

  .alalaas-reference-footer .footer-section-title {
    font-size: 12px !important;
  }

  .alalaas-reference-footer .footer-links a,
  .alalaas-reference-footer .best-grid a,
  .alalaas-reference-footer .footer-tools-grid a {
    font-size: 13.5px !important;
  }
}


/* =========================================================
   FOOTER TOP SPACE + FORMAL FONT SIZE UPDATE
   Requested: add space above footer and make footer typography more formal.
   Only CSS overrides are added. No HTML, JavaScript, routes, ids,
   API calls, or dynamic footer category logic changed.
========================================================= */

.site-footer.alalaas-reference-footer,
.alalaas-reference-footer {
  margin-top: clamp(48px, 6vw, 92px) !important;
  font-family: var(--site-font, "Manrope", "Inter", Arial, sans-serif) !important;
  letter-spacing: -0.01em !important;
}

/* keep full-width footer alignment while adding only top breathing room */
.site-footer.alalaas-reference-footer {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* more space inside the top of footer */
.alalaas-reference-footer .footer-top-grid {
  padding-top: clamp(72px, 7vw, 104px) !important;
  padding-bottom: 52px !important;
}

/* formal section headings */
.alalaas-reference-footer .footer-section-title {
  font-size: 13.5px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: 0.105em !important;
  margin-bottom: 32px !important;
}

/* formal column titles */
.alalaas-reference-footer .footer-title {
  font-size: 15.5px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  margin-bottom: 17px !important;
}

/* clearer, more readable footer links */
.alalaas-reference-footer .footer-links {
  gap: 12px !important;
}

.alalaas-reference-footer .footer-links a,
.alalaas-reference-footer .best-grid a,
.alalaas-reference-footer .footer-tools-grid a {
  font-size: 14.5px !important;
  line-height: 1.62 !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
}

/* contact text readability */
.alalaas-reference-footer .footer-contact-line strong {
  font-size: 14.5px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

.alalaas-reference-footer .footer-contact-line small {
  font-size: 13.5px !important;
  line-height: 1.62 !important;
  font-weight: 500 !important;
}

/* app/store/social/legal text formal size */
.alalaas-reference-footer .store-btn {
  font-size: 12.5px !important;
  font-weight: 650 !important;
}

.alalaas-reference-footer .footer-mini-label,
.alalaas-reference-footer .footer-center-title {
  font-size: 12.5px !important;
  font-weight: 700 !important;
}

.alalaas-reference-footer .edition-pill {
  font-size: 13.5px !important;
  font-weight: 650 !important;
}

.alalaas-reference-footer .footer-app-mini {
  font-size: 15.5px !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
}

.alalaas-reference-footer .footer-app-mini small {
  font-size: 11.5px !important;
  font-weight: 500 !important;
}

.alalaas-reference-footer .footer-legal a,
.alalaas-reference-footer .footer-copy {
  font-size: 12.5px !important;
  line-height: 1.65 !important;
  font-weight: 500 !important;
}

/* responsive footer spacing */
@media (max-width: 820px) {
  .site-footer.alalaas-reference-footer,
  .alalaas-reference-footer {
    margin-top: 44px !important;
  }

  .alalaas-reference-footer .footer-top-grid {
    padding-top: 58px !important;
    padding-bottom: 42px !important;
  }
}

@media (max-width: 560px) {
  .site-footer.alalaas-reference-footer,
  .alalaas-reference-footer {
    margin-top: 36px !important;
  }

  .alalaas-reference-footer .footer-top-grid {
    padding-top: 48px !important;
    padding-bottom: 36px !important;
  }

  .alalaas-reference-footer .footer-section-title {
    font-size: 12.5px !important;
  }

  .alalaas-reference-footer .footer-title {
    font-size: 15px !important;
  }

  .alalaas-reference-footer .footer-links a,
  .alalaas-reference-footer .best-grid a,
  .alalaas-reference-footer .footer-tools-grid a {
    font-size: 14px !important;
  }
}

/* =========================================================
   FOOTER WIDTH UPDATE
   Requested: reduce left and right empty space.
   Only CSS overrides are added. No footer HTML, IDs, routes,
   API calls, JavaScript, or dynamic category logic changed.
========================================================= */
.site-footer.alalaas-reference-footer .container,
.alalaas-reference-footer .container {
  width: min(100% - 40px, 1620px) !important;
  max-width: 1620px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.alalaas-reference-footer .footer-top-grid {
  gap: clamp(32px, 4vw, 72px) !important;
}

.alalaas-reference-footer .footer-link-matrix {
  gap: 34px clamp(48px, 5vw, 96px) !important;
}

@media (min-width: 1500px) {
  .site-footer.alalaas-reference-footer .container,
  .alalaas-reference-footer .container {
    width: min(100% - 96px, 1660px) !important;
    max-width: 1660px !important;
  }
}

@media (max-width: 820px) {
  .site-footer.alalaas-reference-footer .container,
  .alalaas-reference-footer .container {
    width: min(100% - 28px, 100%) !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

@media (max-width: 560px) {
  .site-footer.alalaas-reference-footer .container,
  .alalaas-reference-footer .container {
    width: min(100% - 20px, 100%) !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}


/* =========================================================
   FOOTER UPDATE: remove Quick Links from top HTML section,
   keep My Account aligned in the top row.
   Only layout CSS added. Footer scripts, IDs, routes, and
   dynamic category logic remain unchanged.
========================================================= */
.alalaas-reference-footer .footer-link-matrix {
  grid-template-columns: repeat(3, minmax(150px, 1fr)) !important;
  gap: 34px clamp(36px, 4vw, 70px) !important;
  align-items: start !important;
}

.alalaas-reference-footer .footer-main-links {
  min-width: 0 !important;
}

.alalaas-reference-footer .footer-top-grid {
  grid-template-columns: minmax(520px, 1.72fr) minmax(220px, 0.78fr) minmax(290px, 0.72fr) !important;
}

@media (max-width: 1180px) {
  .alalaas-reference-footer .footer-top-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .alalaas-reference-footer .footer-link-matrix {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 820px) {
  .alalaas-reference-footer .footer-link-matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  .alalaas-reference-footer .footer-link-matrix {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   FOOTER NEED HELP CTA UPDATE
   Requested: place the Need Help section inside footer,
   red background, yellow buttons. Existing footer logic,
   scripts, IDs, routes and dynamic category loading unchanged.
========================================================= */
.alalaas-reference-footer .footer-help-cta {
  width: 100% !important;
  margin: clamp(34px, 4.2vw, 62px) 0 0 !important;
  padding: clamp(28px, 3.2vw, 42px) clamp(24px, 4vw, 54px) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 15% 15%, rgba(255, 255, 255, 0.14), transparent 28%),
    linear-gradient(135deg, #ad060e 0%, #c31f26 56%, #8d030a 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: clamp(22px, 4vw, 60px) !important;
  box-shadow: 0 22px 55px rgba(173, 6, 14, 0.22) !important;
}

.alalaas-reference-footer .footer-help-content h3 {
  margin: 0 0 12px !important;
  color: #ffffff !important;
  font-size: clamp(23px, 2vw, 30px) !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

.alalaas-reference-footer .footer-help-content p {
  max-width: 620px !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  font-weight: 600 !important;
}

.alalaas-reference-footer .footer-help-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}

.alalaas-reference-footer .footer-help-btn {
  min-width: 220px !important;
  height: 48px !important;
  padding: 0 26px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease !important;
}

.alalaas-reference-footer .footer-help-btn--yellow,
.alalaas-reference-footer .footer-help-btn--outline:hover {
  background: #fdcf00 !important;
  border: 1px solid #fdcf00 !important;
  color: #111111 !important;
  box-shadow: 0 12px 28px rgba(253, 207, 0, 0.22) !important;
}

.alalaas-reference-footer .footer-help-btn--outline {
  background: transparent !important;
  border: 1px solid #fdcf00 !important;
  color: #fdcf00 !important;
  box-shadow: none !important;
}

.alalaas-reference-footer .footer-help-btn:hover {
  transform: translateY(-2px) !important;
}

.alalaas-reference-footer .footer-top-grid {
  padding-top: clamp(54px, 5vw, 74px) !important;
}

@media (max-width: 900px) {
  .alalaas-reference-footer .footer-help-cta {
    grid-template-columns: 1fr !important;
    text-align: left !important;
  }

  .alalaas-reference-footer .footer-help-actions {
    justify-content: flex-start !important;
  }
}

@media (max-width: 560px) {
  .alalaas-reference-footer .footer-help-cta {
    margin-top: 28px !important;
    padding: 24px 18px !important;
    border-radius: 16px !important;
  }

  .alalaas-reference-footer .footer-help-actions {
    width: 100% !important;
    gap: 10px !important;
  }

  .alalaas-reference-footer .footer-help-btn {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* =========================================================
   FOOTER NEED HELP HALF-OUTSIDE UPDATE
   Requested: make half of the Need Help red section sit outside
   the footer background. CSS-only update; existing HTML logic,
   scripts, ids, routes, dropdown and dynamic categories unchanged.
========================================================= */
.site-footer.alalaas-reference-footer,
.alalaas-reference-footer {
  margin-top: clamp(96px, 8vw, 132px) !important;
  overflow: visible !important;
}

.alalaas-reference-footer .footer-main,
.alalaas-reference-footer .container {
  overflow: visible !important;
}

.alalaas-reference-footer .footer-help-cta {
  position: relative !important;
  z-index: 5 !important;
  margin: 0 0 clamp(28px, 3vw, 44px) !important;
  transform: translateY(-50%) !important;
}

.alalaas-reference-footer .footer-help-cta + .footer-top-grid,
.alalaas-reference-footer .footer-top-grid {
  margin-top: clamp(-92px, -5.2vw, -64px) !important;
  padding-top: clamp(56px, 5vw, 76px) !important;
}

@media (max-width: 900px) {
  .site-footer.alalaas-reference-footer,
  .alalaas-reference-footer {
    margin-top: 92px !important;
  }

  .alalaas-reference-footer .footer-help-cta {
    transform: translateY(-46%) !important;
  }

  .alalaas-reference-footer .footer-help-cta + .footer-top-grid,
  .alalaas-reference-footer .footer-top-grid {
    margin-top: -76px !important;
    padding-top: 54px !important;
  }
}

@media (max-width: 560px) {
  .site-footer.alalaas-reference-footer,
  .alalaas-reference-footer {
    margin-top: 78px !important;
  }

  .alalaas-reference-footer .footer-help-cta {
    transform: translateY(-36%) !important;
    margin-bottom: 18px !important;
  }

  .alalaas-reference-footer .footer-help-cta + .footer-top-grid,
  .alalaas-reference-footer .footer-top-grid {
    margin-top: -44px !important;
    padding-top: 42px !important;
  }
}

/* =========================================================
   FOOTER NEED HELP HEIGHT UPDATE
   Requested: increase the height of the Need Help section.
   CSS-only update; existing HTML logic, scripts, ids, routes,
   dropdown and dynamic category loading unchanged.
========================================================= */
.alalaas-reference-footer .footer-help-cta {
  min-height: clamp(190px, 13vw, 240px) !important;
  padding-top: clamp(44px, 4.8vw, 68px) !important;
  padding-bottom: clamp(44px, 4.8vw, 68px) !important;
}

.alalaas-reference-footer .footer-help-content h3 {
  margin-bottom: 16px !important;
}

.alalaas-reference-footer .footer-help-content p {
  line-height: 1.85 !important;
}

@media (max-width: 900px) {
  .alalaas-reference-footer .footer-help-cta {
    min-height: 220px !important;
    padding-top: 42px !important;
    padding-bottom: 42px !important;
  }
}

@media (max-width: 560px) {
  .alalaas-reference-footer .footer-help-cta {
    min-height: 250px !important;
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }
}